#32: some playments

wpernath · Sep 4, 2022 · 2c698d4 · 2c698d4
1 parent 2568000
commit 2c698d4
Show file tree

Hide file tree

Showing 9 changed files with 240 additions and 29 deletions.
diff --git a/melonjs-client/package-lock.json b/melonjs-client/package-lock.json
diff --git a/melonjs-client/package.json b/melonjs-client/package.json
@@ -32,6 +32,7 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "core-js": "^3.24.1",
     "css-loader": "^6.7.1",
+    "jquery": "^3.6.1",
     "melonjs": "^13.3.0",
     "rollup": "^2.75.7",
     "screenfull": "^6.0.2",

diff --git a/melonjs-client/src/main/client/index.css b/melonjs-client/src/main/client/index.css
@@ -23,3 +23,107 @@ body {
     /* Hide the gap for font descenders. */
     display: block;
 }
+
+#screen {
+    position: relative;
+}
+
+#screen input {
+    position: absolute;
+    z-index: 2;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none;
+    /* Hidden by default */
+    position: fixed;
+    /* Stay in place */
+    z-index: 1;
+    /* Sit on top */
+    padding-top: 100px;
+    /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%;
+    /* Full width */
+    height: 100%;
+    /* Full height */
+    overflow: auto;
+    /* Enable scroll if needed */
+    background-color: rgb(0, 0, 0);
+    /* Fallback color */
+    background-color: rgba(0, 0, 0, 0.4);
+    /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+    from {
+        top: -300px;
+        opacity: 0
+    }
+
+    to {
+        top: 0;
+        opacity: 1
+    }
+}
+
+@keyframes animatetop {
+    from {
+        top: -300px;
+        opacity: 0
+    }
+
+    to {
+        top: 0;
+        opacity: 1
+    }
+}
+
+/* The Close Button */
+.close {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-header {
+    padding: 2px 16px;
+    background-color: #5cb85c;
+    color: white;
+}
+
+.modal-body {
+    padding: 2px 16px;
+}
+
+.modal-footer {
+    padding: 2px 16px;
+    background-color: #5cb85c;
+    color: white;
+}
diff --git a/melonjs-client/src/main/client/index.html b/melonjs-client/src/main/client/index.html
@@ -6,7 +6,9 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
     <title>{{applicationName}} {{applicationVersion}}</title>
+    <link rel="stylesheet" href="/index.css">
   </head>
   <body>
       <!-- Canvas placeholder -->

diff --git a/melonjs-client/src/main/client/index.js b/melonjs-client/src/main/client/index.js
@@ -7,8 +7,7 @@ import {
     utils,
     game,
     plugin,
-    Vector2d,
-    input,
+    Vector2d,    
     TextureAtlas,
     pool,
 } from 'melonjs/dist/melonjs.module.js';
@@ -43,7 +42,7 @@ import { MultiplayerMessage } from './js/util/multiplayer';
 
 import HowToPlayScreen from './js/stage/how-to-play'
 import screenfull from "screenfull";
-
+import {bindKeys, unbindKeys} from "./js/util/constants";
 
 
 device.onReady(() => {
@@ -135,27 +134,7 @@ device.onReady(() => {
             state.transition("fade", "#000000", 500);
 
             // bind keys
-            input.bindKey(input.KEY.ALT, "magic");
-            input.bindKey(input.KEY.Q, "damage");
-            input.bindKey(input.KEY.E, "magic-barrier");
-            input.bindKey(input.KEY.R, "magic-nebula");
-            input.bindKey(input.KEY.SHIFT, "barrier");
-            input.bindKey(input.KEY.LEFT, "left",);
-            input.bindKey(input.KEY.A, "left");
-            input.bindKey(input.KEY.RIGHT, "right");
-            input.bindKey(input.KEY.D, "right");
-            input.bindKey(input.KEY.UP, "up");
-            input.bindKey(input.KEY.W, "up");
-            input.bindKey(input.KEY.DOWN, "down");
-            input.bindKey(input.KEY.S, "down");
-
-            //input.bindKey(input.KEY.E, "explode", true);
-            input.bindKey(input.KEY.P, "pause", true);
-
-            input.bindKey(input.KEY.SPACE, "bomb", true);
-            input.bindKey(input.KEY.ESC, "exit", true);
-            input.bindKey(input.KEY.F, "fullscreen", true);
-
+            bindKeys();
             NetworkManager.getInstance().createGameOnServer()
                 .then(function() {
                     // we don't use gravity here

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
@@ -6,6 +6,34 @@ import { my_state } from "../../util/constants";
 import MultiplayerManager  from "../../util/multiplayer";
 import { StateBackground } from "../state_background";
 import GlobalGameState from "../../util/global-game-state";
+import { BaseContainer } from "../../util/base-container";
+import { TextInput } from "../../util/text-input";
+import {bindKeys, unbindKeys} from "../../util/constants";
+
+class ChangeNamePopup extends BaseContainer {
+	constructor() {
+		let h = 160;
+		let w = 320;
+		let x = (game.viewport.width - w) / 2;
+		let y = 200;
+		super(x, y, w, h, {
+			titleText: "Change Name",
+			titlePos: "left",
+			backgroundAlpha: 0.9,
+			dividerColor: "#005500"
+		});
+		let absPos = this.getAbsolutePosition();
+		this.textInput = new TextInput(
+			absPos.x + this.contentContainer.pos.x, 
+			absPos.y + this.contentContainer.pos.y, 
+			"text", 
+			MultiplayerManager.get().multiplayerPlayer.name,
+			32
+		);
+		this.addChild(this.textInput);
+		unbindKeys();
+	}
+}
 
 class StartGameButton extends BaseTextButton {
     constructor(x,y) {
@@ -34,6 +62,20 @@ class JoinGameButton extends BaseTextButton {
 	}
 }
 
+class ChangeNameButton extends BaseTextButton {
+	constructor(x,y) {
+		super(x, y, {
+			text: "Change Name",
+			borderWidth: 250
+		})
+	}
+
+	onClick() {
+		this.window = new ChangeNamePopup();
+		this.ancestor.addChild(this.window);
+		return false;
+	}
+}
 class BackButton extends BaseTextButton {
 	constructor(x, y) {
 		super(x, y, {
@@ -66,7 +108,8 @@ class MenuComponent extends Container {
 		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));        		
+		this.addChild(new ChangeNameButton((game.viewport.width - 250) / 2, 420));
+        this.addChild(new BackButton((game.viewport.width - 250) / 2, 480));        		
 	}
 }
 
@@ -75,7 +118,7 @@ export default class MultiplayerMenuScreen extends Stage {
 		this.multiplayerManager = MultiplayerManager.get();
 		this.menu = null;
 		GlobalGameState.reset();
-		
+
 		this.multiplayerManager.createPlayerFromMe().then((player) => {			
 			console.log("  Got new MultiPlayer: " + player.id);			
 			this.menu = new MenuComponent();

diff --git a/melonjs-client/src/main/client/js/util/base-container.js b/melonjs-client/src/main/client/js/util/base-container.js
@@ -18,7 +18,7 @@ export class BaseContainer extends Container {
 	 * @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)
+	 * @param {string} [options.dividerColor] color of the divider between headline and content (#008800)
 	 *
 	 */
 	constructor(x, y, w, h, options) {
@@ -32,6 +32,7 @@ export class BaseContainer extends Container {
 		this.options.backgroundBorderColor = options.backgroundBorderColor || "#000000";
 		this.options.backgroundAlpha = options.backgroundAlpha || 0.3;
 		this.options.dividerColor = options.dividerColor || "#008800";
+
 		this.clipping = true;
 
 		this.header = new BitmapText(4, 6, {

diff --git a/melonjs-client/src/main/client/js/util/constants.js b/melonjs-client/src/main/client/js/util/constants.js
@@ -1,4 +1,4 @@
-import { collision, state, pool, Color } from "melonjs";
+import { collision, state, input } from "melonjs";
 
 export const my_state = {
 	/**
@@ -109,4 +109,43 @@ export const ENEMY_TILE = {
 	golem: 996,
 };
 
-
+export function bindKeys() {
+	input.bindKey(input.KEY.ALT, "magic");
+	input.bindKey(input.KEY.Q, "damage");
+	input.bindKey(input.KEY.E, "magic-barrier");
+	input.bindKey(input.KEY.R, "magic-nebula");
+	input.bindKey(input.KEY.SHIFT, "barrier");
+	input.bindKey(input.KEY.LEFT, "left");
+	input.bindKey(input.KEY.A, "left");
+	input.bindKey(input.KEY.RIGHT, "right");
+	input.bindKey(input.KEY.D, "right");
+	input.bindKey(input.KEY.UP, "up");
+	input.bindKey(input.KEY.W, "up");
+	input.bindKey(input.KEY.DOWN, "down");
+	input.bindKey(input.KEY.S, "down");
+	input.bindKey(input.KEY.P, "pause", true);
+	input.bindKey(input.KEY.SPACE, "bomb", true);
+	input.bindKey(input.KEY.ESC, "exit", true);
+	input.bindKey(input.KEY.F, "fullscreen", true);
+}
+
+export function unbindKeys() {
+	input.unbindKey(input.KEY.ALT);
+	input.unbindKey(input.KEY.Q);
+	input.unbindKey(input.KEY.E);
+	input.unbindKey(input.KEY.R);
+	input.unbindKey(input.KEY.SHIFT);
+	input.unbindKey(input.KEY.LEFT);
+	input.unbindKey(input.KEY.A);
+	input.unbindKey(input.KEY.RIGHT);
+	input.unbindKey(input.KEY.D);
+	input.unbindKey(input.KEY.UP);
+	input.unbindKey(input.KEY.W);
+	input.unbindKey(input.KEY.DOWN);
+	input.unbindKey(input.KEY.S);
+	input.unbindKey(input.KEY.P);
+	input.unbindKey(input.KEY.SPACE);
+	input.unbindKey(input.KEY.ESC);
+	input.unbindKey(input.KEY.F);
+
+}
diff --git a/melonjs-client/src/main/client/js/util/text-input.js b/melonjs-client/src/main/client/js/util/text-input.js
@@ -0,0 +1,31 @@
+import { Renderable, video } from "melonjs";
+import $ from "jquery";
+
+export class TextInput extends Renderable {
+    constructor(x, y, type, length, def) {
+
+        super(x, y, length, 16);
+
+        this.$input = $('<input type="' + type + '" required>' + def + '</input>').css({
+            "left" : x,
+            "top" : y
+        });
+
+        switch (type) {
+        case "text":
+            this.$input
+                .attr("maxlength", length)
+                .attr("pattern", "[a-zA-Z0-9_\-]+");
+            break;
+        case "number":
+            this.$input.attr("max", length);
+            break;
+        }
+
+        $(video.getParent()).append(this.$input);
+    }
+
+    onDestroyEvent() {
+        this.$input.remove();
+    }
+};