2024.js/island.ts

import { canvas2d } from "./lib/html";

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,
    height: HEIGHT * BLOWUP,
  });
  cx.scale(BLOWUP, BLOWUP);

  const islands = new IslandGrid(WIDTH, HEIGHT);

  islands.data[islands.xy(5, 5)] = 1;
  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];
}

(globalThis as any).IslandApplet = IslandApplet;