fix up styles for the pages,

fix up some code formatting to be more consistent

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

@@ -1,18 +1,18 @@
 <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 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">
@@ -20,48 +20,48 @@ 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;
-                });
+  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();
+      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);
-
+      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: 3rem;
+  padding-block: 3rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 1rem;
   max-width: 45rem;
-    width: 100%;
+  width: 100%;
 
   h1 {
     font-size: 3rem;
@@ -75,10 +75,12 @@ export default defineComponent({
 
     h2 {
       margin: 0;
+      padding-inline: 1rem;
     }
 
     hr {
       border: 0;
+      width: calc(100% - 2rem);
       border-bottom: 1px solid black;
     }
 
@@ -87,6 +89,7 @@ export default defineComponent({
       margin: 0;
       white-space: pre-wrap;
       font-family: 'EB Garamond', serif;
+      padding-inline: 1rem;
     }
   }
 }

src/components/QuestMissive.vue

@@ -40,8 +40,8 @@
     </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>
@@ -57,16 +57,18 @@ 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: () => {
@@ -126,6 +128,7 @@ export default defineComponent({
     height: 100%;
     z-index: -5;
     overflow: hidden;
+
     img {
       width: 100%;
       height: 100%;
@@ -137,6 +140,7 @@ export default defineComponent({
     font-size: 1.5rem;
     line-height: 1;
   }
+
   h3 {
     font-size: 1.15rem;
     margin: 0;
@@ -148,6 +152,7 @@ export default defineComponent({
     margin: 0.5rem auto;
     position: relative;
     height: 1.25rem;
+
     .progress {
       position: absolute;
       top: 0;
@@ -158,6 +163,7 @@ export default defineComponent({
       background-color: rgba(0, 128, 0, 0.65);
       transition: width 250ms linear;
     }
+
     .percentage {
       position: absolute;
       top: 0;
@@ -221,6 +227,7 @@ export default defineComponent({
     background-size: contain;
     opacity: 1;
     z-index: -4;
+
     img {
       width: 100%;
       height: 100%;
@@ -241,6 +248,7 @@ export default defineComponent({
     display: flex;
     justify-content: center;
     align-items: center;
+
     img {
       width: 45%;
       height: 35%;

src/components/UpgradesList.vue

@@ -1,21 +1,21 @@
 <template>
-<section class="upgrades">
-<h2>Upgrades</h2>
-  <div class="upgrade">
-    <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
-    <button
-        v-if="guild.adventurerCapacity.nextLevelCost"
-        :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
-        @click="upgradeAdventurerCapacity()"
-    >
-      Upgrade ({{guild.adventurerCapacity.nextLevelCost.toFixed(0)}} gold)
-    </button>
-  </div>
-</section>
+  <section class="upgrades">
+    <h2>Upgrades</h2>
+    <div class="upgrade">
+      <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
+      <button
+          v-if="guild.adventurerCapacity.nextLevelCost"
+          :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
+          @click="upgradeAdventurerCapacity()"
+      >
+        Upgrade ({{ guild.adventurerCapacity.nextLevelCost.toFixed(0) }} gold)
+      </button>
+    </div>
+  </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;