4 files changed, 324 insertions, 1 deletions
diff --git a/src/components/Control/ItemStackForm.vue b/src/components/Control/ItemStackForm.vue
new file mode 100644
index 0000000..250e8c9
--- /dev/null
+++ b/src/components/Control/ItemStackForm.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import materials from '@/lib/materials';
+
+const model = defineModel<any>();
+
+if (typeof model.value !== 'object' || model.value === null) {
+  model.value = {};
+}
+
+const itemName = computed({
+  get() {
+    return model.value.name;
+  },
+  set(newValue: string) {
+    model.value.name = newValue;
+  },
+});
+
+const itemType = computed({
+  get() {
+    return model.value.type || model.value.material || model.value.item;
+  },
+  set(newValue: string) {
+    if (model.value.material) {
+      model.value.material = newValue;
+    } else if (model.value.item) {
+      model.value.item = newValue;
+    } else {
+      model.value.type = newValue;
+    }
+  },
+});
+</script>
+
+<template>
+  <div class="option-group">
+    <label for="itemstack-name">Name</label>
+    <input id="itemstack-name" name="itemstack-name" v-model="itemName" placeholder="Enter a display name" />
+  </div>
+
+  <div class="option-group">
+    <label for="itemstack-name">Type</label>
+    <multiselect v-model="itemType" 
+      :options="materials" :searchable="true" placeholder="Choose a material" />
+  </div>
+</template>
+
+<style scoped>
+</style>
+\ No newline at end of file
diff --git a/src/components/Control/ItemStackModal.vue b/src/components/Control/ItemStackModal.vue
new file mode 100644
index 0000000..642c5f9
--- /dev/null
+++ b/src/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
diff --git a/src/components/Control/ItemStackPicker.vue b/src/components/Control/ItemStackPicker.vue
new file mode 100644
index 0000000..613adfe
--- /dev/null
+++ b/src/components/Control/ItemStackPicker.vue
@@ -0,0 +1,100 @@
+<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') {
+    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', 'fa-tag']" /> Quest Item</span>
+    <span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'fa-cube']" /> ItemStack of '{{ value.type || value.item || value.material }}'</span>
+    <span v-if="isMaterial" class="item"><font-awesome-icon :icon="['fas', 'fa-apple-whole']" /> {{ value }}</span>
+    <span v-if="!empty && !isQuestItem && !isItemStack && !isMaterial" class="invalid"><font-awesome-icon :icon="['fas', 'fa-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
diff --git a/src/components/Control/Modal.vue b/src/components/Control/Modal.vue
index d47d281..46d5da5 100644
--- a/src/components/Control/Modal.vue
+++ b/src/components/Control/Modal.vue
@@ -29,6 +29,7 @@ const model = defineModel();
   background-color: rgba(0, 0, 0, 0.5);
   transition: opacity 0.3s;
   display: none;
+  overflow: visible;
 }
 
 .modal-content {
@@ -38,7 +39,7 @@ const model = defineModel();
   width: 100%;
   max-width: 600px;
   max-height: 80%;
-  overflow-y: auto;
+  overflow-y: visible;
   border-radius: 4px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }