noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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

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>