From a61e05592d97f97b5cb85845f2e2c04d110a536e Mon Sep 17 00:00:00 2001 From: Andrei Date: Wed, 22 Jan 2025 17:50:08 -0600 Subject: [PATCH 1/6] Removed weather effects booleans, now to disable weather effects, setting the value to 0 is the way --- src/application/types.ts | 6 +----- src/components/game/map/Effects.vue | 6 ++---- src/stores/gameStore.ts | 12 ++++++------ 3 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/application/types.ts b/src/application/types.ts index 071b32c..deefce5 100644 --- a/src/application/types.ts +++ b/src/application/types.ts @@ -242,15 +242,11 @@ export type Chat = { export type WorldSettings = { date: Date - isRainEnabled: boolean - isFogEnabled: boolean - fogDensity: number + weatherState: WeatherState } export type WeatherState = { - isRainEnabled: boolean rainPercentage: number - isFogEnabled: boolean fogDensity: number } diff --git a/src/components/game/map/Effects.vue b/src/components/game/map/Effects.vue index 9181640..955bb64 100644 --- a/src/components/game/map/Effects.vue +++ b/src/components/game/map/Effects.vue @@ -35,9 +35,7 @@ const effects = { // Weather state const weatherState = ref({ - isRainEnabled: false, rainPercentage: 0, - isFogEnabled: false, fogDensity: 0 }) @@ -123,8 +121,8 @@ const updateScene = () => { ? mapEffects : { light: timeBasedLight, - rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0, - fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0 + rain: weatherState.value.rainPercentage, + fog: weatherState.value.fogDensity * 100 } applyEffects(finalEffects) } diff --git a/src/stores/gameStore.ts b/src/stores/gameStore.ts index 842dadb..fbe9149 100644 --- a/src/stores/gameStore.ts +++ b/src/stores/gameStore.ts @@ -15,9 +15,10 @@ export const useGameStore = defineStore('game', { character: null as Character | null, world: { date: new Date(), - isRainEnabled: false, - isFogEnabled: false, - fogDensity: 0 + weatherState: { + 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.isFogEnabled = false - this.world.fogDensity = 0 + this.world.weatherState.rainPercentage = 0 + this.world.weatherState.fogDensity = 0 } } }) From faad00b2a52adaa2b4d2f863699b4fdb8e427be0 Mon Sep 17 00:00:00 2001 From: Andrei Date: Thu, 23 Jan 2025 01:56:20 -0600 Subject: [PATCH 2/6] Simplified effects code and implemented smooth interpolation between day an night light values --- src/components/game/map/Effects.vue | 70 ++++++++++++++--------------- 1 file changed, 34 insertions(+), 36 deletions(-) diff --git a/src/components/game/map/Effects.vue b/src/components/game/map/Effects.vue index 955bb64..8298767 100644 --- a/src/components/game/map/Effects.vue +++ b/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(null) -const mapEffectsReady = ref(false) const mapObject = ref(null) // Effect objects @@ -61,7 +61,6 @@ watch( () => mapStore.mapId, async (newMapId) => { if (newMapId) { - mapEffectsReady.value = false await loadMap() updateScene() } @@ -107,54 +106,54 @@ const updateScene = () => { {} ) as { [key: string]: number } - // Only update effects once mapEffects are loaded - if (!mapEffectsReady.value) { - if (mapObject.value) { - mapEffectsReady.value = true - } else { - return - } - } - - const finalEffects = - mapEffects && Object.keys(mapEffects).length - ? mapEffects - : { - light: timeBasedLight, - rain: weatherState.value.rainPercentage, - fog: weatherState.value.fogDensity * 100 - } + const finalEffects = {...mapEffects, + light: timeBasedLight, + rain: weatherState.value.rainPercentage, + fog: weatherState.value.fogDensity * 100 } + 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) { - const strength = effectValues.rain ?? 0 - strength > 0 ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10)) : effects.rain.value.stop() - } + if (effects.rain) + effects.rain.value.start().setQuantity(effectValues.rain / 10) + else effects.rain.value.stop() - if (effects.fog.value) { - effects.fog.value.setAlpha((effectValues.fog ?? 0) / 100) - } + effects.fog.value.setAlpha(effectValues.fog / 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-(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-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 @@ -181,7 +180,6 @@ const handleResize = () => { watch( () => mapObject.value, () => { - mapEffectsReady.value = false updateScene() }, { deep: true } From 176f31d84aee81e5de7053408cffcb1ab2a31caf Mon Sep 17 00:00:00 2001 From: Andrei Date: Thu, 23 Jan 2025 02:38:30 -0600 Subject: [PATCH 3/6] Light calculations with minute percision --- src/components/game/map/Effects.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/game/map/Effects.vue b/src/components/game/map/Effects.vue index 8298767..56eeb15 100644 --- a/src/components/game/map/Effects.vue +++ b/src/components/game/map/Effects.vue @@ -143,12 +143,12 @@ const calculateLightStrength = (time: Date): number => { //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-(LIGHT_CONFIG.SUNSET_HOUR-LIGHT_CONFIG.TRANSITION_HOURS))/LIGHT_CONFIG.TRANSITION_HOURS) + (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-LIGHT_CONFIG.SUNRISE_HOUR)/LIGHT_CONFIG.TRANSITION_HOURS) + (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 From 3936676f2ce8ff56c00280f2484cfc79d2bd9216 Mon Sep 17 00:00:00 2001 From: Andrei Date: Thu, 23 Jan 2025 13:04:43 -0600 Subject: [PATCH 4/6] fog transparency fix --- src/components/game/map/Effects.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/game/map/Effects.vue b/src/components/game/map/Effects.vue index 56eeb15..b54aba5 100644 --- a/src/components/game/map/Effects.vue +++ b/src/components/game/map/Effects.vue @@ -109,7 +109,7 @@ const updateScene = () => { const finalEffects = {...mapEffects, light: timeBasedLight, rain: weatherState.value.rainPercentage, - fog: weatherState.value.fogDensity * 100 } + fog: weatherState.value.fogDensity } console.log(finalEffects) applyEffects(finalEffects) } @@ -124,7 +124,7 @@ const applyEffects = (effectValues: any) => { effects.rain.value.start().setQuantity(effectValues.rain / 10) else effects.rain.value.stop() - effects.fog.value.setAlpha(effectValues.fog / 100) + effects.fog.value.setAlpha(effectValues.fog/100) } // Linear Interpolation From 30845b80e92570eff2fa0810668c62d5e5b158e2 Mon Sep 17 00:00:00 2001 From: Dennis Postma Date: Sat, 25 Jan 2025 00:02:22 +0100 Subject: [PATCH 5/6] Minor formatting improvement --- src/components/game/map/Effects.vue | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/game/map/Effects.vue b/src/components/game/map/Effects.vue index b54aba5..2abca23 100644 --- a/src/components/game/map/Effects.vue +++ b/src/components/game/map/Effects.vue @@ -177,13 +177,9 @@ const handleResize = () => { } // Lifecycle -watch( - () => mapObject.value, - () => { - updateScene() - }, - { deep: true } -) +watch(() => mapObject.value, () => { + updateScene() +}) onMounted(() => window.addEventListener('resize', handleResize)) From b074270c75b5e49771d1c4aa27f141456b0739a3 Mon Sep 17 00:00:00 2001 From: Dennis Postma Date: Sat, 25 Jan 2025 00:06:25 +0100 Subject: [PATCH 6/6] TS fix --- src/components/utilities/Notifications.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue index 9041c63..bfd8e31 100644 --- a/src/components/utilities/Notifications.vue +++ b/src/components/utilities/Notifications.vue @@ -1,5 +1,5 @@