noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stash

Browse Source
This commit is contained in:
Dennis Postma
2024-05-09 22:03:57 +02:00
parent f038b6787f
commit 70d7371351
6 changed files with 60 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/World.vue
View File

@ -1,17 +1,17 @@
<template>
<TilemapLayer v-if="mapStore.isLoaded" :tilemap="tileMap" :tileset="mapStore.getTiles" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<TilemapLayer v-if="zoneStore.isLoaded" :tilemap="tileMap" :tileset="zoneStore.getTiles" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<Controls :layer="layer" />
<Player :layer="layer" />
<Container v-if="mapStore.isLoaded">
<Player :layer="layer" v-for="player in mapStore.getPlayers" :key="player.id" :player="player" />
<Container v-if="zoneStore.isLoaded && zoneStore.getPlayers.length > 0">
<Player :layer="layer" v-for="player in zoneStore.getPlayers" :key="player.id" :player="player" />
</Container>
</template>
<script setup lang="ts">
/**
* 1 tile is 64x32
* the map is 10x10
* so the map is 640x320
* the zone is 10x10
* so the zone is 640x320
*/
import { Container, refObj, TilemapLayer, useScene } from 'phavuer'
import Player from '@/components/sprites/player/Player.vue'
@ -20,12 +20,12 @@ import { onBeforeMount, onMounted, reactive, ref, type Ref, toRaw, watch } from
import Tileset = Phaser.Tilemaps.Tileset
import Controls from '@/components/Controls.vue'
import { useSocketStore } from '@/stores/socket'
import { useMapStore } from '@/stores/map'
import { useZoneStore } from '@/stores/zone'
// Phavuer logic
let scene = useScene()
let tilemapLayer = ref();
let mapData = new Phaser.Tilemaps.MapData({
let zoneData = new Phaser.Tilemaps.MapData({
width: 10, // @TODO : get this from the server
height: 10, // @TODO : get this from the server
tileWidth: config.tile_size.x,
@ -33,7 +33,7 @@ let mapData = new Phaser.Tilemaps.MapData({
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D,
});
let tileMap = new Phaser.Tilemaps.Tilemap(scene, mapData);
let tileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData);
let tileset: any = tileMap.addTilesetImage('default', 'tiles');
let layer: (typeof TilemapLayer|null) = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y);
@ -43,28 +43,29 @@ const centerX = (tileMap.width * tileMap.tileWidth) / 2
scene.cameras.main.centerOn(centerX, centerY)
// Multiplayer / server logics
const mapStore = useMapStore();
const zoneStore = useZoneStore();
const socket = useSocketStore();
// Watch for changes in the mapStore and update the layer
watch (() => mapStore.loaded, () => {
mapStore.getTiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
// Watch for changes in the zoneStore and update the layer
watch (() => zoneStore.loaded, () => {
zoneStore.getTiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
}, { deep: true })
// Load the map from the server
// Load the zone from the server
onBeforeMount(() => {
socket.socket?.emit('get_map');
socket.socket?.emit('player:connect');
socket.socket?.emit('player:getMap');
})
// Listen for the map event from the server and load the map
socket.socket?.on('map', (data) => {
mapStore.loadTiles(data.tiles)
// Listen for the zone event from the server and load the zone
socket.socket?.on('zone', (data) => {
zoneStore.loadTiles(data.tiles)
/**
* @TODO
* bug , when 2nd player joins, the first player is not added to the map
* bug , when 2nd player joins, the first player is not added to the zone
*/
console.log(data.players);
@ -74,13 +75,17 @@ socket.socket?.on('map', (data) => {
// remove self from the players list
delete data.players[socket.socket?.id];
mapStore.addPlayers(data.players);
zoneStore.addPlayers(data.players);
})
// Listen for player join events
socket.socket?.on('player_join', (data) => {
console.log('player_join', data)
mapStore.addPlayer(data);
if (data.id === socket.socket?.id) {
console.log('self');
return;
}
zoneStore.addPlayer(data);
})
socket.socket?.on('ping', (data) => {