aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/assets/base.css5
-rw-r--r--src/components/Control/Button.vue48
-rw-r--r--src/components/Editor/EditorPane.vue54
-rw-r--r--src/components/Editor/Quest/Modal/DuplicateQuestModal.vue69
-rw-r--r--src/components/Editor/Quest/Modal/RenameQuestModal.vue12
-rw-r--r--src/components/Editor/Quest/QuestOptionsPanel.vue7
-rw-r--r--src/main.ts4
-rw-r--r--src/stores/session.ts28
8 files changed, 201 insertions, 26 deletions
diff --git a/src/assets/base.css b/src/assets/base.css
index 2b200d8..8331bf0 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -219,3 +219,8 @@ input[type="checkbox"] {
font-weight: 700;
}
}
+
+.error-text {
+ color: var(--color-false);
+ font-size: 0.8rem;
+} \ No newline at end of file
diff --git a/src/components/Control/Button.vue b/src/components/Control/Button.vue
index 044cca1..efd91c2 100644
--- a/src/components/Control/Button.vue
+++ b/src/components/Control/Button.vue
@@ -1,5 +1,5 @@
<script setup lang="ts">
-defineProps({
+const props = defineProps({
type: {
type: String,
required: false,
@@ -7,11 +7,20 @@ defineProps({
},
label: String,
icon: Array<String>,
+ disabled: Boolean,
});
+
+const emit = defineEmits(['click']);
+
+const onClick = (event: MouseEvent) => {
+ if (!props.disabled) {
+ emit('click', event);
+ }
+};
</script>
<template>
- <a id="button" :class="{text: type === 'text', solid: type === 'solid'}" >
+ <a id="button" :class="{text: type === 'text', solid: type === 'solid', disabled: disabled}" @click.stop="onClick">
<font-awesome-icon :icon="icon" />
{{ label }}
</a>
@@ -31,6 +40,19 @@ defineProps({
transition: color 0.3s;
font-weight: 700;
cursor: pointer;
+
+ &.disabled {
+ color: var(--color-text-mute);
+ cursor: not-allowed;
+ }
+
+ &:hover {
+ color: var(--color-primary-dark);
+ }
+
+ &.disabled:hover {
+ color: var(--color-text-mute);
+ }
}
.solid {
@@ -41,14 +63,20 @@ defineProps({
border-radius: 4px;
font-weight: 700;
cursor: pointer;
+
+ &.disabled {
+ background-color: var(--color-border);
+ color: var(--color-text-mute);
+ cursor: not-allowed;
+ }
+
+ &:hover {
+ background-color: var(--color-primary-dark);
+ }
+
+ &.disabled:hover {
+ background-color: var(--color-border);
+ }
}
-.text:hover {
- color: var(--color-primary-dark);
-}
-
-.solid:hover {
- background-color: var(--color-primary-dark);
-}
-
</style> \ No newline at end of file
diff --git a/src/components/Editor/EditorPane.vue b/src/components/Editor/EditorPane.vue
index 22458cb..21d1f80 100644
--- a/src/components/Editor/EditorPane.vue
+++ b/src/components/Editor/EditorPane.vue
@@ -9,15 +9,17 @@ import CategoryChildrenOptionsPanel from '@/components/Editor/Category/CategoryC
import Button from '@/components/Control/Button.vue';
import DeleteQuestModal from '@/components/Editor/Quest/Modal/DeleteQuestModal.vue';
import RenameQuestModal from '@/components/Editor/Quest/Modal/RenameQuestModal.vue';
+import DuplicateQuestModal from '@/components/Editor/Quest/Modal/DuplicateQuestModal.vue';
const sessionStore = useSessionStore();
const selectedType = computed(() => sessionStore.editor.selected.type);
const selectedId = computed(() => sessionStore.editor.selected.id);
+
const selectedName = computed(() => {
- if (selectedType.value === 'Quest') {
+ if (selectedType.value === 'Quest' && selectedId.value) {
return sessionStore.getQuestById(selectedId.value)?.display.name;
- } else if (selectedType.value === 'Category') {
+ } else if (selectedType.value === 'Category' && selectedId.value) {
return sessionStore.getCategoryById(selectedId.value)?.display.name;
} else {
return '';
@@ -25,6 +27,8 @@ const selectedName = computed(() => {
});
const categoryFromSelectedQuest = computed(() => {
+ if (!selectedId.value || selectedType.value !== 'Quest') return null;
+
const quest = sessionStore.getQuestById(selectedId.value);
if (quest) {
return sessionStore.getCategoryById(quest.options.category) || null;
@@ -35,6 +39,25 @@ const categoryFromSelectedQuest = computed(() => {
const showDeleteModal = ref(false);
const showRenameModal = ref(false);
+const showDuplicateModal = ref(false);
+
+const renameQuest = (oldId: string, newId: string) => {
+ sessionStore.changeQuestId(oldId, newId);
+ sessionStore.editor.selected.id = newId;
+ showRenameModal.value = false;
+};
+
+const deleteQuest = (questId: string) => {
+ sessionStore.deleteQuest(questId);
+ sessionStore.setEditorSelected(null, null);
+ showDeleteModal.value = false;
+};
+
+const duplicateQuest = (oldId: string, newId: string) => {
+ sessionStore.duplicateQuest(oldId, newId);
+ sessionStore.editor.selected.id = newId;
+ showDuplicateModal.value = false;
+};
</script>
<template>
@@ -67,6 +90,12 @@ const showRenameModal = ref(false);
:label="'YAML'"
></Button>
<Button
+ v-if="selectedType === 'Quest'"
+ :icon="['fas', 'fa-copy']"
+ :label="'Duplicate'"
+ @click="showDuplicateModal = true"
+ ></Button>
+ <Button
:icon="['fas', 'fa-pen']"
:label="'Rename'"
@click="showRenameModal = true"
@@ -76,6 +105,12 @@ const showRenameModal = ref(false);
:label="'Delete'"
@click="showDeleteModal = true"
></Button>
+ <Button
+ type="solid"
+ :disabled="true"
+ :icon="['fas', 'fa-save']"
+ :label="'Save'"
+ ></Button>
</span>
</div>
@@ -89,15 +124,26 @@ const showRenameModal = ref(false);
</div>
<DeleteQuestModal
- v-if="selectedType === 'Quest'"
+ v-if="selectedType === 'Quest' && selectedId"
v-model="showDeleteModal"
+ :key="`delete-quest-${selectedId}`"
:questId="selectedId"
+ @delete="() => selectedId && deleteQuest(selectedId)"
/>
<RenameQuestModal
- v-if="selectedType === 'Quest'"
+ v-if="selectedType === 'Quest' && selectedId"
v-model="showRenameModal"
+ :key="`rename-quest-${selectedId}`"
:questId="selectedId"
+ @update="newId => selectedId && renameQuest(selectedId, newId)"
/>
+ <DuplicateQuestModal
+ v-if="selectedType === 'Quest' && selectedId"
+ v-model="showDuplicateModal"
+ :key="`duplicate-quest-${selectedId}`"
+ :questId="selectedId"
+ @duplicate="newId => selectedId && duplicateQuest(selectedId, newId)"
+ />
</template>
<style scoped>
diff --git a/src/components/Editor/Quest/Modal/DuplicateQuestModal.vue b/src/components/Editor/Quest/Modal/DuplicateQuestModal.vue
new file mode 100644
index 0000000..bcd3782
--- /dev/null
+++ b/src/components/Editor/Quest/Modal/DuplicateQuestModal.vue
@@ -0,0 +1,69 @@
+<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';
+
+const model = defineModel();
+
+const emit = defineEmits(['duplicate']);
+
+const props = defineProps({
+ questId: String,
+});
+
+const session = useSessionStore();
+
+const newQuestId = ref(props.questId);
+
+const isDuplicate = computed(() => {
+ return session.getQuestById(newQuestId.value!) !== undefined;
+});
+
+</script>
+
+<template>
+ <Modal v-model="model">
+ <template v-slot:header>
+ <h2>Duplicate '{{ questId }}'</h2>
+ </template>
+
+ <template v-slot:body>
+ <div id="body">
+ <div class="option-group">
+ <label for="new-type">ID of new quest</label>
+ <input id="new-type" name="new-type" type="text" v-model="newQuestId" />
+ </div>
+ <p v-if="isDuplicate" class="error-text">Name is not unique.</p>
+ <p>A Quest 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="'Duplicate'"
+ :disabled="isDuplicate"
+ @click="emit('duplicate', newQuestId)"
+ ></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/Modal/RenameQuestModal.vue b/src/components/Editor/Quest/Modal/RenameQuestModal.vue
index 5b1e0ed..2ad1481 100644
--- a/src/components/Editor/Quest/Modal/RenameQuestModal.vue
+++ b/src/components/Editor/Quest/Modal/RenameQuestModal.vue
@@ -1,7 +1,8 @@
<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();
@@ -11,7 +12,14 @@ const props = defineProps({
questId: String,
});
+const session = useSessionStore();
+
const newQuestId = ref(props.questId);
+
+const isDuplicate = computed(() => {
+ return session.getQuestById(newQuestId.value!) !== undefined;
+});
+
</script>
<template>
@@ -26,6 +34,7 @@ const newQuestId = ref(props.questId);
<label for="new-type">New quest ID</label>
<input id="new-type" name="new-type" type="text" v-model="newQuestId" />
</div>
+ <p v-if="isDuplicate" class="error-text">Name is not unique.</p>
<p>A Quest ID must be unique, alphanumeric, and not contain any spaces.</p>
<div id="confirm" class="control-group">
<Button
@@ -37,6 +46,7 @@ const newQuestId = ref(props.questId);
type="solid"
:icon="['fas', 'fa-check']"
:label="'Rename'"
+ :disabled="isDuplicate"
@click="emit('update', newQuestId)"
></Button>
</div>
diff --git a/src/components/Editor/Quest/QuestOptionsPanel.vue b/src/components/Editor/Quest/QuestOptionsPanel.vue
index 3c1e599..a462126 100644
--- a/src/components/Editor/Quest/QuestOptionsPanel.vue
+++ b/src/components/Editor/Quest/QuestOptionsPanel.vue
@@ -3,7 +3,6 @@ import { useSessionStore, type EditorQuest } from '@/stores/session';
import { computed, ref } from 'vue';
import EditorOptionsPanel from '@/components/Editor/EditorOptionsPanel.vue';
import Checkbox from '@/components/Control/Checkbox.vue';
-import DeleteQuestModal from '@/components/Editor/Quest/Modal/DeleteQuestModal.vue';
const props = defineProps<{
questId: string;
@@ -21,7 +20,6 @@ const knownQuests = computed(() => {
return sessionStore.session.quests.map((quest) => quest.id);
});
-const showDeleteModal = ref(false);
</script>
<template>
@@ -124,11 +122,6 @@ const showDeleteModal = ref(false);
</div>
</div>
</EditorOptionsPanel>
-
- <DeleteQuestModal
- v-model="showDeleteModal"
- :questId="props.questId"
- />
</template>
<style src="vue-multiselect/dist/vue-multiselect.css" />
diff --git a/src/main.ts b/src/main.ts
index 6e14a1e..f2d6127 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,7 @@ import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from "@fortawesome/fontawesome-svg-core";
-import { faFolder, faCaretDown, faCaretUp, faChevronRight, faTriangleExclamation, faPen, faTrash, faCode, faCheck, faXmark, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faFolder, faCaretDown, faCaretUp, faChevronRight, faTriangleExclamation, faPen, faTrash, faCode, faCheck, faXmark, faPlus, faCopy, faSave } from "@fortawesome/free-solid-svg-icons";
import { faCompass } from '@fortawesome/free-regular-svg-icons';
import App from './App.vue'
@@ -25,6 +25,8 @@ library.add(faCode);
library.add(faCheck);
library.add(faXmark);
library.add(faPlus);
+library.add(faCopy);
+library.add(faSave);
app.component('font-awesome-icon', FontAwesomeIcon)
app.component('multiselect', Multiselect)
diff --git a/src/stores/session.ts b/src/stores/session.ts
index 22db332..1cc8dc7 100644
--- a/src/stores/session.ts
+++ b/src/stores/session.ts
@@ -81,8 +81,8 @@ export const useSessionStore = defineStore('session', {
},
editor: {
selected: {
- type: '' as 'Quest' | 'Category',
- id: '',
+ type: '' as 'Quest' | 'Category' | null,
+ id: '' as string | null,
}
}
}),
@@ -97,12 +97,15 @@ export const useSessionStore = defineStore('session', {
return this.session.categories
},
getQuestById: (state) => (id: string) => {
+ if (!id) return null;
return state.session.quests.find(quest => quest.id === id)
},
getCategoryById: (state) => (id: string) => {
+ if (!id) return null;
return state.session.categories.find(quest => quest.id === id)
},
getQuestsInCategory: (state) => (id: string) => {
+ if (!id) return [];
return state.session.quests.filter(quest => quest.options.category === id)
},
getTaskDefinitions: (state) => {
@@ -138,12 +141,31 @@ export const useSessionStore = defineStore('session', {
// })
// this.editor.categories = categories;
// },
- setEditorSelected(type: 'Quest' | 'Category', id: string) {
+ setEditorSelected(type: 'Quest' | 'Category' | null, id: string | null) {
this.editor.selected.type = type
this.editor.selected.id = id
},
setTaskDefinitions(definitions: { [key: string]: TaskDefinition }) {
this.session.taskDefinitions = definitions
+ },
+ changeQuestId(oldId: string, newId: string) {
+ const quest = this.getQuestById(oldId);
+ if (!quest) return;
+
+ quest.id = newId
+ },
+ deleteQuest(id: string) {
+ const index = this.session.quests.findIndex(quest => quest.id === id)
+ if (index === -1) return;
+ this.session.quests.splice(index, 1)
+ },
+ duplicateQuest(id: string, newQuestId: string) {
+ const quest = this.getQuestById(id);
+ if (!quest) return;
+
+ const newQuest = JSON.parse(JSON.stringify(quest));
+ newQuest.id = newQuestId;
+ this.session.quests.push(newQuest);
}
}
});
generated by cgit v1.2.3-70-g09d2 (git 2.51.2) at 2025-11-25 05:01:02 +0000