add visualization

1 files changed, 72 insertions, 0 deletions

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;