Session Lobby To use HTML for UI

public/html/session-lobby.html

@@ -0,0 +1,104 @@
+<style>
+    body {
+        font-family: Arial, sans-serif;
+    }
+
+    .session-lobby {
+        width: 800px;
+        margin: 0 auto;
+        background-color: #f8f8f8;
+        padding: 20px;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .header,
+    .player-row-data {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        /* Vertically center content */
+    }
+
+    .players-list {
+        max-height: 400px;
+        overflow-y: auto;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+    }
+
+    .player-row-data,
+    .search-box {
+        padding: 0 10px;
+    }
+
+    /* Scrollbar styles */
+    .players-list::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .players-list::-webkit-scrollbar-track {
+        background: #f1f1f1;
+    }
+
+    .players-list::-webkit-scrollbar-thumb {
+        background: #888;
+    }
+
+    .players-list::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+
+    /* Button styles */
+    button {
+        display: inline-block;
+        padding: 10px 20px;
+        margin: 10px;
+        text-align: center;
+        text-decoration: none;
+        font-size: 16px;
+        cursor: pointer;
+        color: #ffffff;
+        background-color: #4CAF50;
+        border: none;
+        border-radius: 12px;
+        transition: background-color 0.3s ease;
+    }
+
+    button:hover {
+        background-color: #45a049;
+    }
+
+    button:focus {
+        outline: none;
+        border: 2px solid #4CAF50;
+    }
+
+    button:active {
+        background-color: #3e8e41;
+        transform: scale(0.98);
+    }
+
+    .no-servers-found {
+        min-height: 100px;
+        display: flex;
+        text-align: center;
+        justify-content: center;
+    }
+</style>
+<div class="session-lobby">
+    <div class="header">
+        <h1>Lobby <span id="p_sessionId"></span></h1>
+        <h2 id="timer"></h2>
+        <button id="btn_ready">Ready</button>
+        <button id="btn_quitLobby">Leave Session</button>
+    </div>
+    <div class="players-list">
+        <div data-id="1" class="player-row-data" name="player-data">
+            <span class="player-name">Server 1</span>
+            <span class="player-rank">10/50</span>
+            <span class="ready-status" id="ready-status-playerId">X</span>
+        </div>
+        <!-- Add more server rows as needed -->
+    </div>
+</div>

public/scenes/GameScene.ts

@@ -18,7 +18,6 @@ var selectorThickness = 2;
 var selectorDraw = false;
 
 var pointerDownWorldSpace: { x: any; y: any } | null = null;
-var cursors;
 
 var networkManager: NetworkManager;
 const SendChatMessage = () => {
@@ -213,7 +212,7 @@ const PointerModeAction: IPointerModeAction = {
         const captureFlags = scene.GetObjectsWithKeyPrefix<CaptureFlag>(
           `obj_captureFlag_${playerId}`
         );
-        
+
         const selectables: (SelectableSceneEntity & Phaser.GameObjects.Sprite)[] = [
           ...soldiers,
           ...captureFlags,
@@ -242,7 +241,7 @@ const PointerModeAction: IPointerModeAction = {
       selectorGraphics.clear();
       pointerDownWorldSpace = null;
     },
-    pointerout: function (scene: GameScene, event: Phaser.Input.Pointer) {},
+    pointerout: function (scene: GameScene, event: Phaser.Input.Pointer) { },
   },
   [PointerMode.FLAG_PLACEMENT]: {
     pointerdown: function (scene: GameScene, pointer: Phaser.Input.Pointer) {
@@ -262,8 +261,8 @@ const PointerModeAction: IPointerModeAction = {
         }
       );
     },
-    pointerup: function (scene: GameScene, pointer: Phaser.Input.Pointer) {},
-    pointerout: function (scene: GameScene, pointer: Phaser.Input.Pointer) {},
+    pointerup: function (scene: GameScene, pointer: Phaser.Input.Pointer) { },
+    pointerout: function (scene: GameScene, pointer: Phaser.Input.Pointer) { },
     pointermove: function (scene: GameScene, pointer: Phaser.Input.Pointer) {
       scene
         .GetObject<Phaser.GameObjects.Sprite>("obj_captureFlagPlaceholder")
@@ -378,7 +377,7 @@ export class GameScene extends BaseScene {
     selectedObjectsMap.set(flagId, selectedCaptureFlag);
   }
 
-  onCaptureFlagUnselected(flagId: string) {}
+  onCaptureFlagUnselected(flagId: string) { }
 
   onSoldierPositionChanged(playerId: string, soldierId: string) {
     const phaserSceneObject = this.GetObject<Spearman>(
@@ -505,21 +504,24 @@ export class GameScene extends BaseScene {
       .setName("WorldCamera");
     this.cameras.main.setBackgroundColor("rgba(255,255,255,0.3)");
 
-    cursors = this.input.keyboard?.createCursorKeys();
-    const controlConfig = {
+    const cursors = this.input.keyboard?.createCursorKeys();
+    const controlConfig: Phaser.Types.Cameras.Controls.SmoothedKeyControlConfig = {
       camera: this.cameras.main,
-      left: cursors?.left,
-      right: cursors?.right,
-      up: cursors?.up,
-      down: cursors?.down,
-      drag: 0.001,
-      acceleration: 0.02,
-      maxSpeed: 1.0,
+      left: cursors!.left,
+      right: cursors!.right,
+      up: cursors!.up,
+      down: cursors!.down,
+      zoomIn: this.input.keyboard?.addKey('W'),
+      zoomOut: this.input.keyboard?.addKey('S'),
+      zoomSpeed: 0.02,
+      drag: 0.0001,
+      acceleration: 0.0005,
+      maxSpeed: 0.1,
     };
     const cameraControl = new Phaser.Cameras.Controls.SmoothedKeyControl(
       controlConfig
     );
-    this.AddObject(cameraControl, "obj_cameraControl");
+    this.controls = this.AddObject(cameraControl, "obj_cameraControl");
 
     this.AddSceneEvent(
       PacketType.ByServer.NEW_CHAT_MESSAGE,
@@ -534,14 +536,14 @@ export class GameScene extends BaseScene {
         const selectedObjectsMap = this.data.get(
           DataKey.SELECTED_OBJECTS_MAP
         ) as Map<string, BaseSoldier | CaptureFlag>;
-        
+
         let soldierIds = [];
         let captureFlagIds = [];
-        for(let selectedObject of selectedObjectsMap.values()) {
-          if(selectedObject instanceof BaseSoldier) {
+        for (let selectedObject of selectedObjectsMap.values()) {
+          if (selectedObject instanceof BaseSoldier) {
             soldierIds.push(selectedObject.id);
           }
-          else if(selectedObject instanceof CaptureFlag) 
+          else if (selectedObject instanceof CaptureFlag)
             captureFlagIds.push(selectedObject.id);
         }
         networkManager.sendEventToServer(
@@ -687,7 +689,7 @@ export class GameScene extends BaseScene {
             player,
             newFlag
           );
-          
+
           if (networkManager.getClientId() === player.id) {
             flag.setTint(0x00ff00);
           } else flag.setTint(0xff0000);

public/scenes/PlayerStatisticHUD.ts

@@ -150,18 +150,18 @@ export class PlayerStatisticHUD extends BaseScene {
     );
 
     Phaser.Actions.GridAlign([exitButton, captureFlagButton, deleteButton], {
-      width: 640,
+      width: this.sys.canvas.width*0.5,
       cellHeight: 64,
       cellWidth: 64,
-      x: 900,
-      y: 50,
+      x: this.sys.canvas.width*0.8,
+      y: 32,
     });
     Phaser.Actions.GridAlign([tooltip], {
-      width: 640,
+      width: this.sys.canvas.width*0.5,
       cellHeight: 64,
       cellWidth: 640,
-      x: 840,
-      y: 100,
+      x: this.sys.canvas.width*0.8,
+      y: 32*3,
     });
 
     // TODO: optimise

public/scenes/SessionBrowserScene.ts

@@ -2,7 +2,6 @@ import CONSTANT from "../constant";
 import { BaseScene } from "./BaseScene";
 import { NetworkManager } from "../NetworkManager";
 import { addBackgroundImage } from "../helpers/addBackgroundImage";
-import { RoomAvailable } from "colyseus.js";
 
 function removeServerList(sessionBrowserDOM: Phaser.GameObjects.DOMElement) {
   // Assuming sessionBrowserDOM is a Phaser.GameObjects.E
@@ -88,13 +87,10 @@ export class SessionBrowserScene extends BaseScene {
     this.AddObject(this.add.text(100, 20, "War.IO"), "obj_introText");
     addBackgroundImage(this, "background");
 
-    this.AddObject(
+    const sessionBrowserDOM = this.AddObject(
       this.add.dom(600, 200).createFromCache("sesssionBrowserDOM"),
       "obj_sessionBrowser"
     );
-
-    const sessionBrowserDOM =
-      this.GetObject<Phaser.GameObjects.DOMElement>("obj_sessionBrowser");
     if (!sessionBrowserDOM) {
       return;
     }