╭ changed ───────────╮ │src/assets/script.js│ ╰────────────────────╯ ╭───────────╮ │← all files│ ╰───────────╯ ╭─────────────────────────────────────────────────────────────────────────────╮ │ 7 │ │ 8 const MIN_COLS = 30; │ │ 9 │ │10 -// measured once after the font is loaded. recomputed lazily if it ever │ │11 -// reads back as zero (e.g. measured before the font was actually ready).│ │10 +// measured once after the font is loaded. recomputed lazily if they ever│ │11 +// read back as zero (e.g. measured before the font was actually ready). │ │12 let cellWidth = null; │ │13 +let cellHeight = null; │ │14 │ │14 -function measureCellWidth() { │ │15 +function measureCellSize() { │ │16 const probe = document.createElement("span"); │ │17 probe.style.position = "absolute"; │ │18 probe.style.visibility = "hidden"; │ ╰─────────────────────────────────────────────────────────────────────────────╯ ╭────────────────────────────────────────────────────────────╮ │19 probe.style.whiteSpace = "pre"; │ │20 probe.textContent = "X".repeat(100); │ │21 grid.appendChild(probe); │ │21 - const w = probe.getBoundingClientRect().width / 100;│ │22 + const rect = probe.getBoundingClientRect(); │ │23 probe.remove(); │ │23 - return w; │ │24 + cellWidth = rect.width / 100; │ │25 + cellHeight = rect.height; │ │26 } │ │27 │ │28 function maxCols() { │ ╰────────────────────────────────────────────────────────────╯ ╭─────────────────────────────────────────────────────────────────────────────────────╮ │27 - if (!cellWidth) cellWidth = measureCellWidth(); │ │29 + if (!cellWidth) measureCellSize(); │ │30 return Math.max(MIN_COLS, Math.floor(document.body.clientWidth / cellWidth));│ │31 } │ │32 │ ╰─────────────────────────────────────────────────────────────────────────────────────╯ ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ │72 event.preventDefault(); │ │73 } │ │74 wasmInstance.exports._onKeyDown(event.keyCode); │ │75 + wasmInstance.exports._tick(maxCols()); │ │76 + }); │ │77 + │ │78 + grid.addEventListener("click", (event) => { │ │79 + // ensure cellWidth/cellHeight are measured before converting pixels to grid cells│ │80 + maxCols(); │ │81 + const rect = grid.getBoundingClientRect(); │ │82 + const col = Math.floor((event.clientX - rect.left) / cellWidth); │ │83 + const row = Math.floor((event.clientY - rect.top) / cellHeight); │ │84 + if (col < 0 || row < 0) return; │ │85 + wasmInstance.exports._onMouseClick(col, row); │ │86 wasmInstance.exports._tick(maxCols()); │ │87 }); │ │88 │ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯