mirror of
https://github.com/YouHaveTrouble/GuildMaster.git
synced 2026-05-11 22:16:59 +00:00
export quest missive to its own component
This commit is contained in:
+2
-2
@@ -5,8 +5,8 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
padding: 0 0 10rem;
|
||||
min-height: calc(100vh - 10rem);
|
||||
font-family: 'EB Garamond', serif;
|
||||
background-color: #654f32;
|
||||
overflow-y: scroll;
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<article
|
||||
class="missive"
|
||||
:class="{done: missive.maxProgress <= missive.progressPoints}"
|
||||
>
|
||||
<h2>{{ missive.title }}</h2>
|
||||
<p>{{ missive.text }}</p>
|
||||
<div class="slots">
|
||||
<button class="slot">
|
||||
<AdventurerComponent
|
||||
:adventurer="missive.adventurers[0]"
|
||||
:all-adventurers="adventurers"
|
||||
@hire-adventurer="(id) => {
|
||||
adventurers[id].busy = true;
|
||||
missive.adventurers[0] = adventurers[id];
|
||||
}"
|
||||
@free-adventurer="(id) => {
|
||||
if (missive.progressPoints >= missive.maxProgress) return;
|
||||
adventurers[id].busy = false;
|
||||
missive.adventurers.splice(0, 1);
|
||||
if (missive.adventurers.length <= 0) {
|
||||
missive.progressPoints = 0;
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { Quest } from "@/classes/Quest";
|
||||
import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
|
||||
import type { Adventurer } from "@/classes/Adventurer";
|
||||
import {defineComponent, type PropType} from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "QuestMissive",
|
||||
components: {AdventurerComponent},
|
||||
props: {
|
||||
missive: {
|
||||
type: Object as PropType<Quest>,
|
||||
},
|
||||
adventurers: {
|
||||
type: Object as PropType<{[key: string]: Adventurer}>,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.missive {
|
||||
width: min(100%, 14rem);
|
||||
text-align: center;
|
||||
border: 2px solid #000;
|
||||
padding: 0.5rem;
|
||||
position: relative;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
|
||||
&.done {
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
content: "✔";
|
||||
font-size: 5rem;
|
||||
color: green;
|
||||
transform: translate(45%, -40%);
|
||||
}
|
||||
}
|
||||
|
||||
.slots {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.slot {
|
||||
padding: 0;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border: 2px solid #000;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
border-radius: 0.2rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+24
-233
@@ -2,274 +2,106 @@
|
||||
<div class="guild" v-if="guild.level >= 7 && Object.keys(quests.S).length > 0">
|
||||
<h1>Rank S Quests</h1>
|
||||
<section class="missives">
|
||||
<div
|
||||
class="missive"
|
||||
:class="{done: missive.maxProgress <= missive.progressPoints}"
|
||||
<QuestMissive
|
||||
v-for="missive in quests.S"
|
||||
:key="missive.id"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="() => {
|
||||
if (missive.progressPoints < missive.maxProgress) return;
|
||||
$emit('finalizeQuest', missive)
|
||||
}"
|
||||
>
|
||||
<h2>{{ missive.title }}</h2>
|
||||
<p>{{ missive.text }}</p>
|
||||
<div class="slots">
|
||||
<button class="slot">
|
||||
<AdventurerComponent
|
||||
:adventurer="missive.adventurers[0]"
|
||||
:all-adventurers="adventurers"
|
||||
@hire-adventurer="(id) => {
|
||||
adventurers[id].busy = true;
|
||||
missive.adventurers[0] = adventurers[id];
|
||||
}"
|
||||
@free-adventurer="(id) => {
|
||||
if (missive.progressPoints >= missive.maxProgress) return;
|
||||
adventurers[id].busy = false;
|
||||
missive.adventurers.splice(0, 1);
|
||||
if (missive.adventurers.length <= 0) {
|
||||
missive.progressPoints = 0;
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 6 && Object.keys(quests.A).length > 0">
|
||||
<h1>Rank A Quests</h1>
|
||||
<section class="missives">
|
||||
<div
|
||||
class="missive"
|
||||
:class="{done: missive.maxProgress <= missive.progressPoints}"
|
||||
<QuestMissive
|
||||
v-for="missive in quests.A"
|
||||
:key="missive.id"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="() => {
|
||||
if (missive.progressPoints < missive.maxProgress) return;
|
||||
$emit('finalizeQuest', missive)
|
||||
}"
|
||||
>
|
||||
<h2>{{ missive.title }}</h2>
|
||||
<p>{{ missive.text }}</p>
|
||||
<div class="slots">
|
||||
<button class="slot">
|
||||
<AdventurerComponent
|
||||
:adventurer="missive.adventurers[0]"
|
||||
:all-adventurers="adventurers"
|
||||
@hire-adventurer="(id) => {
|
||||
adventurers[id].busy = true;
|
||||
missive.adventurers[0] = adventurers[id];
|
||||
}"
|
||||
@free-adventurer="(id) => {
|
||||
if (missive.progressPoints >= missive.maxProgress) return;
|
||||
adventurers[id].busy = false;
|
||||
missive.adventurers.splice(0, 1);
|
||||
if (missive.adventurers.length <= 0) {
|
||||
missive.progressPoints = 0;
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 5 && Object.keys(quests.B).length > 0">
|
||||
<h1>Rank B Quests</h1>
|
||||
<section class="missives">
|
||||
<div
|
||||
class="missive"
|
||||
:class="{done: missive.maxProgress <= missive.progressPoints}"
|
||||
<QuestMissive
|
||||
v-for="missive in quests.B"
|
||||
:key="missive.id"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="() => {
|
||||
if (missive.progressPoints < missive.maxProgress) return;
|
||||
$emit('finalizeQuest', missive)
|
||||
}"
|
||||
>
|
||||
<h2>{{ missive.title }}</h2>
|
||||
<p>{{ missive.text }}</p>
|
||||
<div class="slots">
|
||||
<button class="slot">
|
||||
<AdventurerComponent
|
||||
:adventurer="missive.adventurers[0]"
|
||||
:all-adventurers="adventurers"
|
||||
@hire-adventurer="(id) => {
|
||||
adventurers[id].busy = true;
|
||||
missive.adventurers[0] = adventurers[id];
|
||||
}"
|
||||
@free-adventurer="(id) => {
|
||||
if (missive.progressPoints >= missive.maxProgress) return;
|
||||
adventurers[id].busy = false;
|
||||
missive.adventurers.splice(0, 1);
|
||||
if (missive.adventurers.length <= 0) {
|
||||
missive.progressPoints = 0;
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 4 && Object.keys(quests.C).length > 0">
|
||||
<h1>Rank C Quests</h1>
|
||||
<section class="missives">
|
||||
<div
|
||||
class="missive"
|
||||
:class="{done: missive.maxProgress <= missive.progressPoints}"
|
||||
<QuestMissive
|
||||
v-for="missive in quests.C"
|
||||
:key="missive.id"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="() => {
|
||||
if (missive.progressPoints < missive.maxProgress) return;
|
||||
$emit('finalizeQuest', missive)
|
||||
}"
|
||||
>
|
||||
<h2>{{ missive.title }}</h2>
|
||||
<p>{{ missive.text }}</p>
|
||||
<div class="slots">
|
||||
<button class="slot">
|
||||
<AdventurerComponent
|
||||
:adventurer="missive.adventurers[0]"
|
||||
:all-adventurers="adventurers"
|
||||
@hire-adventurer="(id) => {
|
||||
adventurers[id].busy = true;
|
||||
missive.adventurers[0] = adventurers[id];
|
||||
}"
|
||||
@free-adventurer="(id) => {
|
||||
if (missive.progressPoints >= missive.maxProgress) return;
|
||||
adventurers[id].busy = false;
|
||||
missive.adventurers.splice(0, 1);
|
||||
if (missive.adventurers.length <= 0) {
|
||||
missive.progressPoints = 0;
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 3 && Object.keys(quests.D).length > 0">
|
||||
<h1>Rank D Quests</h1>
|
||||
<section class="missives">
|
||||
<div
|
||||
class="missive"
|
||||
:class="{done: missive.maxProgress <= missive.progressPoints}"
|
||||
<QuestMissive
|
||||
v-for="missive in quests.D"
|
||||
:key="missive.id"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="() => {
|
||||
if (missive.progressPoints < missive.maxProgress) return;
|
||||
$emit('finalizeQuest', missive)
|
||||
}"
|
||||
>
|
||||
<h2>{{ missive.title }}</h2>
|
||||
<p>{{ missive.text }}</p>
|
||||
<div class="slots">
|
||||
<button class="slot">
|
||||
<AdventurerComponent
|
||||
:adventurer="missive.adventurers[0]"
|
||||
:all-adventurers="adventurers"
|
||||
@hire-adventurer="(id) => {
|
||||
adventurers[id].busy = true;
|
||||
missive.adventurers[0] = adventurers[id];
|
||||
}"
|
||||
@free-adventurer="(id) => {
|
||||
if (missive.progressPoints >= missive.maxProgress) return;
|
||||
adventurers[id].busy = false;
|
||||
missive.adventurers.splice(0, 1);
|
||||
if (missive.adventurers.length <= 0) {
|
||||
missive.progressPoints = 0;
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 2 && Object.keys(quests.E).length > 0">
|
||||
<h1>Rank E Quests</h1>
|
||||
<section class="missives">
|
||||
<div
|
||||
class="missive"
|
||||
:class="{done: missive.maxProgress <= missive.progressPoints}"
|
||||
<QuestMissive
|
||||
v-for="missive in quests.E"
|
||||
:key="missive.id"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="() => {
|
||||
if (missive.progressPoints < missive.maxProgress) return;
|
||||
$emit('finalizeQuest', missive)
|
||||
}"
|
||||
>
|
||||
<h2>{{ missive.title }}</h2>
|
||||
<p>{{ missive.text }}</p>
|
||||
<div class="slots">
|
||||
<button class="slot">
|
||||
<AdventurerComponent
|
||||
:adventurer="missive.adventurers[0]"
|
||||
:all-adventurers="adventurers"
|
||||
@hire-adventurer="(id) => {
|
||||
adventurers[id].busy = true;
|
||||
missive.adventurers[0] = adventurers[id];
|
||||
}"
|
||||
@free-adventurer="(id) => {
|
||||
if (missive.progressPoints >= missive.maxProgress) return;
|
||||
adventurers[id].busy = false;
|
||||
missive.adventurers.splice(0, 1);
|
||||
if (missive.adventurers.length <= 0) {
|
||||
missive.progressPoints = 0;
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild">
|
||||
<div class="guild" v-if="Object.keys(quests.F).length > 0">
|
||||
<h1>Rank F Quests</h1>
|
||||
<section class="missives">
|
||||
<div
|
||||
class="missive"
|
||||
:class="{done: missive.maxProgress <= missive.progressPoints}"
|
||||
<QuestMissive
|
||||
v-for="missive in quests.F"
|
||||
:key="missive.id"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="() => {
|
||||
if (missive.progressPoints < missive.maxProgress) return;
|
||||
$emit('finalizeQuest', missive)
|
||||
}"
|
||||
>
|
||||
<h2>{{ missive.title }}</h2>
|
||||
<p>{{ missive.text }}</p>
|
||||
<div class="slots">
|
||||
<button class="slot">
|
||||
<AdventurerComponent
|
||||
:adventurer="missive.adventurers[0]"
|
||||
:all-adventurers="adventurers"
|
||||
@hire-adventurer="(id) => {
|
||||
adventurers[id].busy = true;
|
||||
missive.adventurers[0] = adventurers[id];
|
||||
}"
|
||||
@free-adventurer="(id) => {
|
||||
if (missive.progressPoints >= missive.maxProgress) return;
|
||||
adventurers[id].busy = false;
|
||||
missive.adventurers.splice(0, 1);
|
||||
if (missive.adventurers.length <= 0) {
|
||||
missive.progressPoints = 0;
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -281,10 +113,11 @@ import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
|
||||
import type {Adventurer} from "@/classes/Adventurer";
|
||||
import type {Quest} from "@/classes/Quest";
|
||||
import type {Guild} from "@/classes/Guild";
|
||||
import QuestMissive from "@/components/QuestMissive.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "QuestView",
|
||||
components: {AdventurerComponent},
|
||||
components: {QuestMissive, AdventurerComponent},
|
||||
props: {
|
||||
guild: {
|
||||
type: Object as PropType<Guild>,
|
||||
@@ -337,48 +170,6 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
padding-inline: 1rem;
|
||||
gap: 1rem;
|
||||
|
||||
.missive {
|
||||
width: min(100%, 14rem);
|
||||
text-align: center;
|
||||
border: 2px solid #000;
|
||||
padding: 0.5rem;
|
||||
position: relative;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
|
||||
&.done {
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
content: "✔";
|
||||
font-size: 5rem;
|
||||
color: green;
|
||||
transform: translate(45%, -40%);
|
||||
}
|
||||
}
|
||||
|
||||
.slots {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.slot {
|
||||
padding: 0;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border: 2px solid #000;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
border-radius: 0.2rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user