some updates to the game grid

assets/web/app.js

@@ -5,6 +5,8 @@ var mapOffsetX = 0.0;
 var mapOffsetY = 0.0;
 var draggedToken = { token: null, offX: 0, offY: 0 };
 var draggedDiv = { div: null, offX: 0, offY: 0 };
+var gridDashType = 0;
+var showGrid = true;
 
 function init() {
     let view = document.getElementById('game-view');
@@ -13,19 +15,19 @@ function init() {
     view.onmouseup = onGameMouseUp;
     view.oncontextmenu = () => false;
     // allow sending chat message using enter (and shift-enter for new line)
-    document.getElementById('newmsg-content').onkeypress = (e) => {
+    document.getElementById('newmsg-content').onkeydown = (e) => {
         if (e.key == "Enter" && !e.shiftKey) {
             sendChatMessage();
             return false;
         }
     }
-    document.getElementById('login-username').onkeypress = (e) => {
+    document.getElementById('login-username').onkeydown = (e) => {
         if (e.key == 'Enter') {
             document.getElementById('login-pass').focus();
             return false;
         }
     }
-    document.getElementById('login-pass').onkeypress = (e) => {
+    document.getElementById('login-pass').onkeydown = (e) => {
         if (e.key == 'Enter') {
             onLoginClick();
             return false;
@@ -38,6 +40,38 @@ function init() {
     }
     document.body.onmousemove = onMoveableDivDrag;
     document.body.onmouseup = onMoveableDivMouseUp;
+
+    let mapBackground = document.getElementById('map-background');
+    updateGridCanvas(mapBackground.width, mapBackground.height, 1.0);
+}
+
+function updateGridCanvas(width, height, lineWidth) {
+    // Draw the grid on the grid thing
+    let canvas = document.getElementById('map-grid');
+    canvas.width = width;
+    canvas.height = height;
+    let ctx = canvas.getContext('2d');
+    ctx.reset();
+    if (!showGrid) { return; }
+    ctx.lineWidth = lineWidth ?? 1.0;
+    let lineDashTypes = [
+        [0.1, 0.8, 0.1, 0.0],
+        [0, 0.1, 0.1, 0.6, 0.1, 0.1],
+        [0, 0.1, 0.3, 0.2, 0.3, 0.1],
+        [0.1, 0.8, 0.1],
+    ]
+    ctx.setLineDash(lineDashTypes[gridDashType].map(i => GRID_SIZE * i));
+    ctx.beginPath();
+    let i = 0;
+    while (i < Math.max(width, height)) {
+        i += GRID_SIZE;
+        ctx.moveTo(i, 0);
+        ctx.lineTo(i, width);
+        ctx.moveTo(0, i);
+        ctx.lineTo(height, i);
+    }
+    ctx.closePath();
+    ctx.stroke();
 }
 
 tavern.onlogin = (s) => {
@@ -149,9 +183,11 @@ function onLoginClick() {
 }
 function onGameViewScroll(event) {
     let map = document.getElementById('map');
+    let mapBackground = document.getElementById('map-background');
     mapScale += (event.wheelDelta / 1800.0);
     if (mapScale < 0.1) { mapScale = 0.1; }
     map.style.transform = `scale(${mapScale})`;
+    updateGridCanvas(mapBackground.width, mapBackground.height, 1.0 / mapScale);
 }
 function onGameMouseMove(event) {
     if (event.buttons == 2) {

assets/web/index.html

@@ -64,7 +64,9 @@
                 <button style="background-color: #ffffd6;" onclick="showHideDiv('initiative-tracker')"><b>i</b></button>
             </div>
             <div id="map" style="position:absolute; transform-origin: top left; user-select: none;">
-                <img src="https://rustystriker.dev/molly.jpg" height="200%">
+                <img id="map-background" src="https://rustystriker.dev/molly.jpg" height="200%">
+                <canvas style="position: absolute; top: 0px; left: 0px;" id="map-grid" width="1000"
+                    height="1000"></canvas>
             </div>
         </div>
     </div>