noxious/client
3
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <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> <title>New Quest - Play</title>
</head> </head>
<body> <body>

56
package-lock.json generated
View File

@ -55,9 +55,9 @@
} }
}, },
"node_modules/@antfu/utils": { "node_modules/@antfu/utils": {
"version": "0.7.7", "version": "0.7.8",
"resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.7.tgz", "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.8.tgz",
"integrity": "sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==", "integrity": "sha512-rWQkqXRESdjXtc+7NRfK9lASQjpXJu1ayp7qi1d23zZorY+wBHVLHHoVcMsEnkqEBWTFqbztO7/QdJFzyEcLTg==",
"dev": true, "dev": true,
"funding": { "funding": {
"url": "https://github.com/sponsors/antfu" "url": "https://github.com/sponsors/antfu"
@ -1633,9 +1633,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "20.12.10", "version": "20.12.11",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.10.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.11.tgz",
"integrity": "sha512-Eem5pH9pmWBHoGAT8Dr5fdc5rYA+4NAovdM4EktRPVAAiJhmWWfQrA0cFhAbOsQdSfIHjAud6YdkbL69+zSKjw==", "integrity": "sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"undici-types": "~5.26.4" "undici-types": "~5.26.4"
@ -2633,9 +2633,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001616", "version": "1.0.30001617",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001617.tgz",
"integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==", "integrity": "sha512-mLyjzNI9I+Pix8zwcrpxEbGlfqOkF9kM3ptzmKNw5tizSyYwMe+nGLTqMK9cO+0E+Bh6TsBxNAaHWEM8xwSsmA==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -3047,9 +3047,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.757", "version": "1.4.761",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.757.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.761.tgz",
"integrity": "sha512-jftDaCknYSSt/+KKeXzH3LX5E2CvRLm75P3Hj+J/dv3CL0qUYcOt13d5FN1NiL5IJbbhzHrb3BomeG2tkSlZmw==", "integrity": "sha512-PIbxpiJGx6Bb8dQaonNc6CGTRlVntdLg/2nMa1YhnrwYOORY9a3ZgGN0UQYE6lAcj/lkyduJN7BPt/JiY+jAQQ==",
"dev": true "dev": true
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
@ -3275,9 +3275,9 @@
} }
}, },
"node_modules/eslint-plugin-vue": { "node_modules/eslint-plugin-vue": {
"version": "9.25.0", "version": "9.26.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.25.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz",
"integrity": "sha512-tDWlx14bVe6Bs+Nnh3IGrD+hb11kf2nukfm6jLsmJIhmiRQ1SUaksvwY9U5MvPB0pcrg0QK0xapQkfITs3RKOA==", "integrity": "sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@eslint-community/eslint-utils": "^4.4.0", "@eslint-community/eslint-utils": "^4.4.0",
@ -3681,16 +3681,16 @@
} }
}, },
"node_modules/glob": { "node_modules/glob": {
"version": "10.3.12", "version": "10.3.14",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz", "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.14.tgz",
"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==", "integrity": "sha512-4fkAqu93xe9Mk7le9v0y3VrPDqLKHarNi2s4Pv7f2yOvfhWfhc7hRPHC/JyqMqb8B/Dt/eGS4n7ykwf3fOsl8g==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"foreground-child": "^3.1.0", "foreground-child": "^3.1.0",
"jackspeak": "^2.3.6", "jackspeak": "^2.3.6",
"minimatch": "^9.0.1", "minimatch": "^9.0.1",
"minipass": "^7.0.4", "minipass": "^7.0.4",
"path-scurry": "^1.10.2" "path-scurry": "^1.11.0"
}, },
"bin": { "bin": {
"glob": "dist/esm/bin.mjs" "glob": "dist/esm/bin.mjs"
@ -4456,9 +4456,9 @@
} }
}, },
"node_modules/minipass": { "node_modules/minipass": {
"version": "7.1.0", "version": "7.1.1",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.0.tgz", "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
"integrity": "sha512-oGZRv2OT1lO2UF1zUcwdTb3wqUwI0kBGTgt/T7OdSj6M6N5m3o5uPf0AIW6lVxGGoiWUR7e2AwTE+xiwK8WQig==", "integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=16 || 14 >=14.17" "node": ">=16 || 14 >=14.17"
@ -4850,9 +4850,9 @@
} }
}, },
"node_modules/path-scurry": { "node_modules/path-scurry": {
"version": "1.10.2", "version": "1.11.0",
"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz", "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.0.tgz",
"integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==", "integrity": "sha512-LNHTaVkzaYaLGlO+0u3rQTz7QrHTFOuKyba9JMTQutkmtNew8dw8wOD7mTU/5fCPZzCWpfW0XnQKzY61P0aTaw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"lru-cache": "^10.2.0", "lru-cache": "^10.2.0",
@ -6093,9 +6093,9 @@
} }
}, },
"node_modules/vite-plugin-vue-inspector": { "node_modules/vite-plugin-vue-inspector": {
"version": "5.0.1", "version": "5.1.0",
"resolved": "https://registry.npmjs.org/vite-plugin-vue-inspector/-/vite-plugin-vue-inspector-5.0.1.tgz", "resolved": "https://registry.npmjs.org/vite-plugin-vue-inspector/-/vite-plugin-vue-inspector-5.1.0.tgz",
"integrity": "sha512-R93P8iFa6BPODhc/aOtO04A8FFMMyFIfm8ZVSmN+8vU1TgwsHya734APGpX4fVHSPX2aVwYyiezXBUYQ0Opsqw==", "integrity": "sha512-yIw9dvBz9nQW7DPfbJtUVW6JTnt67hqTPRnTwT2CZWMqDvISyQHRjgKl32nlMh1DRH+92533Sv6t59pWMLUCWA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/core": "^7.23.0", "@babel/core": "^7.23.0",

45
src/components/World.vue
View File

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

2
src/config.ts
View File

@ -1,6 +1,6 @@
export default { export default {
name: 'New Quest', name: 'New Quest',
server_endpoint: 'https://680760d68d724d.lhr.life', server_endpoint: 'http://localhost:4000',
development: true, development: true,
width: 960, width: 960,
height: 540, height: 540,

2
src/stores/socket.ts
View File

@ -5,7 +5,7 @@
* https://pinia.vuejs.org/ * https://pinia.vuejs.org/
*/ */
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import {useMapStore} from '@/stores/map' import {useZoneStore} from '@/stores/zone'
import { io, Socket } from 'socket.io-client'; import { io, Socket } from 'socket.io-client';
import config from '@/config'; import config from '@/config';
import axios from 'axios'; import axios from 'axios';

8
src/stores/map.ts → src/stores/zone.ts
View File

@ -1,6 +1,6 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
export const useMapStore = defineStore('gameMap', { export const useZoneStore = defineStore('zone', {
state: () => ({ state: () => ({
loaded: false, loaded: false,
tiles: undefined, tiles: undefined,
@ -16,14 +16,14 @@ export const useMapStore = defineStore('gameMap', {
this.tiles = tiles; this.tiles = tiles;
this.loaded = true; this.loaded = true;
}, },
addPlayers(player) { addPlayers(player: any) {
this.players = player; this.players = player;
}, },
addPlayer(player) { addPlayer(player: any) {
this.players[player.id] = player; this.players[player.id] = player;
console.log('Player added:', player); console.log('Player added:', player);
}, },
removePlayer(playerId) { removePlayer(playerId: any) {
delete this.players[playerId]; delete this.players[playerId];
} }
} }