YouHaveTrouble/GuildMaster
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/GuildMaster.git synced 2026-05-12 06:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

actually bearable mobile view for quests board

Browse Source
This commit is contained in:
youhavetrouble
2023-09-23 15:29:47 +02:00
parent 2a38461a47
commit b49a30bb6e
5 changed files with 149 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/QuestView.vue
+54 -101
View File
@@ -1,89 +1,56 @@
<template>
<section>
<div class="guild" v-if="guild.level >= 7 && Object.keys(quests.S).length > 0">
<h1>Rank S Quests</h1>
<section class="missives">
<QuestMissive
v-for="(missive, key, index) in quests.S"
:key="key"
:adventurers="adventurers"
:missive="missive"
@click="finalizeQuest(missive)"
/>
</section>
</div>
<div class="guild" v-if="guild.level >= 6 && Object.keys(quests.A).length > 0">
<h1>Rank A Quests</h1>
<section class="missives">
<QuestMissive
v-for="(missive, key, index) in quests.A"
:key="key"
:adventurers="adventurers"
:missive="missive"
@click="finalizeQuest(missive)"
/>
</section>
</div>
<div class="guild" v-if="guild.level >= 5 && Object.keys(quests.B).length > 0">
<h1>Rank B Quests</h1>
<section class="missives">
<QuestMissive
v-for="(missive, key, index) in quests.B"
:key="key"
:adventurers="adventurers"
:missive="missive"
@click="finalizeQuest(missive)"
/>
</section>
</div>
<div class="guild" v-if="guild.level >= 4 && Object.keys(quests.C).length > 0">
<h1>Rank C Quests</h1>
<section class="missives">
<QuestMissive
v-for="(missive, key, index) in quests.C"
:key="key"
:adventurers="adventurers"
:missive="missive"
@click="finalizeQuest(missive)"
/>
</section>
</div>
<div class="guild" v-if="guild.level >= 3 && Object.keys(quests.D).length > 0">
<h1>Rank D Quests</h1>
<section class="missives">
<QuestMissive
v-for="(missive, key, index) in quests.D"
:key="key"
:adventurers="adventurers"
:missive="missive"
@click="finalizeQuest((missive))"
/>
</section>
</div>
<div class="guild" v-if="guild.level >= 2 && Object.keys(quests.E).length > 0">
<h1>Rank E Quests</h1>
<section class="missives">
<QuestMissive
v-for="(missive, key, index) in quests.E"
:key="key"
:adventurers="adventurers"
:missive="missive"
@click="finalizeQuest(missive)"
/>
</section>
</div>
<div class="guild" v-if="Object.keys(quests.F).length > 0">
<h1>Rank F Quests</h1>
<section class="missives">
<QuestMissive
v-for="(missive, key, index) in quests.F"
:key="key"
:adventurers="adventurers"
:missive="missive"
@click="finalizeQuest(missive)"
/>
</section>
</div>
<QuestGroup
v-if="guild.level >= 7 && Object.keys(quests.S).length > 0"
:adventurers="adventurers"
:quests="quests.S"
:finalizeQuest="finalizeQuest"
label="Rank S Quests"
/>
<QuestGroup
v-if="guild.level >= 6 && Object.keys(quests.A).length > 0"
:adventurers="adventurers"
:quests="quests.A"
:finalizeQuest="finalizeQuest"
label="Rank A Quests"
/>
<QuestGroup
v-if="guild.level >= 5 && Object.keys(quests.B).length > 0"
:adventurers="adventurers"
:quests="quests.B"
:finalizeQuest="finalizeQuest"
label="Rank B Quests"
/>
<QuestGroup
v-if="guild.level >= 4 && Object.keys(quests.C).length > 0"
:adventurers="adventurers"
:quests="quests.C"
:finalizeQuest="finalizeQuest"
label="Rank C Quests"
/>
<QuestGroup
v-if="guild.level >= 3 && Object.keys(quests.D).length > 0"
:adventurers="adventurers"
:quests="quests.D"
:finalizeQuest="finalizeQuest"
label="Rank D Quests"
/>
<QuestGroup
v-if="guild.level >= 2 && Object.keys(quests.E).length > 0"
:adventurers="adventurers"
:quests="quests.E"
:finalizeQuest="finalizeQuest"
label="Rank E Quests"
/>
<QuestGroup
v-if="Object.keys(quests.F).length > 0"
:adventurers="adventurers"
:quests="quests.F"
:finalizeQuest="finalizeQuest"
label="Rank F Quests"
/>
</section>
</template>
@@ -94,10 +61,11 @@ import type {Adventurer} from "@/classes/Adventurer";
import type {Quest} from "@/classes/Quest";
import {Guild} from "@/classes/Guild";
import QuestMissive from "@/components/QuestMissive.vue";
import QuestGroup from "@/components/QuestGroup.vue";
export default defineComponent({
name: "QuestView",
components: {QuestMissive, AdventurerComponent},
components: {QuestGroup, QuestMissive, AdventurerComponent},
props: {
guild: {
type: Object as PropType<Guild>,
@@ -137,21 +105,6 @@ export default defineComponent({
align-items: center;
width: 100%;
padding-bottom: 0.5rem;
h1 {
font-size: 3rem;
text-align: center;
}
.missives {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: calc(100% - 2rem);
justify-content: center;
align-items: stretch;
padding-inline: 1rem;
gap: 1rem;
}
}
</style>