From 3df32de83be0b3eebd7d1b5cec3328674f52bf56 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Thu, 22 Apr 2021 11:26:35 +0200
Subject: [PATCH] Update camera and adapte for mobile

---
 .../resources/html/CustomCharacterScene.html  |   2 +-
 .../resources/html/EnableCameraScene.html     | 121 ++++++++++++++++++
 .../dist/resources/html/gameQualityMenu.html  |   4 +-
 front/src/Phaser/Login/EnableCameraScene.ts   |  58 ++++++---
 4 files changed, 166 insertions(+), 19 deletions(-)
 create mode 100644 front/dist/resources/html/EnableCameraScene.html

diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html
index 9c1a0795..a1f4f24a 100644
--- a/front/dist/resources/html/CustomCharacterScene.html
+++ b/front/dist/resources/html/CustomCharacterScene.html
@@ -135,7 +135,7 @@
 
 <form id="customizeScene" hidden>
     <section class="text-center">
-        <h5>Custom your WOKA</h5>
+        <h5>Custom your WOKA</h3>
     </section>
     <section class="action action-move">
         <button class="customizeSceneButton" id="customizeSceneButtonLeft"> < </button>
diff --git a/front/dist/resources/html/EnableCameraScene.html b/front/dist/resources/html/EnableCameraScene.html
new file mode 100644
index 00000000..9e737149
--- /dev/null
+++ b/front/dist/resources/html/EnableCameraScene.html
@@ -0,0 +1,121 @@
+<style>
+    #enableCameraScene {
+        background: #000000;
+        /*border: 1px solid #ebeeee;*/
+        border-radius: 6px;
+        margin: 20px auto 0;
+        color: #ebeeee;
+        max-height: 40vh;
+        width: 42vw;
+        max-width: 300px;
+        /*overflow: scroll;*/
+    }
+    #enableCameraScene h1 {
+        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
+        border-bottom: 1px solid #a6abaf;
+        border-radius: 6px 6px 0 0;
+        box-sizing: border-box;
+        color: #727678;
+        display: block;
+        height: 43px;
+        padding-top: 10px;
+        margin: 0;
+        text-align: center;
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    #enableCameraScene input {
+        font-size: 70%;
+        background: linear-gradient(top, #d6d7d7, #dee0e0);
+        border: 1px solid #a1a3a3;
+        border-radius: 4px;
+        box-shadow: 0 1px #fff;
+        box-sizing: border-box;
+        color: #696969;
+        height: 30px;
+        transition: box-shadow 0.3s;
+        width: 100%;
+        text-align: center;
+    }
+    #enableCameraScene section.title {
+        position: absolute;
+        top: 1vh;
+        width: 100%;
+    }
+    #enableCameraScene section.action{
+        text-align: center;
+        margin: 0;
+        position: absolute;
+        top: 40vh;
+        width: 100%;
+    }
+    #enableCameraScene button {
+        margin: 10px;
+        background-color: black;;
+        color: #ebeeee;
+        border-radius: 7px;
+        padding-bottom: 4px;
+        width: 100px;
+    }
+    #enableCameraScene button#enableCameraSceneFormCancel {
+        background-color: #c7c7c700;
+        color: #292929;
+    }
+    #enableCameraScene section h6,
+    #enableCameraScene section h5{
+        margin: 1px;
+    }
+    #enableCameraScene section.text-center{
+        text-align: center;
+    }
+    #enableCameraScene section a{
+        font-size: 8px;
+        text-decoration: underline;
+        color: #ebeeee;
+    }
+    #enableCameraScene section a:hover{
+        font-weight: 700;
+    }
+    #enableCameraScene section p{
+        text-align: left;
+        font-size: 8px;
+        margin: 10px 10px;
+    }
+    #enableCameraScene section p.err{
+        color: red;
+        text-align: center;
+    }
+    #enableCameraScene section p.info{
+        display: none;
+        text-align: center;
+    }
+    #enableCameraScene section input#enableCameraSceneLink{
+        background-color: #a1a3a3;
+    }
+    #enableCameraScene section img{
+        width: 160px;
+        margin: 20px 0;
+    }
+</style>
+
+<form id="enableCameraScene" hidden>
+    <!-- FIX me -->
+    <section class="title text-center">
+        <h5>Turn on your camera and microphone</h5>
+    </section>
+    <!--<section class="text-center">
+        <video id="myCamVideoSetup" autoplay muted></video>
+    </section>
+    <section class="text-center">
+        <h5>Select your camera</h3>
+        <select id="camera">
+        </select>
+    </section>
+    <section class="text-center">
+        <h5>Select your michrophone</h3>
+        <select id="michrophone">
+        </select>
+    </section>-->
+    <section class="action">
+        <button type="submit" id="enableCameraSceneFormSubmit">Let's go!</button>
+    </section>
+</form>
diff --git a/front/dist/resources/html/gameQualityMenu.html b/front/dist/resources/html/gameQualityMenu.html
index 185b6853..fa7210bc 100644
--- a/front/dist/resources/html/gameQualityMenu.html
+++ b/front/dist/resources/html/gameQualityMenu.html
@@ -57,7 +57,7 @@
 
 <form id="gameQuality" hidden>
     <section>
-        <h3>Game quality</h3>
+        <h5>Game quality</h3>
         <p class="cautiousText">(Editing these settings will restart the game)</p>
         <select id="select-game-quality">
             <option value="120">High video quality (120 fps)</option>
@@ -67,7 +67,7 @@
         </select>
     </section>
     <section>
-        <h3>Video quality</h3>
+        <h5>Video quality</h3>
         <select id="select-video-quality">
             <option value="30">High video quality (30 fps)</option>
             <option value="20">Medium video quality (20 fps, recommended)</option>
diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index 6a91fc34..cf8a50ad 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -9,6 +9,7 @@ import {SoundMeterSprite} from "../Components/SoundMeterSprite";
 import {HtmlUtils} from "../../WebRtc/HtmlUtils";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
+import { MenuScene } from "../Menu/MenuScene";
 
 export const EnableCameraSceneName = "EnableCameraScene";
 enum LoginTextures {
@@ -19,12 +20,11 @@ enum LoginTextures {
     arrowUp = "arrow_up"
 }
 
+const enableCameraSceneKey = 'enableCameraScene';
 
 export class EnableCameraScene extends Phaser.Scene {
     private textField!: TextField;
-    private pressReturnField!: TextField;
     private cameraNameField!: TextField;
-    private logo!: Image;
     private arrowLeft!: Image;
     private arrowRight!: Image;
     private arrowDown!: Image;
@@ -39,6 +39,10 @@ export class EnableCameraScene extends Phaser.Scene {
     private repositionCallback!: (this: Window, ev: UIEvent) => void;
 
     private mobileTapRectangle!: Rectangle;
+
+
+    private enableCameraSceneElement!: Phaser.GameObjects.DOMElement;
+
     constructor() {
         super({
             key: EnableCameraSceneName
@@ -47,8 +51,10 @@ export class EnableCameraScene extends Phaser.Scene {
     }
 
     preload() {
+
+        this.load.html(enableCameraSceneKey, 'resources/html/EnableCameraScene.html');
+
         this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
-        this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
         this.load.image(LoginTextures.arrowRight, "resources/objects/arrow_right.png");
         this.load.image(LoginTextures.arrowUp, "resources/objects/arrow_up.png");
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
@@ -56,13 +62,25 @@ export class EnableCameraScene extends Phaser.Scene {
     }
 
     create() {
+
+        const middleX = this.getMiddleX();
+        console.log('create => middleX', middleX);
+        this.enableCameraSceneElement = this.add.dom(middleX, 0).createFromCache(enableCameraSceneKey);
+        MenuScene.revealMenusAfterInit(this.enableCameraSceneElement, enableCameraSceneKey);
+
+        const continuingButton = this.enableCameraSceneElement.getChildByID('enableCameraSceneFormSubmit') as HTMLButtonElement;
+        continuingButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.login();
+        });
+
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
         
-        this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone');
+        /* FIX ME */
+        this.textField = new TextField(this, this.game.renderer.width / 2, 20, '');
 
-        this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Touch here\n\n or \n\nPress enter to start');
         // For mobile purposes - we need a big enough touchable area.
         this.mobileTapRectangle = this.add
           .rectangle(
@@ -102,9 +120,6 @@ export class EnableCameraScene extends Phaser.Scene {
         this.arrowDown.setInteractive().on('pointerdown', this.nextMic.bind(this));
         this.add.existing(this.arrowDown);
 
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
-        this.add.existing(this.logo);
-
         this.input.keyboard.on('keyup-ENTER', () => {
             this.login();
         });
@@ -218,8 +233,6 @@ export class EnableCameraScene extends Phaser.Scene {
         this.mobileTapRectangle.x = this.game.renderer.width / 2;
         this.cameraNameField.x = this.game.renderer.width / 2;
         this.microphoneNameField.x = this.game.renderer.width / 2;
-        this.pressReturnField.x = this.game.renderer.width / 2;
-        this.pressReturnField.x = this.game.renderer.width / 2;
 
         this.cameraNameField.y = bounds.top / RESOLUTION - 8;
 
@@ -239,18 +252,20 @@ export class EnableCameraScene extends Phaser.Scene {
 
         this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16;
         this.arrowUp.y = this.microphoneNameField.y;
-
-        this.pressReturnField.y = Math.max(this.game.renderer.height - 30, this.microphoneNameField.y + 20);
-        this.logo.x = this.game.renderer.width - 30;
-        this.logo.y = Math.max(this.game.renderer.height - 20, this.microphoneNameField.y + 30);
     }
 
     update(time: number, delta: number): void {
-        this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
-
         this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
 
         mediaManager.setLastUpdateScene();
+
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.enableCameraSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
     }
 
     private login(): void {
@@ -276,4 +291,15 @@ export class EnableCameraScene extends Phaser.Scene {
         }
         this.updateWebCamName();
     }
+
+    private getMiddleX() : number{
+        return (this.game.renderer.width / 2) -  
+        (
+            this.enableCameraSceneElement
+            && this.enableCameraSceneElement.node
+            && this.enableCameraSceneElement.node.getBoundingClientRect().width > 0
+            ? (this.enableCameraSceneElement.node.getBoundingClientRect().width / 4)
+            : (300 / 2)
+        );
+    }
 }