feat: draw usernames for others, make cheat invisibility show up as m…

…ostly transparent for other cheat

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])) {

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"));
     });

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<RoomState> {
   fixedTimeStep = 1000 / 60;
@@ -156,7 +157,7 @@ export class GameRoom extends Room<RoomState> {
     }
   }
 
-  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<RoomState> {
 
     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);
   }

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`;
 

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;
 

src/shared/types.ts

@@ -15,3 +15,7 @@ export type Keys = {
 export type GameSceneData = {
   username: string;
 };
+
+export type JoinGameOptions = {
+  username: string;
+};