From 95fd952b6d4c496efc0e6236ba2acfcbbeee8ed9 Mon Sep 17 00:00:00 2001
From: sanine <sanine.not@pm.me>
Date: Sun, 12 Nov 2023 13:59:50 -0600
Subject: add visualization

---
 src/ui/canvas.js | 11 +++++++++
 src/ui/index.js  | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 src/ui/canvas.js
 create mode 100644 src/ui/index.js

(limited to 'src/ui')

diff --git a/src/ui/canvas.js b/src/ui/canvas.js
new file mode 100644
index 0000000..b04b966
--- /dev/null
+++ b/src/ui/canvas.js
@@ -0,0 +1,11 @@
+'use strict';
+
+export function draw(canvas, size, fn) {
+  const ctx = canvas.getContext("2d");
+  const scale = canvas.clientWidth/size;
+  ctx.save();
+  ctx.scale(scale, scale);
+  ctx.clearRect(0, 0, size, size);
+  fn(ctx);
+  ctx.restore();
+}
diff --git a/src/ui/index.js b/src/ui/index.js
new file mode 100644
index 0000000..b710b48
--- /dev/null
+++ b/src/ui/index.js
@@ -0,0 +1,72 @@
+import { draw } from './canvas.js';
+import { create_team, create_epoch, update_epoch } from '../simulation/game.js';
+
+
+const start_teams = [...Array(5)].map(x => create_team(8, 50, 50));
+let epoch = create_epoch(60, start_teams);
+
+
+function draw_cell(ctx, x, y, cell) {
+  ctx.fillStyle = (() => {
+    switch (cell.type) {
+      case 'empty':
+        return '#ffffff';
+      case 'immutable':
+        return '#0000ff';
+      case 'mutable':
+        return '#555555';
+      case 'active':
+        return '#000000';
+      case 'flag':
+        return '#ffff00';
+      default:
+        return '#00ff00';
+    }
+  })();
+  ctx.fillRect(x, y, 1, 1);
+}
+
+function draw_agent(ctx, agent) {
+  ctx.beginPath();
+  ctx.fillStyle = '#ff0000';
+  const { x, y } = agent;
+  ctx.arc(x+.5, y+.5, .5, 0, 2*Math.PI);
+  ctx.fill();
+}
+
+
+function render(canvas) {
+  draw(canvas, epoch.size, (ctx) => {
+    for (let y=0; y<epoch.size; y++) {
+      for (let x=0; x<epoch.size; x++) {
+        draw_cell(ctx, x, y, epoch.game.world.lattice[y][x]);
+      }
+    }
+    epoch.game.world.agents.forEach(a => draw_agent(ctx, a));
+  });
+}
+
+
+function update(canvas) {
+  console.log('update');
+  epoch = update_epoch(epoch);
+  render(canvas);
+  setTimeout(() => update(canvas), 1);
+}
+
+
+function main() {
+  const canvas = document.getElementById('canvas');
+  window.onresize = () => { 
+    const size = 0.95*window.innerWidth
+    canvas.width = size;
+    canvas.height = size;
+    render(canvas); 
+  }
+  window.onresize();
+  console.log("c:");
+  update(canvas);
+}
+
+
+window.onload = main;
-- 
cgit v1.2.1