Remove occupancy grid -- map maker can handle it

This commit is contained in:
Ian Gulliver
2021-05-09 22:09:06 +00:00
parent 4651eeb335
commit 5e9a00ef76
12 changed files with 84 additions and 263 deletions

View File

@@ -5,8 +5,6 @@ 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;
@@ -14,20 +12,13 @@ export class 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');
this.#prnt.style.backgroundImage = `url("images/${this.#tileset}/land.svg")`;
// TODO: Notify layers
}
@@ -37,7 +28,7 @@ export class Grid {
for (const name of newNames) {
if (!this.#layers.has(name)) {
const layer = new Layer(this.#size_x, this.#size_y);
const layer = new Layer();
layer.set_tileset(this.#tileset);
this.#layers.set(name, layer);
}
@@ -58,19 +49,12 @@ export class Grid {
}
}
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;
}
add_tile(layer: string, tile: Tile, x: number, y: number) {
const elem = this.#layers.get(layer)!.add_tile(tile);
// 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")`;
}
}

View File

@@ -1,24 +1,9 @@
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;
}
@@ -27,59 +12,9 @@ export class Layer {
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);
add_tile(tile: Tile): HTMLElement {
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;
}
}
}
}

View File

@@ -2,27 +2,11 @@ export class Tile {
#name: string;
#width: number;
#height: number;
#mask: boolean[][];
constructor(name: string, width: number, height: number, mask: boolean[][]) {
constructor(name: string, width: number, height: number) {
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);
}
static from_mask(name: string, mask_string: string): Tile {
const mask = string_to_mask(mask_string);
return new Tile(name, mask.length, mask[0].length, mask);
}
get_mask(): boolean[][] {
return this.#mask;
}
get_elem(tileset: string): HTMLElement {
@@ -35,6 +19,7 @@ export class Tile {
}
}
/*
function string_to_mask(mask_string: string): boolean[][] {
// mask_string: '\n+++\n+++\n'
@@ -57,3 +42,4 @@ function string_to_mask(mask_string: string): boolean[][] {
return mask;
}
*/

View File

@@ -1,44 +1,35 @@
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);
export const ROAD_LR = new Tile('road-lr', 6, 4);
export const ROAD_TB = new Tile('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);
export const ROAD_BL = new Tile('road-bl', 6, 6);
export const ROAD_BR = new Tile('road-br', 6, 6);
export const ROAD_TL = new Tile('road-tl', 6, 6);
export const ROAD_TR = new Tile('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_BLR = new Tile('road-blr', 8, 6);
export const ROAD_TLR = new Tile('road-tlr', 8, 6);
export const ROAD_LTB = new Tile('road-ltb', 6, 8);
export const ROAD_RTB = new Tile('road-rtb', 6, 8);
// +
export const ROAD_TBLR = Tile.from_mask('road-tblr', `
.xxxxxx.
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
.xxxxxx.
`);
export const ROAD_TBLR = new Tile('road-tblr', 8, 8);
// Tower base
export const EMPTY = Tile.rectangle('empty', 4, 2);
export const EMPTY = new Tile('empty', 4, 2);
// Straight
export const RIVER_LR = Tile.rectangle('river-lr', 6, 4);
export const RIVER_TB = Tile.rectangle('river-tb', 4, 6);
export const RIVER_LR = new Tile('river-lr', 6, 4);
export const RIVER_TB = new Tile('river-tb', 4, 6);
// Elbow
export const RIVER_BR = Tile.rectangle('river-br', 6, 6);
export const RIVER_BL = Tile.rectangle('river-bl', 6, 6);
export const RIVER_TR = Tile.rectangle('river-tr', 6, 6);
export const RIVER_TL = Tile.rectangle('river-tl', 6, 6);
export const RIVER_BR = new Tile('river-br', 6, 6);
export const RIVER_BL = new Tile('river-bl', 6, 6);
export const RIVER_TR = new Tile('river-tr', 6, 6);
export const RIVER_TL = new Tile('river-tl', 6, 6);
export const BRIDGE_LR = Tile.rectangle('bridge-lr', 6, 4);
export const BRIDGE_LR = new Tile('bridge-lr', 6, 4);