From 27d85f0cda4d6f71a5a8eab8f416f29f01602b38 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Mon, 11 Mar 2024 00:32:51 +0000
Subject: Add rest of item stack picker

---
 components/base/ItemStack/ItemStackForm.vue        | 248 +++++++++++++++++++++
 .../base/ItemStack/ItemStackFormOptionLabel.vue    |  26 +++
 components/base/ItemStack/ItemStackModal.vue       | 159 +++++++++++++
 components/base/ItemStack/ItemStackPicker.vue      |  96 ++++++++
 4 files changed, 529 insertions(+)
 create mode 100644 components/base/ItemStack/ItemStackForm.vue
 create mode 100644 components/base/ItemStack/ItemStackFormOptionLabel.vue
 create mode 100644 components/base/ItemStack/ItemStackModal.vue
 create mode 100644 components/base/ItemStack/ItemStackPicker.vue

(limited to 'components/base/ItemStack')

diff --git a/components/base/ItemStack/ItemStackForm.vue b/components/base/ItemStack/ItemStackForm.vue
new file mode 100644
index 0000000..ef13abd
--- /dev/null
+++ b/components/base/ItemStack/ItemStackForm.vue
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { parse, stringify } from 'yaml';
+import materials from '@/lib/materials';
+import enchantments from '@/lib/enchantments';
+import itemflags from '@/lib/itemflags';
+
+const model = defineModel<any>();
+
+if (typeof model.value !== 'object' || model.value === null) {
+  model.value = {};
+}
+
+const editAsYaml = ref(false);
+const yamlCode = ref('');
+
+const switchToYamlEditor = () => {
+  yamlCode.value = stringify({
+    type: model.value.type || model.value.material || model.value.item || "",
+    ...("name" in model.value && { name: model.value.name }),
+    ...("lore" in model.value && { lore: model.value.lore }),
+    ...("enchantments" in model.value && { enchantments: model.value.enchantments }),
+    ...("itemflags" in model.value && { itemflags: model.value.itemflags }),
+    ...("custommodeldata" in model.value && { custommodeldata: model.value.custommodeldata }),
+    ...("unbreakable" in model.value && { unbreakable: model.value.unbreakable }),
+    ...("attributemodifiers" in model.value && { attributemodifiers: model.value.attributemodifiers }),
+    ...("owner-base64" in model.value && { ["owner-base64"]: model.value["owner-base64"] }),
+    ...("owner-username" in model.value && { ["owner-username"]: model.value["owner-username"] }),
+    ...("owner-uuid" in model.value && { ["owner-uuid"]: model.value["owner-uuid"] })
+  })
+  editAsYaml.value = true;
+}
+
+const switchToGuiEditor = () => {
+  parseAndSetYamlValues();
+  editAsYaml.value = false;
+}
+
+const parseAndSetYamlValues = (): boolean => {
+  let newValues;
+  try {
+    newValues = parse(yamlCode.value);
+  } catch (e) {
+    return false;
+  }
+
+  model.value.type = newValues.type;
+  if ("name" in newValues) model.value.name = String(newValues.name);
+  if ("lore" in newValues) model.value.lore = Array.isArray(newValues.lore) ? newValues.lore : [newValues.lore];
+  if ("enchantments" in newValues) model.value.enchantments = Array.isArray(newValues.enchantments) ? newValues.enchantments : [newValues.enchantments];
+  if ("itemflags" in newValues) model.value.itemflags = Array.isArray(newValues.itemflags) ? newValues.itemflags : [newValues.itemflags];
+  if ("custommodeldata" in newValues) model.value.custommodeldata = Number(newValues.custommodeldata) || 0;
+  if ("unbreakable" in newValues) model.value.unbreakable = !!newValues.unbreakable;
+  if ("attributemodifiers" in newValues) model.value.attributemodifiers = Array.isArray(newValues.attributemodifiers) ? newValues.attributemodifiers : [newValues.attributemodifiers];
+  if ("owner-base64" in newValues) model.value["owner-base64"] = String(newValues["owner-base64"]);
+  if ("owner-username" in newValues) model.value["owner-username"] = String(newValues["owner-username"]);
+  if ("owner-uuid" in newValues) model.value["owner-uuid"] = String(newValues["owner-uuid"]);
+
+  return true;
+}
+
+const itemName = computed({
+  get() {
+    return model.value.name;
+  },
+  set(newValue: string) {
+    model.value.name = newValue;
+  },
+});
+
+const isOptionSet = (option: string) => {
+  return option in model.value;
+}
+
+const setOption = (option: string, type: 'string' | 'string-list' | 'number' | 'boolean') => {
+  switch (type) {
+    case 'string':
+      model.value[option] = '';
+      break;
+    case 'number':
+      model.value[option] = 0;
+      break;
+    case 'boolean':
+      model.value[option] = false;
+      break;
+    case 'string-list':
+      model.value[option] = [];
+      break;
+  }
+}
+
+const removeOption = (option: string) => {
+  delete model.value[option];
+}
+
+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;
+    }
+  },
+});
+
+const itemLore = computed({
+  get() {
+    return model.value.lore?.join('\n');
+  },
+  set(newValue: string) {
+    model.value.lore = newValue.split('\n');
+  }
+})
+
+const itemEnchantments = computed({
+  get() {
+    return model.value.enchantments;
+  },
+  set(newValue: any) {
+    model.value.enchantments = newValue;
+  }
+})
+
+const itemCustomModelData = computed({
+  get() {
+    return model.value.custommodeldata;
+  },
+  set(newValue: any) {
+    model.value.custommodeldata = newValue;
+  }
+})
+
+const itemItemflags = computed({
+  get() {
+    return model.value.itemflags;
+  },
+  set(newValue: any) {
+    model.value.itemflags = newValue;
+  }
+})
+</script>
+
+<template>
+  <div id="gui-form" v-if="!editAsYaml">
+    <div class="option-group">
+      <div class="label-with-button">
+        <label for="itemstack-type">Type</label>
+
+        <Button label="Edit as YAML" :icon="['fas', 'pencil']" @click="switchToYamlEditor()"></Button>
+      </div>
+      <multiselect v-model="itemType" :options="materials" :searchable="true" placeholder="Choose a material" />
+    </div>
+
+    <div class="option-group" v-if="isOptionSet('name')">
+      <ItemStackFormOptionLabel option="name" type="string" label="Name" :is-option-set-fn="isOptionSet"
+        :set-option-fn="setOption" :remove-option-fn="removeOption" />
+
+      <input id="itemstack-name" name="itemstack-name" v-model="itemName" placeholder="Enter display name" />
+    </div>
+
+    <div class="option-group" v-if="isOptionSet('lore')">
+      <ItemStackFormOptionLabel option="lore" type="string-list" label="Lore" :is-option-set-fn="isOptionSet"
+        :set-option-fn="setOption" :remove-option-fn="removeOption" />
+
+      <textarea rows="5" id="itemstack-lore" name="itemstack-lore" v-model="itemLore" placeholder="Enter item lore" />
+    </div>
+
+    <div class="option-group" v-if="isOptionSet('enchantments')">
+      <ItemStackFormOptionLabel option="enchantments" type="string-list" label="Enchantments"
+        :is-option-set-fn="isOptionSet" :set-option-fn="setOption" :remove-option-fn="removeOption" />
+
+      <multiselect v-model="itemEnchantments" :options="enchantments" :searchable="true" :multiple="true"
+        placeholder="Enter enchantment names" />
+    </div>
+
+    <div class="option-group" v-if="isOptionSet('itemflags')">
+      <ItemStackFormOptionLabel option="itemflags" type="string-list" label="Item flags" :is-option-set-fn="isOptionSet"
+        :set-option-fn="setOption" :remove-option-fn="removeOption" />
+
+      <multiselect v-model="itemItemflags" :options="itemflags" :searchable="true" :multiple="true"
+        placeholder="Enter item flags" />
+    </div>
+
+    <div class="option-group" v-if="isOptionSet('custommodeldata')">
+      <ItemStackFormOptionLabel option="custommodeldata" type="number" label="Custom model data"
+        :is-option-set-fn="isOptionSet" :set-option-fn="setOption" :remove-option-fn="removeOption" />
+
+      <input id="itemstack-custommodeldata" name="itemstack-custommodeldata" v-model="itemCustomModelData" type="number"
+        placeholder="Enter custom model data" />
+    </div>
+
+    <div>
+      <Button v-if="!isOptionSet('name')" @click="setOption('name', 'string')" label="Add specific name"
+        :icon="['fas', 'plus']"></Button>
+      <Button v-if="!isOptionSet('lore')" @click="setOption('lore', 'string-list')" label="Add specific lore"
+        :icon="['fas', 'plus']"></Button>
+      <Button v-if="!isOptionSet('enchantments')" @click="setOption('enchantments', 'string-list')"
+        label="Add specific enchantments" :icon="['fas', 'plus']"></Button>
+      <Button v-if="!isOptionSet('itemflags')" @click="setOption('itemflags', 'string-list')"
+        label="Add specific item flags" :icon="['fas', 'plus']"></Button>
+      <Button v-if="!isOptionSet('custommodeldata')" @click="setOption('custommodeldata', 'string')"
+        label="Add specific custom model data" :icon="['fas', 'plus']"></Button>
+    </div>
+
+    <p>For
+      <NuxtLink to="https://quests.leonardobishop.com/configuration/defining-items.html#unbreakable">
+        unbreakable</NuxtLink>,
+      <NuxtLink to="https://quests.leonardobishop.com/configuration/defining-items.html#attribute-modifiers">
+        attribute-modifiers</NuxtLink>, and
+      <NuxtLink to="https://quests.leonardobishop.com/configuration/defining-items.html#owner">owner</NuxtLink> please
+      switch to YAML.
+    </p>
+  </div>
+
+  <div id="yaml-form" v-if="editAsYaml">
+    <div class="option-group">
+      <div class="label-with-button">
+        <label for="itemstack-name">YAML</label>
+
+        <Button label="Use GUI editor" :icon="['fas', 'pencil']" @click="switchToGuiEditor"></Button>
+      </div>
+
+      <textarea id="yaml-editor" rows="10" v-model="yamlCode"></textarea>
+    </div>
+  </div>
+</template>
+
+<style>
+#gui-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.label-with-button {
+  display: flex;
+  justify-content: space-between;
+}
+
+#yaml-editor {
+  font-family: monospace;
+}
+</style>
\ No newline at end of file
diff --git a/components/base/ItemStack/ItemStackFormOptionLabel.vue b/components/base/ItemStack/ItemStackFormOptionLabel.vue
new file mode 100644
index 0000000..ab067f8
--- /dev/null
+++ b/components/base/ItemStack/ItemStackFormOptionLabel.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  option: string
+  label: string
+  type: string
+  isOptionSetFn: (option: string) => boolean;
+  removeOptionFn: (option: string) => void;
+  setOptionFn: (option: string, type: any) => void;
+}>()
+</script>
+
+<template>
+  <div class="label-with-button">
+    <label :for="'itemstack-' + option">{{ label }}</label>
+
+    <Button v-if="isOptionSetFn(option)" label="Remove" :icon="['fas', 'minus']"
+      @click="removeOptionFn(option)"></Button>
+  </div>
+</template>
+
+<style scoped>
+.label-with-button {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
\ No newline at end of file
diff --git a/components/base/ItemStack/ItemStackModal.vue b/components/base/ItemStack/ItemStackModal.vue
new file mode 100644
index 0000000..7cf4db9
--- /dev/null
+++ b/components/base/ItemStack/ItemStackModal.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import materials from '@/lib/materials';
+
+const model = defineModel();
+
+const emit = defineEmits(['confirm']);
+
+const props = defineProps<{
+  value: any
+}>();
+
+//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', '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', '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', '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', 'times']" :label="'Cancel'" @click="model = false"></Button>
+        <Button type="solid" :icon="['fas', '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/components/base/ItemStack/ItemStackPicker.vue b/components/base/ItemStack/ItemStackPicker.vue
new file mode 100644
index 0000000..9141100
--- /dev/null
+++ b/components/base/ItemStack/ItemStackPicker.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, ref } from '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
-- 
cgit v1.2.3-70-g09d2