mirror of
https://github.com/YouHaveTrouble/GuildMaster.git
synced 2026-05-11 22:16:59 +00:00
provide backgrounds for the guild page components
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 378 KiB |
+50
-38
@@ -4,49 +4,61 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 0 10rem;
|
padding: 0 0 10rem;
|
||||||
min-height: calc(100vh - 10rem);
|
min-height: calc(100vh - 10rem);
|
||||||
font-family: 'EB Garamond', serif;
|
font-family: 'EB Garamond', serif;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background-size: 25rem;
|
background-size: 25rem;
|
||||||
background-color: rgba(87, 50, 20, 0.45);
|
background-color: rgba(87, 50, 20, 0.45);
|
||||||
background-image: url("/img/background/panels/wood.png");
|
background-image: url("/img/background/wood/cut_wood_background.png");
|
||||||
background-blend-mode: darken;
|
background-blend-mode: darken;
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
&.pinned-paper {
|
&.pinned-paper {
|
||||||
background-image: url("/img/quests/backgrounds/paper.png");
|
background-image: url("/img/quests/backgrounds/paper.png");
|
||||||
position: relative;
|
position: relative;
|
||||||
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
|
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
|
||||||
.nail {
|
|
||||||
position: absolute;
|
.nail {
|
||||||
width: 2rem;
|
position: absolute;
|
||||||
height: 2rem;
|
width: 2rem;
|
||||||
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
|
height: 2rem;
|
||||||
&.small {
|
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
&.small {
|
||||||
}
|
width: 1rem;
|
||||||
img {
|
height: 1rem;
|
||||||
width: 100%;
|
}
|
||||||
height: 100%;
|
|
||||||
}
|
img {
|
||||||
&.top-left {
|
width: 100%;
|
||||||
top: 1rem;
|
height: 100%;
|
||||||
left: 1rem;
|
}
|
||||||
}
|
|
||||||
&.top-right {
|
&.top-left {
|
||||||
top: 1rem;
|
top: 1rem;
|
||||||
right: 1rem;
|
left: 1rem;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
&.top-right {
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.note-paper {
|
||||||
|
background-image: url("/img/background/paper/small_tile_paper.png");
|
||||||
|
position: relative;
|
||||||
|
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
|
||||||
|
border-image: url("/img/borders/metal_corner.png") 30 round;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
+68
-36
@@ -1,27 +1,36 @@
|
|||||||
<template>
|
<template>
|
||||||
<main>
|
<main>
|
||||||
<section class="title">
|
<section class="title panel note-paper">
|
||||||
<h1>Guild Master</h1>
|
<h1>Guild Master</h1>
|
||||||
<h3>Adventurer's guild management game</h3>
|
<h3>Adventurer's guild management game</h3>
|
||||||
<small>v{{version}}</small>
|
<small>v{{ version }}</small>
|
||||||
</section>
|
</section>
|
||||||
<section class="coffer">
|
<section class="upgrades panel pinned-paper">
|
||||||
<p>Coffer: {{guild.gold}} gold</p>
|
<div class="nail top-left">
|
||||||
</section>
|
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
|
||||||
<section class="upgrade">
|
</div>
|
||||||
<p>Guild level: {{ guild.level }}</p>
|
<div class="nail top-right">
|
||||||
<button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
|
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
|
||||||
<span>Upgrade guild level</span><br>
|
</div>
|
||||||
<span>({{ guild.displayUpgradeCost }})</span>
|
<section class="coffer">
|
||||||
</button>
|
<p>Coffer: {{ guild.gold }} gold</p>
|
||||||
</section>
|
</section>
|
||||||
<section class="upgrade">
|
<section class="upgrade">
|
||||||
<UpgradesList :guild="guild" />
|
<p>Guild level: {{ guild.level }}</p>
|
||||||
</section>
|
<button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
|
||||||
<section class="upgrade">
|
<span>Upgrade guild level</span><br>
|
||||||
<span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
|
<span>({{ guild.displayUpgradeCost }})</span>
|
||||||
</section>
|
</button>
|
||||||
</main>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -33,23 +42,38 @@ import {version} from "../../package.json"
|
|||||||
import UpgradesList from "@/components/UpgradesList.vue";
|
import UpgradesList from "@/components/UpgradesList.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "GuildView",
|
name: "GuildView",
|
||||||
components: {UpgradesList},
|
components: {UpgradesList},
|
||||||
data: () => {
|
data: () => {
|
||||||
return {
|
return {
|
||||||
version: version,
|
version: version,
|
||||||
}
|
}
|
||||||
},
|
|
||||||
props: {
|
|
||||||
guild: {
|
|
||||||
type: Object as PropType<Guild>,
|
|
||||||
default: () => new Guild(1, 0) as Guild,
|
|
||||||
},
|
},
|
||||||
}
|
props: {
|
||||||
|
guild: {
|
||||||
|
type: Object as PropType<Guild>,
|
||||||
|
default: () => new Guild(1, 0) as Guild,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-block: 1rem;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
.upgrades {
|
||||||
|
padding: 1rem;
|
||||||
|
width: 45rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -57,33 +81,40 @@ export default defineComponent({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 2.5rem;
|
padding: 2.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
width: max-content;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
line-height: 0.75;
|
line-height: 0.75;
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 0.9;
|
line-height: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 0.25;
|
line-height: 0.25;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.coffer {
|
.coffer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.upgrade {
|
.upgrade {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.wipe-save {
|
.wipe-save {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@@ -91,6 +122,7 @@ export default defineComponent({
|
|||||||
color: #d52121;
|
color: #d52121;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user