bump version

Better look for the eyes

README.md

@@ -0,0 +1,6 @@
+<h1>Guild Master</h1>
+<h2>Adventurer's guild management game</h2>
+<p>It's a game where you manage an adventurer's guild. You can hire adventurers, assign them to quests to send them on adventures. </p>
+
+<h3>How to play</h3>
+Game is playable on <a href="https://guildmaster.yht.one/">guildmaster.yht.one</a> and is always automatically updated when new release is made.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "adventurers-guild",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "adventurers-guild",
-      "version": "0.0.1",
+      "version": "0.1.0",
       "dependencies": {
         "@vueuse/components": "^9.13.0",
         "sass": "^1.59.3",

package.json

@@ -1,10 +1,10 @@
 {
   "name": "adventurers-guild",
-  "version": "0.0.2",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check build-only",
+    "build": "run-p type-check build-only && cp -r CNAME dist/CNAME",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit"

public/img/icons/cog.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 width="800px" height="800px" viewBox="0 0 569.613 569.614"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M371.49,563.638l113.052-65.854c5.26-3.063,9.088-8.094,10.64-13.975c1.555-5.888,0.701-12.148-2.359-17.405
+			l-30.769-52.807c4.789-6.524,9.083-13.115,12.972-19.918c3.893-6.799,7.405-13.84,10.606-21.275l61.114-0.221
+			c6.086-0.021,11.915-2.464,16.202-6.781c4.287-4.32,6.687-10.165,6.665-16.255l-0.48-130.833
+			c-0.024-6.089-2.464-11.919-6.784-16.206c-4.299-4.269-10.113-6.662-16.166-6.662c-0.03,0-0.062,0-0.089,0l-61.182,0.242
+			c-6.444-14.462-14.428-28.14-23.871-40.913l30.417-53.143c6.294-11.001,2.481-25.025-8.52-31.316L369.403,5.335
+			c-5.281-3.023-11.545-3.822-17.424-2.231c-5.872,1.598-10.872,5.462-13.892,10.747L307.665,67
+			c-15.766-1.662-31.653-1.613-47.363,0.144l-30.796-52.892c-3.063-5.263-8.094-9.091-13.975-10.646
+			c-5.884-1.551-12.148-0.704-17.408,2.359L85.068,71.823c-10.949,6.38-14.657,20.429-8.28,31.38l30.765,52.831
+			c-4.761,6.484-9.048,13.076-12.953,19.899c-3.904,6.824-7.417,13.855-10.6,21.255l-61.139,0.235
+			C10.187,197.472-0.046,207.785,0,220.456L0.48,351.29c0.024,6.086,2.463,11.919,6.784,16.206
+			c4.299,4.269,10.11,6.661,16.166,6.661c0.028,0,0.058,0,0.086,0l61.203-0.229c6.432,14.452,14.413,28.131,23.868,40.915
+			l-30.413,53.141c-3.023,5.284-3.825,11.548-2.231,17.423c1.597,5.872,5.462,10.872,10.747,13.896l113.535,64.977
+			c3.596,2.056,7.513,3.032,11.38,3.032c7.962,0,15.701-4.146,19.942-11.552l30.417-53.149c15.799,1.671,31.684,1.619,47.348-0.144
+			l30.799,52.89c3.066,5.26,8.094,9.088,13.978,10.643C359.967,567.552,366.23,566.705,371.49,563.638z M341.129,465.911
+			c-4.902-8.418-14.599-12.815-24.137-10.994c-20.588,3.935-42.174,3.999-63.128,0.202c-9.572-1.735-19.184,2.741-24.015,11.181
+			l-26.748,46.745l-73.694-42.18l26.75-46.741c4.832-8.439,3.819-19.006-2.521-26.371c-13.978-16.239-24.685-34.594-31.818-54.554
+			c-3.265-9.131-11.918-15.227-21.61-15.227c-0.027,0-0.058,0-0.085,0l-53.825,0.199l-0.315-84.937l53.819-0.205
+			c9.722-0.04,18.366-6.197,21.576-15.374c3.69-10.557,7.962-20.019,13.06-28.917c5.101-8.914,11.089-17.387,18.311-25.897
+			c6.294-7.417,7.225-17.993,2.334-26.396l-27.081-46.509l73.385-42.754l27.078,46.497c4.893,8.4,14.544,12.821,24.095,11.004
+			c20.716-3.911,42.317-3.978,63.189-0.19c9.557,1.753,19.189-2.742,24.019-11.178l26.753-46.744l73.697,42.179l-26.753,46.742
+			c-4.826,8.437-3.816,19,2.521,26.368c13.956,16.221,24.669,34.587,31.842,54.59c3.271,9.119,11.919,15.202,21.604,15.202
+			c0.031,0,0.062,0,0.092,0l53.789-0.214l0.315,84.927l-53.783,0.192c-9.712,0.037-18.351,6.182-21.569,15.347
+			c-3.746,10.654-8.023,20.131-13.082,28.975c-5.064,8.847-11.067,17.338-18.356,25.958c-6.271,7.418-7.194,17.978-2.305,26.368
+			l27.078,46.472l-73.391,42.749L341.129,465.911z"/>
+		<path d="M392.531,346.458c16.472-28.773,20.746-62.24,12.047-94.232s-29.342-58.685-58.115-75.151
+			c-18.761-10.74-40.05-16.417-61.562-16.417c-44.446,0-85.762,23.944-107.822,62.485c-33.994,59.404-13.327,135.39,46.071,169.386
+			c18.764,10.737,40.052,16.411,61.564,16.411C329.158,408.943,370.475,385.001,392.531,346.458z M352.696,323.658
+			c-13.902,24.293-39.955,39.385-67.985,39.385c-13.528,0-26.934-3.58-38.764-10.349c-37.433-21.426-50.456-69.312-29.033-106.751
+			c13.905-24.291,39.958-39.385,67.987-39.385c13.528,0,26.932,3.58,38.762,10.355c18.136,10.379,31.142,27.197,36.628,47.359
+			C365.771,284.435,363.075,305.524,352.696,323.658z"/>
+	</g>
+</g>
+</svg>

public/img/icons/discord.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>

public/img/icons/github.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="24" fill="none"/>
+  <path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z"/>
+</svg>

src/App.vue

@@ -4,9 +4,10 @@ import {RouterLink, RouterView} from 'vue-router'</script>
 <template>
   <header>
     <nav>
-      <RouterLink to="/">Guild</RouterLink>
-      <RouterLink to="/quests">Quests</RouterLink>
-      <RouterLink to="/adventurers">Adventurers</RouterLink>
+      <RouterLink :to="{name: 'guild'}">Guild</RouterLink>
+      <RouterLink :to="{name: 'quests'}">Quests</RouterLink>
+      <RouterLink :to="{name: 'adventurers'}">Adventurers</RouterLink>
+      <RouterLink :to="{name: 'technical'}"><img class="icon" src="/img/icons/cog.svg" alt="Technical"></RouterLink>
     </nav>
   </header>
     <RouterView
@@ -290,14 +291,23 @@ nav {
   background-blend-mode: darken;
   background-color: rgba(0, 0, 0, 0.65);
 
+  .icon {
+    width: 2rem;
+    height: 2rem;
+    fill: white;
+    filter: invert(1);
+    transform: translateY(0.35rem);
+  }
+
   a {
     font-size: 2rem;
     color: #fff;
+    text-decoration: none;
+    &.router-link-active {
+      text-decoration: underline;
+    }
   }
 
-  &.router-link-exact-active {
-
-  }
 }
 
 </style>

src/assets/main.scss

@@ -0,0 +1,64 @@
+
+:root {
+
+}
+
+body {
+  margin: 0;
+  padding: 0 0 10rem;
+  min-height: calc(100vh - 10rem);
+  font-family: 'EB Garamond', serif;
+  overflow-y: scroll;
+  user-select: none;
+  background-size: 25rem;
+  background-color: rgba(87, 50, 20, 0.45);
+  background-image: url("/img/background/wood/cut_wood_background.png");
+  background-blend-mode: darken;
+  background-repeat: repeat;
+}
+
+#app {
+  width: 100%;
+}
+
+.panel {
+  &.pinned-paper {
+    background-image: url("/img/quests/backgrounds/paper.png");
+    position: relative;
+    filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
+
+    .nail {
+      position: absolute;
+      width: 2rem;
+      height: 2rem;
+      filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
+
+      &.small {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      &.top-left {
+        top: 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;
+  }
+}

src/components/AdventurerList.vue

@@ -18,14 +18,15 @@ export default defineComponent({
   name: "AdventurerList",
   components: {AdventurerMiniComponent},
   data: () => ({
-    currentAdventurer: null as Adventurer|null
+    currentAdventurer: null as Adventurer | null
   }),
   props: {
     adventurers: {
-      type: Object as PropType<{[key: string]: Adventurer}>,
+      type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
-        return {} as {[key: string]: Adventurer};
+        return {} as { [key: string]: Adventurer };
       },
+      required: true,
     },
   },
 
@@ -39,12 +40,13 @@ export default defineComponent({
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+
   .slot {
     padding: 0;
     width: 5rem;
     height: 5rem;
     border: 2px solid #000;
-    background-color: rgba(0,0,0, 0.2);
+    background-color: rgba(0, 0, 0, 0.2);
     cursor: pointer;
     border-radius: 0.2rem;
   }

src/components/AdventurerMiniComponent.vue

@@ -65,12 +65,10 @@ export default defineComponent({
       default() {
         return {} as {[key: string]: Adventurer};
       },
+      required: true,
     },
   },
   methods: {
-    print(a:string) {
-      console.log(a);
-    },
     closeSelect() {
       this.selection = false;
     }

src/components/AdventurerTile.vue

@@ -4,7 +4,8 @@
       :title="adventurer.name + (adventurer.busy ? ' (busy)' : '')"
   >
     <img :src="adventurer.portrait" :alt="adventurer.name" draggable="false">
-    <div class="level" :title="adventurer.isMaxLevel() ? 'Max level' : ''">{{adventurer.level}}<span v-if="adventurer.isMaxLevel()">⇪</span></div>
+    <div class="level" :title="adventurer.isMaxLevel() ? 'Max level' : ''">{{ adventurer.level }}<span
+        v-if="adventurer.isMaxLevel()">⇪</span></div>
     <div class="exp"></div>
   </article>
 </template>
@@ -12,7 +13,7 @@
 <script lang="ts">
 
 import type {Adventurer} from "@/classes/Adventurer";
-import {defineComponent, type PropType } from "vue";
+import {defineComponent, type PropType} from "vue";
 
 export default defineComponent({
   name: "AdventurerTile",
@@ -22,6 +23,7 @@ export default defineComponent({
       default() {
         return {} as Adventurer;
       },
+      required: true,
     }
   },
   data: () => ({
@@ -49,19 +51,21 @@ export default defineComponent({
   overflow: clip;
   font-size: 5rem;
   line-height: 1;
-  color: rgba(0,0,0, 0.75);
+  color: rgba(0, 0, 0, 0.75);
   position: relative;
+
   .level {
     position: absolute;
     top: 0;
     left: 0;
     font-size: 1rem;
     min-width: 1rem;
-    background-color: rgba(0,0,0, 0.75);
+    background-color: rgba(0, 0, 0, 0.75);
     border-bottom-right-radius: 0.2rem;
     padding: 0.1rem;
     color: #fff;
   }
+
   .exp {
     position: absolute;
     bottom: 0;
@@ -71,6 +75,7 @@ export default defineComponent({
     background-color: rgba(203, 33, 213, 0.75);
     transition: width 1s linear;
   }
+
   img {
     width: 100%;
     height: 100%;

src/components/ChangelogComponent.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="changelog 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>
+    <h1>Changelog</h1>
+    <div class="changelog-entry" v-for="release in releases">
+      <hr>
+      <h2>Version {{ release.name }}</h2>
+      <pre>{{ release.body }}</pre>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+
+export default defineComponent({
+  name: "ChangelogComponent",
+  data: () => ({
+    releases: [] as Array<any>,
+    lastPage: 1,
+  }),
+  methods: {
+    async getReleases(page: number): Promise<void> {
+      const result = await fetch("https://api.github.com/repos/YouHaveTrouble/GuildMaster/releases?per_page=10")
+          .catch((e) => {
+            return null;
+          });
+
+      if (result === null) return;
+      const json = await result.json();
+
+
+      for (const release of json) {
+        const version = {} as any;
+        version.body = release.body.trim();
+        version.name = release.name;
+        if (release.body.length === 0) continue;
+        this.releases.push(version);
+      }
+    }
+  },
+  async mounted() {
+    this.getReleases(1);
+
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.changelog {
+  padding-block: 3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  max-width: 45rem;
+  width: 100%;
+
+  h1 {
+    font-size: 3rem;
+    line-height: 1;
+    margin: 0;
+    text-align: center;
+  }
+
+  .changelog-entry {
+    width: 100%;
+
+    h2 {
+      margin: 0;
+      padding-inline: 1rem;
+    }
+
+    hr {
+      border: 0;
+      width: calc(100% - 2rem);
+      border-bottom: 1px solid black;
+    }
+
+    pre {
+      line-height: 1.2;
+      margin: 0;
+      white-space: pre-wrap;
+      font-family: 'EB Garamond', serif;
+      padding-inline: 1rem;
+    }
+  }
+}
+</style>

src/components/QuestMissive.vue

@@ -3,6 +3,15 @@
       class="missive"
       :class="{done: missive.maxProgress <= missive.progressPoints}"
   >
+    <div class="parchment">
+      <img src="/img/quests/backgrounds/dirty_paper.png" alt="parchment">
+    </div>
+    <div class="stain" v-if="stain">
+      <img src="/img/quests/overlays/water_stain.png" alt="stain">
+    </div>
+    <div class="drink-stain" v-if="drinkStain.exists">
+      <img src="/img/quests/overlays/drink_stain.png" alt="stain">
+    </div>
     <h2>{{ missive.title }}</h2>
     <p>{{ missive.text }}</p>
     <div class="slots">
@@ -26,14 +35,13 @@
       </button>
     </div>
     <div class="progressWrap">
-      <span>{{ progressPercentage }}</span>
       <span class="progress"></span>
-
+      <span class="percentage">{{ progressPercentage }}</span>
     </div>
     <h3>Rewards</h3>
     <div class="rewards">
-      <span>Gold: <b>{{missive.goldReward}}</b></span>
-      <span>Exp: <b>{{missive.expReward}}</b></span>
+      <span>Gold: <b>{{ missive.goldReward }}</b></span>
+      <span>Exp: <b>{{ missive.expReward }}</b></span>
     </div>
   </article>
 </template>
@@ -49,21 +57,29 @@ export default defineComponent({
   components: {AdventurerComponent},
   props: {
     missive: {
-      type: Object as PropType<Quest|any>,
+      type: Object as PropType<Quest | any>,
       default() {
         return {} as Quest;
       },
+      required: true,
     },
     adventurers: {
-      type: Object as PropType<{[key: string]: Adventurer}>,
+      type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
-        return {} as {[key: string]: Adventurer};
+        return {} as { [key: string]: Adventurer };
       },
+      required: true,
     },
   },
   data: () => {
     return {
       progressPercentage: "0%",
+      stain: false,
+      drinkStain: {
+        exists: false,
+        offsetX: "0%",
+        offsetY: "0%",
+      },
     }
   },
   methods: {
@@ -71,10 +87,19 @@ export default defineComponent({
       if (this.missive === undefined) return;
       const progress = (this.missive.progressPoints / this.missive.maxProgress * 100).toFixed(2);
       this.progressPercentage = `${progress}%`;
-    }
+    },
+    randomNumber(min: number, max: number) {
+      return Math.random() * (max - min) + min;
+    },
   },
   mounted() {
     this.updateProgress();
+    this.stain = Math.random() < 0.35;
+    this.drinkStain.exists = Math.random() < 0.15;
+    if (this.drinkStain.exists) {
+      this.drinkStain.offsetX = `${this.randomNumber(-1, 1) * 100}%`;
+      this.drinkStain.offsetY = `${this.randomNumber(-1, 1) * 100}%`;
+    }
   },
   watch: {
     missive: {
@@ -94,11 +119,28 @@ export default defineComponent({
   border: 2px solid #000;
   padding: 0.5rem;
   position: relative;
-  background-color: rgba(255, 255, 255, 0.2);
+
+  .parchment {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -5;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
   h2 {
     font-size: 1.5rem;
-
+    line-height: 1;
   }
+
   h3 {
     font-size: 1.15rem;
     margin: 0;
@@ -109,6 +151,8 @@ export default defineComponent({
     border: 1px solid #000;
     margin: 0.5rem auto;
     position: relative;
+    height: 1.25rem;
+
     .progress {
       position: absolute;
       top: 0;
@@ -116,13 +160,21 @@ export default defineComponent({
       height: 100%;
       display: block;
       width: v-bind(progressPercentage);
-      background-color: rgba(0, 128, 0, 0.75);
+      background-color: rgba(0, 128, 0, 0.65);
       transition: width 250ms linear;
-      z-index: -1;
-    }
     }
 
-
+    .percentage {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+    }
+  }
 
   .rewards {
     display: flex;
@@ -165,5 +217,44 @@ export default defineComponent({
       position: relative;
     }
   }
+
+  .stain {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: contain;
+    opacity: 1;
+    z-index: -4;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      filter: grayscale(0.8);
+    }
+  }
+
+  .drink-stain {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.45;
+    z-index: -1;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: 45%;
+      height: 35%;
+      filter: grayscale(0.8);
+      transform: translate(v-bind("drinkStain.offsetX"), v-bind("drinkStain.offsetY"));
+    }
+  }
 }
 </style>

src/components/UpgradesList.vue

@@ -1,6 +1,6 @@
 <template>
-<section class="upgrades">
-<h2>Upgrades</h2>
+  <section class="upgrades">
+    <h2>Upgrades</h2>
     <div class="upgrade">
       <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
       <button
@@ -8,14 +8,14 @@
           :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
           @click="upgradeAdventurerCapacity()"
       >
-      Upgrade ({{guild.adventurerCapacity.nextLevelCost.toFixed(0)}} gold)
+        Upgrade ({{ guild.adventurerCapacity.nextLevelCost.toFixed(0) }} gold)
       </button>
     </div>
-</section>
+  </section>
 </template>
 
 <script lang="ts">
-import { Guild } from "@/classes/Guild";
+import {Guild} from "@/classes/Guild";
 import {defineComponent, type PropType} from "vue";
 
 export default defineComponent({
@@ -25,7 +25,8 @@ export default defineComponent({
       type: Object as PropType<Guild>,
       default() {
         return new Guild(1, 0) as Guild;
-      }
+      },
+      required: true,
     }
   },
   methods: {
@@ -47,11 +48,13 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
   gap: 1rem;
+
   h2 {
     font-size: 1.75rem;
     margin: 2rem 0 0;
     padding: 0;
   }
+
   .upgrade {
     text-align: center;
     font-size: 1.25rem;

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
-import './assets/main.css'
+import './assets/main.scss'
 
 const app = createApp(App)
 

src/router/index.ts

@@ -18,6 +18,11 @@ const router = createRouter({
       path: '/adventurers',
       name: 'adventurers',
       component: () => import('../views/AdventurerView.vue')
+    },
+    {
+      path: '/technical',
+      name: 'technical',
+      component: () => import('../views/TechnicalView.vue')
     }
   ]
 })

src/views/AdventurerView.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="adventurer-section">
-  <section class="recruit">
+  <div class="adventurer-section">
+    <section class="recruit panel pinned-paper">
       <h1>Applying adventurers</h1>
       <div class="adventurers">
         <div v-if="currentlyForHire">
@@ -28,16 +28,17 @@
 
       </div>
     </section>
-  <section class="collection">
-    <h1>Recruited adventurers ({{ Object.keys(adventurers).length }} / {{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
+    <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" />
+          <AdventurerTile class="entry" :adventurer="adventurer"/>
           <b>{{ adventurer.name }}</b>
         </div>
       </div>
     </section>
-</div>
+  </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 {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  section {
-    max-width: 1280px;
-    width: 100%;
-    text-align: center;
   padding-block: 1rem;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+
+  section {
+    text-align: center;
+    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;

src/views/HomeView.vue

@@ -1,12 +1,19 @@
 <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="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>
+        <p>Coffer: {{ guild.gold }} gold</p>
       </section>
       <section class="upgrade">
         <p>Guild level: {{ guild.level }}</p>
@@ -16,11 +23,13 @@
         </button>
       </section>
       <section class="upgrade">
-      <UpgradesList :guild="guild" />
+        <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;

src/views/QuestView.vue

@@ -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)
     },

src/views/TechnicalView.vue

@@ -0,0 +1,89 @@
+<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>
+    </div>
+    <ChangelogComponent/>
+
+  </section>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import ChangelogComponent from "@/components/ChangelogComponent.vue";
+
+export default defineComponent({
+  name: "TechnicalView",
+  components: {ChangelogComponent},
+
+})
+</script>
+
+<style lang="scss" scoped>
+.technical-view {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  padding-block: 1rem;
+
+  h1 {
+    font-size: 3rem;
+    line-height: 1;
+    margin: 0;
+  }
+
+  .socials {
+    display: flex;
+    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;
+      }
+    }
+  }
+
+
+  .icon {
+    width: 2rem;
+    height: 2rem;
+  }
+}
+</style>

vite.config.ts

@@ -11,5 +11,5 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   },
-  base: "/GuildMaster/"
+  base: "/"
 })