From 89412a224c5bb7328f564c1c4c7f08d5a4c7d306 Mon Sep 17 00:00:00 2001
From: Matteias Collet <matteias.collet@bluewin.ch>
Date: Sun, 28 Jun 2020 00:35:46 +0200
Subject: [PATCH] add optgroup component

---
 docs/.vuepress/components/Generator.vue       |   2 +-
 .../components/GroupSelectComponent.vue       |  85 +++++++
 docs/.vuepress/components/StageLoader.vue     | 230 +++---------------
 docs/.vuepress/data/stageLoaderLevels.json    | 163 +++++++++++++
 docs/.vuepress/data/stageLoaderPresets.json   | 105 ++++++++
 5 files changed, 384 insertions(+), 201 deletions(-)
 create mode 100644 docs/.vuepress/components/GroupSelectComponent.vue
 create mode 100644 docs/.vuepress/data/stageLoaderLevels.json
 create mode 100644 docs/.vuepress/data/stageLoaderPresets.json

diff --git a/docs/.vuepress/components/Generator.vue b/docs/.vuepress/components/Generator.vue
index 3109b99..953e9df 100644
--- a/docs/.vuepress/components/Generator.vue
+++ b/docs/.vuepress/components/Generator.vue
@@ -175,7 +175,7 @@ export default {
       this.selectedFormat = e;
     },
     onStageLoaderChanged(e) {
-      this.useStageLoader = e;
+      this.useStageLoader = e === true || e === "true";
     },
     onCheatSelectionChanged(e) {
       this.selectedCheats = e;
diff --git a/docs/.vuepress/components/GroupSelectComponent.vue b/docs/.vuepress/components/GroupSelectComponent.vue
new file mode 100644
index 0000000..0cf3f30
--- /dev/null
+++ b/docs/.vuepress/components/GroupSelectComponent.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="select-wrapper">
+    <select @change="(e) => this.onChange(e.target.value)" autocomplete="off">
+      <option v-if="placeholder != null" selected disabled>
+        {{
+        placeholder
+        }}
+      </option>
+      <optgroup v-for="optGroup in optGroups" :label="optGroup.label">
+        <option
+          v-for="option in optGroup.options"
+          :value="option.value"
+          :selected="selectedValue && option.value === selectedValue"
+        >{{ option.label }}</option>
+      </optgroup>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    selectedValue: { type: String },
+    placeholder: { type: String },
+    optGroups: { type: Array },
+    onChange: { type: Function }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style scoped>
+.select-wrapper {
+  position: relative;
+  display: inline-block;
+  max-width: 400px;
+  min-width: 180px;
+  margin: 0 auto;
+  background-color: #3eaf7c;
+  z-index: 10;
+}
+
+select {
+  border: none;
+  outline: none;
+  background: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 0;
+  margin: 0;
+  display: block;
+  width: 100%;
+  padding: 6px 55px 6px 15px;
+  font-size: 14px;
+  color: white;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.select-wrapper:hover {
+  background-color: #47c38b;
+}
+
+select option,
+select optgroup {
+  color: black;
+  font-weight: normal;
+}
+
+.select-wrapper:after {
+  position: absolute;
+  right: 2px;
+  top: 2px;
+  width: 50px;
+  height: 100%;
+  content: "\25BC";
+  text-align: center;
+  color: white;
+  font-size: 18px;
+  z-index: -1;
+}
+</style>
diff --git a/docs/.vuepress/components/StageLoader.vue b/docs/.vuepress/components/StageLoader.vue
index 187e73e..b5ccde5 100644
--- a/docs/.vuepress/components/StageLoader.vue
+++ b/docs/.vuepress/components/StageLoader.vue
@@ -19,220 +19,44 @@
     <div>
       <ul id="route_levels">
         <li draggable="false">
-          <div class="route_drag">&#8801;</div>
-          <select>
-            <option value="0F00" selected disabled>Select a level…</option>
-            <optgroup label="Delfino Plaza">
-              <option value="01FF">Plaza - Current</option>
-              <option value="0100">Plaza - Bianco unlock</option>
-              <option value="0101">Plaza - Peach chase</option>
-              <option value="0105">Plaza - Ricco/Gelato unlocks</option>
-              <option value="0106">Plaza - Peaceful</option>
-              <option value="0107">Plaza - Pinna unlock</option>
-              <option value="0108">Plaza - Yoshi/nozzles unlocks</option>
-              <option value="0109">Plaza - Flooded</option>
-              <option value="0102">Plaza - Post-Corona</option>
-            </optgroup>
-            <optgroup label="Delfino Plaza sublevels">
-              <option value="0000">Airstrip</option>
-              <option value="1400">Airstrip (red coins)</option>
-              <option value="1500">Slide</option>
-              <option value="1600">Pachinko</option>
-              <option value="1700">Grass pipe</option>
-              <option value="1800">Lily Pad Ride</option>
-              <option value="1D00">Jail secret</option>
-            </optgroup>
-            <optgroup label="Bianco Hills">
-              <option value="0200">Bianco 1</option>
-              <option value="0201">Bianco 2</option>
-              <option value="0202">Bianco 3</option>
-              <option value="0203">Bianco 4</option>
-              <option value="0204">Bianco 5</option>
-              <option value="0205">Bianco 6</option>
-              <option value="0206">Bianco 7</option>
-              <option value="0207">Bianco 8</option>
-            </optgroup>
-            <optgroup label="Ricco Harbor">
-              <option value="0300">Ricco 1</option>
-              <option value="0301">Ricco 2</option>
-              <option value="0302">Ricco 3</option>
-              <option value="0303">Ricco 4</option>
-              <option value="0304">Ricco 5</option>
-              <option value="0305">Ricco 6</option>
-              <option value="0306">Ricco 7</option>
-              <option value="0307">Ricco 8</option>
-            </optgroup>
-            <optgroup label="Gelato Beach">
-              <option value="0400">Gelato 1</option>
-              <option value="0401">Gelato 2</option>
-              <option value="0402">Gelato 3</option>
-              <option value="0403">Gelato 4</option>
-              <option value="0404">Gelato 5</option>
-              <option value="0405">Gelato 6</option>
-              <option value="0406">Gelato 7</option>
-              <option value="0407">Gelato 8</option>
-            </optgroup>
-            <optgroup label="Pinna Park">
-              <option value="0500">Pinna 1</option>
-              <option value="0501">Pinna 2</option>
-              <option value="0502">Pinna 3</option>
-              <option value="0503">Pinna 4</option>
-              <option value="0504">Pinna 5</option>
-              <option value="0505">Pinna 6</option>
-              <option value="0506">Pinna 7</option>
-              <option value="0507">Pinna 8</option>
-            </optgroup>
-            <optgroup label="Sirena Beach">
-              <option value="0600">Sirena 1</option>
-              <option value="0601">Sirena 2</option>
-              <option value="0602">Sirena 3</option>
-              <option value="0603">Sirena 4</option>
-              <option value="0604">Sirena 5</option>
-              <option value="0605">Sirena 6</option>
-              <option value="0606">Sirena 7</option>
-              <option value="0607">Sirena 8</option>
-            </optgroup>
-            <optgroup label="Noki Bay">
-              <option value="0900">Noki 1</option>
-              <option value="0901">Noki 2</option>
-              <option value="0902">Noki 3</option>
-              <option value="0903">Noki 4</option>
-              <option value="0904">Noki 5</option>
-              <option value="0905">Noki 6</option>
-              <option value="0906">Noki 7</option>
-              <option value="0907">Noki 8</option>
-            </optgroup>
-            <optgroup label="Pianta Village">
-              <option value="0800">Pianta 1</option>
-              <option value="0801">Pianta 2</option>
-              <option value="0802">Pianta 3</option>
-              <option value="0803">Pianta 4</option>
-              <option value="0804">Pianta 5</option>
-              <option value="0805">Pianta 6</option>
-              <option value="0806">Pianta 7</option>
-              <option value="0807">Pianta 8</option>
-            </optgroup>
-            <optgroup label="Secret areas">
-              <option value="2F00">Bianco 3 secret</option>
-              <option value="2E00">Bianco 6 secret</option>
-              <option value="3000">Ricco 4 secret</option>
-              <option value="2000">Gelato 1 secret</option>
-              <option value="3200">Pinna 2 secret</option>
-              <option value="2900">Pinna 6 secret</option>
-              <option value="3300">Sirena 2 secret</option>
-              <option value="2800">Sirena 4 secret</option>
-              <option value="1F00">Noki 6 secret</option>
-              <option value="2A00">Pianta 5 secret</option>
-            </optgroup>
-            <optgroup label="Sublevels">
-              <option value="3700">Petey Piranha fight (Bianco 2)</option>
-              <option value="3B00">Gooper Blooper fight (Ricco 1)</option>
-              <option value="1E00">Race course (Ricco 2)</option>
-              <option value="2100">Sand bird (Gelato 4)</option>
-              <option value="3A01">Mecha-Bowser fight (Pinna 1)</option>
-              <option value="3A00">Rollercoaster (Pinna 8)</option>
-              <option value="0E00">Casino Delfino (Sirena 4)</option>
-              <option value="0E01">Casino Delfino (Sirena 5)</option>
-              <option value="3800">King Boo fight (Sirena 5)</option>
-              <option value="2C00">Bottle (Noki 3)</option>
-              <option value="3900">Deep Sea of Mare (Noki 4)</option>
-              <option value="1000">Deep Sea of Mare (Noki 8)</option>
-            </optgroup>
-            <optgroup label="Miscellaneous">
-              <option value="02FF">Bianco episode selection</option>
-              <option value="03FF">Ricco episode selection</option>
-              <option value="04FF">Gelato episode selection</option>
-              <option value="05FF">Pinna episode selection</option>
-              <option value="06FF">Sirena episode selection</option>
-              <option value="09FF">Noki episode selection</option>
-              <option value="08FF">Pianta episode selection</option>
-            </optgroup>
-          </select>
-          <button type="button" class="route_remove">&#215;</button>
+          <!-- <div class="route_drag">&#8801;</div> -->
+          <GroupSelectComponent
+            placeholder="Choose a level.."
+            :optGroups="stageLoaderLevelOptions"
+            :onClick="onStageLoaderLevelSelected"
+          />
+          <!-- <button type="button" class="route_remove">&#215;</button> -->
         </li>
       </ul>
     </div>
-    <div class="config row">
-      <div class="config">
-        <ButtonComponent label="Clear List" :onClick="onClearList" />
-      </div>
-      <div>
-        <button id="route_clear" type="button">Clear List</button>
-      </div>
-      <div>
-        <select id="route_presets">
-          <option value selected>Load a preset…</option>
-          <optgroup label="Full-game categories, minimal plaza">
-            <option
-              value="020002020203020404000406080008010802080308040805080605000501050205030502050603000301030203030304030503060205020606000601060206030604060506060900090109020903090409050906;3400"
-            >Fast Any% usual route</option>
-            <option
-              value="020002020203020404000406080008010802080308040805080605000501050205030502050602050206060006010602060306040605060609000901090209030904090509060300030103020303030403050306;3400"
-            >Fast Any% Ricco late</option>
-            <option
-              value="020002020203020408000801080208030804080508060500050105020503050405050506030003010302030303040305030602050206060006010602060306040605060609000901090209030904090509060400040104020403040404050406;3400"
-            >Fast Any% No Major Skips</option>
-            <option
-              value="02000201020202030800080108020803080408050806080705000501050205030504050505060507030003010302030303040305030603070204020502060207060006010602060306040605060606070900090109020903090409050906090704000401040204030404040304050406;3400"
-            >Fast 58 Shines / All Episodes</option>
-            <option
-              value="02000201020202020800080108020803080408040804080508060807080705000501050105020503050405040505050505060507030003010301030203030303030403050305030603070203020402050205020502060207060006010601060206030603060306040605060606070900090109010901090209030904090509050906090704000400040004010402040304050404040304020406;3400"
-            >Fast 79 Shines / All Level Shines</option>
-            <option
-              value="020002020203020404000406080008010802080308040805080605000501050105020503050405050506030003010302030303040305030602050206060006010602060306040605060609000901090209030904090509060102160001021400010201021D00010201020102010201020102010204060405040404030402040204010400040015000207020502070205020003020307030303010507050705051700060706030603060109070905090109010807080708040804;3400"
-            >Fast 96 Shines / All Shines, No Blues</option>
-          </optgroup>
-          <optgroup label="Full-game categories">
-            <option
-              value="00000100020002020105020302040105040004060106080008010802080308040805080601070108050005010502050305020506010803000301030203030304030503060108020502060108060006010602060306040605060601080900090109020903090409050906;0109"
-            >Any% usual route</option>
-            <option
-              value="00000100020002020105020302040105080008010802080308040805080601070108050005010502050305040505050601080300030103020303030403050306010802050206010806000601060206030604060506060108090009010902090309040905090601080400040104020403040404050406;0109"
-            >Any% No Major Skips</option>
-            <option
-              value="0000010002000201010502020203010508000801080208030804080508060807010701080500050105020503050405050506050701080300030103020303030403050306030701080204020502060207010806000601060206030604060506060607010809000901090209030904090509060907010804000401040204030404040304050406;0109"
-            >58 Shines / All Episodes</option>
-            <option
-              value="0000010002000201010502020202010508000801080208030804080408040805080608070807010701080500050105010502050305040504050505050506050701080300030103010302030303030304030503050306030701080203020402050205020502060207010806000601060106020603060306030604060506060607010809000901090109010902090309040905090509060907010804000400040004010402040304050404040304020406;0109"
-            >79 Shines / All Level Shines</option>
-            <option
-              value="0000010002000202010502030204010504000406010608000801080208030804080508060107010805000501050105020503050405050506010803000301030203030304030503060108020502060108010806000601060206030604060506060108090009010902090309040905090601FF0102010201020102010201020102010201020102010201020102010204060405040404030402040204010400040001020102020702050207020502000102030203070303030101020507050705050102010206070603060306010102090709050901090101020807080708040804;0102"
-            >96 Shines / All Shines, No Blues</option>
-            <option
-              value="0000010002000202010502030204010504000406010608000801080208030804080508060107010805000501050105020503050405050506010803000301030203030304030503060108020502060108010806000601060206030604060506060108090009010902090309040905090601FF01020102010201020102010201020102010201020102010201020404040304020405040004000401040204050102010202000207020702070207010209010905090509070102080408040807080701020505050705070102010206010603060606070102010203010303030703070102;0102"
-            >120 Shines / All Shines, All Blues</option>
-          </optgroup>
-          <optgroup label="Individual Worlds">
-            <option value="020002020203020402050206">Bianco Hills</option>
-            <option value="0300030103020303030403050306">Ricco Harbor</option>
-            <option value="0400040104020403040404050406">Gelato Beach</option>
-            <option value="050005010502050305020506">Pinna Park</option>
-            <option value="0600060106020603060406050606">Sirena Beach</option>
-            <option value="0900090109020903090409050906">Noki Bay</option>
-            <option value="0800080108020803080408050806">Pianta Village</option>
-          </optgroup>
-          <optgroup label="All Shines IWs">
-            <option value="02000201020202020203020402050205020502060207">Bianco Hills</option>
-            <option value="03000301030103020303030303040305030503060307">Ricco Harbor</option>
-            <option value="04000406040404060401040504000400040204020403">Gelato Beach</option>
-            <option value="05000501050105020503050405040505050505060507">Pinna Park</option>
-            <option value="06000601060106020603060306030604060506060607">Sirena Beach</option>
-            <option value="09000901090109020903090409050905090609060907">Noki Bay</option>
-            <option value="08000801080208030804080408040805080608070807">Pianta Village</option>
-          </optgroup>
-        </select>
-      </div>
+    <div class="config">
+      <ButtonComponent label="Clear List" :onClick="onClearList" />
+    </div>
+    <div>
+      <GroupSelectComponent
+        placeholder="Load a preset.."
+        :optGroups="stageLoaderPresetOptions"
+        :onChange="onStageLoaderPresetSelected"
+      />
     </div>
   </div>
 </template>
 
 <script>
+// Components
 import SelectComponent from "./SelectComponent";
 import ButtonComponent from "./ButtonComponent";
+import GroupSelectComponent from "./GroupSelectComponent";
+
+// Data
+import stageLoaderLevels from "../data/stageLoaderLevels.json";
+import stageLoaderPresets from "../data/stageLoaderPresets.json";
 
 export default {
   data() {
     return {
+      stageLoaderLevelOptions: stageLoaderLevels,
+      stageLoaderPresetOptions: stageLoaderPresets,
       removeDialogueOptions: [
         { value: "yes", label: "Always" },
         { value: "pv5", label: "Not in Pinna 5" },
@@ -273,6 +97,12 @@ export default {
     onPostGameSelectionChanged(e) {
       this.postGameSelection = e;
     },
+    onStageLoaderLevelSelected(e) {
+      return;
+    },
+    onStageLoaderPresetSelected(e) {
+      return;
+    },
     onClearList() {
       return;
     }
diff --git a/docs/.vuepress/data/stageLoaderLevels.json b/docs/.vuepress/data/stageLoaderLevels.json
new file mode 100644
index 0000000..0774c79
--- /dev/null
+++ b/docs/.vuepress/data/stageLoaderLevels.json
@@ -0,0 +1,163 @@
+[
+  {
+    "label": "Delfino Plaza",
+    "options": [
+      { "value": "01FF", "label": "Plaza - Current" },
+      { "value": "0100", "label": "Plaza - Bianco unlock" },
+      { "value": "0101", "label": "Plaza - Peach chase" },
+      { "value": "0105", "label": "Plaza - Ricco/Gelato unlocks" },
+      { "value": "0106", "label": "Plaza - Peaceful" },
+      { "value": "0107", "label": "Plaza - Pinna unlock" },
+      { "value": "0108", "label": "Plaza - Yoshi/nozzles unlocks" },
+      { "value": "0109", "label": "Plaza - Flooded" },
+      { "value": "0102", "label": "Plaza - Post-Corona" }
+    ]
+  },
+  {
+    "label": "Delfino Plaza sublevels",
+    "options": [
+      { "value": "0000", "label": "Airstrip" },
+      { "value": "1400", "label": "Airstrip (red coins)" },
+      { "value": "1500", "label": "Slide" },
+      { "value": "1600", "label": "Pachinko" },
+      { "value": "1700", "label": "Grass pipe" },
+      { "value": "1800", "label": "Lily Pad Ride" },
+      { "value": "1D00", "label": "Jail secret" }
+    ]
+  },
+  {
+    "label": "Bianco Hills",
+    "options": [
+      { "value": "0200", "label": "Bianco 1" },
+      { "value": "0201", "label": "Bianco 2" },
+      { "value": "0202", "label": "Bianco 3" },
+      { "value": "0203", "label": "Bianco 4" },
+      { "value": "0204", "label": "Bianco 5" },
+      { "value": "0205", "label": "Bianco 6" },
+      { "value": "0206", "label": "Bianco 7" },
+      { "value": "0207", "label": "Bianco 8" }
+    ]
+  },
+  {
+    "label": "Ricco Harbor",
+    "options": [
+      { "value": "0300", "label": "Ricco 1" },
+      { "value": "0301", "label": "Ricco 2" },
+      { "value": "0302", "label": "Ricco 3" },
+      { "value": "0303", "label": "Ricco 4" },
+      { "value": "0304", "label": "Ricco 5" },
+      { "value": "0305", "label": "Ricco 6" },
+      { "value": "0306", "label": "Ricco 7" },
+      { "value": "0307", "label": "Ricco 8" }
+    ]
+  },
+  {
+    "label": "Gelato Beach",
+    "options": [
+      { "value": "0400", "label": "Gelato 1" },
+      { "value": "0401", "label": "Gelato 2" },
+      { "value": "0402", "label": "Gelato 3" },
+      { "value": "0403", "label": "Gelato 4" },
+      { "value": "0404", "label": "Gelato 5" },
+      { "value": "0405", "label": "Gelato 6" },
+      { "value": "0406", "label": "Gelato 7" },
+      { "value": "0407", "label": "Gelato 8" }
+    ]
+  },
+  {
+    "label": "Pinna Park",
+    "options": [
+      { "value": "0500", "label": "Pinna 1" },
+      { "value": "0501", "label": "Pinna 2" },
+      { "value": "0502", "label": "Pinna 3" },
+      { "value": "0503", "label": "Pinna 4" },
+      { "value": "0504", "label": "Pinna 5" },
+      { "value": "0505", "label": "Pinna 6" },
+      { "value": "0506", "label": "Pinna 7" },
+      { "value": "0507", "label": "Pinna 8" }
+    ]
+  },
+  {
+    "label": "Sirena Beach",
+    "options": [
+      { "value": "0600", "label": "Sirena 1" },
+      { "value": "0601", "label": "Sirena 2" },
+      { "value": "0602", "label": "Sirena 3" },
+      { "value": "0603", "label": "Sirena 4" },
+      { "value": "0604", "label": "Sirena 5" },
+      { "value": "0605", "label": "Sirena 6" },
+      { "value": "0606", "label": "Sirena 7" },
+      { "value": "0607", "label": "Sirena 8" }
+    ]
+  },
+  {
+    "label": "Noki Bay",
+    "options": [
+      { "value": "0900", "label": "Noki 1" },
+      { "value": "0901", "label": "Noki 2" },
+      { "value": "0902", "label": "Noki 3" },
+      { "value": "0903", "label": "Noki 4" },
+      { "value": "0904", "label": "Noki 5" },
+      { "value": "0905", "label": "Noki 6" },
+      { "value": "0906", "label": "Noki 7" },
+      { "value": "0907", "label": "Noki 8" }
+    ]
+  },
+  {
+    "label": "Pianta Village",
+    "options": [
+      { "value": "0800", "label": "Pianta 1" },
+      { "value": "0801", "label": "Pianta 2" },
+      { "value": "0802", "label": "Pianta 3" },
+      { "value": "0803", "label": "Pianta 4" },
+      { "value": "0804", "label": "Pianta 5" },
+      { "value": "0805", "label": "Pianta 6" },
+      { "value": "0806", "label": "Pianta 7" },
+      { "value": "0807", "label": "Pianta 8" }
+    ]
+  },
+  {
+    "label": "Secret areas",
+    "options": [
+      { "value": "2F00", "label": "Bianco 3 secret" },
+      { "value": "2E00", "label": "Bianco 6 secret" },
+      { "value": "3000", "label": "Ricco 4 secret" },
+      { "value": "2000", "label": "Gelato 1 secret" },
+      { "value": "3200", "label": "Pinna 2 secret" },
+      { "value": "2900", "label": "Pinna 6 secret" },
+      { "value": "3300", "label": "Sirena 2 secret" },
+      { "value": "2800", "label": "Sirena 4 secret" },
+      { "value": "1F00", "label": "Noki 6 secret" },
+      { "value": "2A00", "label": "Pianta 5 secret" }
+    ]
+  },
+  {
+    "label": "Sublevels",
+    "options": [
+      { "value": "3700", "label": "Petey Piranha fight (Bianco 2)" },
+      { "value": "3B00", "label": "Gooper Blooper fight (Ricco 1)" },
+      { "value": "1E00", "label": "Race course (Ricco 2)" },
+      { "value": "2100", "label": "Sand bird (Gelato 4)" },
+      { "value": "3A01", "label": "Mecha-Bowser fight (Pinna 1)" },
+      { "value": "3A00", "label": "Rollercoaster (Pinna 8)" },
+      { "value": "0E00", "label": "Casino Delfino (Sirena 4)" },
+      { "value": "0E01", "label": "Casino Delfino (Sirena 5)" },
+      { "value": "3800", "label": "King Boo fight (Sirena 5)" },
+      { "value": "2C00", "label": "Bottle (Noki 3)" },
+      { "value": "3900", "label": "Deep Sea of Mare (Noki 4)" },
+      { "value": "1000", "label": "Deep Sea of Mare (Noki 8)" }
+    ]
+  },
+  {
+    "label": "Miscellaneous",
+    "options": [
+      { "value": "02FF", "label": "Bianco episode selection" },
+      { "value": "03FF", "label": "Ricco episode selection" },
+      { "value": "04FF", "label": "Gelato episode selection" },
+      { "value": "05FF", "label": "Pinna episode selection" },
+      { "value": "06FF", "label": "Sirena episode selection" },
+      { "value": "09FF", "label": "Noki episode selection" },
+      { "value": "08FF", "label": "Pianta episode selection" }
+    ]
+  }
+]
diff --git a/docs/.vuepress/data/stageLoaderPresets.json b/docs/.vuepress/data/stageLoaderPresets.json
new file mode 100644
index 0000000..b6ceee7
--- /dev/null
+++ b/docs/.vuepress/data/stageLoaderPresets.json
@@ -0,0 +1,105 @@
+[
+  {
+    "label": "Full-game categories, minimal plaza",
+    "options": [
+      {
+        "value": "020002020203020404000406080008010802080308040805080605000501050205030502050603000301030203030304030503060205020606000601060206030604060506060900090109020903090409050906;3400",
+        "label": "Fast Any% usual route"
+      },
+      {
+        "value": "020002020203020404000406080008010802080308040805080605000501050205030502050602050206060006010602060306040605060609000901090209030904090509060300030103020303030403050306;3400",
+        "label": "Fast Any% Ricco late"
+      },
+      {
+        "value": "020002020203020408000801080208030804080508060500050105020503050405050506030003010302030303040305030602050206060006010602060306040605060609000901090209030904090509060400040104020403040404050406;3400",
+        "label": "Fast Any% No Major Skips"
+      },
+      {
+        "value": "02000201020202030800080108020803080408050806080705000501050205030504050505060507030003010302030303040305030603070204020502060207060006010602060306040605060606070900090109020903090409050906090704000401040204030404040304050406;3400",
+        "label": "Fast 58 Shines / All Episodes"
+      },
+      {
+        "value": "02000201020202020800080108020803080408040804080508060807080705000501050105020503050405040505050505060507030003010301030203030303030403050305030603070203020402050205020502060207060006010601060206030603060306040605060606070900090109010901090209030904090509050906090704000400040004010402040304050404040304020406;3400",
+        "label": "Fast 79 Shines / All Level Shines"
+      },
+      {
+        "value": "020002020203020404000406080008010802080308040805080605000501050105020503050405050506030003010302030303040305030602050206060006010602060306040605060609000901090209030904090509060102160001021400010201021D00010201020102010201020102010204060405040404030402040204010400040015000207020502070205020003020307030303010507050705051700060706030603060109070905090109010807080708040804;3400",
+        "label": "Fast 96 Shines / All Shines, No Blues"
+      }
+    ]
+  },
+  {
+    "label": "Full-game categories",
+    "options": [
+      {
+        "value": "00000100020002020105020302040105040004060106080008010802080308040805080601070108050005010502050305020506010803000301030203030304030503060108020502060108060006010602060306040605060601080900090109020903090409050906;0109",
+        "label": "Any% usual route"
+      },
+      {
+        "value": "00000100020002020105020302040105080008010802080308040805080601070108050005010502050305040505050601080300030103020303030403050306010802050206010806000601060206030604060506060108090009010902090309040905090601080400040104020403040404050406;0109",
+        "label": "Any% No Major Skips"
+      },
+      {
+        "value": "0000010002000201010502020203010508000801080208030804080508060807010701080500050105020503050405050506050701080300030103020303030403050306030701080204020502060207010806000601060206030604060506060607010809000901090209030904090509060907010804000401040204030404040304050406;0109",
+        "label": "58 Shines / All Episodes"
+      },
+      {
+        "value": "0000010002000201010502020202010508000801080208030804080408040805080608070807010701080500050105010502050305040504050505050506050701080300030103010302030303030304030503050306030701080203020402050205020502060207010806000601060106020603060306030604060506060607010809000901090109010902090309040905090509060907010804000400040004010402040304050404040304020406;0109",
+        "label": "79 Shines / All Level Shines"
+      },
+      {
+        "value": "0000010002000202010502030204010504000406010608000801080208030804080508060107010805000501050105020503050405050506010803000301030203030304030503060108020502060108010806000601060206030604060506060108090009010902090309040905090601FF0102010201020102010201020102010201020102010201020102010204060405040404030402040204010400040001020102020702050207020502000102030203070303030101020507050705050102010206070603060306010102090709050901090101020807080708040804;0102",
+        "label": "96 Shines / All Shines, No Blues"
+      },
+      {
+        "value": "0000010002000202010502030204010504000406010608000801080208030804080508060107010805000501050105020503050405050506010803000301030203030304030503060108020502060108010806000601060206030604060506060108090009010902090309040905090601FF01020102010201020102010201020102010201020102010201020404040304020405040004000401040204050102010202000207020702070207010209010905090509070102080408040807080701020505050705070102010206010603060606070102010203010303030703070102;0102",
+        "label": "120 Shines / All Shines, All Blues"
+      }
+    ]
+  },
+  {
+    "label": "Individual Worlds",
+    "options": [
+      { "value": "020002020203020402050206", "label": "Bianco Hills" },
+      { "value": "0300030103020303030403050306", "label": "Ricco Harbor" },
+      { "value": "0400040104020403040404050406", "label": "Gelato Beach" },
+      { "value": "050005010502050305020506", "label": "Pinna Park" },
+      { "value": "0600060106020603060406050606", "label": "Sirena Beach" },
+      { "value": "0900090109020903090409050906", "label": "Noki Bay" },
+      { "value": "0800080108020803080408050806", "label": "Pianta Village" }
+    ]
+  },
+  {
+    "label": "All Shines IWs",
+    "options": [
+      {
+        "value": "02000201020202020203020402050205020502060207",
+        "label": "Bianco Hills"
+      },
+      {
+        "value": "03000301030103020303030303040305030503060307",
+        "label": "Ricco Harbor"
+      },
+      {
+        "value": "04000406040404060401040504000400040204020403",
+        "label": "Gelato Beach"
+      },
+      {
+        "value": "05000501050105020503050405040505050505060507",
+        "label": "Pinna Park"
+      },
+      {
+        "value": "06000601060106020603060306030604060506060607",
+        "label": "Sirena Beach"
+      },
+      {
+        "value": "09000901090109020903090409050905090609060907",
+        "label": "Noki Bay"
+      },
+      {
+        "value": "08000801080208030804080408040805080608070807",
+        "label": "Pianta Village"
+      }
+    ]
+  }
+]