#210 : Play music on login screen

src/App.vue

@@ -11,7 +11,6 @@ import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import Notifications from '@/components/utilities/Notifications.vue'
 import GmTools from '@/components/gameMaster/GmTools.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
-import Loading from '@/screens/Loading.vue'
 import Login from '@/screens/Login.vue'
 import Characters from '@/screens/Characters.vue'
 import Game from '@/screens/Game.vue'
@@ -22,7 +21,6 @@ const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 
 const currentScreen = computed(() => {
-  // if (!gameStore.game.isLoaded) return Loading
   if (!gameStore.connection) return Login
   if (!gameStore.token) return Login
   if (!gameStore.character) return Characters

src/screens/Loading.vue

@@ -1,15 +1,11 @@
 <template>
   <div class="flex flex-col justify-center items-center h-dvh relative">
-    <div class="w-20 h-20 rounded-full border-4 border-solid border-gray-300 border-t-transparent animate-spin"></div>
+    <button @click="continueBtnClick" class="w-32 h-12 rounded-full bg-gray-500 flex items-center justify-between px-4 hover:bg-gray-600 transition-colors">
-    <button @click="continueBtnClick" class="w-20 h-20 rounded-full bg-gray-500 flex items-center justify-center hover:bg-gray-600 transition-colors">
+      <span class="text-white text-lg flex-1 text-center">Play</span>
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
       </svg>
     </button>
-    <div class="text-center mt-6">
-      <h1 class="text-2xl font-bold">Loading...</h1>
-      <p class="text-gray-400">Please wait while we load the assets.</p>
-    </div>
   </div>
 </template>
 
@@ -19,6 +15,11 @@ import { useGameStore } from '@/stores/gameStore'
 const gameStore = useGameStore()
 
 function continueBtnClick() {
+  // Play music
+  const audio = new Audio('/assets/music/login.mp3')
+  audio.play()
+
+  // Set isLoaded to true
   gameStore.game.isLoaded = true
 }
 </script>

src/screens/Login.vue

@@ -1,14 +1,16 @@
 <template>
+  <Loading v-if="!gameStore.game.isLoaded" />
+  <!-- @TODO this must be shown over the login screen -->
   <div class="relative max-lg:h-dvh flex flex-row-reverse">
     <ResetPassword />
     <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
     <div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
     <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
       <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
-        <img src="/assets/login/sq-logo-v1.svg" class="mb-10" />
+        <img src="/assets/login/sq-logo-v1.svg" class="mb-10" alt="Sylvan Quest logo" />
         <div class="relative">
-          <img src="/assets/ui-elements/ui-box-outer.svg" class="absolute w-full h-full" />
+          <img src="/assets/ui-elements/ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
-          <img src="/assets/ui-elements/ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" />
+          <img src="/assets/ui-elements/ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" alt="UI box inner" />
 
           <!-- Login Form -->
           <form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative px-6 py-11">
@@ -73,6 +75,7 @@ import { login, register } from '@/services/authentication'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
 import ResetPassword from '@/components/gui/ResetPassword.vue'
+import Loading from '@/screens/Loading.vue'
 
 const gameStore = useGameStore()
 const username = ref('')