commit:b30e17bc53f271f9e14a0e0e1607778f24ee5e98
author:Chip Black
committer:Chip Black
date:Thu Aug 6 01:50:22 2020 -0500
parents:c4de3b83ead3354ea5c50de85c78b73623c3bf86
Update mapView DOM structure and add visual indicators for blocked exits
diff --git a/index.html b/index.html
line changes: +1/-1
index 6048332..e0ef3df
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
 <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>

diff --git a/src/celleditor.ts b/src/celleditor.ts
line changes: +17/-0
index ff749bc..6082317
--- a/src/celleditor.ts
+++ b/src/celleditor.ts
@@ -22,6 +22,13 @@ export default class CellEditor {
               <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>
@@ -55,6 +62,11 @@ export default class CellEditor {
         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);
         }
@@ -116,6 +128,11 @@ export default class CellEditor {
         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) {

diff --git a/src/map.ts b/src/map.ts
line changes: +1/-0
index aa23439..852097a
--- a/src/map.ts
+++ b/src/map.ts
@@ -102,6 +102,7 @@ export default class GameMap extends Storable {
 
     editDescription() {
         gs.cellEditor.onClose = (cell: Cell) => {
+            gs.mapView.update(cell.x, cell.y);
             gs.enterCell();
         };
         gs.cellEditor.open(this.getCurrentCell());

diff --git a/src/mapview.ts b/src/mapview.ts
line changes: +16/-10
index a1d418a..6b025e7
--- a/src/mapview.ts
+++ b/src/mapview.ts
@@ -1,28 +1,30 @@
 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);
@@ -61,17 +63,21 @@ export default class MapView {
         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) {

diff --git a/structure.css b/structure.css
line changes: +35/-14
index 42921c3..d523c98
--- a/structure.css
+++ b/structure.css
@@ -48,36 +48,57 @@ body {
 
 #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;
 }