move most assets to components and use base64 versions of them

src/components/QuestMissive.vue

@@ -4,13 +4,13 @@
       :class="{done: missive.maxProgress <= missive.progressPoints}"
   >
     <div class="parchment">
-      <img src="/img/quests/backgrounds/dirty_paper.png" alt="parchment">
+      <Parchment/>
     </div>
     <div class="stain" v-if="stain">
-      <img src="/img/quests/overlays/water_stain.png" alt="stain">
+      <WaterStain/>
     </div>
     <div class="drink-stain" v-if="drinkStain.exists">
-      <img src="/img/quests/overlays/drink_stain.png" alt="stain">
+      <DrinkStain/>
     </div>
     <h2>{{ missive.title }}</h2>
     <p>{{ missive.text }}</p>
@@ -51,10 +51,13 @@ import type {Quest} from "@/classes/Quest";
 import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
 import type {Adventurer} from "@/classes/Adventurer";
 import {defineComponent, type PropType} from "vue";
+import DrinkStain from "@/components/misc/DrinkStain.vue";
+import WaterStain from "@/components/misc/WaterStain.vue";
+import Parchment from "@/components/misc/Parchment.vue";
 
 export default defineComponent({
   name: "QuestMissive",
-  components: {AdventurerComponent},
+  components: {Parchment, WaterStain, DrinkStain, AdventurerComponent},
   props: {
     missive: {
       type: Object as PropType<Quest | any>,

src/components/technical/ChangelogComponent.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="changelog panel pinned-paper">
     <div class="nail top-left">
-      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+      <Nail/>
     </div>
     <div class="nail top-right">
-      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+      <Nail/>
     </div>
     <h1>Changelog</h1>
     <div class="changelog-entry" v-for="release in releases">
@@ -17,10 +17,12 @@
 
 <script lang="ts">
 import {defineComponent} from "vue";
+import Nail from "@/components/misc/Nail.vue";
 
 
 export default defineComponent({
   name: "ChangelogComponent",
+  components: {Nail},
   data: () => ({
     timeFormat: Intl.DateTimeFormat(Intl.DateTimeFormat().resolvedOptions().locale, {
       year: "numeric",

src/views/HomeView.vue

@@ -8,10 +8,10 @@
     </section>
     <section class="upgrades panel pinned-paper">
       <div class="nail top-left">
-        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+        <Nail/>
       </div>
       <div class="nail top-right">
-        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+        <Nail/>
       </div>
       <section class="coffer">
         <p>Coffer: {{ formatGold(guild.gold) }} gold</p>
@@ -43,11 +43,12 @@ import {Guild} from "@/classes/Guild";
 import {version} from "../../package.json"
 import UpgradesList from "@/components/UpgradesList.vue";
 import {formatGold} from "@/classes/NumberMagic";
+import Nail from "@/components/misc/Nail.vue";
 
 export default defineComponent({
   name: "GuildView",
   methods: {formatGold},
-  components: {UpgradesList},
+  components: {Nail, UpgradesList},
   data: () => {
     return {
       version: version,

src/views/TechnicalView.vue

@@ -2,10 +2,10 @@
   <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"/>
+        <Nail/>
       </div>
       <div class="nail top-right small">
-        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+        <Nail/>
       </div>
       <h1>Socials</h1>
       <div class="links">
@@ -29,10 +29,11 @@
 import {defineComponent} from "vue";
 import ChangelogComponent from "@/components/technical/ChangelogComponent.vue";
 import SaveManagerComponent from "@/components/technical/SaveManagerComponent.vue";
+import Nail from "@/components/misc/Nail.vue";
 
 export default defineComponent({
   name: "TechnicalView",
-  components: {SaveManagerComponent, ChangelogComponent},
+  components: {Nail, SaveManagerComponent, ChangelogComponent},
 
 })
 </script>