diff options
Diffstat (limited to 'components/Control/ItemStackModal.vue')
| -rw-r--r-- | components/Control/ItemStackModal.vue | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/components/Control/ItemStackModal.vue b/components/Control/ItemStackModal.vue new file mode 100644 index 0000000..642c5f9 --- /dev/null +++ b/components/Control/ItemStackModal.vue @@ -0,0 +1,172 @@ +<script setup lang="ts"> +import Modal from '@/components/Control/Modal.vue'; +import Button from '@/components/Control/Button.vue'; +import { computed, ref } from 'vue'; +import materials from '@/lib/materials'; +import ItemStackForm from './ItemStackForm.vue'; + +const model = defineModel(); + +const emit = defineEmits(['confirm']); + +const props = defineProps({ + value: String, +}); + +//TODO unshitify +const value = ref<any>(props.value); + +const isQuestItem = computed(() => { + return value.value?.['quest-item'] !== undefined; +}); +const isItemStack = computed(() => { + return ( + typeof value.value === 'object' + && ( + value.value?.item !== undefined + || value.value?.type !== undefined + || value.value?.material !== undefined + )) +}); +const isMaterial = computed(() => { + return typeof value.value === 'string' && materials.includes(value.value) +}); + +const selectedType = ref( + isQuestItem.value + ? 'questitem' + : isItemStack.value + ? 'itemstack' + : isMaterial.value + ? 'material' + : '' +); + +const noTypeSelected = computed(() => selectedType.value === ''); +const noValue = computed(() => !isQuestItem.value && !isItemStack.value && !isMaterial.value); + +const setSelectedType = (type: string) => { + if (type === 'questitem') { + value.value = {}; + } else if (type === 'itemstack') { + value.value = {}; + } else if (type === 'material') { + value.value = ''; + } + selectedType.value = type; +}; + +const confirm = () => { + emit('confirm', value.value); +}; +</script> + +<template> + <Modal v-model="model"> + <template v-slot:header> + <h2>Edit ItemStack</h2> + </template> + + <template v-slot:body> + <div id="type"> + <span class="option" @click="setSelectedType('questitem')" :class="{selected: selectedType === 'questitem'}"> + <span> + <font-awesome-icon :icon="['fas', 'fa-tag']" /> + Quest Item + </span> + <p v-if="noTypeSelected">Re-use a quest item.</p> + </span> + <span class="option" @click="setSelectedType('itemstack')" :class="{selected: selectedType === 'itemstack'}"> + <span> + <font-awesome-icon :icon="['fas', 'fa-cube']" /> + ItemStack + </span> + <p v-if="noTypeSelected">Define a new item stack.</p> + </span> + <span class="option" @click="setSelectedType('material')" :class="{selected: selectedType === 'material'}"> + <span> + <font-awesome-icon :icon="['fas', 'fa-apple-whole']" /> + Material + </span> + <p v-if="noTypeSelected">Define a specific item type.</p> + </span> + </div> + + <div id="material" class="option-group" v-if="selectedType === 'material'"> + <label for="material">Material</label> + <multiselect v-model="value" + :options="materials" :searchable="true" placeholder="Enter material name" /> + </div> + + <div id="itemstack" class="option-group" v-if="selectedType === 'itemstack'"> + <ItemStackForm v-model="value" /> + </div> + + + <div id="confirm" class="control-group"> + <Button + :icon="['fas', 'fa-times']" + :label="'Cancel'" + @click="model = false" + ></Button> + <Button + type="solid" + :icon="['fas', 'fa-check']" + :label="'Confirm'" + @click="confirm" + ></Button> + <!-- :disabled="noTypeSelected || noValue" --> + </div> + </template> + </Modal> +</template> + +<style scoped> +#confirm { + display: flex; + justify-content: flex-end; + margin-top: 1rem; +} + +#type { + display: flex; + justify-content: space-around; + gap: 0.25rem; + user-select: none; + margin-bottom: 1rem; + + .option { + border: 1px solid var(--color-border); + cursor: pointer; + display: flex; + flex-direction: column; + flex-basis: 0; + flex-grow: 1; + align-items: center; + gap: 0.5rem; + padding: 0.5rem; + background-color: var(--color-background-soft); + transition: background-color 0.3s; + + span { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 700; + } + + p { + text-align: center; + font-size: 0.8rem; + } + + &:hover { + background-color: var(--color-hover); + } + + &.selected { + background-color: var(--color-primary-mute); + } + } +} +</style>
\ No newline at end of file |