From 18b07d2f466c8ef9b3bde07867ecf5a500599888 Mon Sep 17 00:00:00 2001 From: Dennis Postma Date: Fri, 27 Dec 2024 19:00:53 +0100 Subject: [PATCH] Several fixes, improvements, refactor for authentication --- package-lock.json | 6 +- src/application/types.ts | 2 +- src/components/Effects.vue | 92 +++++++++---------- src/components/game/character/Character.vue | 2 +- .../character/partials/CharacterChest.vue | 6 +- .../game/character/partials/CharacterHair.vue | 4 +- src/components/game/zone/Zone.vue | 2 +- .../characterHair/CharacterHairList.vue | 8 +- .../characterType/CharacterTypeList.vue | 8 +- .../partials/item/itemDetails.vue | 2 +- .../assetManager/partials/item/itemList.vue | 7 +- src/components/login/LoginForm.vue | 12 +-- src/components/login/RegisterForm.vue | 43 +++------ src/components/screens/Characters.vue | 12 +-- src/components/screens/Login.vue | 2 +- src/components/utilities/Controls.vue | 14 +-- src/composables/gameComposable.ts | 7 +- src/services/authentication.ts | 6 +- src/storage/assetStorage.ts | 3 +- src/stores/zoneStore.ts | 6 +- 20 files changed, 113 insertions(+), 131 deletions(-) diff --git a/package-lock.json b/package-lock.json index b7be796..fb111c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3690,9 +3690,9 @@ } }, "node_modules/es-module-lexer": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz", - "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz", + "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==", "dev": true, "license": "MIT" }, diff --git a/src/application/types.ts b/src/application/types.ts index a8a148e..17445e3 100644 --- a/src/application/types.ts +++ b/src/application/types.ts @@ -21,7 +21,7 @@ export type AssetDataT = { frameRate?: number frameWidth?: number frameHeight?: number - frameRate?: number + frameCount?: number } export type Tile = { diff --git a/src/components/Effects.vue b/src/components/Effects.vue index c9c100a..4df3424 100644 --- a/src/components/Effects.vue +++ b/src/components/Effects.vue @@ -55,20 +55,23 @@ const initializeEffects = (scene: Phaser.Scene) => { effects.light.value = scene.add.graphics().setDepth(1000) // Rain - effects.rain.value = scene.add.particles(0, 0, 'raindrop', { - x: { min: 0, max: window.innerWidth }, - y: -50, - quantity: 5, - lifespan: 2000, - speedY: { min: 300, max: 500 }, - scale: { start: 0.005, end: 0.005 }, - alpha: { start: 0.5, end: 0 }, - blendMode: 'ADD' - }).setDepth(900) + effects.rain.value = scene.add + .particles(0, 0, 'raindrop', { + x: { min: 0, max: window.innerWidth }, + y: -50, + quantity: 5, + lifespan: 2000, + speedY: { min: 300, max: 500 }, + scale: { start: 0.005, end: 0.005 }, + alpha: { start: 0.5, end: 0 }, + blendMode: 'ADD' + }) + .setDepth(900) effects.rain.value.stop() // Fog - effects.fog.value = scene.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog') + effects.fog.value = scene.add + .sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog') .setScale(2) .setAlpha(0) .setDepth(950) @@ -77,10 +80,13 @@ const initializeEffects = (scene: Phaser.Scene) => { // Effect updates const updateScene = () => { const timeBasedLight = calculateLightStrength(gameStore.world.date) - const zoneEffects = zoneStore.zone?.zoneEffects?.reduce((acc, curr) => ({ - ...acc, - [curr.effect]: curr.strength - }), {}) as { [key: string]: number } + const zoneEffects = zoneStore.zone?.zoneEffects?.reduce( + (acc, curr) => ({ + ...acc, + [curr.effect]: curr.strength + }), + {} + ) as { [key: string]: number } // Only update effects once zoneEffects are loaded if (!zoneEffectsReady.value) { @@ -91,13 +97,14 @@ const updateScene = () => { } } - const finalEffects = zoneEffects && Object.keys(zoneEffects).length - ? zoneEffects - : { - light: timeBasedLight, - rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0, - fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0 - } + const finalEffects = + zoneEffects && Object.keys(zoneEffects).length + ? zoneEffects + : { + light: timeBasedLight, + rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0, + fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0 + } applyEffects(finalEffects) } @@ -105,16 +112,12 @@ const updateScene = () => { const applyEffects = (effectValues: any) => { if (effects.light.value) { const darkness = 1 - (effectValues.light ?? 100) / 100 - effects.light.value.clear() - .fillStyle(0x000000, darkness) - .fillRect(0, 0, window.innerWidth, window.innerHeight) + 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() + strength > 0 ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10)) : effects.rain.value.stop() } if (effects.fog.value) { @@ -126,19 +129,14 @@ 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.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 && 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 + 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) + return LIGHT_CONFIG.DAY_STRENGTH - (LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * (totalMinutes / 120) } // Socket and window handlers @@ -157,17 +155,19 @@ const setupSocketListeners = () => { } const handleResize = () => { - if (effects.rain.value) - effects.rain.value.updateConfig({ x: { min: 0, max: window.innerWidth } }) - if (effects.fog.value) - effects.fog.value.setPosition(window.innerWidth / 2, window.innerHeight / 2) + if (effects.rain.value) effects.rain.value.updateConfig({ x: { min: 0, max: window.innerWidth } }) + if (effects.fog.value) effects.fog.value.setPosition(window.innerWidth / 2, window.innerHeight / 2) } // Lifecycle -watch(() => zoneStore.zone, () => { - zoneEffectsReady.value = false - updateScene() -}, { deep: true }) +watch( + () => zoneStore.zone, + () => { + zoneEffectsReady.value = false + updateScene() + }, + { deep: true } +) onMounted(() => window.addEventListener('resize', handleResize)) @@ -176,4 +176,4 @@ onBeforeUnmount(() => { if (sceneRef.value) sceneRef.value.scene.remove('effects') gameStore.connection?.off('weather') }) - \ No newline at end of file + diff --git a/src/components/game/character/Character.vue b/src/components/game/character/Character.vue index 38e4e04..f1a467f 100644 --- a/src/components/game/character/Character.vue +++ b/src/components/game/character/Character.vue @@ -3,7 +3,7 @@ - + diff --git a/src/components/game/character/partials/CharacterChest.vue b/src/components/game/character/partials/CharacterChest.vue index b64e942..238b6e4 100644 --- a/src/components/game/character/partials/CharacterChest.vue +++ b/src/components/game/character/partials/CharacterChest.vue @@ -31,16 +31,14 @@ const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character. const imageProps = computed(() => { // Get the current sprite action based on direction const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front' - const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find( - spriteAction => spriteAction.action === direction - ) + const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction) return { depth: 1, originX: Number(spriteAction?.originX) ?? 0, originY: Number(spriteAction?.originY) ?? 0, flipX: isFlippedX.value, - texture: texture.value, + texture: texture.value // y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0 } }) diff --git a/src/components/game/character/partials/CharacterHair.vue b/src/components/game/character/partials/CharacterHair.vue index b8e25b6..0036ba8 100644 --- a/src/components/game/character/partials/CharacterHair.vue +++ b/src/components/game/character/partials/CharacterHair.vue @@ -31,9 +31,7 @@ const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character. const imageProps = computed(() => { // Get the current sprite action based on direction const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front' - const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find( - spriteAction => spriteAction.action === direction - ) + const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction) return { depth: 1, diff --git a/src/components/game/zone/Zone.vue b/src/components/game/zone/Zone.vue index 27370a4..eac611e 100644 --- a/src/components/game/zone/Zone.vue +++ b/src/components/game/zone/Zone.vue @@ -51,7 +51,7 @@ gameStore.connection!.on('zone:character:leave', (characterId: number) => { zoneStore.removeCharacter(characterId) }) -gameStore.connection!.on('character:move', (data: { id: number, positionX: number, positionY: number, rotation: number, isMoving: boolean }) => { +gameStore.connection!.on('character:move', (data: { id: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => { zoneStore.updateCharacterPosition(data) }) diff --git a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue index a40a022..c9b2e7b 100644 --- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue +++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue @@ -11,7 +11,13 @@
- +
{{ characterHair.name }}
diff --git a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue index ada453d..6809725 100644 --- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue +++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue @@ -11,7 +11,13 @@
- +
{{ characterType.name }}
diff --git a/src/components/gameMaster/assetManager/partials/item/itemDetails.vue b/src/components/gameMaster/assetManager/partials/item/itemDetails.vue index 3415aa0..e1ca767 100644 --- a/src/components/gameMaster/assetManager/partials/item/itemDetails.vue +++ b/src/components/gameMaster/assetManager/partials/item/itemDetails.vue @@ -140,4 +140,4 @@ onMounted(() => { onBeforeUnmount(() => { assetManagerStore.setSelectedItem(null) }) - \ No newline at end of file + diff --git a/src/components/gameMaster/assetManager/partials/item/itemList.vue b/src/components/gameMaster/assetManager/partials/item/itemList.vue index a741333..2cdcc43 100644 --- a/src/components/gameMaster/assetManager/partials/item/itemList.vue +++ b/src/components/gameMaster/assetManager/partials/item/itemList.vue @@ -64,10 +64,7 @@ const filteredItems = computed(() => { if (!searchQuery.value) { return assetManagerStore.itemList } - return assetManagerStore.itemList.filter((item) => - item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || - item.itemType.toLowerCase().includes(searchQuery.value.toLowerCase()) - ) + return assetManagerStore.itemList.filter((item) => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || item.itemType.toLowerCase().includes(searchQuery.value.toLowerCase())) }) const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredItems, { @@ -95,4 +92,4 @@ onMounted(() => { assetManagerStore.setItemList(response) }) }) - \ No newline at end of file + diff --git a/src/components/login/LoginForm.vue b/src/components/login/LoginForm.vue index 58d9e46..d95eb50 100644 --- a/src/components/login/LoginForm.vue +++ b/src/components/login/LoginForm.vue @@ -1,5 +1,5 @@