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

fix up styles for the pages,

Browse Source 
fix up some code formatting to be more consistent
This commit is contained in:
YouHaveTrouble
2023-03-31 21:44:56 +02:00
parent 101ea0ffb5
commit 6f777332a4
10 changed files with 224 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AdventurerList.vue
+6 -4
View File
@@ -18,14 +18,15 @@ export default defineComponent({
name: "AdventurerList", name: "AdventurerList",
components: {AdventurerMiniComponent}, components: {AdventurerMiniComponent},
data: () => ({ data: () => ({
currentAdventurer: null as Adventurer|null currentAdventurer: null as Adventurer | null
}), }),
props: { props: {
adventurers: { adventurers: {
type: Object as PropType<{[key: string]: Adventurer}>, type: Object as PropType<{ [key: string]: Adventurer }>,
default() { default() {
return {} as {[key: string]: Adventurer}; return {} as { [key: string]: Adventurer };
}, },
required: true,
}, },
}, },
@@ -39,12 +40,13 @@ export default defineComponent({
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.slot { .slot {
padding: 0; padding: 0;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border: 2px solid #000; border: 2px solid #000;
background-color: rgba(0,0,0, 0.2); background-color: rgba(0, 0, 0, 0.2);
cursor: pointer; cursor: pointer;
border-radius: 0.2rem; border-radius: 0.2rem;
} }
src/components/AdventurerMiniComponent.vue
+1 -3
View File
@@ -65,12 +65,10 @@ export default defineComponent({
default() { default() {
return {} as {[key: string]: Adventurer}; return {} as {[key: string]: Adventurer};
}, },
required: true,
}, },
}, },
methods: { methods: {
print(a:string) {
console.log(a);
},
closeSelect() { closeSelect() {
this.selection = false; this.selection = false;
} }
src/components/AdventurerTile.vue
+9 -4
View File
@@ -4,7 +4,8 @@
:title="adventurer.name + (adventurer.busy ? ' (busy)' : '')" :title="adventurer.name + (adventurer.busy ? ' (busy)' : '')"
> >
<img :src="adventurer.portrait" :alt="adventurer.name" draggable="false"> <img :src="adventurer.portrait" :alt="adventurer.name" draggable="false">
<div class="level" :title="adventurer.isMaxLevel() ? 'Max level' : ''">{{adventurer.level}}<span v-if="adventurer.isMaxLevel()">⇪</span></div> <div class="level" :title="adventurer.isMaxLevel() ? 'Max level' : ''">{{ adventurer.level }}<span
v-if="adventurer.isMaxLevel()">⇪</span></div>
<div class="exp"></div> <div class="exp"></div>
</article> </article>
</template> </template>
@@ -12,7 +13,7 @@
<script lang="ts"> <script lang="ts">
import type {Adventurer} from "@/classes/Adventurer"; import type {Adventurer} from "@/classes/Adventurer";
import {defineComponent, type PropType } from "vue"; import {defineComponent, type PropType} from "vue";
export default defineComponent({ export default defineComponent({
name: "AdventurerTile", name: "AdventurerTile",
@@ -22,6 +23,7 @@ export default defineComponent({
default() { default() {
return {} as Adventurer; return {} as Adventurer;
}, },
required: true,
} }
}, },
data: () => ({ data: () => ({
@@ -49,19 +51,21 @@ export default defineComponent({
overflow: clip; overflow: clip;
font-size: 5rem; font-size: 5rem;
line-height: 1; line-height: 1;
color: rgba(0,0,0, 0.75); color: rgba(0, 0, 0, 0.75);
position: relative; position: relative;
.level { .level {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
font-size: 1rem; font-size: 1rem;
min-width: 1rem; min-width: 1rem;
background-color: rgba(0,0,0, 0.75); background-color: rgba(0, 0, 0, 0.75);
border-bottom-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem;
padding: 0.1rem; padding: 0.1rem;
color: #fff; color: #fff;
} }
.exp { .exp {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -71,6 +75,7 @@ export default defineComponent({
background-color: rgba(203, 33, 213, 0.75); background-color: rgba(203, 33, 213, 0.75);
transition: width 1s linear; transition: width 1s linear;
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
src/components/ChangelogComponent.vue
+43 -40
View File
@@ -1,18 +1,18 @@
<template> <template>
<div class="changelog panel pinned-paper"> <div class="changelog panel pinned-paper">
<div class="nail top-left"> <div class="nail top-left">
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/> <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
</div>
<div class="nail top-right">
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
</div>
<h1>Changelog</h1>
<div class="changelog-entry" v-for="release in releases">
<hr>
<h2>Version {{ release.name }}</h2>
<pre>{{ release.body }}</pre>
</div>
</div> </div>
<div class="nail top-right">
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
</div>
<h1>Changelog</h1>
<div class="changelog-entry" v-for="release in releases">
<hr>
<h2>Version {{ release.name }}</h2>
<pre>{{ release.body }}</pre>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -20,48 +20,48 @@ import {defineComponent} from "vue";
export default defineComponent({ export default defineComponent({
name: "ChangelogComponent", name: "ChangelogComponent",
data: () => ({ data: () => ({
releases: [] as Array<any>, releases: [] as Array<any>,
lastPage: 1, lastPage: 1,
}), }),
methods: { methods: {
async getReleases(page: number): Promise<void> { async getReleases(page: number): Promise<void> {
const result = await fetch("https://api.github.com/repos/YouHaveTrouble/GuildMaster/releases?per_page=10") const result = await fetch("https://api.github.com/repos/YouHaveTrouble/GuildMaster/releases?per_page=10")
.catch((e) => { .catch((e) => {
return null; return null;
}); });
if (result === null) return; if (result === null) return;
const json = await result.json(); const json = await result.json();
for (const release of json) { for (const release of json) {
const version = {} as any; const version = {} as any;
version.body = release.body.trim(); version.body = release.body.trim();
version.name = release.name; version.name = release.name;
if (release.body.length === 0) continue; if (release.body.length === 0) continue;
this.releases.push(version); this.releases.push(version);
} }
}
},
async mounted() {
this.getReleases(1);
} }
},
async mounted() {
this.getReleases(1);
}
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.changelog { .changelog {
padding: 3rem; padding-block: 3rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
max-width: 45rem; max-width: 45rem;
width: 100%; width: 100%;
h1 { h1 {
font-size: 3rem; font-size: 3rem;
@@ -75,10 +75,12 @@ export default defineComponent({
h2 { h2 {
margin: 0; margin: 0;
padding-inline: 1rem;
} }
hr { hr {
border: 0; border: 0;
width: calc(100% - 2rem);
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
@@ -87,6 +89,7 @@ export default defineComponent({
margin: 0; margin: 0;
white-space: pre-wrap; white-space: pre-wrap;
font-family: 'EB Garamond', serif; font-family: 'EB Garamond', serif;
padding-inline: 1rem;
} }
} }
} }
src/components/QuestMissive.vue
+13 -5
View File
@@ -40,8 +40,8 @@
</div> </div>
<h3>Rewards</h3> <h3>Rewards</h3>
<div class="rewards"> <div class="rewards">
<span>Gold: <b>{{missive.goldReward}}</b></span> <span>Gold: <b>{{ missive.goldReward }}</b></span>
<span>Exp: <b>{{missive.expReward}}</b></span> <span>Exp: <b>{{ missive.expReward }}</b></span>
</div> </div>
</article> </article>
</template> </template>
@@ -57,16 +57,18 @@ export default defineComponent({
components: {AdventurerComponent}, components: {AdventurerComponent},
props: { props: {
missive: { missive: {
type: Object as PropType<Quest|any>, type: Object as PropType<Quest | any>,
default() { default() {
return {} as Quest; return {} as Quest;
}, },
required: true,
}, },
adventurers: { adventurers: {
type: Object as PropType<{[key: string]: Adventurer}>, type: Object as PropType<{ [key: string]: Adventurer }>,
default() { default() {
return {} as {[key: string]: Adventurer}; return {} as { [key: string]: Adventurer };
}, },
required: true,
}, },
}, },
data: () => { data: () => {
@@ -126,6 +128,7 @@ export default defineComponent({
height: 100%; height: 100%;
z-index: -5; z-index: -5;
overflow: hidden; overflow: hidden;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -137,6 +140,7 @@ export default defineComponent({
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1; line-height: 1;
} }
h3 { h3 {
font-size: 1.15rem; font-size: 1.15rem;
margin: 0; margin: 0;
@@ -148,6 +152,7 @@ export default defineComponent({
margin: 0.5rem auto; margin: 0.5rem auto;
position: relative; position: relative;
height: 1.25rem; height: 1.25rem;
.progress { .progress {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -158,6 +163,7 @@ export default defineComponent({
background-color: rgba(0, 128, 0, 0.65); background-color: rgba(0, 128, 0, 0.65);
transition: width 250ms linear; transition: width 250ms linear;
} }
.percentage { .percentage {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -221,6 +227,7 @@ export default defineComponent({
background-size: contain; background-size: contain;
opacity: 1; opacity: 1;
z-index: -4; z-index: -4;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -241,6 +248,7 @@ export default defineComponent({
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
width: 45%; width: 45%;
height: 35%; height: 35%;
src/components/UpgradesList.vue
+18 -15
View File
@@ -1,21 +1,21 @@
<template> <template>
<section class="upgrades"> <section class="upgrades">
<h2>Upgrades</h2> <h2>Upgrades</h2>
<div class="upgrade"> <div class="upgrade">
<span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span> <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
<button <button
v-if="guild.adventurerCapacity.nextLevelCost" v-if="guild.adventurerCapacity.nextLevelCost"
:disabled="guild.gold < guild.adventurerCapacity.nextLevelCost" :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
@click="upgradeAdventurerCapacity()" @click="upgradeAdventurerCapacity()"
> >
Upgrade ({{guild.adventurerCapacity.nextLevelCost.toFixed(0)}} gold) Upgrade ({{ guild.adventurerCapacity.nextLevelCost.toFixed(0) }} gold)
</button> </button>
</div> </div>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Guild } from "@/classes/Guild"; import {Guild} from "@/classes/Guild";
import {defineComponent, type PropType} from "vue"; import {defineComponent, type PropType} from "vue";
export default defineComponent({ export default defineComponent({
@@ -25,7 +25,8 @@ export default defineComponent({
type: Object as PropType<Guild>, type: Object as PropType<Guild>,
default() { default() {
return new Guild(1, 0) as Guild; return new Guild(1, 0) as Guild;
} },
required: true,
} }
}, },
methods: { methods: {
@@ -47,11 +48,13 @@ export default defineComponent({
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
h2 { h2 {
font-size: 1.75rem; font-size: 1.75rem;
margin: 2rem 0 0; margin: 2rem 0 0;
padding: 0; padding: 0;
} }
.upgrade { .upgrade {
text-align: center; text-align: center;
font-size: 1.25rem; font-size: 1.25rem;
src/views/AdventurerView.vue
+55 -38
View File
@@ -1,11 +1,11 @@
<template> <template>
<div class="adventurer-section"> <div class="adventurer-section">
<section class="recruit"> <section class="recruit panel pinned-paper">
<h1>Applying adventurers</h1> <h1>Applying adventurers</h1>
<div class="adventurers"> <div class="adventurers">
<div v-if="currentlyForHire"> <div v-if="currentlyForHire">
<adventurer-tile class="hire-tile" :adventurer="currentlyForHire"/> <adventurer-tile class="hire-tile" :adventurer="currentlyForHire"/>
<div class="decision"> <div class="decision">
<span <span
title="Hire" title="Hire"
@click="hireAdventurer(currentlyForHire)" @click="hireAdventurer(currentlyForHire)"
@@ -13,31 +13,32 @@
> >
✔ ✔
</span> </span>
<span <span
:title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''" :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
:class="{disabled: Object.keys(adventurers).length <= 0}" :class="{disabled: Object.keys(adventurers).length <= 0}"
@click="dismissAdventurer()" @click="dismissAdventurer()"
> >
✗ ✗
</span> </span>
</div>
</div>
<div v-else>
<span>Noone applied as of now. Check back later!</span>
</div>
</div>
</section>
<section class="collection panel pinned-paper">
<h1>Recruited adventurers ({{ Object.keys(adventurers).length }} /
{{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
<div class="adventurers">
<div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
<AdventurerTile class="entry" :adventurer="adventurer"/>
<b>{{ adventurer.name }}</b>
</div> </div>
</div> </div>
<div v-else> </section>
<span>Noone applied as of now. Check back later!</span> </div>
</div>
</div>
</section>
<section class="collection">
<h1>Recruited adventurers ({{ Object.keys(adventurers).length }} / {{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
<div class="adventurers">
<div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
<AdventurerTile class="entry" :adventurer="adventurer" />
<b>{{ adventurer.name }}</b>
</div>
</div>
</section>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -45,7 +46,7 @@ import type {PropType} from "vue";
import {defineComponent} from "vue"; import {defineComponent} from "vue";
import AdventurerTile from "@/components/AdventurerTile.vue"; import AdventurerTile from "@/components/AdventurerTile.vue";
import type {Adventurer} from "@/classes/Adventurer"; import type {Adventurer} from "@/classes/Adventurer";
import { loadAdventurersForHire } from "@/GameData"; import {loadAdventurersForHire} from "@/GameData";
import type {Guild} from "@/classes/Guild"; import type {Guild} from "@/classes/Guild";
export default defineComponent({ export default defineComponent({
@@ -53,7 +54,7 @@ export default defineComponent({
components: {AdventurerTile}, components: {AdventurerTile},
data: () => { data: () => {
return { return {
currentlyForHire: null as Adventurer|null, currentlyForHire: null as Adventurer | null,
adventurersForHire: [] as Array<Adventurer>, adventurersForHire: [] as Array<Adventurer>,
} }
}, },
@@ -63,12 +64,14 @@ export default defineComponent({
default() { default() {
return {} as Guild return {} as Guild
}, },
required: true,
}, },
adventurers: { adventurers: {
type: Object as PropType<{ [key: string]: Adventurer }>, type: Object as PropType<{ [key: string]: Adventurer }>,
default() { default() {
return {} as { [key: string]: Adventurer }; return {} as { [key: string]: Adventurer };
}, },
required: true,
}, },
lastRecruitTime: { lastRecruitTime: {
type: Number as PropType<number>, type: Number as PropType<number>,
@@ -78,7 +81,7 @@ export default defineComponent({
}, },
}, },
methods: { methods: {
getRandomAdventurer(): Adventurer|null { getRandomAdventurer(): Adventurer | null {
if (this.adventurersForHire.length <= 0) return null; if (this.adventurersForHire.length <= 0) return null;
const randomId = this.adventurersForHire.length * Math.random() << 0; const randomId = this.adventurersForHire.length * Math.random() << 0;
return this.adventurersForHire[randomId]; return this.adventurersForHire[randomId];
@@ -99,7 +102,7 @@ export default defineComponent({
window.localStorage.setItem("currentlyForHire", adventurer.id); window.localStorage.setItem("currentlyForHire", adventurer.id);
}, },
hireAdventurer(adventurer: Adventurer|any): void { hireAdventurer(adventurer: Adventurer | any): void {
if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return; if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
this.adventurers[adventurer.id] = adventurer; this.adventurers[adventurer.id] = adventurer;
this.currentlyForHire = null; this.currentlyForHire = null;
@@ -148,22 +151,28 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.adventurer-section { .adventurer-section {
padding-block: 1rem;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-content: center;
flex-direction: column;
gap: 1rem;
width: 100%; width: 100%;
section { section {
max-width: 1280px;
width: 100%;
text-align: center; text-align: center;
padding-block: 1rem; padding: 1rem;
width: calc(100% - 2rem);
max-width: 45rem;
margin: 0 auto;
} }
h1 { h1 {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
} }
.adventurers { .adventurers {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -171,6 +180,7 @@ export default defineComponent({
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
.adventurer-tile { .adventurer-tile {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -178,10 +188,12 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
font-size: 1.1rem; font-size: 1.1rem;
.entry { .entry {
height: 7rem; height: 7rem;
width: 7rem; width: 7rem;
} }
b { b {
line-height: 1; line-height: 1;
text-align: center; text-align: center;
@@ -192,6 +204,7 @@ export default defineComponent({
} }
} }
} }
.decision { .decision {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -199,17 +212,21 @@ export default defineComponent({
align-items: center; align-items: center;
font-size: 2rem; font-size: 2rem;
gap: 1rem; gap: 1rem;
span { span {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #fff; color: #fff;
} }
&.disabled { &.disabled {
color: rgba(0,0,0, 0.5); color: rgba(0, 0, 0, 0.5);
cursor: default; cursor: default;
} }
} }
} }
.hire-tile { .hire-tile {
width: 8rem; width: 8rem;
height: 8rem; height: 8rem;
src/views/HomeView.vue
+50 -49
View File
@@ -1,36 +1,36 @@
<template> <template>
<main> <main>
<section class="title panel note-paper"> <section class="title panel note-paper">
<h1>Guild Master</h1> <h1>Guild Master</h1>
<h3>Adventurer's guild management game</h3> <h3>Adventurer's guild management game</h3>
<small>v{{ version }}</small> <small>v{{ version }}</small>
</section> </section>
<section class="upgrades panel pinned-paper"> <section class="upgrades panel pinned-paper">
<div class="nail top-left"> <div class="nail top-left">
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/> <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
</div> </div>
<div class="nail top-right"> <div class="nail top-right">
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/> <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
</div> </div>
<section class="coffer"> <section class="coffer">
<p>Coffer: {{ guild.gold }} gold</p> <p>Coffer: {{ guild.gold }} gold</p>
</section> </section>
<section class="upgrade"> <section class="upgrade">
<p>Guild level: {{ guild.level }}</p> <p>Guild level: {{ guild.level }}</p>
<button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()"> <button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
<span>Upgrade guild level</span><br> <span>Upgrade guild level</span><br>
<span>({{ guild.displayUpgradeCost }})</span> <span>({{ guild.displayUpgradeCost }})</span>
</button> </button>
</section> </section>
<section class="upgrade"> <section class="upgrade">
<UpgradesList :guild="guild"/> <UpgradesList :guild="guild"/>
</section> </section>
<section class="upgrade"> <section class="upgrade">
<span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span> <span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
</section> </section>
</section> </section>
</main> </main>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -42,20 +42,20 @@ import {version} from "../../package.json"
import UpgradesList from "@/components/UpgradesList.vue"; import UpgradesList from "@/components/UpgradesList.vue";
export default defineComponent({ export default defineComponent({
name: "GuildView", name: "GuildView",
components: {UpgradesList}, components: {UpgradesList},
data: () => { data: () => {
return { return {
version: version, version: version,
}
},
props: {
guild: {
type: Object as PropType<Guild>,
default: () => new Guild(1, 0) as Guild,
required: true,
},
} }
},
props: {
guild: {
type: Object as PropType<Guild>,
default: () => new Guild(1, 0) as Guild,
required: true,
},
}
}); });
</script> </script>
@@ -69,8 +69,8 @@ main {
gap: 1rem; gap: 1rem;
.upgrades { .upgrades {
padding: 1rem; max-width: 45rem;
width: 45rem; width: 100%;
} }
} }
@@ -79,15 +79,16 @@ main {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 2.5rem; padding-block: 2.5rem;
text-align: center; text-align: center;
width: max-content; width: 100%;
max-width: 45rem;
gap: 0.5rem; gap: 0.5rem;
h1 { h1 {
font-size: 4rem; font-size: 4rem;
line-height: 0.75; line-height: 0.75;
white-space: pre-wrap;
margin: 0; margin: 0;
} }
src/views/QuestView.vue
+5 -2
View File
@@ -103,18 +103,21 @@ export default defineComponent({
default() { default() {
return new Guild(1, 0); return new Guild(1, 0);
}, },
required: true,
}, },
adventurers: { adventurers: {
type: Object as PropType<{ [key: string]: Adventurer }>, type: Object as PropType<{ [key: string]: Adventurer }>,
default() { default() {
return {} as { [key: string]: Adventurer }; return {} as { [key: string]: Adventurer };
}, },
required: true,
}, },
quests: { quests: {
type: Object as PropType<{ [key: string]: Quest }>, type: Object as PropType<{ [key: string]: Quest }>,
default() { default() {
return {} as { [key: string]: Quest }; return {} as { [key: string]: Quest };
}, },
required: true,
}, },
lastRecruitTime: { lastRecruitTime: {
type: Number as PropType<number>, type: Number as PropType<number>,
@@ -123,10 +126,10 @@ export default defineComponent({
} }
}, },
}, },
emits: [ 'finalizeQuest', 'wipeSave', 'recruitActionTaken'], emits: ['finalizeQuest', 'wipeSave', 'recruitActionTaken'],
methods: { methods: {
// This is a workaround for vue not reporting Quest as Quest in v-for // This is a workaround for vue not reporting Quest as Quest in v-for
finalizeQuest(quest: any|Quest): void { finalizeQuest(quest: any | Quest): void {
if (quest.progressPoints < quest.maxProgress) return; if (quest.progressPoints < quest.maxProgress) return;
this.$emit('finalizeQuest', quest) this.$emit('finalizeQuest', quest)
}, },
src/views/TechnicalView.vue
+24 -26
View File
@@ -1,29 +1,27 @@
<template> <template>
<section class="technical-view"> <section class="technical-view">
<div class="socials panel pinned-paper"> <div class="socials panel pinned-paper">
<div class="nail top-left small"> <div class="nail top-left small">
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/> <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
</div> </div>
<div class="nail top-right small"> <div class="nail top-right small">
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/> <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
</div> </div>
<h1>Socials</h1> <h1>Socials</h1>
<div class="links"> <div class="links">
<a class="link" href="https://discord.gg/j8KK5dGBps"> <a class="link" href="https://discord.gg/j8KK5dGBps">
<img class="icon" src="/img/icons/discord.svg" alt="Discord"/> <img class="icon" src="/img/icons/discord.svg" alt="Discord"/>
Discord Discord
</a> </a>
<a class="link" href="https://github.com/YouHaveTrouble/GuildMaster"> <a class="link" href="https://github.com/YouHaveTrouble/GuildMaster">
<img class="icon" src="/img/icons/github.svg" alt="GitHub"/> <img class="icon" src="/img/icons/github.svg" alt="GitHub"/>
GitHub GitHub
</a> </a>
</div> </div>
</div>
<ChangelogComponent/>
</div> </section>
<ChangelogComponent/>
</section>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -31,8 +29,8 @@ import {defineComponent} from "vue";
import ChangelogComponent from "@/components/ChangelogComponent.vue"; import ChangelogComponent from "@/components/ChangelogComponent.vue";
export default defineComponent({ export default defineComponent({
name: "TechnicalView", name: "TechnicalView",
components: {ChangelogComponent}, components: {ChangelogComponent},
}) })
</script> </script>