feat: integrate multiplayer functionality in World component

- Added multiplayer support in the World component by utilizing the useMultiplayer composable.
- Updated player position handling to send messages in multiplayer mode, while maintaining local updates for single-player.
- Adjusted test-level-a.json to reposition a chest and modify its rotation for better gameplay experience.
- Introduced Vector3 type import in useGameStore for improved type safety.

Author: alvarosabu

components/environments/World.vue

@@ -2,6 +2,7 @@
 import type { ThreeEvent, TresEvent } from '@tresjs/core'
 import type { Group } from 'three'
 import { MeshBasicMaterial } from 'three'
+import { useMultiplayer } from '~/composables/game/useMultiplayer'
 const { getResource } = useResourcePreloader()
 const gameStore = useGameStore()
 
@@ -11,6 +12,7 @@ const { scene: modelChests } = getResource('models', 'chests')
 const { scene: modelDoors } = getResource('models', 'doors')
 const { scene: modelSpikes } = getResource('models', 'spikes')
 const { scene: modelVisualBlocker, nodes: modelVisualBlockerNodes } = getResource('models', 'visual_blocker')
+const lobbyStore = useLobbyStore()
 
 const floor = modelVisualBlockerNodes['room1001'].clone()
 
@@ -63,10 +65,20 @@ const cylinderShader = {
 const showIndicator = ref(false)
 const hoverIndicatorRef = shallowRef()
 
+const { sendMsg } = useMultiplayer(gameStore.isMultiplayer)
 
 const handleFloorClick = (e: ThreeEvent<PointerEvent>) => {
   const newPosition = { x: e.point.x, y: 0, z: e.point.z }
-  gameStore.setPlayerPosition(gameStore.players[0], newPosition)
+  if (gameStore.isMultiplayer) {
+    sendMsg({
+      type: 'UPDATE_PLAYER_POSITION',
+      lobbyId: lobbyStore.currentLobbyId,
+      position: [newPosition.x, newPosition.y, newPosition.z],
+    })
+  }
+  else {
+    gameStore.setPlayerPosition(gameStore.players[0], newPosition)
+  }
 
 }
 

content/levels/test-level-a.json

@@ -13,8 +13,8 @@
     {
       "id": "test-chest",
       "type": "chest",
-      "position": [2, 0, -5],
-      "rotation": [0, 0, 0],
+      "position": [2, 0, 10],
+      "rotation": [0, 90, 0],
       "state": {
         "isLocked": true,
         "isOpen": false

stores/useGameStore.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import type { Vector3 } from 'three'
 import type { Character, CharacterTemplate, GameItem, Level, Player } from '~/types'
 
 /**