<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,
                                   initial-scale=1.0"
    />
    <title>Conway's Game of Life</title>
    <style>
      body {
        margin: 0px;
      }
      canvas {
        border: 1px solid black;
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        max-width: 500px;
        max-height: 500px;
      }
      #gameContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .btn {
        border: 1px solid black;
        color: #000;
        background-color: transparent;
        border-radius: 20px;
        padding: 6px 12px;
        font-size: 14px;
      }
      .btn:hover {
        cursor: pointer;
      }
      #controls {
        padding: 8px;
        width: calc(100% - 16px);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 10px;
      }
    </style>
    <script type="module" crossorigin>
      var J = (i) => {
        throw TypeError(i);
      };
      var N = (i, t, s) => t.has(i) || J("Cannot " + s);
      var e = (i, t, s) => (N(i, t, "read from private field"), s ? s.call(i) : t.get(i)),
        l = (i, t, s) =>
          t.has(i)
            ? J("Cannot add the same private member more than once")
            : t instanceof WeakSet
              ? t.add(i)
              : t.set(i, s),
        a = (i, t, s, r) => (N(i, t, "write to private field"), r ? r.call(i, s) : t.set(i, s), s),
        o = (i, t, s) => (N(i, t, "access private method"), s);
      (function () {
        const t = document.createElement("link").relList;
        if (t && t.supports && t.supports("modulepreload")) return;
        for (const n of document.querySelectorAll('link[rel="modulepreload"]')) r(n);
        new MutationObserver((n) => {
          for (const h of n)
            if (h.type === "childList")
              for (const u of h.addedNodes)
                u.tagName === "LINK" && u.rel === "modulepreload" && r(u);
        }).observe(document, { childList: !0, subtree: !0 });
        function s(n) {
          const h = {};
          return (
            n.integrity && (h.integrity = n.integrity),
            n.referrerPolicy && (h.referrerPolicy = n.referrerPolicy),
            n.crossOrigin === "use-credentials"
              ? (h.credentials = "include")
              : n.crossOrigin === "anonymous"
                ? (h.credentials = "omit")
                : (h.credentials = "same-origin"),
            h
          );
        }
        function r(n) {
          if (n.ep) return;
          n.ep = !0;
          const h = s(n);
          fetch(n.href, h);
        }
      })();
      class it {
        constructor(t) {
          (this.canvas = document.getElementById(t)),
            (this.canvas.width =
              this.canvas.height * (this.canvas.clientWidth / this.canvas.clientHeight)),
            (this.ctx = this.canvas.getContext("2d"));
        }
        fillRect(t, s, r, n, h) {
          (this.ctx.fillStyle = t), this.ctx.fillRect(s, r, n, h);
        }
        drawLine(t, s, r, n, h) {
          (this.ctx.lineWidth = 2),
            (this.ctx.strokeStyle = t),
            this.ctx.beginPath(),
            this.ctx.moveTo(s, r),
            this.ctx.lineTo(n, h),
            this.ctx.stroke();
        }
        fillDiamond(t, s, r, n, h) {
          (n = n * 0.7), (h = h * 0.7), (s = s + n * 0.2), (r = r + h * 0.2);
          const u = () => {
            this.ctx.beginPath(),
              this.ctx.moveTo(s + n / 2, r),
              this.ctx.lineTo(s + n, r + h / 2),
              this.ctx.lineTo(s + n / 2, r + h),
              this.ctx.lineTo(s, r + h / 2),
              this.ctx.closePath();
          };
          (this.ctx.fillStyle = t),
            u(),
            this.ctx.fill(),
            (this.ctx.strokeStyle = "#black"),
            (this.ctx.lineWidth = 10),
            u(),
            this.ctx.stroke();
        }
        fillText(t, s, r, n, h) {
          (this.ctx.fillStyle = n), (this.ctx.font = h), this.ctx.fillText(t, s, r);
        }
        width() {
          return this.canvas.width;
        }
        height() {
          return this.canvas.height;
        }
        clear() {
          this.ctx.clearRect(0, 0, this.width(), this.height());
        }
      }
      var p, f, y, T, A;
      const $ = class $ {
        constructor(t, s) {
          l(this, y);
          l(this, p);
          l(this, f);
          a(this, f, t), a(this, p, s);
        }
        rightIsClear() {
          return o(this, y, A).call(this, this.objectRight());
        }
        leftIsClear() {
          return o(this, y, A).call(this, this.objectLeft());
        }
        downIsClear() {
          return o(this, y, A).call(this, this.objectDown());
        }
        upIsClear() {
          return o(this, y, A).call(this, this.objectUp());
        }
        moveLeft() {
          o(this, y, T).call(this, { x: e(this, f).x - 1, y: e(this, f).y });
        }
        moveRight() {
          o(this, y, T).call(this, { x: e(this, f).x + 1, y: e(this, f).y });
        }
        moveUp() {
          o(this, y, T).call(this, { x: e(this, f).x, y: e(this, f).y - 1 });
        }
        moveDown() {
          o(this, y, T).call(this, { x: e(this, f).x, y: e(this, f).y + 1 });
        }
        clone() {
          return new $(e(this, f), e(this, p));
        }
        objectRight() {
          return e(this, p).objectAt({ x: this.x + 1, y: this.y });
        }
        objectLeft() {
          return e(this, p).objectAt({ x: this.x - 1, y: this.y });
        }
        objectUp() {
          return e(this, p).objectAt({ x: this.x, y: this.y - 1 });
        }
        objectDown() {
          return e(this, p).objectAt({ x: this.x, y: this.y + 1 });
        }
        pickGem() {
          e(this, p).pickGem(e(this, f));
        }
        putGem() {
          e(this, p).putGem(e(this, f));
        }
      };
      (p = new WeakMap()),
        (f = new WeakMap()),
        (y = new WeakSet()),
        (T = function (t) {
          a(this, f, e(this, p).move(e(this, f), t));
        }),
        (A = function (t) {
          return ["empty", "wall"].includes(t);
        });
      let _ = $;
      const nt = (i) =>
          new Promise((t) => {
            setTimeout(t, i);
          }),
        Q = (i) => {
          const t = Math.max(i.length, i[0].length);
          return Array.from({ length: t }, (s, r) =>
            Array.from({ length: t }, (n, h) => {
              var u;
              return ((u = i[r]) == null ? void 0 : u[h]) || 0;
            })
          );
        };
      var b, P, m, v, j, G, L, x, F, Y;
      class S {
        constructor(t) {
          l(this, x);
          l(this, b, 0);
          l(this, P, Promise.resolve());
          l(this, m);
          l(this, v);
          l(this, j, !1);
          l(this, G);
          l(this, L);
          a(this, m, Q(t)),
            a(this, v, window.structuredClone(Q(t))),
            a(this, G, e(this, m).length),
            a(this, L, e(this, m)[0].length);
        }
        enableInstantMode() {
          a(this, j, !0);
        }
        objectAt({ x: t, y: s }) {
          return t <= 0 || t >= e(this, G) || s < 0 || s >= e(this, L)
            ? "wall"
            : rt[e(this, m)[s][t]] || "empty";
        }
        move(t, s) {
          if (["obstacle", "wall"].includes(this.objectAt(s))) return console.log("CANNOT MOVE"), t;
          const r = e(this, m)[t.y][t.x],
            n = e(this, m)[s.y][s.x],
            h = r === 4;
          (e(this, m)[t.y][t.x] = h ? 3 : 0), (e(this, m)[s.y][s.x] = n ? 4 : 2);
          const u = window.structuredClone(e(this, m));
          return (
            o(this, x, F).call(this, () => {
              a(this, v, u);
            }),
            s
          );
        }
        cells() {
          return (
            console.log("MAP", e(this, m)),
            e(this, m).flatMap((t, s) =>
              t.flatMap((r, n) => (o(this, x, Y).call(this, r) ? new _({ x: n, y: s }, this) : []))
            )
          );
        }
        numRows() {
          return e(this, L);
        }
        numCols() {
          return e(this, G);
        }
        getMap() {
          return e(this, v);
        }
        gemBalance() {
          return e(this, b);
        }
        pickGem(t) {
          const s = e(this, m)[t.y][t.x];
          if ((console.log({ object: s }), s !== 4)) return;
          e(this, m)[t.y][t.x] = 2;
          const r = window.structuredClone(e(this, m));
          o(this, x, F).call(this, () => {
            a(this, v, r), a(this, b, e(this, b) + 1);
          });
        }
        putGem(t) {
          const s = e(this, b) > 0,
            r = e(this, m)[t.y][t.x] === 2;
          if (!(s && r)) return;
          e(this, m)[t.y][t.x] = 4;
          const n = window.structuredClone(e(this, m));
          o(this, x, F).call(this, () => {
            a(this, v, n), a(this, b, e(this, b) - 1);
          });
        }
      }
      (b = new WeakMap()),
        (P = new WeakMap()),
        (m = new WeakMap()),
        (v = new WeakMap()),
        (j = new WeakMap()),
        (G = new WeakMap()),
        (L = new WeakMap()),
        (x = new WeakSet()),
        (F = function (t) {
          if (e(this, j)) return t();
          a(
            this,
            P,
            e(this, P)
              .then(() => nt(200))
              .then(t)
          );
        }),
        (Y = function (t) {
          return t === 2 || t === 4;
        });
      const rt = { 0: "empty", 1: "obstacle", 2: "cell", 3: "gem", 4: "cell_on_gem" };
      var z, C, I, B, U;
      class ht {
        constructor(t) {
          l(this, B);
          l(this, z);
          l(this, C, !1);
          l(this, I);
          a(this, I, t);
        }
        start() {
          e(this, C) || (a(this, C, !0), o(this, B, U).call(this));
        }
        stop() {
          a(this, C, !1);
        }
      }
      (z = new WeakMap()),
        (C = new WeakMap()),
        (I = new WeakMap()),
        (B = new WeakSet()),
        (U = function () {
          e(this, C) && (e(this, I).call(this), requestAnimationFrame(o(this, B, U).bind(this)));
        });
      const ot = 1,
        ct = 2,
        lt = 3;
      var E, w, c, H, K, g, R, O, d, W, Z, q, tt, M, et, V;
      class at {
        constructor(t, s, r) {
          l(this, d);
          l(this, E);
          l(this, w);
          l(this, c);
          l(this, H);
          l(this, K);
          l(this, g);
          l(this, R);
          l(this, O);
          a(this, E, s),
            a(this, w, t),
            a(this, g, s.createGrid()),
            a(this, c, Math.floor(t.width() / e(this, g).getMap().length)),
            a(
              this,
              R,
              new ht(() => {
                o(this, d, q).call(this), o(this, d, W).call(this, e(this, g).gemBalance());
              })
            ),
            a(this, O, r);
        }
        start() {
          o(this, d, V).call(this), o(this, d, et).call(this), e(this, R).start();
        }
        reset() {
          e(this, R).stop(),
            o(this, d, V).call(this),
            o(this, d, q).call(this),
            o(this, d, W).call(this, e(this, E).startBalance || 0);
        }
      }
      (E = new WeakMap()),
        (w = new WeakMap()),
        (c = new WeakMap()),
        (H = new WeakMap()),
        (K = new WeakMap()),
        (g = new WeakMap()),
        (R = new WeakMap()),
        (O = new WeakMap()),
        (d = new WeakSet()),
        (W = function (t) {
          document.querySelector("#balance_counter").innerText = `Balance: ${t}`;
        }),
        (Z = function () {
          for (let t = 0; t <= e(this, g).numCols(); t++)
            e(this, w).drawLine(
              "#486374",
              t * e(this, c),
              0,
              t * e(this, c),
              e(this, g).numRows() * e(this, c)
            );
          for (let t = 0; t <= e(this, g).numRows(); t++)
            e(this, w).drawLine(
              "#486374",
              0,
              t * e(this, c),
              e(this, g).numCols() * e(this, c),
              t * e(this, c)
            );
        }),
        (q = function () {
          e(this, w).clear(),
            e(this, g)
              .getMap()
              .forEach((t, s) => {
                t.forEach((r, n) => o(this, d, tt).call(this, r, n, s));
              }),
            o(this, d, Z).call(this);
        }),
        (tt = function (t, s, r) {
          var h;
          return (h = [
            {
              predicate: (u) => [0, 1, 2].includes(u),
              delegate: (u) => {
                e(this, w).fillRect(
                  o(this, d, M).call(this, u),
                  s * e(this, c),
                  r * e(this, c),
                  e(this, c),
                  e(this, c)
                );
              },
            },
            {
              predicate: (u) => u === 3,
              delegate: (u) => {
                e(this, w).fillDiamond(
                  o(this, d, M).call(this, u),
                  s * e(this, c),
                  r * e(this, c),
                  e(this, c),
                  e(this, c)
                );
              },
            },
            {
              predicate: (u) => u === 4,
              delegate: (u) => {
                e(this, w).fillRect(
                  o(this, d, M).call(this, 2),
                  s * e(this, c),
                  r * e(this, c),
                  e(this, c),
                  e(this, c)
                ),
                  e(this, w).fillDiamond(
                    o(this, d, M).call(this, 3),
                    s * e(this, c),
                    r * e(this, c),
                    e(this, c),
                    e(this, c)
                  );
              },
            },
          ].find((u) => u.predicate(t))) == null
            ? void 0
            : h.delegate(t);
        }),
        (M = function (t) {
          return { 0: "white", [ot]: "black", [ct]: "#FF8A00", [lt]: "#55EFFB" }[t];
        }),
        (et = function () {
          e(this, O).call(this, e(this, g).cells()[0]);
        }),
        (V = function () {
          a(this, g, e(this, E).createGrid());
        });
      const X = [
          [0, 0, 0, 0, 0, 0],
          [0, 1, 1, 1, 1, 0],
          [0, 1, 0, 0, 1, 0],
          [0, 1, 2, 0, 0, 3],
          [0, 1, 0, 0, 1, 0],
          [0, 1, 1, 1, 1, 0],
          [0, 0, 0, 0, 0, 0],
        ],
        D = [
          [0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 3, 0, 0, 0, 0, 3, 0, 0],
          [0, 0, 1, 1, 1, 1, 0, 0, 0],
          [0, 0, 1, 0, 0, 1, 0, 0, 0],
          [0, 0, 1, 2, 0, 0, 3, 0, 0],
          [0, 0, 1, 0, 0, 1, 0, 0, 0],
          [0, 0, 1, 1, 1, 1, 0, 0, 0],
          [0, 3, 0, 0, 0, 0, 3, 0, 0],
          [0, 0, 0, 0, 0, 0, 0, 0, 0],
        ],
        st = {
          demo: {
            createGrid: () => {
              const i = new S(window.structuredClone([[0,0,0,0,0,0],[0,1,1,1,1,0],[0,1,0,0,1,0],[0,1,2,0,0,3],[0,1,0,0,1,0],[0,1,1,1,1,0],[0,0,0,0,0,0]]));
              return i.enableInstantMode(), i;
            },
            gemGoal: D.flat().filter((i) => i === 3).length,
          },
        },
        ut = Object.keys(st),
        dt = (i) => {
          let t = i,
            s = [];
          const r = {
            value() {
              return t;
            },
            setValue(n) {
              console.log("new value", n),
                (t = n),
                console.log({ listeners: s }),
                s.forEach((h) => h(t));
            },
            subscribe(n) {
              console.log("subscribed: ", n), s.push(n);
            },
          };
          return (
            setTimeout(() => {
              r.setValue(i);
            }, 100),
            r
          );
        },
        mt = dt(ut[0]);
      const ft = new it("gameCanvas"),
        k = new Promise((i) => {
          new at(ft, st.demo, i).start();
        });
    </script>
  </head>
  <body>
    <div id="gameContainer">
      <div id="canvasContainer">
        <canvas width="1000" height="1000" id="gameCanvas"></canvas>
      </div>
    </div>
  </body>
</html>


With unit tests

Awesome!

With unit tests

Awesome!