WIP grid implementation

island.ts

@@ -4,6 +4,52 @@ const BLOWUP = 4;
 const WIDTH = 240;
 const HEIGHT = 135;
 
+type Lookup2d = (x: number, y: number) => number;
+function dim(width: number, height: number): Lookup2d {
+  return function xy(x: number, y: number) {
+    return (
+      (((x % width) + width) % width) +
+      width * (((y % height) + height) % height)
+    );
+  };
+}
+
+class IslandGrid {
+  data: number[];
+  xy: Lookup2d;
+
+  constructor(public width: number, public height: number) {
+    this.data = Array(width * height).fill(0);
+    this.xy = dim(width, height);
+  }
+}
+
+function renderIslands(islands: IslandGrid, cx: CanvasRenderingContext2D) {
+  for (let y = 0; y < islands.height; y++) {
+    for (let x = 0; x < islands.width; x++) {
+      const tile = islands.data[islands.xy(x, y)];
+      switch (tile) {
+        case 0:
+          cx.fillStyle = "blue";
+          break;
+        case 1:
+          cx.fillStyle = "yellow";
+          break;
+        case 2:
+          cx.fillStyle = "#00ff00";
+          break;
+        case 3:
+          cx.fillStyle = "#008800";
+          break;
+        default:
+          cx.fillStyle = "#666666";
+          break;
+      }
+      cx.fillRect(x, y, 1, 1);
+    }
+  }
+}
+
 export function IslandApplet() {
   const [canvas, cx] = canvas2d({
     width: WIDTH * BLOWUP,
@@ -11,10 +57,14 @@ export function IslandApplet() {
   });
   cx.scale(BLOWUP, BLOWUP);
 
-  cx.fillStyle = "red";
+  const islands = new IslandGrid(WIDTH, HEIGHT);
-  cx.fillRect(0, 0, WIDTH, HEIGHT);
+
-  cx.fillStyle = "blue";
+  islands.data[islands.xy(5, 5)] = 1;
-  cx.fillRect(1, 1, WIDTH - 2, HEIGHT - 2);
+  islands.data[islands.xy(6, 5)] = 2;
+  islands.data[islands.xy(7, 5)] = 3;
+  islands.data[islands.xy(8, 5)] = 4;
+  islands.data[islands.xy(9, 5)] = 5;
+  renderIslands(islands, cx);
 
   return [canvas];
 }