restore route deletion

docs/.vuepress/components/Generator.vue

@@ -36,7 +36,7 @@
       </div>
       <div v-if="codes && codes.length > 0 && useStageLoader">
         <h3>Stage Loader</h3>
-        <StageLoader />
+        <StageLoader :fastCodes="stageLoaderCodes" />
       </div>
 
       <div v-if="codes && codes.length > 0" class="help">
@@ -153,10 +153,12 @@ export default {
       isLoading: true,
       codes: [],
       selectedCheats: [],
+      selectedStageLoader: null,
       inspectingCode: null,
       selectedVersion: null,
       selectedFormat: null,
       useStageLoader: false,
+      stageLoaderCodes: [],
       useStageLoaderOptions: [
         { value: false, label: "No" },
         { value: true, label: "Yes" }
@@ -169,6 +171,9 @@ export default {
       this.selectedCheats = [];
       const storedCodes = JSON.parse(localStorage.getItem("codes"));
       this.codes = storedCodes.find(c => c.identifier === e).cheats;
+      this.stageLoaderCodes = storedCodes.find(
+        c => c.identifier === e
+      ).fastCodes;
       this.inspectingCode = null;
     },
     onFormatChanged(e) {

docs/.vuepress/components/GroupSelectComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="select-wrapper">
-    <select @change="(e) => this.onChange(e.target.value)" autocomplete="off">
-      <option v-if="placeholder != null" selected disabled>
+    <select @change="onValueChanged" autocomplete="off" v-model="selectedValue">
+      <option v-if="placeholder != null" value="placeholder" selected disabled>
         {{
         placeholder
         }}
@@ -10,7 +10,7 @@
         <option
           v-for="option in optGroup.options"
           :value="option.value"
-          :selected="selectedValue && option.value === selectedValue"
+          :selected="selectedValue && option.value === selectedValue && !resetOnSelect"
         >{{ option.label }}</option>
       </optgroup>
     </select>
@@ -26,7 +26,14 @@ export default {
     onChange: { type: Function }
   },
   data() {
-    return {};
+    return {
+      generation: 2
+    };
+  },
+  methods: {
+    onValueChanged(e) {
+      this.onChange(e.target.value);
+    }
   }
 };
 </script>

docs/.vuepress/components/StageLoader.vue

@@ -2,31 +2,54 @@
   <div>
     <div class="config">
       <span>Remove Dialogue:</span>
-      <SelectComponent :options="removeDialogueOptions" :onChange="onRemoveDialogueChanged" />
+      <SelectComponent
+        :options="removeDialogueOptions"
+        :onChange="onRemoveDialogueSelectionChanged"
+        :selectedValue="removeDialogSelection"
+      />
     </div>
     <div class="config">
       <span>Skippable FMVs:</span>
-      <SelectComponent :options="skippableFMVsOptions" :onChange="onSkippableFMVsChanged" />
+      <SelectComponent
+        :options="skippableFMVsOptions"
+        :onChange="onSkippableFMVsSelectionChanged"
+        :selectedValue="skippableFMVsSelection"
+      />
     </div>
     <div class="config">
       <span>Level Order:</span>
-      <SelectComponent :options="levelOrderOptions" :onChange="onLevelOrderChanged" />
+      <SelectComponent
+        :options="levelOrderOptions"
+        :onChange="onLevelOrderSelectionChanged"
+        :selectedValue="levelOrderSelection"
+      />
     </div>
     <div class="config">
       <span>Post Game:</span>
-      <SelectComponent :options="postGameOptions" :onChange="onPostGameSelectionChanged" />
+      <SelectComponent
+        :options="postGameOptions"
+        :onChange="onPostGameSelectionChanged"
+        :selectedValue="postGameSelection"
+      />
     </div>
-    <div>
-      <ul id="route_levels">
-        <li draggable="false">
-          <!-- <div class="route_drag">&#8801;</div> -->
+    <div class="config">
+      <span>Route:</span>
+      <ul class="level-select">
+        <li v-for="(level, index) in selectedRoute">
+          <div class="route-drag">&#8801;</div>
+          <GroupSelectComponent
+            :selectedValue="level.value"
+            :optGroups="stageLoaderLevelOptions"
+            :onChange="e => onStageLoaderLevelChanged(index, e)"
+          />
+          <button @click="onLevelDeleted(index)" type="button" class="route-remove">&#215;</button>
+        </li>
         <GroupSelectComponent
           placeholder="Choose a level.."
           :optGroups="stageLoaderLevelOptions"
-            :onClick="onStageLoaderLevelSelected"
+          :onChange="onStageLoaderLevelSelected"
+          selectedValue="placeholder"
         />
-          <!-- <button type="button" class="route_remove">&#215;</button> -->
-        </li>
       </ul>
     </div>
     <div class="config">
@@ -37,6 +60,8 @@
         placeholder="Load a preset.."
         :optGroups="stageLoaderPresetOptions"
         :onChange="onStageLoaderPresetSelected"
+        :resetOnSelect="true"
+        selectedValue="placeholder"
       />
     </div>
   </div>
@@ -53,8 +78,12 @@ import stageLoaderLevels from "../data/stageLoaderLevels.json";
 import stageLoaderPresets from "../data/stageLoaderPresets.json";
 
 export default {
+  props: {
+    fastCodes: { type: Object }
+  },
   data() {
     return {
+      selectedRoute: [],
       stageLoaderLevelOptions: stageLoaderLevels,
       stageLoaderPresetOptions: stageLoaderPresets,
       removeDialogueOptions: [
@@ -85,26 +114,58 @@ export default {
     };
   },
   methods: {
-    onRemoveDialogueChanged(e) {
+    onRemoveDialogueSelectionChanged(e) {
       this.removeDialogSelection = e;
     },
-    onSkippableFMVsChanged(e) {
+    onSkippableFMVsSelectionChanged(e) {
       this.skippableFMVsSelection = e;
     },
-    onLevelOrderChanged(e) {
+    onLevelOrderSelectionChanged(e) {
       this.levelOrderSelection = e;
     },
     onPostGameSelectionChanged(e) {
       this.postGameSelection = e;
     },
     onStageLoaderLevelSelected(e) {
-      return;
+      this.selectedRoute.push({
+        value: e
+      });
+    },
+    onStageLoaderLevelChanged(index, e) {
+      this.selectedRoute[index] = {
+        value: e
+      };
+    },
+    onLevelDeleted(e) {
+      this.selectedRoute.splice(e, 1);
     },
     onStageLoaderPresetSelected(e) {
+      if (
+        this.selectedRoute?.length > 0 &&
+        !confirm("Loading a preset will erase your current list. Continue?")
+      ) {
         return;
+      }
+
+      const preset = e.split(";")[0];
+      const ending = e.split(";")[1];
+
+      const newRoute = [];
+
+      for (let i = 0; i <= preset.length - 4; i += 4)
+        newRoute.push({ value: preset.substr(i, 4) });
+
+      this.selectedRoute = newRoute;
+      this.postGameSelection = ending;
     },
     onClearList() {
+      if (
+        this.selectedRoute?.length > 0 &&
+        !confirm("Do you really want to clear the list?")
+      )
         return;
+
+      this.selectedRoute = [];
     }
   }
 };
@@ -117,7 +178,35 @@ export default {
   padding-left: 2px;
 }
 
+.config:not(:first-child) span {
+  margin-top: 10px;
+}
+
 .config select {
   width: 100%;
 }
+
+ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+ul li {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.route-drag {
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.route-remove {
+  margin-left: 3px;
+  background: transparent;
+  border: none;
+  font-size: 1.2rem;
+  color: red;
+  cursor: pointer;
+}
 </style>