summaryrefslogtreecommitdiff
path: root/src/ui
diff options
context:
space:
mode:
authorsanine <sanine.not@pm.me>2023-11-12 13:59:50 -0600
committersanine <sanine.not@pm.me>2023-11-12 13:59:50 -0600
commit95fd952b6d4c496efc0e6236ba2acfcbbeee8ed9 (patch)
tree2fd28076f9fe119481dcb439865b4076d00fc692 /src/ui
parent22fe18beac4459427c2b40499afafc7c5c868691 (diff)
add visualization
Diffstat (limited to 'src/ui')
-rw-r--r--src/ui/canvas.js11
-rw-r--r--src/ui/index.js72
2 files changed, 83 insertions, 0 deletions
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;