Cassidy Wilson Dev Diary - TheEvergreenStateCollege/upper-division-cs-23-24 GitHub Wiki

WASM Game of Life

  • Oh glorious NPM. I ran npm install inside www/ and everything installed correctly, but npm run start needs to install webpack-cli/serve and that fails spectacularly:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.29.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"5.x.x" from @webpack-cli/[email protected]
npm ERR! node_modules/@webpack-cli/serve
npm ERR!   dev @webpack-cli/serve@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /home/cassidy/.npm/_logs/2024-05-14T20_14_31_672Z-eresolve-report.txt

I seem to have fixed it by faffing about with dependencies, but then another problem arose...

  • Running npm run start in www/ gave me this error:
> [email protected] start
> webpack-dev-server

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property '_assetEmittingPreviousFiles'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, ipc?, liveReload?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

Joy.

I literally did nothing and it broke.

  • After a bunch of tinkering I finally managed to make it work by making this my webpack.config.js:
const CopyPlugin = require("copy-webpack-plugin");
const path = require('path');

module.exports = {
    entry: "./bootstrap.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bootstrap.js",
    },
    mode: "development",
    experiments: {
        syncWebAssembly: true // Enable WebAssembly experiments
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "index.html", to: "index.html" }
            ]
        })
    ],
};

And I made modified the import in my index.js:

import { memory } from "wasm-game-of-life/wasm_game_of_life_bg.wasm";
  • Next I added interactivity by adding a play and pause button, and the ability to click on cells to toggle their state. Screenshot_20240528_183448
  • I then added a FPS counter
  • I also added a timer to see how long each `tick was taking, which turned out to be an average of 2ms.
  • Benchmarking:
    • I had actually already made a similar change in my code to make tick faster.
    • Before:

Screenshot_20240603_141227

https://github.com/TheEvergreenStateCollege/upper-division-cs/pull/1584

  • Optimizing size:
    • Before: 22204
    • After: 23166

image