Merge branch 'master' of https://github.com/YouHaveTrouble/adventurers-guild-game into unfrick-the-savefile

# Conflicts:
#	src/views/AdventurerView.vue
This commit is contained in:
2023-03-31 22:25:16 +02:00
22 changed files with 300 additions and 134 deletions
+58 -34
View File
@@ -1,11 +1,11 @@
<template>
<div class="adventurer-section">
<section class="recruit">
<h1>Applying adventurers</h1>
<div class="adventurers">
<div v-if="adventurerForHire">
<adventurer-tile class="hire-tile" :adventurer="adventurerForHire"/>
<div class="decision">
<div class="adventurer-section">
<section class="recruit panel pinned-paper">
<h1>Applying adventurers</h1>
<div class="adventurers">
<div v-if="adventurerForHire">
<adventurer-tile class="hire-tile" :adventurer="adventurerForHire"/>
<div class="decision">
<span
title="Hire"
@click="hireAdventurer()"
@@ -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,23 +46,32 @@ 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 type {Guild} from "@/classes/Guild";
export default defineComponent({
name: "RecruitView",
components: {AdventurerTile},
data: () => {
return {
currentlyForHire: null as Adventurer | null,
adventurersForHire: [] as Array<Adventurer>,
}
},
props: {
guild: {
type: Object as PropType<Guild>,
default() {
return {} as Guild
},
required: true,
},
adventurers: {
type: Object as PropType<{ [key: string]: Adventurer }>,
default() {
return {} as { [key: string]: Adventurer };
},
required: true,
},
adventurerForHire: {
type: Object as PropType<Adventurer|null>,
@@ -90,22 +100,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;
@@ -113,6 +129,7 @@ export default defineComponent({
align-items: center;
flex-wrap: wrap;
gap: 1rem;
.adventurer-tile {
display: flex;
justify-content: center;
@@ -120,10 +137,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;
@@ -134,6 +153,7 @@ export default defineComponent({
}
}
}
.decision {
display: flex;
flex-direction: row;
@@ -141,17 +161,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;
+53 -20
View File
@@ -1,26 +1,35 @@
<template>
<main>
<section class="title">
<section class="title panel note-paper">
<h1>Guild Master</h1>
<h3>Adventurer's guild management game</h3>
<small>v{{version}}</small>
<small>v{{ version }}</small>
</section>
<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 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>
</template>
@@ -44,46 +53,69 @@ export default defineComponent({
guild: {
type: Object as PropType<Guild>,
default: () => new Guild(1, 0) as Guild,
required: true,
},
}
});
</script>
<style lang="scss">
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-block: 1rem;
gap: 1rem;
.upgrades {
max-width: 45rem;
width: 100%;
}
}
.title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2.5rem;
padding-block: 2.5rem;
text-align: center;
width: 100%;
max-width: 45rem;
gap: 0.5rem;
h1 {
font-size: 4rem;
line-height: 0.75;
white-space: pre-wrap;
margin: 0;
}
h3 {
margin: 0;
line-height: 0.9;
}
small {
font-size: 0.9rem;
font-weight: bold;
line-height: 0.25;
}
}
.coffer {
text-align: center;
p {
font-size: 1.5rem;
font-weight: bold;
}
}
.upgrade {
text-align: center;
.wipe-save {
display: inline-flex;
font-weight: bold;
@@ -91,6 +123,7 @@ export default defineComponent({
color: #d52121;
cursor: pointer;
}
p {
margin: 0;
font-size: 1.5rem;
+5 -2
View File
@@ -104,18 +104,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>,
@@ -124,10 +127,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)
},
+49 -23
View File
@@ -1,15 +1,27 @@
<template>
<section class="technical-view">
<h1>Socials</h1>
<div class="socials">
<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>
<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,30 +43,44 @@ export default defineComponent({
align-items: center;
gap: 1rem;
padding-block: 1rem;
h1 {
font-size: 3rem;
line-height: 1;
margin: 0;
}
.socials {
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
padding: 1rem;
.links {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
.link {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.05rem;
text-decoration: underline;
font-size: 1.5rem;
color: #000;
font-weight: bold;
}
}
}
.link {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.05rem;
text-decoration: underline;
font-size: 1.5rem;
color: #000;
font-weight: bold;
}
.icon {
width: 2rem;
height: 2rem;