From 31c239ca3c14ccc46f77f560e5baac98787bb0c5 Mon Sep 17 00:00:00 2001 From: Sarsoo Date: Tue, 22 Jun 2021 18:27:30 +0000 Subject: [PATCH] deploy: 9b037e18c8d794797aa3a8a8b2405180ec4ce40c --- index.html | 3 ++- index_js.bootstrap.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d38ae8e..e001d28 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + game of life @@ -28,7 +29,7 @@ -
+

Game of Life 🚀

diff --git a/index_js.bootstrap.js b/index_js.bootstrap.js index c985dd2..f972b3e 100644 --- a/index_js.bootstrap.js +++ b/index_js.bootstrap.js @@ -37,7 +37,7 @@ eval("var __webpack_instantiate__ = ([WEBPACK_IMPORTED_MODULE_0]) => {\n\treturn /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.a(module, async (__webpack_handle_async_dependencies__) => {\n__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var gameoflife__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! gameoflife */ \"../pkg/gameoflife_bg.js\");\n/* harmony import */ var gameoflife_gameoflife_bg_wasm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! gameoflife/gameoflife_bg.wasm */ \"../pkg/gameoflife_bg.wasm\");\nvar __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([gameoflife__WEBPACK_IMPORTED_MODULE_0__, gameoflife_gameoflife_bg_wasm__WEBPACK_IMPORTED_MODULE_1__]);\n([gameoflife__WEBPACK_IMPORTED_MODULE_0__, gameoflife_gameoflife_bg_wasm__WEBPACK_IMPORTED_MODULE_1__] = __webpack_async_dependencies__.then ? await __webpack_async_dependencies__ : __webpack_async_dependencies__);\n\n\n\n// let PLAY = true;\n// let PLAY = false;\n(0,gameoflife__WEBPACK_IMPORTED_MODULE_0__.init)();\nconst randSlider = document.getElementById(\"randThreshold\");\nconst randSliderLabel = document.getElementById(\"randThreshold-label\");\n\nconst CELL_SIZE = 5; // px\nconst GRID_COLOR = \"#BBBBBB\";\nconst DEAD_COLOR = \"#FFFFFF\";\nconst ALIVE_COLOR = \"#FF55AA\";\n\nlet universe = gameoflife__WEBPACK_IMPORTED_MODULE_0__.Universe.new(100, 100, randSlider.value, new Date().getTime() / 1000);\nlet width = universe.width();\nlet height = universe.height();\nlet play = false;\n\nconst canvas = document.getElementById(\"game-of-life-canvas\");\ncanvas.height = (CELL_SIZE + 1) * height + 1;\ncanvas.width = (CELL_SIZE + 1) * width + 1;\n\nconst ctx = canvas.getContext('2d');\n \n/**\n * Draw grid onto canvas prior to painting cells\n */\nconst drawGrid = () => {\n ctx.beginPath();\n ctx.strokeStyle = GRID_COLOR;\n\n // Vertical lines.\n for (let i = 0; i <= width; i++) {\n ctx.moveTo(i * (CELL_SIZE + 1) + 1, 0);\n ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1);\n }\n\n // Horizontal lines.\n for (let j = 0; j <= height; j++) {\n ctx.moveTo(0, j * (CELL_SIZE + 1) + 1);\n ctx.lineTo((CELL_SIZE + 1) * width + 1, j * (CELL_SIZE + 1) + 1);\n }\n\n ctx.stroke();\n};\n\n/**\n * Get linear index from row and column indices\n * @param {*} row Row index\n * @param {*} column Column index\n * @returns Linear index\n */\nconst getIndex = (row, column) => {\n return row * width + column;\n};\n\n/**\n * Paint alive cells onto grid\n */\nconst drawCells = () => {\n const cellsPtr = universe.cells();\n const cells = new Uint8Array(gameoflife_gameoflife_bg_wasm__WEBPACK_IMPORTED_MODULE_1__.memory.buffer, cellsPtr, width * height);\n\n ctx.beginPath();\n\n for (let row = 0; row < height; row++) {\n for (let col = 0; col < width; col++) {\n const idx = getIndex(row, col);\n\n ctx.fillStyle = cells[idx] === gameoflife__WEBPACK_IMPORTED_MODULE_0__.Cell.Dead\n ? DEAD_COLOR\n : ALIVE_COLOR;\n\n ctx.fillRect(\n col * (CELL_SIZE + 1) + 1,\n row * (CELL_SIZE + 1) + 1,\n CELL_SIZE,\n CELL_SIZE\n );\n }\n }\n\n ctx.stroke();\n};\n\n/**\n * Single frame/step of game, tick universe, refresh UI\n */\nconst renderSingle = () => {\n // fps.render(); //new\n universe.tick();\n \n drawGrid();\n drawCells();\n}\n\n/**\n * Start interval timer to periodically iterate frames\n */\nconst start = () => {\n if(loop != null) clearInterval(loop);\n loop = setInterval(renderSingle, frameInterval);\n}\n\n/**\n * Clear interval timer to stop animation loop\n */\nconst stop = () => {\n if(loop != null) clearInterval(loop);\n loop = null;\n}\n\nvar frameInterval = 50;\n// var loop = setInterval(renderSingle, frameInterval);\nvar loop = null;\n\n// SLIDERS\n\nconst frameSlider = document.getElementById(\"frameRate\");\nconst frameSliderLabel = document.getElementById(\"frameRate-label\");\n/**\n * Handler for frame interval slider change, stop, change interval, start\n */\nconst onFrameSlider = () => {\n stop();\n\n frameInterval = frameSlider.value;\n frameSliderLabel.innerHTML = `Frame Interval: ${frameSlider.value}ms`;\n\n if(play) start();\n}\nframeSlider.onchange = onFrameSlider;\nframeSlider.value = 100;\n\n/**\n * Handler for random threshold slider change, get a new universe with new threshold\n */\nconst onRandSlider = () => {\n stop();\n\n universe = gameoflife__WEBPACK_IMPORTED_MODULE_0__.Universe.new(width, height, randSlider.value, new Date().getTime() / 1000);\n refreshCanvas();\n randSliderLabel.innerHTML = `Random Threshold: ${randSlider.value}%`;\n\n if(play) start();\n}\nrandSlider.onchange = onRandSlider;\nrandSlider.value = 50;\n\n/**\n * Refresh existing canvas, calculate dimensions and draw\n */\nconst refreshCanvas = () => {\n canvas.width = (CELL_SIZE + 1) * width + 1;\n canvas.height = (CELL_SIZE + 1) * height + 1;\n drawGrid();\n drawCells();\n}\n\n// INPUT BOXES\n\nconst widthBox = document.getElementById(\"width\");\n/**\n * Handler for width input box change, get a new universe of given size\n */\nconst onWidth = () => {\n // PLAY = false;\n width = widthBox.value;\n universe = gameoflife__WEBPACK_IMPORTED_MODULE_0__.Universe.new(width, height, randSlider.value, new Date().getTime() / 1000);\n refreshCanvas();\n // PLAY = true;\n // requestAnimationFrame(renderLoop);\n}\nwidthBox.onchange = onWidth;\n\nconst heightBox = document.getElementById(\"height\");\n/**\n * Handler for height input box change, get a new universe of given size\n */\nconst onHeight = () => {\n // PLAY = false;\n height = heightBox.value;\n universe = gameoflife__WEBPACK_IMPORTED_MODULE_0__.Universe.new(width, height, randSlider.value, new Date().getTime() / 1000);\n refreshCanvas();\n // PLAY = true;\n // requestAnimationFrame(renderLoop);\n}\nheightBox.onchange = onHeight;\n\n// BUTTONS\n\n/**\n * Click handler for step button, make single move\n */\nconst onPlay = () => {\n play = !play;\n\n // console.log(\"play: \" + play);\n if(play) {\n playButton.classList.remove(\"btn-success\");\n playButton.classList.add(\"btn-danger\");\n playButton.innerText = \"Stop\";\n start();\n }else {\n playButton.classList.add(\"btn-success\");\n playButton.classList.remove(\"btn-danger\");\n playButton.innerText = \"Play\";\n stop();\n }\n}\nconst playButton = document.getElementById(\"play\");\nplayButton.onclick = onPlay;\n\n/**\n * Click handler for step button, make single move\n */\nconst onStep = () => {\n console.log(\"stepping\");\n renderSingle();\n}\ndocument.getElementById(\"step\").onclick = onStep;\n\n/**\n * Click handler for reset button, generate a new universe and refresh the canvas\n */\nconst onReset = () => {\n universe = gameoflife__WEBPACK_IMPORTED_MODULE_0__.Universe.new(width, height, randSlider.value, new Date().getTime() / 1000);\n refreshCanvas();\n}\ndocument.getElementById(\"reset\").onclick = onReset;\n\ndrawGrid();\ndrawCells();\n\n});\n\n//# sourceURL=webpack://game-of-life-web/./index.js?"); +eval("__webpack_require__.a(module, async (__webpack_handle_async_dependencies__) => {\n__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var gameoflife__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! gameoflife */ \"../pkg/gameoflife_bg.js\");\n/* harmony import */ var gameoflife_gameoflife_bg_wasm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! gameoflife/gameoflife_bg.wasm */ \"../pkg/gameoflife_bg.wasm\");\nvar __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([gameoflife__WEBPACK_IMPORTED_MODULE_0__, gameoflife_gameoflife_bg_wasm__WEBPACK_IMPORTED_MODULE_1__]);\n([gameoflife__WEBPACK_IMPORTED_MODULE_0__, gameoflife_gameoflife_bg_wasm__WEBPACK_IMPORTED_MODULE_1__] = __webpack_async_dependencies__.then ? await __webpack_async_dependencies__ : __webpack_async_dependencies__);\n\n\n\n// let PLAY = true;\n// let PLAY = false;\n(0,gameoflife__WEBPACK_IMPORTED_MODULE_0__.init)();\nconst randSlider = document.getElementById(\"randThreshold\");\nconst randSliderLabel = document.getElementById(\"randThreshold-label\");\n\nconst CELL_SIZE = 4; // px\nconst GRID_COLOR = \"#BBBBBB\";\nconst DEAD_COLOR = \"#FFFFFF\";\nconst ALIVE_COLOR = \"#FF55AA\";\n\nlet universe = gameoflife__WEBPACK_IMPORTED_MODULE_0__.Universe.new(100, 100, randSlider.value, new Date().getTime() / 1000);\nlet width = universe.width();\nlet height = universe.height();\nlet play = false;\n\nconst canvas = document.getElementById(\"game-of-life-canvas\");\ncanvas.height = (CELL_SIZE + 1) * height + 1;\ncanvas.width = (CELL_SIZE + 1) * width + 1;\n\nconst ctx = canvas.getContext('2d');\n \n/**\n * Draw grid onto canvas prior to painting cells\n */\nconst drawGrid = () => {\n ctx.beginPath();\n ctx.strokeStyle = GRID_COLOR;\n\n // Vertical lines.\n for (let i = 0; i <= width; i++) {\n ctx.moveTo(i * (CELL_SIZE + 1) + 1, 0);\n ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1);\n }\n\n // Horizontal lines.\n for (let j = 0; j <= height; j++) {\n ctx.moveTo(0, j * (CELL_SIZE + 1) + 1);\n ctx.lineTo((CELL_SIZE + 1) * width + 1, j * (CELL_SIZE + 1) + 1);\n }\n\n ctx.stroke();\n};\n\n/**\n * Get linear index from row and column indices\n * @param {*} row Row index\n * @param {*} column Column index\n * @returns Linear index\n */\nconst getIndex = (row, column) => {\n return row * width + column;\n};\n\n/**\n * Paint alive cells onto grid\n */\nconst drawCells = () => {\n const cellsPtr = universe.cells();\n const cells = new Uint8Array(gameoflife_gameoflife_bg_wasm__WEBPACK_IMPORTED_MODULE_1__.memory.buffer, cellsPtr, width * height);\n\n ctx.beginPath();\n\n for (let row = 0; row < height; row++) {\n for (let col = 0; col < width; col++) {\n const idx = getIndex(row, col);\n\n ctx.fillStyle = cells[idx] === gameoflife__WEBPACK_IMPORTED_MODULE_0__.Cell.Dead\n ? DEAD_COLOR\n : ALIVE_COLOR;\n\n ctx.fillRect(\n col * (CELL_SIZE + 1) + 1,\n row * (CELL_SIZE + 1) + 1,\n CELL_SIZE,\n CELL_SIZE\n );\n }\n }\n\n ctx.stroke();\n};\n\n/**\n * Single frame/step of game, tick universe, refresh UI\n */\nconst renderSingle = () => {\n // fps.render(); //new\n universe.tick();\n \n drawGrid();\n drawCells();\n}\n\n/**\n * Start interval timer to periodically iterate frames\n */\nconst start = () => {\n if(loop != null) clearInterval(loop);\n loop = setInterval(renderSingle, frameInterval);\n}\n\n/**\n * Clear interval timer to stop animation loop\n */\nconst stop = () => {\n if(loop != null) clearInterval(loop);\n loop = null;\n}\n\nvar frameInterval = 50;\n// var loop = setInterval(renderSingle, frameInterval);\nvar loop = null;\n\n// SLIDERS\n\nconst frameSlider = document.getElementById(\"frameRate\");\nconst frameSliderLabel = document.getElementById(\"frameRate-label\");\n/**\n * Handler for frame interval slider change, stop, change interval, start\n */\nconst onFrameSlider = () => {\n stop();\n\n frameInterval = frameSlider.value;\n frameSliderLabel.innerHTML = `Frame Interval: ${frameSlider.value}ms`;\n\n if(play) start();\n}\nframeSlider.onchange = onFrameSlider;\nframeSlider.value = 100;\n\n/**\n * Handler for random threshold slider change, get a new universe with new threshold\n */\nconst onRandSlider = () => {\n stop();\n\n universe = gameoflife__WEBPACK_IMPORTED_MODULE_0__.Universe.new(width, height, randSlider.value, new Date().getTime() / 1000);\n refreshCanvas();\n randSliderLabel.innerHTML = `Random Threshold: ${randSlider.value}%`;\n\n if(play) start();\n}\nrandSlider.onchange = onRandSlider;\nrandSlider.value = 50;\n\n/**\n * Refresh existing canvas, calculate dimensions and draw\n */\nconst refreshCanvas = () => {\n canvas.width = (CELL_SIZE + 1) * width + 1;\n canvas.height = (CELL_SIZE + 1) * height + 1;\n drawGrid();\n drawCells();\n}\n\n// INPUT BOXES\n\nconst widthBox = document.getElementById(\"width\");\n/**\n * Handler for width input box change, get a new universe of given size\n */\nconst onWidth = () => {\n // PLAY = false;\n width = widthBox.value;\n universe = gameoflife__WEBPACK_IMPORTED_MODULE_0__.Universe.new(width, height, randSlider.value, new Date().getTime() / 1000);\n refreshCanvas();\n // PLAY = true;\n // requestAnimationFrame(renderLoop);\n}\nwidthBox.onchange = onWidth;\nwidthBox.value = 100;\n\nconst heightBox = document.getElementById(\"height\");\n/**\n * Handler for height input box change, get a new universe of given size\n */\nconst onHeight = () => {\n // PLAY = false;\n height = heightBox.value;\n universe = gameoflife__WEBPACK_IMPORTED_MODULE_0__.Universe.new(width, height, randSlider.value, new Date().getTime() / 1000);\n refreshCanvas();\n // PLAY = true;\n // requestAnimationFrame(renderLoop);\n}\nheightBox.onchange = onHeight;\nheightBox.value = 100;\n\n// BUTTONS\n\n/**\n * Click handler for step button, make single move\n */\nconst onPlay = () => {\n play = !play;\n\n // console.log(\"play: \" + play);\n if(play) {\n playButton.classList.remove(\"btn-success\");\n playButton.classList.add(\"btn-danger\");\n playButton.innerText = \"Stop\";\n start();\n }else {\n playButton.classList.add(\"btn-success\");\n playButton.classList.remove(\"btn-danger\");\n playButton.innerText = \"Play\";\n stop();\n }\n}\nconst playButton = document.getElementById(\"play\");\nplayButton.onclick = onPlay;\n\n/**\n * Click handler for step button, make single move\n */\nconst onStep = () => {\n console.log(\"stepping\");\n renderSingle();\n}\ndocument.getElementById(\"step\").onclick = onStep;\n\n/**\n * Click handler for reset button, generate a new universe and refresh the canvas\n */\nconst onReset = () => {\n universe = gameoflife__WEBPACK_IMPORTED_MODULE_0__.Universe.new(width, height, randSlider.value, new Date().getTime() / 1000);\n refreshCanvas();\n}\ndocument.getElementById(\"reset\").onclick = onReset;\n\ndrawGrid();\ndrawCells();\n\n});\n\n//# sourceURL=webpack://game-of-life-web/./index.js?"); /***/ })