From bcb21ce916ba63b8423608077100af4ab8df9a42 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 3 Jun 2024 20:23:54 +0200
Subject: [PATCH] Worked on zones
---
src/components/World.vue | 14 +++++---------
src/components/screens/Characters.vue | 4 +---
src/stores/zone.ts | 22 +++++++++++++---------
3 files changed, 19 insertions(+), 21 deletions(-)
diff --git a/src/components/World.vue b/src/components/World.vue
index 47547a4..1679d18 100644
--- a/src/components/World.vue
+++ b/src/components/World.vue
@@ -10,6 +10,7 @@
<script setup lang="ts">
import { Container, refObj, TilemapLayer, useScene } from 'phavuer'
import Character from '@/components/sprites/Character.vue'
+import {Character as CharacterType} from '@/types'
import config from '@/config'
import { onBeforeMount, onMounted, reactive, ref, type Ref, toRaw, watch } from 'vue'
import Tileset = Phaser.Tilemaps.Tileset
@@ -53,7 +54,6 @@ watch(
// Load the zone from the server
onBeforeMount(() => {
- socket.getConnection.emit('character:connect')
socket.getConnection.emit('character:zone:load')
})
@@ -76,17 +76,13 @@ socket.getConnection.on('character:zone:load', (data) => {
})
// Listen for player join events
-socket.getConnection.on('player_join', (data) => {
- console.log('player_join', data)
- if (data.id === socket.getConnection.id) {
+socket.getConnection.on('character:zone:character_join', (data: CharacterType) => {
+ console.log('character:zone:character_join', data)
+ if (data.id === socket.getConnection.character.id) {
console.log('self')
return
}
- zoneStore.addPlayer(data)
-})
-
-socket.getConnection.on('ping', (data) => {
- console.log('ping', data)
+ zoneStore.addCharacter(data)
})
/**
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 34a5718..a04868a 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -59,7 +59,6 @@ import { ref } from 'vue'
import Modal from '@/components/utilities/Modal.vue'
import {type Character as CharacterT} from '@/types'
-
const characters = ref([])
const socket = useSocketStore()
@@ -72,7 +71,6 @@ socket.getConnection.emit('character:list')
// Select character logics
const selected_character = ref(null)
function select_character() {
- console.log(selected_character.value)
if (!selected_character.value) return
socket.getConnection.emit('character:connect', { character_id: selected_character.value })
socket.getConnection.on('character:connect', (data: CharacterT) => socket.setCharacter(data))
@@ -86,7 +84,7 @@ function delete_character(character_id: number) {
// Create character logics
const isModalOpen = ref(false)
-let name: any = ref('')
+const name = ref('')
function create() {
socket.getConnection.on('character:create:success', (data: CharacterT) => {
socket.setCharacter(data)
diff --git a/src/stores/zone.ts b/src/stores/zone.ts
index b0b939b..ad850be 100644
--- a/src/stores/zone.ts
+++ b/src/stores/zone.ts
@@ -1,30 +1,34 @@
import { defineStore } from 'pinia'
+import type { Character } from '@/types'
export const useZoneStore = defineStore('zone', {
state: () => ({
loaded: false,
tiles: undefined,
- players: {}
+ characters: [] as Character[]
}),
getters: {
isLoaded: (state) => state.loaded,
getTiles: (state) => state.tiles,
- getPlayers: (state) => state.players
+ getCharacters: (state) => state.characters
},
actions: {
loadTiles(tiles: any) {
this.tiles = tiles
this.loaded = true
},
- addPlayers(player: any) {
- this.players = player
+ setCharacters(characters: Character[]) {
+ this.characters = characters
},
- addPlayer(player: any) {
- this.players[player.id] = player
- console.log('Player added:', player)
+ addCharacter(character: Character) {
+ this.characters.push(character)
},
- removePlayer(playerId: any) {
- delete this.players[playerId]
+ removeCharacter(character: Character) {
+ this.characters = this.characters.filter((c: Character) => c.id !== character.id)
+ },
+ updateCharacter(character: Character) {
+ const index = this.characters.findIndex((c: Character) => c.id === character.id)
+ this.characters[index] = character
}
}
})