From ddc39d6e50aca0ff989027d7de4a63b397eaa007 Mon Sep 17 00:00:00 2001
From: gparant <g.parant@thecodingmachine.com>
Date: Mon, 6 Apr 2020 22:55:09 +0200
Subject: [PATCH] Fix to move the camera only in the map. The camera stops on
 the border map.

---
 front/src/Enum/EnvironmentVariable.ts |  4 ++-
 front/src/GameScene.ts                | 42 ++++++++++++++++++++-------
 front/src/index.ts                    | 11 ++++---
 3 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts
index 0e10e789..71934e6c 100644
--- a/front/src/Enum/EnvironmentVariable.ts
+++ b/front/src/Enum/EnvironmentVariable.ts
@@ -1,5 +1,7 @@
 const API_URL = process.env.API_URL || "http://api.workadventure.localhost";
+const RESOLUTION = 2;
 
 export {
-    API_URL
+    API_URL,
+    RESOLUTION
 }
\ No newline at end of file
diff --git a/front/src/GameScene.ts b/front/src/GameScene.ts
index 2567a1fb..59c06cac 100644
--- a/front/src/GameScene.ts
+++ b/front/src/GameScene.ts
@@ -1,3 +1,4 @@
+import {RESOLUTION} from "./Enum/EnvironmentVariable";
 
 export class GameScene extends Phaser.Scene {
     private player: Phaser.GameObjects.Sprite;
@@ -12,6 +13,8 @@ export class GameScene extends Phaser.Scene {
     private keyDown: Phaser.Input.Keyboard.Key;
     private keyShift: Phaser.Input.Keyboard.Key;
 
+    private Mappy : Phaser.Tilemaps.Tilemap;
+
     constructor() {
         super({
             key: "GameScene"
@@ -47,11 +50,11 @@ export class GameScene extends Phaser.Scene {
     }
 
     create(): void {
-        let mappy = this.add.tilemap("map");
-        let terrain = mappy.addTilesetImage("tiles", "tiles");
+        this.Mappy = this.add.tilemap("map");
+        let terrain = this.Mappy.addTilesetImage("tiles", "tiles");
 
-        let bottomLayer = mappy.createStaticLayer("Calque 1", [terrain], 0, 0);
-        let topLayer = mappy.createStaticLayer("Calque 2", [terrain], 0, 0);
+        let bottomLayer = this.Mappy.createStaticLayer("Calque 1", [terrain], 0, 0);
+        let topLayer = this.Mappy.createStaticLayer("Calque 2", [terrain], 0, 0);
 
         // Let's manage animations of the player
         this.anims.create({
@@ -87,26 +90,43 @@ export class GameScene extends Phaser.Scene {
         //player.setBounce(0.2);
         //player.setCollideWorldBounds(true);
         this.player = this.add.sprite(450, 450, 'player');
-
     }
 
     private angle: number = 0;
 
     update(dt: number): void {
+        let xCameraPosition = this.cameras.main.scrollX;
+        let yCameraPosition = this.cameras.main.scrollY;
+
         let speedMultiplier = this.keyShift.isDown ? 5 : 1;
-        
-        
+
         if (this.keyUp.isDown) {
-            this.moveCamera(0, -1, speedMultiplier);
+            if(yCameraPosition > 0) {
+                this.moveCamera(0, -1, speedMultiplier);
+            }else {
+                this.cameras.main.scrollY = 0;
+            }
         }
         if (this.keyLeft.isDown) {
-            this.moveCamera(-1, 0, speedMultiplier);
+            if(xCameraPosition > 0) {
+                this.moveCamera(-1, 0, speedMultiplier);
+            }else{
+                this.cameras.main.scrollX = 0;
+            }
         }
         if (this.keyDown.isDown) {
-            this.moveCamera(0, 1, speedMultiplier);
+            if(this.Mappy.heightInPixels > (yCameraPosition + (window.innerHeight / RESOLUTION))) {
+                this.moveCamera(0, 1, speedMultiplier);
+            }else{
+                this.cameras.main.scrollY = (this.Mappy.heightInPixels - (window.innerHeight / RESOLUTION));
+            }
         }
         if (this.keyRight.isDown) {
-            this.moveCamera(1, 0, speedMultiplier);
+            if(this.Mappy.widthInPixels > (xCameraPosition + (window.innerWidth / RESOLUTION))) {
+                this.moveCamera(1, 0, speedMultiplier);
+            }else{
+                this.cameras.main.scrollX = (this.Mappy.widthInPixels - (window.innerWidth / RESOLUTION));
+            }
         }
         
         if (this.keyZ.isDown) {
diff --git a/front/src/index.ts b/front/src/index.ts
index 9c7c0e8a..cf100627 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -2,22 +2,21 @@ import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
 import {GameScene} from "./GameScene";
 import {Connexion} from "./Connexion";
-
-const resolution = 2;
+import {RESOLUTION} from "./Enum/EnvironmentVariable";
 
 const config: GameConfig = {
     title: "Office game",
-    width: window.innerWidth / resolution,
-    height: window.innerHeight / resolution,
+    width: window.innerWidth / RESOLUTION,
+    height: window.innerHeight / RESOLUTION,
     parent: "game",
     scene: [GameScene],
-    zoom: resolution,
+    zoom: RESOLUTION,
 };
 
 let game = new Phaser.Game(config);
 
 window.addEventListener('resize', function (event) {
-    game.scale.resize(window.innerWidth / resolution, window.innerHeight / resolution);
+    game.scale.resize(window.innerWidth / RESOLUTION, window.innerHeight / RESOLUTION);
 });
 
 const connexion = new Connexion("test@gmail.com");