Multiworld stuff

src/components/SettingPicker.vue

@@ -19,6 +19,7 @@ export default defineComponent({
     name: null,
     color: "primary",
     generator: null,
+    prefix: null,
   },
   watch: {
     async modelValue(newValue, oldValue) {
@@ -44,7 +45,7 @@ export default defineComponent({
     },
   },
   async mounted() {
-    this.selected = await localforage.getItem(`setting_${this.name}`) ?? this.settings.default;
+    this.selected = await localforage.getItem(`${this.prefix}setting_${this.name}`) ?? this.settings.default;
     this.change();
   },
   methods: {
@@ -53,7 +54,7 @@ export default defineComponent({
       await this.updateLocalForage();
     },
     async updateLocalForage() {
-      await localforage.setItem(`setting_${this.name}`, this.selected);
+      await localforage.setItem(`${this.prefix}setting_${this.name}`, this.selected);
     },
   },
 });
@@ -64,9 +65,9 @@ export default defineComponent({
   <div class="nav nav-pills nav-fill mt-1 mb-1">
     <template v-for="value of settings.order ?? Object.keys(settings.values)">
       <template v-if="settings.values[value]">
-        <input type="radio" class="btn-check" :name="name" :id="`${name}_${value}`"
+        <input type="radio" class="btn-check" :name="`${prefix}${name}`" :id="`${prefix}${name}_${value}`"
             autocomplete="off" :value="value" v-model="selected" @change="change" />
-        <label :class="`btn btn-outline-${color} nav-item m-1`" :for="`${name}_${value}`">
+        <label :class="`btn btn-outline-${color} nav-item m-1`" :for="`${prefix}${name}_${value}`">
           {{ settings.values[value].display }}
         </label>
       </template>