Add sweet f'n perspective on the map grid and a coordinate display
<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>
gs.print('moved:', this.cells[y][x].description);
gs.mapView.updateAll();
+ gs.mapView.updateCoords(x, y);
}
movePlayerRel(dx: number, dy: number) {
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++) {
this.update(i, j);
}
}
+ gs.mapView.updateCoords(px, py);
}
update(x: number, y: number) {
tdcell.innerText = visual;
}
+
+ updateCoords(x: number, y: number) {
+ this.coords.innerText = '[' + x + ', ' + y + ']';
+ }
}
}
#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;
#text {
border: 1px solid yellow;
+ padding: 8px;
+ font: 16px monospace;
}
#editor-container {