adapted components to pinia

src/components/CanvasBoard.vue

@@ -9,138 +9,141 @@
   </main>
 </template>
 <script>
-import {
+  import { mapActions, mapState, mapWritableState } from 'pinia'
-  create1dState,
+  import { globalStore } from "../stores/index.js";
-  create1dStateOneCell,
+  import {
-  create2dState,
+    create1dState,
-  createBoard,
+    create1dStateOneCell,
-  conwayRules,
+    create2dState,
-  evolve2d,
+    createBoard,
-} from "../modules/automata.js";
+    conwayRules,
-import { getRandomInt, sleep } from "../modules/common.js";
+    evolve2d,
-import { mapGetters } from "vuex";
+  } from "../modules/automata.js";
-export default {
+  import { getRandomInt, sleep } from "../modules/common.js";
-  name: "CanvasBoard",
+
-  data() {
+  export default {
-    return {
+    name: "CanvasBoard",
-      canvas: null,
+    data() {
-      ctx: null,
+      return {
-    };
+        canvas: null,
-  },
+        ctx: null,
-  computed: {
-    ...mapGetters({
-      cellProperties: "getCellProperties",
-      rules: "get1dRules",
-      canvasWidth: "getCanvasWidth",
-      canvasHeight: "getCanvasHeight",
-      refreshRate: "getRefreshRate",
-      initial1dState: "getInitial1dState",
-      drawingDirection: "getDrawingDirection",
-      canDraw: "getCanDraw",
-      lastBoard: "getLastBoard",
-      getDraw1d: "getDraw1d",
-      getDraw2d: "getDraw2d",
-      getDraw2dLast: "getDraw2dLast",
-      getReset: "getReset",
-    }),
-    boardWidth: function () {
-      return Math.floor(this.canvasWidth / this.cellProperties.size);
-    },
-    boardHeight: function () {
-      return Math.floor(this.canvasHeight / this.cellProperties.size);
-    },
-  },
-  watch: {
-    getDraw1d(value) {
-      if (value == true) this.draw1d();
-    },
-    getDraw2d(value) {
-      if (value == true) this.draw2dNew();
-    },
-    getDraw2dLast(value) {
-      if (value == true) this.draw2dLast();
-    },
-    getReset(value) {
-      if (value == true) this.reset();
-    },
-  },
-  mounted() {
-    this.canvas = Object.freeze(document.getElementById("canvas-board"));
-    this.ctx = this.canvas.getContext("2d");
-    this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
-    this.$store.commit(
-      "setCanvasHeight",
-      this.canvas.parentElement.clientHeight
-    );
-  },
-  methods: {
-    drawCanvas(board) {
-      const props = this.cellProperties;
-      board.map((row, y) => {
-        const d = props.size;
-        return row.map((cell, x) => {
-          this.ctx.fillStyle = (() => {
-            if (cell === 1) return props.liveColor;
-            return props.deadColor;
-          })();
-          if (this.drawingDirection === "x")
-            this.ctx.fillRect(y * d, x * d, d, d);
-          else this.ctx.fillRect(x * d, y * d, d, d);
-          return cell;
-        });
-      });
-    },
-    compute1dInitialState() {
-      if (this.initial1dState === "onecell")
-        return create1dStateOneCell(this.boardWidth);
-      return create1dState(this.boardWidth, getRandomInt, [0, 2]);
-    },
-    draw1d() {
-      const initialState = this.compute1dInitialState();
-      const board = createBoard(
-        initialState,
-        this.rules.rules,
-        this.boardWidth
-      );
-      this.$store.commit("setLastBoard", Object.freeze(board));
-      this.drawCanvas(board);
-      this.$store.dispatch("stop");
-    },
-    draw2d(board) {
-      if (!this.canDraw) return;
-      const draw2dNext = async (b) => {
-        if (!this.canDraw) return;
-        const newBoard = evolve2d(b, conwayRules);
-        this.drawCanvas(b, this.cellProperties);
-        await sleep(this.refreshRate);
-        draw2dNext(newBoard);
       };
-      return draw2dNext(board);
     },
-    draw2dNew() {
+    computed: {
-      const initialState = create2dState(
+      ...mapState(globalStore, {
-        this.boardWidth,
+        cellProperties: "cellProperties",
-        this.boardHeight,
+        rules: "rules1d",
-        getRandomInt,
+        refreshRate: "refreshRate",
-        [0, 2]
+        initial1dState: "initial1dState",
-      );
+        drawingDirection: "drawingDirection",
-      const board = evolve2d(initialState, conwayRules);
+        canDraw: "canDraw",
-      this.$store.commit("setLastBoard", Object.freeze(board));
+        getDraw1d: "draw1d",
-      this.draw2d(board);
+        getDraw2d: "draw2d",
+        getDraw2dLast: "draw2dLast",
+      }),
+      ...mapWritableState(globalStore, {
+        lastBoard: "lastBoard",
+        canvasWidth: "canvasWidth",
+        canvasHeight: "canvasHeight",
+        getReset: "reset",
+      }),
+      boardWidth: function () {
+        return Math.floor(this.canvasWidth / this.cellProperties.size);
+      },
+      boardHeight: function () {
+        return Math.floor(this.canvasHeight / this.cellProperties.size);
+      },
     },
-    async draw2dLast() {
+    watch: {
-      this.draw2d(this.lastBoard);
+      getDraw1d(value) {
+        if (value == true) this.draw1d();
+      },
+      getDraw2d(value) {
+        if (value == true) this.draw2dNew();
+      },
+      getDraw2dLast(value) {
+        if (value == true) this.draw2dLast();
+      },
+      getReset(value) {
+        if (value == true) this.reset();
+      },
     },
-    reset() {
+    mounted() {
-      this.$store.dispatch("stop");
+      this.canvas = Object.freeze(document.getElementById("canvas-board"));
-      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.ctx = this.canvas.getContext("2d");
-      this.$store.commit("toggleReset", 0);
+      this.canvasWidth = this.canvas.parentElement.clientWidth
+      this.canvasHeight = this.canvas.parentElement.clientHeight
     },
-  },
+    methods: {
-};
+      ...mapActions(globalStore, ["toggleStop"]),
+      drawCanvas(board) {
+        const props = this.cellProperties;
+        board.map((row, y) => {
+          const d = props.size;
+          return row.map((cell, x) => {
+            this.ctx.fillStyle = (() => {
+              if (cell === 1) return props.liveColor;
+              return props.deadColor;
+            })();
+            if (this.drawingDirection === "x")
+              this.ctx.fillRect(y * d, x * d, d, d);
+            else this.ctx.fillRect(x * d, y * d, d, d);
+            return cell;
+          });
+        });
+      },
+      compute1dInitialState() {
+        if (this.initial1dState === "onecell")
+          return create1dStateOneCell(this.boardWidth);
+        return create1dState(this.boardWidth, getRandomInt, [0, 2]);
+      },
+      draw1d() {
+        const initialState = this.compute1dInitialState();
+        const board = createBoard(
+          initialState,
+          this.rules.rules,
+          this.boardWidth
+        );
+        this.lastBoard = Object.freeze(board)
+        this.drawCanvas(board);
+        this.toggleStop()
+      },
+      draw2d(board) {
+        if (!this.canDraw) return;
+        const draw2dNext = async (b) => {
+          if (!this.canDraw) return;
+          const newBoard = evolve2d(b, conwayRules);
+          this.drawCanvas(b, this.cellProperties);
+          await sleep(this.refreshRate);
+          draw2dNext(newBoard);
+        };
+        return draw2dNext(board);
+      },
+      draw2dNew() {
+        const initialState = create2dState(
+          this.boardWidth,
+          this.boardHeight,
+          getRandomInt,
+          [0, 2]
+        );
+        const board = evolve2d(initialState, conwayRules);
+        this.lastBoard = Object.freeze(board)
+        this.draw2d(board);
+      },
+      async draw2dLast() {
+        if (this.lastBoard != undefined)
+          this.draw2d(this.lastBoard);
+      },
+      reset() {
+        this.toggleStop()
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.getReset = 0
+      },
+    },
+  };
 </script>
 <style>
-#mainContent {
+  #mainContent {
-  min-width: 70%;
+    min-width: 70%;
-}
+  }
 </style>

src/components/MainMenu.vue

@@ -8,55 +8,55 @@
 </template>
 
 <script>
-import MenuCellProperties from "./MenuCellProperties.vue";
+  import MenuCellProperties from "./MenuCellProperties.vue";
-import MenuGeneralOptions from "./MenuGeneralOptions.vue";
+  import MenuGeneralOptions from "./MenuGeneralOptions.vue";
-import MenuElementaryCA from "./MenuElementaryCA.vue";
+  import MenuElementaryCA from "./MenuElementaryCA.vue";
-import Menu2dCA from "./Menu2dCA.vue";
+  import Menu2dCA from "./Menu2dCA.vue";
-export default {
+  export default {
-  name: "MainMenu",
+    name: "MainMenu",
-  components: {
+    components: {
-    MenuCellProperties,
+      MenuCellProperties,
-    MenuGeneralOptions,
+      MenuGeneralOptions,
-    MenuElementaryCA,
+      MenuElementaryCA,
-    Menu2dCA,
+      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;
+    width: 25%;
-    padding: 0;
+    padding: 0 10px;
-    width: 100%;
+    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

@@ -2,55 +2,40 @@
   <MenuRow row-title="2D Cellular Automata">
     <div class="form-field">
       <label>Start from last result</label>
-      <input type="button" value="start" @click="draw2dLast" />
+      <input type="button" value="start" @click="toggleDraw2dLast()" />
     </div>
     <div class="form-field">
-      <input type="button" name="start2d" value="start" @click="draw2d" />
+      <input type="button" name="start2d" value="start" @click="toggleDraw2d()" />
       <input
         type="button"
         name="stop"
         class="stop"
         value="stop"
-        @click="stop"
+        @click="toggleStop()"
       />
       <input
         type="button"
         name="reset"
         class="reset"
         value="reset"
-        @click="reset"
+        @click="toggleReset()"
       />
     </div>
   </MenuRow>
 </template>
 
 <script>
-import MenuRow from "./MenuRow.vue";
+  import { mapActions } from "pinia";
-import { mapGetters } from "vuex";
+  import MenuRow from "./MenuRow.vue";
+  import { globalStore } from "../stores/index.js";
 
-export default {
+  export default {
-  name: "Menu2dCA",
+    name: "Menu2dCA",
-  components: {
+    components: {
-    MenuRow,
+      MenuRow,
-  },
-  computed: {
-    ...mapGetters({
-      lastBoard: "getLastBoard",
-    }),
-  },
-  methods: {
-    draw2d() {
-      this.$store.dispatch("draw2d");
     },
-    draw2dLast() {
+    methods: {
-      this.$store.dispatch("draw2dLast");
+      ...mapActions(globalStore, ["toggleDraw2d", "toggleDraw2dLast", "toggleReset", "toggleStop"]),
     },
-    reset() {
+  };
-      this.$store.dispatch("reset");
-    },
-    stop() {
-      this.$store.dispatch("stop");
-    },
-  },
-};
 </script>

src/components/MenuCellProperties.vue

@@ -34,29 +34,27 @@
 </template>
 
 <script>
-import MenuRow from "./MenuRow.vue";
+  import { mapWritableState } from 'pinia'
-export default {
+  import { globalStore } from "../stores/index.js";
-  name: "MainMenu",
+  import MenuRow from "./MenuRow.vue";
-  components: {
+  export default {
-    MenuRow,
+    name: "MainMenu",
-  },
+    components: {
-  data() {
+      MenuRow,
-    return {
-      cellProperties: this.$store.state.cellProperties,
-    };
-  },
-  methods: {
-    getCellProperties(event) {
-      const elem = event.target;
-      const prop = this.$store.state.cellProperties;
-      return prop[elem.name];
     },
-    updateCellProperties(event) {
+    computed: {
-      const elem = event.target;
+      ...mapWritableState(globalStore, ["cellProperties"])
-      const prop = { name: elem.name, value: elem.value };
-      //console.log(prop)
-      this.$store.commit("setCellProperties", prop);
     },
-  },
+    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

@@ -63,20 +63,20 @@
       </div>
     </form>
     <div class="form-field">
-      <input type="button" name="start" value="start" @click="draw1d" />
+      <input type="button" name="start" value="start" @click="toggleDraw1d()" />
       <input
         type="button"
         name="reset"
         class="reset"
         value="reset"
-        @click="reset"
+        @click="toggleReset"
       />
     </div>
   </MenuRow>
 </template>
 
 <script>
-  import { mapActions, mapState, mapWritableState } from 'pinia'
+  import { mapActions, mapWritableState } from 'pinia'
   import { presetRules, initialStates } from "./preset.js"
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
@@ -95,14 +95,11 @@
       ...mapWritableState(
         globalStore, {
           initialState: "initial1dState",
-        }
-      ),
-      ...mapState(
-        globalStore, {
           rules: "rules1d"
         }
       ),
       rules1dFileName() {
+        // TODO: broken
         return (
           Object.keys(this.rules)
                 .map((index) => {
@@ -113,7 +110,7 @@
       },
     },
     methods: {
-      ...mapActions(globalStore, ["draw1d", "reset"]),
+      ...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]),
       copyRules() {
         const rules = JSON.stringify(this.rules);
         navigator.clipboard.writeText(rules);

src/components/MenuGeneralOptions.vue

@@ -56,40 +56,43 @@
 </template>
 
 <script>
-import MenuRow from "./MenuRow.vue";
+  import { mapWritableState } from 'pinia'
-import { mapGetters } from "vuex";
+  import { globalStore } from "../stores/index.js";
-export default {
+  import MenuRow from "./MenuRow.vue";
-  name: "MenuGeneralOptions",
+  export default {
-  components: {
+    name: "MenuGeneralOptions",
-    MenuRow,
+    components: {
-  },
+      MenuRow,
-  computed: {
-    ...mapGetters({
-      canvasWidth: "getCanvasWidth",
-      canvasHeight: "getCanvasHeight",
-      refreshRate: "getRefreshRate",
-      drawingDirection: "getDrawingDirection",
-    }),
-  },
-  methods: {
-    updateCanvasHeight: function (event) {
-      const elem = event.target;
-      this.$store.commit("setCanvasHeight", elem.value);
     },
-    updateCanvasWidth: function (event) {
+    computed: {
-      const elem = event.target;
+      ...mapWritableState(
-      this.$store.commit("setCanvasWidth", elem.value);
+        globalStore,
+        [
+          "canvasWidth",
+          "canvasHeight",
+          "refreshRate",
+          "drawingDirection"
+      ]
+      ),
     },
-    updateRefreshRate: function (event) {
+    methods: {
-      const elem = event.target;
+      updateCanvasHeight: function (event) {
-      this.$store.commit("setRefreshRate", elem.value);
+        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
+      },
     },
-    updateDrawingDirection: function (event) {
+  };
-      const elem = event.target;
-      const value = elem.checked ? "x" : "y";
-      this.$store.commit("setDrawingDirection", value);
-      console.log(this.drawingDirection);
-    },
-  },
-};
 </script>

src/components/MenuRow.vue

@@ -10,66 +10,66 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+  import { mapWritableState } from 'pinia'
-
+  import { globalStore } from "../stores/index.js";
-export default {
+  
-  name: "MenuRow",
+  export default {
-  props: {
+    name: "MenuRow",
-    rowTitle: {
+    props: {
-      type: String,
+      rowTitle: {
-      default: "",
+        type: String,
+        default: "",
+      },
     },
-  },
+    computed: {
-  computed: {
+      // TODO: should be passed as a props/slot, not in a store
-    ...mapGetters({
+      ...mapWritableState(globalStore, ["activeMenu"])
-      activeMenu: "getActiveMenu",
-    }),
-  },
-  methods: {
-    updateActiveMenu(event) {
-      const elem = event.target;
-      const value = elem.id;
-      if (value == this.activeMenu) this.$store.commit("setActiveMenu", "");
-      else this.$store.commit("setActiveMenu", value);
     },
-  },
+    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 {
+  .menu-row h2 {
-  font-size: medium;
+    font-size: medium;
-  padding: 10px;
+    padding: 10px;
-  cursor: pointer;
+    cursor: pointer;
-  border: 2px solid darkgrey;
+    border: 2px solid darkgrey;
-  margin: 0 0 10px 0;
+    margin: 0 0 10px 0;
-}
+  }
 
-select {
+  select {
-  margin-top: 10px;
+    margin-top: 10px;
-  padding: 5px;
+    padding: 5px;
-}
+  }
 
-input[type="button"] {
+  input[type="button"] {
-  min-width: 60px;
+    min-width: 60px;
-  padding: 5px;
+    padding: 5px;
-  font-weight: bold;
+    font-weight: bold;
-  margin-right: 10px;
+    margin-right: 10px;
-}
+  }
 
-.form-field {
+  .form-field {
-  display: flex;
+    display: flex;
-  margin: 10px;
+    margin: 10px;
-  justify-content: space-between;
+    justify-content: space-between;
-}
+  }
 
-.menu-row {
+  .menu-row {
-  flex: 1;
+    flex: 1;
-}
+  }
 
-label,
+  label,
-.form-field label {
+  .form-field label {
-  margin-right: 10px;
+    margin-right: 10px;
-  font-weight: bold;
+    font-weight: bold;
-}
+  }
 </style>

src/stores/index.js

@@ -38,22 +38,22 @@ export const globalStore = defineStore("globalStore", {
     }
   },
   actions: {
-    draw1d() {
+    toggleDraw1d() {
       this.draw1d = true;
     },
-    draw2d() {
+    toggleDraw2d() {
       this.canDraw = true;
       this.draw2d = true;
     },
-    draw2dLast() {
+    toggleDraw2dLast() {
       this.canDraw = true;
       this.draw2dLast = true;
     },
-    reset() {
+    toggleReset() {
-      this.stop();
+      this.toggleStop();
       this.reset = true;
     },
-    stop() {
+    toggleStop() {
       this.draw1d = false;
       this.draw2d = false;
       this.draw2dLast = false;