fix up styles for the pages,

fix up some code formatting to be more consistent
This commit is contained in:
2023-03-31 21:44:56 +02:00
parent 101ea0ffb5
commit 6f777332a4
10 changed files with 224 additions and 186 deletions
+50 -49
View File
@@ -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;
}