Create input need page

front/dist/resources/html/helpCameraSettings.html

@@ -0,0 +1,109 @@
+<style>
+    *{
+        font-family: 'Open Sans', sans-serif;
+        cursor: url('/resources/logos/cursor_normal.png'), auto;
+    }
+    * a, button, input{
+        cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    }
+    #helpCameraSettings {
+        background: #eceeee;
+        border: 1px solid #42464b;
+        border-radius: 6px;
+        margin: 10px auto 0;
+        width: 400px;
+        height: 370px;
+    }
+    #helpCameraSettings 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;
+    }
+    #helpCameraSettings 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%;
+    }
+    #helpCameraSettings section {
+        margin: 10px;
+    }
+    #helpCameraSettings section.action{
+        text-align: center;
+        margin: 0;
+    }
+    #helpCameraSettings button {
+        margin-top: 10px;
+        background-color: black;
+        color: white;
+        border-radius: 7px;
+        padding-bottom: 4px;
+        width: 60px;
+    }
+    #helpCameraSettings button#helpCameraSettingsFormCancel {
+        background-color: #c7c7c700;
+        color: #292929;
+    }
+    #helpCameraSettings section a{
+        text-align: center;
+        font-size: 12px;
+        margin: 0 6px;
+        color: black;
+    }
+    #helpCameraSettings section h6,
+    #helpCameraSettings section h5{
+        margin: 1px;
+    }
+    #helpCameraSettings section.text-center{
+        text-align: center;
+    }
+    #helpCameraSettings section p{
+        font-size: 8px;
+        margin: 0px 20px;
+    }
+    #helpCameraSettings section p.err{
+        color: red;
+    }
+    #helpCameraSettings section ul{
+        margin: 6px;
+    }
+    #helpCameraSettings section li{
+        text-align: left;
+        font-size: 8px;
+    }
+    #helpCameraSettings section img {
+        width: 200px;
+        margin-top: 10px;
+    }
+</style>
+
+<form id="helpCameraSettings" hidden>
+    <section class="text-center">
+        <h5>Need Audio Video Inputs</h5>
+        <p class="err" id="permissionError">Permission denied</p>
+        <p class="info">You must allow camera and microphone access in your browser.</p>
+            <ul>
+                <li>Please click on the lock or camera symbol on the side of the URL in the address bar. Here you can grant "always allow" access to your input devices.</li>
+                <li>Please ensure that you have a camera AND microphone plugged into your computer.</li>
+            </ul>
+        <p class="info">Once you've followed these steps, please refresh this page.</p>
+        <img src="/resources/objects/help-setting-camera-permission.png">
+    </section>
+    <section class="action">
+        <button type="submit" id="helpCameraSettingsFormRefresh">Refresh</button>
+    </section>
+</form>

front/src/Phaser/Login/EnableCameraScene.ts

@@ -1,8 +1,6 @@
 import {gameManager} from "../Game/GameManager";
 import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
-import {GameSceneInitInterface} from "../Game/GameScene";
-import {StartMapInterface} from "../../Connexion/ConnexionModels";
 import {mediaManager} from "../../WebRtc/MediaManager";
 import {RESOLUTION} from "../../Enum/EnvironmentVariable";
 import {SoundMeter} from "../Components/SoundMeter";
@@ -18,6 +16,8 @@ enum LoginTextures {
     arrowUp = "arrow_up"
 }
 
+const helpCameraSettings = 'helpCameraSettings';
+
 export class EnableCameraScene extends Phaser.Scene {
     private textField!: TextField;
     private pressReturnField!: TextField;
@@ -35,6 +35,8 @@ export class EnableCameraScene extends Phaser.Scene {
     private soundMeterSprite!: SoundMeterSprite;
     private microphoneNameField!: TextField;
     private repositionCallback!: (this: Window, ev: UIEvent) => void;
+    private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement;
+    private helpCameraSettingsOpened: boolean = false;
 
     constructor() {
         super({
@@ -50,6 +52,7 @@ export class EnableCameraScene extends Phaser.Scene {
         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
         this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
+        this.load.html(helpCameraSettings, 'resources/html/helpCameraSettings.html');
     }
 
     create() {
@@ -109,6 +112,27 @@ export class EnableCameraScene extends Phaser.Scene {
         this.soundMeterSprite.setVisible(false);
         this.add.existing(this.soundMeterSprite);
 
+        const middleX = (window.innerWidth / 3) - (370*0.85);
+        this.helpCameraSettingsElement = this.add.dom(middleX, -800, undefined, {overflow: 'scroll'}).createFromCache(helpCameraSettings);
+        this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
+        this.helpCameraSettingsElement.addListener('click');
+        this.helpCameraSettingsElement.on('click',  (event:MouseEvent) => {
+            event.preventDefault();
+            if((event?.target as HTMLInputElement).id !== 'helpCameraSettingsFormRefresh') {
+                return;
+            }
+            const permission: Element = this.helpCameraSettingsElement.getChildByID('permissionError');
+            permission.innerHTML = '';
+            return mediaManager.getCamera().then(() => {
+                window.location.reload();
+            }).catch((err) => {
+                permission.innerHTML = err.message;
+            });
+        });
+        if(this.helpCameraSettingsElement.parent){
+            (this.helpCameraSettingsElement.parent as HTMLDivElement).style.overflow = 'scroll';
+        }
+
         this.repositionCallback = this.reposition.bind(this);
         window.addEventListener('resize', this.repositionCallback);
     }
@@ -151,6 +175,9 @@ export class EnableCameraScene extends Phaser.Scene {
      * Function called each time a camera is changed
      */
     private setupStream(stream: MediaStream): void {
+        if(this.helpCameraSettingsOpened){
+            return;
+        }
         const img = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetupNoVideo');
         img.style.display = 'none';
 
@@ -257,19 +284,27 @@ export class EnableCameraScene extends Phaser.Scene {
         mediaManager.setLastUpdateScene();
     }
 
-    private login(): void {
-        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
-        this.soundMeter.stop();
-        window.removeEventListener('resize', this.repositionCallback);
-
-        mediaManager.stopCamera();
-        mediaManager.stopMicrophone();
-
-        this.scene.sleep(EnableCameraSceneName)
-        gameManager.goToStartingMap(this.scene);
+    private login(): Promise<MediaStream> {
+        return mediaManager.getCamera()
+            .then((mediaStream: MediaStream) => {
+                HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
+                this.soundMeter.stop();
+                window.removeEventListener('resize', this.repositionCallback);
+                mediaManager.stopCamera();
+                mediaManager.stopMicrophone();
+                this.scene.sleep(EnableCameraSceneName)
+                gameManager.goToStartingMap(this.scene);
+                return mediaStream;
+            }).catch((err) => {
+                this.openHelpCameraSettingsOpened();
+                throw err;
+            });
     }
 
     private async getDevices() {
+        if(this.helpCameraSettingsOpened){
+            return;
+        }
         const mediaDeviceInfos = await navigator.mediaDevices.enumerateDevices();
         for (const mediaDeviceInfo of mediaDeviceInfos) {
             if (mediaDeviceInfo.kind === 'audioinput') {
@@ -280,4 +315,47 @@ export class EnableCameraScene extends Phaser.Scene {
         }
         this.updateWebCamName();
     }
+
+    private openHelpCameraSettingsOpened(): void{
+        this.reset();
+        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
+        this.helpCameraSettingsOpened = true;
+        let middleY = (window.innerHeight / 3) - (495);
+        if(middleY < 0){
+            middleY = 0;
+        }
+        let middleX = (window.innerWidth / 3) - (370*0.85);
+        if(middleX < 0){
+            middleX = 0;
+        }
+        this.tweens.add({
+            targets: this.helpCameraSettingsElement,
+            y: middleY,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3',
+            overflow: 'scroll'
+        });
+    }
+
+    private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
+        //Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.
+        //To prevent this, we put a 'hidden' attribute on the root element, we remove it only after the init is done.
+        setTimeout(() => {
+            (menuElement.getChildByID(rootDomId) as HTMLElement).hidden = false;
+        }, 250);
+    }
+
+    private reset(){
+        this.textField.destroy();
+        this.pressReturnField.destroy();
+        this.cameraNameField.destroy();
+        this.microphoneNameField.destroy();
+        this.arrowRight.destroy();
+        this.arrowLeft.destroy();
+        this.arrowUp.destroy();
+        this.arrowDown.destroy();
+        this.soundMeterSprite.destroy();
+        this.input.keyboard.removeAllKeys();
+    }
 }