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

worked on mp logic

Browse Source
This commit is contained in:
Dennis Postma
2024-05-04 15:03:29 +02:00
parent 1a5b5e92d4
commit 8c21cd11c7
13 changed files with 165 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/World.vue
View File

@ -1,41 +1,23 @@
<template>
<TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tileset="data" />
<Controls :layer="layer" />
<Player :layer="layer" />
<div v-for="player in playerList">
<Player :layer="layer"/>
</div>
<TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tileset="mapTiles" />
<!-- <Controls :layer="layer" />-->
</template>
<script setup lang="ts">
import { refObj, TilemapLayer, useScene } from 'phavuer'
import Player from '@/components/sprites/player/Player.vue'
import config from '@/config'
import { ref, type Ref } from 'vue'
import { reactive, ref, type Ref } from 'vue'
import Tileset = Phaser.Tilemaps.Tileset
import Controls from '@/components/Controls.vue'
import { useSocketStore } from '@/stores/socket'
import Map from '@/engine/Map/Map'
let playerList = ref([]);
const isMapLoaded = ref(false);
const socket = useSocketStore();
const serverMapData = ref([]);
const mapTiles = ref([]);
socket.socket?.on('playerList', (players) => {
playerList.value = players;
console.log('players', players);
console.log('playerList', playerList.value);
});
socket.socket?.on('player_moved', (username, coords) => {
console.log('player_moved', username, coords);
const player = playerList.value.find((player: any) => player.username === username);
if (player) {
player.x = coords.x;
player.y = coords.y;
}
});
const scene = useScene()
const mapData = new Phaser.Tilemaps.MapData({
width: 10,
height: 10,
@ -45,9 +27,27 @@ const mapData = new Phaser.Tilemaps.MapData({
format: Phaser.Tilemaps.Formats.ARRAY_2D,
});
socket.socket?.emit('get_map');
socket.socket?.on('map', (map) => {
// Get map from server
mapTiles.value = map.data;
map.data.forEach((row, y) => {
row.forEach((tile, x) => {
layer.putTileAt(tile, x, y);
});
});
isMapLoaded.value = true;
console.log('map', map);
});
const scene = useScene()
const { width: tileSizeWidth } = mapData;
const { width, height } = scene.cameras.main;
const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
/**
* 1 tile is 64x32
* the map is 10x10
@ -57,26 +57,11 @@ const tileset: (Tileset|null) = map.addTilesetImage('default', 'tiles');
// const layer: (Layer|null) = map.createBlankLayer('layer', tileset);
const layer:TilemapLayer = map.createBlankLayer('layer', tileset, 0, config.tile_size.y);
const tilemapLayer: Ref<(TilemapLayer|undefined)> = refObj();
const tilemapLayer= ref();
// const mapp = new Map('default', 10, 10, config.tile_size.x, config.tile_size.y, data, []);
const data: any = [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
];
data.forEach((row, y) => {
row.forEach((tile, x) => {
layer.putTileAt(tile, x, y);
});
});
// center camera
const centerY = (map.height * map.tileHeight) / 2

2
src/components/screens/Login.vue
View File

@ -9,7 +9,7 @@
<form method="post">
<div class="form-field">
<label for="username">Username</label>
<input v-model="username" type="text" name="username" required>
<input v-model="username" type="text" name="username" required autofocus>
</div>
<div class="form-field">
<label for="password">Password</label>

49
src/components/sprites/player/Player.vue
View File

@ -1,55 +1,60 @@
<template>
<Sprite ref="sprite" texture="player" :x :y />
<Sprite ref="sprite" texture="IMap" :x="position.x" :y="position.y" />
</template>
<script lang="ts" setup>
import { Sprite, useScene } from 'phavuer'
import { type Ref, ref } from 'vue'
import { onPostUpdate, onPreUpdate, Sprite, useScene } from 'phavuer'
import { reactive, type Ref, ref } from 'vue'
import config from '@/config'
import { useSocketStore } from '@/stores/socket'
const socket = useSocketStore();
socket.socket?.emit('joinRoom', 'game');
const props = defineProps({
layer: Phaser.Tilemaps.TilemapLayer,
player: Object
player: {
type: Object,
default: undefined
},
})
const scene = useScene()
const pointer_tile = ref(undefined);
const x: Ref<number> = ref(0);
const y: Ref<number> = ref(0);
if (props.player) {
x.value = props.player.x;
y.value = props.player.y;
// onPreUpdate((time, delta) => {
// console.log(time, delta);
// })
const pointer_tile = ref(undefined);
const position = reactive({ x: 0, y: 0 });
if (props.player !== undefined) {
position.x = props.player?.coords.x;
position.y = props.player?.coords.y;
}
function onPointerClick(pointer: Phaser.Input.Pointer) {
/**
* @TODO : Check if player was dragging, if so, don't move player
*/
const px = scene.cameras.main.worldView.x + pointer.x;
const py = scene.cameras.main.worldView.y + pointer.y;
pointer_tile.value = getTile(px, py, props.layer);
if (pointer_tile.value) {
// Convert tile coordinates to world coordinates
const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y);
x.value = worldPoint.x + config.tile_size.y;
y.value = worldPoint.y;
position.x = worldPoint.x + config.tile_size.y;
position.y = worldPoint.y;
socket.socket?.emit('move', { x: position.x, y: position.y });
}
}
scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerClick);
/**
* @BUG
* when this component is spawned multiple times, the event listener is also added multiple times
*/
scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick);
function getTile (x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y);
console.log(x,y);
console.log('tile', tile);
if (!tile) {
return undefined;
}