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>