#27 fixed mp lobby

wpernath · Sep 3, 2022 · 6ac2c09 · 6ac2c09
1 parent 89b998c
commit 6ac2c09
Showing 5 changed files with 102 additions and 55 deletions.
diff --git a/melonjs-client/src/main/client/js/stage/multiplayer/mp-choose-level.js b/melonjs-client/src/main/client/js/stage/multiplayer/mp-choose-level.js
@@ -197,6 +197,13 @@ export class ChooserComponent extends Container {
             console.log("  selected level = " + this.levelIndex );
 			MultiplayerManager.get().useSelectedLevel(this.levelIndex);            
             this.levelChosen = true;
+
+			MultiplayerManager.get()
+				.createGame()
+				.then((game) => {
+					state.change(my_state.MULTIPLAYER_LOBBY);
+				});		
+
         }
 	}
 }

diff --git a/melonjs-client/src/main/client/js/stage/multiplayer/mp-host-game.js b/melonjs-client/src/main/client/js/stage/multiplayer/mp-host-game.js
@@ -10,7 +10,7 @@ class BackButton extends BaseTextButton {
 	constructor(x, y) {
 		super(x, y, {
 			text: "Back",
-			borderWidth: 100,
+			borderWidth: 150,
 		});
 	}
 
@@ -24,7 +24,7 @@ class StartGameButton extends BaseTextButton {
 	constructor(x, y) {
 		super(x, y, {
 			text: "Start",
-			borderWidth: 100,
+			borderWidth: 150,
 		});
 	}
 
@@ -55,7 +55,7 @@ class MenuComponent extends Container {
 		this.addChild(this.levelChooser);
 
 		this.addChild(new BackButton(5, game.viewport.height - 60));
-        this.addChild(new StartGameButton(game.viewport.width - 105, game.viewport.height - 60));
+        //this.addChild(new StartGameButton(game.viewport.width - 155, game.viewport.height - 60));
 	}
 }
 

diff --git a/melonjs-client/src/main/client/js/stage/multiplayer/mp-join-game.js b/melonjs-client/src/main/client/js/stage/multiplayer/mp-join-game.js
@@ -8,7 +8,7 @@ class BackButton extends BaseTextButton {
 	constructor(x, y) {
 		super(x, y, {
 			text: "Back",
-			borderWidth: 100,
+			borderWidth: 150,
 		});
 	}
 
@@ -17,19 +17,6 @@ class BackButton extends BaseTextButton {
 	}
 }
 
-class StartGameButton extends BaseTextButton {
-	constructor(x, y) {
-		super(x, y, {
-			text: "Start",
-			borderWidth: 100,
-		});
-	}
-
-	onClick() {
-		state.change(my_state.MULTIPLAYER_LOBBY);
-	}
-}
-
 class MenuComponent extends Container {
 	constructor() {
 		super();
@@ -75,8 +62,7 @@ export default class JoinGameScreen extends Stage {
 	}
 
 	onDestroyEvent() {
-		event.off(event.KEYUP, this.handler);
-		//input.unbindPointer(input.pointer.LEFT);
+		event.off(event.KEYUP, this.handler);		
 		game.world.removeChild(this.menu);
 	}
 }
diff --git a/melonjs-client/src/main/client/js/stage/multiplayer/mp-lobby.js b/melonjs-client/src/main/client/js/stage/multiplayer/mp-lobby.js
@@ -2,14 +2,15 @@ import { Stage, event, game, state, Container, BitmapText, Rect } from "melonjs"
 import PlayerEntity from "../../renderables/player";
 import BaseTextButton from "../../util/base-text-button";
 import { my_state, PLAYER_COLORS } from "../../util/constants";
-import MultiplayerManager from "../../util/multiplayer";
+import MultiplayerManager, { MultiplayerMessage } from "../../util/multiplayer";
 import { StateBackground } from "../state_background";
+import {BaseContainer} from "../../util/base-container";
 
 class BackButton extends BaseTextButton {
 	constructor(x, y) {
 		super(x, y, {
 			text: "Back",
-			borderWidth: 100,
+			borderWidth: 150,
 		});
 	}
 
@@ -23,7 +24,7 @@ class StartGameButton extends BaseTextButton {
 	constructor(x, y) {
 		super(x, y, {
 			text: "Start",
-			borderWidth: 100,
+			borderWidth: 150,
 		});
 	}
 
@@ -79,8 +80,53 @@ class PlayerEntry extends Container {
 			this.playerNameText.setText("waiting...");
 		}
 	}
+}
+
+class MessageContainer extends BaseContainer {
+	constructor(x, y, w, h, status ) {
+		super(x, y, w, h, {
+			titleText: "Status:",
+			titleColor: "#ffa000",
+			titlePos: "left",
+			backgroundAlpha: 0.3,
+			backgroundColor: "#005500",
+		});
+
+		this.statusMessage = new BitmapText(this.contentContainer.pos.x, this.contentContainer.pos.y, {
+			font: "18Outline",						
+		});
+
+		this.addChild(this.statusMessage);
+		this.updateMessage(status);
+	}
+
+	updateMessage(text) {
+		this.statusMessage.setText(text);
+	}
+}
+
+class PlayerContainer extends BaseContainer {
+	constructor(x, y, w) {
+		super(x, y, w, 224, {
+			titleText: "Players in the Game",
+			titleColor: "#ffa000",
+			titlePos: "left",
+			backgroundAlpha: 0.1,
+			backgroundColor: "#101010",
+		});
+
+		this.playerComponents = [];
+	}
 
-	destroy() {
+	addPlayer(player, num) {
+		let pe = new PlayerEntry(this.contentContainer.pos.x, this.contentContainer.pos.y + (num * 42), player, num);					
+		this.playerComponents.push(pe);
+		this.addChild(pe, 100);
+	}
+
+	updatePlayer(player, num) {
+		let pe = this.playerComponents[num];
+		pe.updatePlayer(player);
 	}
 }
 
@@ -90,31 +136,29 @@ class MenuComponent extends Container {
 
 		// make sure we use screen coordinates
 		this.floating = true;
+		this.setOpacity(1.0);
 
 		// always on toppest
-		this.z = 10;
-
-		this.setOpacity(1.0);
+		this.z = 20;
 
-		this.players = [];
-		this.playerComponents = [];
-		this.startButton = new StartGameButton(game.viewport.width - 105, game.viewport.height - 60);
+		this.players = [];		
+		this.startButton = new StartGameButton(game.viewport.width - 155, game.viewport.height - 60);
 		this.addChild(this.startButton);
 
+		let w = 600;
+		let h = 100;
+		let x = ( game.viewport.width - w ) / 2;
+		let y = 236;
+		this.statusContainer = new MessageContainer(x, y, w, h, "Waiting........");		
+		this.addChild(this.statusContainer);
 
-		this.addChild(new BitmapText(126, 250, {
-			font: "18Outline",
-			fillStyle: "#ffa000",
-			text: "Status:"
-		}));
-
-
-		this.statusMessage = new BitmapText(126, 276, {
-			font: "12Outline",
-			text: "Waiting..."
-		});
+		this.playerContainer = new PlayerContainer(x, y + h + 8, w);
+		this.addChild(this.playerContainer);
 
-		this.addChild(this.statusMessage);
+		this.players = this.playersFromGame(MultiplayerManager.get().multiplayerGame);
+		for (let i = 0; i < 4; i++) {		
+			this.playerContainer.addPlayer(this.players[i], i);			
+		}
 
 		// give a name
 		this.name = "mp-lobby";
@@ -127,12 +171,6 @@ class MenuComponent extends Container {
 		MultiplayerManager.get().setOnBroadcastCallback(this.broadcasted.bind(this));
 		MultiplayerManager.get().setOnGameStartedCallback(this.gameStarted.bind(this));
 
-		this.players = this.playersFromGame(MultiplayerManager.get().multiplayerGame);
-		for( let i = 0; i < 4; i++ ) {
-			let pe = new PlayerEntry(130, 330 + i * 42, this.players[i], i);
-			this.playerComponents.push(pe);
-			this.addChild(pe);
-		}
 	}	
 
 	playersFromGame(theGame) {
@@ -147,23 +185,22 @@ class MenuComponent extends Container {
 	updatePlayers(theGame) {
 		this.players = this.playersFromGame(MultiplayerManager.get().multiplayerGame);
 		for (let i = 0; i < 4; i++) {
-			let pe = this.playerComponents[i];
-			pe.updatePlayer(this.players[i]);
+			this.playerContainer.updatePlayer(this.players[i], i);
 		}
 	}
 
 
 	// event handlers
 	gameStarted(event) {
 		let message = event.message;
-		this.statusMessage.setText("Game starting now!");
+		this.statusContainer.updateMessage("Game starting now!");
 		state.change(my_state.MULTIPLAYER_PLAY);
 	}
 
 	playerJoined(event) {
 		let message = event.message;
 		let theGame = event.game;
-		this.statusMessage.setText(message.message);
+		this.statusContainer.updateMessage(message.message);
 		if( MultiplayerManager.get().weAreHost ) {
 			if( this.startButton === null ) {
 				this.startButton = new StartGameButton(game.viewport.width - 105, game.viewport.height - 60);			
@@ -177,7 +214,7 @@ class MenuComponent extends Container {
 		let message = event.message;
 		let theGame = event.game;
 
-		this.statusMessage.setText(message.message);
+		this.statusContainer.updateMessage(message.message);
 		if( MultiplayerManager.get().weAreHost ) {
 			if ((this.startButton !== null && theGame.player1 !== undefined) || theGame.player2 === undefined || theGame.player3 === undefined || theGame.player4 === undefined) {
 				//this.removeChild(this.startButton);				

diff --git a/melonjs-client/src/main/client/js/util/base-container.js b/melonjs-client/src/main/client/js/util/base-container.js
@@ -13,20 +13,24 @@ export class BaseContainer extends Container {
 	 * @param {number} h height of the container
 	 * @param {string} [options.titleFont] Name of the bitmap font for drawing title
 	 * @param {string} [options.titleText] title text
+	 * @param {string} [options.titlePos] Position of the title (left, right, center)
 	 * @param {Color}  [options.titleColor] Color of the title text (default #ff0000)
 	 * @param {Color}  [options.backgroundColor] Background color (default #008800)
 	 * @param {Color}  [options.backgroundBorderColor] background border (default #000000)
+	 * @param {number} [options.backgroundAlpha] background alpha (default 0.3)
 	 * @param {string} [options.dividerColor] color of the divider between headline and content (white)
 	 *
 	 */
 	constructor(x, y, w, h, options) {
 		super(x, y, w, h);
 		this.options = options;
 		this.options.titleFont = options.titleFont || "24Outline";
+		this.options.titlePos  = options.titlePos || "center";
 		this.options.titleText = options.titleText || "Header";
 		this.options.titleColor = options.titleColor || "#ff0000";
 		this.options.backgroundColor = options.backgroundColor || "#008800";
 		this.options.backgroundBorderColor = options.backgroundBorderColor || "#000000";
+		this.options.backgroundAlpha = options.backgroundAlpha || 0.3;
 		this.options.dividerColor = options.dividerColor || "#008800";
 		this.clipping = true;
 
@@ -40,14 +44,27 @@ export class BaseContainer extends Container {
 		let headerDim = this.header.measureText();
 		this.border = new RoundRect(x, y, w, h);
 		this.divider = new Rect(x + 5, y + headerDim.height + 16, w - 10, 2);
-		this.header.pos.x = (w - headerDim.width) / 2;
 		this.addChild(this.header);
 
-		this.contentContainer = new Rect(5, this.divider.pos.y + 14 - y, w - 10, h - (headerDim.height + 16 + 10));
+		switch(this.options.titlePos) {
+			case "left":
+				this.header.pos.x = 6;
+				break;
+			case "center":
+				this.header.pos.x = (w - headerDim.width) / 2;
+				break;
+			case "right":
+				this.header.pos.x = (w - headerDim.width - 6);
+				break;
+			default:
+				console.error("Wrong titlePos option. Must be left, right, center");
+				break;
+		}
+		this.contentContainer = new Rect(6, this.divider.pos.y + 14 - y, w - 12, h - (headerDim.height + 16 + 10));
 	}
 
 	draw(renderer, viewport) {
-		renderer.setGlobalAlpha(0.3);
+		renderer.setGlobalAlpha(this.options.backgroundAlpha);
 		renderer.setColor(this.options.backgroundColor);
 		renderer.fill(this.border);
 		renderer.setGlobalAlpha(1);