Release v0.6.x

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)

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.

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.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.1
+    image: quay.io/wpernath/grumpycat-melonjs:v0.6.3
     ports:
       - "8086:8088"
     restart: always

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:

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.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:

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",
@@ -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"
   }
 }

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>
 

melonjs-client/src/main/client/config.js

@@ -1,16 +1,18 @@
 const CONFIG = {
-	environment: "prod", // change this TO PROD on deployment
+	environment: "local", // change this TO PROD on deployment
 
 	appName: "{{applicationName}}",
 	appVersion: "{{applicationVersion}}",
 
 	baseURL: "",
 
 	local: {
-		//baseURL: "http://172.20.10.2:8080/",
-		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.171:8080/",
 	},
 
 	dev: {

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;

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';
 

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);            

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,55 +44,62 @@ 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;
 
 		// 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();