Add preset dropdown

src/components/PresetPicker.vue

@@ -0,0 +1,95 @@
+<script>
+import { defineComponent } from 'vue';
+
+import localforage from "localforage";
+import settingsData from "@/data/settings.yaml";
+import generatorSettings from "@/data/generator-settings.yaml";
+import presets from "@/data/presets.yaml";
+
+export default defineComponent({
+  data() {
+    return {
+      selected: "custom",
+    };
+  },
+  emits: [
+    'selected'
+  ],
+  props: {
+    generator: null,
+  },
+  computed: {
+    settings() {
+      const settings = {};
+      for (const name of Object.keys(generatorSettings[this.generator])) {
+        var generatorValue = generatorSettings[this.generator][name]
+        if (generatorValue == "all") {
+          settings[name] = settingsData[name];
+        } else if (Array.isArray(generatorValue)) {
+          const { values, ...newObj } = settingsData[this.name];
+          newObj.values = {};
+          for (const value of generatorValue) {
+            newObj.values[value] = values[value];
+          }
+          settings[name] = newObj;
+        } else {
+          settings[name] = generatorValue;
+        }
+      }
+      return settings;
+    },
+    presets() {
+      const filledPresets = {};
+      for (const presetName of Object.keys(presets[this.generator])) {
+        const preset = {};
+        preset.display = presets[this.generator][presetName].display;
+        for (const settingName of Object.keys(this.settings)) {
+          preset[settingName] = presets[this.generator][presetName][settingName] ?? this.settings[settingName].default;
+        }
+        filledPresets[presetName] = preset;
+      }
+      return filledPresets;
+    },
+  },
+  methods: {
+    change() {
+      if (this.selected && this.selected != "custom") {
+        this.$emit("selected", this.presets[this.selected]);
+      }
+    },
+    settingChanged(newSettings) {
+      for (const presetName of Object.keys(this.presets)) {
+        const preset = this.presets[presetName];
+        var matches = true;
+        for (const settingName of Object.keys(newSettings)) {
+          if (preset[settingName] != newSettings[settingName]) {
+            matches = false;
+            break;
+          }
+        }
+        if (matches) {
+          this.selected = presetName;
+          return;
+        }
+      }
+      this.selected = "custom";
+    },
+  },
+});
+</script>
+
+<template>
+  <div class="input-group">
+    <label class="input-group-text" for="presetSelector">
+      Preset:
+    </label>
+    <select v-model="selected" class="form-select" id="presetSelector" @change="change">
+      <option value="custom" selected>Custom</option>
+      <template v-for="name of Object.keys(presets)">
+        <option :value="name">
+          {{ presets[name].display }}
+        </option>
+      </template>
+    </select>
+  </div>
+</template>

src/components/SettingPicker.vue

@@ -20,6 +20,11 @@ export default defineComponent({
     color: "primary",
     generator: null,
   },
+  watch: {
+    modelValue(newValue, oldValue) {
+      this.selected = newValue;
+    },
+  },
   computed: {
     settings() {
       var generatorValue = generatorSettings[this.generator][this.name]

src/data/presets.yaml

@@ -0,0 +1,20 @@
+base:
+  default:
+    display: Default
+  boots:
+    display: Boots
+    boots: starting
+  crosskeys:
+    display: CrossKeys
+    goal: fast_ganon
+    entrance_shuffle: crossed
+    small_keys: wild
+    big_keys: wild
+    maps: wild
+    compasses: wild
+    boots: pseudoboots
+  super_quick:
+    display: Super Quick
+    weapons: assured
+    goal: fast_ganon
+    crystals_ganon: 0

src/views/GenerateView.vue

@@ -3,10 +3,12 @@ import { defineComponent } from "vue";
 
 import axios from "axios";
 
+import PresetPicker from "@/components/PresetPicker.vue";
 import SettingPicker from "@/components/SettingPicker.vue";
 
 export default defineComponent({
   components: {
+    PresetPicker,
     SettingPicker,
   },
   data() {
@@ -17,6 +19,14 @@ export default defineComponent({
   mounted() {
     document.title = "ALttPRandomizer";
   },
+  watch: {
+    set: {
+      handler(newValue, oldValue) {
+        this.$refs.preset.settingChanged(newValue);
+      },
+      deep: true,
+    }
+  },
   methods: {
     async generate(race) {
       const settings = {
@@ -35,6 +45,13 @@ export default defineComponent({
           console.log(error);
         });
     },
+    presetSelected(preset) {
+      for (const setting of Object.keys(this.set)) {
+        if (preset[setting] != undefined) {
+          this.set[setting] = preset[setting];
+        }
+      }
+    },
   },
 });
 </script>
@@ -45,6 +62,11 @@ export default defineComponent({
       Generate Seed
     </div>
     <ul class="list-group list-group-flush">
+      <li class="list-group-item">
+        <div class="mb-2 mt-2">
+          <PresetPicker ref="preset" generator="base" @selected="presetSelected" />
+        </div>
+      </li>
       <li class="list-group-item">
         <SettingPicker color="primary" v-model="set.mode" name="mode" generator="base" />
         <SettingPicker color="primary" v-model="set.weapons" name="weapons" generator="base" />