From 2223491571b348f25803e8c6d01cef5e4e2ec97b Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 28 Sep 2024 00:45:19 +0200
Subject: [PATCH] #155 : Hide HUD elements if Game.vue is unloaded

---
 src/screens/Game.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index a3bbde6..4f624f4 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -2,17 +2,19 @@
   <div class="flex justify-center items-center h-dvh relative">
     <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
     <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
-    <Inventory />
 
     <div v-if="!zoneEditorStore.active">
       <Game :config="gameConfig" @create="createGame" class="111mt-[-60px]">
         <Scene name="main" @preload="preloadScene" @create="createScene">
-          <div class="fixed inset-x-0 top-0 flex justify-start items-end p-10 pointer-events-none">
+          <div v-if="isLoaded">
+            <Inventory />
+          </div>
+          <div v-if="isLoaded" class="fixed inset-x-0 top-0 flex justify-start items-end p-10 pointer-events-none">
             <div class="pointer-events-auto">
               <Hud />
             </div>
           </div>
-          <Zone v-if="isLoaded" />
+          <Zone />
           <div class="fixed inset-x-0 bottom-0 flex justify-between gap-5 items-end py-10 px-5 xxs:p-10 pointer-events-none max-md:flex-wrap max-md:flex-col-reverse">
             <div class="pointer-events-auto w-full">
               <Chat />
@@ -147,6 +149,7 @@ const createScene = async (scene: Phaser.Scene) => {
 }
 
 onBeforeUnmount(() => {
+  isLoaded.value = false
   gameStore.disconnectSocket()
 })
 </script>