commit:00951085ff660ae8483ab060e9ccdc97844465cd
author:Chip Black
committer:Chip Black
date:Fri Oct 12 02:14:08 2018 -0500
parents:5392d545d619bc9194df3527e94539592203937e
Add sweet f'n perspective on the map grid and a coordinate display
diff --git a/index.html b/index.html
line changes: +1/-0
index 6e6e941..16528de
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
   <div class="vflex">
     <div id="map-container" class="cflex">
       <table id="mapview"></table>
+      <div id="coords"></div>
     </div>
     <div id="visual" class="flex-auto"></div>
   </div>

diff --git a/src/map.ts b/src/map.ts
line changes: +1/-0
index febfe57..d78edc9
--- a/src/map.ts
+++ b/src/map.ts
@@ -81,6 +81,7 @@ export default class GameMap extends Storable {
         gs.print('moved:', this.cells[y][x].description);
 
         gs.mapView.updateAll();
+        gs.mapView.updateCoords(x, y);
     }
 
     movePlayerRel(dx: number, dy: number) {

diff --git a/src/mapview.ts b/src/mapview.ts
line changes: +9/-2
index c92e18d..c21ca43
--- a/src/mapview.ts
+++ b/src/mapview.ts
@@ -6,11 +6,13 @@ const MAP_HEIGHT = 9;
 const nullCell = new Cell(-1, -1);
 
 export default class MapView {
-    root: Element
+    root: HTMLTableElement
+    coords: HTMLDivElement
     cells: HTMLTableCellElement[][]
 
     constructor() {
-        this.root = document.getElementById('mapview');
+        this.root = <HTMLTableElement>document.getElementById('mapview');
+        this.coords = <HTMLDivElement>document.getElementById('coords');
 
         this.cells = [];
         for (let j = 0; j < MAP_HEIGHT; j++) {
@@ -47,6 +49,7 @@ export default class MapView {
                 this.update(i, j);
             }
         }
+        gs.mapView.updateCoords(px, py);
     }
 
     update(x: number, y: number) {
@@ -70,4 +73,8 @@ export default class MapView {
 
         tdcell.innerText = visual;
     }
+
+    updateCoords(x: number, y: number) {
+        this.coords.innerText = '[' + x +  ', ' + y + ']';
+    }
 }

diff --git a/structure.css b/structure.css
line changes: +14/-0
index 56c01ad..fc9d9a3
--- a/structure.css
+++ b/structure.css
@@ -30,12 +30,24 @@ body {
 }
 
 #map-container {
+	position: relative;
 	border: 1px solid green;
 	width: 320px;
 	height: 320px;
 	overflow: hidden;
 }
 
+#mapview {
+	transform: perspective(400px) translateY(-10px) scale(1.2) rotateX(35deg);
+}
+
+#coords {
+	position: absolute;
+	top: 6px;
+	left: 4px;
+	font: 16px monospace;
+}
+
 #mapview td {
 	min-width: 34px;
 	width: 34px;
@@ -64,6 +76,8 @@ body {
 
 #text {
 	border: 1px solid yellow;
+	padding: 8px;
+	font: 16px monospace;
 }
 
 #editor-container {