aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Control/ItemStackForm.vue50
-rw-r--r--src/components/Control/ItemStackModal.vue172
-rw-r--r--src/components/Control/ItemStackPicker.vue100
-rw-r--r--src/components/Control/Modal.vue3
-rw-r--r--src/components/Editor/EditorPane.vue8
-rw-r--r--src/components/Editor/EditorSidebarCategory.vue4
-rw-r--r--src/components/Editor/EditorSidebarQuest.vue4
-rw-r--r--src/components/Editor/Quest/QuestTasksOptionsPanel.vue25
-rw-r--r--src/components/Editor/Quest/Task/Modal/AddTaskModal.vue90
-rw-r--r--src/components/Editor/Quest/Task/Modal/ChangeTaskModal.vue24
-rw-r--r--src/components/Editor/Quest/Task/TaskConfiguration.vue16
-rw-r--r--src/components/Editor/Quest/Task/TaskConfigurationRow.vue10
12 files changed, 490 insertions, 16 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);
}
diff --git a/src/components/Editor/EditorPane.vue b/src/components/Editor/EditorPane.vue
index 21d1f80..bf9532a 100644
--- a/src/components/Editor/EditorPane.vue
+++ b/src/components/Editor/EditorPane.vue
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { useSessionStore } from '@/stores/session';
import { computed, ref } from 'vue';
-import { stripColourCodes } from '@/lib/util';
+import { stripColorCodes } from '@/lib/util';
import QuestOptionsPanel from '@/components/Editor/Quest/QuestOptionsPanel.vue';
import QuestTasksOptionsPanel from '@/components/Editor/Quest/QuestTasksOptionsPanel.vue';
import CategoryOptionsPanel from '@/components/Editor/Category/CategoryOptionsPanel.vue';
@@ -70,16 +70,16 @@ const duplicateQuest = (oldId: string, newId: string) => {
<template v-if="selectedType === 'Quest'">
<template v-if="categoryFromSelectedQuest">
<font-awesome-icon class="icon" :icon="['fas', 'fa-folder']"/>
- {{ stripColourCodes(categoryFromSelectedQuest?.display.name) }}
+ {{ stripColorCodes(categoryFromSelectedQuest?.display.name) }}
<font-awesome-icon class="chevron" :icon="['fas', 'fa-chevron-right']"/>
</template>
<font-awesome-icon class="icon" :icon="['far', 'fa-compass']"/>
- <span class="title">{{ stripColourCodes(selectedName!) }} </span>
+ <span class="title">{{ stripColorCodes(selectedName!) }} </span>
<code>({{ selectedId }})</code>
</template>
<template v-if="selectedType === 'Category'">
<font-awesome-icon class="icon" :icon="['fas', 'fa-folder']"/>
- <span class="title">{{ stripColourCodes(selectedName!) }} </span>
+ <span class="title">{{ stripColorCodes(selectedName!) }} </span>
<code>({{ selectedId }})</code>
</template>
</span>
diff --git a/src/components/Editor/EditorSidebarCategory.vue b/src/components/Editor/EditorSidebarCategory.vue
index 932b36b..7153b92 100644
--- a/src/components/Editor/EditorSidebarCategory.vue
+++ b/src/components/Editor/EditorSidebarCategory.vue
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { useSessionStore, type EditorCategory } from '@/stores/session';
import { computed, ref, toRefs } from 'vue';
-import { stripColourCodes } from '@/lib/util';
+import { stripColorCodes } from '@/lib/util';
import EditorSidebarQuest from '@/components/Editor/EditorSidebarQuest.vue';
const props = defineProps<{
@@ -36,7 +36,7 @@ const selected = computed(() => {
<span id="category-title" @click="setSelectedCategory">
<font-awesome-icon @click.stop="expandCategory" class="category-icon" :icon="expanded ? ['fas', 'fa-caret-down'] : ['fas', 'fa-caret-up']"/>
<span id="category-name">
- <span id="category-display-name">{{ stripColourCodes(category.display.name) }}</span>
+ <span id="category-display-name">{{ stripColorCodes(category.display.name) }}</span>
<code id="category-display-id">{{ category.id }}</code>
</span>
</span>
diff --git a/src/components/Editor/EditorSidebarQuest.vue b/src/components/Editor/EditorSidebarQuest.vue
index 08f1625..baf06f1 100644
--- a/src/components/Editor/EditorSidebarQuest.vue
+++ b/src/components/Editor/EditorSidebarQuest.vue
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { useSessionStore, type EditorQuest } from '@/stores/session';
import { computed, toRefs } from 'vue';
-import { stripColourCodes } from '@/lib/util';
+import { stripColorCodes } from '@/lib/util';
const props = defineProps<{
quest: EditorQuest;
@@ -25,7 +25,7 @@ const selected = computed(() => {
<span id="quest-title">
<font-awesome-icon class="quest-icon" :icon="['far', 'fa-compass']"/>
<span id="quest-name">
- <span id="quest-display-name">{{ stripColourCodes(quest.display.name) }}</span>
+ <span id="quest-display-name">{{ stripColorCodes(quest.display.name) }}</span>
<code id="quest-display-id">{{ quest.id }}</code>
</span>
</span>
diff --git a/src/components/Editor/Quest/QuestTasksOptionsPanel.vue b/src/components/Editor/Quest/QuestTasksOptionsPanel.vue
index 12b1263..a79e636 100644
--- a/src/components/Editor/Quest/QuestTasksOptionsPanel.vue
+++ b/src/components/Editor/Quest/QuestTasksOptionsPanel.vue
@@ -1,9 +1,10 @@
<script setup lang="ts">
import { useSessionStore, type EditorQuest } from '@/stores/session';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
import EditorOptionsPanel from '@/components/Editor/EditorOptionsPanel.vue';
import TaskConfiguration from '@/components/Editor/Quest/Task/TaskConfiguration.vue';
import Button from '@/components/Control/Button.vue';
+import AddTaskModal from './Task/Modal/AddTaskModal.vue';
const props = defineProps<{
questId: string;
@@ -14,6 +15,19 @@ const sessionStore = useSessionStore();
const quest = computed(() => {
return sessionStore.getQuestById(props.questId) as EditorQuest;
});
+
+const showAddTaskModal = ref(false);
+
+const addTask = (newId: string, newType: string) => {
+ sessionStore.getQuestById(props.questId)!.tasks[newId] = {
+ id: newId,
+ config: {
+ type: newType,
+ },
+ };
+
+ showAddTaskModal.value = false;
+};
</script>
<template>
@@ -21,6 +35,7 @@ const quest = computed(() => {
<div id="options">
<h2>Tasks <code>({{ Object.keys(quest.tasks).length }})</code></h2>
+ <p v-if="Object.keys(quest.tasks).length === 0" class="error-text">This quest does not have any tasks.</p>
<TaskConfiguration v-for="(task, taskId) in quest.tasks" :key="taskId" :taskId="String(taskId)" :quest="quest" />
<div id="controls">
@@ -29,10 +44,18 @@ const quest = computed(() => {
:icon="['fas', 'fa-plus']"
type="solid"
label="Add task"
+ @click="showAddTaskModal = true"
/>
</div>
</div>
</EditorOptionsPanel>
+
+ <AddTaskModal
+ v-if="quest"
+ v-model="showAddTaskModal"
+ :questId="questId"
+ @add="addTask"
+ />
</template>
diff --git a/src/components/Editor/Quest/Task/Modal/AddTaskModal.vue b/src/components/Editor/Quest/Task/Modal/AddTaskModal.vue
new file mode 100644
index 0000000..57139bb
--- /dev/null
+++ b/src/components/Editor/Quest/Task/Modal/AddTaskModal.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import Modal from '@/components/Control/Modal.vue';
+import Button from '@/components/Control/Button.vue';
+import { computed, ref } from 'vue';
+import { useSessionStore } from '@/stores/session';
+import { validateTaskId } from '@/lib/util';
+
+const model = defineModel();
+
+const emit = defineEmits(['add']);
+
+const session = useSessionStore();
+
+const props = defineProps({
+ questId: {
+ type: String,
+ required: true,
+ },
+});
+
+const knownTasks = computed(() => session.getQuestById(props.questId)!.tasks);
+const knownTaskTypes = computed(() => session.getKnownTaskTypes());
+
+const newId = ref('');
+const newType = ref('');
+const unknownTaskType = computed(() => !knownTaskTypes.value.includes(newType.value));
+const invalidTaskId = computed(() => !validateTaskId(newId.value));
+const duplicateTaskId = computed(() => knownTasks.value[newId.value] !== undefined);
+
+const newTypeDescription = computed(() => session.getTaskDefinitionByTaskType(newType.value)?.description);
+</script>
+
+<template>
+ <Modal v-model="model">
+ <template v-slot:header>
+ <h2>Add new task</h2>
+ </template>
+
+ <template v-slot:body>
+ <div id="body">
+ <div class="option-group">
+ <label for="new-type">Task ID</label>
+ <input id="new-id" name="new-id" type="text" v-model="newId" />
+ <p v-if="invalidTaskId" class="error-text">Invalid task ID.</p>
+ <p v-if="duplicateTaskId" class="error-text">Task ID already exists.</p>
+ </div>
+ <div class="option-group">
+ <label for="new-type">Task type</label>
+ <multiselect
+ id="new-type"
+ v-model="newType"
+ :options="knownTaskTypes"
+ :searchable="true"
+ placeholder="Select a new type"
+ ></multiselect>
+ <p v-if="unknownTaskType" class="error-text">Invalid task type.</p>
+ </div>
+ <p v-if="newTypeDescription">{{ newTypeDescription }}</p>
+ <p>A task ID must be unique, alphanumeric, and not contain any spaces.</p>
+ <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'"
+ :disabled="unknownTaskType || invalidTaskId || duplicateTaskId"
+ @click="emit('add', newId, newType)"
+ ></Button>
+ </div>
+ </div>
+ </template>
+ </Modal>
+</template>
+
+<style scoped>
+#confirm {
+ display: flex;
+ justify-content: flex-end;
+}
+
+#body {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+</style> \ No newline at end of file
diff --git a/src/components/Editor/Quest/Task/Modal/ChangeTaskModal.vue b/src/components/Editor/Quest/Task/Modal/ChangeTaskModal.vue
index f8ffef7..c6b5921 100644
--- a/src/components/Editor/Quest/Task/Modal/ChangeTaskModal.vue
+++ b/src/components/Editor/Quest/Task/Modal/ChangeTaskModal.vue
@@ -1,17 +1,26 @@
<script setup lang="ts">
import Modal from '@/components/Control/Modal.vue';
import Button from '@/components/Control/Button.vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { useSessionStore } from '@/stores/session';
const model = defineModel();
const emit = defineEmits(['update']);
-defineProps({
+const session = useSessionStore();
+
+const props = defineProps({
taskId: String,
+ currentTaskType: String,
});
+const knownTaskTypes = computed(() => session.getKnownTaskTypes());
+
const newType = ref('');
+const unknownTaskType = computed(() => !knownTaskTypes.value.includes(newType.value));
+const noChange = computed(() => newType.value === props.currentTaskType);
+const newTypeDescription = computed(() => session.getTaskDefinitionByTaskType(newType.value)?.description);
</script>
<template>
@@ -24,8 +33,16 @@ const newType = ref('');
<div id="body">
<div class="option-group">
<label for="new-type">New type</label>
- <input id="new-type" name="new-type" type="text" v-model="newType" />
+ <multiselect
+ id="new-type"
+ v-model="newType"
+ :options="knownTaskTypes"
+ :searchable="true"
+ placeholder="Select a new type"
+ ></multiselect>
</div>
+ <p v-if="unknownTaskType" class="error-text">Invalid task type.</p>
+ <p v-if="newTypeDescription">{{ newTypeDescription }}</p>
<p>Any configured options for this task will be overwritten.</p>
<div id="confirm" class="control-group">
<Button
@@ -37,6 +54,7 @@ const newType = ref('');
type="solid"
:icon="['fas', 'fa-check']"
:label="'Change'"
+ :disabled="unknownTaskType || noChange"
@click="emit('update', newType)"
></Button>
</div>
diff --git a/src/components/Editor/Quest/Task/TaskConfiguration.vue b/src/components/Editor/Quest/Task/TaskConfiguration.vue
index 7006f18..0646ad4 100644
--- a/src/components/Editor/Quest/Task/TaskConfiguration.vue
+++ b/src/components/Editor/Quest/Task/TaskConfiguration.vue
@@ -65,6 +65,16 @@ const deleteValue = (fieldName: string) => {
const showChangeModal = ref(false);
+const updateTaskType = (newType: string) => {
+ sessionStore.getQuestById(props.quest.id)!.tasks[props.taskId].config = {
+ type: newType
+ };
+ showChangeModal.value = false;
+}
+
+const deleteTaskType = (taskId: string) => {
+ delete sessionStore.getQuestById(props.quest.id)!.tasks[taskId];
+}
</script>
<template>
@@ -87,6 +97,7 @@ const showChangeModal = ref(false);
<Button
:icon="['fas', 'fa-trash']"
:label="'Delete'"
+ @click="deleteTaskType(props.taskId)"
></Button>
</div>
</div>
@@ -105,7 +116,7 @@ const showChangeModal = ref(false);
<div v-if="taskDefintion">
<TaskConfigurationRow
v-for="fieldName in [...givenRequiredFields, ...missingFields, ...remainingGivenFields]"
- :key="`${quest.id}-${props.taskId}-${fieldName}`"
+ :key="`${quest.id}-${props.taskId}-${taskType}-${fieldName}`"
:required="requiredFields.includes(fieldName)"
:configKey="fieldName"
:initialValue="taskConfig[fieldName]"
@@ -130,6 +141,9 @@ const showChangeModal = ref(false);
<ChangeTaskModal
v-model="showChangeModal"
:taskId="props.taskId"
+ :currentTaskType="taskType"
+ :key="`change-task-${props.taskId}`"
+ @update="updateTaskType"
/>
</template>
diff --git a/src/components/Editor/Quest/Task/TaskConfigurationRow.vue b/src/components/Editor/Quest/Task/TaskConfigurationRow.vue
index d77e450..f68ce97 100644
--- a/src/components/Editor/Quest/Task/TaskConfigurationRow.vue
+++ b/src/components/Editor/Quest/Task/TaskConfigurationRow.vue
@@ -2,7 +2,8 @@
import { useSessionStore } from '@/stores/session';
import { computed, ref, toRefs, watch } from 'vue';
import TrueFalseSwitch from '@/components/Control/TrueFalseSwitch.vue';
-import materials from '@/data/materials.json';
+import ItemStackPicker from '@/components/Control/ItemStackPicker.vue';
+import materials from '@/lib/materials';
const props = defineProps({
taskType: {
@@ -33,7 +34,9 @@ const currentValue = ref(props.initialValue ||
? false
: (props.type === 'material-list' || props.type === 'string-list'
? []
- : ''
+ : props.type === 'itemstack'
+ ? null
+ : ''
)));
if (props.initialValue !== currentValue.value) {
@@ -81,6 +84,9 @@ const addValue = (searchQuery: any) => {
<!-- Data type 'string-list' -->
<multiselect v-else-if="props.type === 'string-list'" v-model="currentValue" :options="[]" @tag="addValue"
:multiple="true" :taggable="true" :searchable="true" placeholder="Enter string" />
+
+ <!-- Data type 'itemstack' -->
+ <ItemStackPicker v-else-if="props.type === 'itemstack'" :value="currentValue" @update="updateValue" />
<div v-if="showDescription || error" id="task-configuration-row-info">
<p v-if="error" class="error">A value is required.</p>
generated by cgit v1.2.3-70-g09d2 (git 2.51.2) at 2025-11-25 08:36:02 +0000