#27: fixed title image layout on each state screen

wpernath · Sep 2, 2022 · d9ab3e9 · d9ab3e9
1 parent 156d1ac
commit d9ab3e9
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 52 deletions.
diff --git a/melonjs-client/src/main/client/config.js b/melonjs-client/src/main/client/config.js
@@ -7,12 +7,12 @@ const CONFIG = {
 	baseURL: "",
 
 	local: {
-		// Use localhost if you don't care about multiplayer 
-		//baseURL: "http://localhost:8080/",		
-		//baseURL: "http://192.168.2.171:8080/",
-
+		// Use localhost if you don't care about multiplayer
+		//baseURL: "http://localhost:8080/",
+
 		// Use a real IP address if you want to do multiplayer testing
-		baseURL: "http://192.168.2.198:8080/",
+		//baseURL: "http://192.168.2.198:8080/",
+		baseURL: "http://192.168.2.171:8080/",
 	},
 
 	dev: {

diff --git a/melonjs-client/src/main/client/js/stage/multiplayer/mp-game-over.js b/melonjs-client/src/main/client/js/stage/multiplayer/mp-game-over.js
@@ -152,15 +152,7 @@ class GameOverBack extends Container {
 		});
 		this.sensaSprite.setOpacity(0.6);
 		this.addChild(this.sensaSprite, 1);
-		this.addChild(new StateBackground(this.isGameOver ? "LOOOOOOSER!" : "CONGRATS! WINNER!", false), 0);
-		this.addChild(
-			new BitmapText(game.viewport.width - 75, 170, {
-				font: "24Outline",
-				textAlign: "right",
-				text: MultiplayerManager.get().multiplayerPlayer.name,
-			}), 1
-		);
-
+		this.addChild(new StateBackground(this.isGameOver ? "LOOOOOOSER!" : "CONGRATS! WINNER!", false, true, true), 0);
 
 		for( let i = 0; i < this.players.length; i++ ) {
 			if( this.players[i] !== null ) {

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
@@ -51,16 +51,7 @@ class MenuComponent extends Container {
 		this.name = "TitleBack";
 
 		this.levelChooser = new ChooserComponent(MultiplayerManager.get().allLevels());
-        this.addChild(new StateBackground("HOST GAME", false, false));
-
-		this.addChild(
-			new BitmapText(game.viewport.width - 75, 170, {
-				font: "24Outline",
-				textAlign: "right",
-				text: MultiplayerManager.get().multiplayerPlayer.name,
-			})
-		);
-
+        this.addChild(new StateBackground("HOST GAME", false, false, true));
 		this.addChild(this.levelChooser);
 
 		this.addChild(new BackButton(5, 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
@@ -44,18 +44,9 @@ class MenuComponent extends Container {
 
 		// give a name
 		this.name = "TitleBack";
-		this.addChild(new StateBackground("JOIN GAME", false, false));
-		this.addChild(
-			new BitmapText(game.viewport.width - 75, 170, {
-				font: "24Outline",
-				textAlign: "right",
-				text: MultiplayerManager.get().multiplayerPlayer.name,
-			})
-		);
-
+		this.addChild(new StateBackground("JOIN GAME", false, false, true));
 		this.addChild(new BackButton(5, game.viewport.height - 60));
 
-
 		MultiplayerManager.get()
 			.listOpenGames()
 			.then((games) => {

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
@@ -118,15 +118,7 @@ class MenuComponent extends Container {
 
 		// give a name
 		this.name = "mp-lobby";
-		this.addChild(new StateBackground("LOBBY", false, false));
-		this.addChild(
-			new BitmapText(game.viewport.width - 75, 170, {
-				font: "24Outline",
-				textAlign: "right",
-				text: MultiplayerManager.get().multiplayerPlayer.name,
-			})
-		);
-
+		this.addChild(new StateBackground("LOBBY", false, false, true));
 		this.addChild(new BackButton(5, game.viewport.height - 60));
 
 		MultiplayerManager.get().setOnJoinCallback(this.playerJoined.bind(this));

diff --git a/melonjs-client/src/main/client/js/stage/multiplayer/mp-menu.js b/melonjs-client/src/main/client/js/stage/multiplayer/mp-menu.js
@@ -63,13 +63,7 @@ class MenuComponent extends Container {
 
 		// give a name
 		this.name = "TitleBack";
-		this.addChild(new StateBackground("MULTIPLAYER"));
-
-		this.addChild(new BitmapText(game.viewport.width-75, 170, {
-			font: "24Outline",
-			textAlign: "right",
-			text: MultiplayerManager.get().multiplayerPlayer.name 
-		}));
+		this.addChild(new StateBackground("MULTIPLAYER", true, true, true));
         this.addChild(new StartGameButton((game.viewport.width - 250)/2, 300));
         this.addChild(new JoinGameButton((game.viewport.width - 250) / 2, 360));
         this.addChild(new BackButton((game.viewport.width - 250) / 2, 420));        		

diff --git a/melonjs-client/src/main/client/js/stage/state_background.js b/melonjs-client/src/main/client/js/stage/state_background.js
@@ -1,7 +1,8 @@
 import { Container, game, Sprite, loader, BitmapText, Vector2d } from "melonjs";
+import MultiplayerManager from "../util/multiplayer";
 
 export class StateBackground extends Container {
-	constructor(title, drawRightCat = true, drawLeftCat = true) {
+	constructor(title, drawRightCat = true, drawLeftCat = true, drawMultiplayerName = false) {
 		super(0,0,game.viewport.width, game.viewport.height);
 
 		// make sure we use screen coordinates
@@ -42,13 +43,25 @@ export class StateBackground extends Container {
 			image: loader.getImage("title"),
 			anchorPoint: new Vector2d(0, 0),
 		});
+		this.titleImage.pos.x = (game.viewport.width - this.titleImage.width) / 2;
 
 		this.subTitleText = new BitmapText(126, 170, {
 			font: "Shadow",
 			fillStyle: "white",
 			textAlign: "left",
 			text: title,			
 		});
+		this.subTitleText.pos.x = this.titleImage.pos.x + 40;
+
+		if( drawMultiplayerName ) {
+			this.addChild(
+				new BitmapText(this.titleImage.pos.x + this.titleImage.width - 20, 170, {
+					font: "24Outline",
+					textAlign: "right",
+					text: MultiplayerManager.get().multiplayerPlayer.name,
+				})
+			);
+		}
 
 		// add to the world container
 		this.addChild(this.backgroundImage, 0);

diff --git a/melonjs-client/src/main/client/js/stage/title-back.js b/melonjs-client/src/main/client/js/stage/title-back.js
@@ -77,7 +77,7 @@ export default class TitleBackground extends Container {
 			image: loader.getImage("title"),
 			anchorPoint: new Vector2d(0,0)
 		});
-
+		this.titleText.pos.x = (game.viewport.width - this.titleText.width ) / 2;
 
 		this.subTitleText = new BitmapText(126, 170, {
 			font: "12Outline",
@@ -87,6 +87,7 @@ export default class TitleBackground extends Container {
 			text: "A JavaScript / melonJS client. Written by Wanja Pernath",
 			offScreenCanvas: false,
 		});
+		this.subTitleText.pos.x = this.titleText.pos.x + 40;
 
 		this.subVersionText = new BitmapText(126, 186, {
 			font: "12Outline",
@@ -96,6 +97,7 @@ export default class TitleBackground extends Container {
 			text: "Server API: " + GlobalGameState.globalServerVersion.appName + "@" + GlobalGameState.globalServerVersion.appVersion + " at " + CONFIG.baseURL,
 			offScreenCanvas: false,
 		});
+		this.subVersionText.pos.x = this.titleText.pos.x + 40;
 
 		// add to the world container
 		this.addChild(this.backgroundImage, 0);