From 7fe2cc19c35209852b65a4d647ed473800b0cb34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 17 Aug 2020 15:20:03 +0200
Subject: [PATCH] Adding buttons to switch mode

---
 front/dist/resources/objects/layout_modes.png | Bin 0 -> 297 bytes
 front/dist/resources/style/style.css          |   2 +
 front/src/Phaser/Game/GameScene.ts            |  54 +++++++++++++++---
 3 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 front/dist/resources/objects/layout_modes.png

diff --git a/front/dist/resources/objects/layout_modes.png b/front/dist/resources/objects/layout_modes.png
new file mode 100644
index 0000000000000000000000000000000000000000..abd9adaf5336965b6a87b6af603dae1d24d9c43b
GIT binary patch
literal 297
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=A3R+gLn`LHy>XDM*+7K#Vok-r
zyX&M(QYJ3b&(APEv_@o)46C=d=2I)18U|UrhIKJlKFS4VyH+uzoc_*m^SeBgi`~tc
zpa0G{p>ACq$H2%UkRW~FRJelBf%Oc3**Fv$7}A-4h|aM1e?7l}VLyk!O)iHNrV9+l
z4%Uom4J-l<42)6?g?Ek%m^K_f%zoh^^NSCRB|jLfz;>Ox&)9Dm`4wnO{4aNnU$g4Y
zZ2$kIrmB~L31sfy8Ef1aX6Dv1hcPaiw+<qv%`mf<!AKZrD%fb242C0x^3GQn`1s`=
h+W8k8W?!(Efw#r$+(T1~cR;^0c)I$ztaD0e0sw+wX)6E#

literal 0
HcmV?d00001

diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index d7a9a560..b3d98539 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -355,12 +355,14 @@ body {
     width: 100%;
 
     flex-wrap: wrap;
+    align-items: flex-start;
 
     padding: 1%;
 }
 
 .chat-mode div {
     margin: 1%;
+    max-height: 96%;
 }
 
 .chat-mode.one-col > div {
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 6505ad11..2ef7d630 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -106,6 +106,9 @@ export class GameScene extends Phaser.Scene {
 
     private PositionNextScene: Array<Array<{ key: string, hash: string }>> = new Array<Array<{ key: string, hash: string }>>();
     private startLayerName: string|undefined;
+    private presentationModeSprite!: Sprite;
+    private chatModeSprite!: Sprite;
+    private repositionCallback!: (this: Window, ev: UIEvent) => void;
 
     static createFromUrl(mapUrlFile: string, instance: string, key: string|null = null): GameScene {
         const mapKey = GameScene.getMapKeyByUrl(mapUrlFile);
@@ -158,6 +161,12 @@ export class GameScene extends Phaser.Scene {
             );
         });
 
+        this.load.spritesheet(
+            'layout_modes',
+            'resources/objects/layout_modes.png',
+            {frameWidth: 32, frameHeight: 32}
+        );
+
         loadAllLayers(this.load);
 
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
@@ -213,6 +222,7 @@ export class GameScene extends Phaser.Scene {
 
                 this.scene.stop(this.scene.key);
                 this.scene.remove(this.scene.key);
+                window.removeEventListener('resize', this.repositionCallback);
             })
 
             // When connection is performed, let's connect SimplePeer
@@ -364,15 +374,39 @@ export class GameScene extends Phaser.Scene {
             }, 500);
         }
 
+        // FIXME: handle display / hide based on number of cameras connected
+        this.presentationModeSprite = this.add.sprite(2, this.game.renderer.height - 2, 'layout_modes', 0);
+        this.presentationModeSprite.setScrollFactor(0, 0);
+        this.presentationModeSprite.setOrigin(0, 1);
+        this.presentationModeSprite.setInteractive();
+        this.presentationModeSprite.on('pointerup', this.switchLayoutMode.bind(this));
+        this.chatModeSprite = this.add.sprite(36, this.game.renderer.height - 2, 'layout_modes', 3);
+        this.chatModeSprite.setScrollFactor(0, 0);
+        this.chatModeSprite.setOrigin(0, 1);
+        this.chatModeSprite.setInteractive();
+        this.chatModeSprite.on('pointerup', this.switchLayoutMode.bind(this));
+        
         // FIXME: change this to use the class for input
-        this.input.keyboard.on('keyup-' + 'M', function () {
-            const mode = layoutManager.getLayoutMode();
-            if (mode === LayoutMode.Presentation) {
-                layoutManager.switchLayoutMode(LayoutMode.VideoChat);
-            } else {
-                layoutManager.switchLayoutMode(LayoutMode.Presentation);
-            }
+        this.input.keyboard.on('keyup-' + 'M', () => {
+            this.switchLayoutMode();
         });
+
+        this.repositionCallback = this.reposition.bind(this);
+        window.addEventListener('resize', this.repositionCallback);
+        this.reposition();
+    }
+
+    private switchLayoutMode(): void {
+        const mode = layoutManager.getLayoutMode();
+        if (mode === LayoutMode.Presentation) {
+            layoutManager.switchLayoutMode(LayoutMode.VideoChat);
+            this.presentationModeSprite.setFrame(1);
+            this.chatModeSprite.setFrame(2);
+        } else {
+            layoutManager.switchLayoutMode(LayoutMode.Presentation);
+            this.presentationModeSprite.setFrame(0);
+            this.chatModeSprite.setFrame(3);
+        }
     }
 
     private getExitSceneUrl(layer: ITiledMapLayer): string|undefined {
@@ -634,6 +668,7 @@ export class GameScene extends Phaser.Scene {
             this.simplePeer.unregister();
             this.scene.stop();
             this.scene.remove(this.scene.key);
+            window.removeEventListener('resize', this.repositionCallback);
             this.scene.start(nextSceneKey.key, {
                 startLayerName: nextSceneKey.hash
             });
@@ -821,4 +856,9 @@ export class GameScene extends Phaser.Scene {
         const endPos = mapUrlStart.indexOf(".json");
         return mapUrlStart.substring(startPos, endPos);
     }
+
+    private reposition(): void {
+        this.presentationModeSprite.setY(this.game.renderer.height - 2);
+        this.chatModeSprite.setY(this.game.renderer.height - 2);
+    }
 }