create an env variable for debug mode

.env.template

@@ -0,0 +1 @@
+DEBUG_MODE=false

.gitignore

@@ -1,3 +1,4 @@
+.env
 .idea
 .vagrant
 Vagrantfile

docker-compose.yaml

@@ -13,6 +13,7 @@ services:
   front:
     image: thecodingmachine/nodejs:12
     environment:
+      DEBUG_MODE: "$DEBUG_MODE"
       HOST: "0.0.0.0"
       NODE_ENV: development
       API_URL: http://api.workadventure.localhost

front/src/Enum/EnvironmentVariable.ts

@@ -1,8 +1,10 @@
+const DEBUG_MODE: boolean = !!process.env.DEBUG_MODE || false;
 const API_URL = process.env.API_URL || "http://api.workadventure.localhost";
 const ROOM = [process.env.ROOM || "THECODINGMACHINE"];
 const RESOLUTION = 2;
 
 export {
+    DEBUG_MODE,
     API_URL,
     RESOLUTION,
     ROOM

front/src/Phaser/Game/GameScene.ts

@@ -2,7 +2,7 @@ import {GameManagerInterface, StatusGameManagerEnum} from "./GameManager";
 import {MessageUserPositionInterface} from "../../Connexion";
 import {CameraManager, CameraManagerInterface} from "./CameraManager";
 import {CurrentGamerInterface, GamerInterface, Player} from "../Player/Player";
-import {RESOLUTION} from "../../Enum/EnvironmentVariable";
+import {DEBUG_MODE, RESOLUTION} from "../../Enum/EnvironmentVariable";
 import Tile = Phaser.Tilemaps.Tile;
 
 export enum Textures {
@@ -97,13 +97,14 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
                 //this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name)
             });
             Layer.setCollisionByProperty({collides: true});
-            //debug code
-            //debug code to see the collision hitbox of the object in the top layer
-            /*Layer.renderDebug(this.add.graphics(), {
-                tileColor: null, //non-colliding tiles
-                collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles,
-                faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges
-            });*/
+            if (DEBUG_MODE) {
+                //debug code to see the collision hitbox of the object in the top layer
+                Layer.renderDebug(this.add.graphics(), {
+                    tileColor: null, //non-colliding tiles
+                    collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles,
+                    faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges
+                });
+            }
         });
     }
 
@@ -142,6 +143,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             //pixel position toz tile position
             let tile = this.Map.getTileAt(this.Map.worldToTileX(pointer.worldX), this.Map.worldToTileY(pointer.worldY));
             if(tile){
+                console.log(tile)
                 this.CurrentPlayer.say("Your touch " + tile.layer.name);
             }
         });

front/src/index.ts

@@ -1,7 +1,7 @@
 import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
 import {GameManager} from "./Phaser/Game/GameManager";
-import {RESOLUTION} from "./Enum/EnvironmentVariable";
+import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
 
 let gameManager = new GameManager();
 
@@ -15,7 +15,7 @@ const config: GameConfig = {
     physics: {
         default: "arcade",
         arcade: {
-            debug: true
+            debug: DEBUG_MODE
         }
     }
 };

front/webpack.config.js

@@ -29,6 +29,6 @@ module.exports = {
         new webpack.ProvidePlugin({
             Phaser: 'phaser'
         }),
-        new webpack.EnvironmentPlugin(['API_URL'])
+        new webpack.EnvironmentPlugin(['API_URL', 'DEBUG_MODE'])
     ]
 };