From e2c60bfd5adc2385c145e28f99416bb0745867f8 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 2 Nov 2024 14:05:37 +0100
Subject: [PATCH] #210 : Play music on login screen
---
src/App.vue | 2 --
src/screens/Loading.vue | 15 ++++++++-------
src/screens/Login.vue | 9 ++++++---
3 files changed, 14 insertions(+), 12 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 6961341..28eafaa 100644
--- a/src/App.vue
+++ b/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
diff --git a/src/screens/Loading.vue b/src/screens/Loading.vue
index a82c0bb..68165e9 100644
--- a/src/screens/Loading.vue
+++ b/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-20 h-20 rounded-full bg-gray-500 flex items-center justify-center hover:bg-gray-600 transition-colors">
- <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <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">
+ <span class="text-white text-lg flex-1 text-center">Play</span>
+ <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>
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index 529be5d..7602568 100644
--- a/src/screens/Login.vue
+++ b/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-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-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" 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('')