diff --git a/src/client/scenes/Game.ts b/src/client/scenes/Game.ts index 2221c33..4ccbe34 100644 --- a/src/client/scenes/Game.ts +++ b/src/client/scenes/Game.ts @@ -19,7 +19,7 @@ import { } from "../../shared/message"; import type { Bullet, Player, RoomState } from "../../shared/state"; import { colors } from "../../shared/style"; -import type { GameSceneData, Keys } from "../../shared/types"; +import type { GameSceneData, JoinGameOptions, Keys } from "../../shared/types"; export enum Depth { Background = -2, @@ -66,6 +66,10 @@ export class Game extends Phaser.Scene { [sessionId: string]: Phaser.Types.Physics.Arcade.ImageWithDynamicBody; } = {}; + usernameEntities: { + [sessionId: string]: Phaser.GameObjects.Text; + } = {}; + elapsedTime = 0; fixedTimeStep = 1000 / 60; @@ -368,6 +372,15 @@ export class Game extends Phaser.Scene { this.playerEntities[sessionId] = entity; + this.usernameEntities[sessionId] = this.add + .text(player.x, player.y - 45, player.username, { + color: colors.username, + fontSize: "16px", + fontFamily: "Arial", + }) + .setOrigin(0.5, 0) + .setDepth(Depth.Overlay); + // listen for server updates player.onChange(() => { // LERP the positions during the render loop. @@ -376,8 +389,6 @@ export class Game extends Phaser.Scene { entity.setData("serverRotation", player.rotation); }); - console.log(player.bullets); - player.bullets.onAdd((bullet: Bullet, bulletId: string) => { const entity = this.physics.add .image(bullet.x, bullet.y, "enemyBullet") @@ -396,12 +407,19 @@ export class Game extends Phaser.Scene { // remove local reference when entity is removed from the server onPlayerRemove(_player: Player, sessionId: string) { // remove player - const entity = this.playerEntities[sessionId]; - if (entity) { - entity.destroy(); + const playerEntity = this.playerEntities[sessionId]; + if (playerEntity) { + playerEntity.destroy(); delete this.playerEntities[sessionId]; } + // remove username + const usernameEntity = this.usernameEntities[sessionId]; + if (usernameEntity) { + usernameEntity.destroy(); + delete this.usernameEntities[sessionId]; + } + // remove bullets for (const [bulletId, entity] of Object.entries(this.bulletEntities[sessionId])) { entity.destroy(); @@ -513,7 +531,9 @@ export class Game extends Phaser.Scene { const client = new Client(BACKEND_URL); try { - this.room = await client.joinOrCreate("diep_room", {}); + this.room = await client.joinOrCreate("diep_room", { + username: this.usernameStr, + } as JoinGameOptions); // connection successful connectionStatusText.destroy(); @@ -624,20 +644,29 @@ export class Game extends Phaser.Scene { continue; } - const entity = this.playerEntities[sessionId]; + const playerEntity = this.playerEntities[sessionId]; + const usernameEntity = this.usernameEntities[sessionId]; if (player.isDead) { this.onPlayerRemove(player, sessionId); continue; } - entity.setVisible(!player.cheatInvisibility); + if (this.devMode) { + playerEntity.setAlpha(player.cheatInvisibility ? 0.3 : 1); + } else { + playerEntity.setVisible(!player.cheatInvisibility); + this.usernameEntities[sessionId].setVisible(!player.cheatInvisibility); + } + + const { serverX, serverY, serverRotation } = playerEntity.data.values; - const { serverX, serverY, serverRotation } = entity.data.values; + playerEntity.x = Phaser.Math.Linear(playerEntity.x, serverX, 0.2); + playerEntity.y = Phaser.Math.Linear(playerEntity.y, serverY, 0.2); + playerEntity.rotation = serverRotation; - entity.x = Phaser.Math.Linear(entity.x, serverX, 0.2); - entity.y = Phaser.Math.Linear(entity.y, serverY, 0.2); - entity.rotation = serverRotation; + usernameEntity.x = Phaser.Math.Linear(playerEntity.x, serverX, 0.2); + usernameEntity.y = Phaser.Math.Linear(playerEntity.y - 45, serverY - 45, 0.2); // move bullets for (const [bulletId, entity] of Object.entries(this.bulletEntities[sessionId])) { diff --git a/src/server/app.config.ts b/src/server/app.config.ts index cd3a0d6..229f797 100644 --- a/src/server/app.config.ts +++ b/src/server/app.config.ts @@ -14,8 +14,8 @@ export default config({ gameServer.define("diep_room", GameRoom); }, + // custom express routes initializeExpress: (app) => { - // custom express routes app.get("/", (_req, res) => { res.sendFile(path.join(__dirname, "../../public/server.html")); }); diff --git a/src/server/rooms/GameRoom.ts b/src/server/rooms/GameRoom.ts index c063fdb..96ad072 100644 --- a/src/server/rooms/GameRoom.ts +++ b/src/server/rooms/GameRoom.ts @@ -8,6 +8,7 @@ import { type RotateMessage, } from "../../shared/message"; import { Bullet, Player, RoomState } from "../../shared/state"; +import type { JoinGameOptions } from "../../shared/types"; export class GameRoom extends Room { fixedTimeStep = 1000 / 60; @@ -156,7 +157,7 @@ export class GameRoom extends Room { } } - onJoin(client: Client, _options: any) { + onJoin(client: Client, options: JoinGameOptions) { if (!this.state.allowJoins) { client.leave(); return; @@ -168,6 +169,7 @@ export class GameRoom extends Room { player.x = Math.random() * (MAP_SIZE - 4 * MAP_PADDING) + 2 * MAP_PADDING; player.y = Math.random() * (MAP_SIZE - 4 * MAP_PADDING) + 2 * MAP_PADDING; + player.username = options.username; this.state.players.set(client.sessionId, player); } diff --git a/src/shared/config.ts b/src/shared/config.ts index f2f3c99..b854714 100644 --- a/src/shared/config.ts +++ b/src/shared/config.ts @@ -1,4 +1,4 @@ -export const IP_ADDRESS = "10.3.131.95"; +export const IP_ADDRESS = "192.168.68.111"; export const BACKEND_URL = `ws://${IP_ADDRESS}:2567`; diff --git a/src/shared/state.ts b/src/shared/state.ts index b4fe584..82fba53 100644 --- a/src/shared/state.ts +++ b/src/shared/state.ts @@ -6,17 +6,20 @@ export class Bullet extends Schema { @type("number") x: number; @type("number") y: number; @type("number") rotation: number; - @type("number") health = BULLET_HEALTH; - @type("number") velocity = BULLET_VELOCITY; + + @type("number") health: number = BULLET_HEALTH; + @type("number") velocity: number = BULLET_VELOCITY; } export class Player extends Schema { @type("number") x: number; @type("number") y: number; @type("number") rotation = 0; - @type("number") velocity = PLAYER_VELOCITY; + @type("number") velocity: number = PLAYER_VELOCITY; + + @type("string") username: string; - @type("number") health = PLAYER_HEALTH; + @type("number") health: number = PLAYER_HEALTH; @type("boolean") isDead = false; diff --git a/src/shared/types.ts b/src/shared/types.ts index 71dc9bb..f540a2b 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -15,3 +15,7 @@ export type Keys = { export type GameSceneData = { username: string; }; + +export type JoinGameOptions = { + username: string; +};