Skip to content

Commit

Permalink
UI for Session Lobby
Browse files Browse the repository at this point in the history 
Session Lobby To use HTML for UI
  • Loading branch information
@keshav2010
keshav2010 authored Aug 4, 2024
2 parents b4b5578 + 65b4336 commit 01df989
Show file tree
Hide file tree
Showing 6 changed files with 261 additions and 132 deletions.
104 changes: 104 additions & 0 deletions public/html/session-lobby.html
View file
Original file line number Diff line number Diff line change
@@ -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>
44 changes: 23 additions & 21 deletions public/scenes/GameScene.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -213,7 +212,7 @@ const PointerModeAction: IPointerModeAction = {
const captureFlags = scene.GetObjectsWithKeyPrefix<CaptureFlag>(
`obj_captureFlag_${playerId}`
);

const selectables: (SelectableSceneEntity & Phaser.GameObjects.Sprite)[] = [
...soldiers,
...captureFlags,
Expand Down Expand Up @@ -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) {
Expand All @@ -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")
Expand Down Expand Up @@ -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>(
Expand Down Expand Up @@ -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,
Expand All @@ -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(
Expand Down Expand Up @@ -687,7 +689,7 @@ export class GameScene extends BaseScene {
player,
newFlag
);

if (networkManager.getClientId() === player.id) {
flag.setTint(0x00ff00);
} else flag.setTint(0xff0000);
Expand Down
12 changes: 6 additions & 6 deletions public/scenes/PlayerStatisticHUD.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 1 addition & 5 deletions public/scenes/SessionBrowserScene.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
Expand Down
Loading

0 comments on commit 01df989

Please sign in to comment.