From a134f8c2379c5aa8c24646962cea5775cb7a9df9 Mon Sep 17 00:00:00 2001 From: Ian Gulliver Date: Sun, 9 May 2021 04:58:29 +0000 Subject: [PATCH] Class-based rendering --- js/grid.js | 77 ++++++++++++++++++++++++++++++++++++++++ js/grid.js.map | 1 + js/layer.js | 80 ++++++++++++++++++++++++++++++++++++++++++ js/layer.js.map | 1 + js/shape.js | 10 ++++++ js/shape.js.map | 1 + js/tile.js | 43 +++++++++++++++++++++++ js/tile.js.map | 1 + js/tiles.js | 19 ++++++++++ js/tiles.js.map | 1 + js/tower.js | 22 +++++++++--- js/tower.js.map | 2 +- js/tower_map.js | 25 +++++++++++-- js/tower_map.js.map | 2 +- ts/grid.ts | 76 ++++++++++++++++++++++++++++++++++++++++ ts/layer.ts | 85 +++++++++++++++++++++++++++++++++++++++++++++ ts/tile.ts | 31 +++++++++++++++++ ts/tiles.ts | 23 ++++++++++++ ts/tower.ts | 22 +++++++++--- ts/tower_map.ts | 23 ------------ tsconfig.json | 7 ++-- 21 files changed, 515 insertions(+), 37 deletions(-) create mode 100644 js/grid.js create mode 100644 js/grid.js.map create mode 100644 js/layer.js create mode 100644 js/layer.js.map create mode 100644 js/shape.js create mode 100644 js/shape.js.map create mode 100644 js/tile.js create mode 100644 js/tile.js.map create mode 100644 js/tiles.js create mode 100644 js/tiles.js.map create mode 100644 ts/grid.ts create mode 100644 ts/layer.ts create mode 100644 ts/tile.ts create mode 100644 ts/tiles.ts delete mode 100644 ts/tower_map.ts diff --git a/js/grid.js b/js/grid.js new file mode 100644 index 0000000..9dd165a --- /dev/null +++ b/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 \ No newline at end of file diff --git a/js/grid.js.map b/js/grid.js.map new file mode 100644 index 0000000..e3cf66c --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/js/layer.js b/js/layer.js new file mode 100644 index 0000000..6d367ee --- /dev/null +++ b/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 \ No newline at end of file diff --git a/js/layer.js.map b/js/layer.js.map new file mode 100644 index 0000000..558da10 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/js/shape.js b/js/shape.js new file mode 100644 index 0000000..7428555 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/js/shape.js.map b/js/shape.js.map new file mode 100644 index 0000000..d150163 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/js/tile.js b/js/tile.js new file mode 100644 index 0000000..2dba8d3 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/js/tile.js.map b/js/tile.js.map new file mode 100644 index 0000000..706d114 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/js/tiles.js b/js/tiles.js new file mode 100644 index 0000000..299c3cb --- /dev/null +++ b/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 \ No newline at end of file diff --git a/js/tiles.js.map b/js/tiles.js.map new file mode 100644 index 0000000..5074195 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/js/tower.js b/js/tower.js index bfc89f9..380d3a2 100644 --- a/js/tower.js +++ b/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(); diff --git a/js/tower.js.map b/js/tower.js.map index 71deda8..301a232 100644 --- a/js/tower.js.map +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/js/tower_map.js b/js/tower_map.js index 733625e..797e37f 100644 --- a/js/tower_map.js +++ b/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 \ No newline at end of file diff --git a/js/tower_map.js.map b/js/tower_map.js.map index ba640c0..708954f 100644 --- a/js/tower_map.js.map +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/ts/grid.ts b/ts/grid.ts new file mode 100644 index 0000000..18e4a22 --- /dev/null +++ b/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 = new Map(); + #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 = new Set(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")`; + } +} diff --git a/ts/layer.ts b/ts/layer.ts new file mode 100644 index 0000000..64eda2d --- /dev/null +++ b/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; + } + } + } +} diff --git a/ts/tile.ts b/ts/tile.ts new file mode 100644 index 0000000..f8eaede --- /dev/null +++ b/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; + } +} diff --git a/ts/tiles.ts b/ts/tiles.ts new file mode 100644 index 0000000..2d5bc93 --- /dev/null +++ b/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); diff --git a/ts/tower.ts b/ts/tower.ts index 55aa10a..31a2578 100644 --- a/ts/tower.ts +++ b/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(); diff --git a/ts/tower_map.ts b/ts/tower_map.ts deleted file mode 100644 index ee44093..0000000 --- a/ts/tower_map.ts +++ /dev/null @@ -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")`; - } -} diff --git a/tsconfig.json b/tsconfig.json index 6a93b49..e14d066 100644 --- a/tsconfig.json +++ b/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" ] }