diff options
Diffstat (limited to 'components/editor/quest')
6 files changed, 140 insertions, 61 deletions
diff --git a/components/editor/quest/EditorQuestOptionsPanel.vue b/components/editor/quest/EditorQuestOptionsPanel.vue index 6c1c8b1..bc5f7ef 100644 --- a/components/editor/quest/EditorQuestOptionsPanel.vue +++ b/components/editor/quest/EditorQuestOptionsPanel.vue @@ -17,7 +17,6 @@ const knownCategories = computed(() => { const knownQuests = computed(() => { return sessionStore.session.quests.map((quest) => quest.id); }); - </script> <template> @@ -25,87 +24,126 @@ const knownQuests = computed(() => { <div id="options"> <div class="option-group"> <label for="quest-category">Category</label> - <multiselect id="quest-category" v-model="quest.options.category" :options="knownCategories" :searchable="true" - placeholder="No category"></multiselect> + <multiselect + id="quest-category" + v-model="quest.options.category" + :options="knownCategories" + :searchable="true" + placeholder="No category" + ></multiselect> </div> <div class="option-group"> <label for="quest-requirements">Requirements</label> - <multiselect id="quest-requirements" v-model="quest.options.requirements" :options="knownQuests" - :searchable="true" :taggable="true" :multiple="true" placeholder="Add requirement"></multiselect> + <multiselect + id="quest-requirements" + v-model="quest.options.requirements" + :options="knownQuests" + :searchable="true" + :taggable="true" + :multiple="true" + placeholder="Add requirement" + ></multiselect> <p class="description"> - This quest will only be available if the player has completed all of the quests listed above. + This quest will only be available if the player has completed all of the quests listed + above. </p> </div> <h2>Quest options</h2> <div class="option-group"> - <Checkbox id="quest-permissionrequired" label="Require permission to start quest" - description="Players must have permission to start the quest." v-model="quest.options.permissionRequired" /> + <Checkbox + id="quest-permissionrequired" + label="Require permission to start quest" + description="Players must have permission to start the quest." + v-model="quest.options.permissionRequired" + /> </div> <div class="option-group"> - <Checkbox id="quest-cancellable" label="Allow players to cancel quest" - description="Players can cancel the quest after they have started it." v-model="quest.options.cancellable" /> + <Checkbox + id="quest-cancellable" + label="Allow players to cancel quest" + description="Players can cancel the quest after they have started it." + v-model="quest.options.cancellable" + /> </div> <div class="option-group"> - <Checkbox id="quest-countstowardslimit" label="Count towards quest limit" + <Checkbox + id="quest-countstowardslimit" + label="Count towards quest limit" description="Quest will count towards the player's quest started limit." - v-model="quest.options.countsTowardsLimit" /> + v-model="quest.options.countsTowardsLimit" + /> </div> <div class="option-group"> - <Checkbox id="quest-repeatable" label="Allow players to repeat quest" + <Checkbox + id="quest-repeatable" + label="Allow players to repeat quest" description="Quest can be completed again after it has been completed once." - v-model="quest.options.repeatable" /> + v-model="quest.options.repeatable" + /> </div> <div class="option-group"> - <Checkbox id="quest-autostart" label="Automatically start quest" + <Checkbox + id="quest-autostart" + label="Automatically start quest" description="Quest will start automatically when the player has unlocked it." - v-model="quest.options.autostart" /> + v-model="quest.options.autostart" + /> </div> - <h2>Cooldown</h2> <div class="option-group"> - <Checkbox id="quest-cooldown" label="Enable cooldown" + <Checkbox + id="quest-cooldown" + label="Enable cooldown" description="Players will have to wait a certain amount of time before they can start the quest again." - v-model="quest.options.cooldown.enabled" /> + v-model="quest.options.cooldown.enabled" + /> </div> <div class="option-group"> - <label for="quest-cooldown-time"> - Cooldown (in seconds) - </label> - <input id="quest-cooldown-time" type="number" v-model="quest.options.cooldown.time" - :disabled="!quest.options.cooldown.enabled" /> + <label for="quest-cooldown-time"> Cooldown (in seconds) </label> + <input + id="quest-cooldown-time" + type="number" + v-model="quest.options.cooldown.time" + :disabled="!quest.options.cooldown.enabled" + /> <p class="description"> - Common values are: <code>3600</code> (1 hour), <code>86400</code> (24 hours), <code>604800</code> (7 days), - <code>2592000</code> (30 days) + Common values are: <code>3600</code> (1 hour), <code>86400</code> (24 hours), + <code>604800</code> (7 days), <code>2592000</code> (30 days) </p> </div> <h2>Time limit</h2> <div class="option-group"> - <Checkbox id="quest-timelimit" label="Enable time limit" + <Checkbox + id="quest-timelimit" + label="Enable time limit" description="Players will be required to complete the quest within a certain amount of time, otherwise it will be automatically cancelled." - v-model="quest.options.timeLimit.enabled" /> + v-model="quest.options.timeLimit.enabled" + /> </div> <div class="option-group"> - <label for="quest-timelimit-time"> - Time limit (in seconds) - </label> - <input id="quest-timelimit-time" type="number" v-model="quest.options.timeLimit.time" - :disabled="!quest.options.timeLimit.enabled" /> + <label for="quest-timelimit-time"> Time limit (in seconds) </label> + <input + id="quest-timelimit-time" + type="number" + v-model="quest.options.timeLimit.time" + :disabled="!quest.options.timeLimit.enabled" + /> <p class="description"> - Common values are: <code>3600</code> (1 hour), <code>86400</code> (24 hours), <code>604800</code> (7 days), - <code>2592000</code> (30 days) + Common values are: <code>3600</code> (1 hour), <code>86400</code> (24 hours), + <code>604800</code> (7 days), <code>2592000</code> (30 days) </p> </div> </div> diff --git a/components/editor/quest/EditorQuestTasksOptionsPanel.vue b/components/editor/quest/EditorQuestTasksOptionsPanel.vue index cb4b109..a9e3ac3 100644 --- a/components/editor/quest/EditorQuestTasksOptionsPanel.vue +++ b/components/editor/quest/EditorQuestTasksOptionsPanel.vue @@ -29,22 +29,40 @@ const addTask = (newId: string, newType: string) => { <template> <EditorOptionsPanel v-if="quest"> <div id="options"> - <h2>Tasks <code>({{ Object.keys(quest.tasks).length }})</code></h2> + <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> - <EditorTaskConfiguration v-for="(task, taskId) in quest.tasks" :key="taskId" :taskId="String(taskId)" - :quest="quest" /> + <p v-if="Object.keys(quest.tasks).length === 0" class="error-text"> + This quest does not have any tasks. + </p> + <EditorTaskConfiguration + v-for="(task, taskId) in quest.tasks" + :key="taskId" + :taskId="String(taskId)" + :quest="quest" + /> <div id="controls"> - <Button id="add-task" :icon="['fas', 'plus']" type="solid" label="Add task" @click="showAddTaskModal = true" /> + <Button + id="add-task" + :icon="['fas', 'plus']" + type="solid" + label="Add task" + @click="showAddTaskModal = true" + /> </div> </div> </EditorOptionsPanel> - <EditorTaskModalCreate v-if="quest" v-model="showAddTaskModal" :questId="questId" @add="addTask" /> + <EditorTaskModalCreate + v-if="quest" + v-model="showAddTaskModal" + :questId="questId" + @add="addTask" + /> </template> - <style scoped> #options { display: flex; diff --git a/components/editor/quest/modal/EditorQuestModalDelete.vue b/components/editor/quest/modal/EditorQuestModalDelete.vue index e81bcc7..c4e1682 100644 --- a/components/editor/quest/modal/EditorQuestModalDelete.vue +++ b/components/editor/quest/modal/EditorQuestModalDelete.vue @@ -13,10 +13,18 @@ defineProps({ <template v-slot:header> <h2>Really delete quest '{{ questId }}'?</h2> </template> - <p>Are you sure you want to delete this quest? The quests editor does not have undo functionality (yet)! </p> + <p> + Are you sure you want to delete this quest? The quests editor does not have undo functionality + (yet)! + </p> <div id="confirm" class="control-group"> <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button> - <Button type="solid" :icon="['fas', 'trash']" :label="'Delete'" @click="emit('delete')"></Button> + <Button + type="solid" + :icon="['fas', 'trash']" + :label="'Delete'" + @click="emit('delete')" + ></Button> </div> </Modal> </template> @@ -27,4 +35,4 @@ defineProps({ justify-content: flex-end; margin-top: 1rem; } -</style>
\ No newline at end of file +</style> diff --git a/components/editor/quest/modal/EditorQuestModalDuplicate.vue b/components/editor/quest/modal/EditorQuestModalDuplicate.vue index 73a2fd0..6c333fb 100644 --- a/components/editor/quest/modal/EditorQuestModalDuplicate.vue +++ b/components/editor/quest/modal/EditorQuestModalDuplicate.vue @@ -17,7 +17,6 @@ const newQuestId = ref(props.questId); const isDuplicate = computed(() => { return session.getQuestById(newQuestId.value!) !== undefined; }); - </script> <template> @@ -36,8 +35,13 @@ const isDuplicate = computed(() => { <p>A Quest ID must be unique, alphanumeric, and not contain any spaces.</p> <div id="confirm" class="control-group"> <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button> - <Button type="solid" :icon="['fas', 'check']" :label="'Duplicate'" :disabled="isDuplicate" - @click="emit('duplicate', newQuestId)"></Button> + <Button + type="solid" + :icon="['fas', 'check']" + :label="'Duplicate'" + :disabled="isDuplicate" + @click="emit('duplicate', newQuestId)" + ></Button> </div> </div> </template> @@ -55,4 +59,4 @@ const isDuplicate = computed(() => { flex-direction: column; gap: 0.5rem; } -</style>
\ No newline at end of file +</style> diff --git a/components/editor/quest/modal/EditorQuestModalRename.vue b/components/editor/quest/modal/EditorQuestModalRename.vue index 3d846aa..13c4810 100644 --- a/components/editor/quest/modal/EditorQuestModalRename.vue +++ b/components/editor/quest/modal/EditorQuestModalRename.vue @@ -17,7 +17,6 @@ const newQuestId = ref(props.questId); const isDuplicate = computed(() => { return session.getQuestById(newQuestId.value!) !== undefined; }); - </script> <template> @@ -36,8 +35,13 @@ const isDuplicate = computed(() => { <p>A Quest ID must be unique, alphanumeric, and not contain any spaces.</p> <div id="confirm" class="control-group"> <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button> - <Button type="solid" :icon="['fas', 'check']" :label="'Rename'" :disabled="isDuplicate" - @click="emit('update', newQuestId)"></Button> + <Button + type="solid" + :icon="['fas', 'check']" + :label="'Rename'" + :disabled="isDuplicate" + @click="emit('update', newQuestId)" + ></Button> </div> </div> </template> @@ -55,4 +59,4 @@ const isDuplicate = computed(() => { flex-direction: column; gap: 0.5rem; } -</style>
\ No newline at end of file +</style> diff --git a/components/editor/quest/modal/EditorQuestModalYaml.vue b/components/editor/quest/modal/EditorQuestModalYaml.vue index 365055c..c7c4936 100644 --- a/components/editor/quest/modal/EditorQuestModalYaml.vue +++ b/components/editor/quest/modal/EditorQuestModalYaml.vue @@ -6,7 +6,7 @@ const emit = defineEmits(['delete']); const props = defineProps({ questId: { required: true, - type: String + type: String, }, }); @@ -18,16 +18,16 @@ const yamlString = ref(''); const open = () => { const quest = session.getQuestById(props.questId); if (!quest) { - return + return; } const mappedObject = mapJsonQuestToYamlObject(quest); yamlString.value = stringify(mappedObject); showModal.value = true; -} +}; defineExpose({ - open -}) + open, +}); </script> <template> @@ -36,12 +36,19 @@ defineExpose({ <h2>YAML</h2> </template> - <p>YAML file for <code>{{ props.questId }}</code></p> + <p> + YAML file for <code>{{ props.questId }}</code> + </p> <textarea rows="20" :value="yamlString" readonly /> <div id="confirm" class="control-group"> - <Button type="solid" :icon="['fas', 'check']" :label="'Close'" @click="showModal = false"></Button> + <Button + type="solid" + :icon="['fas', 'check']" + :label="'Close'" + @click="showModal = false" + ></Button> </div> </Modal> </template> @@ -56,4 +63,4 @@ defineExpose({ textarea { width: 100%; } -</style>
\ No newline at end of file +</style> |