From ddb0a37534e961513870b68c8c8555ab051610e6 Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Mon, 28 Feb 2022 20:42:40 +0100
Subject: [PATCH] Add basic settings for painter

---
 src/main/index.html    | 13 ++++++++
 src/main/js/Display.ts | 75 ++++++++++++++++++++++++++----------------
 src/main/js/Main.ts    | 21 +++++++++++-
 3 files changed, 79 insertions(+), 30 deletions(-)

diff --git a/src/main/index.html b/src/main/index.html
index f55c45b..26c0913 100644
--- a/src/main/index.html
+++ b/src/main/index.html
@@ -34,6 +34,19 @@
         <div id="header"></div>
 
         <section class="container">
+            <div class="row">
+                <form id="gridSettings">
+                    <label for="gridCols">Columns</label>
+                    <input type="number" id="gridCols" min="1" value="100" />
+
+                    <label for="gridMax">Max</label>
+                    <input type="number" id="gridMax" min="1" value="10000" />
+
+                    <label for="gridScale">Scale</label>
+                    <input type="number" id="gridScale" min="1" value="15" />
+                </form>
+            </div>
+
             <div class="row">
                 <div class="column">
                     <!-- Canvas -->
diff --git a/src/main/js/Display.ts b/src/main/js/Display.ts
index cb82f85..b727ed9 100644
--- a/src/main/js/Display.ts
+++ b/src/main/js/Display.ts
@@ -1,10 +1,6 @@
 import {CachedPrimeMath, PrimeMath} from "./PrimeMath";
 
 
-const width: number = 100;
-const height: number = 100;
-
-
 export class Display {
     private readonly canvas: HTMLCanvasElement;
 
@@ -43,64 +39,85 @@ export class Display {
 
 
     public reloadPainter(): void {
-        this.canvas.width = this._painter?.getWidth() ?? 1;
-        this.canvas.height = this._painter?.getHeight() ?? 1;
+        this.canvas.width = this._painter?.getPixelWidth() ?? 1;
+        this.canvas.height = this._painter?.getPixelHeight() ?? 1;
     }
 }
 
 
 export interface Painter {
+    getPixelWidth(): number;
+
+    getPixelHeight(): number;
+
     draw(canvas: HTMLCanvasElement): void;
-
-    getWidth(): number;
-
-    getHeight(): number;
 }
 
 export class GridPainter implements Painter {
-    private readonly scale: number = 15;
     private readonly primeMath: PrimeMath = CachedPrimeMath.getInstance();
 
+    public scale: number = 15;
+    public cols: number = 100;
+    public max: number = 10_001;
+
+    public get rows(): number {
+        return Math.ceil(this.max / this.cols);
+    }
+
+
+    getPixelWidth(): number {
+        return this.scale * this.cols;
+    }
+
+    getPixelHeight(): number {
+        return this.scale * this.rows;
+    }
+
 
     draw(canvas: HTMLCanvasElement): void {
         const ctx = canvas.getContext("2d")!;
 
-        // Clear canvas
+        this.clearCanvas(ctx);
+        this.drawGrid(ctx);
+        this.drawPrimes(ctx);
+    }
+
+    private clearCanvas(ctx: CanvasRenderingContext2D): void {
         ctx.save();
         ctx.fillStyle = "#ffffff";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.fillRect(0, 0, this.getPixelWidth(), this.getPixelHeight());
         ctx.restore();
+    }
 
-        // Draw grid
+    private drawGrid(ctx: CanvasRenderingContext2D): void {
+        // TODO: Don't draw grid for non-filled rows
         ctx.save();
         ctx.beginPath();
         ctx.strokeStyle = "#7b7b7b";
-        for (let x = 0; x <= width; x++) {
+        for (let x = 0; x <= this.cols; x++) {
             ctx.moveTo(x * this.scale, 0);
-            ctx.lineTo(x * this.scale, height * this.scale);
+            ctx.lineTo(x * this.scale, this.rows * this.scale);
         }
-        for (let y = 0; y <= height; y++) {
+        for (let y = 0; y <= this.rows; y++) {
             ctx.moveTo(0, y * this.scale);
-            ctx.lineTo(width * this.scale, y * this.scale);
+            ctx.lineTo(this.cols * this.scale, y * this.scale);
         }
         ctx.stroke();
         ctx.restore();
+    }
 
-        // Draw primes
+    private drawPrimes(ctx: CanvasRenderingContext2D): void {
         ctx.save();
         ctx.fillStyle = "#ff0000";
-        for (let i = 1; i <= width * height; i++) {
+        for (let i = 1; i <= this.max; i++) {
             if (this.primeMath.isPrime(i))
-                ctx.fillRect(((i - 1) % width) * this.scale, Math.floor((i - 1) / width) * this.scale, this.scale, this.scale);
+                ctx.fillRect(
+                    ((i - 1) % this.cols) * this.scale,
+                    Math.floor((i - 1) / this.cols) * this.scale,
+                    this.scale,
+                    this.scale
+                );
         }
         ctx.restore();
     }
-
-    getWidth(): number {
-        return this.scale * width;
-    }
-
-    getHeight(): number {
-        return this.scale * height;
-    }
 }
diff --git a/src/main/js/Main.ts b/src/main/js/Main.ts
index 5b72236..27ac0f3 100644
--- a/src/main/js/Main.ts
+++ b/src/main/js/Main.ts
@@ -24,6 +24,25 @@ doAfterLoad(async () => {
     canvas.classList.remove("invisible");
 
     const display = new Display(canvas);
-    display.painter = new GridPainter();
+    const gridPainter = new GridPainter();
+    display.painter = gridPainter;
     display.startDrawLoop();
+
+    const gridCols = $("#gridCols");
+    gridCols.addEventListener("change", () => {
+        gridPainter.cols = gridCols.value;
+        display.reloadPainter();
+    });
+
+    const gridMax = $("#gridMax");
+    gridMax.addEventListener("change", () => {
+        gridPainter.max = gridMax.value;
+        display.reloadPainter();
+    });
+
+    const gridScale = $("#gridScale");
+    gridScale.addEventListener("change", () => {
+        gridPainter.scale = gridScale.value;
+        display.reloadPainter();
+    });
 });