diff --git a/src/003-assets/CSS/arcologyBuilding.css b/src/003-assets/CSS/arcologyBuilding.css index e83098275247e6752efb2364ddc9793c9444f8f8..454882e38f22d141cd6da8551bf7fdf21efd0b1d 100644 --- a/src/003-assets/CSS/arcologyBuilding.css +++ b/src/003-assets/CSS/arcologyBuilding.css @@ -24,7 +24,7 @@ div.building div.outerCell { flex-direction: row; } -div.building div.innerCell:not(.filler) { +div.building div.innerCell { margin: 3px; border: 5px solid; padding: 2px; @@ -35,6 +35,12 @@ div.building div.innerCell:not(.filler) { background-color: #111; } +div.building div.decorative { + outline: white solid 5px; + outline-offset: -8px; + height: 2em; +} + /* introduction special formatting */ /* makes all links unusable */ .intro div.building a { diff --git a/src/arcologyBuilding/decorative.js b/src/arcologyBuilding/decorative.js new file mode 100644 index 0000000000000000000000000000000000000000..be279a569d5e38c62dd5c7a56646a8078de7139c --- /dev/null +++ b/src/arcologyBuilding/decorative.js @@ -0,0 +1,53 @@ +App.Arcology.Cell.Decorative = class extends App.Arcology.Cell.BaseCell { + /** + * @param {number} width in cells + * @param {number} [xOffset=0] in % + * @param {number} [yOffset=0] in px + * @param {number} [rotation=0] in deg + * @param {number} [cellHeight=0] in px, if default height is not enough to stop stuff going offscreen + * @param {number} [absoluteWidth=0] 0/1, if width and xOffset should be read as absolute pixels + */ + constructor({width, xOffset = 0, yOffset = 0, rotation = 0, cellHeight = 0, absoluteWidth = 0} = {}) { + super(1); + this._width = width; + this._xOffset = xOffset; + this._yOffset = yOffset; + this._rotation = rotation; + this._cellHeight = cellHeight; + this._absoluteWidth = absoluteWidth; + } + + get width() { + return this._absoluteWidth ? 0 : this._width; + } + + renderCell(path, width) { + const outerCell = document.createElement("div"); + outerCell.style.width = `${width * this.width}%`; + + if (this._cellHeight > 0) { + outerCell.style.height = `${this._cellHeight}px`; + } + + const innerCell = document.createElement("div"); + innerCell.classList.add("decorative"); + if (this._absoluteWidth) { + innerCell.style.width = `${this._width}px`; + } + innerCell.style.transform = `translate(${this._xOffset}${this._absoluteWidth ? "px" : "%"}, ${this._yOffset}px) rotate(${this._rotation}deg)`; + outerCell.append(innerCell); + + return outerCell; + } + + get className() { return "App.Arcology.Cell.Decorative"; } + + static _cleanupConfigScheme(config) { + super._cleanupConfigScheme(config); + // BC code + } + + clone() { + return (new App.Arcology.Cell.Decorative())._init(this); + } +};