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

Merge remote-tracking branch 'origin/feature/cache'

Browse Source
This commit is contained in:
Dennis Postma 2025-01-10 23:23:00 +01:00
commit b9bcfc719f
40 changed files with 876 additions and 1737 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.example
View File

@ -1,5 +1,5 @@
VITE_NAME=Noxious
VITE_DEVELOPMENT=true
VITE_SERVER_ENDPOINT=http://localhost:4000
VITE_TILE_SIZE_X=64
VITE_TILE_SIZE_Y=32
VITE_TILE_SIZE_WIDTH=64
VITE_TILE_SIZE_HEIGHT=32

1632
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -51,7 +51,6 @@
"typescript": "~5.6.2",
"vite": "^5.4.9",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-vue-devtools": "^7.5.2",
"vitest": "^2.0.3",
"vue-tsc": "^1.6.5"
}

11
src/App.vue
View File

@ -1,4 +1,5 @@
<template>
<Debug />
<Notifications />
<BackgroundImageLoader />
<GmPanel v-if="gameStore.character?.role === 'gm'" />
@ -9,18 +10,21 @@
import GmPanel from '@/components/gameMaster/GmPanel.vue'
import Characters from '@/components/screens/Characters.vue'
import Game from '@/components/screens/Game.vue'
import Loading from '@/components/screens/Loading.vue'
import Login from '@/components/screens/Login.vue'
import MapEditor from '@/components/screens/MapEditor.vue'
import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
import Debug from '@/components/utilities/Debug.vue'
import Notifications from '@/components/utilities/Notifications.vue'
import { useGameStore } from '@/stores/gameStore'
import { useMapEditorStore } from '@/stores/mapEditorStore'
import { computed, watch } from 'vue'
import { computed, onMounted, onUnmounted, watch } from 'vue'
const gameStore = useGameStore()
const mapEditorStore = useMapEditorStore()
const currentScreen = computed(() => {
if (!gameStore.game.isLoaded) return Loading
if (!gameStore.connection) return Login
if (!gameStore.token) return Login
if (!gameStore.character) return Characters
@ -32,11 +36,14 @@ const currentScreen = computed(() => {
watch(
() => mapEditorStore.active,
() => {
gameStore.game.loadedAssets = []
gameStore.game.loadedTextures = []
}
)
// #209: Play sound when a button is pressed
/**
* @TODO: Not all button-like elements will actually be a button, so we need to find a better way to do this
*/
addEventListener('click', (event) => {
if (!(event.target instanceof HTMLButtonElement)) {
return

81
src/application/assets.ts
View File

@ -1,81 +0,0 @@
import config from '@/application/config'
import type { AssetDataT } from '@/application/types'
import Dexie from 'dexie'
export class Assets {
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,
originX: asset.originX,
originY: asset.originY,
isAnimated: asset.isAnimated,
frameRate: asset.frameRate,
frameWidth: asset.frameWidth,
frameHeight: asset.frameHeight,
frameCount: asset.frameCount
})
} 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)
}
}
}

4
src/application/config.ts
View File

@ -3,7 +3,7 @@ export default {
development: import.meta.env.VITE_DEVELOPMENT === 'true',
server_endpoint: import.meta.env.VITE_SERVER_ENDPOINT,
tile_size: {
x: Number(import.meta.env.VITE_TILE_SIZE_X),
y: Number(import.meta.env.VITE_TILE_SIZE_Y)
width: Number(import.meta.env.VITE_TILE_SIZE_WIDTH),
height: Number(import.meta.env.VITE_TILE_SIZE_HEIGHT)
}
}

15
src/application/types.ts
View File

@ -12,9 +12,9 @@ export type HttpResponse<T> = {
data?: T
}
export type AssetDataT = {
export type TextureData = {
key: string
data: string
data: string // URL or Base64 encoded blob
group: 'tiles' | 'map_objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
updatedAt: Date
originX?: number
@ -174,10 +174,9 @@ export type Character = {
positionX: number
positionY: number
rotation: number
characterType: CharacterType | null | string
characterHair: CharacterHair | null
mapId: UUID
map: Map
characterType: UUID | null
characterHair: UUID | null
map: UUID
chats: Chat[]
items: CharacterItem[]
equipment: CharacterEquipment[]
@ -185,7 +184,7 @@ export type Character = {
export type MapCharacter = {
character: Character
isMoving?: boolean
isMoving: boolean
}
export type CharacterItem = {
@ -256,6 +255,6 @@ export type WeatherState = {
}
export type mapLoadData = {
map: Map
mapId: UUID
characters: MapCharacter[]
}

111
src/components/game/character/Character.vue
View File

@ -1,8 +1,8 @@
<template>
<ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
<Healthbar :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
<Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
<CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
<ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
<Healthbar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
<Container ref="charContainer" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY">
<!-- <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
<!-- <CharacterChest :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
<Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
</Container>
@ -16,6 +16,7 @@ import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
import Healthbar from '@/components/game/character/partials/Healthbar.vue'
import { loadSpriteTextures } from '@/composables/gameComposable'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
import { CharacterTypeStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { useMapStore } from '@/stores/mapStore'
import { Container, refObj, Sprite, useScene } from 'phavuer'
@ -36,28 +37,29 @@ const props = defineProps<{
const charContainer = refObj<Phaser.GameObjects.Container>()
const charSprite = refObj<Phaser.GameObjects.Sprite>()
const charSpriteId = ref('')
const gameStore = useGameStore()
const mapStore = useMapStore()
const scene = useScene()
const currentX = ref(0)
const currentY = ref(0)
const currentPositionX = ref(0)
const currentPositionY = ref(0)
const isometricDepth = ref(1)
const isInitialPosition = ref(true)
const tween = ref<Phaser.Tweens.Tween | null>(null)
const updateIsometricDepth = (x: number, y: number) => {
isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true)
const updateIsometricDepth = (positionX: number, positionY: number) => {
isometricDepth.value = calculateIsometricDepth(positionX, positionY, 28, 94, true)
}
const updatePosition = (x: number, y: number, direction: Direction) => {
const targetX = tileToWorldX(props.tilemap, x, y)
const targetY = tileToWorldY(props.tilemap, x, y)
const updatePosition = (positionX: number, positionY: number, direction: Direction) => {
const newPositionX = tileToWorldX(props.tilemap, positionX, positionY)
const newPositionY = tileToWorldY(props.tilemap, positionX, positionY)
if (isInitialPosition.value) {
currentX.value = targetX
currentY.value = targetY
currentPositionX.value = newPositionX
currentPositionY.value = newPositionY
isInitialPosition.value = false
return
}
@ -66,52 +68,53 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
tween.value.stop()
}
const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
const distance = Math.sqrt(Math.pow(newPositionX - currentPositionX.value, 2) + Math.pow(newPositionY - currentPositionY.value, 2))
if (distance >= config.tile_size.x / 1.1) {
currentX.value = targetX
currentY.value = targetY
if (distance >= config.tile_size.width / 1.1) {
currentPositionX.value = newPositionX
currentPositionY.value = newPositionY
return
}
const duration = distance * 5.7
tween.value = props.tilemap.scene.tweens.add({
targets: { x: currentX.value, y: currentY.value },
x: targetX,
y: targetY,
targets: { x: currentPositionX.value, y: currentPositionY.value },
x: newPositionX,
y: newPositionY,
duration,
ease: 'Linear',
onStart: () => {
if (direction === Direction.POSITIVE) {
updateIsometricDepth(x, y)
updateIsometricDepth(positionX, positionY)
}
},
onUpdate: (tween) => {
currentX.value = tween.targets[0].x
currentY.value = tween.targets[0].y
// @ts-ignore
currentPositionX.value = tween.targets[0].x
// @ts-ignore
currentPositionY.value = tween.targets[0].y
},
onComplete: () => {
if (direction === Direction.NEGATIVE) {
updateIsometricDepth(x, y)
updateIsometricDepth(positionX, positionY)
}
}
})
}
const calcDirection = (oldX: number, oldY: number, newX: number, newY: number): Direction => {
if (newY < oldY || newX < oldX) return Direction.NEGATIVE
if (newX > oldX || newY > oldY) return Direction.POSITIVE
const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX: number, newPositionY: number): Direction => {
if (newPositionY < oldPositionY || newPositionX < oldPositionX) return Direction.NEGATIVE
if (newPositionX > oldPositionX || newPositionY > oldPositionY) return Direction.POSITIVE
return Direction.UNCHANGED
}
const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
const charTexture = computed(() => {
const { rotation, characterType } = props.mapCharacter.character
const spriteId = characterType?.sprite ?? 'idle_right_down'
const spriteId = charSpriteId.value ?? 'idle_right_down'
const action = props.mapCharacter.isMoving ? 'walk' : 'idle'
const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
const direction = [0, 6].includes(props.mapCharacter.character.rotation) ? 'left_up' : 'right_down'
return `${spriteId}-${action}_${direction}`
})
@ -119,47 +122,48 @@ const charTexture = computed(() => {
const updateSprite = () => {
if (props.mapCharacter.isMoving) {
charSprite.value!.anims.play(charTexture.value, true)
return
} else {
charSprite.value!.anims.stop()
charSprite.value!.setFrame(0)
charSprite.value!.setTexture(charTexture.value)
}
charSprite.value!.anims.stop()
charSprite.value!.setFrame(0)
charSprite.value!.setTexture(charTexture.value)
}
watch(
() => ({
x: props.mapCharacter.character.positionX,
y: props.mapCharacter.character.positionY,
positionX: props.mapCharacter.character.positionX,
positionY: props.mapCharacter.character.positionY,
isMoving: props.mapCharacter.isMoving,
rotation: props.mapCharacter.character.rotation
}),
(newValues, oldValues) => {
if (!newValues) return
if (!oldValues || newValues.x !== oldValues.x || newValues.y !== oldValues.y) {
const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.x, oldValues.y, newValues.x, newValues.y)
updatePosition(newValues.x, newValues.y, direction)
if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY)
updatePosition(newValues.positionX, newValues.positionY, direction)
}
// Handle animation updates
if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
updateSprite()
}
},
{ deep: true }
}
)
watch(() => props.mapCharacter, updateSprite)
loadSpriteTextures(scene, props.mapCharacter.character.characterType?.sprite as string)
.then(() => {
charSprite.value!.setTexture(charTexture.value)
charSprite.value!.setFlipX(isFlippedX.value)
})
.catch((error) => {
console.error('Error loading texture:', error)
})
const characterTypeStorage = new CharacterTypeStorage()
characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!).then((spriteId) => {
console.log(spriteId)
charSpriteId.value = spriteId
loadSpriteTextures(scene, spriteId)
.then(() => {
charSprite.value!.setTexture(charTexture.value)
charSprite.value!.setFlipX(isFlippedX.value)
})
.catch((error) => {
console.error('Error loading texture:', error)
})
})
onMounted(() => {
charContainer.value!.setName(props.mapCharacter.character!.name)
@ -168,8 +172,7 @@ onMounted(() => {
mapStore.setCharacterLoaded(true)
// #146 : Set camera position to character, need to be improved still
// scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
// scene.cameras.main.stopFollow()
scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
}
updatePosition(props.mapCharacter.character.positionX, props.mapCharacter.character.positionY, props.mapCharacter.character.rotation)

14
src/components/game/map/Map.vue
View File

@ -1,21 +1,18 @@
<template>
<MapTiles :key="mapStore.map?.id ?? 0" @tileMap:create="tileMap = $event" />
<MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
<MapTiles :key="mapStore.mapId" @tileMap:create="tileMap = $event" />
<!-- <MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />-->
<Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
</template>
<script setup lang="ts">
import type { MapCharacter, mapLoadData, UUID } from '@/application/types'
import Characters from '@/components/game/map/Characters.vue'
import MapObjects from '@/components/game/map/PlacedMapObjects.vue'
import MapTiles from '@/components/game/map/MapTiles.vue'
import { loadMapTilesIntoScene } from '@/composables/mapComposable'
import MapObjects from '@/components/game/map/PlacedMapObjects.vue'
import { useGameStore } from '@/stores/gameStore'
import { useMapStore } from '@/stores/mapStore'
import { useScene } from 'phavuer'
import { onUnmounted, ref, shallowRef } from 'vue'
import { onUnmounted, shallowRef } from 'vue'
const scene = useScene()
const gameStore = useGameStore()
const mapStore = useMapStore()
@ -31,8 +28,7 @@ onUnmounted(() => {
// Event listeners
gameStore.connection?.on('map:character:teleport', async (data: mapLoadData) => {
await loadMapTilesIntoScene(data.map.id, scene)
mapStore.setMap(data.map)
mapStore.setMapId(data.mapId)
mapStore.setCharacters(data.characters)
})

74
src/components/game/map/MapTiles.vue
View File

@ -1,69 +1,75 @@
<template>
<Controls :layer="tileLayer" :depth="0" />
<Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
</template>
<script setup lang="ts">
import config from '@/application/config'
import type { UUID } from '@/application/types'
import { unduplicateArray } from '@/application/utilities'
import Controls from '@/components/utilities/Controls.vue'
import { FlattenMapArray, setLayerTiles } from '@/composables/mapComposable'
import { FlattenMapArray, loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'
import { MapStorage } from '@/storage/storages'
import { useMapStore } from '@/stores/mapStore'
import { useScene } from 'phavuer'
import { onBeforeUnmount } from 'vue'
import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
import Tileset = Phaser.Tilemaps.Tileset
const emit = defineEmits(['tileMap:create'])
const scene = useScene()
const mapStore = useMapStore()
const tileMap = createTileMap()
const tileLayer = createTileLayer()
const mapStorage = new MapStorage()
/**
* A Tilemap is a container for Tilemap data.
* This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
* A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
*/
function createTileMap() {
const mapData = new Phaser.Tilemaps.MapData({
width: mapStore.map?.width,
height: mapStore.map?.height,
tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y,
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
function createTileMap(mapData: any) {
const mapConfig = new Phaser.Tilemaps.MapData({
width: mapData?.width,
height: mapData?.height,
tileWidth: config.tile_size.width,
tileHeight: config.tile_size.height,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
})
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapConfig)
emit('tileMap:create', newTileMap)
return newTileMap
}
/**
* 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(FlattenMapArray(mapStore.map?.tiles ?? []))
function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap, mapData: any) {
const tilesArray = unduplicateArray(FlattenMapArray(mapData?.tiles ?? []))
const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
return tileMap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
}) as any
const tilesetImages = tilesArray.map((tile: any, index: number) => {
return currentTileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
})
// Add blank tile
tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
tilesetImages.push(currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0)
layer.setCullPadding(2, 2)
return layer
}
setLayerTiles(tileMap, tileLayer, mapStore.map?.tiles)
onMounted(() => {
loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
.then(() => mapStorage.get(mapStore.mapId))
.then((mapData) => {
tileMap.value = createTileMap(mapData)
tileLayer.value = createTileLayer(tileMap.value, mapData)
setLayerTiles(tileMap.value, tileLayer.value, mapData?.tiles)
})
.catch((error) => console.error('Failed to initialize map:', error))
})
onBeforeUnmount(() => {
tileMap.destroyLayer('tiles')
tileMap.removeAllLayers()
tileMap.destroy()
if (!tileMap.value) return
tileMap.value.destroyLayer('tiles')
tileMap.value.removeAllLayers()
tileMap.value.destroy()
})
</script>

8
src/components/game/map/partials/PlacedMapObject.vue
View File

@ -1,9 +1,9 @@
<template>
<Image v-if="gameStore.getLoadedAsset(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
<Image v-if="gameStore.isAssetLoaded(props.placedMapObject.mapObject)" v-bind="imageProps" />
</template>
<script setup lang="ts">
import type { AssetDataT, PlacedMapObject } from '@/application/types'
import type { PlacedMapObject, TextureData } from '@/application/types'
import { loadTexture } from '@/composables/gameComposable'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
import { useGameStore } from '@/stores/gameStore'
@ -30,12 +30,12 @@ const imageProps = computed(() => ({
loadTexture(scene, {
key: props.placedMapObject.mapObject.id,
data: '/assets/map_objects/' + props.placedMapObject.mapObject.id + '.png',
data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
group: 'map_objects',
updatedAt: props.placedMapObject.mapObject.updatedAt,
frameWidth: props.placedMapObject.mapObject.frameWidth,
frameHeight: props.placedMapObject.mapObject.frameHeight
} as AssetDataT).catch((error) => {
} as TextureData).catch((error) => {
console.error('Error loading texture:', error)
})
</script>

2
src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="h-full overflow-auto">
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
<img class="max-h-56" :src="`${config.server_endpoint}/assets/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" />
<img class="max-h-56" :src="`${config.server_endpoint}/textures/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" />
</div>
<div class="mt-5 block">
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">

2
src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue
View File

@ -13,7 +13,7 @@
<a v-for="{ data: mapObject } in list" :key="mapObject.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedMapObject?.id === mapObject.id }" @click="assetManagerStore.setSelectedMapObject(mapObject as MapObject)">
<div class="flex items-center gap-2.5">
<div class="h-7 w-16 max-w-16 flex justify-center">
<img class="h-7" :src="`${config.server_endpoint}/assets/map_objects/${mapObject.id}.png`" alt="Object" />
<img class="h-7" :src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`" alt="Object" />
</div>
<span :class="{ 'text-white': assetManagerStore.selectedMapObject?.id === mapObject.id }">{{ mapObject.name }}</span>
</div>

2
src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="h-full overflow-auto">
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
<img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
<img class="max-h-72" :src="`${config.server_endpoint}/textures/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
</div>
<div class="mt-5 block">
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">

2
src/components/gameMaster/assetManager/partials/tile/TileList.vue
View File

@ -13,7 +13,7 @@
<a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
<div class="flex items-center gap-2.5">
<div class="h-7 w-16 max-w-16 flex justify-center">
<img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
<img class="h-7" :src="`${config.server_endpoint}/textures/tiles/${tile.id}.png`" alt="Tile" />
</div>
<span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span>
</div>

4
src/components/gameMaster/mapEditor/MapEditor.vue
View File

@ -16,11 +16,11 @@
<script setup lang="ts">
import { type Map } from '@/application/types'
import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
import MapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
import MapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
// Components

14
src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
View File

@ -4,7 +4,7 @@
<script setup lang="ts">
import config from '@/application/config'
import type { AssetDataT } from '@/application/types'
import type { TextureData } from '@/application/types'
import Controls from '@/components/utilities/Controls.vue'
import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
import { useGameStore } from '@/stores/gameStore'
@ -29,8 +29,8 @@ function createTileMap() {
const mapData = new Phaser.Tilemaps.MapData({
width: mapEditorStore.map?.width,
height: mapEditorStore.map?.height,
tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y,
tileWidth: config.tile_size.width,
tileHeight: config.tile_size.height,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
})
@ -47,13 +47,13 @@ function createTileMap() {
function createTileLayer() {
const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
const tilesetImages = Array.from(tilesArray).map((tile: AssetDataT, index: number) => {
return tileMap.addTilesetImage(tile.key, tile.key, 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: TextureData, index: number) => {
return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
}) as any
// Add blank tile
tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0)
layer.setCullPadding(2, 2)

6
src/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue
View File

@ -3,7 +3,7 @@
</template>
<script setup lang="ts">
import type { AssetDataT, PlacedMapObject } from '@/application/types'
import type { PlacedMapObject, TextureData } from '@/application/types'
import { loadTexture } from '@/composables/gameComposable'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
import { useGameStore } from '@/stores/gameStore'
@ -34,12 +34,12 @@ const imageProps = computed(() => ({
loadTexture(scene, {
key: props.placedMapObject.mapObject.id,
data: '/assets/map_objects/' + props.placedMapObject.mapObject.id + '.png',
data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
group: 'map_objects',
updatedAt: props.placedMapObject.mapObject.updatedAt,
frameWidth: props.placedMapObject.mapObject.frameWidth,
frameHeight: props.placedMapObject.mapObject.frameHeight
} as AssetDataT).catch((error) => {
} as TextureData).catch((error) => {
console.error('Error loading texture:', error)
})
</script>

6
src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
View File

@ -6,12 +6,12 @@
<script setup lang="ts">
import type { MapObject, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
import { uuidv4 } from '@/application/utilities'
import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
import { getTile } from '@/composables/mapComposable'
import { useMapEditorStore } from '@/stores/mapEditorStore'
import { useScene } from 'phavuer'
import { onMounted, onUnmounted, ref, watch } from 'vue'
import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
const scene = useScene()
const mapEditorStore = useMapEditorStore()
@ -240,7 +240,7 @@ watch(
})
}
}
},
}
// { deep: true }
)
</script>

2
src/components/gameMaster/mapEditor/partials/MapObjectList.vue
View File

@ -23,7 +23,7 @@
<div v-for="(mapObject, index) in filteredMapObjects" :key="index" class="max-w-1/4 inline-block">
<img
class="border-2 border-solid max-w-full"
:src="`${config.server_endpoint}/assets/map_objects/${mapObject.id}.png`"
:src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`"
alt="Object"
@click="mapEditorStore.setSelectedMapObject(mapObject)"
:class="{

8
src/components/gameMaster/mapEditor/partials/TileList.vue
View File

@ -24,7 +24,7 @@
<div v-for="group in groupedTiles" :key="group.parent.id" class="flex flex-col items-center justify-center relative">
<img
class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
:src="`${config.server_endpoint}/assets/tiles/${group.parent.id}.png`"
:src="`${config.server_endpoint}/textures/tiles/${group.parent.id}.png`"
:alt="group.parent.name"
@click="openGroup(group)"
@load="() => processTile(group.parent)"
@ -50,7 +50,7 @@
<div class="flex flex-col items-center justify-center">
<img
class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
:src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`"
:src="`${config.server_endpoint}/textures/tiles/${selectedGroup.parent.id}.png`"
:alt="selectedGroup.parent.name"
@click="selectTile(selectedGroup.parent.id)"
:class="{
@ -63,7 +63,7 @@
<div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
<img
class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
:src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`"
:src="`${config.server_endpoint}/textures/tiles/${childTile.id}.png`"
:alt="childTile.name"
@click="selectTile(childTile.id)"
:class="{
@ -169,7 +169,7 @@ function processTile(tile: Tile) {
tileColorData.value.set(tile.id, getDominantColor(imageData))
tileEdgeData.value.set(tile.id, getEdgeComplexity(imageData))
}
img.src = `${config.server_endpoint}/assets/tiles/${tile.id}.png`
img.src = `${config.server_endpoint}/textures/tiles/${tile.id}.png`
}
function getDominantColor(imageData: ImageData) {

44
src/components/screens/Characters.vue
View File

@ -34,27 +34,23 @@
<button class="ml-6 w-4 h-8 p-0">
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 m-auto" alt="Arrow left" />
</button>
<img class="w-24 object-contain mb-3.5" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType?.id + '/' + (selectedHairId ?? 'default')" />
<img class="w-24 object-contain mb-3.5" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType + '/' + (selectedHairId ?? 'default')" />
<button class="mr-6 w-4 h-8 p-0">
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 -scale-x-100" alt="Arrow right" />
</button>
</div>
<!-- <div class="flex justify-between w-[190px]">-->
<!-- &lt;!&ndash; TODO: replace with color swatches &ndash;&gt;-->
<!-- <button v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></button>-->
<!-- </div>-->
</div>
<!-- TODO: update gender on (selected) character -->
<div class="flex justify-between w-[190px]">
<button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'MALE' }">
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
<span class="text-white">Male</span>
</button>
<button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'FEMALE' }">
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
<span class="text-white">Female</span>
</button>
</div>
<!-- <div class="flex justify-between w-[190px]">-->
<!-- <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'MALE' }">-->
<!-- <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />-->
<!-- <span class="text-white">Male</span>-->
<!-- </button>-->
<!-- <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'FEMALE' }">-->
<!-- <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />-->
<!-- <span class="text-white">Female</span>-->
<!-- </button>-->
<!-- </div>-->
</div>
</div>
</div>
@ -74,7 +70,7 @@
v-for="hair in characterHairs"
class="relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
>
<img class="h-4 object-contain" :src="config.server_endpoint + '/assets/sprites/' + hair.sprite.id + '/front.png'" alt="Hair sprite" />
<img class="h-4 object-contain" :src="config.server_endpoint + '/textures/sprites/' + hair.sprite + '/front.png'" alt="Hair sprite" />
<input type="radio" name="hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
</div>
</div>
@ -128,8 +124,9 @@
import config from '@/application/config'
import { type CharacterHair, type Character as CharacterT, type Map } from '@/application/types'
import Modal from '@/components/utilities/Modal.vue'
import { CharacterHairStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { onBeforeUnmount, ref, watch } from 'vue'
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
const gameStore = useGameStore()
const isLoading = ref<boolean>(true)
@ -148,12 +145,6 @@ setTimeout(() => {
gameStore.connection?.on('character:list', (data: any) => {
characters.value = data
isLoading.value = false
// Fetch hairs
// @TODO: This is hacky, we should have a better way to do this
gameStore.connection?.emit('character:hair:list', {}, (data: CharacterHair[]) => {
characterHairs.value = data
})
})
// Select character logics
@ -184,7 +175,12 @@ function createCharacter() {
// Watch changes for selected character and update hairs
watch(selectedCharacterId, (characterId) => {
if (!characterId) return
selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHairId ?? null
// selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHairId ?? null
})
onMounted(async () => {
const characterHairStorage = new CharacterHairStorage()
characterHairs.value = await characterHairStorage.getAll()
})
onBeforeUnmount(() => {

3
src/components/screens/Game.vue
View File

@ -33,6 +33,7 @@ import Menu from '@/components/gui/Menu.vue'
import { useGameStore } from '@/stores/gameStore'
import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
import { Game, Scene } from 'phavuer'
import { onBeforeUnmount } from 'vue'
const gameStore = useGameStore()
@ -80,4 +81,6 @@ function preloadScene(scene: Phaser.Scene) {
}
function createScene(scene: Phaser.Scene) {}
onBeforeUnmount(() => {})
</script>

61
src/components/screens/Loading.vue
View File

@ -1,25 +1,60 @@
<template>
<div class="flex flex-col justify-center items-center h-dvh relative">
<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 class="flex flex-col justify-center items-center h-dvh relative col">
<svg width="40" height="40" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="12" r="3" fill="white">
<animate id="spinner_qFRN" begin="0;spinner_OcgL.end+0.25s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
</circle>
<circle cx="12" cy="12" r="3" fill="white">
<animate begin="spinner_qFRN.begin+0.1s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
</circle>
<circle cx="20" cy="12" r="3" fill="white">
<animate id="spinner_OcgL" begin="spinner_qFRN.begin+0.2s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
</circle>
</svg>
</div>
</template>
<script setup lang="ts" async>
import config from '@/application/config'
import type { HttpResponse, MapObject } from '@/application/types'
import type { BaseStorage } from '@/storage/baseStorage'
import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
// import type { Map } from '@/application/types'
import { useGameStore } from '@/stores/gameStore'
import { ref } from 'vue'
const gameStore = useGameStore()
function continueBtnClick() {
// Play music
const audio = new Audio('/assets/music/login.mp3')
audio.play()
const totalItems = ref(0)
const currentItem = ref(0)
// Set isLoaded to true
gameStore.game.isLoaded = true
async function downloadAndStore<T extends { id: string }>(endpoint: string, storage: BaseStorage<T>) {
const request = await fetch(`${config.server_endpoint}/cache/${endpoint}`)
const response = (await request.json()) as HttpResponse<T[]>
if (!response.success) {
console.error(`Failed to download ${endpoint}:`, response.message)
return
}
const items = response.data ?? []
for (const item of items) {
await storage.add(item)
}
}
const tileStorage = new TileStorage()
const mapStorage = new MapStorage()
const mapObjectStorage = new MapObjectStorage()
Promise.all([
downloadAndStore('tiles', tileStorage),
downloadAndStore('maps', mapStorage),
downloadAndStore('map_objects', mapObjectStorage),
downloadAndStore('sprites', new SpriteStorage()),
downloadAndStore('character_types', new CharacterTypeStorage()),
downloadAndStore('character_hair', new CharacterHairStorage())
]).then(() => {
gameStore.game.isLoaded = true
})
</script>

4
src/components/screens/MapEditor.vue
View File

@ -11,7 +11,7 @@
<script setup lang="ts">
import config from '@/application/config'
import 'phaser'
import type { AssetDataT } from '@/application/types'
import type { TextureData } from '@/application/types'
import MapEditor from '@/components/gameMaster/mapEditor/MapEditor.vue'
import { loadTexture } from '@/composables/gameComposable'
import { useGameStore } from '@/stores/gameStore'
@ -72,7 +72,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
* Then load them into the scene.
*/
scene.load.rexAwait(async function (successCallback: any) {
const tiles: { data: AssetDataT[] } = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
const tiles: { data: TextureData[] } = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
for await (const tile of tiles?.data ?? []) {
await loadTexture(scene, tile)

46
src/components/utilities/Debug.vue Normal file
View File

@ -0,0 +1,46 @@
<template></template>
<script setup lang="ts">
import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
import { TextureStorage } from '@/storage/textureStorage'
import { onMounted, onUnmounted } from 'vue'
const mapStorage = new MapStorage()
const tileStorage = new TileStorage()
const mapObjectStorage = new MapObjectStorage()
const spriteStorage = new SpriteStorage()
const characterTypeStorage = new CharacterTypeStorage()
const characterHairStorage = new CharacterHairStorage()
const textureStorage = new TextureStorage()
let currentString = ''
async function handleKeyPress(event: KeyboardEvent) {
// Ignore if typing in input/textarea
if (document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
return
}
currentString += event.key
// Do something when string matches
if (currentString.includes('reset')) {
await mapStorage.destroy()
await tileStorage.destroy()
await mapObjectStorage.destroy()
await spriteStorage.destroy()
await characterTypeStorage.destroy()
await characterHairStorage.destroy()
await textureStorage.destroy()
currentString = '' // Reset
}
// Reset string after a certain amount of time
setTimeout(() => {
currentString = ''
}, 60000)
}
onMounted(() => window.addEventListener('keydown', handleKeyPress))
onUnmounted(() => window.removeEventListener('keydown', handleKeyPress))
</script>

0
src/composables/characterComposable.ts Normal file
View File

80
src/composables/gameComposable.ts
View File

@ -1,94 +1,104 @@
import { Assets } from '@/application/assets'
import config from '@/application/config'
import type { AssetDataT, HttpResponse, Sprite, SpriteAction } from '@/application/types'
import type { TextureData } from '@/application/types'
import { SpriteStorage } from '@/storage/storages'
import { TextureStorage } from '@/storage/textureStorage'
import { useGameStore } from '@/stores/gameStore'
const textureLoadingPromises = new Map<string, Promise<boolean>>()
export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): Promise<boolean> {
export async function loadTexture(scene: Phaser.Scene, textureData: TextureData): Promise<boolean> {
const gameStore = useGameStore()
const assetStorage = new Assets()
const textureStorage = new TextureStorage()
// Check if the texture is already loaded in Phaser
if (gameStore.game.loadedAssets.find((asset) => asset.key === assetData.key)) {
return Promise.resolve(true)
if (gameStore.game.loadedTextures.find((texture) => texture === textureData.key)) {
return true
}
// If there's already a loading promise for this texture, return it
if (textureLoadingPromises.has(assetData.key)) {
return await textureLoadingPromises.get(assetData.key)!
if (textureLoadingPromises.has(textureData.key)) {
return await textureLoadingPromises.get(textureData.key)!
}
// Create new loading promise
const loadingPromise = (async () => {
// Check if the asset is already cached
let asset = await assetStorage.get(assetData.key)
let texture = await textureStorage.get(textureData.key)
// If asset is not found, download it
if (!asset) {
await assetStorage.download(assetData)
asset = await assetStorage.get(assetData.key)
if (!texture) {
console.log('Downloading texture:', textureData.key)
await textureStorage.download(textureData)
texture = await textureStorage.get(textureData.key)
}
// If asset is found, add it to the scene
if (asset) {
if (texture) {
return new Promise<boolean>((resolve) => {
// Remove existing texture if it exists
if (scene.textures.exists(asset.key)) {
scene.textures.remove(asset.key)
if (scene.textures.exists(texture.key)) {
scene.textures.remove(texture.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
scene.textures.addBase64(texture.key, texture.data)
scene.textures.once(`addtexture-${texture.key}`, () => {
gameStore.game.loadedTextures.push(textureData.key)
textureLoadingPromises.delete(textureData.key) // Clean up the promise
resolve(true)
})
})
}
textureLoadingPromises.delete(assetData.key) // Clean up the promise
return Promise.resolve(false)
textureLoadingPromises.delete(textureData.key) // Clean up the promise
return false
})()
// Store the loading promise
textureLoadingPromises.set(assetData.key, loadingPromise)
textureLoadingPromises.set(textureData.key, loadingPromise)
return loadingPromise
}
export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string) {
if (!sprite_id) return
console.log(sprite_id)
// @TODO: Fix this
const sprite_actions: HttpResponse<any[]> = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite_id).then((response) => response.json())
const spriteStorage = new SpriteStorage()
const sprite = await spriteStorage.get(sprite_id)
for await (const sprite_action of sprite_actions.data ?? []) {
if (!sprite) {
console.error('Failed to load sprite:', sprite_id)
return
}
for await (const sprite_action of sprite.spriteActions) {
console.log('Loading sprite action:', sprite.id + '-' + sprite_action.action)
const key = sprite.id + '-' + sprite_action.action
await loadTexture(scene, {
key: sprite_action.key,
data: sprite_action.data,
key,
data: '/textures/sprites/' + sprite.id + '/' + sprite_action.action + '.png',
group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites',
updatedAt: sprite_action.updatedAt,
originX: sprite_action.originX ?? 0,
originY: sprite_action.originY ?? 0,
originX: sprite_action.originX,
originY: sprite_action.originY,
isAnimated: sprite_action.isAnimated,
frameWidth: sprite_action.frameWidth,
frameHeight: sprite_action.frameHeight,
frameRate: sprite_action.frameRate
} as AssetDataT)
} as TextureData)
// If the sprite is not animated, skip
if (!sprite_action.isAnimated) continue
// Check if animation already exists
if (scene.anims.get(sprite_action.key)) continue
if (scene.anims.get(key)) 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 })
const anim = scene.textures.get(key)
scene.textures.addSpriteSheet(key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 })
scene.anims.create({
key: sprite_action.key,
key: key,
frameRate: sprite_action.frameRate,
frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
frames: scene.anims.generateFrameNumbers(key, { start: 0, end: sprite_action.frameCount! - 1 }),
repeat: -1
})
}

61
src/composables/mapComposable.ts
View File

@ -1,56 +1,58 @@
import config from '@/application/config'
import type { AssetDataT, HttpResponse, UUID } from '@/application/types'
import type { HttpResponse, TextureData, UUID } from '@/application/types'
import { unduplicateArray } from '@/application/utilities'
import { loadTexture } from '@/composables/gameComposable'
import { MapStorage } from '@/storage/storages'
import Tilemap = Phaser.Tilemaps.Tilemap
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import Tileset = Phaser.Tilemaps.Tileset
import Tile = Phaser.Tilemaps.Tile
export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
const tile = layer.getTileAtWorldXY(x, y)
export function getTile(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): Tile | undefined {
const tile = layer.getTileAtWorldXY(positionX, positionY)
if (!tile) return undefined
return tile
}
export function tileToWorldXY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number) {
const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
export function tileToWorldXY(layer: TilemapLayer | Tilemap, positionX: number, positionY: number) {
const worldPoint = layer.tileToWorldXY(positionX, positionY)
if (!worldPoint) return { positionX: 0, positionY: 0 }
const positionX = worldPoint.x + config.tile_size.y
const positionY = worldPoint.y
const worldPositionX = worldPoint.x + config.tile_size.height
const worldPositionY = worldPoint.y
return { positionX, positionY }
return { worldPositionX, worldPositionY }
}
export function tileToWorldX(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number {
const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
export function tileToWorldX(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): number {
const worldPoint = layer.tileToWorldXY(positionX, positionY)
if (!worldPoint) return 0
return worldPoint.x + config.tile_size.x / 2
return worldPoint.x + config.tile_size.width / 2
}
export function tileToWorldY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number {
const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
export function tileToWorldY(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): number {
const worldPoint = layer.tileToWorldXY(positionX, positionY)
if (!worldPoint) return 0
return worldPoint.y + config.tile_size.y * 1.5
return worldPoint.y + config.tile_size.height * 1.5
}
/**
* Can also be used to replace tiles
* @param map
* @param layer
* @param x
* @param y
* @param positionX
* @param positionY
* @param tileName
*/
export function placeTile(map: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
export function placeTile(map: Tilemap, layer: TilemapLayer, positionX: number, positionY: number, tileName: string) {
let tileImg = map.getTileset(tileName) as Tileset
if (!tileImg) {
tileImg = map.getTileset('blank_tile') as Tileset
}
layer.putTileAt(tileImg.firstgid, x, y)
layer.putTileAt(tileImg.firstgid, positionX, positionY)
}
export function setLayerTiles(map: Tilemap, layer: TilemapLayer, tiles: string[][]) {
@ -67,12 +69,12 @@ export function createTileArray(width: number, height: number, tile: string = 'b
return Array.from({ length: height }, () => Array.from({ length: width }, () => tile))
}
export const calculateIsometricDepth = (x: number, y: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
const baseDepth = x + y
export const calculateIsometricDepth = (positionX: number, positionY: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
const baseDepth = positionX + positionY
if (isCharacter) {
return baseDepth // @TODO: Fix collision, this is a hack
}
return baseDepth + (width + height) / (2 * config.tile_size.x)
return baseDepth + (width + height) / (2 * config.tile_size.width)
}
export function FlattenMapArray(tiles: string[][]) {
@ -86,11 +88,20 @@ export function FlattenMapArray(tiles: string[][]) {
}
export async function loadMapTilesIntoScene(map_id: UUID, scene: Phaser.Scene) {
// Fetch the list of tiles from the server
const tileArray: HttpResponse<AssetDataT[]> = await fetch(config.server_endpoint + '/assets/list_tiles/' + map_id).then((response) => response.json())
const mapStorage = new MapStorage()
const map = await mapStorage.get(map_id)
if (!map) return
const tileArray = unduplicateArray(FlattenMapArray(map.tiles))
// Load each tile into the scene
for (const tile of tileArray.data ?? []) {
await loadTexture(scene, tile)
for (const tile of tileArray) {
const textureData = {
key: tile,
data: '/textures/tiles/' + tile + '.png',
group: 'tiles',
updatedAt: map.updatedAt // @TODO: Fix this
} as TextureData
await loadTexture(scene, textureData)
}
}

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

@ -10,15 +10,17 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
function updateWaypoint(worldX: number, worldY: number) {
const pointerTile = getTile(layer, worldX, worldY)
if (pointerTile) {
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
waypoint.value = {
visible: true,
x: worldPoint.positionX,
y: worldPoint.positionY + config.tile_size.y + 15
}
} else {
if (!pointerTile) {
waypoint.value.visible = false
return
}
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
if (!worldPoint.worldPositionX || !worldPoint.worldPositionX) return
waypoint.value = {
visible: true,
x: worldPoint.worldPositionX,
y: worldPoint.worldPositionY + config.tile_size.height + 15
}
}
@ -28,34 +30,35 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
}
function handlePointerMove(pointer: Phaser.Input.Pointer) {
const { worldX, worldY } = pointer
updateWaypoint(worldX, worldY)
updateWaypoint(pointer.worldX, pointer.worldY)
if (gameStore.game.isPlayerDraggingCamera) {
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
if (!gameStore.game.isPlayerDraggingCamera) return
if (distance > dragThreshold) {
const { x, y, prevPosition } = pointer
const { scrollX, scrollY, zoom } = camera
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
}
}
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
// If the distance is less than the drag threshold, return
// We do this to prevent the camera from scrolling too quickly
if (distance <= dragThreshold) return
camera.setScroll(camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom, camera.scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom)
}
function handlePointerUp(pointer: Phaser.Input.Pointer) {
gameStore.setPlayerDraggingCamera(false)
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
if (distance <= dragThreshold) {
const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
if (pointerTile) {
gameStore.connection?.emit('map:character:move', {
positionX: pointerTile.x,
positionY: pointerTile.y
})
}
}
// If the distance is greater than the drag threshold, return
// We do this to prevent the camera from scrolling too quickly
if (distance > dragThreshold) return
gameStore.setPlayerDraggingCamera(false)
const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
if (!pointerTile) return
gameStore.connection?.emit('map:character:move', {
positionX: pointerTile.x,
positionY: pointerTile.y
})
}
const setupPointerHandlers = () => {

11
src/composables/pointerHandlers/useMapEditorPointerHandlers.ts
View File

@ -15,10 +15,12 @@ export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.T
if (pointerTile) {
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
if (!worldPoint.positionX || !worldPoint.positionY) return
waypoint.value = {
visible: true,
x: worldPoint.positionX,
y: worldPoint.positionY + config.tile_size.y + 15
y: worldPoint.positionY + config.tile_size.height + 15
}
} else {
waypoint.value.visible = false
@ -26,11 +28,8 @@ export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.T
}
function dragMap(pointer: Phaser.Input.Pointer) {
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)
}
if (!gameStore.game.isPlayerDraggingCamera) return
camera.setScroll(camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom, scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom)
}
function handlePointerMove(pointer: Phaser.Input.Pointer) {

0
src/composables/spriteComposable.ts Normal file
View File

0
src/composables/useCharacter.ts Normal file
View File

60
src/storage/baseStorage.ts Normal file
View File

@ -0,0 +1,60 @@
import Dexie from 'dexie'
export class BaseStorage<T extends { id: string }> {
protected dexie: Dexie
protected tableName: string
constructor(tableName: string, schema: string) {
this.tableName = tableName
this.dexie = new Dexie(tableName)
this.dexie.version(1).stores({
[tableName]: schema
})
}
async add(item: T, overwrite = false) {
try {
const existing = await this.get(item.id)
if (existing && !overwrite) return
await this.dexie.table(this.tableName).put({ ...item })
} catch (error) {
console.error(`Failed to add ${this.tableName} ${item.id}:`, error)
}
}
async get(id: string): Promise<T | null> {
try {
const item = await this.dexie.table(this.tableName).get(id)
return item || null
} catch (error) {
console.error(`Failed to retrieve ${this.tableName} ${id}:`, error)
return null
}
}
async getAll(): Promise<T[]> {
try {
return await this.dexie.table(this.tableName).toArray()
} catch (error) {
console.error(`Failed to retrieve all ${this.tableName}:`, error)
return []
}
}
async reset() {
try {
await this.dexie.table(this.tableName).clear()
} catch (error) {
console.error(`Failed to clear ${this.tableName}:`, error)
}
}
async destroy() {
try {
await this.dexie.delete()
} catch (error) {
console.error(`Failed to destroy ${this.tableName}:`, error)
}
}
}

43
src/storage/storages.ts Normal file
View File

@ -0,0 +1,43 @@
import type { Map, MapObject, Tile } from '@/application/types'
import { BaseStorage } from '@/storage/baseStorage'
export class MapStorage extends BaseStorage<Map> {
constructor() {
super('maps', 'id, name, createdAt, updatedAt')
}
}
export class TileStorage extends BaseStorage<Tile> {
constructor() {
super('tiles', 'id, name, createdAt, updatedAt')
}
}
export class MapObjectStorage extends BaseStorage<MapObject> {
constructor() {
super('mapObjects', 'id, name, createdAt, updatedAt')
}
}
export class SpriteStorage extends BaseStorage<any> {
constructor() {
super('sprites', 'id, name, createdAt, updatedAt')
}
}
export class CharacterTypeStorage extends BaseStorage<any> {
constructor() {
super('characterTypes', 'id, name, createdAt, updatedAt')
}
async getSpriteId(characterTypeId: string) {
const characterType = await this.get(characterTypeId)
return characterType?.sprite
}
}
export class CharacterHairStorage extends BaseStorage<any> {
constructor() {
super('characterHairs', 'id, name, createdAt, updatedAt')
}
}

97
src/storage/textureStorage.ts Normal file
View File

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

26
src/stores/gameStore.ts
View File

@ -1,5 +1,5 @@
import config from '@/application/config'
import type { AssetDataT, Character, Notification, User, WorldSettings } from '@/application/types'
import type { Character, Notification, TextureData, User, WorldSettings } from '@/application/types'
import { getDomain } from '@/application/utilities'
import { useCookies } from '@vueuse/integrations/useCookies'
import { defineStore } from 'pinia'
@ -9,7 +9,7 @@ export const useGameStore = defineStore('game', {
state: () => {
return {
notifications: [] as Notification[],
token: '' as string | null,
token: '',
connection: null as Socket | null,
user: null as User | null,
character: null as Character | null,
@ -17,12 +17,12 @@ export const useGameStore = defineStore('game', {
date: new Date(),
isRainEnabled: false,
isFogEnabled: false,
fogDensity: 0.5
fogDensity: 0
} as WorldSettings,
game: {
isLoading: false,
isLoaded: false, // isLoaded is currently being used to determine if the player has interacted with the game
loadedAssets: [] as AssetDataT[],
loadedTextures: [] as string[],
isPlayerDraggingCamera: false,
isCameraFollowingCharacter: false
},
@ -35,16 +35,12 @@ export const useGameStore = defineStore('game', {
},
getters: {
getLoadedAssets: (state) => {
return state.game.loadedAssets
return state.game.loadedTextures
},
getLoadedAsset: (state) => {
return (key: string | undefined) => {
if (!key) return null
return state.game.loadedAssets.find((asset) => asset.key === key)
isAssetLoaded: (state) => {
return (key: string) => {
return state.game.loadedTextures.includes(key)
}
},
getLoadedAssetsByGroup: (state) => {
return (group: string) => state.game.loadedAssets.filter((asset) => asset.group === group)
}
},
actions: {
@ -112,12 +108,12 @@ export const useGameStore = defineStore('game', {
})
this.connection = null
this.token = null
this.token = ''
this.user = null
this.character = null
this.game.isLoaded = false
this.game.loadedAssets = []
this.game.loadedTextures = []
this.game.isPlayerDraggingCamera = false
this.game.isCameraFollowingCharacter = false
@ -128,7 +124,7 @@ export const useGameStore = defineStore('game', {
this.world.date = new Date()
this.world.isRainEnabled = false
this.world.isFogEnabled = false
this.world.fogDensity = 0.5
this.world.fogDensity = 0
}
}
})

11
src/stores/mapStore.ts
View File

@ -4,7 +4,7 @@ import { defineStore } from 'pinia'
export const useMapStore = defineStore('map', {
state: () => {
return {
map: null as Map | null,
mapId: '',
characters: [] as MapCharacter[],
characterLoaded: false
}
@ -15,14 +15,11 @@ export const useMapStore = defineStore('map', {
},
getCharacterCount: (state) => {
return state.characters.length
},
isMapSet: (state) => {
return state.map !== null
}
},
actions: {
setMap(map: Map | null) {
this.map = map
setMapId(mapId: UUID) {
this.mapId = mapId
},
setCharacters(characters: MapCharacter[]) {
this.characters = characters
@ -50,7 +47,7 @@ export const useMapStore = defineStore('map', {
}
},
reset() {
this.map = null
this.mapId = ''
this.characters = []
this.characterLoaded = false
}

2
vite.config.js
View File

@ -1,14 +1,12 @@
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueDevTools from 'vite-plugin-vue-devtools'
import viteCompression from 'vite-plugin-compression'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// VueDevTools(),
viteCompression()
],
resolve: {

2
vite.config.ts
View File

@ -1,14 +1,12 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import VueDevTools from 'vite-plugin-vue-devtools'
import viteCompression from 'vite-plugin-compression';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// VueDevTools(),
viteCompression()
],
resolve: {