Add basic settings for painter

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 -->

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;
-    }
 }

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();
+    });
 });