beneth
/
wasm_game_of_life
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix Canvas cell position compute from tutorial

master
Benoît 2020-06-10 21:02:48 +02:00
parent 49ec2a21a5
commit 1bb2d924ce
1 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
www/index.js
View File

@ -6,12 +6,12 @@ import { Universe, Cell } from "wasm-game-of-life";
let req_id; let req_id;
let stop = false; let stop = false;
const CELL_SIZE = 40; // px const CELL_SIZE = 9; // px
const GRID_COLOR = "#CCCCCC"; const GRID_COLOR = "#CCCCCC";
const DEAD_COLOR = "#FFFFFF"; const DEAD_COLOR = "#FFFFFF";
const ALIVE_COLOR = "#3399FF"; const ALIVE_COLOR = "#3399FF";
const universe = Universe.new(10,10); const universe = Universe.new(128,128);
const width = universe.width(); const width = universe.width();
const height = universe.height(); const height = universe.height();
@ -36,18 +36,16 @@ const renderLoop = async () => {
function getCursorPos(canvas, evt) { function getCursorPos(canvas, evt) {
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
// Bound check: It seems that the last case can overlap const scaleX = canvas.width / rect.width;
let x = Math.trunc((evt.clientX - rect.left) / CELL_SIZE); const scaleY = canvas.height / rect.height;
if (x >= (width))
x = x - 1;
let y = Math.trunc((evt.clientY - rect.top) / CELL_SIZE); const canvasLeft = (evt.clientX - rect.left) * scaleX;
if (y >= (height)) const canvasTop = (evt.clientY - rect.top) * scaleY;
y = y - 1;
return { x, const row = Math.min(Math.floor(canvasTop / (CELL_SIZE + 1)), height - 1);
y, const col = Math.min(Math.floor(canvasLeft / (CELL_SIZE + 1)), width - 1);
};
return { row, col };
} }
canvas.addEventListener('mouseover', canvas.addEventListener('mouseover',
@ -69,14 +67,14 @@ canvas.addEventListener('click',
var mousePos = getCursorPos(canvas, evt); var mousePos = getCursorPos(canvas, evt);
let cellsPtr = universe.cells(); let cellsPtr = universe.cells();
let cells = new Uint8Array(memory.buffer, cellsPtr, width * height); let cells = new Uint8Array(memory.buffer, cellsPtr, width * height);
console.log("Click position : X = " + (mousePos.x) + ", Y = " + (mousePos.y)); console.log("Click position : X = " + (mousePos.row) + ", Y = " + (mousePos.col));
const idx = universe.get_index(mousePos.y, mousePos.x); const idx = universe.get_index(mousePos.row, mousePos.col);
if (cells[idx] === Cell.Dead) if (cells[idx] === Cell.Dead)
console.log("Cell[" + idx + "] is : " + "Dead !"); console.log("Cell[" + idx + "] is : " + "Dead !");
else else
console.log("Cell[" + idx + "] is : " + "Alive !"); console.log("Cell[" + idx + "] is : " + "Alive !");
// Change to inverse ! // Toggle it ! TODO: Do it (like in the tutorial) from Rust !
cells[idx] = (cells[idx] === Cell.Dead) ? Cell.Alive : Cell.Dead; cells[idx] = (cells[idx] === Cell.Dead) ? Cell.Alive : Cell.Dead;
drawCells(); drawCells();
}); });