loop and next button for manual control

src/components/MenuReset.vue

@@ -1,5 +1,23 @@
 <template>
   <div class="form-field">
+    <div class="form-field">
+      <label>
+        Loop
+        <input
+          :value="loop"
+          type="checkbox"
+          :checked="loop"
+          @input="toggleLoop()"
+        />
+      </label>
+    </div>
+    <input
+      type="button"
+      name="next"
+      class="next"
+      value="Next"
+      @click="toggleNext()"
+    />
     <input
       type="button"
       name="stop"
@@ -17,13 +35,21 @@
   </div>
 </template>
 <script>
-  import { mapActions } from "pinia";
+  import { mapState, mapActions } from "pinia";
   import { globalStore } from "../stores/index.js";
 
   export default {
     name: "MenuReset",
+    computed: {
+      ...mapState(globalStore, ["loop"]),
+    },
     methods: {
-      ...mapActions(globalStore, ["toggleReset", "toggleStop"]),
+      ...mapActions(globalStore, [
+        "toggleReset",
+        "toggleStop",
+        "toggleLoop",
+        "toggleNext",
+      ]),
     },
   };
 </script>