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

WIP zone loading

Browse Source
This commit is contained in:
Dennis Postma 2024-12-29 00:40:02 +01:00
parent 8c664d7774
commit e4186a1bf5
3 changed files with 10 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/game/zone/Zone.vue
View File

@ -5,7 +5,7 @@
</template>
<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { ref, onUnmounted, onMounted, onBeforeMount } from 'vue'
import { useScene } from 'phavuer'
import { useGameStore } from '@/stores/gameStore'
import { useZoneStore } from '@/stores/zoneStore'
@ -51,12 +51,11 @@ gameStore.connection!.on('character:move', (data: { id: number; positionX: numbe
zoneStore.updateCharacterPosition(data)
})
// Emit zone:character:join event to server and wait for response, then set zone and characters
gameStore!.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
console.log(response)
await loadZoneTilesIntoScene(response.zone, scene)
zoneStore.setZone(response.zone)
zoneStore.setCharacters(response.characters)
onBeforeMount(async () => {
console.log(gameStore.character!.zone!.id)
await loadZoneTilesIntoScene(gameStore.character!.zone!.id, scene)
zoneStore.setZone(gameStore.character!.zone!)
// zoneStore.setCharacters(response.characters)
})
onUnmounted(() => {

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

@ -122,19 +122,6 @@
</div>
</template>
</Modal>
<!-- DELETE CHARACTER MODAL -->
<ConfirmationModal v-if="deletingCharacter != null" :confirm-function="deleteCharacter.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
<template #modalHeader>
<h3 class="m-0 font-medium text-white">Delete character?</h3>
</template>
<template #modalBody>
<p class="mt-0 mb-5 text-white text-lg">
Do you want to permanently delete <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span
>?
</p>
</template>
</ConfirmationModal>
</template>
<script setup lang="ts">
@ -142,13 +129,11 @@ import config from '@/application/config'
import { useGameStore } from '@/stores/gameStore'
import { onBeforeUnmount, ref, watch } from 'vue'
import Modal from '@/components/utilities/Modal.vue'
import { type Character as CharacterT, type CharacterHair } from '@/application/types'
import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
import { type Character as CharacterT, type CharacterHair, type Zone } from '@/application/types'
const gameStore = useGameStore()
const isLoading = ref<boolean>(true)
const characters = ref<CharacterT[]>([])
const deletingCharacter = ref(null as CharacterT | null)
const selectedCharacterId = ref<number | null>(null)
const isCreateNewCharacterModalOpen = ref<boolean>(false)
const newCharacterName = ref<string>('')
@ -178,18 +163,11 @@ function loginWithCharacter() {
gameStore.connection?.emit('character:connect', {
characterId: selectedCharacterId.value,
characterHairId: selectedHairId.value
}, (response: { character: CharacterT }) => {
}, (response: { character: CharacterT, zone: Zone, characters: CharacterT[] }) => {
gameStore.setCharacter(response.character)
})
}
// Delete character logics
function deleteCharacter(characterId: number) {
if (!characterId) return
deletingCharacter.value = null
gameStore.connection?.emit('character:delete', { characterId: characterId })
}
// Create character logics
function createCharacter() {
gameStore.connection?.on('character:create:success', (data: CharacterT) => {

4
src/composables/zoneComposable.ts
View File

@ -84,9 +84,9 @@ export function FlattenZoneArray(tiles: string[][]) {
return normalArray
}
export async function loadZoneTilesIntoScene(zone: ZoneT, scene: Phaser.Scene) {
export async function loadZoneTilesIntoScene(zone_id: number, scene: Phaser.Scene) {
// Fetch the list of tiles from the server
const tileArray: HttpResponse<AssetDataT[]> = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone.id).then((response) => response.json())
const tileArray: HttpResponse<AssetDataT[]> = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone_id).then((response) => response.json())
// Load each tile into the scene
for (const tile of tileArray.data ?? []) {