Merge pull request #14 from kaunta/i8

Allow for multiple brush sizes

game.html

@@ -11,10 +11,14 @@ <h1>Falling Sand Game</h1>
 		<h2>Brush Types</h2>
 		<button onclick="game.brush = Species.Wall">Wall</button>
 		<button onclick="game.brush = Species.Empty">Eraser</button>
+		<h2>Brush Sizes</h2>
+		<button onclick="game.brushSize = 1">1x</button>
+		<button onclick="game.brushSize = 4">4x</button>
+		<button onclick="game.brushSize = 16">16x</button>
 		<script>
 		game = new FallingSandGame(document.getElementById("game-canvas"));
 		tick = () => {
-			game.draw();
+			game.render();
 			requestAnimationFrame(tick);
 		};
 		tick();

game.ts

@@ -3,7 +3,7 @@ class FallingSandGame {
     readonly world: Uint8Array;
     drawing: boolean = false;
     brush: Species = Species.Wall;
-
+    brushSize: number = 1;
 
     constructor(canvas: HTMLCanvasElement) {
         this.canvas = canvas;
@@ -14,12 +14,11 @@ class FallingSandGame {
         this.canvas.addEventListener('mousemove', penMove(this));
     }
 
-    draw() {
+    render() {
         const ctx = this.canvas.getContext("2d");
         const imageData = ctx.createImageData(this.canvas.width, this.canvas.height);
         const unknownRGB = [236, 66, 245];
         for (let i = 0; i < this.canvas.width * this.canvas.height; i++) {
-            const cell = this.world[i];
             const [r, g, b] = Color[this.world[i]] || unknownRGB;
             imageData.data[4 * i + 0] = r;
             imageData.data[4 * i + 1] = g;
@@ -29,31 +28,40 @@ class FallingSandGame {
         ctx.putImageData(imageData, 0, 0);
     }
 
+    draw(x: number, y: number) {
+        for (let dx = 0; dx < this.brushSize; dx++) {
+            for (let dy = 0; dy < this.brushSize; dy++) {
+                const i = (x + dx) + (y + dy) * this.canvas.width;
+                this.world[i] = this.brush;
+            }
+        }
+    }
+
 }
 
 const penUp = (game: FallingSandGame) => (event: MouseEvent) => {
     game.drawing = false;
 };
 const penDown = (game: FallingSandGame) => (event: MouseEvent) => {
     game.drawing = true;
-    const i = event.offsetX + event.offsetY * game.canvas.width;
-    game.world[i] = game.brush;
+    game.draw(event.offsetX, event.offsetY);
 };
 const penMove = (game: FallingSandGame) => (event: MouseEvent) => {
     if (game.drawing) {
-        const i = event.offsetX + event.offsetY * game.canvas.width;
-        game.world[i] = game.brush;
+        const x = event.offsetX;
+        const y = event.offsetY;
+        game.draw(x, y);
         // dx line
         const dx = Math.abs(event.movementX);
         const sx = Math.sign(event.movementX);
         for (let d = 0; d <= dx; d++) {
-            game.world[i - sx * d] = game.brush;
+            game.draw(x - d * sx, y);
         }
         // dy line
         const dy = Math.abs(event.movementY);
         const sy = Math.sign(event.movementY);
         for (let d = 0; d <= dy; d++) {
-            game.world[i - sx * dx - game.canvas.width * sy * d] = game.brush;
+            game.draw(x - sx * dx, y - d * sy);
         }
     }
 }