forked from noxious/client
stuffs
This commit is contained in:
@ -2,7 +2,7 @@
|
||||
<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" />
|
||||
<!-- <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>
|
||||
@ -109,7 +109,7 @@ const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.r
|
||||
|
||||
const charTexture = computed(() => {
|
||||
const { rotation, characterType } = props.mapCharacter.character
|
||||
const spriteId = characterType?.sprite ?? 'idle_right_down'
|
||||
const spriteId = characterType ?? 'idle_right_down'
|
||||
const action = props.mapCharacter.isMoving ? 'walk' : 'idle'
|
||||
const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
|
||||
|
||||
@ -152,7 +152,7 @@ watch(
|
||||
|
||||
watch(() => props.mapCharacter, updateSprite)
|
||||
|
||||
loadSpriteTextures(scene, props.mapCharacter.character.characterType?.sprite as string)
|
||||
loadSpriteTextures(scene, props.mapCharacter.character.characterType as string)
|
||||
.then(() => {
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
charSprite.value!.setFlipX(isFlippedX.value)
|
||||
|
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<MapTiles :key="mapStore.map?.id ?? 0" @tileMap:create="tileMap = $event" />
|
||||
<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 type { MapCharacter, mapLoadData, UUID, Map } from '@/application/types'
|
||||
import Characters from '@/components/game/map/Characters.vue'
|
||||
import MapTiles from '@/components/game/map/MapTiles.vue'
|
||||
import MapObjects from '@/components/game/map/PlacedMapObjects.vue'
|
||||
@ -14,10 +14,13 @@ import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapStore } from '@/stores/mapStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onUnmounted, ref, shallowRef } from 'vue'
|
||||
import { MapStorage } from '@/storage/storages'
|
||||
|
||||
const scene = useScene()
|
||||
const gameStore = useGameStore()
|
||||
const mapStore = useMapStore()
|
||||
const mapStorage = new MapStorage()
|
||||
const mapData = ref<Map>()
|
||||
|
||||
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
|
||||
|
||||
@ -31,8 +34,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)
|
||||
})
|
||||
|
||||
|
@ -1,57 +1,54 @@
|
||||
<template>
|
||||
<Controls :layer="tileLayer" :depth="0" />
|
||||
<Controls v-if="isInitialized" :layer="tileLayer" :depth="0" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
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 { useMapStore } from '@/stores/mapStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onBeforeUnmount } from 'vue'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { MapStorage } from '@/storage/storages'
|
||||
import type { UUID } from '@/application/types'
|
||||
|
||||
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,
|
||||
let tileMap: Phaser.Tilemaps.Tilemap
|
||||
let tileLayer: Phaser.Tilemaps.TilemapLayer
|
||||
let isInitialized = ref(false)
|
||||
|
||||
function createTileMap(mapData: any) {
|
||||
const mapConfig = new Phaser.Tilemaps.MapData({
|
||||
width: mapData?.width,
|
||||
height: mapData?.height,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
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(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
|
||||
})
|
||||
|
||||
// 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
|
||||
const layer = tileMap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
layer.setDepth(0)
|
||||
layer.setCullPadding(2, 2)
|
||||
@ -59,11 +56,28 @@ function createTileLayer() {
|
||||
return layer
|
||||
}
|
||||
|
||||
setLayerTiles(tileMap, tileLayer, mapStore.map?.tiles)
|
||||
async function initialize() {
|
||||
try {
|
||||
await loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
|
||||
const mapData = await mapStorage.get(mapStore.mapId)
|
||||
tileMap = createTileMap(mapData)
|
||||
tileLayer = createTileLayer(mapData)
|
||||
setLayerTiles(tileMap, tileLayer, mapData?.tiles)
|
||||
isInitialized.value = true
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize map:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initialize()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
tileMap.destroyLayer('tiles')
|
||||
tileMap.removeAllLayers()
|
||||
tileMap.destroy()
|
||||
if (tileMap) {
|
||||
tileMap.destroyLayer('tiles')
|
||||
tileMap.removeAllLayers()
|
||||
tileMap.destroy()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</script>
|
@ -1,5 +1,5 @@
|
||||
<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">
|
||||
|
@ -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]">-->
|
||||
<!-- <!– TODO: replace with color swatches –>-->
|
||||
<!-- <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 + '/textures/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>
|
||||
@ -129,7 +125,8 @@ 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 { useGameStore } from '@/stores/gameStore'
|
||||
import { onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { CharacterHairStorage } from '@/storage/storages'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const isLoading = ref<boolean>(true)
|
||||
@ -140,6 +137,7 @@ const newCharacterName = ref<string>('')
|
||||
const characterHairs = ref<CharacterHair[]>([])
|
||||
const selectedHairId = ref<number | null>(null)
|
||||
|
||||
|
||||
// Fetch characters
|
||||
setTimeout(() => {
|
||||
gameStore.connection?.emit('character:list')
|
||||
@ -148,12 +146,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 +176,13 @@ 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()
|
||||
console.log(characterHairs.value)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
|
@ -17,63 +17,53 @@
|
||||
<script setup lang="ts" async>
|
||||
import config from '@/application/config'
|
||||
import type { HttpResponse, MapObject } from '@/application/types'
|
||||
import { MapObjectStorage } from '@/dexie/mapObjects'
|
||||
import { MapStorage } from '@/dexie/maps'
|
||||
// import type { Map } from '@/application/types'
|
||||
import type { Map } from '@/dexie/maps'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { ref } from 'vue'
|
||||
import type { BaseStorage } from '@/storage/baseStorage'
|
||||
import {
|
||||
CharacterHairStorage,
|
||||
CharacterTypeStorage,
|
||||
MapObjectStorage,
|
||||
MapStorage, SpriteStorage,
|
||||
TileStorage
|
||||
} from '@/storage/storages'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
const mapStorage = new MapStorage()
|
||||
const mapObjectStorage = new MapObjectStorage()
|
||||
|
||||
const totalItems = ref(0)
|
||||
const currentItem = ref(0)
|
||||
|
||||
/**
|
||||
* Download map cache from the server and add them to the storage
|
||||
*/
|
||||
async function downloadMaps() {
|
||||
// Request to download maps
|
||||
const request = await fetch(config.server_endpoint + '/cache/maps')
|
||||
const response = (await request.json()) as HttpResponse<Map[]>
|
||||
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 maps:', response.message)
|
||||
console.error(`Failed to download ${endpoint}:`, response.message)
|
||||
return
|
||||
}
|
||||
|
||||
const maps = response.data ?? ([] as Map[])
|
||||
|
||||
// Add maps to storage
|
||||
for (const map of maps) {
|
||||
await mapStorage.add(map)
|
||||
const items = response.data ?? []
|
||||
for (const item of items) {
|
||||
await storage.add(item)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Download map objects cache from the server and add them to the storage
|
||||
*/
|
||||
async function downloadMapObjects() {
|
||||
// Request to download map objects
|
||||
const request = await fetch(config.server_endpoint + '/cache/map_objects')
|
||||
const response = (await request.json()) as HttpResponse<MapObject[]>
|
||||
if (!response.success) {
|
||||
console.error('Failed to download map objects:', response.message)
|
||||
return
|
||||
}
|
||||
const tileStorage = new TileStorage()
|
||||
const mapStorage = new MapStorage()
|
||||
const mapObjectStorage = new MapObjectStorage()
|
||||
|
||||
const mapObjects = response.data ?? ([] as MapObject[])
|
||||
|
||||
// Add map objects to storage
|
||||
for (const mapObject of mapObjects) {
|
||||
await mapObjectStorage.add(mapObject)
|
||||
}
|
||||
}
|
||||
|
||||
Promise.all([downloadMaps(), downloadMapObjects()]).then(() => {
|
||||
// Set isLoaded to true
|
||||
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>
|
||||
|
55
src/components/utilities/Debug.vue
Normal file
55
src/components/utilities/Debug.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import {
|
||||
CharacterHairStorage,
|
||||
CharacterTypeStorage,
|
||||
MapObjectStorage,
|
||||
MapStorage, SpriteStorage,
|
||||
TileStorage
|
||||
} from '@/storage/storages'
|
||||
import { TextureStorage } from '@/storage/textureStorage'
|
||||
|
||||
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>
|
Reference in New Issue
Block a user