removed old dependencies

.pre-commit-config.yaml

@@ -0,0 +1,9 @@
+repos:
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: "v8.28.0"
+    hooks:
+      - id: eslint
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v2.7.1"
+    hooks:
+      - id: prettier

package-lock.json

@@ -12,8 +12,7 @@
         "install": "^0.13.0",
         "pinia": "^2.0.27",
         "vite": "^3.2.4",
-        "vue": "3.2",
+        "vue": "3.2"
-        "vuex": "4.1"
       },
       "devDependencies": {
         "eslint": "^8.28.0",
@@ -2020,17 +2019,6 @@
         "eslint": ">=6.0.0"
       }
     },
-    "node_modules/vuex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
-      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
-      "dependencies": {
-        "@vue/devtools-api": "^6.0.0-beta.11"
-      },
-      "peerDependencies": {
-        "vue": "^3.2.0"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3392,14 +3380,6 @@
         "semver": "^7.3.6"
       }
     },
-    "vuex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
-      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
-      "requires": {
-        "@vue/devtools-api": "^6.0.0-beta.11"
-      }
-    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -14,8 +14,7 @@
     "install": "^0.13.0",
     "pinia": "^2.0.27",
     "vite": "^3.2.4",
-    "vue": "3.2",
+    "vue": "3.2"
-    "vuex": "4.1"
   },
   "devDependencies": {
     "eslint": "^8.28.0",

src/components/CanvasBoard.vue

@@ -9,138 +9,140 @@
   </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,50 @@
   <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

@@ -25,7 +25,7 @@
       </div>
       <div class="form-field">
         <label
-        >Rules presets
+          >Rules presets
           <br />
           <select
             name="ruleset-elementary"
@@ -51,7 +51,7 @@
         class="form-field"
       >
         <label
-        >{{ name }}
+          >{{ name }}
           <input
             :value="rule"
             type="checkbox"
@@ -63,21 +63,21 @@
       </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 { presetRules, initialStates } from "./preset.js";
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
   export default {
@@ -92,28 +92,23 @@
       };
     },
     computed: {
-      ...mapWritableState(
+      ...mapWritableState(globalStore, {
-        globalStore, {
+        initialState: "initial1dState",
-          initialState: "initial1dState",
+        rules: "rules1d",
-        }
+      }),
-      ),
-      ...mapState(
-        globalStore, {
-          rules: "rules1d"
-        }
-      ),
       rules1dFileName() {
+        // TODO: broken
         return (
           Object.keys(this.rules)
-                .map((index) => {
+            .map((index) => {
-                  return this.rules[index];
+              return this.rules[index];
-                })
+            })
-                .join("_") + ".json"
+            .join("_") + ".json"
         );
       },
     },
     methods: {
-      ...mapActions(globalStore, ["draw1d", "reset"]),
+      ...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]),
       copyRules() {
         const rules = JSON.stringify(this.rules);
         navigator.clipboard.writeText(rules);
@@ -133,20 +128,20 @@
         const newRuleset = this.presetRules.find((ruleset) => {
           return ruleset.name === name;
         });
-        this.rules.rules = newRuleset.rules
+        this.rules.rules = newRuleset.rules;
       },
       updateInitialState(event) {
         const elem = event.target;
-        this.initial1dState = elem.value
+        this.initial1dState = elem.value;
       },
     },
   };
 </script>
 <style>
   .menu-row a {
-     color: white;
+    color: white;
-     font-weight: bold;
+    font-weight: bold;
-     text-decoration: none;
+    text-decoration: none;
-     font-size: small;
+    font-size: small;
   }
 </style>

src/components/MenuGeneralOptions.vue

@@ -56,40 +56,40 @@
 </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(globalStore, [
-      this.$store.commit("setCanvasWidth", elem.value);
+        "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 {
+  export default {
-  name: "MenuRow",
+    name: "MenuRow",
-  props: {
+    props: {
-    rowTitle: {
+      rowTitle: {
-      type: String,
+        type: String,
-      default: "",
+        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/components/preset.js

@@ -77,7 +77,7 @@ const presetRules = [
       "000": 1,
     },
   },
-]
+];
 
 const initialStates = [
   {
@@ -90,6 +90,6 @@ const initialStates = [
     name: "Random cell",
     description: "State populated with random cells",
   },
-]
+];
 
-export { presetRules, initialStates }
+export { presetRules, initialStates };

src/stores/index.js

@@ -35,25 +35,25 @@ export const globalStore = defineStore("globalStore", {
       draw2dLast: false,
       reset: false,
       canDraw: true,
-    }
+    };
   },
   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;

vue.config.js

@@ -1,13 +0,0 @@
-module.exports = {
-  configureWebpack: {
-    devServer: {
-      overlay: {
-        warnings: true,
-        errors: true,
-      },
-      watchOptions: {
-        ignored: [/node_modules/, /public/, /\.#/],
-      },
-    },
-  },
-};