alttpr-gwaa-kiwi/alttpr-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add remaining settings

Browse Source
This commit is contained in:
karafruit
2025-03-07 07:10:03 -06:00
parent 37a13d2e7b
commit 37486d5a80
7 changed files with 146 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/main.css
View File

@@ -1,4 +1,9 @@
#app { #app {
max-width: 60rem;
margin: 0 auto;
}
.mw-30 {
max-width: 30rem; max-width: 30rem;
margin: 0 auto; margin: 0 auto;
} }

30
src/components/HeartBeepPicker.vue
View File

@@ -6,6 +6,12 @@ import localforage from "localforage";
export default defineComponent({ export default defineComponent({
data() { data() {
return { return {
options: {
normal: "Normal",
half: "Half",
quarter: "Quarter",
off: "Off",
},
heartbeep: null, heartbeep: null,
}; };
}, },
@@ -46,21 +52,13 @@ export default defineComponent({
<div> <div>
Heart Beep Speed: Heart Beep Speed:
</div> </div>
<div class="btn-group mt-2" role="group"> <div class="nav nav-pills nav-justified mt-2">
<input type="radio" class="btn-check" name="heartbeep" id="heartbeep_normal" <template v-for="value of Object.keys(options)">
autocomplete="off" value="normal" v-model="heartbeep" @change="change" /> <input type="radio" class="btn-check" :name="heartbeep" :id="`heartbeep_${value}`"
<label class="btn btn-outline-primary" for="heartbeep_normal">Normal</label> autocomplete="off" :value="value" v-model="heartbeep" @change="change" />
<label class="btn btn-outline-primary nav-item m-1" :for="`heartbeep_${value}`">
<input type="radio" class="btn-check" name="heartbeep" id="heartbeep_half" {{ options[value] }}
autocomplete="off" value="half" v-model="heartbeep" @change="change" /> </label>
<label class="btn btn-outline-primary" for="heartbeep_half">Half</label> </template>
<input type="radio" class="btn-check" name="heartbeep" id="heartbeep_quarter"
autocomplete="off" value="quarter" v-model="heartbeep" @change="change" />
<label class="btn btn-outline-primary" for="heartbeep_quarter">Quarter</label>
<input type="radio" class="btn-check" name="heartbeep" id="heartbeep_off"
autocomplete="off" value="off" v-model="heartbeep" @change="change" />
<label class="btn btn-outline-primary" for="heartbeep_off">Off</label>
</div> </div>
</template> </template>

30
src/components/HeartColorPicker.vue
View File

@@ -6,6 +6,12 @@ import localforage from "localforage";
export default defineComponent({ export default defineComponent({
data() { data() {
return { return {
options: {
red: {display: "Red", class: "btn-outline-danger"},
blue: {display: "Blue", class: "btn-outline-primary"},
green: {display: "Green", class: "btn-outline-success"},
yellow: {display: "Yellow", class: "btn-outline-warning"},
},
heartcolor: null, heartcolor: null,
}; };
}, },
@@ -43,21 +49,13 @@ export default defineComponent({
<div> <div>
Heart Color: Heart Color:
</div> </div>
<div class="btn-group mt-2" role="group"> <div class="nav nav-pills nav-justified mt-1">
<input type="radio" class="btn-check" name="heartcolor" id="heartcolor_red" <template v-for="value of Object.keys(options)">
autocomplete="off" value="red" v-model="heartcolor" @change="change" /> <input type="radio" class="btn-check" :name="heartcolor" :id="`heartcolor_${value}`"
<label class="btn btn-outline-danger" for="heartcolor_red">Red</label> autocomplete="off" :value="value" v-model="heartcolor" @change="change" />
<label :class="`btn ${options[value].class} nav-item m-1`" :for="`heartcolor_${value}`">
<input type="radio" class="btn-check" name="heartcolor" id="heartcolor_blue" {{ options[value].display }}
autocomplete="off" value="blue" v-model="heartcolor" @change="change" /> </label>
<label class="btn btn-outline-primary" for="heartcolor_blue">Blue</label> </template>
<input type="radio" class="btn-check" name="heartcolor" id="heartcolor_green"
autocomplete="off" value="green" v-model="heartcolor" @change="change" />
<label class="btn btn-outline-success" for="heartcolor_green">Green</label>
<input type="radio" class="btn-check" name="heartcolor" id="heartcolor_yellow"
autocomplete="off" value="yellow" v-model="heartcolor" @change="change" />
<label class="btn btn-outline-warning" for="heartcolor_yellow">Yellow</label>
</div> </div>
</template> </template>

110
src/components/Seed.vue
View File

@@ -163,61 +163,63 @@ export default defineComponent({
</script> </script>
<template> <template>
<div v-if="patch" class="card content-div m-3"> <div class="mw-30">
<div class="card-header"> <div v-if="patch" class="card content-div m-3">
Permalink: <a :href="permalink">{{ permalink }}</a> <div class="card-header">
</div> Permalink: <a :href="permalink">{{ permalink }}</a>
<ul class="list-group list-group-flush"> </div>
<li v-if="!baserom" class="list-group-item"> <ul class="list-group list-group-flush">
<div class="mb-2"> <li v-if="!baserom" class="list-group-item">
<label for="rom-input" class="form-label"> <div class="mb-2">
The Legend of Zelda: A Link to the Past (JP 1.0) Rom: <label for="rom-input" class="form-label">
</label> The Legend of Zelda: A Link to the Past (JP 1.0) Rom:
<input id="rom-input" class="form-control" type="file" accept=".sfc,.smc" @change="uploadBaseRom($event.target.files[0])" /> </label>
<div v-if="baserom_error" class="invalid"> <input id="rom-input" class="form-control" type="file" accept=".sfc,.smc" @change="uploadBaseRom($event.target.files[0])" />
{{ baserom_error }} <div v-if="baserom_error" class="invalid">
{{ baserom_error }}
</div>
</div> </div>
</div> </li>
</li> <li v-if="settings" class="list-group-item">
<li v-if="settings" class="list-group-item"> <SeedSettings :settings="settings" />
<SeedSettings :settings="settings" /> </li>
</li> <li class="list-group-item">
<li class="list-group-item"> <div class="mb-2">
<div class="mb-2"> <SpritePicker @spriteUpdate="spriteUpdate" />
<SpritePicker @spriteUpdate="spriteUpdate" /> </div>
</div> </li>
</li> <li class="list-group-item">
<li class="list-group-item"> <div class="mb-2">
<div class="mb-2"> <HeartBeepPicker ref="heartbeep" />
<HeartBeepPicker ref="heartbeep" /> </div>
</div> </li>
</li> <li class="list-group-item">
<li class="list-group-item"> <div class="mb-2">
<div class="mb-2"> <HeartColorPicker ref="heartcolor" />
<HeartColorPicker ref="heartcolor" /> </div>
</div> </li>
</li> <li class="list-group-item">
<li class="list-group-item"> <div>
<div> <BackgroundMusicPicker ref="bgm" />
<BackgroundMusicPicker ref="bgm" /> <MsuResumePicker ref="msu_resume" />
<MsuResumePicker ref="msu_resume" /> <ReduceFlashingPicker ref="reduce_flashing" />
<ReduceFlashingPicker ref="reduce_flashing" /> <QuickswapPicker ref="quickswap" />
<QuickswapPicker ref="quickswap" /> </div>
</div> </li>
</li> <li class="list-group-item">
<li class="list-group-item"> <button type="submit" class="btn btn-primary submit-btn" :disabled="!baserom || !patch" @click="patchRom">
<button type="submit" class="btn btn-primary submit-btn" :disabled="!baserom || !patch" @click="patchRom"> Download Seed!
Download Seed! </button>
</button> <a id="downloader" style="display: none;" />
<a id="downloader" style="display: none;" /> </li>
</li> </ul>
</ul> </div>
</div> <div v-else-if="error" class="error-message">
<div v-else-if="error" class="error-message"> {{ error }}
{{ error }} </div>
</div> <div v-else>
<div v-else> <img class="center" src="/bludormspinbig.gif" />
<img class="center" src="/bludormspinbig.gif" /> </div>
</div> </div>
</template> </template>

3
src/components/SettingPicker.vue
View File

@@ -15,6 +15,7 @@ export default defineComponent({
props: { props: {
modelValue: null, modelValue: null,
name: null, name: null,
color: "primary",
settings: {}, settings: {},
}, },
mounted() { mounted() {
@@ -35,7 +36,7 @@ export default defineComponent({
<template v-for="value of Object.keys(settings.values)"> <template v-for="value of Object.keys(settings.values)">
<input type="radio" class="btn-check" :name="name" :id="`${name}_${value}`" <input type="radio" class="btn-check" :name="name" :id="`${name}_${value}`"
autocomplete="off" :value="value" v-model="selected" @change="change" /> autocomplete="off" :value="value" v-model="selected" @change="change" />
<label class="btn btn-outline-primary nav-item m-1" :for="`${name}_${value}`"> <label :class="`btn btn-outline-${color} nav-item m-1`" :for="`${name}_${value}`">
{{ settings.values[value].display }} {{ settings.values[value].display }}
</label> </label>
</template> </template>

22
src/data/settings.yaml
View File

@@ -127,6 +127,8 @@ base:
independent: independent:
display: Independent display: Independent
boss_shuffle: boss_shuffle:
display: Boss Shuffle
default: vanilla
values: values:
vanilla: vanilla:
display: None display: None
@@ -139,12 +141,16 @@ base:
prize_unique: prize_unique:
display: Prize Unique display: Prize Unique
enemy_shuffle: enemy_shuffle:
display: Enemy Shuffle
default: vanilla
values: values:
vanilla: vanilla:
display: None display: None
shuffled: shuffled:
display: Shuffled display: Shuffled
small_keys: small_keys:
display: Small Key Shuffle
default: dungeon
values: values:
dungeon: dungeon:
display: In Dungeon display: In Dungeon
@@ -155,6 +161,8 @@ base:
universal: universal:
display: Universal display: Universal
big_keys: big_keys:
display: Big Key Shuffle
default: dungeon
values: values:
dungeon: dungeon:
display: In Dungeon display: In Dungeon
@@ -163,6 +171,8 @@ base:
nearby: nearby:
display: Nearby display: Nearby
maps: maps:
display: Map Shuffle
default: dungeon
values: values:
dungeon: dungeon:
display: In Dungeon display: In Dungeon
@@ -171,6 +181,8 @@ base:
nearby: nearby:
display: Nearby display: Nearby
compasses: compasses:
display: Compass Shuffle
default: dungeon
values: values:
dungeon: dungeon:
display: In Dungeon display: In Dungeon
@@ -179,12 +191,16 @@ base:
nearby: nearby:
display: Nearby display: Nearby
shop_shuffle: shop_shuffle:
display: Shop Shuffle
default: vanilla
values: values:
vanilla: vanilla:
display: None display: None
shuffled: shuffled:
display: Shuffled display: Shuffled
drop_shuffle: drop_shuffle:
display: Drop Shuffle
default: vanilla
values: values:
vanilla: vanilla:
display: None display: None
@@ -193,6 +209,8 @@ base:
underworld: underworld:
display: All Underworld Enemies display: All Underworld Enemies
pottery: pottery:
display: Pottery Shuffle
default: vanilla
values: values:
vanilla: vanilla:
display: None display: None
@@ -213,6 +231,8 @@ base:
lottery: lottery:
display: Lottery display: Lottery
prize_shuffle: prize_shuffle:
display: Prize Shuffle
default: vanilla
values: values:
vanilla: vanilla:
display: On Boss display: On Boss
@@ -223,6 +243,8 @@ base:
wild: wild:
display: Wild display: Wild
boots: boots:
display: Boots
default: normal
values: values:
normal: normal:
display: No Starting Boots display: No Starting Boots

54
src/views/GenerateView.vue
View File

@@ -12,14 +12,7 @@ export default defineComponent({
}, },
data() { data() {
return { return {
mode: null, set: {},
goal: null,
weapons: null,
crystals_ganon: null,
crystals_gt: null,
entrance_shuffle: null,
skull_woods: null,
linked_drops: null,
}; };
}, },
computed: { computed: {
@@ -30,8 +23,8 @@ export default defineComponent({
methods: { methods: {
async generate(race) { async generate(race) {
const settings = { race: race ? "race" : "normal" }; const settings = { race: race ? "race" : "normal" };
for (const setting of Object.keys(this.$data)) { for (const setting of Object.keys(this.set)) {
settings[setting] = this.$data[setting]; settings[setting] = this.set[setting];
} }
await axios.post("/generate", settings) await axios.post("/generate", settings)
.then(response => { .then(response => {
@@ -53,21 +46,40 @@ export default defineComponent({
</div> </div>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item"> <li class="list-group-item">
<SettingPicker v-model="mode" name="mode" :settings="settings.mode" /> <SettingPicker color="primary" v-model="set.mode" name="mode" :settings="settings.mode" />
<SettingPicker v-model="weapons" name="weapons" :settings="settings.weapons" /> <SettingPicker color="primary" v-model="set.weapons" name="weapons" :settings="settings.weapons" />
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<SettingPicker v-model="goal" name="goal" :settings="settings.goal" /> <SettingPicker color="success" v-model="set.goal" name="goal" :settings="settings.goal" />
<SettingPicker v-if="['ganon', 'fast_ganon'].includes(this.goal)" <SettingPicker color="success" v-if="['ganon', 'fast_ganon'].includes(this.set.goal)"
v-model="crystals_ganon" name="crystals_ganon" :settings="settings.crystals_ganon" /> v-model="set.crystals_ganon" name="crystals_ganon" :settings="settings.crystals_ganon" />
<SettingPicker v-model="crystals_gt" name="crystals_gt" :settings="settings.crystals_gt" /> <SettingPicker color="success" v-model="set.crystals_gt" name="crystals_gt" :settings="settings.crystals_gt" />
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<SettingPicker v-model="entrance_shuffle" name="entrance_shuffle" :settings="settings.entrance_shuffle" /> <SettingPicker color="warning" v-model="set.entrance_shuffle" name="entrance_shuffle" :settings="settings.entrance_shuffle" />
<SettingPicker v-if="this.entrance_shuffle != 'vanilla'" <SettingPicker color="warning" v-if="this.set.entrance_shuffle != 'vanilla'"
v-model="skull_woods" name="skull_woods" :settings="settings.skull_woods" /> v-model="set.skull_woods" name="skull_woods" :settings="settings.skull_woods" />
<SettingPicker v-if="this.entrance_shuffle != 'vanilla'" <SettingPicker color="warning" v-if="this.set.entrance_shuffle != 'vanilla'"
v-model="linked_drops" name="linked_drops" :settings="settings.linked_drops" /> v-model="set.linked_drops" name="linked_drops" :settings="settings.linked_drops" />
</li>
<li class="list-group-item">
<SettingPicker color="danger" v-model="set.boss_shuffle" name="boss_shuffle" :settings="settings.boss_shuffle" />
<SettingPicker color="danger" v-model="set.enemy_shuffle" name="enemy_shuffle" :settings="settings.enemy_shuffle" />
</li>
<li class="list-group-item">
<SettingPicker color="primary" v-model="set.small_keys" name="small_keys" :settings="settings.small_keys" />
<SettingPicker color="primary" v-model="set.big_keys" name="big_keys" :settings="settings.big_keys" />
<SettingPicker color="primary" v-model="set.maps" name="maps" :settings="settings.maps" />
<SettingPicker color="primary" v-model="set.compasses" name="compasses" :settings="settings.compasses" />
</li>
<li class="list-group-item">
<SettingPicker color="success" v-model="set.shop_shuffle" name="shop_shuffle" :settings="settings.shop_shuffle" />
<SettingPicker color="success" v-model="set.drop_shuffle" name="drop_shuffle" :settings="settings.drop_shuffle" />
<SettingPicker color="success" v-model="set.pottery" name="pottery" :settings="settings.pottery" />
<SettingPicker color="success" v-model="set.prize_shuffle" name="prize_shuffle" :settings="settings.prize_shuffle" />
</li>
<li class="list-group-item">
<SettingPicker color="warning" v-model="set.boots" name="boots" :settings="settings.boots" />
</li> </li>
</ul> </ul>
<div class="card-footer"> <div class="card-footer">