add pinia and a tmp global stores

src/App.vue

@@ -9,58 +9,58 @@
 </template>
 
 <script>
-import MainMenu from "./components/MainMenu.vue";
-import CanvasBoard from "./components/CanvasBoard.vue";
+  import MainMenu from "./components/MainMenu.vue";
+  import CanvasBoard from "./components/CanvasBoard.vue";
 
-export default {
-  name: "App",
-  components: {
-    MainMenu,
-    CanvasBoard,
-  },
-};
+  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; */
-}
+  #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;
-}
+  * {
+    margin: 0;
+    padding: 0;
+  }
 
-body {
-  background: black;
-  color: white;
-  font-family: Courier New;
-}
+  body {
+    background: black;
+    color: white;
+    font-family: Courier New;
+  }
 
-canvas {
-  flex: auto;
-  background: #110812;
-  margin-right: 10px;
-}
+  canvas {
+    flex: auto;
+    background: #110812;
+    margin-right: 10px;
+  }
 
-h1,
-h2 {
-  font-weight: bold;
-}
+  h1,
+  h2 {
+    font-weight: bold;
+  }
 
-h1 {
-  margin: 10px auto;
-  font-size: larger;
-  text-align: center;
-}
+  h1 {
+    margin: 10px auto;
+    font-size: larger;
+    text-align: center;
+  }
 
-#container {
-  display: flex;
-  height: calc(100vh - 100px);
-  overflow: hidden;
-}
+  #container {
+    display: flex;
+    height: calc(100vh - 100px);
+    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;
+    },
+  },
+});