From 5d621560eeb6048be5ad8ba1fb38366940ccb052 Mon Sep 17 00:00:00 2001
From: wpernath <w.pernath@gmx.de>
Date: Tue, 30 Aug 2022 23:23:19 +0200
Subject: [PATCH 01/16] preparing release v0.6.2

---
 docker-compose.yaml                               | 4 ++--
 kubernetes-config/overlays/tom/kustomization.yaml | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docker-compose.yaml b/docker-compose.yaml
index 3d5e9276..3e965a30 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -50,7 +50,7 @@ services:
       - catsdb
       - zookeeper
       - kafka
-    image: quay.io/wpernath/quarkus-grumpycat:v0.6.1
+    image: quay.io/wpernath/quarkus-grumpycat:v0.6.2
     ports:
       - "9001:8080"
     restart: always
@@ -65,7 +65,7 @@ services:
   cat-client: 
     depends_on:
       - cat-server
-    image: quay.io/wpernath/grumpycat-melonjs:v0.6.1
+    image: quay.io/wpernath/grumpycat-melonjs:v0.6.2
     ports:
       - "8086:8088"
     restart: always
diff --git a/kubernetes-config/overlays/tom/kustomization.yaml b/kubernetes-config/overlays/tom/kustomization.yaml
index 48725ffa..19cc62fa 100644
--- a/kubernetes-config/overlays/tom/kustomization.yaml
+++ b/kubernetes-config/overlays/tom/kustomization.yaml
@@ -8,10 +8,10 @@ resources:
 images:
 - name: quay.io/wpernath/grumpycat-melonjs:latest
   newName: quay.io/wpernath/grumpycat-melonjs
-  newTag: v0.6.1
+  newTag: v0.6.2
 - name: quay.io/wpernath/quarkus-grumpycat:latest
   newName: quay.io/wpernath/quarkus-grumpycat
-  newTag: v0.6.1
+  newTag: v0.6.2
 
 # generate a configmap 
 configMapGenerator:

From 01a3b6a5489efd7dec0488e3c9317d2de477bfc9 Mon Sep 17 00:00:00 2001
From: wpernath <w.pernath@gmx.de>
Date: Tue, 30 Aug 2022 23:27:14 +0200
Subject: [PATCH 02/16] preparing release v0.6.2

---
 kubernetes-config/overlays/dev/kustomization.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kubernetes-config/overlays/dev/kustomization.yaml b/kubernetes-config/overlays/dev/kustomization.yaml
index 59927518..a9d47e30 100644
--- a/kubernetes-config/overlays/dev/kustomization.yaml
+++ b/kubernetes-config/overlays/dev/kustomization.yaml
@@ -8,10 +8,10 @@ resources:
 images:
 - name: quay.io/wpernath/grumpycat-melonjs:latest
   newName: quay.io/wpernath/grumpycat-melonjs
-  newTag: v0.6.1
+  newTag: v0.6.2
 - name: quay.io/wpernath/quarkus-grumpycat:latest
   newName: quay.io/wpernath/quarkus-grumpycat
-  newTag: v0.6.1
+  newTag: v0.6.2
 
 # generate a configmap 
 configMapGenerator:

From 9698d6734a4bacdbd2c6d805de7fe293406d4adc Mon Sep 17 00:00:00 2001
From: Wanja Pernath <wpernath@redhat.com>
Date: Wed, 31 Aug 2022 14:17:58 +0200
Subject: [PATCH 03/16] #22 Lets test this version of the HUD

---
 RELEASING.md                                  |  11 ++
 melonjs-client/src/main/client/config.js      |  10 +-
 .../src/main/client/js/renderables/player.js  |   2 +-
 .../main/client/js/stage/hud/hud-container.js | 171 ++++++++----------
 .../src/main/resources/application.properties |   4 +-
 5 files changed, 96 insertions(+), 102 deletions(-)
 create mode 100644 RELEASING.md

diff --git a/RELEASING.md b/RELEASING.md
new file mode 100644
index 00000000..6b8a125f
--- /dev/null
+++ b/RELEASING.md
@@ -0,0 +1,11 @@
+# Creating a release
+The following steps need to be done in order to create a new release:
+
+- melonjs-client/src/main/client/config.js : Make sure, `environment` is set to PROD.
+- open all 3 pom.xml files and change the version according to your release
+- open `./docker-compose.yaml` and make sure cat-client and cat-server are pointing to the image with the corresponding tag
+- open `./kubernetes-config/overlays/<dev|your overlay>/kustomization.yaml` and make sure the image tag is being used accordingly
+- in CLI, call `mvn clean package -Dquarkus.container-image.push=true` from root dir. This will create tagged images of client and server
+- create a git tag: `git tag -am 'Releasing xyz' v0.6.x
+
+DONE.
diff --git a/melonjs-client/src/main/client/config.js b/melonjs-client/src/main/client/config.js
index e222d01d..a82bd492 100644
--- a/melonjs-client/src/main/client/config.js
+++ b/melonjs-client/src/main/client/config.js
@@ -1,5 +1,5 @@
 const CONFIG = {
-	environment: "prod", // change this TO PROD on deployment
+	environment: "local", // change this TO PROD on deployment
 
 	appName: "{{applicationName}}",
 	appVersion: "{{applicationVersion}}",
@@ -7,10 +7,12 @@ const CONFIG = {
 	baseURL: "",
 
 	local: {
-		//baseURL: "http://172.20.10.2:8080/",
-		baseURL: "http://localhost:8080/",
+		// Use localhost if you don't care about multiplayer 
+		//baseURL: "http://localhost:8080/",		
 		//baseURL: "http://192.168.2.171:8080/",
-		//baseURL: "http://192.168.2.198:8080/",
+
+		// Use a real IP address if you want to do multiplayer testing
+		baseURL: "http://192.168.2.198:8080/",
 	},
 
 	dev: {
diff --git a/melonjs-client/src/main/client/js/renderables/player.js b/melonjs-client/src/main/client/js/renderables/player.js
index e75ff42f..20b24d99 100644
--- a/melonjs-client/src/main/client/js/renderables/player.js
+++ b/melonjs-client/src/main/client/js/renderables/player.js
@@ -1,6 +1,6 @@
 import { game, input, state } from 'melonjs/dist/melonjs.module.js';
 import BombEntity from './bomb';
-import ExplosionEntity from './explosion';
+
 import GlobalGameState from '../util/global-game-state';
 import { LevelManager } from '../util/level';
 
diff --git a/melonjs-client/src/main/client/js/stage/hud/hud-container.js b/melonjs-client/src/main/client/js/stage/hud/hud-container.js
index 037bf3cb..fd73fc08 100644
--- a/melonjs-client/src/main/client/js/stage/hud/hud-container.js
+++ b/melonjs-client/src/main/client/js/stage/hud/hud-container.js
@@ -1,10 +1,10 @@
-import { Renderable, BitmapText, game, event, Container, Vector2d, Color, Rect, RoundRect, Sprite} from "melonjs/dist/melonjs.module.js";
+import { BitmapText, game, event, Container, Vector2d, Color, Rect, RoundRect } from "melonjs/dist/melonjs.module.js";
 import BaseTerrainSprite from "../../renderables/terrain/terrain-sprite";
 
 import GlobalGameState from "../../util/global-game-state";
 import { BONUS_TILE, PLAYER_COLORS } from "../../util/constants";
 import MultiplayerManager from "../../util/multiplayer";
-
+import PlayerEntity from "../../renderables/player";
 
 class ScoreItem extends Container {
 	/**
@@ -13,19 +13,20 @@ class ScoreItem extends Container {
 	 * @param y
 	 */
 	constructor(x, y) {
-		super(x, y, 160, 34);
+		super(x, y, 240, 34);
 
 		this.text = new BitmapText(0,0, {
 			font: "Shadow",
 			textBaseline: "top",
-			text: "9999999",
+			
+			text: "99999999",
 		});
 
 		// persistent across level change
-		//this.isPersistent = true;
+		this.isPersistent = true;
 
 		// make sure we use screen coordinates
-		this.floating = true;
+		//this.floating = true;
 
 		this.z = 100;
 
@@ -39,45 +40,18 @@ class ScoreItem extends Container {
 			}.bind(this)
 		);
 
-		this.dogLeft = new Sprite(this.pos.x - 40, this.pos.y + 2, {
-			image: "player",
-			framewidth: 34,
-			frameheight: 39,
-			tint: PLAYER_COLORS[MultiplayerManager.get().getMultiplayerPlayerNumber()],
-		});
-
-		
-		this.catRight = new Sprite(this.pos.x + 150, this.pos.y + 2, {
-			image: "cat_left",
-			framewidth: 40,
-			frameheight: 39,
-			flipX: true,
-		});
-		/*
-		this.catRight = new Sprite(this.pos.x + 150, this.pos.y + 2, {
-			image: "player",
-			framewidth: 34,
-			frameheight: 39,
-			tint: PLAYER_COLORS[MultiplayerManager.get().getMultiplayerPlayerNumber()],
-			flipX: true,
-		});
-		*/
-
-	}
-
-	draw(renderer) {	
-//		console.log("ScoreItem.draw()")	;
-		let width = this.text.measureText(renderer).width;		
-		renderer.setTint(this.text.tint, this.text.getOpacity());
-		this.text.draw(renderer, this.scoretext, 24 + (game.viewport.width - width) / 2, this.pos.y + 12);
+		this.dogLeft = new PlayerEntity(0,  0, true);
+		this.dogRight= new PlayerEntity(7, 0, true);
+		this.dogLeft.tint.copy(PLAYER_COLORS[MultiplayerManager.get().getMultiplayerPlayerNumber()]);
+		this.dogRight.tint.copy(PLAYER_COLORS[MultiplayerManager.get().getMultiplayerPlayerNumber()]);
+		this.dogRight.flipX(true);
 
-		renderer.setTint(this.dogLeft.tint, this.dogLeft.getOpacity());
-		this.dogLeft.draw(renderer);
+		this.addChild(this.dogLeft);
+		this.addChild(this.dogRight);
+		this.addChild(this.text);
 
-		renderer.setTint(this.catRight.tint, this.catRight.getOpacity());
+		this.text.pos.x = (this.width - this.text.measureText().width) / 2;
 
-		this.catRight.draw(renderer);
-		super.draw(renderer);
 	}
 
 	/**
@@ -90,7 +64,8 @@ class ScoreItem extends Container {
 		if (this.score != GlobalGameState.score) {
 			this.score = GlobalGameState.score;
 			this.isDirty = true;
-			this.scoretext = this.score.toString().padStart(7, "0");
+			this.scoretext = this.score.toString().padStart(8, "0");
+			this.text.setText(this.scoretext);
 		}
 		return this.isDirty;
 	}
@@ -152,7 +127,7 @@ class EnergyItem extends Container {
 		return this.isDirty;
 	}
 
-	draw(renderer) {
+	draw(renderer, viewport) {
 //		console.log("EnergyBar.draw()");
 		// draw energy bar background
 		renderer.setGlobalAlpha(0.5);
@@ -182,7 +157,7 @@ class EnergyItem extends Container {
 		// draw energy bar text
 		renderer.setTint(this.energyText.tint, this.energyText.getOpacity());
 		this.energyText.draw(renderer, "Energy:", 6, 8);
-		super.draw(renderer);
+		super.draw(renderer, viewport);
 
 	}
 }
@@ -196,64 +171,67 @@ class WeaponsItem extends Container {
 	constructor(x, y, w, h) {
 		super(x,y, w, h);
 			
-		this.textField = new BitmapText(0,0, {						
+		this.bombsText = new BitmapText(8,28, {						
 			font: "12Outline",
 			textAlign: "left",
 			textBaseline: "top",
 			text: "99",
 		});
-		
-		this.relative = new Vector2d(x, y);
+
+		this.boltText = new BitmapText(40, 28, {
+			font: "12Outline",
+			textAlign: "left",
+			textBaseline: "top",
+			text: "99",
+		});
+
+		this.fireText = new BitmapText(72, 28, {
+			font: "12Outline",
+			textAlign: "left",
+			textBaseline: "top",
+			text: "99",
+		});
+
+		this.nebuText = new BitmapText(104, 28, {
+			font: "12Outline",
+			textAlign: "left",
+			textBaseline: "top",
+			text: "99",
+		});
+
+		this.protText = new BitmapText(136, 28, {
+			font: "12Outline",
+			textAlign: "left",
+			textBaseline: "top",
+			text: "99",
+		});
+
 		this.bombs = -1;
 		this.magicBolts = -1;
 		this.magicFirespins = -1;
 		this.magicNebulas = -1;
 		this.magicProtections = -1;
 	
-		this.bombImg = new BaseTerrainSprite(this.pos.x + 2, this.pos.y + 2, [BONUS_TILE.bomb0-1], true );
-		this.boltImg = new BaseTerrainSprite(this.pos.x + 2 + 32, this.pos.y + 2, [BONUS_TILE.magicBolt - 1], true);
-		this.fireImg = new BaseTerrainSprite(this.pos.x + 2 + 64, this.pos.y + 2, [BONUS_TILE.magicFirespin - 1], true);
-		this.nebuImg = new BaseTerrainSprite(this.pos.x + 2 + 96, this.pos.y + 2, [BONUS_TILE.magicNebula - 1], true);
-		this.protImg = new BaseTerrainSprite(this.pos.x + 2 + 128, this.pos.y + 2, [BONUS_TILE.magicProtectionCircle - 1], true);
-
-		this.images = [];
-		this.images.push(this.bombImg);
-		this.images.push(this.boltImg);
-		this.images.push(this.fireImg);
-		this.images.push(this.nebuImg);
-		this.images.push(this.protImg);
-
-		event.on(
-			event.CANVAS_ONRESIZE,
-			function (w, h) {
-				this.pos.set(w, h, 0).add(this.relative);
-			}.bind(this)
-		);
+		this.bombImg = new BaseTerrainSprite(2,       2, [BONUS_TILE.bomb0-1], true );
+		this.boltImg = new BaseTerrainSprite(2 + 32,  2, [BONUS_TILE.magicBolt - 1], true);
+		this.fireImg = new BaseTerrainSprite(2 + 64,  2, [BONUS_TILE.magicFirespin - 1], true);
+		this.nebuImg = new BaseTerrainSprite(2 + 96,  2, [BONUS_TILE.magicNebula - 1], true);
+		this.protImg = new BaseTerrainSprite(2 + 128, 2, [BONUS_TILE.magicProtectionCircle - 1], true);
+
+		this.addChild(this.bombImg);
+		this.addChild(this.boltImg);
+		this.addChild(this.fireImg);
+		this.addChild(this.nebuImg);
+		this.addChild(this.protImg);
+
+		this.addChild(this.bombsText);
+		this.addChild(this.boltText);
+		this.addChild(this.fireText);
+		this.addChild(this.nebuText);
+		this.addChild(this.protText);
 	}
 
 	draw(renderer, viewport) {
-		// draw those images
-//		console.log("WeaponsItem.draw()");
-		let x = this.pos.x + 2;
-		let y = this.pos.y + 2;
-		for( let i = 0; i < this.images.length; i++ ) {
-			this.images[i].draw(renderer)
-			renderer.drawImage(this.images[i].image, 
-				this.images[i].offset.x + this.images[i].current.offset.x,
-				this.images[i].offset.y + this.images[i].current.offset.y,
-				32, 32,
-				this.pos.x + 2 + (i * 32), 
-				this.pos.y + 2,
-				32, 32
-			);
-		}
-		// draw texts
-		renderer.setTint(this.textField.tint, this.textField.getOpacity());
-		this.textField.draw(renderer, this.bombs.toString().padStart(2, '0'), this.pos.x + 10, this.pos.y + 30);
-		this.textField.draw(renderer, this.magicBolts.toString().padStart(2, "0"), this.pos.x + 42, this.pos.y + 30);
-		this.textField.draw(renderer, this.magicFirespins.toString().padStart(2, "0"), this.pos.x + 74, this.pos.y + 30);
-		this.textField.draw(renderer, this.magicNebulas.toString().padStart(2, "0"), this.pos.x + 106, this.pos.y + 30);
-		this.textField.draw(renderer, this.magicProtections.toString().padStart(2, "0"), this.pos.x + 138, this.pos.y + 30);
 		super.draw(renderer, viewport);
 	}
 
@@ -266,26 +244,31 @@ class WeaponsItem extends Container {
 		super.update(dt);
 		if (this.bombs != GlobalGameState.bombs) {
 			this.bombs = GlobalGameState.bombs;
+			this.bombsText.setText(this.bombs.toString().padStart(2, "0"));
 			this.isDirty = true;				
 		}
 
 		if( this.magicBolts != GlobalGameState.magicBolts) {
 			this.magicBolts = GlobalGameState.magicBolts;
+			this.boltText.setText(this.magicBolts.toString().padStart(2, "0"));
 			this.isDirty = true;				
 		}
 
 		if( this.magicFirespins != GlobalGameState.magicFirespins ) {
 			this.magicFirespins = GlobalGameState.magicFirespins;
+			this.fireText.setText(this.magicFirespins.toString().padStart(2, "0"));
 			this.isDirty = true;				
 		}
 
 		if( this.magicNebulas != GlobalGameState.magicNebulas ) {
 			this.magicNebulas = GlobalGameState.magicNebulas;
+			this.nebuText.setText(this.magicNebulas.toString().padStart(2, "0"));
 			this.isDirty = true;				
 		}
 
 		if (this.magicProtections != GlobalGameState.magicProtections) {
-			this.magicProtections = GlobalGameState.magicProtections;;
+			this.magicProtections = GlobalGameState.magicProtections;
+			this.protText.setText(this.magicProtections.toString().padStart(2, "0"));
 			this.isDirty = true;
 		}
 
@@ -343,7 +326,7 @@ export default class HUDContainer extends Container {
 		this.backBox = new Rect(this.pos.x + 1, this.pos.y, game.viewport.width - 2, this.height);
 
 		// persistent across level change
-		//this.isPersistent = true;
+		this.isPersistent = true;
 		this.clipping = true;
 
 		// make sure we use screen coordinates
@@ -369,7 +352,7 @@ export default class HUDContainer extends Container {
 		this.pauseText.updateWhenPaused = true;
 
 		// add our child score object at the top left corner
-		this.addChild(new ScoreItem((game.viewport.width - 160 ) /2, this.pos.y +1));
+		this.addChild(new ScoreItem((game.viewport.width - 240 ) /2, this.pos.y +1));
 		this.addChild(new EnergyItem(5, this.pos.y + 1));
 		this.addChild(new WeaponsItem(game.viewport.width - 170, this.pos.y + 1, 168, 34));
 
@@ -381,7 +364,7 @@ export default class HUDContainer extends Container {
 		this.pauseText.setText("");
 	}
 
-	draw(renderer) {
+	draw(renderer, viewport) {
 		//console.log("HUD.draw()");
 		renderer.setGlobalAlpha(0.5);
 		renderer.setColor(this.backColor);
@@ -389,7 +372,7 @@ export default class HUDContainer extends Container {
 
 		renderer.setGlobalAlpha(1.0);
 		renderer.setColor(this.boxColor);
-		super.draw(renderer);
+		super.draw(renderer, viewport);
 	}
 
 	setPaused(paused, text = "") {
diff --git a/quarkus-server/src/main/resources/application.properties b/quarkus-server/src/main/resources/application.properties
index b3fa6bbe..13d49608 100644
--- a/quarkus-server/src/main/resources/application.properties
+++ b/quarkus-server/src/main/resources/application.properties
@@ -68,6 +68,4 @@ mp.messaging.incoming.incoming-enemy.buffer-size=128
 # own props
 application.version=v${quarkus.application.version}
 #quarkus.http.http2=true
-#%dev.quarkus.http.host=172.20.10.2
-#%dev.quarkus.http.host=192.168.2.198
-#%dev.quarkus.http.host=192.168.2.171
+%dev.quarkus.http.host=0.0.0.0

From 91b3b1b54ed18130a33c505804a5ad1c259025b4 Mon Sep 17 00:00:00 2001
From: Wanja Pernath <wpernath@redhat.com>
Date: Wed, 31 Aug 2022 14:20:13 +0200
Subject: [PATCH 04/16] #22 Lets test this version of the HUD

---
 melonjs-client/src/main/client/js/stage/hud/hud-container.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/melonjs-client/src/main/client/js/stage/hud/hud-container.js b/melonjs-client/src/main/client/js/stage/hud/hud-container.js
index fd73fc08..a50fde71 100644
--- a/melonjs-client/src/main/client/js/stage/hud/hud-container.js
+++ b/melonjs-client/src/main/client/js/stage/hud/hud-container.js
@@ -231,10 +231,6 @@ class WeaponsItem extends Container {
 		this.addChild(this.protText);
 	}
 
-	draw(renderer, viewport) {
-		super.draw(renderer, viewport);
-	}
-
 	/**
 	 *
 	 * @returns {boolean}

From 195f5ece6f6a7184f0cc2c684ce5e1506c517178 Mon Sep 17 00:00:00 2001
From: Wanja Pernath <wpernath@redhat.com>
Date: Thu, 1 Sep 2022 15:22:15 +0200
Subject: [PATCH 05/16] #27 using flex-width as scale method

---
 melonjs-client/package-lock.json        | 17 +++++++++++++++++
 melonjs-client/package.json             |  7 +++----
 melonjs-client/src/main/client/index.js | 12 ++++++++++--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/melonjs-client/package-lock.json b/melonjs-client/package-lock.json
index b2ffce61..877f4884 100644
--- a/melonjs-client/package-lock.json
+++ b/melonjs-client/package-lock.json
@@ -15,6 +15,7 @@
         "css-loader": "^6.7.1",
         "melonjs": "^13.3.0",
         "rollup": "^2.75.7",
+        "screenfull": "^6.0.2",
         "style-loader": "^3.3.1"
       },
       "devDependencies": {
@@ -7451,6 +7452,17 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/screenfull": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz",
+      "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -14552,6 +14564,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "screenfull": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz",
+      "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
diff --git a/melonjs-client/package.json b/melonjs-client/package.json
index 4ebdea0d..94ec4982 100644
--- a/melonjs-client/package.json
+++ b/melonjs-client/package.json
@@ -26,16 +26,15 @@
     "docker-build": "docker build -f src/main/docker/Dockerfile.nginx -t quay.io/wpernath/grumpycat-melonjs:latest .",
     "docker-push": "docker push quay.io/wpernath/grumpycat-melonjs -a"
   },
-
-  "browserslist": "defaults", 
-
-  "dependencies": {    
+  "browserslist": "defaults",
+  "dependencies": {
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "core-js": "^3.24.1",
     "css-loader": "^6.7.1",
     "melonjs": "^13.3.0",
     "rollup": "^2.75.7",
+    "screenfull": "^6.0.2",
     "style-loader": "^3.3.1"
   }
 }
diff --git a/melonjs-client/src/main/client/index.js b/melonjs-client/src/main/client/index.js
index adc5595e..b61db20a 100644
--- a/melonjs-client/src/main/client/index.js
+++ b/melonjs-client/src/main/client/index.js
@@ -42,7 +42,7 @@ import MultiplayerGameOverScreen from './js/stage/multiplayer/mp-game-over';
 import { MultiplayerMessage } from './js/util/multiplayer';
 
 import HowToPlayScreen from './js/stage/how-to-play'
-
+import screenfull from "screenfull";
 
 
 
@@ -52,7 +52,7 @@ device.onReady(() => {
     //video.
     if (!video.init(1024, 768, { 
         parent: "screen", 
-        scaleMethod: "fit", 
+        scaleMethod: "flex-width", 
         renderer: video.AUTO, 
         subPixel: false, 
         //doubleBuffering: true 
@@ -61,6 +61,7 @@ device.onReady(() => {
 		return;
 	}
 
+
     // initialize the debug plugin in development mode.
     if (process.env.NODE_ENV === 'development') {
         import('js/plugin/debug/debugPanel.js').then((debugPlugin) => {
@@ -72,6 +73,13 @@ device.onReady(() => {
     // Initialize the audio.
     audio.init("mp3,ogg");
 
+    if( device.isMobile ) {
+        if( screenfull.isEnabled ) {
+            console.log("INFO: Requesting full screen...");
+            screenfull.request();
+        }
+    }
+
     // allow cross-origin for image/texture loading
     let environment = CONFIG.environment;
     let baseURL;

From 89c85d8b14a7d2bd9503b49f87510dba35f97632 Mon Sep 17 00:00:00 2001
From: Wanja Pernath <wpernath@redhat.com>
Date: Thu, 1 Sep 2022 15:27:39 +0200
Subject: [PATCH 06/16] #15 Life demo is available and README updated

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index 29d2d9ad..8dec8cd9 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,13 @@ There are different bonus tiles to be collected.
   - green: +3 magic protection circles
   - violet: +3 magic nebula
 
+### Life demo
+There is a demo of this game running [here](http://cat-client-quarkus-grumpycat.apps.cat.rhepds.com/). 
+Please note, that I am using this server also for workshops etc. So the system might not be as stable as expected. But you can give it a try.
+
+If you have any suggestestions or want to contribute, please open an [issue here](https://github.com/wpernath/quarkus-grumpycat/issues). Thank you!
+
+
 ### Game Graphics
 
 ![the game](docs/game-title.png)

From 3947f12301a6e94627e3e8a63dc396483b695856 Mon Sep 17 00:00:00 2001
From: Wanja Pernath <wpernath@redhat.com>
Date: Thu, 1 Sep 2022 15:30:56 +0200
Subject: [PATCH 07/16] preparing a 0.6.3 release

---
 melonjs-client/package-lock.json | 4 ++--
 melonjs-client/package.json      | 2 +-
 melonjs-client/pom.xml           | 2 +-
 pom.xml                          | 2 +-
 quarkus-server/pom.xml           | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/melonjs-client/package-lock.json b/melonjs-client/package-lock.json
index 877f4884..a1b766a0 100644
--- a/melonjs-client/package-lock.json
+++ b/melonjs-client/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "grumpycat-melonjs",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "grumpycat-melonjs",
-      "version": "0.6.2",
+      "version": "0.6.3",
       "license": "GPL",
       "dependencies": {
         "@rollup/plugin-babel": "^5.3.1",
diff --git a/melonjs-client/package.json b/melonjs-client/package.json
index 94ec4982..353acc35 100644
--- a/melonjs-client/package.json
+++ b/melonjs-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "grumpycat-melonjs",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "main": "src/main/client/index.js",
   "author": "Wanja Pernath",
   "license": "GPL",
diff --git a/melonjs-client/pom.xml b/melonjs-client/pom.xml
index 1d4e55fd..f8a80aa3 100644
--- a/melonjs-client/pom.xml
+++ b/melonjs-client/pom.xml
@@ -7,7 +7,7 @@
   <parent>
     <groupId>org.wanja.grumpycat</groupId>
     <artifactId>umbrella</artifactId>
-    <version>0.6.2</version>
+    <version>0.6.3</version>
     <relativePath>../</relativePath>
   </parent>
 
diff --git a/pom.xml b/pom.xml
index 61d90a81..35697a5f 100644
--- a/pom.xml
+++ b/pom.xml
@@ -3,7 +3,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>org.wanja.grumpycat</groupId>
     <artifactId>umbrella</artifactId>
-    <version>0.6.2</version>
+    <version>0.6.3</version>
     <packaging>pom</packaging>
 
     <modules>
diff --git a/quarkus-server/pom.xml b/quarkus-server/pom.xml
index 1412e798..f4167261 100644
--- a/quarkus-server/pom.xml
+++ b/quarkus-server/pom.xml
@@ -5,7 +5,7 @@
   <parent>
     <groupId>org.wanja.grumpycat</groupId>
     <artifactId>umbrella</artifactId>
-    <version>0.6.2</version>
+    <version>0.6.3</version>
     <relativePath>../</relativePath>
   </parent> 
 

From e8807c425394562956a9f14468d7859eca017d54 Mon Sep 17 00:00:00 2001
From: Wanja Pernath <wpernath@redhat.com>
Date: Thu, 1 Sep 2022 15:33:24 +0200
Subject: [PATCH 08/16] preparing a 0.6.3 release

---
 docker-compose.yaml                               | 4 ++--
 kubernetes-config/overlays/dev/kustomization.yaml | 4 ++--
 kubernetes-config/overlays/tom/kustomization.yaml | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docker-compose.yaml b/docker-compose.yaml
index 3e965a30..fda75a5f 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -50,7 +50,7 @@ services:
       - catsdb
       - zookeeper
       - kafka
-    image: quay.io/wpernath/quarkus-grumpycat:v0.6.2
+    image: quay.io/wpernath/quarkus-grumpycat:v0.6.3
     ports:
       - "9001:8080"
     restart: always
@@ -65,7 +65,7 @@ services:
   cat-client: 
     depends_on:
       - cat-server
-    image: quay.io/wpernath/grumpycat-melonjs:v0.6.2
+    image: quay.io/wpernath/grumpycat-melonjs:v0.6.3
     ports:
       - "8086:8088"
     restart: always
diff --git a/kubernetes-config/overlays/dev/kustomization.yaml b/kubernetes-config/overlays/dev/kustomization.yaml
index 59927518..5371325e 100644
--- a/kubernetes-config/overlays/dev/kustomization.yaml
+++ b/kubernetes-config/overlays/dev/kustomization.yaml
@@ -8,10 +8,10 @@ resources:
 images:
 - name: quay.io/wpernath/grumpycat-melonjs:latest
   newName: quay.io/wpernath/grumpycat-melonjs
-  newTag: v0.6.1
+  newTag: v0.6.3
 - name: quay.io/wpernath/quarkus-grumpycat:latest
   newName: quay.io/wpernath/quarkus-grumpycat
-  newTag: v0.6.1
+  newTag: v0.6.3
 
 # generate a configmap 
 configMapGenerator:
diff --git a/kubernetes-config/overlays/tom/kustomization.yaml b/kubernetes-config/overlays/tom/kustomization.yaml
index 19cc62fa..c4446a03 100644
--- a/kubernetes-config/overlays/tom/kustomization.yaml
+++ b/kubernetes-config/overlays/tom/kustomization.yaml
@@ -8,10 +8,10 @@ resources:
 images:
 - name: quay.io/wpernath/grumpycat-melonjs:latest
   newName: quay.io/wpernath/grumpycat-melonjs
-  newTag: v0.6.2
+  newTag: v0.6.3
 - name: quay.io/wpernath/quarkus-grumpycat:latest
   newName: quay.io/wpernath/quarkus-grumpycat
-  newTag: v0.6.2
+  newTag: v0.6.3
 
 # generate a configmap 
 configMapGenerator:

From 31c60d2758c4c89a56dcdf85d9a622f78847abfb Mon Sep 17 00:00:00 2001
From: Wanja Pernath <wpernath@redhat.com>
Date: Fri, 2 Sep 2022 07:36:11 +0200
Subject: [PATCH 09/16] #27 Choose Level in SP fixed layout

---
 melonjs-client/src/main/client/js/stage/choose-level.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/melonjs-client/src/main/client/js/stage/choose-level.js b/melonjs-client/src/main/client/js/stage/choose-level.js
index 5e8d69f7..22cfe3ff 100644
--- a/melonjs-client/src/main/client/js/stage/choose-level.js
+++ b/melonjs-client/src/main/client/js/stage/choose-level.js
@@ -151,8 +151,9 @@ class ChooserComponent extends Container {
         this.addChild(this.next);
         
 		LevelManager.getInstance().reset();
+		let x = (game.viewport.width - (game.viewport.width - 280)) / 2;
         for(let levelIndex = 0; levelIndex < LevelManager.getInstance().levelCount(); levelIndex++ ) {
-            let entry = new ListEntry(levelIndex, 130, 220);
+            let entry = new ListEntry(levelIndex, x, 220);
             entry.setCallbackOnClick(this.useSelectedGame.bind(this));
             entry.setOpacity(0.8);
             this.listComponents.push(entry);            

From d9ab3e99e1f860bf7bda770bf1590bdfd9cc0f9f Mon Sep 17 00:00:00 2001
From: wpernath <w.pernath@gmx.de>
Date: Fri, 2 Sep 2022 08:15:59 +0200
Subject: [PATCH 10/16] #27: fixed title image layout on each state screen

---
 melonjs-client/src/main/client/config.js          | 10 +++++-----
 .../client/js/stage/multiplayer/mp-game-over.js   | 10 +---------
 .../client/js/stage/multiplayer/mp-host-game.js   | 11 +----------
 .../client/js/stage/multiplayer/mp-join-game.js   | 11 +----------
 .../main/client/js/stage/multiplayer/mp-lobby.js  | 10 +---------
 .../main/client/js/stage/multiplayer/mp-menu.js   |  8 +-------
 .../src/main/client/js/stage/state_background.js  | 15 ++++++++++++++-
 .../src/main/client/js/stage/title-back.js        |  4 +++-
 8 files changed, 27 insertions(+), 52 deletions(-)

diff --git a/melonjs-client/src/main/client/config.js b/melonjs-client/src/main/client/config.js
index a82bd492..be2c77c0 100644
--- 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
index af33aa88..a6dcbf72 100644
--- 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
index 8f4e75c5..ad5be3c8 100644
--- 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
index 542e230c..86e6e842 100644
--- 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
index 46307235..e1efc11d 100644
--- 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
index d8018591..70810699 100644
--- 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
index 2213e563..5609d333 100644
--- 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,6 +43,7 @@ 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",
@@ -49,6 +51,17 @@ export class StateBackground extends Container {
 			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
index 42a369a8..08f52a48 100644
--- 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);

From 83dd83f5d959b0806fe90daf5902796e92a0ef94 Mon Sep 17 00:00:00 2001
From: wpernath <w.pernath@gmx.de>
Date: Fri, 2 Sep 2022 10:07:55 +0200
Subject: [PATCH 11/16] #27: starting with get ready screen

---
 .../src/main/client/js/stage/get-ready.js     | 12 +++++--
 .../src/main/client/js/util/base-container.js | 32 +++++++++++++++++++
 2 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 melonjs-client/src/main/client/js/util/base-container.js

diff --git a/melonjs-client/src/main/client/js/stage/get-ready.js b/melonjs-client/src/main/client/js/stage/get-ready.js
index f82adc42..3a7158da 100644
--- a/melonjs-client/src/main/client/js/stage/get-ready.js
+++ b/melonjs-client/src/main/client/js/stage/get-ready.js
@@ -8,9 +8,10 @@ import NetworkManager from "../util/network";
 import PlayerEntity from "../renderables/player";
 import { my_state, PLAYER_COLORS } from "../util/constants";
 import { StateBackground } from "./state_background";
+import { BaseContainer } from "../util/base-container";
 
 
-class LevelDescription extends Container {
+class LevelDescription extends BaseContainer {
 	constructor(x,y,width,height) {
 		super(x,y,width,height);
 		this.setOpacity(1);
@@ -33,9 +34,9 @@ class LevelDescription extends Container {
 			offScreenCanvas: false,
 		});
 
+		console.log(this.levelDescr.measureText());
 		this.addChild(this.levelName);
 		this.addChild(this.levelDescr);
-
 	}
 }
 class GetReadyBack extends Container {
@@ -54,7 +55,12 @@ class GetReadyBack extends Container {
 		this.name = "TitleBack";
 
 		this.addChild(new StateBackground("GET READY"));
-		this.addChild(new LevelDescription(190, game.viewport.height - 400), game.viewport.width - 400, game.viewport.height - 400);
+
+		let w = 644;
+		let h = 250;
+		let x = (game.viewport.width - w)/2;
+		let y = (game.viewport.height - h)/2;
+		this.addChild(new LevelDescription(x, y, w, h));
 
 		let player1 = new PlayerEntity(13, 9, true);
 		player1.tint.copy(PLAYER_COLORS[0]);
diff --git a/melonjs-client/src/main/client/js/util/base-container.js b/melonjs-client/src/main/client/js/util/base-container.js
new file mode 100644
index 00000000..8aa6c382
--- /dev/null
+++ b/melonjs-client/src/main/client/js/util/base-container.js
@@ -0,0 +1,32 @@
+import { Container, RoundRect } from "melonjs";
+
+/**
+ * A simple container which fills with transparent background and a 
+ * Border
+ */
+export class BaseContainer extends Container {
+    /**
+     * 
+     * @param {number} x xpos of the container
+     * @param {number} y ypos of the container
+     * @param {number} w width of the container
+     * @param {number} h height of the container
+     * @param {*} options 
+     */
+	constructor(x, y, w, h, options) {
+		super(x, y, w, h);
+        this.clipping = true;
+
+		this.border = new RoundRect(x, y, w, h);
+	}
+
+	draw(renderer, viewport) {
+		renderer.setGlobalAlpha(0.3);
+		renderer.setColor("#008800");
+		renderer.fill(this.border);
+		renderer.setGlobalAlpha(1);
+		renderer.setColor("#000000");
+		renderer.stroke(this.border);
+		super.draw(renderer, viewport);
+	}
+}

From a8202a3caa051a6c32b8baccdf00e6cf3d28aa7d Mon Sep 17 00:00:00 2001
From: Wanja Pernath <wpernath@redhat.com>
Date: Fri, 2 Sep 2022 11:26:39 +0200
Subject: [PATCH 12/16] #27: Created a global base container, fixed get ready
 stage

---
 melonjs-client/src/main/client/config.js      |  4 +-
 .../src/main/client/js/stage/get-ready.js     | 71 +++++--------------
 .../src/main/client/js/stage/how-to-play.js   | 33 ++-------
 .../src/main/client/js/util/base-container.js | 53 ++++++++++----
 4 files changed, 67 insertions(+), 94 deletions(-)

diff --git a/melonjs-client/src/main/client/config.js b/melonjs-client/src/main/client/config.js
index be2c77c0..cc7275cb 100644
--- a/melonjs-client/src/main/client/config.js
+++ b/melonjs-client/src/main/client/config.js
@@ -11,8 +11,8 @@ const CONFIG = {
 		//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.171: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/get-ready.js b/melonjs-client/src/main/client/js/stage/get-ready.js
index 3a7158da..4cc4ea84 100644
--- a/melonjs-client/src/main/client/js/stage/get-ready.js
+++ b/melonjs-client/src/main/client/js/stage/get-ready.js
@@ -1,44 +1,30 @@
-import { Container, Sprite, BitmapText, game,loader, Vector2d, Stage, input,event, state, ParticleEmitter, Color, pool } from "melonjs/dist/melonjs.module.js";
-//import { Math } from "melonjs/dist/melonjs.module.js";
-import CONFIG from "../../config";
-import GlobalGameState from "../util/global-game-state";
-import SpiderEnemy from "../renderables/spider-enemy";
+import { Container, BitmapText, game,loader, Stage, input,event, state, ParticleEmitter } from "melonjs/dist/melonjs.module.js";
 import { LevelManager } from "../util/level";
 import NetworkManager from "../util/network";
-import PlayerEntity from "../renderables/player";
-import { my_state, PLAYER_COLORS } from "../util/constants";
+import { my_state } from "../util/constants";
 import { StateBackground } from "./state_background";
 import { BaseContainer } from "../util/base-container";
 
 
 class LevelDescription extends BaseContainer {
 	constructor(x,y,width,height) {
-		super(x,y,width,height);
-		this.setOpacity(1);
-		this.levelName = new BitmapText(4, 8, {
-			font: "24Outline",
-			size: "1",
-			fillStyle: "white",
-			textAlign: "left",
-			text: LevelManager.getInstance().getCurrentLevel().longName,
-			offScreenCanvas: false,
-		});
+		super(x,y,width,height, {
+			titleText: LevelManager.getInstance().getCurrentLevel().longName,
+			titleColor: "#ff1010"
+		});		
 
-		this.levelDescr = new BitmapText(4, 52, {
+		this.levelDescr = new BitmapText(this.contentContainer.pos.x,this.contentContainer.pos.y, {
 			font: "18Outline",
-			size: "1",
 			lineHeight: 1.5,
 			fillStyle: "white",
 			textAlign: "left",
+			wordWrapWidth: this.contentContainer.width,
 			text: LevelManager.getInstance().getCurrentLevel().description,
-			offScreenCanvas: false,
 		});
-
-		console.log(this.levelDescr.measureText());
-		this.addChild(this.levelName);
 		this.addChild(this.levelDescr);
 	}
 }
+
 class GetReadyBack extends Container {
 	constructor() {
 		super();
@@ -57,32 +43,10 @@ class GetReadyBack extends Container {
 		this.addChild(new StateBackground("GET READY"));
 
 		let w = 644;
-		let h = 250;
+		let h = 300;
 		let x = (game.viewport.width - w)/2;
-		let y = (game.viewport.height - h)/2;
+		let y = (game.viewport.height - 350);
 		this.addChild(new LevelDescription(x, y, w, h));
-
-		let player1 = new PlayerEntity(13, 9, true);
-		player1.tint.copy(PLAYER_COLORS[0]);
-		player1.name = "Player 1";
-		this.addChild(player1);
-
-		let player2 = new PlayerEntity(17, 9, true);
-		player2.tint=PLAYER_COLORS[1];
-		player2.name = "Player 2";
-		player2.flipX(true);		
-		this.addChild(player2);
-
-		let player3 = new PlayerEntity(15, 7, true);
-		player3.tint = PLAYER_COLORS[2];
-		player3.name = "Player 3";
-		this.addChild(player3);
-
-		let player4 = new PlayerEntity(15, 11, true);
-		player4.tint= PLAYER_COLORS[3];
-		player4.name = "Player 4";
-		this.addChild(player4);
-
 	}	
 }
 
@@ -97,15 +61,16 @@ export default class GetReadyScreen extends Stage {
 		this.back = new GetReadyBack();
 		game.world.addChild(this.back);
 
-		this.emitter = new ParticleEmitter(game.viewport.width/2, game.viewport.height / 2 + 100, {			
-			tint: "#1010ff",
-			width: 64,
-			height: 64,
+		this.emitter = new ParticleEmitter(game.viewport.width/2, game.viewport.height / 2-30, {			
+			image: loader.getImage("player"),
+			//tint: "#1010ff",
+			width: 32,
+			height: 32,
 			totalParticles: 30,
-			gravity: 0.02,
+			gravity: 0.03,
 			angle: 0,
             angleVariation: 6.283185307179586,			
-			speed: 2,
+			speed: 3,
 			//wind: -1,
 		} );
 		game.world.addChild(this.emitter);
diff --git a/melonjs-client/src/main/client/js/stage/how-to-play.js b/melonjs-client/src/main/client/js/stage/how-to-play.js
index cf676452..d2c0f933 100644
--- a/melonjs-client/src/main/client/js/stage/how-to-play.js
+++ b/melonjs-client/src/main/client/js/stage/how-to-play.js
@@ -4,36 +4,15 @@ import { StateBackground } from "./state_background";
 import BaseTextButton from "../util/base-text-button";
 import BaseTerrainSprite from "../renderables/terrain/terrain-sprite";
 import { BONUS_TILE } from "../util/constants";
+import { BaseContainer } from "../util/base-container";
 
-class BaseHelpComponent extends Container {
+class BaseHelpComponent extends BaseContainer {
 	constructor(x, y, w, h, title) {
-		super(x, y, w, h);
-
-		this.header = new BitmapText(4, 4, {
-			font: "18Outline",
-			fillStyle: "#ff0000",
-			textAlign: "left",
-			text: title,
+		super(x, y, w, h, {
+			titleFont: "18Outline", 
+			titleColor: "#ff0000",
+			titleText: title
 		});
-
-		this.border = new RoundRect(x, y, w, h);
-		this.divider = new Rect(x + 5, y + 30, w - 10, 2);
-
-		this.header.pos.x = (w - this.header.measureText().width) / 2;
-		this.addChild(this.header);
-	}
-
-	draw(renderer, viewport) {
-		renderer.setGlobalAlpha(0.3);
-		renderer.setColor("#008800");
-		renderer.fill(this.border);
-		renderer.setGlobalAlpha(1);
-		renderer.setColor("#000000");
-		renderer.stroke(this.divider);
-		renderer.stroke(this.border);
-		renderer.setColor("#ffffff");
-		renderer.fill(this.divider);
-		super.draw(renderer, viewport);
 	}
 }
 class KeyHelpComponent extends BaseHelpComponent {
diff --git a/melonjs-client/src/main/client/js/util/base-container.js b/melonjs-client/src/main/client/js/util/base-container.js
index 8aa6c382..7872293b 100644
--- a/melonjs-client/src/main/client/js/util/base-container.js
+++ b/melonjs-client/src/main/client/js/util/base-container.js
@@ -1,32 +1,61 @@
-import { Container, RoundRect } from "melonjs";
+import { Color, Container, RoundRect, Rect, BitmapText, Vector2d } from "melonjs";
 
 /**
  * A simple container which fills with transparent background and a 
  * Border
  */
 export class BaseContainer extends Container {
-    /**
-     * 
-     * @param {number} x xpos of the container
-     * @param {number} y ypos of the container
-     * @param {number} w width of the container
-     * @param {number} h height of the container
-     * @param {*} options 
-     */
+	/**
+	 *
+	 * @param {number} x xpos of the container
+	 * @param {number} y ypos of the container
+	 * @param {number} w width of the 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 {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 {string} [options.dividerColor] color of the divider between headline and content (white)
+	 *
+	 */
 	constructor(x, y, w, h, options) {
 		super(x, y, w, h);
-        this.clipping = true;
+		this.options = options;
+		this.options.titleFont = options.titleFont || "24Outline";
+		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.dividerColor = options.dividerColor || "#008800";
+		this.clipping = true;
 
+		this.header = new BitmapText(4, 6, {
+			font: this.options.titleFont,
+			fillStyle: this.options.titleColor,
+			textAlign: "left",
+			text: this.options.titleText,
+		});
+
+		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));
 	}
 
 	draw(renderer, viewport) {
 		renderer.setGlobalAlpha(0.3);
-		renderer.setColor("#008800");
+		renderer.setColor(this.options.backgroundColor);
 		renderer.fill(this.border);
 		renderer.setGlobalAlpha(1);
-		renderer.setColor("#000000");
+		renderer.setColor(this.options.backgroundBorderColor);
+		renderer.stroke(this.divider);
 		renderer.stroke(this.border);
+		renderer.setColor(this.options.dividerColor);
+		renderer.fill(this.divider);
 		super.draw(renderer, viewport);
 	}
 }

From 74f3dd486c93689354db07e03354b1d5543ba8ee Mon Sep 17 00:00:00 2001
From: Wanja Pernath <wpernath@redhat.com>
Date: Fri, 2 Sep 2022 12:01:16 +0200
Subject: [PATCH 13/16] #27: Fixed Game Over stage

---
 .../src/main/client/js/stage/game-over.js     | 74 ++++++++++---------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/melonjs-client/src/main/client/js/stage/game-over.js b/melonjs-client/src/main/client/js/stage/game-over.js
index 396622ac..c61b8cf2 100644
--- a/melonjs-client/src/main/client/js/stage/game-over.js
+++ b/melonjs-client/src/main/client/js/stage/game-over.js
@@ -1,17 +1,14 @@
-import { Stage, game, input, Sprite, Color, loader, event, state, Container,Vector2d,BitmapText, ParticleEmitter } from "melonjs/dist/melonjs.module.js";
+import { Stage, game, input, Sprite, loader, event, state, Container,Vector2d,BitmapText, ParticleEmitter } from "melonjs/dist/melonjs.module.js";
 import { LevelManager } from "../util/level";
 import GlobalGameState from "../util/global-game-state";
 import NetworkManager from "../util/network";
 import { StateBackground } from "./state_background";
-class LevelStatistics extends Container {
+import { BaseContainer } from "../util/base-container";
+class LevelStatistics extends BaseContainer {
 	constructor(x, y, width, height, isGameOver=true) {
-		super(x, y, width, height);
-		this.setOpacity(1);
-		this.levelName = new BitmapText(14, 8, {
-			font: "24Outline",
-			size: "1",
-			textAlign: "left",
-			text: GlobalGameState.globalServerGame.player.name + " - Statistics",
+		super(x, y, width, height, {
+			titleText: GlobalGameState.globalServerGame.player.name + " - Statistics",
+			titleColor: "#ffffff",			
 		});
 
 
@@ -47,32 +44,25 @@ class LevelStatistics extends Container {
 			GlobalGameState.stunnedGolems + "\n"+
  			"";
 
-		this.levelDescr = new BitmapText(14, 40, {
+		this.levelDescr = new BitmapText(14, this.contentContainer.pos.y, {
 			font: "18Outline",
 			textAlign: "left",
 			text: textL,
 		});
 
-		this.levelDescr2 = new BitmapText(324, 40, {
+		this.levelDescr2 = new BitmapText(324, this.contentContainer.pos.y, {
 			font: "18Outline",
 			textAlign: "right",
 			text: textR,
 		});
 
-		this.sensaSprite = new Sprite(600, 50, {
-			image: isGameOver ? "sensa_nee" : "sensa_jaa"
-		});
-		this.sensaSprite.setOpacity(0.8);
-
-		this.addChild(this.levelName,1);
 		this.addChild(this.levelDescr,1);
-		this.addChild(this.levelDescr2,1);
-		this.addChild(this.sensaSprite,0);
+		this.addChild(this.levelDescr2,1);		
 	}
 }
 class GameOverBack extends Container {
 	constructor(isGameOver=true) {
-		super();
+		super(0, 0);
 
 		// make sure we use screen coordinates
 		this.floating = true;
@@ -80,22 +70,36 @@ class GameOverBack extends Container {
 		// always on toppest
 		this.z = 10;
 
-		this.setOpacity(1.0);
-
 		// give a name
 		this.name = "TitleBack";
 
-		this.addChild(new StateBackground(isGameOver ? "GAME OVER!" : "CONGRATS! You won!", false));
+		// dog NOOOOOOOO 
+		this.sensaSprite = new Sprite(600, game.viewport.height - 300, {
+			image: loader.getImage(isGameOver ? "sensa_nee" : "sensa_jaa"),
+			anchorPoint: new Vector2d(0,0),
+		});
+		this.sensaSprite.setOpacity(0.8);
+
+		let w = 460;
+		let h = 300;
+		let x = (game.viewport.width - w) / 2;
+		let y = game.viewport.height - 350;
+
+		this.addChild(new StateBackground(isGameOver ? "You LOOOOOSE!" : "CONGRATS! You won!", false), 0);
 		this.addChild(
 			new LevelStatistics(
-				190, 
-				game.viewport.height - 400, 
-				game.viewport.width - 400, 
-				game.viewport.height - 400, 
+				x, 
+				y, 
+				w, 
+				h, 
 				isGameOver
 			), 
 			6
 		);
+
+		this.sensaSprite.pos.x = game.viewport.width - this.sensaSprite.width + 50;
+		this.sensaSprite.pos.y = game.viewport.height - this.sensaSprite.height ;
+		this.addChild(this.sensaSprite, 1);		
 	}
 }
 
@@ -114,17 +118,17 @@ export default class GameOverScreen extends Stage {
 		this.back = new GameOverBack(this.isGameOver);
 		game.world.addChild(this.back);
 
-		this.emitter = new ParticleEmitter(game.viewport.width / 2, game.viewport.height / 2 + 100, {
-			//image: loader.getImage("player"),
-			tint: new Color(255, 0, 0),
-			width: 64,
-			height: 64,
-			totalParticles: 30,
-			gravity: 0.02,
+		this.emitter = new ParticleEmitter(game.viewport.width / 2, game.viewport.height / 2 - 50, {
+			image: loader.getImage("cat_left"),
+			tint: "#ffffff33",
+			width: 32,
+			height: 32,
+			totalParticles: 34,
+			gravity: 0.04,
 			angle: 0,
 			angleVariation: 6.283185307179586,
 			speed: 2,
-			wind: 0.25,
+			wind: 0.15,
 		});
 		game.world.addChild(this.emitter);
 		this.emitter.streamParticles();

From 324abace76346a43eace17699133c3f3a886c2a1 Mon Sep 17 00:00:00 2001
From: wpernath <w.pernath@gmx.de>
Date: Sat, 3 Sep 2022 01:16:14 +0200
Subject: [PATCH 14/16] #30: Fixed bug and implemented FR

---
 melonjs-client/src/main/client/config.js      |   4 +-
 .../js/stage/multiplayer/mp-choose-level.js   |   2 +-
 .../js/stage/multiplayer/mp-game-over.js      | 104 ++++++++++--------
 .../js/stage/multiplayer/mp-host-game.js      |   2 +-
 .../src/main/client/js/util/multiplayer.js    |  25 ++++-
 .../org/wanja/fatcat/MultiPlayerResource.java |  39 +++++++
 .../org/wanja/fatcat/model/MultiPlayer.java   |   6 +
 .../wanja/fatcat/model/MultiPlayerGame.java   |   8 ++
 8 files changed, 142 insertions(+), 48 deletions(-)

diff --git a/melonjs-client/src/main/client/config.js b/melonjs-client/src/main/client/config.js
index cc7275cb..be2c77c0 100644
--- a/melonjs-client/src/main/client/config.js
+++ b/melonjs-client/src/main/client/config.js
@@ -11,8 +11,8 @@ const CONFIG = {
 		//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.171: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-choose-level.js b/melonjs-client/src/main/client/js/stage/multiplayer/mp-choose-level.js
index cedd482b..dd35177a 100644
--- 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
@@ -194,7 +194,7 @@ export class ChooserComponent extends Container {
 
 	useSelectedGame(levelIndex) {
         if( !this.levelChosen ) {
-            console.log("  selected level = " + levelIndex );
+            console.log("  selected level = " + this.levelIndex );
 			MultiplayerManager.get().useSelectedLevel(this.levelIndex);            
             this.levelChosen = true;
         }
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
index a6dcbf72..a5048ad9 100644
--- 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
@@ -11,7 +11,6 @@ class PlayerStatistics extends Container {
 		this.player = player;
 		this.border = new RoundRect(x, y, width, height);
 		this.divider = new Rect(x+4, y+42, width-8, 2);
-		this.setOpacity(1);
 		this.playerEntity = new PlayerEntity(0, 0, true);
 		this.playerEntity.tint.copy(tint);
 
@@ -106,8 +105,6 @@ class PlayerStatistics extends Container {
 		renderer.stroke(this.border);
 		renderer.setColor("#ffffff");
 		renderer.fill(this.divider);
-		//renderer.setTint(this.font.tint, this.font.getOpacity());
-
 		super.draw(renderer, viewport);
 	}
 }
@@ -115,7 +112,7 @@ class GameOverBack extends Container {
 	constructor(theGame) {
 		super();
 		this.theGame = theGame;
-		this.players = this.playersFromGame(theGame);
+		this.players = GameOverBack.playersFromGame(theGame);
 		this.isGameOver = true;
 
 		// where to position each box of statistics
@@ -127,7 +124,7 @@ class GameOverBack extends Container {
 		];
 
 		for( let i = 0; i < this.players.length; i++ ) {
-			if( this.players[i].hasWon ) {
+			if( this.players[i] !== null && this.players[i].hasWon ) {
 				if( MultiplayerManager.get().multiplayerPlayer.id === this.players[i].id ) {
 
 					// we are the winner
@@ -142,8 +139,6 @@ class GameOverBack extends Container {
 		// always on toppest
 		this.z = 10;
 
-		this.setOpacity(1.0);
-
 		// give a name
 		this.name = "TitleBack";
 
@@ -176,7 +171,7 @@ class GameOverBack extends Container {
 	 * @param {*} theGame
 	 * @returns array of player
 	 */
-	playersFromGame(theGame) {
+	static playersFromGame(theGame) {
 		let players = [];
 		players[0] = theGame.player1 !== undefined ? theGame.player1 : null;
 		players[1] = theGame.player2 !== undefined ? theGame.player2 : null;
@@ -191,8 +186,8 @@ class GameOverBack extends Container {
 				score += p.potionsLeft > 0 ? (p.potionsLeft * 5) : 0;
 				score += p.bombsLeft > 0 ? (p.bombsLeft * 5) : 0;
 
-				p.internalScore = score;
-				p.hasWon = false;				
+				players[i].internalScore = score;
+				players[i].hasWon = false;				
 			}
 		}
 
@@ -228,43 +223,66 @@ export default class MultiplayerGameOverScreen extends Stage {
 	onResetEvent() {
 		console.log("GameOver.OnEnter()");
 
-		MultiplayerManager.get()
-			.refreshGameData()
-			.then((theGame) => {
-				this.theGame = theGame;
+		if( MultiplayerManager.get().weAreHost ) {		
+			console.log("We are host, so we are sending updated data to the host and finishing this game");	
+			MultiplayerManager.get()
+				.refreshGameData()
+				.then((theGame) => {
+				
+				GameOverBack.playersFromGame(theGame);
 
-				this.back = new GameOverBack(theGame);
-				game.world.addChild(this.back);
-
-				this.emitter = new ParticleEmitter(game.viewport.width / 2, game.viewport.height / 2 + 100, {
-					//image: loader.getImage("player"),
-					tint: new Color(255, 0, 0),
-					width: 64,
-					height: 64,
-					totalParticles: 30,
-					gravity: 0.02,
-					angle: 0,
-					angleVariation: 6.283185307179586,
-					speed: 2,
-					wind: 0.25,
+				MultiplayerManager.get()
+					.finishGame(theGame)
+					.then((theGame) => {
+						this.theGame = theGame;
+						this.buildUI(theGame);
 				});
-				game.world.addChild(this.emitter);
-				this.emitter.streamParticles();
+			});
+		}
+		else {
+			console.log("We are no host, so we are NOT sending updated data to the host and finishing this game");
+			MultiplayerManager.get()
+				.refreshGameData()
+				.then((theGame) => {
+					this.theGame = theGame;
+					this.buildUI(theGame);		
+			});
+		}
+	}
 
-				// change to play state on press Enter or click/tap
-				input.bindKey(input.KEY.ENTER, "enter", true);
-				input.bindPointer(input.pointer.LEFT, input.KEY.ENTER);
+	buildUI(theGame) {
+		this.back = new GameOverBack(theGame);
+		game.world.addChild(this.back);
 
-				this.handler = event.on(event.KEYUP, function (action, keyCode, edge) {
-					if (!state.isCurrent(my_state.MULTIPLAYER_GAME_OVER)) return;
-					console.log("GameOver.EventHandler()");
-					if (action === "enter" || action === "bomb") {
-						state.change(my_state.MULTIPLAYER_MENU);
-					}
-					if (action === "exit") {
-						state.change(my_state.MULTIPLAYER_MENU);
-					}
-				});		
+		this.emitter = new ParticleEmitter(game.viewport.width / 2, game.viewport.height / 2 + 100, {
+			//image: loader.getImage("player"),
+			tint: new Color(255, 0, 0),
+			width: 64,
+			height: 64,
+			totalParticles: 30,
+			gravity: 0.02,
+			angle: 0,
+			angleVariation: 6.283185307179586,
+			speed: 2,
+			wind: 0.25,
+		});
+		game.world.addChild(this.emitter);
+		this.emitter.streamParticles();
+
+		// change to play state on press Enter or click/tap
+		input.bindKey(input.KEY.ENTER, "enter", true);
+		input.bindPointer(input.pointer.LEFT, input.KEY.ENTER);
+
+		this.handler = event.on(event.KEYUP, function (action, keyCode, edge) {
+			if (!state.isCurrent(my_state.MULTIPLAYER_GAME_OVER))
+				return;
+			console.log("GameOver.EventHandler()");
+			if (action === "enter" || action === "bomb") {
+				state.change(my_state.MULTIPLAYER_MENU);
+			}
+			if (action === "exit") {
+				state.change(my_state.MULTIPLAYER_MENU);
+			}
 		});
 	}
 
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
index ad5be3c8..e1577d6a 100644
--- 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
@@ -29,7 +29,7 @@ class StartGameButton extends BaseTextButton {
 	}
 
 	onClick() {
-		MultiplayerManager.get().createGame(0).then( (game) => {
+		MultiplayerManager.get().createGame().then( (game) => {
 			state.change(my_state.MULTIPLAYER_LOBBY);
 		});		
 	}
diff --git a/melonjs-client/src/main/client/js/util/multiplayer.js b/melonjs-client/src/main/client/js/util/multiplayer.js
index facf3470..939a8322 100644
--- a/melonjs-client/src/main/client/js/util/multiplayer.js
+++ b/melonjs-client/src/main/client/js/util/multiplayer.js
@@ -110,7 +110,8 @@ export class MultiplayerMessage {
 			this.closeGameURL = baseURL + "mp-game/close/"; // append gameId/playerId
 			this.getGameURL = baseURL + "mp-game/"; // append gameId
 			this.startGameURL = baseURL + "mp-game/start/"; // append gameId
-
+			this.finishGameURL= baseURL + "mp-game/finish/"; // append gameId
+			
 			// the websocket
 			this.multiplayerSocket = null;
 			this.socketBaseURL = baseURL.substring(baseURL.indexOf("://") + 3);
@@ -217,6 +218,28 @@ export class MultiplayerMessage {
 			return this.multiplayerGame;
 		}
 
+		/**
+		 * Finishes the game on the server.
+		 * 
+		 * @returns the game instance filled with all players
+		 */
+		async finishGame(theGame) {
+			if( this.multiplayerGame !== null ) {
+				console.log("Finishing MP game " + this.multiplayerGame.id);
+				let res = await fetch(this.finishGameURL + this.multiplayerGame.id, {
+					method: "PUT",
+					mode: "cors",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify(theGame),
+				});
+				this.multiplayerGame = await res.json();
+				return this.multiplayerGame;
+			}
+			return null;
+		}
+
 		/**
 		 * Sends the given action to the server so that all clients will recieve the update
 		 *
diff --git a/quarkus-server/src/main/java/org/wanja/fatcat/MultiPlayerResource.java b/quarkus-server/src/main/java/org/wanja/fatcat/MultiPlayerResource.java
index 661d11d8..2990937b 100644
--- a/quarkus-server/src/main/java/org/wanja/fatcat/MultiPlayerResource.java
+++ b/quarkus-server/src/main/java/org/wanja/fatcat/MultiPlayerResource.java
@@ -81,6 +81,37 @@ else if (game.player3Id == playerId) {
         }
     }
 
+    @PUT
+    @Path("/finish/{gameId}")
+    @Transactional
+    public MultiPlayerGame finishGame(Long gameId, MultiPlayerGame g) {
+        MultiPlayerGame game = MultiPlayerGame.findById(gameId);
+        Log.info("Finishing MP game with ID " + gameId);
+        if( game != null ) {
+            game.isOpen = false;
+            game.isFinished = true;
+            game.isRunning = false;
+            game.isClosed = true;
+            game.timeFinished = new Date();
+
+            if( g.player1 != null ) {
+                game.player1 = updatePlayerData(g.player1.id, g.player1);
+            }
+            if (g.player2 != null) {
+                game.player2 = updatePlayerData(g.player2.id, g.player2);
+            }
+            if (g.player3 != null) {
+                game.player3 = updatePlayerData(g.player3.id, g.player3);
+            }
+            if (g.player4 != null) {
+                game.player4 = updatePlayerData(g.player4.id, g.player4);
+            }
+
+            game.persist();
+        }
+        return game;
+    }
+
     @PUT
     @Path("/start/{gameId}")
     @Transactional
@@ -160,6 +191,8 @@ public MultiPlayer updatePlayerData(Long playerId, MultiPlayer player) {
         mp.stunnedGolems = player.stunnedGolems;
         mp.usedBombs = player.usedBombs;
         mp.bombsLeft = player.bombsLeft;
+        mp.hasWon    = player.hasWon;
+        mp.internalScore = player.internalScore;
         mp.persist();
         return mp;
     }
@@ -182,6 +215,12 @@ public List<MultiPlayerGame> listRunningGames() {
         return MultiPlayerGame.list("isClosed=false and isRunning=true and isOpen=false order by timeStarted desc");
     }
 
+    @GET
+    @Path("/finished")
+    public List<MultiPlayerGame> allFinishedGames() {
+        return MultiPlayerGame.list("isFinished=true and isRunning=false and isOpen=false order by timeFinished desc");
+    }
+
     @GET
     @Path("/open/{playerId}")
     public List<MultiPlayerGame> myOpenGame(Long playerId) {
diff --git a/quarkus-server/src/main/java/org/wanja/fatcat/model/MultiPlayer.java b/quarkus-server/src/main/java/org/wanja/fatcat/model/MultiPlayer.java
index 097c267f..b168be4d 100644
--- a/quarkus-server/src/main/java/org/wanja/fatcat/model/MultiPlayer.java
+++ b/quarkus-server/src/main/java/org/wanja/fatcat/model/MultiPlayer.java
@@ -19,6 +19,9 @@ public class MultiPlayer extends PanacheEntity {
 
     public long score;    
 
+    @Column(name="internal_score")
+    public long internalScore;
+
     @Column(name="energy_left")
     public int energyLeft;
 
@@ -64,6 +67,9 @@ public class MultiPlayer extends PanacheEntity {
     @Column(name = "bonus_collected")
     public int bonusCollected;
 
+    @Column(name = "has_won")
+    public boolean hasWon;
+
     public MultiPlayer() {        
     }
 
diff --git a/quarkus-server/src/main/java/org/wanja/fatcat/model/MultiPlayerGame.java b/quarkus-server/src/main/java/org/wanja/fatcat/model/MultiPlayerGame.java
index d2bf7a9a..21550cbd 100644
--- a/quarkus-server/src/main/java/org/wanja/fatcat/model/MultiPlayerGame.java
+++ b/quarkus-server/src/main/java/org/wanja/fatcat/model/MultiPlayerGame.java
@@ -21,6 +21,10 @@ public class MultiPlayerGame extends PanacheEntity {
 
     @Column(name = "is_closed")
     public boolean isClosed;
+
+    @Column(name = "is_finished")
+    public boolean isFinished;
+
     public int level; // multiplayer level, eg, level from MapResource.mpLevel(x)
     
     @Column(name = "time_started")
@@ -32,6 +36,10 @@ public class MultiPlayerGame extends PanacheEntity {
     @Column(name = "time_playing")
     public Date timePlaying;
 
+    @Column(name="time_finished")
+    public Date timeFinished;
+
+
     // we only support up to 4 players 
     @ManyToOne
     @JoinColumn(name = "player1_id", insertable = false, updatable = false)

From 4ec4d70017798224c398a83d48513e19708ff810 Mon Sep 17 00:00:00 2001
From: wpernath <w.pernath@gmx.de>
Date: Sat, 3 Sep 2022 01:32:37 +0200
Subject: [PATCH 15/16] #30: Fixed bug and implemented FR

---
 .../js/stage/multiplayer/mp-game-over.js      |  2 +
 .../org/wanja/fatcat/MultiPlayerResource.java | 60 ++++++++++++-------
 2 files changed, 40 insertions(+), 22 deletions(-)

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
index a5048ad9..bddd2e13 100644
--- 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
@@ -296,5 +296,7 @@ export default class MultiplayerGameOverScreen extends Stage {
 		event.off(event.KEYUP, this.handler);
 		game.world.removeChild(this.back);
 		game.world.removeChild(this.emitter);
+		GlobalGameState.reset();
+		MultiplayerManager.get().reset();
 	}
 }
diff --git a/quarkus-server/src/main/java/org/wanja/fatcat/MultiPlayerResource.java b/quarkus-server/src/main/java/org/wanja/fatcat/MultiPlayerResource.java
index 2990937b..866fa3ad 100644
--- a/quarkus-server/src/main/java/org/wanja/fatcat/MultiPlayerResource.java
+++ b/quarkus-server/src/main/java/org/wanja/fatcat/MultiPlayerResource.java
@@ -44,6 +44,7 @@ public MultiPlayerGame createGame(MultiPlayerPlayerGame gamestr) {
         game.player1Id = host.id;
         game.isClosed = false;
         game.isRunning = false;
+        game.isFinished = false;
         game.isOpen = true;
         game.timeStarted = new Date();
         game.persist();
@@ -57,27 +58,33 @@ public MultiPlayerGame createGame(MultiPlayerPlayerGame gamestr) {
     public void closeGame(Long gameId, Long playerId) {
         MultiPlayerGame game = MultiPlayerGame.findById(gameId);
         if( game != null ) {
-            // remove player from game. If it's player1, we close the entire game
-            if(game.player1Id == playerId ) {
-                game.delete();
-            }
-            else{
-                if( game.player2Id == playerId) {
-                    game.player2 = null;
-                    game.player2Id = null;
-                    game.persist();
-                }
-                else if( game.player3Id == playerId) {
-                    game.player3 = null;
-                    game.player3Id = null;
-                    game.persist();
+            if( !game.isFinished ) {
+                // remove player from game. If it's player1, we close the entire game
+                if(game.player1Id == playerId ) {
+                    game.delete();
                 }
-                else if (game.player3Id == playerId) {
-                    game.player4 = null;
-                    game.player4Id = null;
-                    game.persist();
+                else{
+                    if( game.player2Id == playerId) {
+                        game.player2 = null;
+                        game.player2Id = null;
+                        game.persist();
+                    }
+                    else if( game.player3Id == playerId) {
+                        game.player3 = null;
+                        game.player3Id = null;
+                        game.persist();
+                    }
+                    else if (game.player3Id == playerId) {
+                        game.player4 = null;
+                        game.player4Id = null;
+                        game.persist();
+                    }
                 }
             }
+            else {
+                game.timeStopped = new Date();
+                game.persist();
+            }
         }
     }
 
@@ -120,6 +127,7 @@ public void startGame(Long gameId) {
         if (game != null) {
             game.isOpen = false;
             game.isRunning = true;
+            game.isFinished = false;
             game.timePlaying = new Date();
             game.persist();
         }
@@ -206,25 +214,33 @@ public MultiPlayerGame getOpenGames(Long gameId) {
     @GET
     @Path("/open")
     public List<MultiPlayerGame> listOpenGames() {
-        return MultiPlayerGame.list("isClosed=false and isRunning=false and isOpen=true order by timeStarted desc");
+        return MultiPlayerGame.list("isClosed=false and isFinished=false and isRunning=false and isOpen=true order by timeStarted desc");
     }
 
     @GET
     @Path("/running")
     public List<MultiPlayerGame> listRunningGames() {
-        return MultiPlayerGame.list("isClosed=false and isRunning=true and isOpen=false order by timeStarted desc");
+        return MultiPlayerGame.list("isClosed=false and isFinished=false and isRunning=true and isOpen=false order by timeStarted desc");
     }
 
     @GET
     @Path("/finished")
-    public List<MultiPlayerGame> allFinishedGames() {
+    public List<MultiPlayerGame> listFinishedGames() {
         return MultiPlayerGame.list("isFinished=true and isRunning=false and isOpen=false order by timeFinished desc");
     }
 
     @GET
     @Path("/open/{playerId}")
-    public List<MultiPlayerGame> myOpenGame(Long playerId) {
+    public List<MultiPlayerGame> myOpenGames(Long playerId) {
         return MultiPlayerGame.find("isOpen = true and isClosed=false AND (player1Id = ?1 or player2Id = ?1 or player3Id = ?1 or player4Id = ?1)", playerId).list();
     }
 
+    @GET
+    @Path("/finished/{playerId}")
+    public List<MultiPlayerGame> myFinishedGames(Long playerId) {
+        return MultiPlayerGame.find(
+                "isFinished = true and isClosed=false AND (player1Id = ?1 or player2Id = ?1 or player3Id = ?1 or player4Id = ?1)",
+                playerId).list();
+    }
+
 }

From e2a85a91fbc16df81b317335673bc5c66198c81a Mon Sep 17 00:00:00 2001
From: wpernath <w.pernath@gmx.de>
Date: Sat, 3 Sep 2022 01:37:08 +0200
Subject: [PATCH 16/16] #30: Fixed another bug: resetting game state missed

---
 .../src/main/client/js/stage/multiplayer/mp-game-over.js | 2 +-
 .../src/main/client/js/stage/multiplayer/mp-menu.js      | 2 ++
 melonjs-client/src/main/client/js/util/multiplayer.js    | 9 ++++++---
 3 files changed, 9 insertions(+), 4 deletions(-)

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
index bddd2e13..754494ef 100644
--- 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
@@ -297,6 +297,6 @@ export default class MultiplayerGameOverScreen extends Stage {
 		game.world.removeChild(this.back);
 		game.world.removeChild(this.emitter);
 		GlobalGameState.reset();
-		MultiplayerManager.get().reset();
+		MultiplayerManager.get().closeActiveGame();
 	}
 }
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
index 70810699..76ae064c 100644
--- a/melonjs-client/src/main/client/js/stage/multiplayer/mp-menu.js
+++ b/melonjs-client/src/main/client/js/stage/multiplayer/mp-menu.js
@@ -74,6 +74,8 @@ export default class MultiplayerMenuScreen extends Stage {
 	onResetEvent() {
 		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/multiplayer.js b/melonjs-client/src/main/client/js/util/multiplayer.js
index 939a8322..0c97bf50 100644
--- a/melonjs-client/src/main/client/js/util/multiplayer.js
+++ b/melonjs-client/src/main/client/js/util/multiplayer.js
@@ -120,11 +120,11 @@ export class MultiplayerMessage {
 			this.multiplayerGame = null;
 			this.multiplayerPlayer = null;
 
-			this.selectedLevelForGame = null;
-			this.selectedLevelIndex = 0;
 			this.multiplayerLevels = this.levelManager.allMultiplayerLevels();
 			this.weAreHost = false;
 			this.multiplayerGameToJoin = null;
+			this.selectedLevelForGame = null;
+			this.selectedLevelIndex = 0;
 
 			// callbacks for socket
 			this.eventEmitter = new EventEmitter();
@@ -176,7 +176,10 @@ export class MultiplayerMessage {
 				this.multiplayerGame = null;
 			}
 
-			this.eventEmitter.reset();
+			this.weAreHost = false;
+			this.multiplayerGameToJoin = null;
+			this.selectedLevelForGame = null;
+			this.selectedLevelIndex = 0;
 		}
 
 		/**