switching to composition API

src/App.vue

@@ -1,72 +1,55 @@
+<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;
+      store.canvasWidth = window.innerWidth;
+      store.canvasHeight = window.innerHeight;
+      store.setBoardWidth();
+      store.setBoardHeight();
+    });
+  };
+
+  onMounted(() => {
+    nextTick(() => {
+      window.addEventListener("resize", onResize);
+    });
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", onResize);
+  });
+</script>
+
 <template>
   <div id="main">
     <h1 id="main-title">
-      <span id="burger-toggle" @click="toggleMainMenu">{{
+      <span id="burger-toggle" @click="toggleMainMenu">
-        mainMenu == true ? "▼" : "☰"
+        {{ store.mainMenu == true ? "▼" : "☰" }}
-      }}</span>
+      </span>
       Cellular Automata Explorer
     </h1>
     <div id="container">
-      <MainMenu v-if="mainMenu || windowWidth >= 800" />
+      <MainMenu v-if="store.mainMenu || windowWidth >= 800" />
       <CanvasBoard />
     </div>
     <MenuReset row-title="" />
   </div>
 </template>
 
-<script>
-  import MainMenu from "./components/MainMenu.vue";
-  import CanvasBoard from "./components/CanvasBoard.vue";
-  import MenuReset from "./components/MenuReset.vue";
-  import { mapState, mapWritableState, mapActions } from "pinia";
-  import { globalStore } from "./stores/index.js";
-
-  export default {
-    name: "App",
-    components: {
-      MainMenu,
-      MenuReset,
-      CanvasBoard,
-    },
-    data() {
-      return {
-        windowWidth: window.innerWidth,
-      };
-    },
-    computed: {
-      ...mapState(globalStore, ["mainMenu", "activeSubMenu"]),
-      ...mapWritableState(globalStore, ["canvasWidth", "canvasHeight"]),
-    },
-    mounted() {
-      this.$nextTick(() => {
-        window.addEventListener("resize", this.onResize);
-      });
-    },
-    beforeUnmount() {
-      window.removeEventListener("resize", this.onResize);
-    },
-    methods: {
-      ...mapActions(globalStore, [
-        "setBoardWidth",
-        "setBoardHeight",
-        "setMainMenu",
-      ]),
-      toggleMainMenu() {
-        this.setMainMenu(!this.mainMenu);
-      },
-      onResize() {
-        this.$nextTick(() => {
-          this.windowWidth = window.innerWidth;
-          this.canvasWidth = window.innerWidth;
-          this.canvasHeight = window.innerHeight;
-          this.setBoardWidth();
-          this.setBoardHeight();
-        });
-      },
-    },
-  };
-</script>
-
 <style scope>
   :root {
     --dark1: #000000;

src/components/CanvasBoard.vue

@@ -1,19 +1,5 @@
-<template>
+<script setup>
-  <canvas
+  import { onMounted, watch } from "vue";
-    id="board-canvas"
-    ref="board-canvas"
-    :width="canvasWidth"
-    :height="canvasHeight"
-  />
-  <canvas
-    id="work-canvas"
-    ref="work-canvas"
-    :width="canvasWidth"
-    :height="canvasHeight"
-  />
-</template>
-<script>
-  import { mapActions, mapState, mapWritableState } from "pinia";
   import { globalStore } from "../stores/index.js";
   import {
     create1dState,
@@ -31,224 +17,214 @@
   import { getRandomInt } from "../modules/common.js";
   import { boardToPic, picToBoard } from "../modules/picture.js";
 
-  export default {
+  const store = globalStore();
-    name: "CanvasBoard",
+
-    data() {
+  // TODO: Do we really need to declare a work canvas in this scope?
-      return {
+  // Do we really need to declare a canvas here at all?
-        board: null,
+  let canvas = null;
-        canvas: null,
+  let workCanvas = null;
-        workCanvas: null,
+  let workCtx = null;
-        workCtx: null,
+  let ctx = null;
-        ctx: null,
+  const available2dRules = {
-        available2dRules: {
     conway: conwayRules,
     overpopulation: overpopulationRules,
     loneliness: lonelinessRules,
     threeborn: threebornRules,
     highlife: highLifeRules,
     serviette: servietteRules,
-        },
   };
-    },
+
-    computed: {
-      ...mapState(globalStore, {
-        loop: "loop",
-        cellProperties: "cellProperties",
-        ruleset: "ruleset1d",
-        refreshRate: "refreshRate",
-        initial1dState: "initial1dState",
-        drawingDirection: "drawingDirection",
-        canDraw: "canDraw",
-        getDraw1d: "draw1d",
-        getDraw2d: "draw2d",
-        getDraw2dLast: "draw2dLast",
-        getDraw2dPicture: "draw2dpicture",
-        boardWidth: "boardWidth",
-        boardHeight: "boardHeight",
-        selected2dRules: "selected2dRules",
-        picture: "picture",
-      }),
-      ...mapWritableState(globalStore, {
-        lastBoard: "lastBoard",
-        canvasWidth: "canvasWidth",
-        canvasHeight: "canvasHeight",
-        getReset: "reset",
-      }),
   // used to determine the dimensions of the board
-      max() {
+  const max = () => {
-        return Math.max(this.boardWidth, this.boardHeight);
+    return Math.max(store.boardWidth, store.boardHeight);
-      },
+  };
-      selectedRules() {
+
-        return this.available2dRules[this.selected2dRules.id];
+  const selectedRules = () => {
-      },
+    return available2dRules[store.selected2dRules.id];
-    },
+  };
-    watch: {
+
-      getDraw1d(value) {
+  watch(
-        if (value == true) this.draw1d();
+    () => store.draw1d,
-      },
+    (value) => {
-      getDraw2d(value) {
+      if (value == true) draw1d();
-        if (value == true) this.draw2dNew();
+    }
-      },
+  );
-      async getDraw2dLast(value) {
+
-        if (value == true) await this.draw2dLast();
+  watch(
-      },
+    () => store.draw2d,
-      getDraw2dPicture(value) {
+    (value) => {
-        if (value == true) this.draw2dPicture();
+      if (value == true) draw2dNew();
-      },
+    }
-      getReset(value) {
+  );
-        if (value == true) this.reset();
+
-      },
+  watch(
-    },
+    () => store.draw2dLast,
-    mounted() {
+    async (value) => {
-      this.canvas = Object.freeze(document.getElementById("board-canvas"));
+      if (value == true) await draw2dLast();
-      this.workCanvas = Object.freeze(document.getElementById("work-canvas"));
+    }
-      this.ctx = this.canvas.getContext("2d", { willReadFrequently: true });
+  );
-      this.workCtx = this.workCanvas.getContext("2d", {
+
+  watch(
+    () => store.draw2dpicture,
+    (value) => {
+      if (value == true) draw2dPicture();
+    }
+  );
+
+  watch(
+    () => store.reset,
+    (value) => {
+      if (value == true) reset();
+    }
+  );
+
+  onMounted(() => {
+    canvas = Object.freeze(document.getElementById("board-canvas"));
+    workCanvas = Object.freeze(document.getElementById("work-canvas"));
+    ctx = canvas.getContext("2d", { willReadFrequently: true });
+    workCtx = workCanvas.getContext("2d", {
       willReadFrequently: true,
     });
-      this.canvasWidth = this.canvas.parentElement.clientWidth;
+    store.canvasWidth = canvas.parentElement.clientWidth;
-      this.canvasHeight = this.canvas.parentElement.clientHeight;
+    store.canvasHeight = canvas.parentElement.clientHeight;
-      this.setBoardWidth();
+    store.setBoardWidth();
-      this.setBoardHeight();
+    store.setBoardHeight();
-    },
+  });
-    methods: {
+
-      ...mapActions(globalStore, [
-        "toggleStop",
-        "setBoardWidth",
-        "setBoardHeight",
-      ]),
   // draws the board on the canvas
-      async drawCanvas(board, width, height) {
+  const drawCanvas = async (board, width, height) => {
-        const d = this.cellProperties.size;
+    const d = store.cellProperties.size;
     // bool to RGBA colors
-        const img = await boardToPic(board, width, height, this.cellProperties);
+    const img = await boardToPic(board, width, height, store.cellProperties);
     // rescale and draw
-        this.ctx.save();
+    ctx.save();
-        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    ctx.clearRect(0, 0, store.canvasWidth, store.canvasHeight);
-        this.workCtx.putImageData(img, 0, 0);
+    workCtx.putImageData(img, 0, 0);
-        this.ctx.imageSmoothingEnabled = false;
+    ctx.imageSmoothingEnabled = false;
-        this.ctx.scale(d, d);
+    ctx.scale(d, d);
-        this.ctx.drawImage(
+    ctx.drawImage(workCanvas, 0, 0, store.canvasWidth, store.canvasHeight);
-          this.workCanvas,
+    ctx.restore();
-          0,
+  };
-          0,
+
-          this.canvasWidth,
-          this.canvasHeight
-        );
-        this.ctx.restore();
-      },
   // create a first state, either a single living cell
   // at the center or random ones
-      compute1dInitialState() {
+  const compute1dInitialState = () => {
-        if (this.initial1dState === "onecell")
+    if (store.initial1dState === "onecell")
-          return create1dStateOneCell(this.boardWidth);
+      return create1dStateOneCell(store.boardWidth);
-        return create1dState(this.boardWidth, getRandomInt, [0, 2]);
+    return create1dState(store.boardWidth, getRandomInt, [0, 2]);
-      },
+  };
+
   // initialize board with random cells
-      randomInitialState() {
+  const randomInitialState = () => {
     return create2dState(
-          this.boardWidth,
+      store.boardWidth,
-          this.boardHeight,
+      store.boardHeight,
       getRandomInt,
       [0, 2]
     );
-      },
+  };
+
   // draw elementary automaton on the canvas based on selected ruleset
-      draw1d() {
+  const draw1d = () => {
-        const initialState = this.compute1dInitialState();
+    const initialState = compute1dInitialState();
-        const board = createBoard(initialState, this.ruleset.rules, this.max);
+    const board = createBoard(initialState, store.ruleset1d.rules, max());
-        this.lastBoard = Object.freeze(board);
+    store.lastBoard = Object.freeze(board);
-        this.drawCanvas(this.lastBoard, this.boardWidth, this.boardHeight);
+    // TODO: the board clearly could be an object
-        this.toggleStop();
+    drawCanvas(store.lastBoard, store.boardWidth, store.boardHeight);
-      },
+    store.toggleStop();
+  };
+
   // draw 2D automaton on the canvas in a loop
-      draw2d(board) {
+  const draw2d = (board) => {
-        const newBoard = evolve2d(board, this.selectedRules);
+    const newBoard = evolve2d(board, selectedRules());
-        this.drawCanvas(newBoard, this.boardWidth, this.boardHeight);
+    drawCanvas(newBoard, store.boardWidth, store.boardHeight);
-        this.lastBoard = Object.freeze(newBoard);
+    store.lastBoard = Object.freeze(newBoard);
-      },
+  };
+
   // draw 2d automaton in a loop, starting from passed state
-      async draw2dNext(board, time) {
+  const draw2dNext = async (board) => {
     setTimeout(() => {
       requestAnimationFrame(() => {
-            if (!this.canDraw) return;
+        if (!store.canDraw) return;
-            this.draw2d(board);
+        draw2d(board);
-            return this.draw2dNext(this.lastBoard);
+        return draw2dNext(store.lastBoard);
       });
-        }, this.refreshRate);
+    }, store.refreshRate);
-      },
+  };
+
   // draw 2d automaton from a new state
-      async draw2dNew() {
+  const draw2dNew = async () => {
-        if (!this.canDraw) return;
+    if (!store.canDraw) return;
-        const initialState = this.randomInitialState();
+    const initialState = randomInitialState();
-        let board = evolve2d(initialState, this.selectedRules);
+    const board = evolve2d(initialState, selectedRules());
-        if (this.loop) return this.draw2dNext(board);
+    if (store.loop) return draw2dNext(board);
-        else this.draw2d(board);
+    else draw2d(board);
-        this.toggleStop();
+    store.toggleStop();
-      },
+  };
+
   // draw 2d automaton from the last known generated board
-      async draw2dLast() {
+  const draw2dLast = async () => {
-        if (!this.canDraw) return;
+    if (!store.canDraw) return;
-        if (this.loop) return this.draw2dNext(this.lastBoard);
+    if (store.loop) return store.draw2dNext(store.lastBoard);
-        else this.draw2d(this.lastBoard);
+    else draw2d(store.lastBoard);
-        this.toggleStop();
+    store.toggleStop();
-      },
+  };
+
   // draw 2d automaton from an uploaded picture.
   // use the picture representation as an initial state
-      draw2dPicture() {
+  const draw2dPicture = () => {
     // draw image on canvas
-        this.ctx.fillStyle = "black";
+    ctx.fillStyle = "black";
-        this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
+    ctx.fillRect(0, 0, store.canvasWidth, store.canvasHeight);
-        this.ctx.drawImage(
+    ctx.drawImage(
-          this.picture,
+      store.picture,
-          Math.floor((this.canvasWidth - this.picture.width) / 2),
+      Math.floor((store.canvasWidth - store.picture.width) / 2),
-          Math.floor((this.canvasHeight - this.picture.height) / 2),
+      Math.floor((store.canvasHeight - store.picture.height) / 2),
-          this.picture.width,
+      store.picture.width,
-          this.picture.height
+      store.picture.height
-        );
-
-        // get image data from canvas
-        const imgData = this.ctx.getImageData(
-          0,
-          0,
-          this.canvasWidth,
-          this.canvasHeight
     );
 
     // draw the image back on the work canvas with the dimensions of the board
-        this.workCtx.drawImage(
+    workCtx.drawImage(store.picture, 0, 0, store.boardWidth, store.boardHeight);
-          this.picture,
-          0,
-          0,
-          this.boardWidth,
-          this.boardHeight
-        );
 
     // get the resized image data from work canvas
-        const resized = this.workCtx.getImageData(
+    const resized = workCtx.getImageData(
       0,
       0,
-          this.boardWidth,
+      store.boardWidth,
-          this.boardHeight
+      store.boardHeight
     );
 
     // convert the image into a 2D board of boolean based on pixel value
-        this.lastBoard = Object.freeze(
+    store.lastBoard = Object.freeze(
-          picToBoard(resized.data, this.boardWidth, this.boardHeight)
+      picToBoard(resized.data, store.boardWidth, store.boardHeight)
     );
 
-        this.toggleStop();
+    store.toggleStop();
-      },
+  };
+
   // stop drawing routines and clear the canvas
-      reset() {
+  const reset = () => {
-        this.toggleStop();
+    store.toggleStop();
-        this.lastBoard = {};
+    store.lastBoard = null;
-        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    ctx.clearRect(0, 0, store.canvasWidth, store.canvasHeight);
-        this.getReset = 0;
+    store.reset = false;
-      },
-    },
   };
 </script>
+<template>
+  <canvas
+    id="board-canvas"
+    ref="board-canvas"
+    :width="store.canvasWidth"
+    :height="store.canvasHeight"
+  />
+  <canvas
+    id="work-canvas"
+    ref="work-canvas"
+    :width="store.canvasWidth"
+    :height="store.canvasHeight"
+  />
+</template>
 <style>
   #canvas-board {
     flex: 1;

src/components/MainMenu.vue

@@ -7,20 +7,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
   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>

src/components/Menu2dCA.vue

@@ -1,3 +1,48 @@
+<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">
     <div class="form-field">
@@ -6,16 +51,16 @@
         type="button"
         name="start2d"
         value="start"
-        @click="toggleDraw2d()"
+        @click="store.toggleDraw2d()"
       />
     </div>
     <div class="form-field">
       <label>Start from last result</label>
-      <input type="button" value="start" @click="toggleDraw2dLast()" />
+      <input type="button" value="start" @click="store.toggleDraw2dLast()" />
     </div>
     <div class="form-field">
       <label>Start from picture</label><br />
-      <input type="file" @change="preparePicture" />
+      <input ref="uploadedPicture" type="file" @change="preparePicture" />
     </div>
     <div class="form-field">
       <label>
@@ -23,7 +68,7 @@
         <br />
         <select
           name="preset2dRules"
-          :value="selected2dRules.id"
+          :value="store.selected2dRules.id"
           @input="update2dRules"
         >
           <option
@@ -38,58 +83,3 @@
     </div>
   </MenuRow>
 </template>
-
-<script>
-  import MenuRow from "./MenuRow.vue";
-  import { mapActions, mapWritableState } from "pinia";
-  import { globalStore } from "../stores/index.js";
-  import { preset2dRules } from "../modules/preset.js";
-  export default {
-    name: "Menu2dCA",
-    components: {
-      MenuRow,
-    },
-    data() {
-      return {
-        uploadedFile: "",
-        preset2dRules: preset2dRules,
-      };
-    },
-    computed: {
-      ...mapWritableState(globalStore, ["picture", "selected2dRules"]),
-    },
-    methods: {
-      ...mapActions(globalStore, [
-        "toggleDraw2dLast",
-        "toggleDraw2d",
-        "toggle2dDrawFromPicture",
-      ]),
-      preparePicture(event) {
-        const files = event.target.files;
-        this.picture = new Image();
-        if (FileReader && files && files.length) {
-          const reader = new FileReader();
-
-          reader.onload = () => {
-            this.picture.src = Object.freeze(reader.result);
-            this.toggle2dDrawFromPicture();
-          };
-
-          reader.onerror = () => {
-            console.log(reader.error);
-          };
-
-          reader.readAsDataURL(files[0]);
-        }
-      },
-      update2dRules(event) {
-        const elem = event.target;
-        const id = elem.value;
-        const newRuleset = this.preset2dRules.find((ruleset) => {
-          return ruleset.id === id;
-        });
-        this.selected2dRules = newRuleset;
-      },
-    },
-  };
-</script>

src/components/MenuCellProperties.vue

@@ -1,3 +1,24 @@
+<script setup>
+  import { globalStore } from "../stores/index.js";
+  import MenuRow from "./MenuRow.vue";
+
+  const store = globalStore();
+
+  const updateCellProperties = (event) => {
+    const elem = event.target;
+    store.cellProperties[elem.name] = elem.value;
+    store.setBoardWidth();
+    store.setBoardHeight();
+  };
+
+  const switchColor = () => {
+    [store.cellProperties["liveColor"], store.cellProperties["deadColor"]] = [
+      store.cellProperties["deadColor"],
+      store.cellProperties["liveColor"],
+    ];
+  };
+</script>
+
 <template>
   <MenuRow row-title="Cell Properties">
     <form>
@@ -6,7 +27,7 @@
         <input
           name="liveColor"
           type="color"
-          :value="cellProperties.liveColor"
+          :value="store.cellProperties.liveColor"
           @input="updateCellProperties"
         />
       </div>
@@ -15,7 +36,7 @@
         <input
           name="deadColor"
           type="color"
-          :value="cellProperties.deadColor"
+          :value="store.cellProperties.deadColor"
           @input="updateCellProperties"
         />
       </div>
@@ -28,7 +49,7 @@
           name="size"
           type="number"
           min="1"
-          :value="cellProperties.size"
+          :value="store.cellProperties.size"
           @click="updateCellProperties"
         />
       </div>
@@ -36,40 +57,6 @@
   </MenuRow>
 </template>
 
-<script>
-  import { mapActions, mapWritableState } from "pinia";
-  import { globalStore } from "../stores/index.js";
-  import MenuRow from "./MenuRow.vue";
-  export default {
-    name: "MenuCellProperties",
-    components: {
-      MenuRow,
-    },
-    computed: {
-      ...mapWritableState(globalStore, ["cellProperties"]),
-    },
-    methods: {
-      ...mapActions(globalStore, ["setBoardHeight", "setBoardWidth"]),
-      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;
-        this.setBoardWidth();
-        this.setBoardHeight();
-      },
-      switchColor() {
-        [this.cellProperties["liveColor"], this.cellProperties["deadColor"]] = [
-          this.cellProperties["deadColor"],
-          this.cellProperties["liveColor"],
-        ];
-      },
-    },
-  };
-</script>
 <style scoped>
   a {
     font-weight: bold;

src/components/MenuElementaryCA.vue

@@ -1,3 +1,36 @@
+<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">
     <form>
@@ -6,7 +39,7 @@
           type="button"
           name="start"
           value="start"
-          @click="toggleDraw1d()"
+          @click="store.toggleDraw1d()"
         />
       </div>
       <div class="form-field">
@@ -15,7 +48,7 @@
           <br />
           <select
             name="initialStates"
-            :value="initialState"
+            :value="store.initial1dState"
             @input="updateInitialState"
           >
             <option
@@ -37,7 +70,7 @@
           <br />
           <select
             name="ruleset-elementary"
-            :value="ruleset.name"
+            :value="store.ruleset1d.name"
             @input="updateRuleset"
           >
             <option
@@ -54,7 +87,7 @@
         <a style="cursor: pointer" @click="copyRuleset">copy rules</a>
       </div>
       <div
-        v-for="(rule, name, index) in ruleset.rules"
+        v-for="(rule, name, index) in store.ruleset1d.rules"
         :key="'rule-' + index"
         class="form-field"
       >
@@ -73,68 +106,6 @@
   </MenuRow>
 </template>
 
-<script>
-  import { mapActions, mapWritableState } from "pinia";
-  import { presetRuleset, initialStates } from "../modules/preset.js";
-  import { globalStore } from "../stores/index.js";
-  import MenuRow from "./MenuRow.vue";
-  export default {
-    name: "MenuElementaryCA",
-    components: {
-      MenuRow,
-    },
-    data() {
-      return {
-        presetRuleset: presetRuleset,
-        initialStates: initialStates,
-      };
-    },
-    computed: {
-      ...mapWritableState(globalStore, {
-        initialState: "initial1dState",
-        ruleset: "ruleset1d",
-      }),
-      rules1dFileName() {
-        // TODO: broken
-        return (
-          Object.keys(this.ruleset)
-            .map((index) => {
-              return this.ruleset[index];
-            })
-            .join("_") + ".json"
-        );
-      },
-    },
-    methods: {
-      ...mapActions(globalStore, ["toggleDraw1d"]),
-      copyRuleset() {
-        const newRuleset = JSON.stringify(this.ruleset);
-        navigator.clipboard.writeText(newRuleset);
-      },
-      isCurrentPreset(event) {
-        const elem = event.target;
-        return this.initialState === elem.value;
-      },
-      updateSingleRule(event) {
-        const elem = event.target;
-        const value = elem.checked ? 1 : 0;
-        this.ruleset.rules[elem.name] = value;
-      },
-      updateRuleset(event) {
-        const elem = event.target;
-        const name = elem.value;
-        const newRuleset = this.presetRuleset.find((ruleset) => {
-          return ruleset.name === name;
-        });
-        this.ruleset = newRuleset;
-      },
-      updateInitialState(event) {
-        const elem = event.target;
-        this.initialState = elem.value;
-      },
-    },
-  };
-</script>
 <style>
   .menu-row a {
     color: white;

src/components/MenuGeneralOptions.vue

@@ -1,3 +1,31 @@
+<script setup>
+  import { globalStore } from "../stores/index.js";
+  import MenuRow from "./MenuRow.vue";
+
+  const store = globalStore();
+
+  const updateCanvasHeight = (event) => {
+    const elem = event.target;
+    store.canvasHeight = elem.value;
+  };
+
+  const updateCanvasWidth = (event) => {
+    const elem = event.target;
+    store.canvasWidth = elem.value;
+  };
+
+  const updateRefreshRate = (event) => {
+    const elem = event.target;
+    store.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>
@@ -11,7 +39,7 @@
           name="canvasWidth"
           type="number"
           step="10"
-          :value="canvasWidth"
+          :value="store.canvasWidth"
           @input="updateCanvasWidth"
         />
       </div>
@@ -22,7 +50,7 @@
           name="canvasHeight"
           type="number"
           step="10"
-          :value="canvasHeight"
+          :value="store.canvasHeight"
           @input="updateCanvasHeight"
         />
       </div>
@@ -36,7 +64,7 @@
           type="number"
           min="100"
           step="100"
-          :value="refreshRate"
+          :value="store.refreshRate"
           @input="updateRefreshRate"
         />
       </div>
@@ -45,8 +73,8 @@
           >Invert Drawing Direction
           <input
             type="checkbox"
-            :checked="drawingDirection === 'x'"
+            :checked="store.drawingDirection === 'x'"
-            :value="drawingDirection"
+            :value="store.drawingDirection"
             @input="updateDrawingDirection"
           />
         </label>
@@ -54,42 +82,3 @@
     </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,13 +1,19 @@
+<script setup>
+  import { globalStore } from "../stores/index.js";
+
+  const store = globalStore();
+</script>
+
 <template>
   <div class="form-field">
     <div class="form-field">
       <label>
         Loop
         <input
-          :value="loop"
+          :value="store.loop"
           type="checkbox"
-          :checked="loop"
+          :checked="store.loop"
-          @input="toggleLoop()"
+          @input="store.toggleLoop()"
         />
       </label>
     </div>
@@ -16,43 +22,25 @@
       name="next"
       class="next"
       value="Next"
-      @click="toggleNext()"
+      @click="store.toggleNext()"
     />
     <input
       type="button"
       name="stop"
       class="stop"
       value="stop"
-      @click="toggleStop()"
+      @click="store.toggleStop()"
     />
     <input
       type="button"
       name="reset"
       class="reset"
       value="reset"
-      @click="toggleReset()"
+      @click="store.toggleReset()"
     />
   </div>
 </template>
-<script>
-  import { mapState, mapActions } from "pinia";
-  import { globalStore } from "../stores/index.js";
 
-  export default {
-    name: "MenuReset",
-    computed: {
-      ...mapState(globalStore, ["loop"]),
-    },
-    methods: {
-      ...mapActions(globalStore, [
-        "toggleReset",
-        "toggleStop",
-        "toggleLoop",
-        "toggleNext",
-      ]),
-    },
-  };
-</script>
 <style scoped>
   .form-field {
     display: flex;

src/components/MenuRow.vue

@@ -1,3 +1,44 @@
+<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">
@@ -9,57 +50,6 @@
   </div>
 </template>
 
-<script>
-  import { mapActions, mapState } from "pinia";
-  import { globalStore } from "../stores/index.js";
-  export default {
-    name: "MenuRow",
-    props: {
-      rowTitle: {
-        type: String,
-        default: "",
-      },
-    },
-    computed: {
-      ...mapState(globalStore, ["activeSubMenu"]),
-      isActive() {
-        return this.rowTitle == this.activeSubMenu;
-      },
-    },
-    beforeUnmount() {
-      window.removeEventListener("click", this.onWindowClick);
-    },
-    methods: {
-      ...mapActions(globalStore, [
-        "setActiveSubMenu",
-        "toggleMainMenu",
-        "setMainMenu",
-      ]),
-      onKeyDown: function (event) {
-        // escape
-        if (event.keyCode == 27) {
-          this.setActiveSubMenu("");
-        }
-      },
-      storeActiveSubMenu() {
-        window.addEventListener("click", this.onWindowClick);
-        this.setActiveSubMenu(this.rowTitle);
-      },
-      // hides submenu when click is detected outside from it
-      onWindowClick(event) {
-        const form = this.$refs.content;
-        if (form != null) {
-          if (!form.contains(event.target)) {
-            this.setActiveSubMenu("");
-            this.setMainMenu(false);
-          }
-          return;
-        }
-      },
-    },
-  };
-</script>
-
 <style>
   .menu-row h2 {
     font-size: medium;

src/modules/picture.js

@@ -57,7 +57,7 @@ export function boardToPic(board, width, height, cellProperties) {
   const img = new ImageData(width, height);
   const colors = [hexToRGB(live), hexToRGB(dead)];
   board.flat().reduce((acc, cell, index) => {
-    const color = colors[cell];
+    const color = cell === 1 ? colors[0] : colors[1];
     const i = index * 4;
     acc[i] = color[0];
     acc[i + 1] = color[1];

src/stores/index.js

@@ -40,7 +40,7 @@ export const globalStore = defineStore("globalStore", {
       draw2dpicture: false,
       reset: false,
       canDraw: true,
-      picture: null,
+      picture: new Image(),
       mainMenu: false,
       activeSubMenu: "",
       loop: false,