Skip to content

Commit

Permalink
#27: Fixed mp-host and mp-join
Browse files Browse the repository at this point in the history
@wpernath
wpernath committed Sep 5, 2022
1 parent 81ef36c commit 5afbe1b
Showing 8 changed files with 148 additions and 99 deletions.
2 changes: 1 addition & 1 deletion melonjs-client/src/main/client/js/stage/how-to-play.js
View file
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ class BaseHelpComponent extends BaseContainer {
constructor(x, y, w, h, title) {
super(x, y, w, h, {
titleFont: "18Outline",
titleColor: "#ff0000",
//titleColor: "#ff0000",
titleText: title
});
}
98 changes: 59 additions & 39 deletions melonjs-client/src/main/client/js/stage/multiplayer/mp-choose-game.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { Stage, state, pool, game, event, BitmapText, Container, loader, input, GUI_Object } from "melonjs";
import { Stage, state, pool, game, event, BitmapText, Container, loader, input, GUI_Object, Vector2d } from "melonjs";
import BaseClickableComponent from "../../util/base-clickable-component";
import { LevelManager } from "../../util/level";
import GlobalGameState from "../../util/global-game-state";
import { my_state } from "../../util/constants";
import MultiplayerManager from "../../util/multiplayer";
import { BaseContainer } from "../../util/base-container";

class LeftButton extends GUI_Object {
constructor(x, y, callback) {
super(x, y, {
image: GlobalGameState.screenControlsTexture,
region: "shadedDark24",
anchorPoint: new Vector2d(0,0),
});
this.callback = callback
this.setOpacity(0.5);
@@ -36,6 +38,7 @@ class RightButton extends GUI_Object {
super(x, y, {
image: GlobalGameState.screenControlsTexture,
region: "shadedDark25",
anchorPoint: new Vector2d(0, 0),
});
this.callback = callback;
this.setOpacity(0.5);
@@ -65,10 +68,10 @@ class ListEntry extends BaseClickableComponent {
image;
callbackOnClick;

constructor(g, x, y) {
super(x, y, game.viewport.width - 280, 500);
constructor(g, x, y, w, h) {
super(x, y, w, h);

this.clipping = true;
this.clipping = false;
this.floating = false;

this.game = g;
@@ -79,57 +82,65 @@ class ListEntry extends BaseClickableComponent {
this.image = loader.getImage(this.level.previewImage);


this.addChild( new BitmapText(378, 20, {
this.addChild( new BitmapText(358, 0, {
font: "18Outline",
text: "Multiplayer Session",
fillStyle: "#ffa000",
}));

this.addChild( new BitmapText(378, 50, {
this.addChild( new BitmapText(358, 30, {
font: "12Outline",
text: "Opened By: " + this.game.player1.name,
}));

let date = new Date(this.game.timeStarted);
this.addChild( new BitmapText(378, 70, {
this.addChild( new BitmapText(358, 50, {
font: "12Outline",
text: "Opened on: " + date.toLocaleDateString() + " " + date.toLocaleTimeString(),
}));

this.addChild( new BitmapText(378, 120, {
this.addChild( new BitmapText(358, 80, {
font: "18Outline",
text: "Map information",
fillStyle: "#ffa000",
}));


this.addChild(new BitmapText(15+348+15, 150, {
this.addChild(new BitmapText(358, 110, {
font: "12Outline",
text: "Name: " + this.name,
}));

this.addChild(new BitmapText(15 + 348 + 15, 170, {
this.addChild(new BitmapText(358, 130, {
font: "12Outline",
text: "Map size: " + this.level.mapWidth + " x " + this.level.mapHeight,
}));

this.addChild(new BitmapText(15 + 348 + 15, 190, {
this.addChild(new BitmapText(358, 150, {
font: "12Outline",
text: "Max players: " + this.level.numPlayers,
}));

this.addChild(new BitmapText(15+348+15, 220, {
this.addChild(
new BitmapText(358, 180, {
font: "18Outline",
text: "Description: ",
fillStyle: "#ffa000",
})
);

this.addChild(new BitmapText(358, 210, {
font: "12Outline",
lineHeight: 1.5,
text: "Description:\n" + this.description,
text: this.description,
}));

this.callbackOnClick = undefined;
}

draw(renderer) {
renderer.drawImage(this.image, this.pos.x + 15, this.pos.y + 20, 348, 444);
super.draw(renderer);
draw(renderer, viewport) {
renderer.drawImage(this.image, this.pos.x + 5, this.pos.y, 348, 444);
super.draw(renderer, viewport);
}

setCallbackOnClick(callback) {
@@ -149,43 +160,52 @@ class ListEntry extends BaseClickableComponent {
}
}

export class GameChooserComponent extends Container {
export class GameChooserComponent extends BaseContainer {
listComponents = [];
levelChosen = false;
levelIndex = 0;

constructor(levels) {
super();
let w = 900;
let h = 505;
let x = (game.viewport.width - w) / 2;
let y = game.viewport.height - h - 60;
super(x, y, w, h, {
titleText: "Choose a Match to join",
backgroundAlpha: 0.4,
backgroundColor: "#202020",
});

this.levels = levels;
// make sure we do not use screen coordinates
this.floating = false;

// make sure we use screen coordinates
this.floating = true;
// but clipping must be true
this.clipping = true;

// always on toppest
this.z = 10;
this.levels = levels;

this.setOpacity(1.0);
// always on toppest
this.z = 12;

// give a name
this.name = "GameChooser";

this.prev = new LeftButton(86, 360, this.prevLevel.bind(this));
this.next = new RightButton(game.viewport.width - 86, 360, this.nextLevel.bind(this));
this.addChild(this.prev);
this.addChild(this.next);

for(let levelIndex = 0; levelIndex < this.levels.length; levelIndex++ ) {
let entry = new ListEntry(this.levels[levelIndex], 130, 220);
entry.setCallbackOnClick(this.useSelectedGame.bind(this));
entry.setOpacity(0.8);
this.listComponents.push(entry);
}

if( this.listComponents.length > 0 ) {
this.addChild(this.listComponents[0]);
y = (h - 77) / 2;
this.prev = new LeftButton(this.pos.x + 2, this.pos.y + y, this.prevLevel.bind(this));
this.next = new RightButton(this.pos.x + w - 80, this.pos.y + y, this.nextLevel.bind(this));
this.addChild(this.prev);
this.addChild(this.next);

for (let levelIndex = 0; levelIndex < this.levels.length; levelIndex++) {
let entry = new ListEntry(this.levels[levelIndex], this.contentContainer.pos.x + 80, this.contentContainer.pos.y, w - 180, h - 50);
entry.setCallbackOnClick(this.useSelectedGame.bind(this));
entry.setOpacity(0.8);
this.listComponents.push(entry);
}
else {

if (this.listComponents.length > 0) {
this.addChild(this.listComponents[0]);
} else {
console.log("no entries in list");
}
}
121 changes: 74 additions & 47 deletions melonjs-client/src/main/client/js/stage/multiplayer/mp-choose-level.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { Stage, state, game, event, Sprite, BitmapText, Container, loader, Vector2d, input, GUI_Object } from "melonjs";
import BaseClickableComponent from "../../util/base-clickable-component";
import { LevelManager } from "../../util/level";
import GlobalGameState from "../../util/global-game-state";
import { my_state } from "../../util/constants";
import MultiplayerManager from "../../util/multiplayer";
import { BaseContainer } from "../../util/base-container";

class LeftButton extends GUI_Object {
constructor(x, y, callback) {
super(x, y, {
image: GlobalGameState.screenControlsTexture,
region: "shadedDark24",
anchorPoint: new Vector2d(0,0),
});
this.callback = callback
this.setOpacity(0.5);
@@ -36,6 +37,7 @@ class RightButton extends GUI_Object {
super(x, y, {
image: GlobalGameState.screenControlsTexture,
region: "shadedDark25",
anchorPoint: new Vector2d(0, 0),
});
this.callback = callback;
this.setOpacity(0.5);
@@ -65,10 +67,10 @@ class ListEntry extends BaseClickableComponent {
image;
callbackOnClick;

constructor(level, x, y) {
super(x, y, game.viewport.width - 280, 500);
constructor(level, x, y, w, h) {
super(x, y, w, h);

this.clipping = true;
this.clipping = false;
this.floating = false;

this.level = level;
@@ -78,42 +80,56 @@ class ListEntry extends BaseClickableComponent {
this.numPlayers = "Max players: " + this.level.numPlayers;
this.image = loader.getImage(this.level.previewImage);

console.log(" creating LevelEntry(" + this.name + ")");
this.titleFont = new BitmapText(15+348+15, 20, {
font: "18Outline",
text: this.name,
anchorPoint: new Vector2d(0, 0),
});

this.descriptionFont = new BitmapText(15+348+15, 60, {
font: "12Outline",
lineHeight: 1.5,
text: this.description,
anchorPoint: new Vector2d(0, 0),
});

this.mapSizeFont = new BitmapText(15 + 348 + 15, 400, {
font: "18Outline",
text: this.mapSize,
anchorPoint: new Vector2d(0, 0),
});

this.numPlayersFont = new BitmapText(15 + 348 + 15, 440, {
font: "18Outline",
text: this.numPlayers,
anchorPoint: new Vector2d(0, 0),
});

this.addChild(this.titleFont);
this.addChild(this.descriptionFont);
this.addChild(this.mapSizeFont);
this.addChild(this.numPlayersFont);
this.addChild(
new BitmapText(358, 0, {
font: "18Outline",
text: "Map information",
fillStyle: "#ffa000",
})
);

this.addChild(
new BitmapText(358, 30, {
font: "12Outline",
text: "Name: " + this.name,
})
);

this.addChild(
new BitmapText(358, 50, {
font: "12Outline",
text: this.mapSize,
})
);

this.addChild(
new BitmapText(358, 70, {
font: "12Outline",
text: "Max players: " + this.level.numPlayers,
})
);

this.addChild(
new BitmapText(358, 110, {
font: "18Outline",
text: "Description: ",
fillStyle: "#ffa000",
})
);

this.addChild(
new BitmapText(358, 140, {
font: "12Outline",
lineHeight: 1.5,
text: this.description,
})
);
this.callbackOnClick = undefined;
}

draw(renderer) {
renderer.drawImage(this.image, this.pos.x + 15, this.pos.y + 20, 348, 444);
super.draw(renderer);
draw(renderer, viewport) {
renderer.drawImage(this.image, this.pos.x + 5, this.pos.y, 348, 444);
super.draw(renderer, viewport);
}

setCallbackOnClick(callback) {
@@ -133,34 +149,44 @@ class ListEntry extends BaseClickableComponent {
}
}

export class ChooserComponent extends Container {
export class ChooserComponent extends BaseContainer {
listComponents = [];
levelChosen = false;
levelIndex = 0;

constructor(levels) {
super();
let w = 900;
let h = 505;
let x = (game.viewport.width - w) / 2;
let y = (game.viewport.height - h) - 60;
super(x, y, w, h, {
titleText: "Choose a Level",
backgroundAlpha: 0.4,
backgroundColor: "#202020",
});

this.levels = levels;

// make sure we use screen coordinates
this.floating = true;
// make sure we do not use screen coordinates
this.floating = false;

// always on toppest
this.z = 10;
// but clipping must be true
this.clipping = true;

this.setOpacity(1.0);
// always on toppest
this.z = 12;

// give a name
this.name = "LevelChooser";

this.prev = new LeftButton(86, 360, this.prevLevel.bind(this));
this.next = new RightButton(game.viewport.width - 86, 360, this.nextLevel.bind(this));
y = ((h - 77) / 2);
this.prev = new LeftButton(this.pos.x + 2, this.pos.y + y, this.prevLevel.bind(this));
this.next = new RightButton(this.pos.x + w - 80, this.pos.y + y, this.nextLevel.bind(this));
this.addChild(this.prev);
this.addChild(this.next);

for(let levelIndex = 0; levelIndex < this.levels.length; levelIndex++ ) {
let entry = new ListEntry(this.levels[levelIndex], 130, 220);
let entry = new ListEntry(this.levels[levelIndex], this.contentContainer.pos.x + 80, this.contentContainer.pos.y, w-180, h - 50);
entry.setCallbackOnClick(this.useSelectedGame.bind(this));
entry.setOpacity(0.8);
this.listComponents.push(entry);
@@ -172,6 +198,7 @@ export class ChooserComponent extends Container {
else {
console.log("no entries in list");
}

}

prevLevel() {
Loading

0 comments on commit 5afbe1b

Please sign in to comment.