Creation of the HelpCameraSettingsScene

Update of GameManager and index to include the new scene
Change title of helpCameraSettings
Suppression function reset

front/dist/resources/html/helpCameraSettings.html

@@ -93,7 +93,7 @@
 
 <form id="helpCameraSettings" hidden>
     <section class="text-center">
-        <h5>Need Audio Video Inputs</h5>
+        <h5>Camera/Microphone access needed</h5>
         <p class="err" id="permissionError">Permission denied</p>
         <p class="info">You must allow camera and microphone access in your browser.</p>
             <ul>

front/src/Phaser/Game/GameManager.ts

@@ -2,6 +2,7 @@ import {GameScene} from "./GameScene";
 import {connectionManager} from "../../Connexion/ConnectionManager";
 import {Room} from "../../Connexion/Room";
 import {MenuScene, MenuSceneName} from "../Menu/MenuScene";
+import {HelpCameraSettingsScene, HelpCameraSettingsSceneName} from "../Menu/HelpCameraSettingsScene";
 import {LoginSceneName} from "../Login/LoginScene";
 import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {EnableCameraSceneName} from "../Login/EnableCameraScene";
@@ -78,6 +79,7 @@ export class GameManager {
         console.log('starting '+ (this.currentGameSceneName || this.startRoom.id))
         scenePlugin.start(this.currentGameSceneName || this.startRoom.id);
         scenePlugin.launch(MenuSceneName);
+        scenePlugin.launch(HelpCameraSettingsSceneName);//700
     }
     
     public gameSceneIsCreated(scene: GameScene) {

front/src/Phaser/Game/GameScene.ts

@@ -102,7 +102,6 @@ interface DeleteGroupEventInterface {
 }
 
 const defaultStartLayerName = 'start';
-const helpCameraSettings = 'helpCameraSettings';
 
 export class GameScene extends ResizableScene implements CenterListener {
     Terrains : Array<Phaser.Tilemaps.Tileset>;
@@ -130,8 +129,6 @@ export class GameScene extends ResizableScene implements CenterListener {
     // A promise that will resolve when the "create" method is called (signaling loading is ended)
     private createPromise: Promise<void>;
     private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;
-    private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement; //#700
-    private helpCameraSettingsOpened: boolean = false; //#700
 
     MapUrlFile: string;
     RoomId: string;
@@ -212,7 +209,6 @@ export class GameScene extends ResizableScene implements CenterListener {
 
         this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32});
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
-        this.load.html(helpCameraSettings, 'resources/html/helpCameraSettings.html'); //#700
 
         addLoader(this);
     }
@@ -550,30 +546,10 @@ export class GameScene extends ResizableScene implements CenterListener {
 
             //init user position and play trigger to check layers properties
             this.gameMap.setPosition(this.CurrentPlayer.x, this.CurrentPlayer.y);
-
-            // #700
-            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') {
-                    window.location.reload();
-                }else if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormContinue') {
-                    this.closeHelpCameraSettingsOpened();
-                }
-            });
-            if(this.helpCameraSettingsElement.parent){
-                (this.helpCameraSettingsElement.parent as HTMLDivElement).style.overflow = 'scroll';
-            }
-
-            if(!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video){
-                 this.openHelpCameraSettingsOpened(); //#700
-            }
         });
     }
 
+
     //todo: into dedicated classes
     private initCirclesCanvas(): void {
         // Let's generate the circle for the group delimiter
@@ -994,44 +970,42 @@ export class GameScene extends ResizableScene implements CenterListener {
      */
     update(time: number, delta: number) : void {
         mediaManager.setLastUpdateScene();
-        if(!this.helpCameraSettingsOpened) {
+        this.currentTick = time;
-            this.currentTick = time;
+        this.CurrentPlayer.moveUser(delta);
-            this.CurrentPlayer.moveUser(delta);
 
-            // Let's handle all events
+        // Let's handle all events
-            while (this.pendingEvents.length !== 0) {
+        while (this.pendingEvents.length !== 0) {
-                const event = this.pendingEvents.dequeue();
+            const event = this.pendingEvents.dequeue();
-                switch (event.type) {
+            switch (event.type) {
-                    case "InitUserPositionEvent":
+                case "InitUserPositionEvent":
-                        this.doInitUsersPosition(event.event);
+                    this.doInitUsersPosition(event.event);
-                        break;
+                    break;
-                    case "AddPlayerEvent":
+                case "AddPlayerEvent":
-                        this.doAddPlayer(event.event);
+                    this.doAddPlayer(event.event);
-                        break;
+                    break;
-                    case "RemovePlayerEvent":
+                case "RemovePlayerEvent":
-                        this.doRemovePlayer(event.userId);
+                    this.doRemovePlayer(event.userId);
-                        break;
+                    break;
-                    case "UserMovedEvent":
+                case "UserMovedEvent":
-                        this.doUpdatePlayerPosition(event.event);
+                    this.doUpdatePlayerPosition(event.event);
-                        break;
+                    break;
-                    case "GroupCreatedUpdatedEvent":
+                case "GroupCreatedUpdatedEvent":
-                        this.doShareGroupPosition(event.event);
+                    this.doShareGroupPosition(event.event);
-                        break;
+                    break;
-                    case "DeleteGroupEvent":
+                case "DeleteGroupEvent":
-                        this.doDeleteGroup(event.groupId);
+                    this.doDeleteGroup(event.groupId);
-                        break;
+                    break;
-                }
             }
-            // Let's move all users
-            const updatedPlayersPositions = this.playersPositionInterpolator.getUpdatedPositions(time);
-            updatedPlayersPositions.forEach((moveEvent: HasMovedEvent, userId: number) => {
-                const player: RemotePlayer | undefined = this.MapPlayersByKey.get(userId);
-                if (player === undefined) {
-                    throw new Error('Cannot find player with ID "' + userId + '"');
-                }
-                player.updatePosition(moveEvent);
-            });
         }
+        // Let's move all users
+        const updatedPlayersPositions = this.playersPositionInterpolator.getUpdatedPositions(time);
+        updatedPlayersPositions.forEach((moveEvent: HasMovedEvent, userId: number) => {
+            const player: RemotePlayer | undefined = this.MapPlayersByKey.get(userId);
+            if (player === undefined) {
+                throw new Error('Cannot find player with ID "' + userId + '"');
+            }
+            player.updatePosition(moveEvent);
+        });
     }
 
     /**
@@ -1276,53 +1250,4 @@ export class GameScene extends ResizableScene implements CenterListener {
             });
         }
     }
-
-    //#700
-    private openHelpCameraSettingsOpened(): void{
-        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
-        this.helpCameraSettingsOpened = true;
-        let middleY = (window.innerHeight / 3) - 275;
-        if(middleY < 0){
-            middleY = 0;
-        }
-        let middleX =  (window.innerWidth / 3) - 50;
-        if(middleX < 0){
-            middleX = 0;
-        }
-        if(window.navigator.userAgent.includes('Firefox')){
-            HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
-        }else if(window.navigator.userAgent.includes('Chrome')){
-            HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
-        }
-        this.tweens.add({
-            targets: this.helpCameraSettingsElement,
-            y: this.startY - (370/2),
-            x: this.startX - (400/2),
-            duration: 1000,
-            ease: 'Power3',
-            overflow: 'scroll'
-        });
-    }
-
-    private closeHelpCameraSettingsOpened(): void{
-        const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
-        helpCameraSettingsInfo.innerText = '';
-        helpCameraSettingsInfo.style.display = 'none';
-        this.helpCameraSettingsOpened = false;
-        this.tweens.add({
-            targets: this.helpCameraSettingsElement,
-            y: -400,
-            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);
-    }
 }

front/src/Phaser/Login/EnableCameraScene.ts

@@ -279,17 +279,4 @@ export class EnableCameraScene extends Phaser.Scene {
         }
         this.updateWebCamName();
     }
-
-    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();
-    }
 }

front/src/Phaser/Menu/HelpCameraSettingsScene.ts

@@ -0,0 +1,96 @@
+import {mediaManager} from "../../WebRtc/MediaManager";
+import {HtmlUtils} from "../../WebRtc/HtmlUtils";
+
+export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene';
+const helpCameraSettings = 'helpCameraSettings';
+/**
+ * The scene that show how to permit Camera and Microphone access if there are not already allowed
+ */
+export class HelpCameraSettingsScene extends Phaser.Scene {
+    private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement;
+    private helpCameraSettingsOpened: boolean = false;
+
+    constructor() {
+        super({key: HelpCameraSettingsSceneName});
+    }
+
+    preload() {
+        this.load.html(helpCameraSettings, 'resources/html/helpCameraSettings.html');
+    }
+
+    create(){
+        this.createHelpCameraSettings();
+    }
+
+    private createHelpCameraSettings() : void {
+        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') {
+                window.location.reload();
+            }else if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormContinue') {
+                this.closeHelpCameraSettingsOpened();
+            }
+        });
+        if(this.helpCameraSettingsElement.parent){
+            (this.helpCameraSettingsElement.parent as HTMLDivElement).style.overflow = 'scroll';
+        }
+
+        if(!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video){
+            this.openHelpCameraSettingsOpened();
+        }
+    }
+
+    private openHelpCameraSettingsOpened(): void{
+        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;
+        }
+        if(window.navigator.userAgent.includes('Firefox')){
+            HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
+        }else if(window.navigator.userAgent.includes('Chrome')){
+            HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
+        }
+        this.tweens.add({
+            targets: this.helpCameraSettingsElement,
+            y: middleY,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3',
+            overflow: 'scroll'
+        });
+    }
+
+    private closeHelpCameraSettingsOpened(): void{
+        const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
+        helpCameraSettingsInfo.innerText = '';
+        helpCameraSettingsInfo.style.display = 'none';
+        this.helpCameraSettingsOpened = false;
+        this.tweens.add({
+            targets: this.helpCameraSettingsElement,
+            y: -400,
+            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);
+    }
+
+}
+

front/src/index.ts

@@ -12,6 +12,7 @@ import {ResizableScene} from "./Phaser/Login/ResizableScene";
 import {EntryScene} from "./Phaser/Login/EntryScene";
 import {coWebsiteManager} from "./WebRtc/CoWebsiteManager";
 import {MenuScene} from "./Phaser/Menu/MenuScene";
+import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
 import {localUserStore} from "./Connexion/LocalUserStore";
 import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
 
@@ -78,7 +79,7 @@ const config: GameConfig = {
     width: width / RESOLUTION,
     height: height / RESOLUTION,
     parent: "game",
-    scene: [EntryScene, LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene],
+    scene: [EntryScene, LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene],
     zoom: RESOLUTION,
     fps: fps,
     dom: {