From 2c69840d6f8322f537a9d2b9327ce187a5852f2c Mon Sep 17 00:00:00 2001
From: Gator <gator@ariona.fr>
Date: Sun, 4 Dec 2022 17:24:45 +0100
Subject: [PATCH] reset/stop to bottom

---
 src/App.vue                         |  3 +++
 src/components/Menu2dCA.vue         | 30 +++++-------------------
 src/components/MenuElementaryCA.vue |  9 +-------
 src/components/MenuReset.vue        | 36 +++++++++++++++++++++++++++++
 4 files changed, 46 insertions(+), 32 deletions(-)
 create mode 100644 src/components/MenuReset.vue

diff --git a/src/App.vue b/src/App.vue
index 76a6ee6..8a6ebf3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,17 +10,20 @@
       <MainMenu v-if="mainMenu || windowWidth >= 800" />
       <CanvasBoard />
     </div>
+    <MenuReset row-title="" />
   </div>
 </template>
 
 <script>
   import MainMenu from "./components/MainMenu.vue";
   import CanvasBoard from "./components/CanvasBoard.vue";
+  import MenuReset from "./components/MenuReset.vue";
 
   export default {
     name: "App",
     components: {
       MainMenu,
+      MenuReset,
       CanvasBoard,
     },
     data() {
diff --git a/src/components/Menu2dCA.vue b/src/components/Menu2dCA.vue
index 899c60e..8d83c94 100644
--- a/src/components/Menu2dCA.vue
+++ b/src/components/Menu2dCA.vue
@@ -1,30 +1,17 @@
 <template>
   <MenuRow row-title="2D Cellular Automata">
     <div class="form-field">
-      <label>Start from last result</label>
-      <input type="button" value="start" @click="toggleDraw2dLast()" />
-    </div>
-    <div class="form-field">
+      <label>Start from empty board</label>
       <input
         type="button"
         name="start2d"
         value="start"
         @click="toggleDraw2d()"
       />
-      <input
-        type="button"
-        name="stop"
-        class="stop"
-        value="stop"
-        @click="toggleStop()"
-      />
-      <input
-        type="button"
-        name="reset"
-        class="reset"
-        value="reset"
-        @click="toggleReset()"
-      />
+    </div>
+    <div class="form-field">
+      <label>Start from last result</label>
+      <input type="button" value="start" @click="toggleDraw2dLast()" />
     </div>
   </MenuRow>
 </template>
@@ -40,12 +27,7 @@
       MenuRow,
     },
     methods: {
-      ...mapActions(globalStore, [
-        "toggleDraw2d",
-        "toggleDraw2dLast",
-        "toggleReset",
-        "toggleStop",
-      ]),
+      ...mapActions(globalStore, ["toggleDraw2dLast", "toggleDraw2d"]),
     },
   };
 </script>
diff --git a/src/components/MenuElementaryCA.vue b/src/components/MenuElementaryCA.vue
index aeb7f08..58971ed 100644
--- a/src/components/MenuElementaryCA.vue
+++ b/src/components/MenuElementaryCA.vue
@@ -64,13 +64,6 @@
     </form>
     <div class="form-field">
       <input type="button" name="start" value="start" @click="toggleDraw1d()" />
-      <input
-        type="button"
-        name="reset"
-        class="reset"
-        value="reset"
-        @click="toggleReset"
-      />
     </div>
   </MenuRow>
 </template>
@@ -108,7 +101,7 @@
       },
     },
     methods: {
-      ...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]),
+      ...mapActions(globalStore, ["toggleDraw1d"]),
       copyRules() {
         const rules = JSON.stringify(this.rules);
         navigator.clipboard.writeText(rules);
diff --git a/src/components/MenuReset.vue b/src/components/MenuReset.vue
new file mode 100644
index 0000000..c43e8ce
--- /dev/null
+++ b/src/components/MenuReset.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="form-field">
+    <input
+      type="button"
+      name="stop"
+      class="stop"
+      value="stop"
+      @click="toggleStop()"
+    />
+    <input
+      type="button"
+      name="reset"
+      class="reset"
+      value="reset"
+      @click="toggleReset()"
+    />
+  </div>
+</template>
+<script>
+  import { mapActions } from "pinia";
+  import { globalStore } from "../stores/index.js";
+
+  export default {
+    name: "MenuReset",
+    methods: {
+      ...mapActions(globalStore, ["toggleReset", "toggleStop"]),
+    },
+  };
+</script>
+<style scoped>
+  .form-field {
+    display: flex;
+    margin: 0;
+    justify-content: flex-end;
+  }
+</style>