Setup skeleton for new HUD, updated fog img, updated effects

src/components/Effects.vue

@@ -12,6 +12,8 @@ import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 
+const sceneRef = ref<Phaser.Scene | null>(null)
+
 // Effect-related refs
 const dayNightCycle = ref<Phaser.GameObjects.Graphics | null>(null)
 const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
@@ -19,7 +21,7 @@ const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)
 
 // Effect parameters
 const dayNightDuration = 300000 // 5 minutes in milliseconds
-const maxDarkness = 0.3
+const maxDarkness = 0.7
 
 const preloadScene = async (scene: Phaser.Scene) => {
   scene.load.image('raindrop', 'assets/raindrop.png')
@@ -27,6 +29,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
 }
 
 const createScene = async (scene: Phaser.Scene) => {
+  sceneRef.value = scene
   createDayNightCycle(scene)
   createRainEffect(scene)
   createFogEffect(scene)
@@ -58,12 +61,12 @@ const createRainEffect = (scene: Phaser.Scene) => {
     quantity: 5,
     lifespan: 2000,
     speedY: { min: 300, max: 500 },
-    scale: { start: 0.1, end: 0.2 },
+    scale: { start: 0.005, end: 0.005 },
     alpha: { start: 0.5, end: 0 },
     blendMode: 'ADD'
   })
   rainEmitter.value.setDepth(900)
-  toggleRain(false) // Start with rain off
+  toggleRain(true) // Start with rain off
 }
 
 const toggleRain = (isRaining: boolean) => {
@@ -73,10 +76,10 @@ const toggleRain = (isRaining: boolean) => {
 }
 
 const createFogEffect = (scene: Phaser.Scene) => {
-  fogSprite.value = scene.add.sprite(window.width / 2, window.innerHeight / 2, 'fog')
+  fogSprite.value = scene.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
   fogSprite.value.setScale(2)
-  fogSprite.value.setAlpha(0)
+  fogSprite.value.setAlpha(0) // yeetdasasdasd
-  fogSprite.value.setDepth(950)
+  fogSprite.value.setDepth(950) // yeetdasasdasd
 }
 
 const updateFogEffect = () => {
@@ -101,6 +104,6 @@ const controlEffects = {
 defineExpose(controlEffects)
 
 onBeforeUnmount(() => {
-  scene.destroy()
+  if (sceneRef.value) sceneRef.value.scene.remove('effects')
 })
 </script>

src/components/gui/ExpBar.vue

@@ -0,0 +1,9 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+</script>

src/components/gui/Hud.vue

@@ -1,46 +1,5 @@
 <template>
-  <div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
-    <div class="absolute w-14 h-14 bg-gray rounded-full border-3 border-solid border-gray-500 top-1/2 -translate-y-1/2 left-0 z-20">
-      <img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" draggable="false" src="/assets/avatar/default/head.png" />
-    </div>
-    <div class="hud-bg absolute top-0 left-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-top bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
-    <div class="absolute top-0 left-8 w-[280px] h-[84px] z-10 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
-      <div class="h-16 flex flex-col items-end py-2.5 pl-12 pr-5">
-        <div class="w-full flex items-center justify-between mb-1.5">
-          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm text-white">{{ gameStore.character.name }}</span>
-          <span class="text-sm text-white">lvl. {{ gameStore.character.level }}</span>
-        </div>
-        <div class="w-full flex items-center justify-between">
-          <label class="text-sm text-white" for="hp">HP</label>
-          <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>
-        </div>
-        <div class="w-full flex items-center justify-between">
-          <label class="text-sm text-white" for="mp">MP</label>
-          <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-blue" id="mp" :value="gameStore.character.mana" max="100">{{ gameStore.character.mana }}%</progress>
-        </div>
-      </div>
-    </div>
-  </div>
 
-  <!-- TODO: Replace gameStore.character with other (selected) player's -->
-  <!--  <div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">-->
-  <!--    <div class="absolute w-14 h-14 bg-white/80 rounded-full border-3 border-solid border-white top-1/2 -translate-y-1/2 right-0 z-20">-->
-  <!--      <img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 -scale-x-100" draggable="false" src="/assets/avatar/default/head.png" />-->
-  <!--    </div>-->
-  <!--    <div class="hud-bg absolute top-0 right-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>-->
-  <!--    <div class="absolute top-0 right-8 w-[280px] h-[84px] z-10 -scale-x-100 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">-->
-  <!--      <div class="h-16 flex flex-col items-end -scale-x-100 py-2.5 pr-12 pl-5">-->
-  <!--        <div class="w-full flex items-center justify-between mb-1.5">-->
-  <!--          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm">{{ gameStore.character.name }}</span>-->
-  <!--          <span class="text-sm">lvl. {{ gameStore.character.level }}</span>-->
-  <!--        </div>-->
-  <!--        <div class="w-full flex items-center justify-between">-->
-  <!--          <label class="text-sm" for="hp">HP</label>-->
-  <!--          <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>-->
-  <!--        </div>-->
-  <!--      </div>-->
-  <!--    </div>-->
-  <!--  </div>-->
 </template>
 
 <script setup lang="ts">

src/components/gui/Keybindings.vue

@@ -0,0 +1,9 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+</script>

src/components/gui/Minimap.vue

@@ -0,0 +1,9 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+</script>

src/screens/Game.vue

@@ -5,24 +5,18 @@
 
     <div v-if="!zoneEditorStore.active">
       <Game :config="gameConfig" @create="createGame">
-        <Effects />
         <Scene name="main" @preload="preloadScene" @create="createScene">
           <div v-if="isLoaded">
-            <Inventory />
+            <Menu />
-            <div class="fixed inset-x-0 top-0 flex justify-start items-end p-10 pointer-events-none">
-              <div class="pointer-events-auto">
             <Hud />
-              </div>
+            <Keybindings />
-            </div>
+            <Minimap />
             <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 />
-              </div>
+            <Inventory />
-              <div class="pointer-events-auto max-xs:m-auto mr-auto">
+            <ExpBar />
-                <Menubar />
+
-              </div>
+            <Effects />
-            </div>
           </div>
         </Scene>
       </Game>
@@ -43,16 +37,20 @@ import { ref, onBeforeUnmount } from 'vue'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import Menu from '@/components/gui/Menu.vue'
+import ExpBar from '@/components/gui/ExpBar.vue'
 import Hud from '@/components/gui/Hud.vue'
 import Zone from '@/components/zone/Zone.vue'
+import Keybindings from '@/components/gui/Keybindings.vue'
 import Chat from '@/components/gui/Chat.vue'
-import Menubar from '@/components/gui/Menu.vue'
 import GmTools from '@/components/gameMaster/GmTools.vue'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
 import Inventory from '@/components/gui/UserPanel.vue'
-import { loadAssets } from '@/composables/zoneComposable'
 import Effects from '@/components/Effects.vue'
+import { loadAssets } from '@/composables/zoneComposable'
+import Minimap from '@/components/gui/Minimap.vue'
+
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()