mirror of
https://github.com/YouHaveTrouble/GuildMaster.git
synced 2026-05-12 06:26:59 +00:00
fix up styles for the pages,
fix up some code formatting to be more consistent
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="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