diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html index 665d4316..f0faf5c5 100644 --- a/front/dist/resources/html/gameMenu.html +++ b/front/dist/resources/html/gameMenu.html @@ -1,11 +1,4 @@ + + diff --git a/front/dist/resources/objects/help-setting-camera-permission-chrome.png b/front/dist/resources/objects/help-setting-camera-permission-chrome.png new file mode 100644 index 00000000..833499cd Binary files /dev/null and b/front/dist/resources/objects/help-setting-camera-permission-chrome.png differ diff --git a/front/dist/resources/objects/help-setting-camera-permission-firefox.png b/front/dist/resources/objects/help-setting-camera-permission-firefox.png new file mode 100644 index 00000000..7144f88b Binary files /dev/null and b/front/dist/resources/objects/help-setting-camera-permission-firefox.png differ diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index 2a41e17e..7af1014b 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/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) { diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 4dabf5cd..512319c6 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -547,6 +547,7 @@ export class GameScene extends ResizableScene implements CenterListener { }); } + //todo: into dedicated classes private initCirclesCanvas(): void { // Let's generate the circle for the group delimiter @@ -994,13 +995,12 @@ export class GameScene extends ResizableScene implements CenterListener { 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); + const player: RemotePlayer | undefined = this.MapPlayersByKey.get(userId); if (player === undefined) { - throw new Error('Cannot find player with ID "' + userId +'"'); + throw new Error('Cannot find player with ID "' + userId + '"'); } player.updatePosition(moveEvent); }); diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts index 321eabed..515e1852 100644 --- a/front/src/Phaser/Login/EnableCameraScene.ts +++ b/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,7 @@ enum LoginTextures { arrowUp = "arrow_up" } + export class EnableCameraScene extends Phaser.Scene { private textField!: TextField; private pressReturnField!: TextField; diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts new file mode 100644 index 00000000..5a3e6380 --- /dev/null +++ b/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('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('browserHelpSetting').innerHTML =''; + }else if(window.navigator.userAgent.includes('Chrome')){ + HtmlUtils.getElementByIdOrFail('browserHelpSetting').innerHTML =''; + } + 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); + } + +} + diff --git a/front/src/index.ts b/front/src/index.ts index 8b0a83b6..1b8b7205 100644 --- a/front/src/index.ts +++ b/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: {