Stash WIP zone effect

This commit is contained in:
2024-10-11 15:04:50 +02:00
parent f51cb839bf
commit b264ab3e40
4 changed files with 397 additions and 66 deletions

View File

@ -1,5 +1,5 @@
<template>
<Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="350" :is-resizable="false">
<Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0">Zone settings</h3>
</template>
@ -27,6 +27,20 @@
<option :value="true">Yes</option>
</select>
</div>
<div class="form-field-full">
<label for="zoneEffects">Zone effects</label>
<select class="input-cyan" name="zoneEffects" id="zoneEffects" multiple>
<option :value="''">None</option>
<option :value="'darkness'">Darkness</option>
<option :value="'light'">Light</option>
<option :value="'rain'">Rain</option>
<option :value="'snow'">Snow</option>
</select>
</div>
<div class="form-field-full">
<label for="zoneEffectPercentage">Zone effect percentage</label>
<input class="input-cyan" v-model="zoneEffectPercentage" name="zoneEffectPercentage" id="zoneEffectPercentage" type="number" />
</div>
</div>
</form>
</div>
@ -45,11 +59,13 @@ zoneEditorStore.setZoneName(zoneEditorStore.zone.name)
zoneEditorStore.setZoneWidth(zoneEditorStore.zone.width)
zoneEditorStore.setZoneHeight(zoneEditorStore.zone.height)
zoneEditorStore.setZonePvp(zoneEditorStore.zone.pvp)
zoneEditorStore.setZoneEffects(zoneEditorStore.zone.zoneEffects)
const name = ref(zoneEditorStore.zoneSettings.name)
const width = ref(zoneEditorStore.zoneSettings.width)
const height = ref(zoneEditorStore.zoneSettings.height)
const pvp = ref(zoneEditorStore.zoneSettings.pvp)
const zoneEffects = ref(zoneEditorStore.zoneSettings.zoneEffects.zoneEffect)
watch(name, (value) => {
zoneEditorStore.setZoneName(value)
@ -66,4 +82,8 @@ watch(height, (value) => {
watch(pvp, (value) => {
zoneEditorStore.setZonePvp(value)
})
watch(zoneEffects, (value) => {
zoneEditorStore.setZoneEffects({ zoneEffect: value, zoneEffectPercentage: zoneEffectPercentage.value })
})
</script>