aboutsummaryrefslogtreecommitdiffstats
path: root/components/base/ItemStackPicker.vue
diff options
context:
space:
mode:
authorLeonardo Bishop <me@leonardobishop.com>2024-03-11 00:32:51 +0000
committerLeonardo Bishop <me@leonardobishop.com>2024-03-11 00:32:51 +0000
commit27d85f0cda4d6f71a5a8eab8f416f29f01602b38 (patch)
tree13e7c6b1956030170cef6ce5bade5224e56b1c17 /components/base/ItemStackPicker.vue
parentaceef6edd8bd1663249e9d06fc1d4a063add4689 (diff)
Add rest of item stack picker
Diffstat (limited to 'components/base/ItemStackPicker.vue')
-rw-r--r--components/base/ItemStackPicker.vue97
1 files changed, 0 insertions, 97 deletions
diff --git a/components/base/ItemStackPicker.vue b/components/base/ItemStackPicker.vue
deleted file mode 100644
index 66b665f..0000000
--- a/components/base/ItemStackPicker.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import ItemStackModal from './ItemStackModal.vue';
-import materials from '@/lib/materials';
-
-const props = defineProps<{
- value: any;
-}>();
-const emit = defineEmits(['update']);
-
-const value = ref(props.value);
-
-const showItemStackModal = ref(false);
-
-//TODO unshitify
-const empty = computed(() => {
- return value.value === undefined
- || value.value === null
- || value.value === ''
- || (Array.isArray(value.value) && value.value.length === 0)
- || (typeof value.value === 'object' && Object.keys(value.value).length === 0);
-});
-const isQuestItem = computed(() => {
- return value.value?.['quest-item'] !== undefined;
-});
-const isItemStack = computed(() => {
- if (typeof value.value !== 'object' || value.value === null) {
- return false;
- }
-
- const key = 'item' in value.value
- ? 'item'
- : 'type' in value.value
- ? 'type'
- : 'material'
-
- return (!!value.value[key]);
-});
-const isMaterial = computed(() => {
- return typeof value.value === 'string' && materials.includes(value.value)
-});
-
-const update = (newValue: any) => {
- value.value = newValue;
- showItemStackModal.value = false;
- emit('update', value.value);
-};
-</script>
-
-<template>
- <div class="itemstack" @click="showItemStackModal = true">
- <span v-if="empty" class="empty">ItemStack...</span>
- <span v-if="isQuestItem" class="item"><font-awesome-icon :icon="['fas', 'tag']" /> Quest Item</span>
- <span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'cube']" /> ItemStack of '{{ value.type ||
- value.item || value.material }}'</span>
- <span v-if="isMaterial" class="item"><font-awesome-icon :icon="['fas', 'apple-whole']" /> {{ value }}</span>
- <span v-if="!empty && !isQuestItem && !isItemStack && !isMaterial" class="invalid"><font-awesome-icon
- :icon="['fas', 'triangle-exclamation']" /> Invalid ItemStack</span>
- </div>
-
- <ItemStackModal v-model="showItemStackModal" :value="value" @confirm="update" />
-</template>
-
-<style scoped>
-.itemstack {
- display: flex;
- width: 100%;
- height: 100%;
- cursor: pointer;
- align-items: center;
- padding: 0.5rem;
- user-select: none;
- transition: background-color 0.3s;
- background-color: var(--color-background-soft);
-
- span {
- font-family: monospace;
- font-size: 0.8rem;
- }
-
- .empty {
- color: var(--color-text-mute);
- }
-
- .item {
- color: var(--color-primary);
- }
-
- .invalid {
- color: var(--color-false);
- }
-
- &:hover {
- background-color: var(--color-hover);
- }
-}
-</style> \ No newline at end of file