src/components/CanvasBoard.vue

@@ -22,8 +22,6 @@
     createBoard,
     conwayRules,
     overpopulationRules,
-    lonelinessRules,
-    threebornRules,
     evolve2d,
   } from "../modules/automata.js";
   import { getRandomInt, sleep } from "../modules/common.js";
@@ -40,8 +38,6 @@
         available2dRules: {
           conway: conwayRules,
           overpopulation: overpopulationRules,
-          loneliness: lonelinessRules,
-          threeborn: threebornRules,
         },
       };
     },
@@ -93,10 +89,9 @@
     mounted() {
       this.canvas = Object.freeze(document.getElementById("board-canvas"));
       this.workCanvas = Object.freeze(document.getElementById("work-canvas"));
-      this.ctx = this.canvas.getContext("2d", { willReadFrequently: true });
-      this.workCtx = this.workCanvas.getContext("2d", {
-        willReadFrequently: true,
-      });
+      this.ctx = this.canvas.getContext("2d");
+      this.workCtx = this.workCanvas.getContext("2d");
+      this.workCanvas.setAttribute("willReadFrequently", true);
       this.canvasWidth = this.canvas.parentElement.clientWidth;
       this.canvasHeight = this.canvas.parentElement.clientHeight;
       this.setBoardWidth();
@@ -140,7 +135,7 @@
         this.drawCanvas(this.lastBoard);
         this.toggleStop();
       },
-      // draw 2D automaton on the canvas in a loop
+      // draw 2D automaton on the canvas (currently only the game of life)
       draw2d(board) {
         if (!this.canDraw) return;
         const draw2dNext = async (b) => {
@@ -150,7 +145,6 @@
             this.available2dRules[this.selected2dRules.id]
           );
           this.drawCanvas(b, this.cellProperties);
-          this.lastBoard = Object.freeze(newBoard);
           await sleep(this.refreshRate);
           draw2dNext(newBoard);
         };

src/components/MenuCellProperties.vue

@@ -6,7 +6,7 @@
         <input
           name="liveColor"
           type="color"
-          :value="cellProperties.liveColor"
+          @value="cellProperties.liveColor"
           @input="updateCellProperties"
         />
       </div>
@@ -19,9 +19,6 @@
           @input="updateCellProperties"
         />
       </div>
-      <div class="form-field">
-        <a name="switchColor" @click="switchColor">Switch Colors</a>
-      </div>
       <div class="form-field">
         <label>Cell size</label>
         <input
@@ -29,7 +26,7 @@
           type="number"
           min="1"
           :value="cellProperties.size"
-          @click="updateCellProperties"
+          @input="updateCellProperties"
         />
       </div>
     </form>
@@ -61,17 +58,6 @@
         this.setBoardWidth();
         this.setBoardHeight();
       },
-      switchColor() {
-        [this.cellProperties["liveColor"], this.cellProperties["deadColor"]] = [
-          this.cellProperties["deadColor"],
-          this.cellProperties["liveColor"],
-        ];
-      },
     },
   };
 </script>
-<style scoped>
-  a:hover {
-    cursor: pointer;
-  }
-</style>

src/modules/automata.js

@@ -91,28 +91,6 @@ function conwayRules(cell, neighbors) {
   return cell;
 }
 
-// variation on the game of life's rules,
-// where the "three live neighbors" rule is ignored
-function threebornRules(cell, neighbors) {
-  // loneliness rule
-  if (cell === 1 && neighbors < 2) return 0;
-  // overpopulation rule
-  if (cell === 1 && neighbors > 3) return 0;
-  // born when three live neighbors rule
-  return cell;
-}
-
-// variation on the game of life's rules,
-// where the loneliness rule is ignored
-function lonelinessRules(cell, neighbors) {
-  // overpopulation rule
-  if (cell === 1 && neighbors > 3) return 0;
-  // born when three live neighbors rule
-  if (cell === 0 && neighbors === 3) return 1;
-  // the cell remains the same if none apply
-  return cell;
-}
-
 // variation on the game of life's rules,
 // where the overpopulation rule is ignored
 function overpopulationRules(cell, neighbors) {
@@ -182,8 +160,6 @@ export {
   create1dStateOneCell,
   conwayRules,
   overpopulationRules,
-  lonelinessRules,
-  threebornRules,
   evolve1d,
   evolve2d,
 };

src/modules/preset.js

@@ -104,18 +104,6 @@ const preset2dRules = [
     description:
       "Variation on Conway's Game of Life *without* the overpopulation rule",
   },
-  {
-    id: "loneliness",
-    name: "Loneliness variation",
-    description:
-      "Variation on Conway's Game of Life *without* the loneliness rule",
-  },
-  {
-    id: "threeborn",
-    name: "Three lives variation",
-    description:
-      "Variation on Conway's Game of Life *without* the 'three live neighbors' rule",
-  },
 ];
 
 export { presetRuleset, initialStates, preset2dRules };