forked from noxious/client
stash
This commit is contained in:
parent
f038b6787f
commit
70d7371351
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
|
||||
<title>New Quest - Play</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
56
package-lock.json
generated
56
package-lock.json
generated
@ -55,9 +55,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@antfu/utils": {
|
||||
"version": "0.7.7",
|
||||
"resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.7.tgz",
|
||||
"integrity": "sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==",
|
||||
"version": "0.7.8",
|
||||
"resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.8.tgz",
|
||||
"integrity": "sha512-rWQkqXRESdjXtc+7NRfK9lASQjpXJu1ayp7qi1d23zZorY+wBHVLHHoVcMsEnkqEBWTFqbztO7/QdJFzyEcLTg==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
@ -1633,9 +1633,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.10.tgz",
|
||||
"integrity": "sha512-Eem5pH9pmWBHoGAT8Dr5fdc5rYA+4NAovdM4EktRPVAAiJhmWWfQrA0cFhAbOsQdSfIHjAud6YdkbL69+zSKjw==",
|
||||
"version": "20.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.11.tgz",
|
||||
"integrity": "sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~5.26.4"
|
||||
@ -2633,9 +2633,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001616",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
|
||||
"integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
|
||||
"version": "1.0.30001617",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001617.tgz",
|
||||
"integrity": "sha512-mLyjzNI9I+Pix8zwcrpxEbGlfqOkF9kM3ptzmKNw5tizSyYwMe+nGLTqMK9cO+0E+Bh6TsBxNAaHWEM8xwSsmA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@ -3047,9 +3047,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.757",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.757.tgz",
|
||||
"integrity": "sha512-jftDaCknYSSt/+KKeXzH3LX5E2CvRLm75P3Hj+J/dv3CL0qUYcOt13d5FN1NiL5IJbbhzHrb3BomeG2tkSlZmw==",
|
||||
"version": "1.4.761",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.761.tgz",
|
||||
"integrity": "sha512-PIbxpiJGx6Bb8dQaonNc6CGTRlVntdLg/2nMa1YhnrwYOORY9a3ZgGN0UQYE6lAcj/lkyduJN7BPt/JiY+jAQQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
@ -3275,9 +3275,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-vue": {
|
||||
"version": "9.25.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.25.0.tgz",
|
||||
"integrity": "sha512-tDWlx14bVe6Bs+Nnh3IGrD+hb11kf2nukfm6jLsmJIhmiRQ1SUaksvwY9U5MvPB0pcrg0QK0xapQkfITs3RKOA==",
|
||||
"version": "9.26.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz",
|
||||
"integrity": "sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.4.0",
|
||||
@ -3681,16 +3681,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/glob": {
|
||||
"version": "10.3.12",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
|
||||
"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
|
||||
"version": "10.3.14",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.14.tgz",
|
||||
"integrity": "sha512-4fkAqu93xe9Mk7le9v0y3VrPDqLKHarNi2s4Pv7f2yOvfhWfhc7hRPHC/JyqMqb8B/Dt/eGS4n7ykwf3fOsl8g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"foreground-child": "^3.1.0",
|
||||
"jackspeak": "^2.3.6",
|
||||
"minimatch": "^9.0.1",
|
||||
"minipass": "^7.0.4",
|
||||
"path-scurry": "^1.10.2"
|
||||
"path-scurry": "^1.11.0"
|
||||
},
|
||||
"bin": {
|
||||
"glob": "dist/esm/bin.mjs"
|
||||
@ -4456,9 +4456,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/minipass": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.0.tgz",
|
||||
"integrity": "sha512-oGZRv2OT1lO2UF1zUcwdTb3wqUwI0kBGTgt/T7OdSj6M6N5m3o5uPf0AIW6lVxGGoiWUR7e2AwTE+xiwK8WQig==",
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
|
||||
"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=16 || 14 >=14.17"
|
||||
@ -4850,9 +4850,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/path-scurry": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
|
||||
"integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
|
||||
"version": "1.11.0",
|
||||
"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.0.tgz",
|
||||
"integrity": "sha512-LNHTaVkzaYaLGlO+0u3rQTz7QrHTFOuKyba9JMTQutkmtNew8dw8wOD7mTU/5fCPZzCWpfW0XnQKzY61P0aTaw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"lru-cache": "^10.2.0",
|
||||
@ -6093,9 +6093,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-vue-inspector": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-vue-inspector/-/vite-plugin-vue-inspector-5.0.1.tgz",
|
||||
"integrity": "sha512-R93P8iFa6BPODhc/aOtO04A8FFMMyFIfm8ZVSmN+8vU1TgwsHya734APGpX4fVHSPX2aVwYyiezXBUYQ0Opsqw==",
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-vue-inspector/-/vite-plugin-vue-inspector-5.1.0.tgz",
|
||||
"integrity": "sha512-yIw9dvBz9nQW7DPfbJtUVW6JTnt67hqTPRnTwT2CZWMqDvISyQHRjgKl32nlMh1DRH+92533Sv6t59pWMLUCWA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.23.0",
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export default {
|
||||
name: 'New Quest',
|
||||
server_endpoint: 'https://680760d68d724d.lhr.life',
|
||||
server_endpoint: 'http://localhost:4000',
|
||||
development: true,
|
||||
width: 960,
|
||||
height: 540,
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
* https://pinia.vuejs.org/
|
||||
*/
|
||||
import { defineStore } from 'pinia';
|
||||
import {useMapStore} from '@/stores/map'
|
||||
import {useZoneStore} from '@/stores/zone'
|
||||
import { io, Socket } from 'socket.io-client';
|
||||
import config from '@/config';
|
||||
import axios from 'axios';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useMapStore = defineStore('gameMap', {
|
||||
export const useZoneStore = defineStore('zone', {
|
||||
state: () => ({
|
||||
loaded: false,
|
||||
tiles: undefined,
|
||||
@ -16,14 +16,14 @@ export const useMapStore = defineStore('gameMap', {
|
||||
this.tiles = tiles;
|
||||
this.loaded = true;
|
||||
},
|
||||
addPlayers(player) {
|
||||
addPlayers(player: any) {
|
||||
this.players = player;
|
||||
},
|
||||
addPlayer(player) {
|
||||
addPlayer(player: any) {
|
||||
this.players[player.id] = player;
|
||||
console.log('Player added:', player);
|
||||
},
|
||||
removePlayer(playerId) {
|
||||
removePlayer(playerId: any) {
|
||||
delete this.players[playerId];
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user