index.html

<html>
  <head>
    <!-- Load WebAssembly module -->
    <script type="text/javascript" src="wasm_life_bindings.js" defer></script>

    <style>
      body {
        background-color: black;
      }

      #cycle {
        color: green;
      }
    </style>
  </head>
  <body>
    <div id="life">
      <pre id="cycle"></pre>
    </div>
    <canvas id="canvas" width="1500" height="900"></canvas>

    <script defer>
      // wait for resources to load
      window.addEventListener("DOMContentLoaded", async function () {
        // Wait for module to initialize,
        const {
          randomize,
          calculate_next_generation,
          renderPixels,
          GRID_WIDTH,
          GRID_HEIGHT,
          BOX_SIZE,
        } = await createModule();

        const canvas = document.getElementById("canvas");
        canvas.width = GRID_WIDTH * BOX_SIZE;
        canvas.height = GRID_HEIGHT * BOX_SIZE;

        randomize();

        let cycle = 1;

        setInterval(() => {
          cycle++;

          calculate_next_generation();
          renderPixels();

          document.getElementById("cycle").innerHTML = cycle;
        }, 200);
      });
    </script>
  </body>
</html>