i liked a global event bus better

drawing logic back into component
createBoard imperative version
2022-12-01 23:58:04 +01:00 · 2022-12-01 20:37:03 +01:00 · 2022-12-01 20:33:17 +01:00 · 2022-12-01 12:03:34 +01:00 · 2022-12-01 12:02:42 +01:00 · 2022-11-30 20:57:26 +01:00
26 changed files with 2224 additions and 35303 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,12 +1,25 @@
 module.exports = {
  env: {
    node: true, // remove
    es2021: true,
  },
  extends: [
    // add more generic rulesets here, such as:
-    'eslint:recommended',
+    "eslint:recommended",
-    //'plugin:vue/vue3-recommended',
+    "plugin:vue/vue3-essential",
-    'plugin:vue/recommended', // Use this if you are using Vue.js 2.x.
+    "plugin:vue/vue3-strongly-recommended",
    "plugin:vue/vue3-recommended",
    "prettier",
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
-  }
+    "vue/match-component-import-name": "warn",
-}
+    "vue/no-ref-object-destructure": "warn",
    "vue/no-required-prop-with-default": "warn",
    "vue/no-restricted-class": "warn",
    "vue/no-template-target-blank": "warn",
    "vue/no-this-in-before-route-enter": "warn",
    "vue/prefer-prop-type-boolean-first": "warn",
  },
 };
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1 @@
 {}
--- a/README.md
+++ b/README.md
@ -1,30 +1,37 @@
 # explorata
 Explore 1D and 2D cellular automata, with a few bells and whistles.
 ## Project setup
 ```
 npm install
 ```
 ### Compiles and hot-reloads for development
 ```
 npm run serve
 ```
 ### Compiles and minifies for production
 ```
 npm run build
 ```
 ### Lints and fixes files
 ```
 npm run lint
 ```
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
 ### References
 - https://natureofcode.com/book/chapter-7-cellular-automata/
 - https://en.wikipedia.org/wiki/Hashlife
 - https://plato.stanford.edu/entries/cellular-automata/supplement.html
--- a/babel.config.js
+++ b/babel.config.js
@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
+  presets: ["@vue/cli-plugin-babel/preset"],
-    '@vue/cli-plugin-babel/preset'
+};
  ],
 }
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,4 +1,4 @@
-version: '3.4'
+version: "3.4"
 services:
  explorata:
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,21 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="/favicon.ico" />
    <title>Explorata</title>
  </head>
  <body>
    <noscript>
      <strong>
        Althought you're right to browse the Web with Javascript disabled,
        Explorata doesn't work properly without it. Please enable Javascript to
        continue.
      </strong>
    </noscript>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,26 +3,24 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vite",
-    "build": "vue-cli-service build",
+    "build": "vite build",
-    "lint": "vue-cli-service lint"
+    "serve": "vite preview",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
    "format": "prettier .  --write"
  },
  "dependencies": {
-    "core-js": "^3.6.5",
+    "@vitejs/plugin-vue": "^3.2.0",
-    "vue": "^2.6.11",
+    "install": "^0.13.0",
-    "vuex": "^3.6.2"
+    "vite": "^3.2.4",
    "vue": "3.2",
    "vuex": "4.1"
  },
  "devDependencies": {
-    "@vue/cli": "^4.5.15",
+    "eslint": "^8.28.0",
-    "@vue/cli-service-global": "^4.5.15",
+    "eslint-config-prettier": "^8.5.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "eslint-plugin-vue": "^9.8.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "prettier": "2.8.0"
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
--- a/public/index.html
+++ b/public/index.html
@ -1,17 +0,0 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,71 +1,66 @@
 <template>
  <div id="main">
-    <h1
+    <h1 id="main-title">Cellular Automata Explorer</h1>
      id="main-title"
    >
      Cellular Automata Explorer
    </h1>
    <div id="container">
      <MainMenu />
-      <Canvas />
+      <CanvasBoard />
    </div>
  </div>
 </template>
 <script>
-import MainMenu from './components/MainMenu.vue'
+import MainMenu from "./components/MainMenu.vue";
-import Canvas from './components/Canvas.vue'
+import CanvasBoard from "./components/CanvasBoard.vue";
 export default {
-  name: 'App',
+  name: "App",
  components: {
    MainMenu,
-    Canvas
+    CanvasBoard,
-  }
+  },
-}
+};
 </script>
 <style>
 #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 {
-    background: black;
+  background: black;
-    color: white;
+  color: white;
-    font-family: Courier New;
+  font-family: Courier New;
 }
 canvas {
-    flex: auto;
+  flex: auto;
-    background: #110812;
+  background: #110812;
-    margin-right: 10px;
+  margin-right: 10px;
 }
-h1, h2 {
+h1,
-    font-weight: bold;
+h2 {
  font-weight: bold;
 }
 h1 {
-    margin : 10px auto;
+  margin: 10px auto;
-    font-size: larger;
+  font-size: larger;
-    text-align: center;
+  text-align: center;
 }
 #container {
-    display: flex;
+  display: flex;
-    height: calc(100vh - 100px);
+  height: calc(100vh - 100px);
-    overflow: hidden;
+  overflow: hidden;
 }
 </style>
--- a/src/assets/main.css
+++ b/src/assets/main.css
--- a/src/components/Canvas.vue
+++ b/src/components/Canvas.vue
@ -1,134 +0,0 @@
 <template>
  <main id="mainContent">
    <canvas
      id="canvas"
      ref="canvas"
      :width="canvasWidth"
      :height="canvasHeight"
    />
  </main>
 </template>
 <script>
 import { create1dState, create1dStateOneCell, create2dState, createBoard, conwayRules, evolve2d } from '../modules/automata.js'
 import { getRandomInt, sleep } from '../modules/common.js'
 import {mapGetters} from 'vuex'
 export default {
  name: 'Canvas',
  data() {
    return {
      canvas: null,
      ctx: null,
    }
  },
  computed: {
    ...mapGetters({
      cellProperties: 'getCellProperties',
      rules: 'get1dRules',
      drawing: 'isDrawing',
      canvasWidth: 'getCanvasWidth',
      canvasHeight: 'getCanvasHeight',
      refreshRate: 'getRefreshRate',
      initial1dState: 'getInitial1dState',
      drawingDirection: 'getDrawingDirection',
      lastBoard: 'getLastBoard'
    }),
    boardWidth: function() {
      return Math.floor(
        this.canvasWidth /
          this.cellProperties.size)
    },
    boardHeight: function() {
      return Math.floor(
        this.canvasHeight /
          this.cellProperties.size)
    }
  },
  mounted() {
    this.canvas = this.$refs['canvas']
    this.ctx = this.canvas.getContext('2d')
    this.$store.commit('setCanvasWidth', this.canvas.parentElement.clientWidth)
    this.$store.commit('setCanvasHeight', this.canvas.parentElement.clientHeight)
    this.$root.$on('draw1d', () => { this.draw1d() })
    this.$root.$on('draw2dNew', () => { this.draw2dNew() })
    this.$root.$on('draw2dLast', () => { this.draw2dLast() })
    this.$root.$on('reset', () => { this.reset() })
    this.$root.$on('stop', () => { this.stop() })
  },
  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])
    },
    async draw1d() {
      const initialState = this.compute1dInitialState()
      const board = createBoard(
        initialState,
        this.rules,
        this.boardWidth
      )
      this.$store.commit('setLastBoard', board)
      this.drawCanvas(board)
    },
    async draw2d(board) {
      if (this.drawing === 0) return
      const draw2dNext = async (b) => {
        if (this.drawing === 0) return
        const newBoard = evolve2d(b, conwayRules)
        this.drawCanvas(b, this.cellProperties)
        await sleep(this.refreshRate)
        draw2dNext(newBoard)
      }
      return draw2dNext(board)
    },
    async draw2dNew() {
      const initialState = create2dState(
        this.boardWidth,
        this.boardHeight,
        getRandomInt,
        [0, 2],
      );
      const board = evolve2d(initialState, conwayRules);
      this.$store.commit('setLastBoard', board)
      this.draw2d(board)
    },
    async draw2dLast() {
      console.log(this.lastBoard)
      this.draw2d(this.lastBoard)
    },
    stop() {
      this.$store.commit('setDrawingStatus', 0)
    },
    reset() {
      this.stop()
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    }
  }
 }
 </script>
 <style>
  #mainContent {
      min-width: 70%;
  }
 </style>
--- a/src/components/CanvasBoard.vue
+++ b/src/components/CanvasBoard.vue
@ -0,0 +1,146 @@
 <template>
  <main id="mainContent">
    <canvas
      id="canvas-board"
      ref="canvas-board"
      :width="canvasWidth"
      :height="canvasHeight"
    />
  </main>
 </template>
 <script>
 import {
  create1dState,
  create1dStateOneCell,
  create2dState,
  createBoard,
  conwayRules,
  evolve2d,
 } from "../modules/automata.js";
 import { getRandomInt, sleep } from "../modules/common.js";
 import { mapGetters } from "vuex";
 export default {
  name: "CanvasBoard",
  data() {
    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() {
      const initialState = create2dState(
        this.boardWidth,
        this.boardHeight,
        getRandomInt,
        [0, 2]
      );
      const board = evolve2d(initialState, conwayRules);
      this.$store.commit("setLastBoard", Object.freeze(board));
      this.draw2d(board);
    },
    async draw2dLast() {
      this.draw2d(this.lastBoard);
    },
    reset() {
      this.$store.dispatch("stop");
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.$store.commit("toggleReset", 0);
    },
  },
 };
 </script>
 <style>
 #mainContent {
  min-width: 70%;
 }
 </style>
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@ -8,29 +8,28 @@
 </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 {
-  name: 'MainMenu',
+  name: "MainMenu",
  components: {
    MenuCellProperties,
    MenuGeneralOptions,
    MenuElementaryCA,
-    Menu2dCA
+    Menu2dCA,
  },
-}
+};
 </script>
 <style>
 #sidebar {
-    width: 25%;
+  width: 25%;
-    padding: 0 10px;
+  padding: 0 10px;
-    overflow-y: scroll;
+  overflow-y: scroll;
 }
 /* Hide scrollbar for Chrome, Safari and Opera */
 #sidebar::-webkit-scrollbar {
  display: none;
@ -38,26 +37,26 @@ export default {
 /* Hide scrollbar for IE, Edge and Firefox */
 #sidebar {
-  -ms-overflow-style: none;  /* IE and Edge */
+  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  scrollbar-width: none; /* Firefox */
 }
@media screen and (max-width: 800px) {
-    #container {
+  #container {
-        display: flex;
+    display: flex;
-        flex-direction: column;
+    flex-direction: column;
-        justify-content: center;
+    justify-content: center;
-    }
+  }
-    #mainContent {
+  #mainContent {
-        flex: 1;
+    flex: 1;
-        width: 100%;
+    width: 100%;
-    }
+  }
-    #sidebar {
+  #sidebar {
-        flex: 1;
+    flex: 1;
-        padding: 0;
+    padding: 0;
-        width: 100%;
+    width: 100%;
-    }
+  }
 }
 </style>
--- a/src/components/Menu2dCA.vue
+++ b/src/components/Menu2dCA.vue
@ -2,65 +2,55 @@
  <MenuRow row-title="2D Cellular Automata">
    <div class="form-field">
      <label>Start from last result</label>
-      <input
+      <input type="button" value="start" @click="draw2dLast" />
        type="button"
        value="start"
        @click="startFromLast"
      >
    </div>
    <div class="form-field">
-      <input
+      <input type="button" name="start2d" value="start" @click="draw2d" />
        type="button"
        name="start2d"
        value="start"
        @click="draw2d"
      >
      <input
        type="button"
        name="stop"
        class="stop"
        value="stop"
        @click="stop"
-      >
+      />
      <input
        type="button"
        name="reset"
        class="reset"
        value="reset"
        @click="reset"
-      >
+      />
    </div>
  </MenuRow>
 </template>
 <script>
-import MenuRow from './MenuRow.vue'
+import MenuRow from "./MenuRow.vue";
-import {mapGetters} from 'vuex'
+import { mapGetters } from "vuex";
 export default {
-  name: 'Menu2dCA',
+  name: "Menu2dCA",
  components: {
-    MenuRow
+    MenuRow,
  },
  computed: {
    ...mapGetters({
-      lastBoard: 'getLastBoard',
+      lastBoard: "getLastBoard",
-    })
+    }),
  },
  methods: {
    draw2d() {
-      this.$root.$store.state.drawing = 1
+      this.$store.dispatch("draw2d");
-      this.$root.$emit('draw2dNew')
+    },
    draw2dLast() {
      this.$store.dispatch("draw2dLast");
    },
    reset() {
-      this.$root.$emit('reset')
+      this.$store.dispatch("reset");
    },
    stop() {
-      this.$root.$emit('stop')
+      this.$store.dispatch("stop");
    },
-    startFromLast() {
+  },
-      this.$root.$emit('draw2dLast')
+};
    }
  }
 }
 </script>
--- a/src/components/MenuCellProperties.vue
+++ b/src/components/MenuCellProperties.vue
@ -8,7 +8,7 @@
          type="color"
          @value="cellProperties.liveColor"
          @input="updateCellProperties"
-        >
+        />
      </div>
      <div class="form-field">
        <label for="dead">Dead cell color</label>
@ -17,7 +17,7 @@
          type="color"
          :value="cellProperties.deadColor"
          @input="updateCellProperties"
-        >
+        />
      </div>
      <div class="form-field">
        <label>Cell size</label>
@ -27,36 +27,36 @@
          min="1"
          :value="cellProperties.size"
          @input="updateCellProperties"
-        >
+        />
      </div>
    </form>
  </MenuRow>
 </template>
 <script>
-import MenuRow from './MenuRow.vue'
+import MenuRow from "./MenuRow.vue";
 export default {
-  name: 'MainMenu',
+  name: "MainMenu",
  components: {
-    MenuRow
+    MenuRow,
  },
  data() {
    return {
-      cellProperties: this.$store.state.cellProperties
+      cellProperties: this.$store.state.cellProperties,
-    }
+    };
  },
  methods: {
    getCellProperties(event) {
-      const elem = event.target
+      const elem = event.target;
-      const prop = this.$store.state.cellProperties
+      const prop = this.$store.state.cellProperties;
-      return prop[elem.name]
+      return prop[elem.name];
    },
    updateCellProperties(event) {
-      const elem = event.target
+      const elem = event.target;
-      const prop = {'name' : elem.name, 'value' : elem.value}
+      const prop = { name: elem.name, value: elem.value };
      //console.log(prop)
-      this.$store.commit('setCellProperties', prop)
+      this.$store.commit("setCellProperties", prop);
-    }
+    },
  },
-}
+};
 </script>
--- a/src/components/MenuElementaryCA.vue
+++ b/src/components/MenuElementaryCA.vue
@ -2,18 +2,20 @@
  <MenuRow row-title="Elementary Cellular Automata">
    <form>
      <div class="form-field">
-        <label>Initial state presets
+        <label>
-          <br>
+          Initial state presets
          <br />
          <select
-            name="initial1dStates"
+            name="initialStates"
-            value="initial1dStates"
+            :value="initialState"
-            @input="updateInitial1dState"
+            @input="updateInitialState"
          >
            <option
-              v-for="state in initial1dStates"
+              v-for="(state, index) in initialStates"
-              :key="'preset1d' + state.id"
+              :key="'initial-state-elementary' + index"
              :value="state.id"
-            >{{ state.name }}
+            >
              {{ state.name }}
            </option>
          </select>
        </label>
@ -22,149 +24,222 @@
        <label>Rules</label>
      </div>
      <div class="form-field">
-        <label>Rules presets
+        <label
-          <br>
+          >Rules presets
          <br />
          <select
-            name="rules1d"
+            name="ruleset-elementary"
-            value="rules"
+            :value="rules.name"
-            @input="update1dRules"
+            @input="updateRules"
          >
            <option
-              v-for="(rule, name) in presetRules"
+              v-for="(ruleset, index) in presetRules"
-              :key="'rule1d' + name"
+              :key="'ruleset-preset-elementary-' + index"
-              :value="name"
+              :value="ruleset.name"
-            >{{ name }}
+            >
              {{ ruleset.name }}
            </option>
          </select>
        </label>
      </div>
      <div class="form-field">
-        <a
+        <a style="cursor: pointer" @click="copyRules">copy rules</a>
          style="cursor: pointer;"
          @click="copy1dRules"
        >copy rules</a>
      </div>
      <div
-        v-for="(rule, name) in rules"
+        v-for="(rule, name, index) in rules.rules"
-        :key="'rule1d' + name"
+        :key="'rule-' + index"
        class="form-field"
      >
-        <label>{{ name }}
+        <label
          >{{ name }}
          <input
            :value="rule"
            type="checkbox"
            :name="name"
            :checked="rule"
-            @input="update1dSingleRule"
+            @input="updateSingleRule"
-          >
+          />
        </label>
      </div>
    </form>
    <div class="form-field">
-      <input
+      <input type="button" name="start" value="start" @click="draw1d" />
        type="button"
        name="start"
        value="start"
        @click="draw1d"
      >
      <input
        type="button"
        name="reset"
        class="reset"
        value="reset"
-        @click="reset()"
+        @click="reset"
-      >
+      />
    </div>
  </MenuRow>
 </template>
 <script>
-import {mapGetters} from 'vuex'
+import { mapGetters } from "vuex";
-import MenuRow from './MenuRow.vue'
+import MenuRow from "./MenuRow.vue";
 export default {
-  name: 'MenuElementaryCA',
+  name: "MenuElementaryCA",
  components: {
-    MenuRow
+    MenuRow,
  },
  data() {
    // TODO: Why not a getter in the store?
    return {
-      presetRules: {
+      presetRules: [
-        "rule 73" : {"100":0,"101":0,"110":1,"111":0,"011":1,"010":0,"001":0,"000":1},
+        {
-        "rule 86" : {"100":1,"101":0,"110":0,"111":1,"011":0,"010":1,"001":0,"000":1},
+          name: "rule 73",
-        "rule 90" : {"100":1,"101":0,"110":1,"111":0,"011":0,"010":0,"001":1,"000":0},
+          rules: {
-        "rule 45?" : {"100":0,"101":0,"110":1,"111":0,"011":1,"010":0,"001":1,"000":1},
+            100: 0,
-        "rule 54?" : {"100":1,"101":0,"110":1,"111":1,"011":0,"010":1,"001":1,"000":0},
+            101: 0,
-        "unknown rule" : {"100":0,"101":0,"110":0,"111":1,"011":0,"010":0,"001":1,"000":1}
+            110: 1,
-      },
+            111: 0,
-      initial1dStates: [
+            "011": 1,
-        { id : "onecell",
+            "010": 0,
-          name : "One cell at center",
+            "001": 0,
-          description : "State with a single cell in the middle",
+            "000": 1,
          },
        },
        {
-          id : "random",
+          name: "rule 86",
-          name : "Random cell",
+          rules: {
-          description : "State populated with random cells",
+            100: 1,
-        }
+            101: 0,
-      ]
+            110: 0,
-    }
+            111: 1,
            "011": 0,
            "010": 1,
            "001": 0,
            "000": 1,
          },
        },
        {
          name: "rule 90",
          rules: {
            100: 1,
            101: 0,
            110: 1,
            111: 0,
            "011": 0,
            "010": 0,
            "001": 1,
            "000": 0,
          },
        },
        {
          name: "rule 45?",
          rules: {
            100: 0,
            101: 0,
            110: 1,
            111: 0,
            "011": 1,
            "010": 0,
            "001": 1,
            "000": 1,
          },
        },
        {
          name: "rule 54?",
          rules: {
            100: 1,
            101: 0,
            110: 1,
            111: 1,
            "011": 0,
            "010": 1,
            "001": 1,
            "000": 0,
          },
        },
        {
          name: "unknown rule",
          rules: {
            100: 0,
            101: 0,
            110: 0,
            111: 1,
            "011": 0,
            "010": 0,
            "001": 1,
            "000": 1,
          },
        },
      ],
      initialStates: [
        {
          id: "onecell",
          name: "One cell at center",
          description: "State with a single cell in the middle",
        },
        {
          id: "random",
          name: "Random cell",
          description: "State populated with random cells",
        },
      ],
    };
  },
  computed: {
    ...mapGetters({
-      initial1dState: 'getInitial1dState',
+      initialState: "getInitial1dState",
-      rules: 'get1dRules'
+      rules: "get1dRules",
    }),
    rules1dFileName() {
-      return Object.keys(this.rules).map(
+      return (
-        (index) => {
+        Object.keys(this.rules)
-          return this.rules[index]
+          .map((index) => {
-        }).join("_") + ".json"
+            return this.rules[index];
          })
          .join("_") + ".json"
      );
    },
  },
  methods: {
-    copy1dRules(){
+    copyRules() {
-      const rules = JSON.stringify(this.rules)
+      const rules = JSON.stringify(this.rules);
-      navigator.clipboard.writeText(rules)
+      navigator.clipboard.writeText(rules);
    },
    isCurrentPreset(event) {
-      const elem = event.target
+      const elem = event.target;
-      return this.initialState === elem.value
+      return this.initialState === elem.value;
    },
-    update1dSingleRule(event) {
+    updateSingleRule(event) {
-      const elem = event.target
+      const elem = event.target;
-      const value = elem.checked ? 1 : 0
+      const value = elem.checked ? 1 : 0;
-      const data = { 'rule' : elem.name, 'value' : value}
+      const data = { rule: elem.name, value: value };
-      this.$store.commit('update1dSingleRule', data)
+      this.$store.commit("update1dSingleRule", data);
    },
-    update1dRules(event) {
+    updateRules(event) {
-      const elem = event.target
+      // TODO : change this, awfully confusing
-      const name = elem.value
+      const elem = event.target;
-      const rules = this.presetRules[name]
+      const name = elem.value;
-      Object.keys(rules).map((index) => {
+      const rules = this.presetRules.find((ruleset) => {
-        const data = { 'rule' : index, 'value' : rules[index]}
+        return ruleset.name === name;
-        this.$store.commit('update1dSingleRule', data)
+      });
-      })
+      Object.keys(rules.rules).map((value) => {
        const data = { name: name, rule: value, value: rules.rules[value] };
        this.$store.commit("update1dSingleRule", data);
      });
    },
-    updateInitial1dState(event) {
+    updateInitialState(event) {
-      const elem = event.target
+      const elem = event.target;
-      this.$store.commit('setInitial1dState', elem.value)
+      this.$store.commit("setInitial1dState", elem.value);
    },
    draw1d() {
-      this.$root.$store.state.drawing = 1
+      this.$store.dispatch("draw1d");
      this.$root.$emit('draw1d')
    },
    reset() {
-      this.$root.$emit('reset')
+      this.$store.dispatch("reset");
    },
-  }
+  },
-}
+};
 </script>
 <style>
-  .menu-row a {
+.menu-row a {
  color: white;
  font-weight: bold;
  text-decoration: none;
  font-size: small;
-  }
+}
 </style>
--- a/src/components/MenuGeneralOptions.vue
+++ b/src/components/MenuGeneralOptions.vue
@ -13,7 +13,7 @@
          step="10"
          :value="canvasWidth"
          @input="updateCanvasWidth"
-        >
+        />
      </div>
      <div class="form-field">
        <label>Height</label>
@ -24,7 +24,7 @@
          step="10"
          :value="canvasHeight"
          @input="updateCanvasHeight"
-        >
+        />
      </div>
      <div class="form-field">
        <label>Refresh Rate (ms)</label>
@ -38,57 +38,58 @@
          step="100"
          :value="refreshRate"
          @input="updateRefreshRate"
-        >
+        />
      </div>
      <div class="form-field">
-        <label>Invert Drawing Direction
+        <label
          >Invert Drawing Direction
          <input
            type="checkbox"
            :checked="drawingDirection === 'x'"
            :value="drawingDirection"
            @input="updateDrawingDirection"
-          >
+          />
        </label>
      </div>
-    </form>    
+    </form>
  </MenuRow>
 </template>
 <script>
-import MenuRow from './MenuRow.vue'
+import MenuRow from "./MenuRow.vue";
-import {mapGetters} from 'vuex'
+import { mapGetters } from "vuex";
 export default {
-  name: 'MenuGeneralOptions',
+  name: "MenuGeneralOptions",
  components: {
-    MenuRow
+    MenuRow,
  },
  computed: {
    ...mapGetters({
-      canvasWidth: 'getCanvasWidth',
+      canvasWidth: "getCanvasWidth",
-      canvasHeight: 'getCanvasHeight',
+      canvasHeight: "getCanvasHeight",
-      refreshRate: 'getRefreshRate',
+      refreshRate: "getRefreshRate",
-      drawingDirection: 'getDrawingDirection'
+      drawingDirection: "getDrawingDirection",
-    })
+    }),
  },
  methods: {
-    updateCanvasHeight: function(event) {
+    updateCanvasHeight: function (event) {
-      const elem = event.target
+      const elem = event.target;
-      this.$store.commit('setCanvasHeight', elem.value)
+      this.$store.commit("setCanvasHeight", elem.value);
    },
-    updateCanvasWidth: function(event) {
+    updateCanvasWidth: function (event) {
-      const elem = event.target
+      const elem = event.target;
-      this.$store.commit('setCanvasWidth', elem.value)
+      this.$store.commit("setCanvasWidth", elem.value);
    },
-    updateRefreshRate: function(event) {
+    updateRefreshRate: function (event) {
-      const elem = event.target
+      const elem = event.target;
-      this.$store.commit('setRefreshRate', elem.value)
+      this.$store.commit("setRefreshRate", elem.value);
    },
-    updateDrawingDirection: function(event) {
+    updateDrawingDirection: function (event) {
-      const elem = event.target
+      const elem = event.target;
-      const value = elem.checked ? "x" : "y"
+      const value = elem.checked ? "x" : "y";
-      this.$store.commit('setDrawingDirection', value)
+      this.$store.commit("setDrawingDirection", value);
-      console.log(this.drawingDirection)
+      console.log(this.drawingDirection);
-    }
+    },
-  }
+  },
-}
+};
 </script>
--- a/src/components/MenuRow.vue
+++ b/src/components/MenuRow.vue
@ -1,82 +1,75 @@
 <template>
  <div class="menu-row">
-    <h2
+    <h2 :id="rowTitle" @click="updateActiveMenu">
      :id="rowTitle"
      @click="updateActiveMenu"
    >
      {{ rowTitle }}
    </h2>
-    <div
+    <div v-if="activeMenu === rowTitle" class="menu-row-content">
      v-if="activeMenu === rowTitle"
      class="menu-row-content"
    >
      <slot />
    </div>
  </div>
 </template>
 <script>
-import {mapGetters} from 'vuex'
+import { mapGetters } from "vuex";
 export default {
-  name: 'MenuRow',
+  name: "MenuRow",
  props: {
    rowTitle: {
      type: String,
-      default : ''
+      default: "",
-    }
+    },
  },
  computed: {
    ...mapGetters({
-      activeMenu: 'getActiveMenu',
+      activeMenu: "getActiveMenu",
-    })
+    }),
  },
  methods: {
    updateActiveMenu(event) {
-      const elem = event.target
+      const elem = event.target;
-      const value = elem.id
+      const value = elem.id;
-      if (value == this.activeMenu)
+      if (value == this.activeMenu) this.$store.commit("setActiveMenu", "");
-        this.$store.commit('setActiveMenu', "")
+      else this.$store.commit("setActiveMenu", value);
      else
        this.$store.commit('setActiveMenu', value)
    },
-  }
+  },
-}
+};
 </script>
 <style>
 .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 {
-    margin-top: 10px;
+  margin-top: 10px;
-    padding: 5px;
+  padding: 5px;
 }
-  
+
 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 {
-    display: flex;
+  display: flex;
-    margin: 10px;
+  margin: 10px;
-    justify-content: space-between;
+  justify-content: space-between;
 }
 .menu-row {
-    flex: 1;
+  flex: 1;
 }
-label, .form-field label {
+label,
-    margin-right: 10px;
+.form-field label {
-    font-weight: bold;
+  margin-right: 10px;
  font-weight: bold;
 }
 </style>
--- a/src/main.js
+++ b/src/main.js
@ -1,10 +1,9 @@
-import Vue from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
-import store from './store'
+import { store } from "./store";
-Vue.config.productionTip = false
+const app = createApp(App);
-new Vue({
+app.use(store);
-  store,
+
-  render: h => h(App)
+app.mount("#app");
 }).$mount('#app')
--- a/src/modules/automata.js
+++ b/src/modules/automata.js
@ -1,7 +1,7 @@
 // handles negative index and index bigger than its array length
 function guard(index, array) {
-  if (index > (array.length - 1)) return 0;
+  if (index > array.length - 1) return 0;
-  if (index < 0) return (array.length - 1);
+  if (index < 0) return array.length - 1;
  return index;
 }
@ -12,25 +12,39 @@ function evolve1d(state, rules) {
    return state[safeIndex];
  }
  const newState = state.map((_, x) => {
-    const cells = [
+    const cells = [getCell(x - 1), getCell(x), getCell(x + 1)];
-      getCell(x - 1),
+    return rules[cells.join("")];
      getCell(x),
      getCell(x + 1)];
    return rules[cells.join('')];
  });
  return newState.map(Number);
 }
 // create a 2D board from a 1D CA initial state
 // function createBoard(state, rules, height) {
 //   function createBoardAcc(s, h, acc) {
 //     if (h === 0) return acc;
 //     const newState = evolve1d(s, rules);
 //     const newAcc = acc.concat([s]);
 //     return createBoardAcc(newState, h - 1, newAcc);
 //   }
 //   return createBoardAcc(state, height, []);
 // }
 // performance "choke point" in full imperative
 function createBoard(state, rules, height) {
-  function createBoardAcc(s, h, acc) {
+  var board = [];
-    if (h === 0) return acc;
+  let prevState = [];
-    const newState = evolve1d(s, rules);
+  for (let i = 0; i < height; i++) {
-    const newAcc = acc.concat([s]);
+    let nextState = [];
-    return createBoardAcc(newState, h - 1, newAcc);
+    if (i == 0) {
      nextState = evolve1d(state, rules);
    } else {
      nextState = evolve1d(prevState, rules);
    }
    board = board.concat([nextState]);
    prevState = nextState;
  }
-  return createBoardAcc(state, height, []);
+  return board;
 }
 // Find the neighbor of a given cell in a 2D CA board
@ -47,10 +61,14 @@ function getCellNeighbors(board, cellCoordinates) {
  // the current cell is not included in the result
  return [
-    getCell(x - 1, y - 1), getCell(x, y - 1),
+    getCell(x - 1, y - 1),
-    getCell(x + 1, y - 1), getCell(x - 1, y),
+    getCell(x, y - 1),
-    getCell(x + 1, y), getCell(x - 1, y + 1),
+    getCell(x + 1, y - 1),
-    getCell(x, y + 1), getCell(x + 1, y - 1),
+    getCell(x - 1, y),
    getCell(x + 1, y),
    getCell(x - 1, y + 1),
    getCell(x, y + 1),
    getCell(x + 1, y - 1),
  ];
 }
@ -75,58 +93,60 @@ function conwayRules(cell, neighbors) {
 // get the next evolution of a 2D CA initial state
 // Rules : Moore neighborhood
 function evolve2d(board, rulesFn) {
-  return board.map((row, x) => row.map((cell, y) => {
+  return board.map((row, x) =>
-    const neighbors = getCellNeighbors(board, [x, y]);
+    row.map((cell, y) => {
-    const sum = getNeighborsSum(neighbors);
+      const neighbors = getCellNeighbors(board, [x, y]);
-    return rulesFn(cell, sum);
+      const sum = getNeighborsSum(neighbors);
-  }));
+      return rulesFn(cell, sum);
    })
  );
 }
 function getDrawingValues(state, acc, cell) {
  const d = cell.dimension;
-  return Object.keys(state).map(
+  return Object.keys(state).map((key) => {
-    (key) => {
+    const fillStyle = (() => {
-      const fillStyle = (() => {
+      if (state[key] === "1") return cell.liveColor;
-        if (state[key] === '1') return cell.liveColor;
+      return cell.deadColor;
-        return cell.deadColor;
+    })();
      })();
-      return {
+    return {
-        move: [key * d, acc * d],
+      move: [key * d, acc * d],
-        fill: [key * d, acc * d, d, d],
+      fill: [key * d, acc * d, d, d],
-        fillStyle,
+      fillStyle,
-      };
+    };
-    },
+  });
  );
 }
 // Populates the first state with a single living cell in the center
 function create1dStateOneCell(width) {
-  return [...Array(width)].map(
+  return [...Array(width)].map((cell, index) => {
-    (cell, index) => {
+    if (index === width / 2 || index === width + 1 / 2) return 1;
-      if (index === width / 2 || index === width + 1 / 2) return 1
+    return 0;
-      return 0
+  });
    })
 }
 // Populates the first state of a 1D CA with cells returned
 // by initFn
 function create1dState(width, initFn, args) {
-  return [...Array(width)].map(
+  return [...Array(width)].map(() => initFn(...args));
    () => initFn(...args)
  );
 }
 // Populates the first state of a 2D CA with cells returned
 // by initFn
 function create2dState(width, height, initFn, args) {
-  return [...Array(height)].map(
+  return [...Array(height)].map(() =>
-    () => [...Array(width)].map(
+    [...Array(width)].map(() => initFn(...args))
      () => initFn(...args),
    ),
  );
 }
 export {
-  getDrawingValues, create1dState, create2dState, createBoard, create1dStateOneCell, conwayRules, evolve1d, evolve2d
+  getDrawingValues,
  create1dState,
  create2dState,
  createBoard,
  create1dStateOneCell,
  conwayRules,
  evolve1d,
  evolve2d,
 };
--- a/src/modules/main.js
+++ b/src/modules/main.js
@ -1,146 +0,0 @@
 import { getRandomInt, sleep } from './common.js';
 import {
  evolve2d, initialState1d, initialState2d, conwayRules, createBoard,
 } from './automata.js';
 let drawing = 1;
 const form = Array.from(document.forms.rules.elements);
 const canvas = document.querySelector('#canvas');
 const ctx = canvas.getContext('2d');
 const main = document.querySelector('#main');
 const dead = document.querySelector('#dead');
 const live = document.querySelector('#live');
 const cellSize = document.querySelector('#cellSize');
 const startBtn = document.querySelector('#start');
 const startBtn2d = document.querySelector('#start2d');
 const canvasRefreshBtn = document.querySelector('#canvasRefresh');
 const resetBtn = document.querySelectorAll('.reset');
 const stopBtn = document.querySelectorAll('.stop');
 // const loop = document.querySelector('#loop');
 const menuRow = document.querySelectorAll('.menu-row');
 const menuRowContent = document.querySelectorAll('.menu-row-content');
 function drawCanvas(board, props) {
  board.map((row, y) => {
    const d = props.size;
    return row.map(
      (cell, x) => {
        ctx.fillStyle = (
          () => {
            if (cell === 1) return props.liveColor;
            return props.deadColor;
          })();
        ctx.fillRect(x * d, y * d, d, d);
        return cell;
      },
    );
  });
 }
 function getRules() {
  const rules = {};
  form.reduce((_, i) => {
    if (i !== undefined
        && i.type === 'checkbox') {
      if (i.checked) rules[i.name] = '1';
      else rules[i.name] = '0';
    }
    return rules;
  }, rules);
  return rules;
 }
 function getCellProperties() {
  return {
    size: cellSize.value,
    liveColor: live.value,
    deadColor: dead.value,
  };
 }
 function reset() {
  drawing = 0;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
 }
 function resizeCanvas() {
  canvas.width = main.offsetWidth * 0.9;
  canvas.height = main.offsetHeight * 0.9;
 }
 async function draw1d() {
  const rules = getRules();
  const props = getCellProperties();
  const initialState = initialState1d(
    Math.floor(canvas.width / props.size),
    getRandomInt,
    [0, 2],
  );
  const board = createBoard(initialState, rules, Math.floor(canvas.height / props.size));
  drawCanvas(board, props);
 }
 async function draw2d() {
  const props = getCellProperties();
  const initialState = initialState2d(
    Math.floor(canvas.width / props.size),
    Math.floor(canvas.height / props.size),
    getRandomInt,
    [0, 2],
  );
  const board = evolve2d(initialState, conwayRules);
  async function draw2dNext(b) {
    if (drawing === 0) return;
    const newBoard = evolve2d(b, conwayRules);
    drawCanvas(b, props);
    await sleep(300);
    draw2dNext(newBoard);
  }
  return draw2dNext(board);
 }
 // Listeners
 startBtn.addEventListener('click', async () => {
  reset();
  await sleep(60);
  drawing = 1;
  draw1d();
 });
 startBtn2d.addEventListener('click', async () => {
  reset();
  await sleep(60);
  drawing = 1;
  draw2d();
 });
 resetBtn.forEach((elem) => {
  elem.addEventListener('click', async () => {
    reset();
  });
 });
 stopBtn.forEach((elem) => {
  elem.addEventListener('click', async () => {
    drawing = 0;
  });
 });
 canvasRefreshBtn.addEventListener('click', () => {
  const width = document.querySelector('#canvasWidth').value;
  const height = document.querySelector('#canvasWidth').value;
  canvas.width = width;
  canvas.height = height;
 });
--- a/src/store/index.js
+++ b/src/store/index.js
@ -1,106 +1,174 @@
-import Vue from 'vue'
+/* TODO: terminology is to be changed for : 
-import Vuex from 'vuex'
+canvas/board : 
 currently, the canvas object is named board, 
 while the structure used to store automata current state is named "board" as well. This is confusing
 drawing board could be enough to lift any ambiguity
-Vue.use(Vuex)
+rules:
 confusion bewteen ruleset and rules. 
 it's never clear if we refers to a rule or the whole (named) set
 */
 import { createStore } from "vuex";
-export default new Vuex.Store({
+export const store = createStore({
  strict: process.env.NODE_ENV !== "production",
  state: {
-    drawing: 0,
+    rules1d: {
-    rules1d : {
+      name: "rule 73",
-      "111" : 0,
+      rules: {
-      "110" : 1,
+        111: 0,
-      "101" : 0,
+        110: 1,
-      "100" : 0,
+        101: 0,
-      "011" : 1,
+        100: 0,
-      "010" : 0,
+        "011": 1,
-      "001" : 0,
+        "010": 0,
-      "000" : 1
+        "001": 0,
        "000": 1,
      },
    },
    cellProperties: {
      size: 3,
-      liveColor: '#000000',
+      liveColor: "#000000",
-      deadColor: '#F5F5F5',
+      deadColor: "#F5F5F5",
    },
    canvasWidth: 0,
    canvasHeight: 0,
    boardWidth: 0,
    boardHeight: 0,
    refreshRate: 300,
    initial1dState: "onecell",
    activeMenu: "",
    drawingDirection: "y",
-    lastBoard: {}
+    lastBoard: {},
    draw1d: false,
    draw2d: false,
    draw2dLast: false,
    reset: false,
    canDraw: true,
  },
  mutations: {
    update1dSingleRule(state, data) {
-      state.rules1d[data.rule] = data.value
+      state.rules1d.name = data.name;
      state.rules1d.rules[data.rule] = data.value;
    },
    update1dRules(state, data) {
-      state.rules1d = data
+      state.rules1d = data;
    },
    setCellProperties(state, data) {
-      state.cellProperties[data.name] = data.value
+      state.cellProperties[data.name] = data.value;
    },
    setDrawingStatus(state, data) {
      state.drawing = data
    },
    setCanvasWidth(state, data) {
-      state.canvasWidth = data
+      state.canvasWidth = data;
    },
    setCanvasHeight(state, data) {
-      state.canvasHeight = data
+      state.canvasHeight = data;
    },
    setRefreshRate(state, data) {
-      state.refreshRate = data
+      state.refreshRate = data;
    },
    setInitial1dState(state, data) {
-      state.initial1dState = data
+      state.initial1dState = data;
    },
    setActiveMenu(state, data) {
-      state.activeMenu = data
+      state.activeMenu = data;
    },
    setDrawingDirection(state, data) {
-      state.drawingDirection = data
+      state.drawingDirection = data;
    },
    setLastBoard(state, data) {
-      state.lastBoard = data
+      state.lastBoard = data;
    },
    setCanvas(state, data) {
      state.canvas = data;
    },
    setContext(state, data) {
      state.ctx = data;
    },
    toggleDraw1d(state, data) {
      state.draw1d = data;
    },
    toggleDraw2d(state, data) {
      state.draw2d = data;
    },
    toggleDraw2dLast(state, data) {
      state.draw2dLast = data;
    },
    toggleReset(state, data) {
      state.reset = data;
    },
    canDraw(state, data) {
      state.canDraw = data;
    },
  },
  getters: {
    getCellProperties(state) {
-      return state.cellProperties
+      return state.cellProperties;
    },
    get1dRules(state) {
-      return state.rules1d
+      return state.rules1d;
    },
    getRule1d(state) {
-      return (rule) => state.rules1d[rule]
+      return state.rules1d;
    },
    isDrawing(state) {
      return state.drawing
    },
    getCanvasWidth(state) {
-      return state.canvasWidth
+      return state.canvasWidth;
    },
    getCanvasHeight(state) {
-      return state.canvasHeight
+      return state.canvasHeight;
    },
    getRefreshRate(state) {
-      return state.refreshRate
+      return state.refreshRate;
    },
    getInitial1dState(state) {
-      return state.initial1dState
+      return state.initial1dState;
    },
    getActiveMenu(state) {
-      return state.activeMenu
+      return state.activeMenu;
    },
    getDrawingDirection(state) {
-      return state.drawingDirection
+      return state.drawingDirection;
    },
    getLastBoard(state) {
-      return state.lastBoard
+      return state.lastBoard;
-    }
+    },
    getDraw1d(state) {
      return state.draw1d;
    },
    getDraw2d(state) {
      return state.draw2d;
    },
    getDraw2dLast(state) {
      return state.draw2dLast;
    },
    getReset(state) {
      return state.reset;
    },
    getCanDraw(state) {
      return state.canDraw;
    },
  },
  actions: {
    draw1d({ commit }) {
      commit("toggleDraw1d", true);
    },
    draw2d({ commit }) {
      commit("canDraw", true);
      commit("toggleDraw2d", true);
    },
    draw2dLast({ commit }) {
      commit("canDraw", true);
      commit("toggleDraw2dLast", true);
    },
    reset({ dispatch, commit }) {
      dispatch("stop");
      commit("toggleReset", true);
    },
    stop({ commit }) {
      commit("toggleDraw1d", false);
      commit("toggleDraw2d", false);
      commit("toggleDraw2dLast", false);
      commit("canDraw", false);
    },
  },
-  modules: {
+  modules: {},
-  }
+});
 })
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,16 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 const path = require("path");
 export default defineConfig({
  plugins: [vue()],
  server: {
    host: "127.0.0.1",
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
 });
--- a/vue.config.js
+++ b/vue.config.js
@ -3,11 +3,11 @@ module.exports = {
    devServer: {
      overlay: {
        warnings: true,
-        errors: true
+        errors: true,
      },
      watchOptions: {
        ignored: [/node_modules/, /public/, /\.#/],
-      }
+      },
-    }
+    },
-  }
+  },
-}
+};
Author	SHA1	Message	Date
Gator	aa66c523a3	i liked a global event bus better	2022-12-01 23:58:04 +01:00
Gator	9b39bba6e7	drawing logic back into component	2022-12-01 20:37:03 +01:00
Gator	d0802d850b	createBoard imperative version	2022-12-01 20:33:17 +01:00
Gator	aace63b1a2	wip moved canvas routine in store. it's awful	2022-12-01 12:03:34 +01:00
Gator	999f6d1899	more eslint rules (some not included in recommended)	2022-12-01 12:02:42 +01:00
Gator	454befaa24	renamed canvas component (again) and fixed some issues	2022-11-30 20:57:26 +01:00
Gator	20434ab52a	new global api for vue and vuex	2022-11-30 19:37:35 +01:00
Gator	d201a73ede	linting and formating. renamed canvas component	2022-11-29 17:31:01 +01:00
Gator	ceee7f13d7	updated dependencies for vue 3 and vite Updated vue and vuex to vue 3 and vuex 4 Replaced vue-cli with vite Removing a whole bunch of dependencies in the process	2022-11-29 17:23:37 +01:00