bump version

news.txt

@@ -0,0 +1 @@
+Looking for artists for assets for this game! Need backgrounds, icons and character portraits! Join discord for more info!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adventurers-guild",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -20,10 +20,28 @@ import {version} from "../package.json"
   </section>
   <header>
     <nav>
-      <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>
+      <RouterLink
+          :to="{name: 'guild'}"
+      >
+        Guild
+      </RouterLink>
+      <RouterLink
+          :to="{name: 'quests'}"
+      >
+        Quests
+      </RouterLink>
+      <RouterLink
+          :to="{name: 'adventurers'}"
+      >
+        Adventurers
+      </RouterLink>
+      <RouterLink
+          data-tooltip="Technical information"
+          data-tooltip-position="bottom"
+          :to="{name: 'technical'}"
+      >
+        <img class="icon" src="/img/icons/cog.svg" alt="Technical">
+      </RouterLink>
     </nav>
   </header>
   <RouterView
@@ -31,8 +49,8 @@ import {version} from "../package.json"
       :adventurers="adventurers"
       :quests="missives"
       :adventurerForHire="adventurerForHire"
+      :news="news"
       @finalizeQuest="finalizeQuest($event)"
-      @wipeSave="resetSave()"
       @recruitActionTaken="recruitAction($event)"
   />
 </template>
@@ -62,9 +80,11 @@ export default defineComponent({
   name: "GuildView",
   data: () => ({
     loading: true as boolean,
+    screenWakeLock: null as null | WakeLockSentinel,
     guild: new Guild(1, 500),
     gameTickTask: null as null | number,
     gameSaveTask: null as null | number,
+    news: "" as string,
     lastQuestGot: {
       S: null as null | number,
       A: null as null | number,
@@ -241,19 +261,36 @@ export default defineComponent({
         }
       }
     },
-    resetSave() {
-      if (!confirm("You are about to wipe your save file. Are you sure?")) return;
-      window.localStorage.removeItem("savedGame");
-      window.location.reload();
+    async updateNews() {
+      const result = await fetch("https://raw.githubusercontent.com/YouHaveTrouble/GuildMaster/master/news.txt").catch(() => {
+        return null;
+      });
+      if (result === null) return;
+      this.news = await result.text();
     }
   },
   async mounted() {
+
+    setInterval(async () => {
+      if (this.screenWakeLock) return;
+      try {
+        this.screenWakeLock = await navigator.wakeLock.request("screen");
+        console.debug("Screen wake lock acquired");
+      } catch (e) {}
+    }, 1000);
+
     console.debug("Loading game data")
     const promises = await Promise.all([
       loadAvailableQuests(),
       loadAdventurersForHire(),
     ]);
 
+    this.updateNews().then(() => {
+      setInterval(() => {
+        this.updateNews();
+      }, 1000 * 60 * 60);
+    });
+
     this.quests = promises[0] as { [key: string]: { [key: string]: Quest } };
     this.adventurersDatabase = promises[1] as Array<Adventurer>;
     console.debug("Game data loaded!")
@@ -394,22 +431,24 @@ nav {
   align-items: center;
   flex-wrap: wrap;
   gap: 1rem;
-  padding: 2rem;
-  background-size: 200px;
-  background-blend-mode: darken;
-  background-color: rgba(0, 0, 0, 0.65);
+  padding-inline: 2rem;
+  padding-bottom: 2rem;
+  padding-top: 0.5rem;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-image: url("/img/background/panels/wall_panel_empty.png");
+  filter: drop-shadow(0 0 0.5rem rgba(0,0,0, 0.25));
 
   .icon {
     width: 2rem;
     height: 2rem;
-    fill: white;
-    filter: invert(1);
     transform: translateY(0.35rem);
   }
 
   a {
     font-size: 2rem;
-    color: #fff;
+    color: #000;
     text-decoration: none;
 
     &.router-link-active {

src/assets/main.scss

@@ -112,3 +112,57 @@ body {
     line-height: 0.25;
   }
 }
+
+[data-tooltip] {
+  position: relative;
+  &:after {
+    pointer-events: none;
+    transition: opacity 0.25s ease-in-out;
+    opacity: 0;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: max-content;
+    min-height: 2rem;
+    background-color: rgba(0,0,0, 0.5);
+    color: #fff;
+    font-size: 1rem;
+    padding-block: 0.25rem;
+    padding-inline: 0.5rem;
+    white-space: break-spaces;
+  }
+
+  &[data-tooltip-position="bottom"]:after {
+    content: attr(data-tooltip);
+    bottom: calc(-100% - 0.5rem);
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 200%;
+  }
+  &[data-tooltip-position="top"]:after {
+    content: attr(data-tooltip);
+    top: calc(-100% - 0.5rem);
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 200%;
+  }
+  &[data-tooltip-position="left"]:after {
+    content: attr(data-tooltip);
+    top: 50%;
+    right: calc(100% + 0.5rem);
+    transform: translateY(-50%);
+    max-width: 20rem;
+  }
+  &[data-tooltip-position="right"]:after {
+    content: attr(data-tooltip);
+    top: 50%;
+    left: calc(100% + 0.5rem);
+    transform: translateY(-50%);
+    max-width: 20rem;
+  }
+
+  &:hover:after {
+    opacity: 100%;
+  }
+}

src/components/AdventurerMiniComponent.vue

@@ -70,7 +70,9 @@ export default defineComponent({
   },
   methods: {
     closeSelect() {
+      setTimeout(() => {
         this.selection = false;
+      }, 0);
     }
   }
 })

src/components/technical/ChangelogComponent.vue

@@ -53,7 +53,6 @@ export default defineComponent({
   },
   async mounted() {
     this.getReleases(1);
-
   }
 });
 </script>

src/components/technical/SaveManagerComponent.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="save-manager panel pinned-paper">
+    <dialog ref="importDialog" >
+      <div class="import-dialog">
+        <textarea
+            v-model="importSaveText"
+            placeholder="Paste your save data here"
+        ></textarea>
+        <div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem;">
+          <button type="button" class="button metal" @click="importSave()" :disabled="importSaveText === ''">
+            Import
+          </button>
+          <button class="close" @click="closeSaveImport">✗</button>
+        </div>
+      </div>
+
+    </dialog>
+    <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>Save file</h1>
+    <div class="buttons">
+      <button class="button metal" @click="exportSave()">
+        Export
+      </button>
+      <button class="button metal" @click="openSaveImport()">
+        Import
+      </button>
+      <button class="button metal" @click="wipeSave()">
+        <span class="red">Wipe</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+export default defineComponent({
+  name: "ChangelogComponent",
+  data: () => ({
+    importSaveText: "",
+  }),
+  methods: {
+    openSaveImport() {
+      const dialog = this.$refs.importDialog as HTMLDialogElement;
+      dialog.showModal();
+    },
+    closeSaveImport() {
+      const dialog = this.$refs.importDialog as HTMLDialogElement;
+      dialog.close();
+    },
+    exportSave() {
+      const save = window.localStorage.getItem("savedGame");
+      if (!save) {
+        alert("No save file found!");
+        return;
+      }
+      navigator.clipboard.writeText(btoa(save));
+      setTimeout(() => alert("Save data copied to clipboard!"), 100);
+    },
+    importSave() {
+      const saveBase64 = this.importSaveText;
+      try {
+        const save = atob(saveBase64);
+        JSON.parse(save);
+        window.localStorage.setItem("savedGame", save);
+        window.location.reload();
+      } catch (e) {
+        alert("Invalid save file!");
+        return;
+      }
+
+    },
+    wipeSave() {
+      if (!confirm("You are about to wipe your save file. Are you sure?")) return;
+      window.localStorage.removeItem("savedGame");
+      window.location.reload();
+    },
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.save-manager {
+  padding-block: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  max-width: 45rem;
+  width: 100%;
+  h1 {
+    margin-block: 0;
+    font-size: 2rem;
+  }
+  dialog {
+    padding: 0;
+  }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    .red {
+      color: #d52121;
+    }
+  }
+  .import-dialog {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: url("/img/background/panels/plaster.png");
+    background-size: 100% 100%;
+    gap: 1rem;
+    position: relative;
+    textarea {
+      width: 90%;
+      height: 10rem;
+      resize: none;
+      border: 1px solid var(--color-metal);
+      border-radius: 0.25rem;
+      padding: 0.5rem;
+      font-family: monospace;
+    }
+    .close {
+      color: #ab0707;
+      font-size: 2rem;
+      border: none;
+      background: transparent;
+      &:hover {
+        color: #d52121;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/views/HomeView.vue

@@ -4,6 +4,7 @@
       <h1>Guild Master</h1>
       <h3>Adventurer's guild management game</h3>
       <small>v{{ version }}</small>
+      <p class="news">{{ news }}</p>
     </section>
     <section class="upgrades panel pinned-paper">
       <div class="nail top-left">
@@ -29,9 +30,6 @@
       <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>
@@ -56,6 +54,10 @@ export default defineComponent({
     }
   },
   props: {
+    news: {
+      type: String,
+      default: "",
+    },
     guild: {
       type: Object as PropType<Guild>,
       default: () => new Guild(1, 0) as Guild,
@@ -77,9 +79,15 @@ main {
   .upgrades {
     max-width: 45rem;
     width: 100%;
+    padding-bottom: 1rem;
   }
 }
 
+.news {
+  max-width: 75%;
+  color: #ab0707;
+}
+
 .coffer {
   text-align: center;
 

src/views/TechnicalView.vue

@@ -19,6 +19,7 @@
         </a>
       </div>
     </div>
+    <SaveManagerComponent/>
     <ChangelogComponent/>
 
   </section>
@@ -26,11 +27,12 @@
 
 <script lang="ts">
 import {defineComponent} from "vue";
-import ChangelogComponent from "@/components/ChangelogComponent.vue";
+import ChangelogComponent from "@/components/technical/ChangelogComponent.vue";
+import SaveManagerComponent from "@/components/technical/SaveManagerComponent.vue";
 
 export default defineComponent({
   name: "TechnicalView",
-  components: {ChangelogComponent},
+  components: {SaveManagerComponent, ChangelogComponent},
 
 })
 </script>