Class-based rendering

js/grid.js

@@ -0,0 +1,77 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to set private field on non-instance");
+    }
+    privateMap.set(receiver, value);
+    return value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to get private field on non-instance");
+    }
+    return privateMap.get(receiver);
+};
+var _prnt, _tileset, _layers, _size_x, _size_y;
+import { Layer } from './layer.js';
+export class Grid {
+    constructor(prnt) {
+        _prnt.set(this, void 0);
+        _tileset.set(this, void 0);
+        _layers.set(this, new Map());
+        _size_x.set(this, void 0);
+        _size_y.set(this, void 0);
+        __classPrivateFieldSet(this, _prnt, prnt);
+        __classPrivateFieldGet(this, _prnt).style.display = 'grid';
+    }
+    set_size(x, y) {
+        __classPrivateFieldSet(this, _size_x, x);
+        __classPrivateFieldSet(this, _size_y, y);
+        // TODO: Notify layers if shrink
+        __classPrivateFieldGet(this, _prnt).style.gridTemplateColumns = `repeat(${x}, 1fr)`;
+        __classPrivateFieldGet(this, _prnt).style.gridTemplateRows = `repeat(${y}, 1fr)`;
+        // TODO: Notify layers if expand
+    }
+    set_tileset(set) {
+        __classPrivateFieldSet(this, _tileset, set);
+        __classPrivateFieldGet(this, _prnt).style.backgroundImage = this.get_url('land');
+        // TODO: Notify layers
+    }
+    set_layers(layers) {
+        const newNames = new Set(layers);
+        for (const name of newNames) {
+            if (!__classPrivateFieldGet(this, _layers).has(name)) {
+                const layer = new Layer(__classPrivateFieldGet(this, _size_x), __classPrivateFieldGet(this, _size_y));
+                layer.set_tileset(__classPrivateFieldGet(this, _tileset));
+                __classPrivateFieldGet(this, _layers).set(name, layer);
+            }
+        }
+        for (const name of __classPrivateFieldGet(this, _layers).keys()) {
+            if (!newNames.has(name)) {
+                // TODO: Notify layer to tear down
+                __classPrivateFieldGet(this, _layers).delete(name);
+            }
+        }
+        for (let i = 0; i < layers.length; i++) {
+            const name = layers[i];
+            const level = i + 1;
+            const layer = __classPrivateFieldGet(this, _layers).get(name);
+            layer.set_level(level);
+        }
+    }
+    add_tile(layer, tile, x, y) {
+        const elem = __classPrivateFieldGet(this, _layers).get(layer)?.add_tile(tile, x, y);
+        if (!elem) {
+            return false;
+        }
+        // Grids are 1-indexed
+        elem.style.gridColumnStart = `${x + 1}`;
+        elem.style.gridRowStart = `${y + 1}`;
+        __classPrivateFieldGet(this, _prnt).appendChild(elem);
+        return true;
+    }
+    get_url(tile) {
+        return `url("images/${__classPrivateFieldGet(this, _tileset)}/${tile}.svg")`;
+    }
+}
+_prnt = new WeakMap(), _tileset = new WeakMap(), _layers = new WeakMap(), _size_x = new WeakMap(), _size_y = new WeakMap();
+//# sourceMappingURL=grid.js.map

js/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../ts/grid.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,MAAM,OAAO,IAAI;IAOf,YAAY,IAAiB;QAN7B,wBAAmB;QACnB,2BAAiB;QACjB,kBAA8B,IAAI,GAAG,EAAiB,EAAC;QACvD,0BAAgB;QAChB,0BAAgB;QAGd,uBAAA,IAAI,SAAS,IAAI,EAAC;QAClB,oCAAW,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACpC,CAAC;IAED,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,uBAAA,IAAI,WAAW,CAAC,EAAC;QACjB,uBAAA,IAAI,WAAW,CAAC,EAAC;QAEjB,gCAAgC;QAEhC,oCAAW,KAAK,CAAC,mBAAmB,GAAG,UAAU,CAAC,QAAQ,CAAC;QAC3D,oCAAW,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,QAAQ,CAAC;QAExD,gCAAgC;IAClC,CAAC;IAED,WAAW,CAAC,GAAW;QACrB,uBAAA,IAAI,YAAY,GAAG,EAAC;QACpB,oCAAW,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAExD,sBAAsB;IACxB,CAAC;IAED,UAAU,CAAC,MAAgB;QACzB,MAAM,QAAQ,GAAgB,IAAI,GAAG,CAAS,MAAM,CAAC,CAAC;QAEtD,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE;YAC3B,IAAI,CAAC,sCAAa,GAAG,CAAC,IAAI,CAAC,EAAE;gBAC3B,MAAM,KAAK,GAAG,IAAI,KAAK,8EAA4B,CAAC;gBACpD,KAAK,CAAC,WAAW,wCAAe,CAAC;gBACjC,sCAAa,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;aAC/B;SACF;QAED,KAAK,MAAM,IAAI,IAAI,sCAAa,IAAI,EAAE,EAAE;YACtC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACvB,kCAAkC;gBAClC,sCAAa,MAAM,CAAC,IAAI,CAAC,CAAC;aAC3B;SACF;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACvB,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;YACpB,MAAM,KAAK,GAAG,sCAAa,GAAG,CAAC,IAAI,CAAE,CAAC;YACtC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;SACxB;IACH,CAAC;IAED,QAAQ,CAAC,KAAa,EAAE,IAAU,EAAE,CAAS,EAAE,CAAS;QACtD,MAAM,IAAI,GAAG,sCAAa,GAAG,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3D,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,KAAK,CAAC;SACd;QACD,sBAAsB;QACtB,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QACxC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QACrC,oCAAW,WAAW,CAAC,IAAI,CAAC,CAAC;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,OAAO,CAAC,IAAY;QAC1B,OAAO,eAAe,sCAAa,IAAI,IAAI,QAAQ,CAAC;IACtD,CAAC;CACF"}

js/layer.js

@@ -0,0 +1,80 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to set private field on non-instance");
+    }
+    privateMap.set(receiver, value);
+    return value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to get private field on non-instance");
+    }
+    return privateMap.get(receiver);
+};
+var _size_x, _size_y, _level, _tileset, _occupied;
+export class Layer {
+    constructor(size_x, size_y) {
+        _size_x.set(this, void 0);
+        _size_y.set(this, void 0);
+        _level.set(this, void 0);
+        _tileset.set(this, void 0);
+        _occupied.set(this, void 0);
+        __classPrivateFieldSet(this, _size_x, size_x);
+        __classPrivateFieldSet(this, _size_y, size_y);
+        __classPrivateFieldSet(this, _occupied, []);
+        for (let xi = 0; xi < __classPrivateFieldGet(this, _size_x); xi++) {
+            __classPrivateFieldGet(this, _occupied).push(Array(__classPrivateFieldGet(this, _size_y)).fill(false));
+        }
+    }
+    set_level(level) {
+        __classPrivateFieldSet(this, _level, level);
+    }
+    set_tileset(tileset) {
+        __classPrivateFieldSet(this, _tileset, tileset);
+    }
+    add_tile(tile, x, y) {
+        if (!this.can_add(tile, x, y)) {
+            return undefined;
+        }
+        this.mark_occupied(tile, x, y);
+        const elem = tile.get_elem(__classPrivateFieldGet(this, _tileset));
+        elem.style.zIndex = `${__classPrivateFieldGet(this, _level)}`;
+        return elem;
+    }
+    can_add(tile, x, y) {
+        const mask = tile.get_mask();
+        for (let xi = 0; xi < mask.length; xi++) {
+            if (x + xi >= __classPrivateFieldGet(this, _occupied).length) {
+                // Shape goes off grid (x)
+                return false;
+            }
+            for (let yi = 0; yi < mask[xi].length; yi++) {
+                if (!mask[xi][yi]) {
+                    continue;
+                }
+                if (y + yi >= __classPrivateFieldGet(this, _occupied)[x + xi].length) {
+                    // Shape goes off grid (y)
+                    return false;
+                }
+                if (__classPrivateFieldGet(this, _occupied)[x + xi][y + yi]) {
+                    // Conflicts
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    mark_occupied(tile, x, y) {
+        const mask = tile.get_mask();
+        for (let xi = 0; xi < mask.length; xi++) {
+            for (let yi = 0; yi < mask[xi].length; yi++) {
+                if (!mask[xi][yi]) {
+                    continue;
+                }
+                __classPrivateFieldGet(this, _occupied)[x + xi][y + yi] = true;
+            }
+        }
+    }
+}
+_size_x = new WeakMap(), _size_y = new WeakMap(), _level = new WeakMap(), _tileset = new WeakMap(), _occupied = new WeakMap();
+//# sourceMappingURL=layer.js.map

js/layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer.js","sourceRoot":"","sources":["../ts/layer.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAEA,MAAM,OAAO,KAAK;IAQhB,YAAY,MAAc,EAAE,MAAc;QAP1C,0BAAgB;QAChB,0BAAgB;QAChB,yBAAe;QACf,2BAAiB;QAEjB,4BAAuB;QAGrB,uBAAA,IAAI,WAAW,MAAM,EAAC;QACtB,uBAAA,IAAI,WAAW,MAAM,EAAC;QAEtB,uBAAA,IAAI,aAAa,EAAE,EAAC;QAEpB,KAAK,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,wCAAe,EAAE,EAAE,EAAE,EAAE;YACxC,wCAAe,IAAI,CAAC,KAAK,uCAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;SACtD;IACH,CAAC;IAED,SAAS,CAAC,KAAa;QACrB,uBAAA,IAAI,UAAU,KAAK,EAAC;IACtB,CAAC;IAED,WAAW,CAAC,OAAe;QACzB,uBAAA,IAAI,YAAY,OAAO,EAAC;IAC1B,CAAC;IAED,QAAQ,CAAC,IAAU,EAAE,CAAS,EAAE,CAAS;QACvC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;YAC7B,OAAO,SAAS,CAAC;SAClB;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAE/B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,wCAAe,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,oCAAW,EAAE,CAAC;QAErC,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,OAAO,CAAC,IAAU,EAAE,CAAS,EAAE,CAAS;QAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAE7B,KAAK,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;YACvC,IAAI,CAAC,GAAG,EAAE,IAAI,wCAAe,MAAM,EAAE;gBACnC,0BAA0B;gBAC1B,OAAO,KAAK,CAAC;aACd;YAED,KAAK,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;gBAC3C,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;oBACjB,SAAS;iBACV;gBAED,IAAI,CAAC,GAAG,EAAE,IAAI,wCAAe,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE;oBAC3C,0BAA0B;oBAC1B,OAAO,KAAK,CAAC;iBACd;gBAED,IAAI,wCAAe,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE;oBAClC,YAAY;oBACZ,OAAO,KAAK,CAAC;iBACd;aACF;SACF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,aAAa,CAAC,IAAU,EAAE,CAAS,EAAE,CAAS;QACpD,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAE7B,KAAK,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;YACvC,KAAK,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;gBAC3C,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;oBACjB,SAAS;iBACV;gBAED,wCAAe,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC;aACvC;SACF;IACH,CAAC;CACF"}

js/shape.js

@@ -0,0 +1,10 @@
+export class Shape {
+    get_mask() {
+    }
+    get_elem(get_url) {
+        const elem = document.createElement('div');
+        elem.style.backgroundImage = `url("${get_url('road-lr')}")`;
+        elem.style.backgroundSize = 'cover';
+    }
+}
+//# sourceMappingURL=shape.js.map

js/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","sourceRoot":"","sources":["../ts/shape.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,KAAK;IAChB,QAAQ;IACR,CAAC;IAED,QAAQ,CAAC,OAAiC;QACxC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC;QAC5D,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;IACtC,CAAC;CACF"}

js/tile.js

@@ -0,0 +1,43 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to set private field on non-instance");
+    }
+    privateMap.set(receiver, value);
+    return value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to get private field on non-instance");
+    }
+    return privateMap.get(receiver);
+};
+var _name, _width, _height, _mask;
+export class Tile {
+    constructor(name, width, height, mask) {
+        _name.set(this, void 0);
+        _width.set(this, void 0);
+        _height.set(this, void 0);
+        _mask.set(this, void 0);
+        __classPrivateFieldSet(this, _name, name);
+        __classPrivateFieldSet(this, _width, width);
+        __classPrivateFieldSet(this, _height, height);
+        __classPrivateFieldSet(this, _mask, mask);
+    }
+    static rectangle(name, width, height) {
+        const mask = Array(width).fill(Array(height).fill(true));
+        return new Tile(name, width, height, mask);
+    }
+    get_mask() {
+        return __classPrivateFieldGet(this, _mask);
+    }
+    get_elem(tileset) {
+        const elem = document.createElement('div');
+        elem.style.backgroundImage = `url("images/${tileset}/${__classPrivateFieldGet(this, _name)}.svg")`;
+        elem.style.backgroundSize = 'cover';
+        elem.style.gridColumnEnd = `span ${__classPrivateFieldGet(this, _width)}`;
+        elem.style.gridRowEnd = `span ${__classPrivateFieldGet(this, _height)}`;
+        return elem;
+    }
+}
+_name = new WeakMap(), _width = new WeakMap(), _height = new WeakMap(), _mask = new WeakMap();
+//# sourceMappingURL=tile.js.map

js/tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../ts/tile.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,MAAM,OAAO,IAAI;IAMf,YAAY,IAAY,EAAE,KAAa,EAAE,MAAc,EAAE,IAAiB;QAL1E,wBAAc;QACd,yBAAe;QACf,0BAAgB;QAChB,wBAAmB;QAGjB,uBAAA,IAAI,SAAS,IAAI,EAAC;QAClB,uBAAA,IAAI,UAAU,KAAK,EAAC;QACpB,uBAAA,IAAI,WAAW,MAAM,EAAC;QACtB,uBAAA,IAAI,SAAS,IAAI,EAAC;IACpB,CAAC;IAED,MAAM,CAAC,SAAS,CAAC,IAAY,EAAE,KAAa,EAAE,MAAc;QAC1D,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACzD,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IAC7C,CAAC;IAED,QAAQ;QACN,2CAAkB;IACpB,CAAC;IAED,QAAQ,CAAC,OAAe;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,OAAO,IAAI,mCAAU,QAAQ,CAAC;QAC1E,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,oCAAW,EAAE,CAAC;QACjD,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,qCAAY,EAAE,CAAC;QAC/C,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

js/tiles.js

@@ -0,0 +1,19 @@
+import { Tile } from './tile.js';
+// Straight
+export const ROAD_LR = Tile.rectangle('road-lr', 6, 4);
+export const ROAD_TB = Tile.rectangle('road-tb', 4, 6);
+// Elbow
+export const ROAD_BL = Tile.rectangle('road-bl', 6, 6);
+export const ROAD_BR = Tile.rectangle('road-br', 6, 6);
+export const ROAD_TL = Tile.rectangle('road-tl', 6, 6);
+export const ROAD_TR = Tile.rectangle('road-tr', 6, 6);
+// T
+export const ROAD_BLR = Tile.rectangle('road-blr', 8, 6);
+export const ROAD_TLR = Tile.rectangle('road-tlr', 8, 6);
+export const ROAD_LTB = Tile.rectangle('road-ltb', 6, 8);
+export const ROAD_RTB = Tile.rectangle('road-rtb', 6, 8);
+// +
+export const ROAD_TBLR = Tile.rectangle('road-tblr', 8, 8);
+// Tower base
+export const EMPTY = Tile.rectangle('empty', 4, 2);
+//# sourceMappingURL=tiles.js.map

js/tiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiles.js","sourceRoot":"","sources":["../ts/tiles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,WAAW;AACX,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEvD,QAAQ;AACR,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEvD,IAAI;AACJ,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEzD,IAAI;AACJ,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAE3D,aAAa;AACb,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC"}

js/tower.js

@@ -1,4 +1,5 @@
-import { TowerMap } from './tower_map.js';
+import { Grid } from './grid.js';
+import * as tiles from './tiles.js';
 export function main() {
     document.body.style.margin = '0';
     document.body.style.backgroundColor = 'black';
@@ -6,9 +7,22 @@ export function main() {
     document.body.appendChild(container);
     container.style.width = '100vmin';
     container.style.height = '100vmin';
-    const map = new TowerMap(container);
-    map.set_size(20, 20);
-    map.set_tileset('tropical');
+    const grid = new Grid(container);
+    grid.set_size(40, 40);
+    grid.set_tileset('tropical');
+    grid.set_layers(['water', 'road']);
+    grid.add_tile('road', tiles.ROAD_LR, 0, 2);
+    grid.add_tile('road', tiles.ROAD_BL, 6, 2);
+    grid.add_tile('road', tiles.ROAD_TB, 8, 8);
+    grid.add_tile('road', tiles.ROAD_TR, 8, 14);
+    grid.add_tile('road', tiles.ROAD_TL, 14, 14);
+    grid.add_tile('road', tiles.ROAD_BR, 16, 8);
+    grid.add_tile('road', tiles.ROAD_LTB, 22, 6);
+    grid.add_tile('road', tiles.ROAD_BLR, 22, 0);
+    grid.add_tile('road', tiles.ROAD_TLR, 22, 14);
+    grid.add_tile('road', tiles.ROAD_RTB, 34, 32);
+    grid.add_tile('road', tiles.ROAD_TBLR, 30, 14);
+    grid.add_tile('road', tiles.EMPTY, 14, 6);
 }
 ;
 main();

js/tower.js.map

@@ -1 +1 @@
-{"version":3,"file":"tower.js","sourceRoot":"","sources":["../ts/tower.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,UAAU,IAAI;IAClB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,OAAO,CAAC;IAE9C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;IAEnC,MAAM,GAAG,GAAG,IAAI,QAAQ,CAAC,SAAS,CAAC,CAAC;IACpC,GAAG,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IACrB,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC9B,CAAC;AAAA,CAAC;AAEF,IAAI,EAAE,CAAC"}
+{"version":3,"file":"tower.js","sourceRoot":"","sources":["../ts/tower.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AAEpC,MAAM,UAAU,IAAI;IAClB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,OAAO,CAAC;IAE9C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;IAEnC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IACtB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC7B,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAC5C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAC7C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAC7C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;AAC5C,CAAC;AAAA,CAAC;AAEF,IAAI,EAAE,CAAC"}

js/tower_map.js

@@ -11,11 +11,13 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     }
     return privateMap.get(receiver);
 };
-var _prnt, _tileset;
+var _prnt, _tileset, _layers;
+import { Layer } from './layer.js';
 export class TowerMap {
     constructor(prnt) {
         _prnt.set(this, void 0);
         _tileset.set(this, void 0);
+        _layers.set(this, new Map());
         __classPrivateFieldSet(this, _prnt, prnt);
         __classPrivateFieldGet(this, _prnt).style.display = 'grid';
     }
@@ -27,9 +29,28 @@ export class TowerMap {
         __classPrivateFieldSet(this, _tileset, set);
         __classPrivateFieldGet(this, _prnt).style.backgroundImage = this.get_url('land');
     }
+    set_layers(layers) {
+        const newNames = new Set(layers);
+        for (const name of newNames) {
+            if (!__classPrivateFieldGet(this, _layers).has(name)) {
+                __classPrivateFieldGet(this, _layers).set(name, new Layer());
+            }
+        }
+        for (const name of __classPrivateFieldGet(this, _layers).keys()) {
+            if (!newNames.has(name)) {
+                __classPrivateFieldGet(this, _layers).delete(name);
+            }
+        }
+        for (let i = 0; i < layers.length; i++) {
+            const name = layers[i];
+            const level = i + 1;
+            const layer = __classPrivateFieldGet(this, _layers).get(name);
+            layer.set_level(level);
+        }
+    }
     get_url(tile) {
         return `url("images/${__classPrivateFieldGet(this, _tileset)}/${tile}.svg")`;
     }
 }
-_prnt = new WeakMap(), _tileset = new WeakMap();
+_prnt = new WeakMap(), _tileset = new WeakMap(), _layers = new WeakMap();
 //# sourceMappingURL=tower_map.js.map

js/tower_map.js.map

@@ -1 +1 @@
-{"version":3,"file":"tower_map.js","sourceRoot":"","sources":["../ts/tower_map.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,MAAM,OAAO,QAAQ;IAInB,YAAY,IAAiB;QAH7B,wBAAmB;QACnB,2BAAiB;QAGf,uBAAA,IAAI,SAAS,IAAI,EAAC;QAClB,oCAAW,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACpC,CAAC;IAED,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,oCAAW,KAAK,CAAC,mBAAmB,GAAG,UAAU,CAAC,QAAQ,CAAC;QAC3D,oCAAW,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,QAAQ,CAAC;IAC1D,CAAC;IAED,WAAW,CAAC,GAAW;QACrB,uBAAA,IAAI,YAAY,GAAG,EAAC;QACpB,oCAAW,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC1D,CAAC;IAEO,OAAO,CAAC,IAAY;QAC1B,OAAO,eAAe,sCAAa,IAAI,IAAI,QAAQ,CAAC;IACtD,CAAC;CACF"}
+{"version":3,"file":"tower_map.js","sourceRoot":"","sources":["../ts/tower_map.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,MAAM,OAAO,QAAQ;IAKnB,YAAY,IAAiB;QAJ7B,wBAAmB;QACnB,2BAAiB;QACjB,kBAA8B,IAAI,GAAG,EAAiB,EAAC;QAGrD,uBAAA,IAAI,SAAS,IAAI,EAAC;QAClB,oCAAW,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACpC,CAAC;IAED,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,oCAAW,KAAK,CAAC,mBAAmB,GAAG,UAAU,CAAC,QAAQ,CAAC;QAC3D,oCAAW,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,QAAQ,CAAC;IAC1D,CAAC;IAED,WAAW,CAAC,GAAW;QACrB,uBAAA,IAAI,YAAY,GAAG,EAAC;QACpB,oCAAW,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC1D,CAAC;IAED,UAAU,CAAC,MAAgB;QACzB,MAAM,QAAQ,GAAgB,IAAI,GAAG,CAAS,MAAM,CAAC,CAAC;QAEtD,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE;YAC3B,IAAI,CAAC,sCAAa,GAAG,CAAC,IAAI,CAAC,EAAE;gBAC3B,sCAAa,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,EAAE,CAAC,CAAC;aACrC;SACF;QAED,KAAK,MAAM,IAAI,IAAI,sCAAa,IAAI,EAAE,EAAE;YACtC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACvB,sCAAa,MAAM,CAAC,IAAI,CAAC,CAAC;aAC3B;SACF;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACvB,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;YACpB,MAAM,KAAK,GAAG,sCAAa,GAAG,CAAC,IAAI,CAAE,CAAC;YACtC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;SACxB;IACH,CAAC;IAEO,OAAO,CAAC,IAAY;QAC1B,OAAO,eAAe,sCAAa,IAAI,IAAI,QAAQ,CAAC;IACtD,CAAC;CACF"}

ts/grid.ts

@@ -0,0 +1,76 @@
+import { Layer } from './layer.js';
+import { Tile } from './tile.js';
+
+export class Grid {
+  #prnt: HTMLElement;
+  #tileset: string;
+  #layers: Map<string, Layer> = new Map<string, Layer>();
+  #size_x: number;
+  #size_y: number;
+
+  constructor(prnt: HTMLElement) {
+    this.#prnt = prnt;
+    this.#prnt.style.display = 'grid';
+  }
+
+  set_size(x: number, y: number) {
+    this.#size_x = x;
+    this.#size_y = y;
+
+    // TODO: Notify layers if shrink
+
+    this.#prnt.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
+    this.#prnt.style.gridTemplateRows = `repeat(${y}, 1fr)`;
+
+    // TODO: Notify layers if expand
+  }
+
+  set_tileset(set: string) {
+    this.#tileset = set;
+    this.#prnt.style.backgroundImage = this.get_url('land');
+
+    // TODO: Notify layers
+  }
+
+  set_layers(layers: string[]) {
+    const newNames: Set<string> = new Set<string>(layers);
+
+    for (const name of newNames) {
+      if (!this.#layers.has(name)) {
+        const layer = new Layer(this.#size_x, this.#size_y);
+        layer.set_tileset(this.#tileset);
+        this.#layers.set(name, layer);
+      }
+    }
+
+    for (const name of this.#layers.keys()) {
+      if (!newNames.has(name)) {
+        // TODO: Notify layer to tear down
+        this.#layers.delete(name);
+      }
+    }
+
+    for (let i = 0; i < layers.length; i++) {
+      const name = layers[i];
+      const level = i + 1;
+      const layer = this.#layers.get(name)!;
+      layer.set_level(level);
+    }
+  }
+
+  add_tile(layer: string, tile: Tile, x: number, y: number): boolean {
+    const elem = this.#layers.get(layer)?.add_tile(tile, x, y);
+    if (!elem) {
+      return false;
+    }
+    // Grids are 1-indexed
+    elem.style.gridColumnStart = `${x + 1}`;
+    elem.style.gridRowStart = `${y + 1}`;
+    this.#prnt.appendChild(elem);
+    return true;
+  }
+
+  private get_url(tile: string) {
+    return `url("images/${this.#tileset}/${tile}.svg")`;
+  }
+}

ts/layer.ts

@@ -0,0 +1,85 @@
+import { Tile } from './tile.js';
+
+export class Layer {
+  #size_x: number;
+  #size_y: number;
+  #level: number;
+  #tileset: string;
+
+  #occupied: boolean[][];
+
+  constructor(size_x: number, size_y: number) {
+    this.#size_x = size_x;
+    this.#size_y = size_y;
+
+    this.#occupied = [];
+
+    for (let xi = 0; xi < this.#size_x; xi++) {
+      this.#occupied.push(Array(this.#size_y).fill(false));
+    }
+  }
+
+  set_level(level: number) {
+    this.#level = level;
+  }
+
+  set_tileset(tileset: string) {
+    this.#tileset = tileset;
+  }
+
+  add_tile(tile: Tile, x: number, y: number): HTMLElement | undefined {
+    if (!this.can_add(tile, x, y)) {
+      return undefined;
+    }
+
+    this.mark_occupied(tile, x, y);
+
+    const elem = tile.get_elem(this.#tileset);
+    elem.style.zIndex = `${this.#level}`;
+
+    return elem;
+  }
+
+  private can_add(tile: Tile, x: number, y: number) {
+    const mask = tile.get_mask();
+
+    for (let xi = 0; xi < mask.length; xi++) {
+      if (x + xi >= this.#occupied.length) {
+        // Shape goes off grid (x)
+        return false;
+      }
+
+      for (let yi = 0; yi < mask[xi].length; yi++) {
+        if (!mask[xi][yi]) {
+          continue;
+        }
+
+        if (y + yi >= this.#occupied[x + xi].length) {
+          // Shape goes off grid (y)
+          return false;
+        }
+
+        if (this.#occupied[x + xi][y + yi]) {
+          // Conflicts
+          return false;
+        }
+      }
+    }
+
+    return true;
+  }
+
+  private mark_occupied(tile: Tile, x: number, y: number) {
+    const mask = tile.get_mask();
+
+    for (let xi = 0; xi < mask.length; xi++) {
+      for (let yi = 0; yi < mask[xi].length; yi++) {
+        if (!mask[xi][yi]) {
+          continue;
+        }
+
+        this.#occupied[x + xi][y + yi] = true;
+      }
+    }
+  }
+}

ts/tile.ts

@@ -0,0 +1,31 @@
+export class Tile {
+  #name: string;
+  #width: number;
+  #height: number;
+  #mask: boolean[][];
+
+  constructor(name: string, width: number, height: number, mask: boolean[][]) {
+    this.#name = name;
+    this.#width = width;
+    this.#height = height;
+    this.#mask = mask;
+  }
+
+  static rectangle(name: string, width: number, height: number): Tile {
+    const mask = Array(width).fill(Array(height).fill(true));
+    return new Tile(name, width, height, mask);
+  }
+
+  get_mask(): boolean[][] {
+    return this.#mask;
+  }
+
+  get_elem(tileset: string): HTMLElement {
+    const elem = document.createElement('div');
+    elem.style.backgroundImage = `url("images/${tileset}/${this.#name}.svg")`;
+    elem.style.backgroundSize = 'cover';
+    elem.style.gridColumnEnd = `span ${this.#width}`;
+    elem.style.gridRowEnd = `span ${this.#height}`;
+    return elem;
+  }
+}

ts/tiles.ts

@@ -0,0 +1,23 @@
+import { Tile } from './tile.js';
+
+// Straight
+export const ROAD_LR = Tile.rectangle('road-lr', 6, 4);
+export const ROAD_TB = Tile.rectangle('road-tb', 4, 6);
+
+// Elbow
+export const ROAD_BL = Tile.rectangle('road-bl', 6, 6);
+export const ROAD_BR = Tile.rectangle('road-br', 6, 6);
+export const ROAD_TL = Tile.rectangle('road-tl', 6, 6);
+export const ROAD_TR = Tile.rectangle('road-tr', 6, 6);
+
+// T
+export const ROAD_BLR = Tile.rectangle('road-blr', 8, 6);
+export const ROAD_TLR = Tile.rectangle('road-tlr', 8, 6);
+export const ROAD_LTB = Tile.rectangle('road-ltb', 6, 8);
+export const ROAD_RTB = Tile.rectangle('road-rtb', 6, 8);
+
+// +
+export const ROAD_TBLR = Tile.rectangle('road-tblr', 8, 8);
+
+// Tower base
+export const EMPTY = Tile.rectangle('empty', 4, 2);

ts/tower.ts

@@ -1,4 +1,5 @@
-import { TowerMap } from './tower_map.js';
+import { Grid } from './grid.js';
+import * as tiles from './tiles.js';
 
 export function main() {
   document.body.style.margin = '0';
@@ -9,9 +10,22 @@ export function main() {
   container.style.width = '100vmin';
   container.style.height = '100vmin';
 
-  const map = new TowerMap(container);
-  map.set_size(20, 20);
-  map.set_tileset('tropical');
+  const grid = new Grid(container);
+  grid.set_size(40, 40);
+  grid.set_tileset('tropical');
+  grid.set_layers(['water', 'road']);
+  grid.add_tile('road', tiles.ROAD_LR, 0, 2);
+  grid.add_tile('road', tiles.ROAD_BL, 6, 2);
+  grid.add_tile('road', tiles.ROAD_TB, 8, 8);
+  grid.add_tile('road', tiles.ROAD_TR, 8, 14);
+  grid.add_tile('road', tiles.ROAD_TL, 14, 14);
+  grid.add_tile('road', tiles.ROAD_BR, 16, 8);
+  grid.add_tile('road', tiles.ROAD_LTB, 22, 6);
+  grid.add_tile('road', tiles.ROAD_BLR, 22, 0);
+  grid.add_tile('road', tiles.ROAD_TLR, 22, 14);
+  grid.add_tile('road', tiles.ROAD_RTB, 34, 32);
+  grid.add_tile('road', tiles.ROAD_TBLR, 30, 14);
+  grid.add_tile('road', tiles.EMPTY, 14, 6);
 };
 
 main();

ts/tower_map.ts

@@ -1,23 +0,0 @@
-export class TowerMap {
-  #prnt: HTMLElement;
-  #tileset: string;
-
-  constructor(prnt: HTMLElement) {
-    this.#prnt = prnt;
-    this.#prnt.style.display = 'grid';
-  }
-
-  set_size(x: number, y: number) {
-    this.#prnt.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
-    this.#prnt.style.gridTemplateRows = `repeat(${y}, 1fr)`;
-  }
-
-  set_tileset(set: string) {
-    this.#tileset = set;
-    this.#prnt.style.backgroundImage = this.get_url('land');
-  }
-
-  private get_url(tile: string) {
-    return `url("images/${this.#tileset}/${tile}.svg")`;
-  }
-}

tsconfig.json

@@ -15,7 +15,10 @@
     "strictNullChecks": true
   },
   "files": [
-    "ts/tower.ts",
-    "ts/tower_map.ts"
+    "ts/grid.ts",
+    "ts/layer.ts",
+    "ts/tile.ts",
+    "ts/tiles.ts",
+    "ts/tower.ts"
   ]
 }