Depth stacking within layers

This commit is contained in:
Ian Gulliver
2021-05-11 03:41:01 +00:00
parent b027777a08
commit ffe531d5e5
6 changed files with 52 additions and 88 deletions

View File

@@ -1,65 +1,47 @@
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;
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());
__classPrivateFieldSet(this, _prnt, prnt);
__classPrivateFieldGet(this, _prnt).style.display = 'grid';
this.layers = new Map();
this.prnt = prnt;
this.prnt.style.display = 'grid';
}
set_size(x, y) {
__classPrivateFieldGet(this, _prnt).style.gridTemplateColumns = `repeat(${x}, 1fr)`;
__classPrivateFieldGet(this, _prnt).style.gridTemplateRows = `repeat(${y}, 1fr)`;
this.height = y;
this.prnt.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
this.prnt.style.gridTemplateRows = `repeat(${y}, 1fr)`;
}
set_tileset(set) {
__classPrivateFieldSet(this, _tileset, set);
__classPrivateFieldGet(this, _prnt).style.backgroundImage = `url("images/${__classPrivateFieldGet(this, _tileset)}/land.svg")`;
this.tileset = set;
this.prnt.style.backgroundImage = `url("images/${this.tileset}/land.svg")`;
// TODO: Notify layers
}
set_layers(layers) {
const newNames = new Set(layers);
for (const name of newNames) {
if (!__classPrivateFieldGet(this, _layers).has(name)) {
if (!this.layers.has(name)) {
const layer = new Layer();
layer.set_tileset(__classPrivateFieldGet(this, _tileset));
__classPrivateFieldGet(this, _layers).set(name, layer);
layer.set_tileset(this.tileset);
this.layers.set(name, layer);
}
}
for (const name of __classPrivateFieldGet(this, _layers).keys()) {
for (const name of this.layers.keys()) {
if (!newNames.has(name)) {
// TODO: Notify layer to tear down
__classPrivateFieldGet(this, _layers).delete(name);
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);
const layer = this.layers.get(layers[i]);
layer.set_level(i * this.height);
}
}
add_tile(tile_factory, x, y) {
const tile = __classPrivateFieldGet(this, _layers).get(tile_factory.layer_name).add_tile(tile_factory);
const tile = this.layers.get(tile_factory.layer_name).add_tile(tile_factory, y);
// Grids are 1-indexed
tile.elem.style.gridColumnStart = `${x + 1}`;
tile.elem.style.gridRowStart = `${y + 1}`;
__classPrivateFieldGet(this, _prnt).appendChild(tile.elem);
this.prnt.appendChild(tile.elem);
return tile;
}
}
_prnt = new WeakMap(), _tileset = new WeakMap(), _layers = new WeakMap();
//# sourceMappingURL=grid.js.map

View File

@@ -1 +1 @@
{"version":3,"file":"grid.js","sourceRoot":"","sources":["../ts/grid.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC,MAAM,OAAO,IAAI;IAKf,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,eAAe,sCAAa,aAAa,CAAC;QAE7E,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,EAAE,CAAC;gBAC1B,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,YAAyB,EAAE,CAAS,EAAE,CAAS;QACtD,MAAM,IAAI,GAAG,sCAAa,GAAG,CAAC,YAAY,CAAC,UAAU,CAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAE/E,sBAAsB;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC7C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC1C,oCAAW,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAElC,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}
{"version":3,"file":"grid.js","sourceRoot":"","sources":["../ts/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC,MAAM,OAAO,IAAI;IAMf,YAAY,IAAiB;QAH7B,WAAM,GAAuB,IAAI,GAAG,EAAiB,CAAC;QAIpD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACnC,CAAC;IAED,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAEhB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,UAAU,CAAC,QAAQ,CAAC;QAC1D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,QAAQ,CAAC;IACzD,CAAC;IAED,WAAW,CAAC,GAAW;QACrB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,IAAI,CAAC,OAAO,aAAa,CAAC;QAE3E,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,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAC1B,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;gBAC1B,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAChC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;aAC9B;SACF;QAED,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE;YACrC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACvB,kCAAkC;gBAClC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aAC1B;SACF;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,CAAC;YAC1C,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;SAClC;IACH,CAAC;IAED,QAAQ,CAAC,YAAyB,EAAE,CAAS,EAAE,CAAS;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,UAAU,CAAE,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;QAEjF,sBAAsB;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC7C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEjC,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

View File

@@ -1,33 +1,14 @@
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 _level, _tileset;
export class Layer {
constructor() {
_level.set(this, void 0);
_tileset.set(this, void 0);
}
set_level(level) {
__classPrivateFieldSet(this, _level, level);
this.level = level;
}
set_tileset(tileset) {
__classPrivateFieldSet(this, _tileset, tileset);
this.tileset = tileset;
}
add_tile(tile_factory) {
const tile = tile_factory.build(__classPrivateFieldGet(this, _tileset));
tile.elem.style.zIndex = `${__classPrivateFieldGet(this, _level)}`;
add_tile(tile_factory, y) {
const tile = tile_factory.build(this.tileset);
tile.elem.style.zIndex = `${this.level + y}`;
return tile;
}
}
_level = new WeakMap(), _tileset = new WeakMap();
//# sourceMappingURL=layer.js.map

View File

@@ -1 +1 @@
{"version":3,"file":"layer.js","sourceRoot":"","sources":["../ts/layer.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAGA,MAAM,OAAO,KAAK;IAAlB;QACE,yBAAe;QACf,2BAAiB;IAenB,CAAC;IAbC,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,YAAyB;QAChC,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,wCAAe,CAAC;QAC/C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,oCAAW,EAAE,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}
{"version":3,"file":"layer.js","sourceRoot":"","sources":["../ts/layer.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,KAAK;IAIhB,SAAS,CAAC,KAAa;QACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,WAAW,CAAC,OAAe;QACzB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,QAAQ,CAAC,YAAyB,EAAE,CAAS;QAC3C,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC;QAC7C,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

View File

@@ -3,23 +3,26 @@ import { Tile } from './tile.js';
import { TileFactory } from './tile_factory.js';
export class Grid {
#prnt: HTMLElement;
#tileset: string;
#layers: Map<string, Layer> = new Map<string, Layer>();
prnt: HTMLElement;
tileset: string;
layers: Map<string, Layer> = new Map<string, Layer>();
height: number;
constructor(prnt: HTMLElement) {
this.#prnt = prnt;
this.#prnt.style.display = 'grid';
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)`;
this.height = y;
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 = `url("images/${this.#tileset}/land.svg")`;
this.tileset = set;
this.prnt.style.backgroundImage = `url("images/${this.tileset}/land.svg")`;
// TODO: Notify layers
}
@@ -28,35 +31,33 @@ export class Grid {
const newNames: Set<string> = new Set<string>(layers);
for (const name of newNames) {
if (!this.#layers.has(name)) {
if (!this.layers.has(name)) {
const layer = new Layer();
layer.set_tileset(this.#tileset);
this.#layers.set(name, layer);
layer.set_tileset(this.tileset);
this.layers.set(name, layer);
}
}
for (const name of this.#layers.keys()) {
for (const name of this.layers.keys()) {
if (!newNames.has(name)) {
// TODO: Notify layer to tear down
this.#layers.delete(name);
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);
const layer = this.layers.get(layers[i])!;
layer.set_level(i * this.height);
}
}
add_tile(tile_factory: TileFactory, x: number, y: number): Tile {
const tile = this.#layers.get(tile_factory.layer_name)!.add_tile(tile_factory);
const tile = this.layers.get(tile_factory.layer_name)!.add_tile(tile_factory, y);
// Grids are 1-indexed
tile.elem.style.gridColumnStart = `${x + 1}`;
tile.elem.style.gridRowStart = `${y + 1}`;
this.#prnt.appendChild(tile.elem);
this.prnt.appendChild(tile.elem);
return tile;
}

View File

@@ -2,20 +2,20 @@ import { Tile } from './tile.js';
import { TileFactory } from './tile_factory.js';
export class Layer {
#level: number;
#tileset: string;
level: number;
tileset: string;
set_level(level: number) {
this.#level = level;
this.level = level;
}
set_tileset(tileset: string) {
this.#tileset = tileset;
this.tileset = tileset;
}
add_tile(tile_factory: TileFactory): Tile {
const tile = tile_factory.build(this.#tileset);
tile.elem.style.zIndex = `${this.#level}`;
add_tile(tile_factory: TileFactory, y: number): Tile {
const tile = tile_factory.build(this.tileset);
tile.elem.style.zIndex = `${this.level + y}`;
return tile;
}
}