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