Set up basic drawing loop

src/main/index.html

@@ -33,7 +33,18 @@
     <div id="contents">
         <div id="header"></div>
 
-        ASDF
+        <section class="container">
+            <div class="row">
+                <div class="column">
+                    <!-- Canvas -->
+                    <div id="canvasContainer">
+                        <canvas id="canvas" class="invisible" width="1" height="1">
+                            Your browser must support the &lt;canvas&gt; element to run this game.
+                        </canvas>
+                    </div>
+                </div>
+            </div>
+        </section>
     </div>
     <div id="footer"></div>
 </main>

src/main/js/Main.ts

@@ -16,7 +16,88 @@ doAfterLoad(() => {
     $("main").classList.remove("hidden");
 });
 
-// TODO: What is this?
+
+const scale: number = 15;
+const width: number = 100;
+const height: number = 100;
+
+
+function isPrime(n: number): boolean {
+    if (!Number.isInteger(n)) return false;
+
+    if (n < 2) return false;
+    if (n === 2) return true;
+    if (n % 2 === 0) return false;
+
+    const limit = Math.floor(Math.sqrt(n));
+    for (let i = 3; i <= limit; i += 2)
+        if (n % i === 0)
+            return false;
+
+    return true;
+}
+
+function decompose(n: number): number[] {
+    let factors: number[] = [];
+
+    let target = n;
+    for (let i = 2; target !== 1; i = i === 2 ? 3 : i + 2) {
+        while (target % i === 0) {
+            factors.push(i);
+            target = target / i;
+        }
+    }
+
+    return factors;
+}
+
+function draw() {
+    const canvas = $("#canvas");
+    const ctx = canvas.getContext("2d")!;
+
+    function clearCanvas(ctx: CanvasRenderingContext2D): void {
+        ctx.save();
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.restore();
+    }
+
+    clearCanvas(ctx);
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.strokeStyle = "#7b7b7b";
+    for (let x = 0; x <= width; x++) {
+        ctx.moveTo(x * scale, 0);
+        ctx.lineTo(x * scale, height * scale);
+    }
+    for (let y = 0; y <= height; y++) {
+        ctx.moveTo(0, y * scale);
+        ctx.lineTo(width * scale, y * scale);
+    }
+    ctx.stroke();
+    ctx.restore();
+
+    ctx.save();
+    ctx.fillStyle = "#ff0000";
+    for (let i = 1; i <= width * height; i++) {
+        if (isPrime(i))
+            ctx.fillRect(((i - 1) % width) * scale, Math.floor((i - 1) / width) * scale, scale, scale);
+    }
+    ctx.restore();
+}
+
 doAfterLoad(async () => {
-    //
+    const canvas = $("#canvas");
+    canvas.classList.remove("invisible");
+    canvas.width = scale * width;
+    canvas.height = scale * height;
+
+    {
+        const cb = () => {
+            draw();
+            window.requestAnimationFrame(cb);
+        };
+        window.requestAnimationFrame(cb);
+    }
 });