blob: bc5f7efa5f0fc3a6673fd25e06560fe0c5ad3c8f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
<script setup lang="ts">
import { useSessionStore, type EditorQuest } from '@/stores/session';
import { computed } from 'vue';
const props = defineProps<{
questId: string;
}>();
const sessionStore = useSessionStore();
const quest = computed(() => {
return sessionStore.getQuestById(props.questId) as EditorQuest;
});
const knownCategories = computed(() => {
return sessionStore.session.categories.map((category) => category.id);
});
const knownQuests = computed(() => {
return sessionStore.session.quests.map((quest) => quest.id);
});
</script>
<template>
<EditorOptionsPanel v-if="quest">
<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>
</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>
<p class="description">
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"
/>
</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"
/>
</div>
<div class="option-group">
<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"
/>
</div>
<div class="option-group">
<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"
/>
</div>
<div class="option-group">
<Checkbox
id="quest-autostart"
label="Automatically start quest"
description="Quest will start automatically when the player has unlocked it."
v-model="quest.options.autostart"
/>
</div>
<h2>Cooldown</h2>
<div class="option-group">
<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"
/>
</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"
/>
<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)
</p>
</div>
<h2>Time limit</h2>
<div class="option-group">
<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"
/>
</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"
/>
<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)
</p>
</div>
</div>
</EditorOptionsPanel>
</template>
<style>
#options {
display: flex;
flex-direction: column;
gap: 1rem;
}
.description {
font-size: 0.8em;
}
h2 {
border-bottom: 1px solid var(--color-border);
}
</style>
|
