imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Merge remote-tracking branch 'origin/main' into feature/#182-reset-password

Browse Source 
# Conflicts:
#	src/screens/Login.vue
#	src/stores/gameStore.ts
This commit is contained in:
Colin Kallemein
2024-11-02 21:47:57 +01:00
parent 7d723530e6 7e4e613405
commit 584262a59b
27 changed files with 711 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.vue
View File

@ -2,7 +2,6 @@
<Notifications />
<GmTools v-if="gameStore.character?.role === 'gm'" />
<GmPanel v-if="gameStore.character?.role === 'gm'" />
<component :is="currentScreen" />
</template>
@ -15,19 +14,34 @@ import GmPanel from '@/components/gameMaster/GmPanel.vue'
import Login from '@/screens/Login.vue'
import Characters from '@/screens/Characters.vue'
import Game from '@/screens/Game.vue'
// import Loading from '@/screens/Loading.vue'
import ZoneEditor from '@/screens/ZoneEditor.vue'
import { computed } from 'vue'
import { computed, watch } from 'vue'
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
const currentScreen = computed(() => {
// if (!gameStore.isAssetsLoaded) return Loading
if (!gameStore.connection) return Login
if (!gameStore.token) return Login
if (!gameStore.character) return Characters
if (zoneEditorStore.active) return ZoneEditor
return Game
})
// Watch zoneEditorStore.active and empty gameStore.game.loadedAssets
watch(
() => zoneEditorStore.active,
() => {
gameStore.game.loadedAssets = []
}
)
// #209: Play sound when a button is pressed
addEventListener('click', (event) => {
if (!(event.target instanceof HTMLButtonElement)) {
return
}
const audio = new Audio('/assets/music/click-btn.mp3')
audio.play()
})
</script>

21
src/components/gameMaster/zoneEditor/ZoneEditor.vue
View File

@ -1,7 +1,5 @@
<template>
<div v-if="isLoaded">
<ZoneTiles @tilemap:create="tileMap = $event" />
</div>
<ZoneTiles @tilemap:create="tileMap = $event" />
<ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
<ZoneEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
@ -16,11 +14,10 @@
</template>
<script setup lang="ts">
import { useScene } from 'phavuer'
import { onMounted, onUnmounted, ref } from 'vue'
import { onUnmounted, ref } from 'vue'
import { useGameStore } from '@/stores/gameStore'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import { type AssetT, type Zone } from '@/types'
import { type Zone } from '@/types'
// Components
import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
@ -32,14 +29,10 @@ import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportM
import ZoneTiles from '@/components/gameMaster/zoneEditor/ZoneTiles.vue'
import ZoneObjects from '@/components/gameMaster/zoneEditor/ZoneObjects.vue'
import ZoneEventTiles from '@/components/gameMaster/zoneEditor/ZoneEventTiles.vue'
import config from '@/config'
import { loadZoneTileTexture } from '@/composables/zoneComposable'
const scene = useScene()
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
const isLoaded = ref(false)
function save() {
if (!zoneEditorStore.zone) return
@ -65,14 +58,6 @@ function save() {
})
}
onMounted(async () => {
const tiles: AssetT[] = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
for (const tile of tiles) {
await loadZoneTileTexture(scene, tile.key, tile.updatedAt)
}
isLoaded.value = true
})
onUnmounted(() => {
zoneEditorStore.reset()
})

4
src/components/gameMaster/zoneEditor/ZoneObjects.vue
View File

@ -1,6 +1,6 @@
<template>
<SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
<ZoneObject v-for="zoneObject in zoneEditorStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject @pointerup="() => (selectedZoneObject = zoneObject)" />
<SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" :movingZoneObject="movingZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
<ZoneObject v-for="zoneObject in zoneEditorStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject :selectedZoneObject :movingZoneObject @pointerup="() => (selectedZoneObject = zoneObject)" />
</template>
<script setup lang="ts">

12
src/components/gameMaster/zoneEditor/ZoneTiles.vue
View File

@ -7,13 +7,15 @@ import config from '@/config'
import { useScene } from 'phavuer'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import { onMounted, onUnmounted } from 'vue'
import { createTileArray, FlattenZoneArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
import Controls from '@/components/utilities/Controls.vue'
import { unduplicateArray } from '@/utilities'
import { useGameStore } from '@/stores/gameStore'
import type { AssetDataT } from '@/types'
const emit = defineEmits(['tilemap:create'])
const scene = useScene()
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
const zoneTilemap = createTilemap()
const tiles = createTileLayer()
@ -41,10 +43,10 @@ function createTilemap() {
* A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
*/
function createTileLayer() {
const tilesArray = unduplicateArray(FlattenZoneArray(zoneEditorStore.zone?.tiles ?? []))
const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
return zoneTilemap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
const tilesetImages = Array.from(tilesArray).map((tile: AssetDataT, index: number) => {
return zoneTilemap.addTilesetImage(tile.key, tile.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
}) as any
// Add blank tile

26
src/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue
View File

@ -5,18 +5,23 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { Image, useScene } from 'phavuer'
import { calculateIsometricDepth, loadZoneObjectTexture, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import type { ZoneObject } from '@/types'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { loadTexture } from '@/composables/gameComposable'
import type { AssetDataT, ZoneObject } from '@/types'
const props = defineProps<{
tilemap: Phaser.Tilemaps.Tilemap
zoneObject: ZoneObject
selectedZoneObject: ZoneObject | null
movingZoneObject: ZoneObject | null
}>()
const scene = useScene()
const isTextureLoaded = ref(false)
const imageProps = computed(() => ({
alpha: props.movingZoneObject?.id === props.zoneObject.id ? 0.5 : 1,
tint: props.selectedZoneObject?.id === props.zoneObject.id ? 0x00ff00 : 0xffffff,
depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
x: tileToWorldX(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
y: tileToWorldY(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
@ -26,11 +31,14 @@ const imageProps = computed(() => ({
originX: Number(props.zoneObject.object.originY)
}))
loadZoneObjectTexture(scene, props.zoneObject.object.id, props.zoneObject.object.updatedAt)
.then((loaded) => {
isTextureLoaded.value = loaded
})
.catch((error) => {
console.error('Error loading texture:', error)
})
loadTexture(scene, {
key: props.zoneObject.object.id,
data: '/assets/objects/' + props.zoneObject.object.id + '.png',
group: 'objects',
updatedAt: props.zoneObject.object.updatedAt,
frameWidth: props.zoneObject.object.frameWidth,
frameHeight: props.zoneObject.object.frameHeight
} as AssetDataT).catch((error) => {
console.error('Error loading texture:', error)
})
</script>

16
src/components/sprites/Character.vue
View File

@ -18,12 +18,13 @@
<script lang="ts" setup>
import config from '@/config'
import { type ExtendedCharacter } from '@/types'
import { type ExtendedCharacter, type Sprite as SpriteT } from '@/types'
import { useGameStore } from '@/stores/gameStore'
import { useZoneStore } from '@/stores/zoneStore'
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
import { Container, refObj, RoundRectangle, Sprite, Text, useGame, useScene } from 'phavuer'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { loadSpriteTextures } from '@/composables/gameComposable'
enum Direction {
POSITIVE,
@ -181,6 +182,15 @@ watch(
watch(() => props.character.isMoving, updateSprite)
watch(() => props.character.rotation, updateSprite)
loadSpriteTextures(scene, props.character.characterType?.sprite as SpriteT)
.then(() => {
charSprite.value!.setTexture(charTexture.value)
charSprite.value!.setFlipX(isFlippedX.value)
})
.catch((error) => {
console.error('Error loading texture:', error)
})
onMounted(() => {
charChatContainer.value!.setName(`${props.character!.name}_chatContainer`)
charChatContainer.value!.setVisible(false)
@ -194,10 +204,6 @@ onMounted(() => {
scene.cameras.main.stopFollow()
}
// Set sprite
charSprite.value!.setTexture(charTexture.value)
charSprite.value!.setFlipX(isFlippedX.value)
updatePosition(props.character.positionX, props.character.positionY, props.character.rotation)
})

29
src/components/zone/partials/ZoneObject.vue
View File

@ -1,20 +1,22 @@
<template>
<Image v-if="isTextureLoaded" v-bind="imageProps" />
<Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { computed, onMounted } from 'vue'
import { Image, useScene } from 'phavuer'
import { calculateIsometricDepth, loadZoneObjectTexture, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import type { ZoneObject } from '@/types'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { loadTexture } from '@/composables/gameComposable'
import type { AssetDataT, ZoneObject } from '@/types'
import { useGameStore } from '@/stores/gameStore'
const props = defineProps<{
tilemap: Phaser.Tilemaps.Tilemap
zoneObject: ZoneObject
}>()
const gameStore = useGameStore()
const scene = useScene()
const isTextureLoaded = ref(false)
const imageProps = computed(() => ({
depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
@ -26,11 +28,14 @@ const imageProps = computed(() => ({
originX: Number(props.zoneObject.object.originY)
}))
loadZoneObjectTexture(scene, props.zoneObject.object.id, props.zoneObject.object.updatedAt)
.then((loaded) => {
isTextureLoaded.value = loaded
})
.catch((error) => {
console.error('Error loading texture:', error)
})
loadTexture(scene, {
key: props.zoneObject.object.id,
data: '/assets/objects/' + props.zoneObject.object.id + '.png',
group: 'objects',
updatedAt: props.zoneObject.object.updatedAt,
frameWidth: props.zoneObject.object.frameWidth,
frameHeight: props.zoneObject.object.frameHeight
} as AssetDataT).catch((error) => {
console.error('Error loading texture:', error)
})
</script>

34
src/composables/game/scene/loaderComposable.ts Normal file
View File

@ -0,0 +1,34 @@
export function createSceneLoader(scene: Phaser.Scene) {
const width = scene.cameras.main.width
const height = scene.cameras.main.height
const progressBox = scene.add.graphics()
const progressBar = scene.add.graphics()
progressBox.fillStyle(0x222222, 0.8)
progressBox.fillRect(width / 2 - 180, height / 2, 320, 50)
const loadingText = scene.make.text({
x: width / 2,
y: height / 2 - 50,
text: 'Loading...',
style: {
font: '20px monospace',
// @ts-ignore
fill: '#ffffff'
}
})
loadingText.setOrigin(0.5, 0.5)
scene.load.on(Phaser.Loader.Events.PROGRESS, function (value: any) {
progressBar.clear()
progressBar.fillStyle(0x368f8b, 1)
progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
})
scene.load.on(Phaser.Loader.Events.COMPLETE, function () {
progressBar.destroy()
progressBox.destroy()
loadingText.destroy()
return true
})
}

86
src/composables/gameComposable.ts
View File

@ -0,0 +1,86 @@
import type { AssetDataT, Sprite } from '@/types'
import { useGameStore } from '@/stores/gameStore'
import { AssetStorage } from '@/storage/assetStorage'
import config from '@/config'
const textureLoadingPromises = new Map<string, Promise<boolean>>()
export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): Promise<boolean> {
const gameStore = useGameStore()
const assetStorage = new AssetStorage()
// Check if the texture is already loaded in Phaser
if (gameStore.game.loadedAssets.find((asset) => asset.key === assetData.key)) {
return Promise.resolve(true)
}
// If there's already a loading promise for this texture, return it
if (textureLoadingPromises.has(assetData.key)) {
return await textureLoadingPromises.get(assetData.key)!
}
// Create new loading promise
const loadingPromise = (async () => {
// Check if the asset is already cached
let asset = await assetStorage.get(assetData.key)
// If asset is not found, download it
if (!asset) {
await assetStorage.download(assetData)
asset = await assetStorage.get(assetData.key)
}
// If asset is found, add it to the scene
if (asset) {
return new Promise<boolean>((resolve) => {
// Remove existing texture if it exists
if (scene.textures.exists(asset.key)) {
scene.textures.remove(asset.key)
}
scene.textures.addBase64(asset.key, asset.data)
scene.textures.once(`addtexture-${asset.key}`, () => {
gameStore.game.loadedAssets.push(assetData)
textureLoadingPromises.delete(assetData.key) // Clean up the promise
resolve(true)
})
})
}
textureLoadingPromises.delete(assetData.key) // Clean up the promise
return Promise.resolve(false)
})()
// Store the loading promise
textureLoadingPromises.set(assetData.key, loadingPromise)
return loadingPromise
}
export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
const sprite_actions = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
for await (const sprite_action of sprite_actions) {
await loadTexture(scene, {
key: sprite_action.key,
data: sprite_action.data,
group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites',
updatedAt: sprite_action.updatedAt,
frameCount: sprite_action.frameCount,
frameWidth: sprite_action.frameWidth,
frameHeight: sprite_action.frameHeight
} as AssetDataT)
// If the sprite is not animated, skip
if (!sprite_action.isAnimated) continue
// Add the animation to the scene
const anim = scene.textures.get(sprite_action.key)
scene.textures.addSpriteSheet(sprite_action.key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 })
scene.anims.create({
key: sprite_action.key,
frameRate: 7,
frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
repeat: -1
})
}
return Promise.resolve(true)
}

2
src/composables/pointerHandlers/useGamePointerHandlers.ts
View File

@ -31,7 +31,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
const { worldX, worldY } = pointer
updateWaypoint(worldX, worldY)
if (gameStore.isPlayerDraggingCamera) {
if (gameStore.game.isPlayerDraggingCamera) {
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
if (distance > dragThreshold) {

2
src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts
View File

@ -26,7 +26,7 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
}
function dragZone(pointer: Phaser.Input.Pointer) {
if (gameStore.isPlayerDraggingCamera) {
if (gameStore.game.isPlayerDraggingCamera) {
const { x, y, prevPosition } = pointer
const { scrollX, scrollY, zoom } = camera
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)

66
src/composables/zoneComposable.ts
View File

@ -3,8 +3,8 @@ import Tilemap = Phaser.Tilemaps.Tilemap
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import Tileset = Phaser.Tilemaps.Tileset
import Tile = Phaser.Tilemaps.Tile
import { useAssetManager } from '@/managers/assetManager'
import type { AssetT, Zone as ZoneT } from '@/types'
import type { AssetDataT, Zone as ZoneT } from '@/types'
import { loadTexture } from '@/composables/gameComposable'
export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
const tile = layer.getTileAtWorldXY(x, y)
@ -86,63 +86,11 @@ export function FlattenZoneArray(tiles: string[][]) {
}
export async function loadZoneTilesIntoScene(zone: ZoneT, scene: Phaser.Scene) {
const tileArray: AssetT[] = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone.id).then((response) => response.json())
console.log(tileArray)
// Fetch the list of tiles from the server
const tileArray: AssetDataT[] = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone.id).then((response) => response.json())
// Load each tile into the scene
for (const tile of tileArray) {
await loadZoneTileTexture(scene, tile.key, tile.updatedAt)
await loadTexture(scene, tile)
}
}
export async function loadZoneTileTexture(scene: Phaser.Scene, textureId: string, updatedAt: Date): Promise<boolean> {
const assetManager = useAssetManager
// Check if the texture is already loaded in Phaser
if (scene.textures.exists(textureId)) {
return true
}
let assetData = await assetManager.getAsset(textureId)
if (!assetData) {
await assetManager.downloadAsset(textureId, `/assets/tiles/${textureId}.png`, 'tiles', updatedAt)
assetData = await assetManager.getAsset(textureId)
}
if (assetData) {
return new Promise<boolean>((resolve) => {
scene.textures.addBase64(textureId, assetData.data)
scene.textures.once(`addtexture-${textureId}`, () => {
resolve(true)
})
})
}
return false
}
export async function loadZoneObjectTexture(scene: Phaser.Scene, textureId: string, updatedAt: Date): Promise<boolean> {
const assetManager = useAssetManager
// Check if the texture is already loaded in Phaser
if (scene.textures.exists(textureId)) {
return true
}
let assetData = await assetManager.getAsset(textureId)
if (!assetData) {
await assetManager.downloadAsset(textureId, `/assets/objects/${textureId}.png`, 'objects', updatedAt)
assetData = await assetManager.getAsset(textureId)
}
if (assetData) {
return new Promise<boolean>((resolve) => {
scene.textures.addBase64(textureId, assetData.data)
scene.textures.once(`addtexture-${textureId}`, () => {
resolve(true)
})
})
}
return false
}

81
src/managers/assetManager.ts
View File

@ -1,81 +0,0 @@
import config from '@/config'
import Dexie from 'dexie'
class AssetManager extends Dexie {
assets!: Dexie.Table<
{
key: string
data: Blob
group: string
updatedAt: Date
frameCount?: number
frameWidth?: number
frameHeight?: number
},
string
>
constructor() {
super('Assets')
this.version(1).stores({
assets: 'key, group'
})
}
async downloadAsset(key: string, url: string, group: string, updatedAt: Date, frameCount?: number, frameWidth?: number, frameHeight?: number) {
try {
// Check if the asset already exists, then check if updatedAt is newer
const asset = await this.assets.get(key)
if (asset && asset.updatedAt > updatedAt) {
return
}
// Download the asset
const response = await fetch(config.server_endpoint + url)
const blob = await response.blob()
// Store the asset in the database
await this.assets.put({ key, data: blob, group, updatedAt, frameCount, frameWidth, frameHeight })
} catch (error) {
console.error(`Failed to add asset ${key}:`, error)
}
}
async getAsset(key: string) {
try {
const asset = await this.assets.get(key)
if (asset) {
return {
...asset,
data: URL.createObjectURL(asset.data)
}
}
} catch (error) {
console.error(`Failed to retrieve asset ${key}:`, error)
}
return null
}
async getAssetsByGroup(group: string) {
try {
const assets = await this.assets.where('group').equals(group).toArray()
return assets.map((asset) => ({
...asset,
data: URL.createObjectURL(asset.data)
}))
} catch (error) {
console.error(`Failed to retrieve assets for group ${group}:`, error)
return []
}
}
async deleteAsset(key: string) {
try {
await this.assets.delete(key)
} catch (error) {
console.error(`Failed to delete asset ${key}:`, error)
}
}
}
export const useAssetManager = new AssetManager()

3
src/screens/Characters.vue
View File

@ -114,6 +114,9 @@ gameStore.connection?.on('character:list', (data: any) => {
})
onMounted(async () => {
const audio = new Audio('/assets/music/login.mp3')
await audio.play()
// wait 0.75 sec
setTimeout(() => {
gameStore.connection?.emit('character:list')

42
src/screens/Game.vue
View File

@ -32,10 +32,8 @@ import CharacterProfile from '@/components/gui/CharacterProfile.vue'
import Effects from '@/components/Effects.vue'
import Minimap from '@/components/gui/Minimap.vue'
import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
import { useAssetManager } from '@/managers/assetManager'
const gameStore = useGameStore()
const assetManager = useAssetManager
const gameConfig = {
name: config.name,
@ -78,45 +76,7 @@ function preloadScene(scene: Phaser.Scene) {
*/
scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
scene.load.image('waypoint', '/assets/waypoint.png')
/**
* We're using rex-await-loader to load assets asynchronously
* Phaser does not support this out of the box, so we're using this plugin
*/
// scene.load.rexAwait(async function (successCallback) {
// await assetManager.getAssetsByGroup('tiles').then((assets) => {
// assets.forEach((asset) => {
// if (scene.load.textureManager.exists(asset.key)) return
// scene.textures.addBase64(asset.key, asset.data)
// })
// })
//
// // Load objects
// await assetManager.getAssetsByGroup('objects').then((assets) => {
// assets.forEach((asset) => {
// if (scene.load.textureManager.exists(asset.key)) return
// scene.textures.addBase64(asset.key, asset.data)
// })
// })
//
// successCallback()
// })
}
function createScene(scene: Phaser.Scene) {
/**
* Create sprite animations
* This is done here because phaser forces us to
*/
// assetManager.getAssetsByGroup('sprite_animations').then((assets) => {
// assets.forEach((asset) => {
// scene.anims.create({
// key: asset.key,
// frameRate: 7,
// frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: asset.frameCount! - 1 }),
// repeat: -1
// })
// })
// })
}
function createScene(scene: Phaser.Scene) {}
</script>

67
src/screens/Loading.vue
View File

@ -1,74 +1,25 @@
<template>
<div class="flex flex-col justify-center items-center h-dvh relative">
<div v-if="!isLoaded" class="w-20 h-20 rounded-full border-4 border-solid border-gray-300 border-t-transparent animate-spin"></div>
<button v-else @click="continueBtnClick" class="w-20 h-20 rounded-full bg-gray-500 flex items-center justify-center hover:bg-gray-600 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<button @click="continueBtnClick" class="w-32 h-12 rounded-full bg-gray-500 flex items-center justify-between px-4 hover:bg-gray-600 transition-colors">
<span class="text-white text-lg flex-1 text-center">Play</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
<div v-if="!isLoaded" class="text-center mt-6">
<h1 class="text-2xl font-bold">Loading...</h1>
<p class="text-gray-400">Please wait while we load the assets.</p>
</div>
</div>
</template>
<script setup lang="ts" async>
import { onMounted, ref } from 'vue'
import config from '@/config'
import type { AssetT as ServerAsset } from '@/types'
import { useAssetManager } from '@/managers/assetManager'
import { useGameStore } from '@/stores/gameStore'
/**
* This component downloads all assets from the server and
* stores them in the asset manager.
*/
const gameStore = useGameStore()
const assetManager = useAssetManager
const isLoaded = ref(false)
async function getAssets() {
return fetch(config.server_endpoint + '/assets/')
.then((response) => {
if (!response.ok) throw new Error('Failed to fetch assets')
console.log(response)
return response.json()
})
.catch((error) => {
console.error('Error fetching assets:', error)
return false
})
}
async function loadAssetsIntoAssetManager(assets: ServerAsset[]): Promise<void> {
for (const asset of assets) {
// Check if the asset is already loaded
const existingAsset = await assetManager.getAsset(asset.key)
// Check if the asset needs to be updated
if (!existingAsset || new Date(asset.updatedAt) > new Date(existingAsset.updatedAt)) {
// Check if the asset is already loaded, if so, delete it
if (existingAsset) {
await assetManager.deleteAsset(asset.key)
}
// Add the asset to the asset manager
await assetManager.downloadAsset(asset.key, asset.url, asset.group, asset.updatedAt, asset.frameCount, asset.frameWidth, asset.frameHeight)
}
}
}
function continueBtnClick() {
gameStore.isAssetsLoaded = true
}
// Play music
const audio = new Audio('/assets/music/login.mp3')
audio.play()
onMounted(async () => {
const assets = await getAssets()
if (assets) {
await loadAssetsIntoAssetManager(assets)
isLoaded.value = true
}
})
// Set isLoaded to true
gameStore.game.isLoaded = true
}
</script>

8
src/screens/Login.vue
View File

@ -1,14 +1,15 @@
<template>
<!-- @TODO this must be shown over the login screen -->
<div class="relative max-lg:h-dvh flex flex-row-reverse">
<ResetPassword :isModalOpen="isPasswordResetFormShown" />
<div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
<div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
<div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
<div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
<img src="/assets/login/sq-logo-v1.svg" class="mb-10" />
<img src="/assets/login/sq-logo-v1.svg" class="mb-10" alt="Sylvan Quest logo" />
<div class="relative">
<img src="/assets/ui-elements/ui-box-outer.svg" class="absolute w-full h-full" />
<img src="/assets/ui-elements/ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" />
<img src="/assets/ui-elements/ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
<img src="/assets/ui-elements/ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" alt="UI box inner" />
<!-- Login Form -->
<form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative px-6 py-11">
@ -73,6 +74,7 @@ import { login, register } from '@/services/authentication'
import { useGameStore } from '@/stores/gameStore'
import { useCookies } from '@vueuse/integrations/useCookies'
import ResetPassword from '@/components/utilities/ResetPassword.vue'
import Loading from '@/screens/Loading.vue'
const props = defineProps(['isModalOpen'])
const isPasswordResetFormShown = ref(props.isModalOpen)

18
src/screens/ZoneEditor.vue
View File

@ -16,8 +16,8 @@ import { useGameStore } from '@/stores/gameStore'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
import { loadZoneTilesIntoScene, loadZoneTileTexture } from '@/composables/zoneComposable'
import type { AssetT, Tile } from '@/types'
import { loadTexture } from '@/composables/gameComposable'
import type { AssetDataT } from '@/types'
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
@ -65,6 +65,20 @@ const preloadScene = async (scene: Phaser.Scene) => {
scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
scene.load.image('waypoint', '/assets/waypoint.png')
/**
* Because Phaser can't load tiles after the scene with map in it is created,
* we need to load and cache all the tiles first.
* Then load them into the scene.
*/
scene.load.rexAwait(async function (successCallback: any) {
const tiles: AssetDataT[] = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
for await (const tile of tiles) {
await loadTexture(scene, tile)
}
successCallback()
})
}
const createScene = async (scene: Phaser.Scene) => {}

11
src/services/authentication.ts
View File

@ -1,6 +1,7 @@
import axios from 'axios'
import config from '@/config'
import { useCookies } from '@vueuse/integrations/useCookies'
import { getDomain } from '@/utilities'
export async function register(username: string, email: string, password: string) {
try {
@ -8,6 +9,9 @@ export async function register(username: string, email: string, password: string
useCookies().set('token', response.data.token as string)
return { success: true, token: response.data.token }
} catch (error: any) {
if (typeof error.response.data === 'undefined') {
return { error: 'Could not connect to server' }
}
return { error: error.response.data.message }
}
}
@ -16,9 +20,7 @@ export async function login(username: string, password: string) {
try {
const response = await axios.post(`${config.server_endpoint}/login`, { username, password })
useCookies().set('token', response.data.token as string, {
// for whole domain
// @TODO : #190
// domain: window.location.hostname.split('.').slice(-2).join('.')
domain: getDomain()
})
return { success: true, token: response.data.token }
} catch (error: any) {
@ -31,6 +33,9 @@ export async function resetPassword(email: string) {
const response = await axios.post(`${config.server_endpoint}/reset-password`, { email })
return { success: true, token: response.data.token }
} catch (error: any) {
if (typeof error.response.data === 'undefined') {
return { error: 'Could not connect to server' }
}
return { error: error.response.data.message }
}
}

69
src/storage/assetStorage.ts Normal file
View File

@ -0,0 +1,69 @@
import config from '@/config'
import Dexie from 'dexie'
import type { AssetDataT } from '@/types'
export class AssetStorage {
private db: Dexie
constructor() {
this.db = new Dexie('assets')
this.db.version(1).stores({
assets: 'key, group'
})
}
async download(asset: AssetDataT) {
try {
// Check if the asset already exists, then check if updatedAt is newer
const _asset = await this.db.table('assets').get(asset.key)
if (_asset && _asset.updatedAt > asset.updatedAt) {
return
}
// Download the asset
const response = await fetch(config.server_endpoint + asset.data)
const blob = await response.blob()
// Store the asset in the database
await this.db.table('assets').put({ key: asset.key, data: blob, group: asset.group, updatedAt: asset.updatedAt, frameCount: asset.frameCount, frameWidth: asset.frameWidth, frameHeight: asset.frameHeight })
} catch (error) {
console.error(`Failed to add asset ${asset.key}:`, error)
}
}
async get(key: string) {
try {
const asset = await this.db.table('assets').get(key)
if (asset) {
return {
...asset,
data: URL.createObjectURL(asset.data) // Convert blob to data URL
}
}
} catch (error) {
console.error(`Failed to retrieve asset ${key}:`, error)
}
return null
}
async getByGroup(group: string) {
try {
const assets = await this.db.table('assets').where('group').equals(group).toArray()
return assets.map((asset) => ({
...asset,
data: URL.createObjectURL(asset.data) // Convert blob to data URL
}))
} catch (error) {
console.error(`Failed to retrieve assets for group ${group}:`, error)
return []
}
}
async delete(key: string) {
try {
await this.db.table('assets').delete(key)
} catch (error) {
console.error(`Failed to delete asset ${key}:`, error)
}
}
}

49
src/stores/gameStore.ts
View File

@ -1,27 +1,29 @@
import { defineStore } from 'pinia'
import { io, Socket } from 'socket.io-client'
import type { Asset, Character, Notification, User, WorldSettings } from '@/types'
import type { AssetDataT, Character, Notification, User, WorldSettings } from '@/types'
import config from '@/config'
import { useCookies } from '@vueuse/integrations/useCookies'
import { getDomain } from '@/utilities'
export const useGameStore = defineStore('game', {
state: () => {
return {
notifications: [] as Notification[],
isAssetsLoaded: false,
loadedAssets: [] as string[],
token: '' as string | null,
connection: null as Socket | null,
user: null as User | null,
character: null as Character | null,
isPlayerDraggingCamera: false,
world: {
date: new Date(),
isRainEnabled: false,
isFogEnabled: false,
fogDensity: 0.5
} as WorldSettings,
gameSettings: {
game: {
isLoading: false,
isLoaded: false, // isLoaded is currently being used to determine if the player has interacted with the game
loadedAssets: [] as AssetDataT[],
isPlayerDraggingCamera: false,
isCameraFollowingCharacter: false
},
uiSettings: {
@ -31,6 +33,17 @@ export const useGameStore = defineStore('game', {
}
}
},
getters: {
getLoadedAssets: (state) => {
return state.game.loadedAssets
},
getLoadedAsset: (state) => {
return (key: string) => state.game.loadedAssets.find((asset) => asset.key === key)
},
getLoadedAssetsByGroup: (state) => {
return (group: string) => state.game.loadedAssets.filter((asset) => asset.group === group)
}
},
actions: {
addNotification(notification: Notification) {
if (!notification.id) {
@ -53,17 +66,8 @@ export const useGameStore = defineStore('game', {
toggleGmPanel() {
this.uiSettings.isGmPanelOpen = !this.uiSettings.isGmPanelOpen
},
togglePlayerDraggingCamera() {
this.isPlayerDraggingCamera = !this.isPlayerDraggingCamera
},
setPlayerDraggingCamera(moving: boolean) {
this.isPlayerDraggingCamera = moving
},
toggleCameraFollowingCharacter() {
this.gameSettings.isCameraFollowingCharacter = !this.gameSettings.isCameraFollowingCharacter
},
setCameraFollowingCharacter(following: boolean) {
this.gameSettings.isCameraFollowingCharacter = following
this.game.isPlayerDraggingCamera = moving
},
toggleChat() {
this.uiSettings.isChatOpen = !this.uiSettings.isChatOpen
@ -101,21 +105,22 @@ export const useGameStore = defineStore('game', {
this.connection?.disconnect()
useCookies().remove('token', {
// for whole domain
// @TODO : #190
// domain: window.location.hostname.split('.').slice(-2).join('.')
domain: getDomain()
})
this.isAssetsLoaded = false
this.connection = null
this.token = null
this.user = null
this.character = null
this.uiSettings.isGmPanelOpen = false
this.isPlayerDraggingCamera = false
this.gameSettings.isCameraFollowingCharacter = false
this.game.isLoaded = false
this.game.loadedAssets = []
this.game.isPlayerDraggingCamera = false
this.game.isCameraFollowingCharacter = false
this.uiSettings.isChatOpen = false
this.uiSettings.isCharacterProfileOpen = false
this.uiSettings.isGmPanelOpen = false
this.world.date = new Date()
this.world.isRainEnabled = false

5
src/types.ts
View File

@ -4,11 +4,12 @@ export type Notification = {
message?: string
}
export type AssetT = {
export type AssetDataT = {
key: string
url: string
data: string
group: 'tiles' | 'objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
updatedAt: Date
isAnimated?: boolean
frameCount?: number
frameWidth?: number
frameHeight?: number

18
src/utilities.ts
View File

@ -5,3 +5,21 @@ export function uuidv4() {
export function unduplicateArray(array: any[]) {
return [...new Set(array.flat())]
}
export function getDomain() {
// Check if not localhost
if (window.location.hostname !== 'localhost') {
return window.location.hostname
}
// Check if not IP address
if (window.location.hostname.match(/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/)) {
return window.location.hostname
}
if (window.location.hostname.split('.').length < 3) {
return window.location.hostname
}
return window.location.hostname.split('.').slice(-2).join('.')
}