add pinia and a tmp global stores

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@vitejs/plugin-vue": "^3.2.0",
         "install": "^0.13.0",
+        "pinia": "^2.0.27",
         "vite": "^3.2.4",
         "vue": "3.2",
         "vuex": "4.1"
@@ -1548,6 +1549,56 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
+    "node_modules/pinia": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.27.tgz",
+      "integrity": "sha512-nOnXP0OFeL8R4WjAHsterU+11vptda643gH02xKNtSCDPiRzVfRYodOLihLDoa0gL1KKuQKV+KOzEgdt3YvqEw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.4.5",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.19",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
@@ -3083,6 +3134,23 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
+    "pinia": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.27.tgz",
+      "integrity": "sha512-nOnXP0OFeL8R4WjAHsterU+11vptda643gH02xKNtSCDPiRzVfRYodOLihLDoa0gL1KKuQKV+KOzEgdt3YvqEw==",
+      "requires": {
+        "@vue/devtools-api": "^6.4.5",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
     "postcss": {
       "version": "8.4.19",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@vitejs/plugin-vue": "^3.2.0",
     "install": "^0.13.0",
+    "pinia": "^2.0.27",
     "vite": "^3.2.4",
     "vue": "3.2",
     "vuex": "4.1"

src/App.vue

@@ -9,58 +9,58 @@
 </template>
 
 <script>
-import MainMenu from "./components/MainMenu.vue";
+  import MainMenu from "./components/MainMenu.vue";
-import CanvasBoard from "./components/CanvasBoard.vue";
+  import CanvasBoard from "./components/CanvasBoard.vue";
 
-export default {
+  export default {
-  name: "App",
+    name: "App",
-  components: {
+    components: {
-    MainMenu,
+      MainMenu,
-    CanvasBoard,
+      CanvasBoard,
-  },
+    },
-};
+  };
 </script>
 
 <style>
-#app {
+  #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+    text-align: center;
-  /* color: #2c3e50; */
+    /* color: #2c3e50; */
-}
+  }
 
-* {
+  * {
-  margin: 0;
+    margin: 0;
-  padding: 0;
+    padding: 0;
-}
+  }
 
-body {
+  body {
-  background: black;
+    background: black;
-  color: white;
+    color: white;
-  font-family: Courier New;
+    font-family: Courier New;
-}
+  }
 
-canvas {
+  canvas {
-  flex: auto;
+    flex: auto;
-  background: #110812;
+    background: #110812;
-  margin-right: 10px;
+    margin-right: 10px;
-}
+  }
 
-h1,
+  h1,
-h2 {
+  h2 {
-  font-weight: bold;
+    font-weight: bold;
-}
+  }
 
-h1 {
+  h1 {
-  margin: 10px auto;
+    margin: 10px auto;
-  font-size: larger;
+    font-size: larger;
-  text-align: center;
+    text-align: center;
-}
+  }
 
-#container {
+  #container {
-  display: flex;
+    display: flex;
-  height: calc(100vh - 100px);
+    height: calc(100vh - 100px);
-  overflow: hidden;
+    overflow: hidden;
-}
+  }
 </style>

src/main.js

@@ -1,9 +1,12 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import { store } from "./store";
+import { createPinia } from "pinia";
 
 const app = createApp(App);
+const pinia = createPinia();
 
 app.use(store);
+app.use(pinia);
 
 app.mount("#app");

src/stores/index.js

@@ -0,0 +1,63 @@
+import { defineStore } from "pinia";
+
+export const globalStore = defineStore("globalStore", {
+  state: () => {
+    return {
+      rules1d: {
+        name: "rule 73",
+        rules: {
+          111: 0,
+          110: 1,
+          101: 0,
+          100: 0,
+          "011": 1,
+          "010": 0,
+          "001": 0,
+          "000": 1,
+        },
+      },
+      cellProperties: {
+        size: 3,
+        liveColor: "#000000",
+        deadColor: "#F5F5F5",
+      },
+      canvasWidth: 0,
+      canvasHeight: 0,
+      boardWidth: 0,
+      boardHeight: 0,
+      refreshRate: 300,
+      initial1dState: "onecell",
+      activeMenu: "",
+      drawingDirection: "y",
+      lastBoard: {},
+      draw1d: false,
+      draw2d: false,
+      draw2dLast: false,
+      reset: false,
+      canDraw: true,
+    }
+  },
+  actions: {
+    draw1d() {
+      this.draw1d = true;
+    },
+    draw2d() {
+      this.canDraw = true;
+      this.draw2d = true;
+    },
+    draw2dLast() {
+      this.canDraw = true;
+      this.draw2dLast = true;
+    },
+    reset() {
+      this.stop();
+      this.reset = true;
+    },
+    stop() {
+      this.draw1d = false;
+      this.draw2d = false;
+      this.draw2dLast = false;
+      this.canDraw = false;
+    },
+  },
+});