mirror of
https://github.com/YouHaveTrouble/GuildMaster.git
synced 2026-05-12 06:26:59 +00:00
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:
@@ -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
@@ -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;
|
||||
|
||||
@@ -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
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user