move title styles to global file

bump version
remove debug
2026-05-12 06:26:59 +00:00 · 2023-06-20 20:06:54 +02:00 · 2023-06-20 19:58:31 +02:00 · 2023-06-20 19:57:34 +02:00 · 2023-06-20 19:56:36 +02:00 · 2023-06-20 19:56:28 +02:00
12 changed files with 710 additions and 644 deletions
@@ -8,6 +8,18 @@
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
+
+  <meta name="description"
+        content="Guild Master is a browser game where you manage your own adventurer's guild!"/>
+  <meta property="twitter:title" content="Guild Master - Adventurer's guild management game"/>
+  <meta property="twitter:image" content="https://guildmaster.yht.one/img/compass_rose.png"/>
+  <meta property="twitter:description"
+        content="Guild Master is a browser game where you manage your own adventurer's guild!"/>
+  <meta property="og:title" content="Guild Master - Adventurer's guild management game"/>
+  <meta property="og:url" content="https://guildmaster.yht.one/"/>
+  <meta property="og:description"
+        content="Guild Master is a browser game where you manage your own adventurer's guild!"/>
+  <meta property="og:image" content="https://guildmaster.yht.one/img/compass_rose.png"/>
 </head>
 <body>
 <div id="app"></div>
@@ -1,6 +1,6 @@
 {
  "name": "adventurers-guild",
-  "version": "0.7.0",
+  "version": "0.8.0",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -11,19 +11,19 @@
  },
  "dependencies": {
    "@vueuse/components": "^9.13.0",
-    "sass": "^1.59.3",
-    "vue": "^3.2.45",
-    "vue-router": "^4.1.6"
+    "sass": "^1.63.4",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.2"
  },
  "devDependencies": {
-    "@types/node": "^18.11.12",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/tsconfig": "^0.1.3",
-    "eslint": "^8.36.0",
-    "eslint-plugin-vue": "^9.9.0",
+    "@types/node": "^18.16.18",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint": "^8.43.0",
+    "eslint-plugin-vue": "^9.15.0",
    "npm-run-all": "^4.1.5",
-    "typescript": "~4.7.4",
-    "vite": "^4.0.0",
-    "vue-tsc": "^1.0.12"
+    "typescript": "~5.1.3",
+    "vite": "4.3.9",
+    "vue-tsc": "^1.8.1"
  }
 }
@@ -1,7 +1,23 @@
 <script setup lang="ts">
-import {RouterLink, RouterView} from 'vue-router'</script>
+import {RouterLink, RouterView} from 'vue-router'
+import {version} from "../package.json"
+</script>

 <template>
+  <section class="loading-screen" :class="{disabled: !loading}">
+    <div class="title panel note-paper">
+      <h1>Guild Master</h1>
+      <h3>Adventurer's guild management game</h3>
+      <small>v{{ version }}</small>
+      <div class="lds-ring">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+      <h3>Loading assets...</h3>
+    </div>
+  </section>
  <header>
    <nav>
      <RouterLink :to="{name: 'guild'}">Guild</RouterLink>
@@ -45,6 +61,7 @@ import AutoFinishQuestsUpgrade from "@/classes/guildUpgrades/AutoFinishQuestsUpg
 export default defineComponent({
  name: "GuildView",
  data: () => ({
+    loading: true as boolean,
    guild: new Guild(1, 500),
    gameTickTask: null as null | number,
    gameSaveTask: null as null | number,
@@ -231,13 +248,24 @@ export default defineComponent({
    }
  },
  async mounted() {
-    this.quests = await loadAvailableQuests();
-    this.adventurersDatabase = await loadAdventurersForHire();
-    this.loadGame();
+    console.debug("Loading game data")
+    const promises = await Promise.all([
+      loadAvailableQuests(),
+      loadAdventurersForHire(),
+    ]);

+    this.quests = promises[0] as { [key: string]: { [key: string]: Quest } };
+    this.adventurersDatabase = promises[1] as Array<Adventurer>;
+    console.debug("Game data loaded!")
+    this.loadGame();
    this.adventurersDatabase = removeAlreadyHiredAdventurers(this.adventurersDatabase, this.adventurers);

-    this.gameSaveTask = setInterval(() => {
+    // Wait a second to make sure at least most images load in behind the loader
+    setTimeout(() => {
+      this.loading = false;
+    }, 1000);
+
+    this.gameSaveTask = Number(setInterval(() => {
      saveGame(new GameData({
        adventurers: this.adventurers,
        guild: this.guild,
@@ -246,9 +274,10 @@ export default defineComponent({
        lastRecruitAction: this.lastRecruitHandled,
        adventurerForHireId: this.adventurerForHire?.id ?? null,
      }));
-    }, 10 * 1000)
+    }, 10 * 1000));

-    this.gameTickTask = setInterval(() => {
+
+    this.gameTickTask = Number(setInterval(() => {
      this.updateMissives();

      const now = Number(new Date());
@@ -336,7 +365,7 @@ export default defineComponent({
        }
      }

-    }, 250);
+    }, 250));

  },
  beforeUnmount() {
@@ -390,4 +419,64 @@ nav {

 }

+.loading-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 5;
+  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;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.25s linear;
+
+  &.disabled {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .lds-ring {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 8px solid;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #000 transparent transparent transparent;
+  }
+  .lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+  .lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+  .lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+  @keyframes lds-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
 </style>
@@ -82,3 +82,33 @@ body {
    filter: brightness(1.2);
  }
 }
+
+.title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  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;
+  }
+}
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'

-import './assets/main.scss'
+import '@/assets/main.scss'

 const app = createApp(App)

@@ -1,5 +1,4 @@
 import {createRouter, createWebHashHistory} from 'vue-router'
-import HomeView from '../views/HomeView.vue'

 const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -7,22 +6,22 @@ const router = createRouter({
    {
      path: '/',
      name: 'guild',
-      component: HomeView
+      component: () => import('@/views/HomeView.vue')
    },
    {
      path: '/quests',
      name: 'quests',
-      component: () => import('../views/QuestView.vue')
+      component: () => import('@/views/QuestView.vue')
    },
    {
      path: '/adventurers',
      name: 'adventurers',
-      component: () => import('../views/AdventurerView.vue')
+      component: () => import('@/views/AdventurerView.vue')
    },
    {
      path: '/technical',
      name: 'technical',
-      component: () => import('../views/TechnicalView.vue')
+      component: () => import('@/views/TechnicalView.vue')
    }
  ]
 })
@@ -80,36 +80,6 @@ main {
  }
 }

-.title {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  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;

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "extends": "@vue/tsconfig/tsconfig.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
  "compilerOptions": {
    "composite": true,
@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
Author	SHA1	Message	Date
YouHaveTrouble	6625a5b9de	move title styles to global file	2023-06-20 20:06:54 +02:00
YouHaveTrouble	cf69b92934	bump version	2023-06-20 19:58:31 +02:00
YouHaveTrouble	005cde4a01	remove debug	2023-06-20 19:57:34 +02:00
YouHaveTrouble	1b94d676e7	minor fixes	2023-06-20 19:56:36 +02:00
YouHaveTrouble	7cda820a99	add metadata	2023-06-20 19:56:28 +02:00
YouHaveTrouble	7281fdab60	dynamically load home view	2023-06-20 19:39:13 +02:00
YouHaveTrouble	3b9441b555	improve loading process	2023-06-20 19:37:27 +02:00
YouHaveTrouble	c2abfd6dfd	add loading screen to hide loading assets and not yet loaded gamestate	2023-06-20 19:18:50 +02:00
YouHaveTrouble	f05c393600	new favicon	2023-06-20 19:18:09 +02:00
YouHaveTrouble	23b6f4b4f8	update packages and fix breaking changes	2023-06-20 18:12:20 +02:00