Fix minor issues

- Fix some dot outline issues when updating the colour of a dot - Correctly use the default colour when intialising the grid
jamesroutley · Sep 6, 2020 · a5b1b00 · a5b1b00
1 parent bf93a4e
commit a5b1b00
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/build/engine.js b/build/engine.js
@@ -74,7 +74,7 @@ var Game = /** @class */ (function () {
         for (var y = 0; y < this._dots.length; y++) {
             var row = new Array(this._gridWidth);
             for (var i = 0; i < row.length; i++) {
-                row[i] = this._config.defaultDotColor;
+                row[i] = this._config.defaultDotColor || Color.Gray;
             }
             this._dots[y] = row;
         }
@@ -353,6 +353,9 @@ var CanvasIOManager = /** @class */ (function () {
         ctx.translate(this._dotSize / 2, this._dotSize / 2);
         // Move coordinates again, to where the dot should be plotted
         ctx.translate(x * offset, y * offset);
+        // Clear the space the dot occupies. This prevents minor outline issues
+        // when changing the colour of a dot
+        ctx.clearRect(-this._dotSize / 2, -this._dotSize / 2, this._dotSize, this._dotSize);
         ctx.fillStyle = this._getCSSColor(val);
         ctx.beginPath();
         ctx.arc(0, 0, this._dotSize / 2, 0, 2 * Math.PI);

diff --git a/docs/js/engine.js b/docs/js/engine.js
@@ -74,7 +74,7 @@ var Game = /** @class */ (function () {
         for (var y = 0; y < this._dots.length; y++) {
             var row = new Array(this._gridWidth);
             for (var i = 0; i < row.length; i++) {
-                row[i] = this._config.defaultDotColor;
+                row[i] = this._config.defaultDotColor || Color.Gray;
             }
             this._dots[y] = row;
         }
@@ -353,6 +353,9 @@ var CanvasIOManager = /** @class */ (function () {
         ctx.translate(this._dotSize / 2, this._dotSize / 2);
         // Move coordinates again, to where the dot should be plotted
         ctx.translate(x * offset, y * offset);
+        // Clear the space the dot occupies. This prevents minor outline issues
+        // when changing the colour of a dot
+        ctx.clearRect(-this._dotSize / 2, -this._dotSize / 2, this._dotSize, this._dotSize);
         ctx.fillStyle = this._getCSSColor(val);
         ctx.beginPath();
         ctx.arc(0, 0, this._dotSize / 2, 0, 2 * Math.PI);

diff --git a/examples/test_example/build/game.js b/examples/test_example/build/game.js
@@ -46,7 +46,7 @@ var config = {
     update: update,
     onKeyPress: onKeyPress,
     onDotClicked: onDotClicked,
-    clearGrid: false,
+    // clearGrid: false,
     gridHeight: 20,
     gridWidth: 20,
     frameRate: 20,

diff --git a/examples/test_example/game.ts b/examples/test_example/game.ts
@@ -65,7 +65,7 @@ let config: GameConfig = {
   update: update,
   onKeyPress: onKeyPress,
   onDotClicked: onDotClicked,
-  clearGrid: false,
+  // clearGrid: false,
   gridHeight: 20,
   gridWidth: 20,
   frameRate: 20,

diff --git a/src/engine.ts b/src/engine.ts
@@ -164,7 +164,7 @@ class Game {
     for (let y = 0; y < this._dots.length; y++) {
       let row = new Array(this._gridWidth);
       for (let i = 0; i < row.length; i++) {
-        row[i] = this._config.defaultDotColor;
+        row[i] = this._config.defaultDotColor || Color.Gray;
       }
       this._dots[y] = row;
     }
@@ -531,6 +531,15 @@ class CanvasIOManager {
     // Move coordinates again, to where the dot should be plotted
     ctx.translate(x * offset, y * offset);
 
+    // Clear the space the dot occupies. This prevents minor outline issues
+    // when changing the colour of a dot
+    ctx.clearRect(
+      -this._dotSize / 2,
+      -this._dotSize / 2,
+      this._dotSize,
+      this._dotSize
+    );
+
     ctx.fillStyle = this._getCSSColor(val);
     ctx.beginPath();
     ctx.arc(0, 0, this._dotSize / 2, 0, 2 * Math.PI);