Update mapView DOM structure and add visual indicators for blocked exits
<div class="hflex full">
<div class="vflex">
<div id="map-container" class="cflex">
- <table id="mapview"></table>
+ <div id="mapview"></div>
<div id="coords"></div>
</div>
<div id="visual" class="flex-auto"></div>
<input name="title">
<h2>Description</h2>
<textarea name="description" class="flex-auto"></textarea>
+ <h2>Exits</h2>
+ <div class="hflex">
+ <label><input type="checkbox" name="exit-n">North</label>
+ <label><input type="checkbox" name="exit-e">East</label>
+ <label><input type="checkbox" name="exit-s">South</label>
+ <label><input type="checkbox" name="exit-w">West</label>
+ </div>
<div class="hflex">
<button id="cell-editor-close">Close</button>
</div>
this.titleRef.value = cell.title;
this.descriptionRef.value = cell.description;
+ ['n', 'e', 's', 'w'].forEach( (dir, index) => {
+ const checkbox = <HTMLInputElement>this.container.q(`input[name="exit-${dir}"]`);
+ checkbox.checked = cell.exits[index];
+ });
+
for (let [k, e] of cell.events) {
this.addEvent(e);
}
this.cell.title = this.titleRef.value;
this.cell.description = this.descriptionRef.value;
+ ['n', 'e', 's', 'w'].forEach( (dir, index) => {
+ const checkbox = <HTMLInputElement>this.container.q(`input[name="exit-${dir}"]`);
+ this.cell.exits[index] = checkbox.checked;
+ });
+
// We recreate all of the cell's events to make sure we remove any deleted ones
this.cell.events.clear();
for (let eventForm of this.events) {
editDescription() {
gs.cellEditor.onClose = (cell: Cell) => {
+ gs.mapView.update(cell.x, cell.y);
gs.enterCell();
};
gs.cellEditor.open(this.getCurrentCell());
import gs from './gamestate';
import { Cell } from './cell';
+import { Direction } from './direction';
const MAP_WIDTH = 9;
const MAP_HEIGHT = 9;
const nullCell = new Cell(-1, -1);
export default class MapView {
- root: HTMLTableElement
+ root: HTMLDivElement
coords: HTMLDivElement
- cells: HTMLTableCellElement[][]
+ cells: HTMLDivElement[][]
constructor() {
- this.root = <HTMLTableElement>document.getElementById('mapview');
+ this.root = <HTMLDivElement>document.getElementById('mapview');
this.coords = <HTMLDivElement>document.getElementById('coords');
this.cells = [];
for (let j = 0; j < MAP_HEIGHT; j++) {
- const row = document.createElement('tr');
+ const row = document.createElement('div');
this.cells[j] = [];
for (let i = 0; i < MAP_WIDTH; i++) {
- const td: HTMLTableCellElement = document.createElement('td');
- row.appendChild(td);
- this.cells[j][i] = td;
+ const cell: HTMLDivElement = document.createElement('div');
+ cell.className = 'map-cell';
+ row.appendChild(cell);
+ this.cells[j][i] = cell;
}
this.root.appendChild(row);
const cell = (x < 0 || y < 0 || x >= gs.map.width || y >= gs.map.height) ?
nullCell :
gs.map.cells[y][x];
- const tdcell = this.cells[cy][cx];
+ const domCell = this.cells[cy][cx];
let visual = null;
- tdcell.classList.toggle('navigable', cell.navigable);
+ domCell.classList.toggle('navigable', cell.navigable);
+ domCell.classList.toggle('blocked-n', !cell.exits[Direction.North]);
+ domCell.classList.toggle('blocked-e', !cell.exits[Direction.East]);
+ domCell.classList.toggle('blocked-s', !cell.exits[Direction.South]);
+ domCell.classList.toggle('blocked-w', !cell.exits[Direction.West]);
if (x == px && y == py) {
visual = '\u25CF';
}
- tdcell.innerText = visual;
+ domCell.innerText = visual;
}
updateCoords(x: number, y: number) {
#mapview {
transform: perspective(400px) translateY(-10px) scale(1.2) rotateX(35deg);
+ display: flex;
+ flex-direction: column;
}
-#coords {
- position: absolute;
- top: 6px;
- left: 4px;
+#mapview > div {
+ display: flex;
}
-#mapview td {
- min-width: 34px;
+#mapview .map-cell {
+ display: flex;
+ box-sizing: border-box;
width: 34px;
height: 34px;
border-radius: 5px;
- text-align: center;
- vertical-align: middle;
+ justify-content: center;
+ align-items: center;
font-size: 28px;
- padding: 1px;
+ margin: 1px;
+ position: relative;
}
-.edit-mode #mapview td {
+.edit-mode #mapview .map-cell {
border: 1px solid #0A0;
- min-width: 32px;
- width: 32px;
- height: 32px;
}
-#mapview td.navigable {
+#mapview .map-cell.blocked-n {
+ border-top: 3px solid cyan;
+}
+
+#mapview .map-cell.blocked-e {
+ border-right: 3px solid cyan;
+}
+
+#mapview .map-cell.blocked-s {
+ border-bottom: 3px solid cyan;
+}
+
+#mapview .map-cell.blocked-w {
+ border-left: 3px solid cyan;
+}
+
+#mapview .map-cell.navigable {
background-color: #555;
}
+#coords {
+ position: absolute;
+ top: 6px;
+ left: 4px;
+}
+
#visual {
border: 1px solid blue;
}