Merge remote-tracking branch 'origin/main' into feature/map-refactor

src/application/types.ts

@@ -242,15 +242,11 @@ export type Chat = {
 
 export type WorldSettings = {
   date: Date
-  isRainEnabled: boolean
+  weatherState: WeatherState
-  isFogEnabled: boolean
-  fogDensity: number
 }
 
 export type WeatherState = {
-  isRainEnabled: boolean
   rainPercentage: number
-  isFogEnabled: boolean
   fogDensity: number
 }
 

src/components/game/map/Effects.vue

@@ -15,7 +15,8 @@ const LIGHT_CONFIG = {
   SUNRISE_HOUR: 6,
   SUNSET_HOUR: 20,
   DAY_STRENGTH: 100,
-  NIGHT_STRENGTH: 30
+  NIGHT_STRENGTH: 30,
+  TRANSITION_HOURS: 3
 }
 
 // Stores and refs
@@ -23,7 +24,6 @@ const gameStore = useGameStore()
 const mapStore = useMapStore()
 const mapStorage = new MapStorage()
 const sceneRef = ref<Phaser.Scene | null>(null)
-const mapEffectsReady = ref(false)
 const mapObject = ref<Map | null>(null)
 
 // Effect objects
@@ -35,9 +35,7 @@ const effects = {
 
 // Weather state
 const weatherState = ref<WeatherState>({
-  isRainEnabled: false,
   rainPercentage: 0,
-  isFogEnabled: false,
   fogDensity: 0
 })
 
@@ -63,7 +61,6 @@ watch(
   () => mapStore.mapId,
   async (newMapId) => {
     if (newMapId) {
-      mapEffectsReady.value = false
       await loadMap()
       updateScene()
     }
@@ -109,54 +106,54 @@ const updateScene = () => {
     {}
   ) as { [key: string]: number }
 
-  // Only update effects once mapEffects are loaded
+  const finalEffects = {...mapEffects,
-  if (!mapEffectsReady.value) {
-    if (mapObject.value) {
-      mapEffectsReady.value = true
-    } else {
-      return
-    }
-  }
-
-  const finalEffects =
-    mapEffects && Object.keys(mapEffects).length
-      ? mapEffects
-      : {
         light: timeBasedLight,
-          rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
+        rain: weatherState.value.rainPercentage,
-          fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
+        fog: weatherState.value.fogDensity }
-        }
+  console.log(finalEffects)
   applyEffects(finalEffects)
 }
 
 const applyEffects = (effectValues: any) => {
   if (effects.light.value) {
-    const darkness = 1 - (effectValues.light ?? 100) / 100
+    const darkness = 1 - (effectValues.light) / 100
     effects.light.value.clear().fillStyle(0x000000, darkness).fillRect(0, 0, window.innerWidth, window.innerHeight)
   }
 
-  if (effects.rain.value) {
+  if (effects.rain)
-    const strength = effectValues.rain ?? 0
+    effects.rain.value.start().setQuantity(effectValues.rain / 10)
-    strength > 0 ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10)) : effects.rain.value.stop()
+  else effects.rain.value.stop()
-  }
 
-  if (effects.fog.value) {
+  effects.fog.value.setAlpha(effectValues.fog/100)
-    effects.fog.value.setAlpha((effectValues.fog ?? 0) / 100)
-  }
 }
 
+// Linear Interpolation
+// moves a value between x and y where a is the percentage of progress the value has made in moving from x to y
+// a = 0 return x
+// a = 0.5 return (x+y)/2
+// a = 1 return y
+const lerp = (x,y,a) => x * (1-a) + y * a
+
 const calculateLightStrength = (time: Date): number => {
   const hour = time.getHours()
   const minute = time.getMinutes()
 
-  if (hour >= LIGHT_CONFIG.SUNSET_HOUR || hour < LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH
-
-  if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR - 2) return LIGHT_CONFIG.DAY_STRENGTH
-
-  if (hour === LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH + ((LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * minute) / 60
-
   const totalMinutes = (hour - (LIGHT_CONFIG.SUNSET_HOUR - 2)) * 60 + minute
-  return LIGHT_CONFIG.DAY_STRENGTH - (LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * (totalMinutes / 120)
+
+  //Transition from daylight to night
+  if (hour >= LIGHT_CONFIG.SUNSET_HOUR - LIGHT_CONFIG.TRANSITION_HOURS && hour < LIGHT_CONFIG.SUNSET_HOUR)
+    return lerp(LIGHT_CONFIG.DAY_STRENGTH, LIGHT_CONFIG.NIGHT_STRENGTH,
+      (hour+(minute/60)-(LIGHT_CONFIG.SUNSET_HOUR-LIGHT_CONFIG.TRANSITION_HOURS))/LIGHT_CONFIG.TRANSITION_HOURS)
+
+  //Transition from sunrise to morning
+  else if (hour >= LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNRISE_HOUR + LIGHT_CONFIG.TRANSITION_HOURS)
+    return lerp(LIGHT_CONFIG.NIGHT_STRENGTH, LIGHT_CONFIG.DAY_STRENGTH,
+      (hour+(minute/60)-LIGHT_CONFIG.SUNRISE_HOUR)/LIGHT_CONFIG.TRANSITION_HOURS)
+
+  else if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR)
+      return LIGHT_CONFIG.DAY_STRENGTH
+  else
+      return LIGHT_CONFIG.NIGHT_STRENGTH
 }
 
 // Socket and window handlers
@@ -180,14 +177,9 @@ const handleResize = () => {
 }
 
 // Lifecycle
-watch(
+watch(() => mapObject.value, () => {
-  () => mapObject.value,
-  () => {
-    mapEffectsReady.value = false
   updateScene()
-  },
+})
-  { deep: true }
-)
 
 onMounted(() => window.addEventListener('resize', handleResize))
 

src/components/utilities/Notifications.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal v-for="notification in gameStore.notifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
+  <Modal v-for="notification in gameStore.notifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification!.id as string)">
     <template #modalHeader v-if="notification.title">
       <h3 class="m-0 font-medium shrink-0 text-white">{{ notification.title }}</h3>
     </template>

src/stores/gameStore.ts

@@ -15,9 +15,10 @@ export const useGameStore = defineStore('game', {
       character: null as Character | null,
       world: {
         date: new Date(),
-        isRainEnabled: false,
+        weatherState: {
-        isFogEnabled: false,
+          rainPercentage: 0,
           fogDensity: 0
+        }
       } as WorldSettings,
       game: {
         isLoading: false,
@@ -119,9 +120,8 @@ export const useGameStore = defineStore('game', {
       this.uiSettings.isGmPanelOpen = false
 
       this.world.date = new Date()
-      this.world.isRainEnabled = false
+      this.world.weatherState.rainPercentage = 0
-      this.world.isFogEnabled = false
+      this.world.weatherState.fogDensity = 0
-      this.world.fogDensity = 0
     }
   }
 })