README.md

@@ -44,4 +44,3 @@ See [Configuration Reference](https://vitejs.dev/guide/).
 - https://en.wikipedia.org/wiki/Hashlife
 - https://plato.stanford.edu/entries/cellular-automata/supplement.html
 - https://www.conwaylife.com/wiki/Cellular_automaton
-- https://conwaylife.com/

package.json

@@ -3,29 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
-    "format": "prettier .  --write",
+    "format": "prettier .  --write"
-    "coverage": "vitest run --coverage",
-    "test": "vitest"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "3.2.0",
+    "@vitejs/plugin-vue": "^3.2.0",
-    "install": "0.13.0",
+    "install": "^0.13.0",
-    "pinia": "2.0.27",
+    "pinia": "^2.0.27",
-    "vite": "^3.2.10",
+    "vite": "^3.2.4",
     "vue": "3.2"
   },
   "devDependencies": {
-    "@testing-library/vue": "^6.6.1",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^9.8.0",
-    "happy-dom": "^8.1.1",
+    "prettier": "2.8.0"
-    "prettier": "2.8.0",
-    "vitest": "^0.26.2"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -1,57 +1,66 @@
-<script setup>
-  import MainMenu from "./components/MainMenu.vue";
-  import CanvasBoard from "./components/CanvasBoard.vue";
-  import MenuReset from "./components/MenuReset.vue";
-  import { globalStore } from "./stores/index.js";
-  import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
-
-  const store = globalStore();
-
-  const windowWidth = ref(window.innerWidth);
-
-  const toggleMainMenu = () => {
-    store.setMainMenu(!store.mainMenu);
-  };
-
-  const onResize = () => {
-    nextTick(() => {
-      windowWidth.value = window.innerWidth;
-      // TODO: changing the width will clear the canvas. Find something else
-      store.renderer.resize(window.innerWidth, window.innerHeight);
-      store.setBoardWidth();
-      store.setBoardHeight();
-    });
-  };
-
-  onMounted(() => {
-    nextTick(() => {
-      window.addEventListener("resize", onResize);
-    });
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener("resize", onResize);
-  });
-</script>
-
 <template>
-  <main>
+  <div id="main">
-    <h1
+    <h1 id="main-title">Cellular Automata Explorer</h1>
-      v-if="store.mainMenu || windowWidth <= 800"
+    <div id="container">
-      id="main-title"
+      <MainMenu />
-      class="main-title"
-    >
-      <span id="burger-toggle" class="burger-toggle" @click="toggleMainMenu">
-        {{ store.mainMenu == true ? "▼" : "☰" }}
-      </span>
-      <span>Cellular Automata Explorer</span>
-    </h1>
-    <div id="container" class="container">
-      <MainMenu v-if="store.mainMenu || windowWidth >= 800" class="main-menu" />
       <CanvasBoard />
     </div>
-    <MenuReset :window-width="windowWidth" />
+  </div>
-  </main>
 </template>
 
-<style src="./assets/css/main.css"></style>
+<script>
+  import MainMenu from "./components/MainMenu.vue";
+  import CanvasBoard from "./components/CanvasBoard.vue";
+
+  export default {
+    name: "App",
+    components: {
+      MainMenu,
+      CanvasBoard,
+    },
+  };
+</script>
+
+<style>
+  #app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    /* color: #2c3e50; */
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    background: black;
+    color: white;
+    font-family: Courier New;
+  }
+
+  canvas {
+    flex: auto;
+    background: #110812;
+    margin-right: 10px;
+  }
+
+  h1,
+  h2 {
+    font-weight: bold;
+  }
+
+  h1 {
+    margin: 10px auto;
+    font-size: larger;
+    text-align: center;
+  }
+
+  #container {
+    display: flex;
+    height: calc(100vh - 100px);
+    overflow: hidden;
+  }
+</style>

src/assets/css/main.css

@@ -1,228 +0,0 @@
-:root {
-  --dark1: #000000;
-  --dark2: #333333;
-  --dark3: #666666;
-  --light1: #999999;
-  --light2: #cccccc;
-  --light3: #eeeeee;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  background: var(--dark1);
-  color: var(--light3);
-  /* font-family: Courier New; */
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-}
-
-canvas {
-  flex: auto;
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 1) 0%,
-    rgba(131, 131, 131, 1) 52%,
-    rgba(0, 0, 0, 1) 100%
-  );
-}
-
-h1,
-h2,
-.desktop-title {
-  font-weight: bold;
-}
-
-h1,
-.desktop-title {
-  font-size: larger;
-  text-transform: uppercase;
-}
-
-.container {
-  display: flex;
-  height: calc(100vh - 100px);
-  overflow: hidden;
-  flex-direction: column;
-}
-
-.burger-toggle {
-  display: none;
-  cursor: pointer;
-  font-size: 1.5em;
-  vertical-align: middle;
-  color: var(--light2);
-}
-
-a {
-  font-weight: bold;
-  border: 1px solid white;
-  padding: 2px;
-}
-
-h2:hover {
-  cursor: pointer;
-  color: var(--light2);
-}
-
-select {
-  margin-top: 10px;
-  padding: 5px;
-}
-
-input[type="number"] {
-  max-width: 100%;
-  height: 100%;
-}
-
-input[type="button"] {
-  min-width: 40px;
-  min-height: 40px;
-  margin: 0 5px;
-  font-weight: bold;
-  line-height: 1.5em;
-  border-radius: 0;
-  outline: none;
-  border: none;
-  font-size: 1.1em;
-  background: var(--light2);
-}
-
-input[type="button"]:hover {
-  background: var(--light3);
-}
-
-.form-field {
-  display: flex;
-  margin: 10px;
-  justify-content: space-between;
-}
-
-.menu-row {
-  flex: 1;
-  position: relative;
-}
-
-.menu-row h2 {
-  font-size: medium;
-  padding: 10px;
-  cursor: pointer;
-  border-bottom: 1px solid var(--dark3);
-  border-top: 1px solid var(--dark3);
-}
-
-.menu-row a {
-  color: white;
-  font-weight: bold;
-  text-decoration: none;
-  font-size: small;
-}
-
-.menu-row-content {
-  position: absolute;
-  background: var(--dark1);
-  width: 100%;
-  overflow: scroll;
-}
-
-label,
-.form-field label {
-  margin-right: 10px;
-  font-weight: bold;
-}
-
-.canvas-board {
-  flex: 1;
-  margin: 0 auto;
-}
-
-.main-menu {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  flex: 1;
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.main-menu::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.main-menu {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-.reset-menu {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px;
-  vertical-align: center;
-}
-
-.next,
-.stop,
-.reset {
-  display: inline-block;
-  vertical-align: bottom;
-}
-
-.reset-menu .loop {
-  padding: 5px;
-  display: inline-block;
-}
-
-@media screen and (max-width: 800px) {
-  h1 {
-    font-size: medium;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 10px;
-  }
-
-  .burger-toggle {
-    display: inline;
-  }
-
-  .main-menu {
-    background: var(--dark2);
-    margin: 0 auto;
-    flex-direction: column;
-    position: absolute;
-  }
-
-  .menu-row {
-    margin: 0 auto;
-    width: 100%;
-  }
-
-  .menu-row h2,
-  .form-field {
-    margin: 0;
-  }
-
-  .menu-row h2 {
-    border-bottom: 1px solid var(--dark3);
-    border-top: none;
-  }
-
-  .form-field {
-    padding: 10px;
-  }
-
-  .menu-row-content {
-    position: relative;
-    width: 100%;
-  }
-
-  .reset-menu {
-    justify-content: flex-end;
-  }
-}

src/components/CanvasBoard.vue

@@ -1,194 +1,148 @@
-<script setup>
+<template>
-  import { onMounted, watch } from "vue";
+  <main id="mainContent">
+    <canvas
+      id="canvas-board"
+      ref="canvas-board"
+      :width="canvasWidth"
+      :height="canvasHeight"
+    />
+  </main>
+</template>
+<script>
+  import { mapActions, mapState, mapWritableState } from "pinia";
   import { globalStore } from "../stores/index.js";
   import {
+    create1dState,
+    create1dStateOneCell,
+    create2dState,
     createBoard,
     conwayRules,
-    overpopulationRules,
-    lonelinessRules,
-    threebornRules,
-    highLifeRules,
-    servietteRules,
     evolve2d,
-  } from "../modules/core.js";
+  } from "../modules/automata.js";
-  import {
+  import { getRandomInt, sleep } from "../modules/common.js";
-    create1dInitialState,
-    create2dRandomGrid,
-  } from "../modules/board.js";
-  import { picToBoard } from "../modules/picture.js";
 
-  const store = globalStore();
+  export default {
-  const available2dRules = {
+    name: "CanvasBoard",
-    conway: conwayRules,
+    data() {
-    overpopulation: overpopulationRules,
+      return {
-    loneliness: lonelinessRules,
+        canvas: null,
-    threeborn: threebornRules,
+        ctx: null,
-    highlife: highLifeRules,
+      };
-    serviette: servietteRules,
+    },
-  };
+    computed: {
-
+      ...mapState(globalStore, {
-  // used to determine the dimensions of the board
+        cellProperties: "cellProperties",
-  // TODO: should be a Board method
+        rules: "rules1d",
-  const max = () => {
+        refreshRate: "refreshRate",
-    return Math.max(store.board.width, store.board.height);
+        initial1dState: "initial1dState",
-  };
+        drawingDirection: "drawingDirection",
-
+        canDraw: "canDraw",
-  const selectedRules = () => {
+        getDraw1d: "draw1d",
-    return available2dRules[store.selected2dRules.id];
+        getDraw2d: "draw2d",
-  };
+        getDraw2dLast: "draw2dLast",
-
+      }),
-  watch(
+      ...mapWritableState(globalStore, {
-    () => store.draw1d,
+        lastBoard: "lastBoard",
-    (value) => {
+        canvasWidth: "canvasWidth",
-      if (value == true) draw1d();
+        canvasHeight: "canvasHeight",
-    }
+        getReset: "reset",
-  );
+      }),
-
+      boardWidth: function () {
-  watch(
+        return Math.floor(this.canvasWidth / this.cellProperties.size);
-    () => store.draw2d,
+      },
-    (value) => {
+      boardHeight: function () {
-      if (value == true) draw2dNew();
+        return Math.floor(this.canvasHeight / this.cellProperties.size);
-    }
+      },
-  );
+    },
-
+    watch: {
-  watch(
+      getDraw1d(value) {
-    () => store.draw2dLast,
+        if (value == true) this.draw1d();
-    async (value) => {
+      },
-      if (value == true) await draw2dLast();
+      getDraw2d(value) {
-    }
+        if (value == true) this.draw2dNew();
-  );
+      },
-
+      getDraw2dLast(value) {
-  watch(
+        if (value == true) this.draw2dLast();
-    () => store.draw2dpicture,
+      },
-    (value) => {
+      getReset(value) {
-      if (value == true) draw2dPicture();
+        if (value == true) this.reset();
-    }
+      },
-  );
+    },
-
+    mounted() {
-  watch(
+      this.canvas = Object.freeze(document.getElementById("canvas-board"));
-    () => store.reset,
+      this.ctx = this.canvas.getContext("2d");
-    (value) => {
+      this.canvasWidth = this.canvas.parentElement.clientWidth;
-      if (value == true) reset();
+      this.canvasHeight = this.canvas.parentElement.clientHeight;
-    }
+    },
-  );
+    methods: {
-
+      ...mapActions(globalStore, ["toggleStop"]),
-  onMounted(() => {
+      drawCanvas(board) {
-    // TODO : butt ugly.
+        const props = this.cellProperties;
-    const canvas = document.getElementById("board-canvas");
+        board.map((row, y) => {
-    store.renderer.width = canvas.parentElement.clientWidth;
+          const d = props.size;
-    store.renderer.height = canvas.parentElement.clientHeight;
+          return row.map((cell, x) => {
-    store.renderer.canvas = canvas;
+            this.ctx.fillStyle = (() => {
-    store.renderer.ctx = store.renderer.canvas.getContext("2d", {
+              if (cell === 1) return props.liveColor;
-      willReadFrequently: true,
+              return props.deadColor;
-    });
+            })();
-    if (typeof OffscreenCanvas != "undefined") {
+            if (this.drawingDirection === "x")
-      store.renderer.workCanvas = new OffscreenCanvas(
+              this.ctx.fillRect(y * d, x * d, d, d);
-        canvas.parentElement.clientWidth,
+            else this.ctx.fillRect(x * d, y * d, d, d);
-        canvas.parentElement.clientHeight
+            return cell;
-      );
+          });
-    }
+        });
-    // https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/OffscreenCanvas#Browser_compatibility
+      },
-    // Fallback for when offscreenCanvas is unsupported or disabled (Firefox < 44, default for Firefox?)
+      compute1dInitialState() {
-    else {
+        if (this.initial1dState === "onecell")
-      store.renderer.workCanvas = document.createElement("canvas");
+          return create1dStateOneCell(this.boardWidth);
-      store.renderer.workCanvas.width = canvas.parentElement.clientWidth;
+        return create1dState(this.boardWidth, getRandomInt, [0, 2]);
-      store.renderer.workCanvas.height = canvas.parentElement.clientHeight;
+      },
-    }
+      draw1d() {
-    store.renderer.workCtx = store.renderer.workCanvas.getContext("2d", {
+        const initialState = this.compute1dInitialState();
-      willReadFrequently: true,
+        const board = createBoard(
-    });
+          initialState,
-    store.setBoardWidth();
+          this.rules.rules,
-    store.setBoardHeight();
+          this.boardWidth
-  });
+        );
-
+        this.lastBoard = Object.freeze(board);
-  // draws the board on the canvas
+        this.drawCanvas(board);
-  const drawCanvas = async (board) => {
+        this.toggleStop();
-    store.renderer.render(board);
+      },
-  };
+      draw2d(board) {
-
+        if (!this.canDraw) return;
-  // draw elementary automaton on the canvas based on selected ruleset
+        const draw2dNext = async (b) => {
-  const draw1d = () => {
+          if (!this.canDraw) return;
-    const initialState = create1dInitialState(
+          const newBoard = evolve2d(b, conwayRules);
-      store.board,
+          this.drawCanvas(b, this.cellProperties);
-      store.initial1dState
+          await sleep(this.refreshRate);
-    );
+          draw2dNext(newBoard);
-    const board = createBoard(initialState, store.ruleset1d.rules, max());
+        };
-    store.board.grid = Object.freeze(board);
+        return draw2dNext(board);
-    drawCanvas(store.board);
+      },
-    store.toggleStop();
+      draw2dNew() {
-  };
+        const initialState = create2dState(
-
+          this.boardWidth,
-  // draw 2D automaton on the canvas in a loop
+          this.boardHeight,
-  const draw2d = (board) => {
+          getRandomInt,
-    drawCanvas(store.board);
+          [0, 2]
-    const newBoard = Object.freeze(evolve2d(board.grid, selectedRules()));
+        );
-    if (store.board.grid == newBoard) store.toggleStop();
+        const board = evolve2d(initialState, conwayRules);
-    store.board.grid = newBoard;
+        this.lastBoard = Object.freeze(board);
-  };
+        this.draw2d(board);
-
+      },
-  // draw 2d automaton in a loop, starting from passed state
+      async draw2dLast() {
-  const draw2dNext = async (board) => {
+        if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
-    setTimeout(() => {
+      },
-      if (!store.canDraw) return;
+      reset() {
-      draw2d(board);
+        this.toggleStop();
-      return draw2dNext(store.board);
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    }, store.renderer.refreshRate);
+        this.getReset = 0;
-  };
+      },
-
+    },
-  // draw 2d automaton from a new state
-  const draw2dNew = async () => {
-    if (!store.canDraw) return;
-    const initialGrid = create2dRandomGrid(
-      store.board.width,
-      store.board.height
-    );
-    store.board.grid = Object.freeze(evolve2d(initialGrid, selectedRules()));
-    if (store.loop) return draw2dNext(store.board);
-    else draw2d(store.board);
-    store.toggleStop();
-  };
-
-  // draw 2d automaton from the last known generated board
-  const draw2dLast = async () => {
-    if (!store.canDraw) return;
-    if (store.loop) return draw2dNext(store.board);
-    else draw2d(store.board);
-    store.toggleStop();
-  };
-
-  // draw 2d automaton from an uploaded picture.
-  // use the picture representation as an initial state
-  const draw2dPicture = async () => {
-    store.renderer.renderImage(
-      store.picture,
-      store.renderer.ctx,
-      store.renderer.width,
-      store.renderer.height
-    );
-    const resized = store.renderer.renderImage(
-      store.picture,
-      store.renderer.workCtx,
-      store.board.width,
-      store.board.height
-    );
-    const newBoard = picToBoard(resized.data, store.board);
-    store.board.grid = Object.freeze(newBoard);
-    store.toggleStop();
-  };
-
-  const reset = () => {
-    store.toggleStop();
-    store.board.grid = null;
-    store.renderer.reset();
-    store.toggleReset();
   };
 </script>
-<template>
+<style>
-  <canvas
+  #mainContent {
-    id="board-canvas"
+    min-width: 70%;
-    ref="board-canvas"
+  }
-    class="board-canvas"
+</style>
-    :width="store.renderer.width"
-    :height="store.renderer.height"
-  />
-</template>

src/components/MainMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="main-menu">
+  <div id="sidebar">
     <MenuGeneralOptions />
     <MenuCellProperties />
     <MenuElementaryCA />
@@ -7,9 +7,56 @@
   </div>
 </template>
 
-<script setup>
+<script>
   import MenuCellProperties from "./MenuCellProperties.vue";
   import MenuGeneralOptions from "./MenuGeneralOptions.vue";
   import MenuElementaryCA from "./MenuElementaryCA.vue";
   import Menu2dCA from "./Menu2dCA.vue";
+  export default {
+    name: "MainMenu",
+    components: {
+      MenuCellProperties,
+      MenuGeneralOptions,
+      MenuElementaryCA,
+      Menu2dCA,
+    },
+  };
 </script>
+
+<style>
+  #sidebar {
+    width: 25%;
+    padding: 0 10px;
+    overflow-y: scroll;
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  #sidebar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  #sidebar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  @media screen and (max-width: 800px) {
+    #container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    #mainContent {
+      flex: 1;
+      width: 100%;
+    }
+
+    #sidebar {
+      flex: 1;
+      padding: 0;
+      width: 100%;
+    }
+  }
+</style>

src/components/Menu2dCA.vue

@@ -1,85 +1,51 @@
-<script setup>
-  import MenuRow from "./MenuRow.vue";
-  import { globalStore } from "../stores/index.js";
-  import { preset2dRules } from "../modules/preset.js";
-  import { shallowRef } from "vue";
-
-  const store = globalStore();
-
-  const uploadedPicture = shallowRef(null);
-  const img = new Image();
-
-  // TODO : I have no idea why this works
-  const preparePicture = () => {
-    const file = uploadedPicture.value.files[0];
-    if (!file || file.type.indexOf("image/") !== 0) return;
-
-    if (FileReader && file) {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-
-      reader.onload = (event) => {
-        img.onload = () => {
-          store.picture.width = img.width;
-          store.picture.height = img.height;
-        };
-        store.picture.src = event.target.result;
-        store.toggle2dDrawFromPicture();
-      };
-
-      reader.onerror = () => {
-        console.log(reader.error);
-      };
-    }
-  };
-
-  const update2dRules = (event) => {
-    const elem = event.target;
-    const id = elem.value;
-    const newRuleset = preset2dRules.find((ruleset) => {
-      return ruleset.id === id;
-    });
-    store.selected2dRules = newRuleset;
-  };
-</script>
-
 <template>
-  <MenuRow row-title="2D Cellular Automaton">
+  <MenuRow row-title="2D Cellular Automata">
+    <div class="form-field">
+      <label>Start from last result</label>
+      <input type="button" value="start" @click="toggleDraw2dLast()" />
+    </div>
     <div class="form-field">
-      <label>Start from empty board</label>
       <input
         type="button"
         name="start2d"
-        value="▶"
+        value="start"
-        @click="store.toggleDraw2d()"
+        @click="toggleDraw2d()"
+      />
+      <input
+        type="button"
+        name="stop"
+        class="stop"
+        value="stop"
+        @click="toggleStop()"
+      />
+      <input
+        type="button"
+        name="reset"
+        class="reset"
+        value="reset"
+        @click="toggleReset()"
       />
-    </div>
-    <div class="form-field">
-      <label>Start from last result</label>
-      <input type="button" value="▶" @click="store.toggleDraw2dLast()" />
-    </div>
-    <div class="form-field">
-      <label>Start from picture</label><br />
-      <input ref="uploadedPicture" type="file" @change="preparePicture" />
-    </div>
-    <div class="form-field">
-      <label>
-        Rules
-        <br />
-        <select
-          name="preset2dRules"
-          :value="store.selected2dRules.id"
-          @input="update2dRules"
-        >
-          <option
-            v-for="(state, index) in preset2dRules"
-            :key="'initial-state-elementary' + index"
-            :value="state.id"
-          >
-            {{ state.name }}
-          </option>
-        </select>
-      </label>
     </div>
   </MenuRow>
 </template>
+
+<script>
+  import { mapActions } from "pinia";
+  import MenuRow from "./MenuRow.vue";
+  import { globalStore } from "../stores/index.js";
+
+  export default {
+    name: "Menu2dCA",
+    components: {
+      MenuRow,
+    },
+    methods: {
+      ...mapActions(globalStore, [
+        "toggleDraw2d",
+        "toggleDraw2dLast",
+        "toggleReset",
+        "toggleStop",
+      ]),
+    },
+  };
+</script>

src/components/MenuCellProperties.vue

@@ -1,21 +1,3 @@
-<script setup>
-  import { globalStore } from "../stores/index.js";
-  import MenuRow from "./MenuRow.vue";
-
-  const store = globalStore();
-
-  const updateCellProperties = (event) => {
-    const { name, value } = event.target;
-    store.setCellProperties(name, value);
-    store.setBoardWidth();
-    store.setBoardHeight();
-  };
-
-  const switchColor = () => {
-    store.switchColor();
-  };
-</script>
-
 <template>
   <MenuRow row-title="Cell Properties">
     <form>
@@ -24,7 +6,7 @@
         <input
           name="liveColor"
           type="color"
-          :value="store.board.cellProperties.liveColor"
+          @value="cellProperties.liveColor"
           @input="updateCellProperties"
         />
       </div>
@@ -33,23 +15,46 @@
         <input
           name="deadColor"
           type="color"
-          :value="store.board.cellProperties.deadColor"
+          :value="cellProperties.deadColor"
           @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
           name="size"
           type="number"
           min="1"
-          :value="store.board.cellProperties.size"
+          :value="cellProperties.size"
-          @click="updateCellProperties"
+          @input="updateCellProperties"
         />
       </div>
     </form>
   </MenuRow>
 </template>
+
+<script>
+  import { mapWritableState } from "pinia";
+  import { globalStore } from "../stores/index.js";
+  import MenuRow from "./MenuRow.vue";
+  export default {
+    name: "MainMenu",
+    components: {
+      MenuRow,
+    },
+    computed: {
+      ...mapWritableState(globalStore, ["cellProperties"]),
+    },
+    methods: {
+      getCellProperties(event) {
+        const elem = event.target;
+        const prop = this.cellProperties;
+        return prop[elem.name];
+      },
+      updateCellProperties(event) {
+        const elem = event.target;
+        this.cellProperties[elem.name] = elem.value;
+      },
+    },
+  };
+</script>

src/components/MenuElementaryCA.vue

@@ -1,54 +1,13 @@
-<script setup>
-  import { presetRuleset, initialStates } from "../modules/preset.js";
-  import { globalStore } from "../stores/index.js";
-  import MenuRow from "./MenuRow.vue";
-
-  const store = globalStore();
-
-  const copyRuleset = () => {
-    const newRuleset = JSON.stringify(store.ruleset1d);
-    navigator.clipboard.writeText(newRuleset);
-  };
-
-  const updateSingleRule = (event) => {
-    const elem = event.target;
-    const value = elem.checked ? 1 : 0;
-    store.ruleset1d.rules[elem.name] = value;
-  };
-
-  const updateRuleset = (event) => {
-    const elem = event.target;
-    const name = elem.value;
-    const newRuleset = presetRuleset.find((ruleset) => {
-      return ruleset.name === name;
-    });
-    store.ruleset1d = newRuleset;
-  };
-
-  const updateInitialState = (event) => {
-    const elem = event.target;
-    store.initial1dState = elem.value;
-  };
-</script>
-
 <template>
-  <MenuRow row-title="Elementary Automaton">
+  <MenuRow row-title="Elementary Cellular Automata">
     <form>
-      <div class="form-field">
-        <input
-          type="button"
-          name="start"
-          value="▶"
-          @click="store.toggleDraw1d()"
-        />
-      </div>
       <div class="form-field">
         <label>
           Initial state presets
           <br />
           <select
             name="initialStates"
-            :value="store.initial1dState"
+            :value="initialState"
             @input="updateInitialState"
           >
             <option
@@ -70,11 +29,11 @@
           <br />
           <select
             name="ruleset-elementary"
-            :value="store.ruleset1d.name"
+            :value="rules.name"
-            @input="updateRuleset"
+            @input="updateRules"
           >
             <option
-              v-for="(ruleset, index) in presetRuleset"
+              v-for="(ruleset, index) in presetRules"
               :key="'ruleset-preset-elementary-' + index"
               :value="ruleset.name"
             >
@@ -84,10 +43,10 @@
         </label>
       </div>
       <div class="form-field">
-        <a style="cursor: pointer" @click="copyRuleset">copy rules</a>
+        <a style="cursor: pointer" @click="copyRules">copy rules</a>
       </div>
       <div
-        v-for="(rule, name, index) in store.ruleset1d.rules"
+        v-for="(rule, name, index) in rules.rules"
         :key="'rule-' + index"
         class="form-field"
       >
@@ -103,5 +62,86 @@
         </label>
       </div>
     </form>
+    <div class="form-field">
+      <input type="button" name="start" value="start" @click="toggleDraw1d()" />
+      <input
+        type="button"
+        name="reset"
+        class="reset"
+        value="reset"
+        @click="toggleReset"
+      />
+    </div>
   </MenuRow>
 </template>
+
+<script>
+  import { mapActions, mapWritableState } from "pinia";
+  import { presetRules, initialStates } from "./preset.js";
+  import { globalStore } from "../stores/index.js";
+  import MenuRow from "./MenuRow.vue";
+  export default {
+    name: "MenuElementaryCA",
+    components: {
+      MenuRow,
+    },
+    data() {
+      return {
+        presetRules: presetRules,
+        initialStates: initialStates,
+      };
+    },
+    computed: {
+      ...mapWritableState(globalStore, {
+        initialState: "initial1dState",
+        rules: "rules1d",
+      }),
+      rules1dFileName() {
+        // TODO: broken
+        return (
+          Object.keys(this.rules)
+            .map((index) => {
+              return this.rules[index];
+            })
+            .join("_") + ".json"
+        );
+      },
+    },
+    methods: {
+      ...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]),
+      copyRules() {
+        const rules = JSON.stringify(this.rules);
+        navigator.clipboard.writeText(rules);
+      },
+      isCurrentPreset(event) {
+        const elem = event.target;
+        return this.initialState === elem.value;
+      },
+      updateSingleRule(event) {
+        const elem = event.target;
+        const value = elem.checked ? 1 : 0;
+        this.rules.rules[elem.name] = value;
+      },
+      updateRules(event) {
+        const elem = event.target;
+        const name = elem.value;
+        const newRuleset = this.presetRules.find((ruleset) => {
+          return ruleset.name === name;
+        });
+        this.rules.rules = newRuleset.rules;
+      },
+      updateInitialState(event) {
+        const elem = event.target;
+        this.initialState = elem.value;
+      },
+    },
+  };
+</script>
+<style>
+  .menu-row a {
+    color: white;
+    font-weight: bold;
+    text-decoration: none;
+    font-size: small;
+  }
+</style>

src/components/MenuGeneralOptions.vue

@@ -1,31 +1,3 @@
-<script setup>
-  import { globalStore } from "../stores/index.js";
-  import MenuRow from "./MenuRow.vue";
-
-  const store = globalStore();
-
-  const updateCanvasHeight = (event) => {
-    const elem = event.target;
-    store.renderer.resize(store.renderer.width, elem.value);
-  };
-
-  const updateCanvasWidth = (event) => {
-    const elem = event.target;
-    store.renderer.resize(elem.value, store.renderer.height);
-  };
-
-  const updateRefreshRate = (event) => {
-    const elem = event.target;
-    store.renderer.refreshRate = elem.value;
-  };
-
-  const updateDrawingDirection = (event) => {
-    const elem = event.target;
-    const value = elem.checked ? "x" : "y";
-    store.drawingDirection = value;
-  };
-</script>
-
 <template>
   <MenuRow row-title="General Options">
     <form>
@@ -39,7 +11,7 @@
           name="canvasWidth"
           type="number"
           step="10"
-          :value="store.renderer.width"
+          :value="canvasWidth"
           @input="updateCanvasWidth"
         />
       </div>
@@ -50,19 +22,21 @@
           name="canvasHeight"
           type="number"
           step="10"
-          :value="store.renderer.height"
+          :value="canvasHeight"
           @input="updateCanvasHeight"
         />
       </div>
       <div class="form-field">
         <label>Refresh Rate (ms)</label>
+      </div>
+      <div class="form-field">
         <input
           id="refreshRate"
           name="refreshRate"
           type="number"
           min="100"
           step="100"
-          :value="store.renderer.refreshRate"
+          :value="refreshRate"
           @input="updateRefreshRate"
         />
       </div>
@@ -71,8 +45,8 @@
           >Invert Drawing Direction
           <input
             type="checkbox"
-            :checked="store.drawingDirection === 'x'"
+            :checked="drawingDirection === 'x'"
-            :value="store.drawingDirection"
+            :value="drawingDirection"
             @input="updateDrawingDirection"
           />
         </label>
@@ -80,3 +54,42 @@
     </form>
   </MenuRow>
 </template>
+
+<script>
+  import { mapWritableState } from "pinia";
+  import { globalStore } from "../stores/index.js";
+  import MenuRow from "./MenuRow.vue";
+  export default {
+    name: "MenuGeneralOptions",
+    components: {
+      MenuRow,
+    },
+    computed: {
+      ...mapWritableState(globalStore, [
+        "canvasWidth",
+        "canvasHeight",
+        "refreshRate",
+        "drawingDirection",
+      ]),
+    },
+    methods: {
+      updateCanvasHeight: function (event) {
+        const elem = event.target;
+        this.canvasHeight = elem.value;
+      },
+      updateCanvasWidth: function (event) {
+        const elem = event.target;
+        this.canvasWidth = elem.value;
+      },
+      updateRefreshRate: function (event) {
+        const elem = event.target;
+        this.refreshRate = elem.value;
+      },
+      updateDrawingDirection: function (event) {
+        const elem = event.target;
+        const value = elem.checked ? "x" : "y";
+        this.drawingDirection = value;
+      },
+    },
+  };
+</script>

src/components/MenuReset.vue

@@ -1,56 +0,0 @@
-<script setup>
-  import { globalStore } from "../stores/index.js";
-  import { defineProps } from "vue";
-
-  const props = defineProps(
-    {
-      windowWidth: {
-        type: Number,
-        default: 800
-      }
-    }
-  );
-  const store = globalStore();
-</script>
-
-<template>
-  <div class="reset-menu">
-    <div v-if="props.windowWidth >= 800" class="desktop-title">
-      Cellular Automata Explorer
-    </div>
-    <div class="reset-input">
-      <div class="loop">
-        <label>
-          loop
-          <input
-            :value="store.loop"
-            type="checkbox"
-            :checked="store.loop"
-            @input="store.toggleLoop()"
-          />
-        </label>
-      </div>
-      <input
-        type="button"
-        name="next"
-        class="next"
-        value="⇨"
-        @click="store.toggleNext()"
-      />
-      <input
-        type="button"
-        name="stop"
-        class="stop"
-        value="⏹"
-        @click="store.toggleStop()"
-      />
-      <input
-        type="button"
-        name="reset"
-        class="reset"
-        value="⌫"
-        @click="store.toggleReset()"
-      />
-    </div>
-  </div>
-</template>

src/components/MenuRow.vue

@@ -1,51 +1,73 @@
-<script setup>
-  import { computed, defineProps, onBeforeUnmount, ref } from "vue";
-  import { globalStore } from "../stores/index.js";
-
-  const store = globalStore();
-
-  const props = defineProps({
-    rowTitle: {
-      type: String,
-      default: "",
-    },
-  });
-
-  const content = ref(null);
-
-  const isActive = computed(() => {
-    return props.rowTitle == store.activeSubMenu;
-  });
-
-  const storeActiveSubMenu = () => {
-    window.addEventListener("click", onWindowClick);
-    store.setActiveSubMenu(props.rowTitle);
-  };
-
-  // hides submenu when click is detected outside from it
-  const onWindowClick = (event) => {
-    const form = content.value;
-    if (form != null) {
-      if (!form.contains(event.target)) {
-        store.setActiveSubMenu("");
-        store.setMainMenu(false);
-      }
-      return;
-    }
-  };
-
-  onBeforeUnmount(() => {
-    window.removeEventListener("click", onWindowClick);
-  });
-</script>
-
 <template>
   <div class="menu-row">
-    <h2 :id="rowTitle" @click.stop="storeActiveSubMenu">
+    <h2 :id="rowTitle" @click="updateActiveMenu">
       {{ rowTitle }}
     </h2>
-    <div v-if="isActive" ref="content" class="menu-row-content">
+    <div v-if="activeMenu === rowTitle" class="menu-row-content">
       <slot />
     </div>
   </div>
 </template>
+
+<script>
+  export default {
+    name: "MenuRow",
+    props: {
+      rowTitle: {
+        type: String,
+        default: "",
+      },
+    },
+    data() {
+      return {
+        activeMenu: "",
+      };
+    },
+    methods: {
+      updateActiveMenu(event) {
+        const elem = event.target;
+        const value = elem.id;
+        if (value == this.activeMenu) this.activeMenu = "";
+        else this.activeMenu = value;
+      },
+    },
+  };
+</script>
+
+<style>
+  .menu-row h2 {
+    font-size: medium;
+    padding: 10px;
+    cursor: pointer;
+    border: 2px solid darkgrey;
+    margin: 0 0 10px 0;
+  }
+
+  select {
+    margin-top: 10px;
+    padding: 5px;
+  }
+
+  input[type="button"] {
+    min-width: 60px;
+    padding: 5px;
+    font-weight: bold;
+    margin-right: 10px;
+  }
+
+  .form-field {
+    display: flex;
+    margin: 10px;
+    justify-content: space-between;
+  }
+
+  .menu-row {
+    flex: 1;
+  }
+
+  label,
+  .form-field label {
+    margin-right: 10px;
+    font-weight: bold;
+  }
+</style>

src/components/preset.js

@@ -0,0 +1,95 @@
+const presetRules = [
+  {
+    name: "rule 73",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 1,
+      "010": 0,
+      "001": 0,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 86",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 0,
+      111: 1,
+      "011": 0,
+      "010": 1,
+      "001": 0,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 90",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 0,
+      "010": 0,
+      "001": 1,
+      "000": 0,
+    },
+  },
+  {
+    name: "rule 45?",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 1,
+      "010": 0,
+      "001": 1,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 54?",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 1,
+      111: 1,
+      "011": 0,
+      "010": 1,
+      "001": 1,
+      "000": 0,
+    },
+  },
+  {
+    name: "unknown rule",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 0,
+      111: 1,
+      "011": 0,
+      "010": 0,
+      "001": 1,
+      "000": 1,
+    },
+  },
+];
+
+const initialStates = [
+  {
+    id: "onecell",
+    name: "One cell at center",
+    description: "State with a single cell in the middle",
+  },
+  {
+    id: "random",
+    name: "Random cell",
+    description: "State populated with random cells",
+  },
+];
+
+export { presetRules, initialStates };

src/modules/automata.js

@@ -0,0 +1,152 @@
+// handles negative index and index bigger than its array length
+function guard(index, array) {
+  if (index > array.length - 1) return 0;
+  if (index < 0) return array.length - 1;
+  return index;
+}
+
+// get the next evolution of a 1D CA initial state
+function evolve1d(state, rules) {
+  function getCell(index) {
+    const safeIndex = guard(index, state);
+    return state[safeIndex];
+  }
+  const newState = state.map((_, x) => {
+    const cells = [getCell(x - 1), getCell(x), getCell(x + 1)];
+    return rules[cells.join("")];
+  });
+
+  return newState.map(Number);
+}
+
+// create a 2D board from a 1D CA initial state
+// function createBoard(state, rules, height) {
+//   function createBoardAcc(s, h, acc) {
+//     if (h === 0) return acc;
+//     const newState = evolve1d(s, rules);
+//     const newAcc = acc.concat([s]);
+//     return createBoardAcc(newState, h - 1, newAcc);
+//   }
+//   return createBoardAcc(state, height, []);
+// }
+
+// performance "choke point" in full imperative
+function createBoard(state, rules, height) {
+  var board = [];
+  let prevState = [];
+  for (let i = 0; i < height; i++) {
+    let nextState = [];
+    if (i == 0) {
+      nextState = evolve1d(state, rules);
+    } else {
+      nextState = evolve1d(prevState, rules);
+    }
+    board = board.concat([nextState]);
+    prevState = nextState;
+  }
+  return board;
+}
+
+// Find the neighbor of a given cell in a 2D CA board
+function getCellNeighbors(board, cellCoordinates) {
+  const [x, y] = cellCoordinates;
+  const rowLength = board[0].length; // caca?
+
+  // handles board edges where the cell is missing neighbors
+  function getCell(xx, yy) {
+    const safeX = guard(xx, board);
+    const safeY = guard(yy, rowLength);
+    return board[safeX][safeY];
+  }
+
+  // the current cell is not included in the result
+  return [
+    getCell(x - 1, y - 1),
+    getCell(x, y - 1),
+    getCell(x + 1, y - 1),
+    getCell(x - 1, y),
+    getCell(x + 1, y),
+    getCell(x - 1, y + 1),
+    getCell(x, y + 1),
+    getCell(x + 1, y - 1),
+  ];
+}
+
+// Sums the value of a cell's neighbors
+function getNeighborsSum(cells) {
+  return cells.reduce((cell, acc) => cell + acc, 0);
+}
+
+// Get the next evolution of a cell according to
+// Conway's game of life rules
+function conwayRules(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
+  if (cell === 0 && neighbors === 3) return 1;
+  // the cell remains the same if none apply
+  return cell;
+}
+
+// get the next evolution of a 2D CA initial state
+// Rules : Moore neighborhood
+function evolve2d(board, rulesFn) {
+  return board.map((row, x) =>
+    row.map((cell, y) => {
+      const neighbors = getCellNeighbors(board, [x, y]);
+      const sum = getNeighborsSum(neighbors);
+      return rulesFn(cell, sum);
+    })
+  );
+}
+
+function getDrawingValues(state, acc, cell) {
+  const d = cell.dimension;
+  return Object.keys(state).map((key) => {
+    const fillStyle = (() => {
+      if (state[key] === "1") return cell.liveColor;
+      return cell.deadColor;
+    })();
+
+    return {
+      move: [key * d, acc * d],
+      fill: [key * d, acc * d, d, d],
+      fillStyle,
+    };
+  });
+}
+
+// Populates the first state with a single living cell in the center
+function create1dStateOneCell(width) {
+  return [...Array(width)].map((cell, index) => {
+    if (index === width / 2 || index === width + 1 / 2) return 1;
+    return 0;
+  });
+}
+
+// Populates the first state of a 1D CA with cells returned
+// by initFn
+function create1dState(width, initFn, args) {
+  return [...Array(width)].map(() => initFn(...args));
+}
+
+// Populates the first state of a 2D CA with cells returned
+// by initFn
+function create2dState(width, height, initFn, args) {
+  return [...Array(height)].map(() =>
+    [...Array(width)].map(() => initFn(...args))
+  );
+}
+
+export {
+  getDrawingValues,
+  create1dState,
+  create2dState,
+  createBoard,
+  create1dStateOneCell,
+  conwayRules,
+  evolve1d,
+  evolve2d,
+};

src/modules/board.js

@@ -1,28 +0,0 @@
-import { create2dState, create1dStateOneCell, create1dState } from "./core.js";
-
-import { getRandomInt } from "./common.js";
-
-function Board(width, height, grid = []) {
-  this.width = width;
-  this.height = height;
-  (this.cellProperties = {
-    size: 3,
-    liveColor: "#000000",
-    deadColor: "#F5F5F5",
-  }),
-    (this.grid = grid);
-}
-
-// create a first state, either a single living cell
-// at the center or random ones
-const create1dInitialState = (board, type = "onecell") => {
-  if (type === "onecell") return create1dStateOneCell(board.width);
-  return create1dState(board.width, getRandomInt, [0, 2]);
-};
-
-// initialize 2d board with random cells
-const create2dRandomGrid = (width, height) => {
-  return create2dState(width, height, getRandomInt, [0, 2]);
-};
-
-export { Board, create1dInitialState, create2dRandomGrid };

src/modules/core.js

@@ -1,212 +0,0 @@
-// core functions to generate initial states and evolve them
-
-// get the next evolution of a 1D CA initial state
-// buggy BUT produces interesting results
-// function evolve1d(state, rules) {
-//   const sl = state.length - 1;
-//   return [
-//     rules[[state[sl - 1], state[sl], state[sl + 1]].join("")],
-//     ...state.map((_,x) => (rules[[state[x - 1], state[x], state[x + 1]].join("")])).slice(0, sl),
-//     rules[[state[0], state[1], state[2]].join("")]
-//   ]
-// }
-
-// get the next evolution of a 1D CA initial state
-function evolve1d(state, rules) {
-  const sl = state.length - 1;
-  const edge1 = [state[sl - 2], state[sl - 1], state[sl]].join("");
-  const edge2 = [state[0], state[1], state[2]].join("");
-  // normal case (3 neighbor cells)
-  const center = state
-    .map((_, x) => rules[[state[x - 1], state[x], state[x + 1]].join("")])
-    .slice(1, sl);
-  return [rules[edge1], ...center, rules[edge2]];
-}
-
-// create a 2D board from a 1D CA initial state
-// function createBoard(state, rules, height) {
-//   function createBoardAcc(s, h, acc) {
-//     if (h === 0) return acc;
-//     const newState = evolve1d(s, rules);
-//     const newAcc = acc.concat([s]);
-//     return createBoardAcc(newState, h - 1, newAcc);
-//   }
-//   return createBoardAcc(state, height, []);
-// }
-
-// performance "choke point" in full imperative
-function createBoard(state, rules, max) {
-  var board = [];
-  let prevState = [];
-  for (let i = 0; i < max; i++) {
-    let nextState = [];
-    // use the passed initial step during first iteration
-    if (i == 0) {
-      nextState = evolve1d(state, rules);
-    } else {
-      nextState = evolve1d(prevState, rules);
-    }
-    board = board.concat([nextState]);
-    prevState = nextState;
-  }
-  return board;
-}
-
-// Sums the value of a cell's neighbors
-function getNeighborsSum(cells) {
-  return cells.reduce((cell, acc) => cell + acc, 0);
-}
-
-// Get the next evolution of a cell according to
-// Conway's game of life rules
-function conwayRules(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
-  if (cell === 0 && neighbors === 3) return 1;
-  // the cell remains the same if none apply
-  return cell;
-}
-
-// Get the next evolution of a cell according to
-// Conway's game of life rules
-function servietteRules(cell, neighbors) {
-  // loneliness rule
-  if (cell === 0 && [2, 3, 4].find((x) => x == neighbors)) return 1;
-  // the cell remains the same if none apply
-  return 0;
-}
-
-// variation of the game of life where a
-// cell comes to live if 6 neigbor cells are alive
-function highLifeRules(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
-  if (cell === 0 && neighbors === 2) return 1;
-  // highlife rules
-  if ((cell === 0 && neighbors === 3) || neighbors === 6) return 1;
-  // the cell remains the same if none apply
-  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) {
-  // loneliness rule
-  if (cell === 1 && neighbors < 2) 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;
-}
-
-// get the next evolution of a 2D CA initial state
-// Rules : Moore neighborhood
-function evolve2d(board, rulesFn) {
-  const bh = board.length - 1;
-  const bw = board[0].length - 1;
-  return board.map((row, y) => {
-    // handle edges
-    const prow = y - 1 < 0 ? board[bh] : board[y - 1];
-    const nrow = y + 1 > bh ? board[0] : board[y + 1];
-    return row.map((cell, x) => {
-      // handle edges too
-      const pcell = x - 1 < 0 ? bw : x - 1;
-      const ncell = x + 1 > bw ? 0 : x + 1;
-      // the current cell is not included in the result
-      const neighbors = [
-        prow[pcell],
-        prow[x],
-        prow[ncell],
-        row[pcell],
-        row[ncell],
-        nrow[pcell],
-        nrow[x],
-        nrow[ncell],
-      ];
-      const sum = getNeighborsSum(neighbors);
-      return rulesFn(cell, sum);
-    });
-  });
-}
-
-function getDrawingValues(state, acc, cell) {
-  const d = cell.dimension;
-  return Object.keys(state).map((key) => {
-    const fillStyle = (() => {
-      if (state[key] === "1") return cell.liveColor;
-      return cell.deadColor;
-    })();
-
-    return {
-      move: [key * d, acc * d],
-      fill: [key * d, acc * d, d, d],
-      fillStyle,
-    };
-  });
-}
-
-// Populates the first state with a single living cell in the center
-function create1dStateOneCell(width) {
-  return [...Array(width)].map((cell, index) => {
-    if (index === Math.floor(width / 2)) return 1;
-    return 0;
-  });
-}
-
-// Populates the first state of a 1D CA with cells returned
-// by initFn
-function create1dState(width, initFn, args) {
-  return [...Array(width)].map(() => initFn(...args));
-}
-
-// Populates the first state of a 2D CA with cells returned
-// by initFn
-function create2dState(width, height, initFn, args) {
-  return [...Array(height)].map(() =>
-    [...Array(width)].map(() => initFn(...args))
-  );
-}
-
-export {
-  getDrawingValues,
-  create1dState,
-  create2dState,
-  createBoard,
-  create1dStateOneCell,
-  conwayRules,
-  overpopulationRules,
-  lonelinessRules,
-  threebornRules,
-  highLifeRules,
-  servietteRules,
-  evolve1d,
-  evolve2d,
-};

src/modules/picture.js

@@ -1,80 +0,0 @@
-// https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
-// [
-function hexToRGB(hex) {
-  return [
-    parseInt(hex.slice(1, 3), 16),
-    parseInt(hex.slice(3, 5), 16),
-    parseInt(hex.slice(5, 7), 16),
-  ];
-}
-
-// https://stackoverflow.com/questions/4492385/convert-simple-array-into-two-dimensional-array-matrix
-// convert a 1D array into a 2D matrix
-export function toMatrix(array, width) {
-  return array.reduce(
-    (rows, key, index) =>
-      (index % width == 0
-        ? rows.push([key])
-        : rows[rows.length - 1].push(key)) && rows,
-    []
-  );
-}
-
-// convert an image into a black and white image
-export function picToBlackAndWhite(pixels, width, height) {
-  return pixels.reduce((acc, pixel, index) => {
-    if (index % 4 == 0) {
-      const count = pixels[index] + pixels[index + 1] + pixels[index + 2];
-      const colour = count >= 255 ? 255 : 1;
-      acc.data[index] = colour;
-      acc.data[index + 1] = colour;
-      acc.data[index + 2] = colour;
-      acc.data[index + 3] = 255;
-    }
-    return acc;
-  }, new ImageData(width, height));
-}
-
-// convert an ImageData into a 2D array of boolean (0, 1) values
-export function picToBoard(pixels, board) {
-  const flat = pixels.reduce((acc, pixel, index) => {
-    const i = index * 4;
-    const count = pixels[i] + pixels[i + 1] + pixels[i + 2];
-    const value = (count >= 255) & 1;
-    acc[index] = value;
-    return acc;
-  }, []);
-  // TODO: The representation has to be 2D, not the data structure
-  // (change to flat)
-  return toMatrix(flat, board.width, board.height);
-}
-
-// convert board to ImageData
-// TODO : different cell to color functions
-// (binary, intermediate states, camaieux, etc)
-export function boardToPic(board) {
-  const live = board.cellProperties.liveColor;
-  const dead = board.cellProperties.deadColor;
-  const img = new ImageData(board.width, board.height);
-  const colors = [hexToRGB(live), hexToRGB(dead)];
-  board.grid.flat().reduce((acc, cell, index) => {
-    const color = colors[(cell === 1) & 1];
-    const i = index * 4;
-    acc[i] = color[0];
-    acc[i + 1] = color[1];
-    acc[i + 2] = color[2];
-    acc[i + 3] = 255;
-    return acc;
-  }, img.data);
-  return img;
-}
-
-// https://stackoverflow.com/questions/3332237/image-resizing-algorithm
-export function scaleToTargetSize(w1, h1, w2, h2) {
-  const sourceRatio = w1 / h1;
-  const targetRatio = w2 / h2;
-  if (sourceRatio > targetRatio) {
-    return [w2, w2 / sourceRatio];
-  }
-  return [h2 * sourceRatio, h2];
-}

src/modules/preset.js

@@ -1,184 +0,0 @@
-const presetRuleset = [
-  {
-    name: "rule 73",
-    rules: {
-      100: 0,
-      101: 0,
-      110: 1,
-      111: 0,
-      "011": 1,
-      "010": 0,
-      "001": 0,
-      "000": 1,
-    },
-  },
-  {
-    name: "rule 86",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 0,
-      111: 1,
-      "011": 0,
-      "010": 1,
-      "001": 0,
-      "000": 1,
-    },
-  },
-  {
-    name: "rule 90",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 1,
-      111: 0,
-      "011": 0,
-      "010": 0,
-      "001": 1,
-      "000": 0,
-    },
-  },
-  {
-    name: "rule 45?",
-    rules: {
-      100: 0,
-      101: 0,
-      110: 1,
-      111: 0,
-      "011": 1,
-      "010": 0,
-      "001": 1,
-      "000": 1,
-    },
-  },
-  {
-    name: "rule 54?",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 1,
-      111: 1,
-      "011": 0,
-      "010": 1,
-      "001": 1,
-      "000": 0,
-    },
-  },
-  {
-    name: "rule 30",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 0,
-      111: 0,
-      "011": 1,
-      "010": 1,
-      "001": 1,
-      "000": 0,
-    },
-  },
-  {
-    name: "unknown rule",
-    rules: {
-      100: 0,
-      101: 0,
-      110: 0,
-      111: 1,
-      "011": 0,
-      "010": 0,
-      "001": 1,
-      "000": 1,
-    },
-  },
-  {
-    name: "unknown rule 2",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 1,
-      111: 0,
-      "011": 0,
-      "010": 0,
-      "001": 0,
-      "000": 1,
-    },
-  },
-  {
-    name: "rule 184",
-    rules: {
-      100: 1,
-      101: 1,
-      110: 0,
-      111: 1,
-      "011": 1,
-      "010": 0,
-      "001": 0,
-      "000": 0,
-    },
-  },
-  {
-    name: "rule 110",
-    rules: {
-      100: 0,
-      101: 1,
-      110: 1,
-      111: 0,
-      "011": 1,
-      "010": 1,
-      "001": 1,
-      "000": 0,
-    },
-  },
-];
-
-const initialStates = [
-  {
-    id: "onecell",
-    name: "One cell at center",
-    description: "State with a single cell in the middle",
-  },
-  {
-    id: "random",
-    name: "Random cell",
-    description: "State populated with random cells",
-  },
-];
-
-const preset2dRules = [
-  {
-    id: "conway",
-    name: "Conway's Game of Life",
-    description: "The most popular 2d automata",
-  },
-  {
-    id: "overpopulation",
-    name: "Overpopulation variation",
-    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",
-  },
-  {
-    id: "highlife",
-    name: "HighLife variation",
-    description:
-      "Variation on Conway's Game of Life where a cell live if the six neighbor cells are alive",
-  },
-  {
-    id: "serviette",
-    name: "Serviette variation",
-    description: "bla",
-  },
-];
-
-export { presetRuleset, initialStates, preset2dRules };

src/modules/renderer.js

@@ -1,67 +0,0 @@
-import { boardToPic, scaleToTargetSize } from "./picture.js";
-
-function scaleAndApply(context, ratio, callback) {
-  context.save();
-  // rescale
-  context.imageSmoothingEnabled = false;
-  context.scale(ratio, ratio);
-  // apply
-  callback();
-  context.restore();
-}
-
-// draws the board representation on the canvas
-function render(board) {
-  const d = board.cellProperties.size;
-  // bool to RGBA colors
-  const img = boardToPic(board);
-  this.ctx.clearRect(0, 0, this.width, this.height);
-  scaleAndApply(this.ctx, d, () => {
-    this.workCtx.putImageData(img, 0, 0);
-    this.ctx.drawImage(this.workCanvas, 0, 0, this.width, this.height);
-  });
-}
-
-// draw image on canvas
-function renderImage(image, ctx, tw, th) {
-  ctx.fillStyle = "black";
-  ctx.fillRect(0, 0, tw, th);
-  const dimensions = scaleToTargetSize(image.width, image.height, tw, th);
-  ctx.drawImage(
-    image,
-    Math.floor((tw - dimensions[0]) / 2),
-    Math.floor((th - dimensions[1]) / 2),
-    dimensions[0],
-    dimensions[1]
-  );
-  return ctx.getImageData(0, 0, tw, th);
-}
-
-function resize(width, height) {
-  this.width = width;
-  this.height = height;
-  this.canvas.height = height;
-  this.canvas.width = width;
-  this.workCanvas.height = height;
-  this.workCanvas.width = width;
-}
-
-function reset() {
-  this.ctx.clearRect(0, 0, this.width, this.height);
-}
-
-function Renderer() {
-  this.canvas = null;
-  this.workCanvas = null;
-  this.workCtx = null;
-  this.width = null;
-  this.height = null;
-  this.ctx = null;
-  this.refreshRate = 300;
-  this.render = render;
-  this.renderImage = renderImage;
-  this.reset = reset;
-  this.resize = resize;
-}
-
-export { Renderer };

src/stores/index.js

@@ -1,11 +1,9 @@
 import { defineStore } from "pinia";
-import { Board } from "../modules/board.js";
-import { Renderer } from "../modules/renderer.js";
 
 export const globalStore = defineStore("globalStore", {
   state: () => {
     return {
-      ruleset1d: {
+      rules1d: {
         name: "rule 73",
         rules: {
           111: 0,
@@ -18,109 +16,47 @@ export const globalStore = defineStore("globalStore", {
           "000": 1,
         },
       },
-      selected2dRules: {
+      cellProperties: {
-        id: "conway",
+        size: 3,
-        name: "Conway's Game of Life",
+        liveColor: "#000000",
-        description: "The most popular 2d automata",
+        deadColor: "#F5F5F5",
       },
+      canvasWidth: 0,
+      canvasHeight: 0,
+      boardWidth: 0,
+      boardHeight: 0,
+      refreshRate: 300,
       initial1dState: "onecell",
       drawingDirection: "y",
-      board: new Board(),
+      lastBoard: {},
       draw1d: false,
       draw2d: false,
       draw2dLast: false,
-      draw2dpicture: false,
       reset: false,
       canDraw: true,
-      picture: new Image(),
-      mainMenu: false,
-      activeSubMenu: "",
-      loop: true,
-      lastAction: "drawfromlast",
-      renderer: new Renderer(),
     };
   },
   actions: {
-    setBoardWidth() {
-      this.board.width = Math.floor(
-        this.renderer.width / this.board.cellProperties.size
-      );
-    },
-    setBoardHeight() {
-      this.board.height = Math.floor(
-        this.renderer.height / this.board.cellProperties.size
-      );
-    },
-    setCellProperties(name, value) {
-      this.board.cellProperties[name] = value;
-    },
-    switchColor() {
-      [
-        this.board.cellProperties["liveColor"],
-        this.board.cellProperties["deadColor"],
-      ] = [
-        this.board.cellProperties["deadColor"],
-        this.board.cellProperties["liveColor"],
-      ];
-    },
     toggleDraw1d() {
-      this.setActiveSubMenu("");
+      this.draw1d = true;
-      this.setMainMenu(false);
-      this.draw1d = !this.draw1d;
     },
     toggleDraw2d() {
-      this.setActiveSubMenu("");
+      this.canDraw = true;
-      this.lastAction = "draw2d";
+      this.draw2d = true;
-      this.setMainMenu(false);
-      this.toggleStop();
-      this.canDraw = !this.canDraw;
-      this.draw2d = !this.draw2d;
     },
     toggleDraw2dLast() {
-      this.setActiveSubMenu("");
+      this.canDraw = true;
-      this.lastAction = "drawfromlast";
+      this.draw2dLast = true;
-      this.setMainMenu(false);
-      this.toggleStop();
-      this.canDraw = !this.canDraw;
-      this.draw2dLast = !this.draw2dLast;
-    },
-    toggle2dDrawFromPicture() {
-      this.toggleStop();
-      this.canDraw = !this.canDraw;
-      this.draw2dpicture = !this.draw2dpicture;
     },
     toggleReset() {
       this.toggleStop();
-      this.reset = !this.reset;
+      this.reset = true;
     },
     toggleStop() {
       this.draw1d = false;
       this.draw2d = false;
       this.draw2dLast = false;
-      this.draw2dpicture = false;
       this.canDraw = false;
     },
-    toggleLoop() {
-      this.loop = !this.loop;
-    },
-    toggleNext() {
-      switch (this.lastAction) {
-        case "drawfromlast":
-          this.toggleDraw2dLast();
-          break;
-        case "draw2d":
-          this.toggleDraw2d();
-          break;
-        default:
-          return;
-      }
-    },
-    setActiveSubMenu(data) {
-      if (this.activeSubMenu == data) this.activeSubMenu = "";
-      else this.activeSubMenu = data;
-    },
-    setMainMenu(data) {
-      this.mainMenu = data;
-    },
   },
 });

tests/board.test.js

@@ -1,28 +0,0 @@
-import { describe, expect, test } from "vitest";
-import {
-  Board,
-  create1dInitialState,
-  create2dRandomGrid,
-} from "src/modules/board.js";
-
-describe("Board", () => {
-  const board = new Board(503, 301);
-  test("create1dInitialState onecell", () => {
-    const stateOne = create1dInitialState(board);
-    expect(stateOne.length).toBe(board.width);
-    expect(stateOne).toContain(1);
-  });
-
-  test("create1dInitialState random", () => {
-    const stateRandom = create1dInitialState(board, "random");
-    expect(stateRandom.length).toBe(board.width);
-    expect(stateRandom).toContain(1);
-  });
-
-  test("create2dRandomGrid", () => {
-    const board = new Board(503, 301);
-    const got = create2dRandomGrid(board.width, board.height);
-    expect(got.length).toBe(board.height);
-    expect(got[0].length).toBe(board.width);
-  });
-});

tests/core.test.js

@@ -1,18 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { evolve1d, create1dStateOneCell } from "src/modules/core.js";
-import { presetRuleset } from "src/modules/preset.js";
-
-describe("Core", () => {
-  test("evolve1d, rules73, 9 cells", () => {
-    const state = [0, 0, 0, 0, 1, 0, 0, 0, 0];
-    const got = evolve1d(state, presetRuleset[0].rules);
-    const valid = [1, 1, 1, 0, 0, 0, 1, 1, 1];
-    expect(got.length).toBe(state.length);
-    expect(got).toEqual(valid);
-  }),
-    test("create1dStateOneCell, 49 cells", () => {
-      const got = create1dStateOneCell(49);
-      expect(got.length).toBe(49);
-      expect(got[24]).toBe(1);
-    });
-});

vite.config.js

@@ -13,11 +13,4 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
-  test: {
-    // enable jest-like global test APIs
-    globals: true,
-    // simulate DOM with happy-dom
-    // (requires installing happy-dom as a peer dependency)
-    environment: "happy-dom",
-  },
 });