From b7f14614057de0fabab0ea338dc248b8f7112ca7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Sat, 29 May 2021 22:04:08 +0200 Subject: [PATCH 01/48] Removing listeners from MediaManager. SimplePeer now reacts only to stores. --- .../dist/resources/logos/microphone-close.svg | 27 +++++ front/src/WebRtc/MediaManager.ts | 101 ------------------ front/src/WebRtc/ScreenSharingPeer.ts | 16 +-- front/src/WebRtc/SimplePeer.ts | 96 ++++++++++------- 4 files changed, 90 insertions(+), 150 deletions(-) create mode 100644 front/dist/resources/logos/microphone-close.svg diff --git a/front/dist/resources/logos/microphone-close.svg b/front/dist/resources/logos/microphone-close.svg new file mode 100644 index 00000000..16731829 --- /dev/null +++ b/front/dist/resources/logos/microphone-close.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index bb86e70f..5ddc4905 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -44,13 +44,11 @@ export type HelpCameraSettingsCallBack = () => void; export class MediaManager { localStream: MediaStream|null = null; - localScreenCapture: MediaStream|null = null; private remoteVideo: Map = new Map(); webrtcInAudio: HTMLAudioElement; //FIX ME SOUNDMETER: check stalability of sound meter calculation //mySoundMeterElement: HTMLDivElement; private webrtcOutAudio: HTMLAudioElement; - updatedLocalStreamCallBacks : Set = new Set(); startScreenSharingCallBacks : Set = new Set(); stopScreenSharingCallBacks : Set = new Set(); showReportModalCallBacks : Set = new Set(); @@ -108,24 +106,8 @@ export class MediaManager { this.localStream = result.stream; //this.myCamVideo.srcObject = this.localStream; - // TODO: migrate all listeners to the store directly. - this.triggerUpdatedLocalStreamCallbacks(result.stream); }); - /*requestedCameraState.subscribe((enabled) => { - if (enabled) { - this.enableCameraStyle(); - } else { - this.disableCameraStyle(); - } - }); - requestedMicrophoneState.subscribe((enabled) => { - if (enabled) { - this.enableMicrophoneStyle(); - } else { - this.disableMicrophoneStyle(); - } - });*/ //let screenSharingStream : MediaStream|null; screenSharingLocalStreamStore.subscribe((result) => { if (result.type === 'error') { @@ -137,26 +119,13 @@ export class MediaManager { } if (result.stream !== null) { - //this.enableScreenSharingStyle(); - mediaManager.localScreenCapture = result.stream; - - // TODO: migrate this out of MediaManager - this.triggerStartedScreenSharingCallbacks(result.stream); - //screenSharingStream = result.stream; this.addScreenSharingActiveVideo('me', DivImportance.Normal); HtmlUtils.getElementByIdOrFail('screen-sharing-me').srcObject = result.stream; } else { - //this.disableScreenSharingStyle(); this.removeActiveScreenSharingVideo('me'); - // FIXME: we need the old stream that is being stopped! - if (this.localScreenCapture) { - this.triggerStoppedScreenSharingCallbacks(this.localScreenCapture); - this.localScreenCapture = null; - } - //screenSharingStream = null; } @@ -176,40 +145,6 @@ export class MediaManager { //this.updateSoudMeter(); } - public onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void { - this.updatedLocalStreamCallBacks.add(callback); - } - - public onStartScreenSharing(callback: StartScreenSharingCallback): void { - this.startScreenSharingCallBacks.add(callback); - } - - public onStopScreenSharing(callback: StopScreenSharingCallback): void { - this.stopScreenSharingCallBacks.add(callback); - } - - removeUpdateLocalStreamEventListener(callback: UpdatedLocalStreamCallback): void { - this.updatedLocalStreamCallBacks.delete(callback); - } - - private triggerUpdatedLocalStreamCallbacks(stream: MediaStream|null): void { - for (const callback of this.updatedLocalStreamCallBacks) { - callback(stream); - } - } - - private triggerStartedScreenSharingCallbacks(stream: MediaStream): void { - for (const callback of this.startScreenSharingCallBacks) { - callback(stream); - } - } - - private triggerStoppedScreenSharingCallbacks(stream: MediaStream): void { - for (const callback of this.stopScreenSharingCallBacks) { - callback(stream); - } - } - public showGameOverlay(): void { const gameOverlay = HtmlUtils.getElementByIdOrFail('game-overlay'); gameOverlay.classList.add('active'); @@ -236,42 +171,6 @@ export class MediaManager { gameOverlayVisibilityStore.hideGameOverlay(); } - /*private enableCameraStyle(){ - this.cinemaClose.style.display = "none"; - this.cinemaBtn.classList.remove("disabled"); - this.cinema.style.display = "block"; - } - - private disableCameraStyle(){ - this.cinemaClose.style.display = "block"; - this.cinema.style.display = "none"; - this.cinemaBtn.classList.add("disabled"); - } - - private enableMicrophoneStyle(){ - this.microphoneClose.style.display = "none"; - this.microphone.style.display = "block"; - this.microphoneBtn.classList.remove("disabled"); - } - - private disableMicrophoneStyle(){ - this.microphoneClose.style.display = "block"; - this.microphone.style.display = "none"; - this.microphoneBtn.classList.add("disabled"); - } - - private enableScreenSharingStyle(){ - this.monitorClose.style.display = "none"; - this.monitor.style.display = "block"; - this.monitorBtn.classList.add("enabled"); - } - - private disableScreenSharingStyle(){ - this.monitorClose.style.display = "block"; - this.monitor.style.display = "none"; - this.monitorBtn.classList.remove("enabled"); - }*/ - addActiveVideo(user: UserSimplePeerInterface, userName: string = ""){ this.webrtcInAudio.play(); const userId = ''+user.userId diff --git a/front/src/WebRtc/ScreenSharingPeer.ts b/front/src/WebRtc/ScreenSharingPeer.ts index f1786ef3..947549eb 100644 --- a/front/src/WebRtc/ScreenSharingPeer.ts +++ b/front/src/WebRtc/ScreenSharingPeer.ts @@ -19,7 +19,7 @@ export class ScreenSharingPeer extends Peer { public _connected: boolean = false; private userId: number; - constructor(user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) { + constructor(user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection, stream: MediaStream | null) { super({ initiator: initiator ? initiator : false, //reconnectTimer: 10000, @@ -81,7 +81,9 @@ export class ScreenSharingPeer extends Peer { this._onFinish(); }); - this.pushScreenSharingToRemoteUser(); + if (stream) { + this.addStream(stream); + } } private sendWebrtcScreenSharingSignal(data: unknown) { @@ -141,16 +143,6 @@ export class ScreenSharingPeer extends Peer { } } - private pushScreenSharingToRemoteUser() { - const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture; - if(!localScreenCapture){ - return; - } - - this.addStream(localScreenCapture); - return; - } - public stopPushingScreenSharingToRemoteUser(stream: MediaStream) { this.removeStream(stream); this.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, streamEnded: true}))); diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index 4633374d..ba2cb05e 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -15,7 +15,10 @@ import {connectionManager} from "../Connexion/ConnectionManager"; import {GameConnexionTypes} from "../Url/UrlManager"; import {blackListManager} from "./BlackListManager"; import {get} from "svelte/store"; -import {localStreamStore, obtainedMediaConstraintStore} from "../Stores/MediaStore"; +import {localStreamStore, LocalStreamStoreValue, obtainedMediaConstraintStore} from "../Stores/MediaStore"; +import {screenSharingLocalStreamStore} from "../Stores/ScreenSharingStore"; +import {DivImportance, layoutManager} from "./LayoutManager"; +import {HtmlUtils} from "./HtmlUtils"; export interface UserSimplePeerInterface{ userId: number; @@ -39,9 +42,9 @@ export class SimplePeer { private PeerScreenSharingConnectionArray: Map = new Map(); private PeerConnectionArray: Map = new Map(); - private readonly sendLocalVideoStreamCallback: UpdatedLocalStreamCallback; private readonly sendLocalScreenSharingStreamCallback: StartScreenSharingCallback; private readonly stopLocalScreenSharingStreamCallback: StopScreenSharingCallback; + private readonly unsubscribers: (() => void)[] = []; private readonly peerConnectionListeners: Array = new Array(); private readonly userId: number; private lastWebrtcUserName: string|undefined; @@ -49,13 +52,32 @@ export class SimplePeer { constructor(private Connection: RoomConnection, private enableReporting: boolean, private myName: string) { // We need to go through this weird bound function pointer in order to be able to "free" this reference later. - this.sendLocalVideoStreamCallback = this.sendLocalVideoStream.bind(this); this.sendLocalScreenSharingStreamCallback = this.sendLocalScreenSharingStream.bind(this); this.stopLocalScreenSharingStreamCallback = this.stopLocalScreenSharingStream.bind(this); - mediaManager.onUpdateLocalStream(this.sendLocalVideoStreamCallback); - mediaManager.onStartScreenSharing(this.sendLocalScreenSharingStreamCallback); - mediaManager.onStopScreenSharing(this.stopLocalScreenSharingStreamCallback); + this.unsubscribers.push(localStreamStore.subscribe((streamResult) => { + this.sendLocalVideoStream(streamResult); + })); + + let localScreenCapture: MediaStream|null = null; + + this.unsubscribers.push(screenSharingLocalStreamStore.subscribe((streamResult) => { + if (streamResult.type === 'error') { + // Let's ignore screen sharing errors, we will deal with those in a different way. + return; + } + + if (streamResult.stream !== null) { + localScreenCapture = streamResult.stream; + this.sendLocalScreenSharingStream(localScreenCapture); + } else { + if (localScreenCapture) { + this.stopLocalScreenSharingStream(localScreenCapture); + localScreenCapture = null; + } + } + })); + this.userId = Connection.getUserId(); this.initialise(); } @@ -155,8 +177,9 @@ export class SimplePeer { // When a connection is established to a video stream, and if a screen sharing is taking place, // the user sharing screen should also initiate a connection to the remote user! peer.on('connect', () => { - if (mediaManager.localScreenCapture) { - this.sendLocalScreenSharingStreamToUser(user.userId); + const streamResult = get(screenSharingLocalStreamStore); + if (streamResult.type === 'success' && streamResult.stream !== null) { + this.sendLocalScreenSharingStreamToUser(user.userId, streamResult.stream); } }); @@ -175,7 +198,7 @@ export class SimplePeer { /** * create peer connection to bind users */ - private createPeerScreenSharingConnection(user : UserSimplePeerInterface) : ScreenSharingPeer | null{ + private createPeerScreenSharingConnection(user : UserSimplePeerInterface, stream: MediaStream | null) : ScreenSharingPeer | null{ const peerConnection = this.PeerScreenSharingConnectionArray.get(user.userId); if(peerConnection){ if(peerConnection.destroyed){ @@ -204,7 +227,7 @@ export class SimplePeer { user.webRtcPassword = this.lastWebrtcPassword; } - const peer = new ScreenSharingPeer(user, user.initiator ? user.initiator : false, this.Connection); + const peer = new ScreenSharingPeer(user, user.initiator ? user.initiator : false, this.Connection, stream); this.PeerScreenSharingConnectionArray.set(user.userId, peer); for (const peerConnectionListener of this.peerConnectionListeners) { @@ -294,7 +317,9 @@ export class SimplePeer { * Unregisters any held event handler. */ public unregister() { - mediaManager.removeUpdateLocalStreamEventListener(this.sendLocalVideoStreamCallback); + for (const unsubscriber of this.unsubscribers) { + unsubscriber(); + } } // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -318,18 +343,26 @@ export class SimplePeer { private receiveWebrtcScreenSharingSignal(data: WebRtcSignalReceivedMessageInterface) { if (blackListManager.isBlackListed(data.userId)) return; console.log("receiveWebrtcScreenSharingSignal", data); + const streamResult = get(screenSharingLocalStreamStore); + let stream : MediaStream | null = null; + if (streamResult.type === 'success' && streamResult.stream !== null) { + stream = streamResult.stream; + } + try { //if offer type, create peer connection if(data.signal.type === "offer"){ - this.createPeerScreenSharingConnection(data); + this.createPeerScreenSharingConnection(data, stream); } const peer = this.PeerScreenSharingConnectionArray.get(data.userId); if (peer !== undefined) { peer.signal(data.signal); } else { console.error('Could not find peer whose ID is "'+data.userId+'" in receiveWebrtcScreenSharingSignal'); - console.info('tentative to create new peer connexion'); - this.sendLocalScreenSharingStreamToUser(data.userId); + console.info('Attempt to create new peer connexion'); + if (stream) { + this.sendLocalScreenSharingStreamToUser(data.userId, stream); + } } } catch (e) { console.error(`receiveWebrtcSignal => ${data.userId}`, e); @@ -339,21 +372,19 @@ export class SimplePeer { } } - private pushVideoToRemoteUser(userId : number) { + private pushVideoToRemoteUser(userId: number, streamResult: LocalStreamStoreValue) { try { const PeerConnection = this.PeerConnectionArray.get(userId); if (!PeerConnection) { throw new Error('While adding media, cannot find user with ID ' + userId); } - const result = get(localStreamStore); + PeerConnection.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...streamResult.constraints}))); - PeerConnection.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...result.constraints}))); - - if (result.type === 'error') { + if (streamResult.type === 'error') { return; } - const localStream: MediaStream | null = result.stream; + const localStream: MediaStream | null = streamResult.stream; if(!localStream){ return; @@ -370,15 +401,11 @@ export class SimplePeer { } } - private pushScreenSharingToRemoteUser(userId : number) { + private pushScreenSharingToRemoteUser(userId: number, localScreenCapture: MediaStream) { const PeerConnection = this.PeerScreenSharingConnectionArray.get(userId); if (!PeerConnection) { throw new Error('While pushing screen sharing, cannot find user with ID ' + userId); } - const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture; - if(!localScreenCapture){ - return; - } for (const track of localScreenCapture.getTracks()) { PeerConnection.addTrack(track, localScreenCapture); @@ -386,23 +413,18 @@ export class SimplePeer { return; } - public sendLocalVideoStream(){ + public sendLocalVideoStream(streamResult: LocalStreamStoreValue){ for (const user of this.Users) { - this.pushVideoToRemoteUser(user.userId); + this.pushVideoToRemoteUser(user.userId, streamResult); } } /** * Triggered locally when clicking on the screen sharing button */ - public sendLocalScreenSharingStream() { - if (!mediaManager.localScreenCapture) { - console.error('Could not find localScreenCapture to share') - return; - } - + public sendLocalScreenSharingStream(localScreenCapture: MediaStream) { for (const user of this.Users) { - this.sendLocalScreenSharingStreamToUser(user.userId); + this.sendLocalScreenSharingStreamToUser(user.userId, localScreenCapture); } } @@ -415,11 +437,11 @@ export class SimplePeer { } } - private sendLocalScreenSharingStreamToUser(userId: number): void { + private sendLocalScreenSharingStreamToUser(userId: number, localScreenCapture: MediaStream): void { if (blackListManager.isBlackListed(userId)) return; // If a connection already exists with user (because it is already sharing a screen with us... let's use this connection) if (this.PeerScreenSharingConnectionArray.has(userId)) { - this.pushScreenSharingToRemoteUser(userId); + this.pushScreenSharingToRemoteUser(userId, localScreenCapture); return; } @@ -427,7 +449,7 @@ export class SimplePeer { userId, initiator: true }; - const PeerConnectionScreenSharing = this.createPeerScreenSharingConnection(screenSharingUser); + const PeerConnectionScreenSharing = this.createPeerScreenSharingConnection(screenSharingUser, localScreenCapture); if (!PeerConnectionScreenSharing) { return; } From 588e5566d0239f649aa60e733171cf63896cdf60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Sat, 29 May 2021 22:05:47 +0200 Subject: [PATCH 02/48] Fixing buttons design Fixing the color of camera/microphone/screen sharing buttons that was broken following the migration to Svelte --- front/src/Components/CameraControls.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte index 98dfa4c5..bd35d230 100644 --- a/front/src/Components/CameraControls.svelte +++ b/front/src/Components/CameraControls.svelte @@ -35,21 +35,21 @@
-
+
{#if $requestedScreenSharingState} Start screen sharing {:else} Stop screen sharing {/if}
-
+
{#if $requestedCameraState} Turn on webcam {:else} Turn off webcam {/if}
-
+
{#if $requestedMicrophoneState} Turn on microphone {:else} From 90176da8886b4a311c05f5e0bef8f6e62acdfb2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Sat, 29 May 2021 22:34:38 +0200 Subject: [PATCH 03/48] MediaManager cleanup - Removing the last reference to the local video stream. Everything is now fetched from the store. - Remvoing commented code --- front/src/WebRtc/MediaManager.ts | 43 -------------------------------- front/src/WebRtc/SimplePeer.ts | 26 +++++++++++++------ front/src/WebRtc/VideoPeer.ts | 7 +++--- 3 files changed, 22 insertions(+), 54 deletions(-) diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 5ddc4905..5ab603d2 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -8,33 +8,11 @@ import {SoundMeter} from "../Phaser/Components/SoundMeter"; import {DISABLE_NOTIFICATIONS} from "../Enum/EnvironmentVariable"; import { gameOverlayVisibilityStore, localStreamStore, - mediaStreamConstraintsStore, - requestedCameraState, - requestedMicrophoneState } from "../Stores/MediaStore"; import { - requestedScreenSharingState, - screenSharingAvailableStore, screenSharingLocalStreamStore } from "../Stores/ScreenSharingStore"; -declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any - -const videoConstraint: boolean|MediaTrackConstraints = { - width: { min: 640, ideal: 1280, max: 1920 }, - height: { min: 400, ideal: 720 }, - frameRate: { ideal: localUserStore.getVideoQualityValue() }, - facingMode: "user", - resizeMode: 'crop-and-scale', - aspectRatio: 1.777777778 -}; -const audioConstraint: boolean|MediaTrackConstraints = { - //TODO: make these values configurable in the game settings menu and store them in localstorage - autoGainControl: false, - echoCancellation: true, - noiseSuppression: true -}; - export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void; export type StartScreenSharingCallback = (media: MediaStream) => void; export type StopScreenSharingCallback = (media: MediaStream) => void; @@ -43,7 +21,6 @@ export type ShowReportCallBack = (userId: string, userName: string|undefined) => export type HelpCameraSettingsCallBack = () => void; export class MediaManager { - localStream: MediaStream|null = null; private remoteVideo: Map = new Map(); webrtcInAudio: HTMLAudioElement; //FIX ME SOUNDMETER: check stalability of sound meter calculation @@ -91,24 +68,8 @@ export class MediaManager { }, this.userInputManager); return; } - - /*if (result.constraints.video !== false) { - HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.remove('hide'); - } else { - HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.add('hide'); - } - if (result.constraints.audio !== false) { - this.enableMicrophoneStyle(); - } else { - this.disableMicrophoneStyle(); - }*/ - - this.localStream = result.stream; - //this.myCamVideo.srcObject = this.localStream; - }); - //let screenSharingStream : MediaStream|null; screenSharingLocalStreamStore.subscribe((result) => { if (result.type === 'error') { console.error(result.error); @@ -119,14 +80,10 @@ export class MediaManager { } if (result.stream !== null) { - //screenSharingStream = result.stream; - this.addScreenSharingActiveVideo('me', DivImportance.Normal); HtmlUtils.getElementByIdOrFail('screen-sharing-me').srcObject = result.stream; } else { this.removeActiveScreenSharingVideo('me'); - - //screenSharingStream = null; } }); diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index ba2cb05e..caec53c5 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -128,13 +128,19 @@ export class SimplePeer { if(!user.initiator){ return; } - this.createPeerConnection(user); + const streamResult = get(localStreamStore); + let stream : MediaStream | null = null; + if (streamResult.type === 'success' && streamResult.stream) { + stream = streamResult.stream; + } + + this.createPeerConnection(user, stream); } /** * create peer connection to bind users */ - private createPeerConnection(user : UserSimplePeerInterface) : VideoPeer | null { + private createPeerConnection(user : UserSimplePeerInterface, localStream: MediaStream | null) : VideoPeer | null { const peerConnection = this.PeerConnectionArray.get(user.userId) if (peerConnection) { if (peerConnection.destroyed) { @@ -144,11 +150,11 @@ export class SimplePeer { if (!peerConnexionDeleted) { throw 'Error to delete peer connection'; } - this.createPeerConnection(user); + //return this.createPeerConnection(user, localStream); } else { peerConnection.toClose = false; + return null; } - return null; } let name = user.name; @@ -166,7 +172,7 @@ export class SimplePeer { this.lastWebrtcUserName = user.webRtcUser; this.lastWebrtcPassword = user.webRtcPassword; - const peer = new VideoPeer(user, user.initiator ? user.initiator : false, this.Connection); + const peer = new VideoPeer(user, user.initiator ? user.initiator : false, this.Connection, localStream); //permit to send message mediaManager.addSendMessageCallback(user.userId,(message: string) => { @@ -208,7 +214,7 @@ export class SimplePeer { if(!peerConnexionDeleted){ throw 'Error to delete peer connection'; } - this.createPeerConnection(user); + this.createPeerConnection(user, stream); }else { peerConnection.toClose = false; } @@ -327,7 +333,13 @@ export class SimplePeer { try { //if offer type, create peer connection if(data.signal.type === "offer"){ - this.createPeerConnection(data); + const streamResult = get(localStreamStore); + let stream : MediaStream | null = null; + if (streamResult.type === 'success' && streamResult.stream) { + stream = streamResult.stream; + } + + this.createPeerConnection(data, stream); } const peer = this.PeerConnectionArray.get(data.userId); if (peer !== undefined) { diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts index 32e8e97f..5ca8952c 100644 --- a/front/src/WebRtc/VideoPeer.ts +++ b/front/src/WebRtc/VideoPeer.ts @@ -27,7 +27,7 @@ export class VideoPeer extends Peer { private onBlockSubscribe: Subscription; private onUnBlockSubscribe: Subscription; - constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) { + constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection, localStream: MediaStream | null) { super({ initiator: initiator ? initiator : false, //reconnectTimer: 10000, @@ -107,7 +107,7 @@ export class VideoPeer extends Peer { this._onFinish(); }); - this.pushVideoToRemoteUser(); + this.pushVideoToRemoteUser(localStream); this.onBlockSubscribe = blackListManager.onBlockStream.subscribe((userId) => { if (userId === this.userId) { this.toggleRemoteStream(false); @@ -190,9 +190,8 @@ export class VideoPeer extends Peer { } } - private pushVideoToRemoteUser() { + private pushVideoToRemoteUser(localStream: MediaStream | null) { try { - const localStream: MediaStream | null = mediaManager.localStream; this.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...get(obtainedMediaConstraintStore)}))); if(!localStream){ From 645af32b4cc991b3e0828c71fb1dd412895ec2d9 Mon Sep 17 00:00:00 2001 From: GRL Date: Mon, 31 May 2021 10:20:30 +0200 Subject: [PATCH 04/48] correction of resize select character and companion --- front/dist/resources/html/CustomCharacterScene.html | 4 ++-- front/src/Phaser/Game/DirtyScene.ts | 2 +- front/src/Phaser/Game/Game.ts | 12 ++++++++++-- front/src/Phaser/Game/GameScene.ts | 4 ++-- front/src/Phaser/Login/CustomizeScene.ts | 4 ++-- front/src/Phaser/Login/LoginScene.ts | 2 +- front/src/Phaser/Login/ResizableScene.ts | 4 ++-- front/src/Phaser/Login/SelectCharacterScene.ts | 8 ++++---- front/src/Phaser/Login/SelectCompanionScene.ts | 6 +++--- front/src/Phaser/Menu/HelpCameraSettingsScene.ts | 6 ++++-- 10 files changed, 31 insertions(+), 21 deletions(-) diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html index 0bc050ea..0bf3f753 100644 --- a/front/dist/resources/html/CustomCharacterScene.html +++ b/front/dist/resources/html/CustomCharacterScene.html @@ -10,8 +10,8 @@ color: #ebeeee; width: 42vw; height: 48vh; - /*max-width: 300px; - max-height: 48vh;*/ + max-width: 350px; + /*max-height: 48vh;*/ overflow: hidden; } #customizeScene h1 { diff --git a/front/src/Phaser/Game/DirtyScene.ts b/front/src/Phaser/Game/DirtyScene.ts index 2e94aa66..3e1f3cdf 100644 --- a/front/src/Phaser/Game/DirtyScene.ts +++ b/front/src/Phaser/Game/DirtyScene.ts @@ -69,7 +69,7 @@ export abstract class DirtyScene extends ResizableScene { return this.dirty || this.objectListChanged; } - public onResize(ev: UIEvent): void { + public onResize(): void { this.objectListChanged = true; } } diff --git a/front/src/Phaser/Game/Game.ts b/front/src/Phaser/Game/Game.ts index 01aecf9f..e267e80a 100644 --- a/front/src/Phaser/Game/Game.ts +++ b/front/src/Phaser/Game/Game.ts @@ -21,14 +21,22 @@ export class Game extends Phaser.Game { constructor(GameConfig: Phaser.Types.Core.GameConfig) { super(GameConfig); - window.addEventListener('resize', (event) => { + this.scale.on(Phaser.Scale.Events.RESIZE, () => { + for (const scene of this.scene.getScenes(true)) { + if (scene instanceof ResizableScene) { + scene.onResize(); + } + } + }) + + /*window.addEventListener('resize', (event) => { // Let's trigger the onResize method of any active scene that is a ResizableScene for (const scene of this.scene.getScenes(true)) { if (scene instanceof ResizableScene) { scene.onResize(event); } } - }); + });*/ } public step(time: number, delta: number) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 4de5ffd9..2d34060f 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1452,8 +1452,8 @@ ${escapedMessage} this.connection?.emitActionableEvent(itemId, eventName, state, parameters); } - public onResize(ev: UIEvent): void { - super.onResize(ev); + public onResize(): void { + super.onResize(); this.reposition(); // Send new viewport to server diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 8b9a9a7a..1892813c 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -52,7 +52,7 @@ export class CustomizeScene extends AbstractCharacterScene { create() { this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey); - this.centerXDomElement(this.customizeSceneElement, 150); + this.centerXDomElement(this.customizeSceneElement, 350); MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey); this.customizeSceneElement.addListener('click'); @@ -270,7 +270,7 @@ export class CustomizeScene extends AbstractCharacterScene { this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2; this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3; - this.centerXDomElement(this.customizeSceneElement, 150); + this.centerXDomElement(this.customizeSceneElement, 350); } private nextSceneToCamera(){ diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 435592f2..661ddeb4 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -80,7 +80,7 @@ export class LoginScene extends ResizableScene { } - public onResize(ev: UIEvent): void { + public onResize(): void { this.centerXDomElement(this.loginSceneElement, 200); } } diff --git a/front/src/Phaser/Login/ResizableScene.ts b/front/src/Phaser/Login/ResizableScene.ts index 39e2d74b..d06cb66c 100644 --- a/front/src/Phaser/Login/ResizableScene.ts +++ b/front/src/Phaser/Login/ResizableScene.ts @@ -2,7 +2,7 @@ import {Scene} from "phaser"; import DOMElement = Phaser.GameObjects.DOMElement; export abstract class ResizableScene extends Scene { - public abstract onResize(ev: UIEvent): void; + public abstract onResize(): void; /** * Centers the DOM element on the X axis. @@ -17,7 +17,7 @@ export abstract class ResizableScene extends Scene { && object.node && object.node.getBoundingClientRect().width > 0 ? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom) - : (300 / this.scale.zoom) + : (defaultWidth / this.scale.zoom) ); } } diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index ecbb9c64..998a62e6 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -51,7 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene { create() { this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey); - this.centerXDomElement(this.selectCharacterSceneElement, 150); + this.centerXDomElement(this.selectCharacterSceneElement, 300); MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey); this.selectCharacterSceneElement.addListener('click'); @@ -211,7 +211,7 @@ export class SelectCharacterScene extends AbstractCharacterScene { const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero); player.setBounce(0.2); - player.setCollideWorldBounds(true); + player.setCollideWorldBounds(false); player.setVisible( playerVisible ); player.setScale(playerScale, playerScale); player.setAlpha(playserOpactity); @@ -240,10 +240,10 @@ export class SelectCharacterScene extends AbstractCharacterScene { update(time: number, delta: number): void { } - public onResize(ev: UIEvent): void { + public onResize(): void { //move position of user this.moveUser(); - this.centerXDomElement(this.selectCharacterSceneElement, 150); + this.centerXDomElement(this.selectCharacterSceneElement, 300); } } diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts index 203fd557..0e32108a 100644 --- a/front/src/Phaser/Login/SelectCompanionScene.ts +++ b/front/src/Phaser/Login/SelectCompanionScene.ts @@ -43,7 +43,7 @@ export class SelectCompanionScene extends ResizableScene { create() { this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey); - this.centerXDomElement(this.selectCompanionSceneElement, 150); + this.centerXDomElement(this.selectCompanionSceneElement, 300); MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey); this.selectCompanionSceneElement.addListener('click'); @@ -126,10 +126,10 @@ export class SelectCompanionScene extends ResizableScene { this.selectedCompanion = this.companions[this.currentCompanion]; } - public onResize(ev: UIEvent): void { + public onResize(): void { this.moveCompanion(); - this.centerXDomElement(this.selectCompanionSceneElement, 150); + this.centerXDomElement(this.selectCompanionSceneElement, 300); } private updateSelectedCompanion(): void { diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts index 6bc520c0..fcc7996a 100644 --- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts +++ b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts @@ -109,8 +109,10 @@ export class HelpCameraSettingsScene extends DirtyScene { this.dirty = false; } - public onResize(ev: UIEvent): void { - super.onResize(ev); + public onResize(): void { + super.onResize( + + ); if (this.helpCameraSettingsOpened) { const middleX = this.getMiddleX(); const middleY = this.getMiddleY(); From 1ac108a9b8719781916265f03f33ea8edfbcff7b Mon Sep 17 00:00:00 2001 From: GRL Date: Mon, 31 May 2021 10:20:30 +0200 Subject: [PATCH 05/48] correction of resize select character and companion by David --- front/dist/resources/html/CustomCharacterScene.html | 4 ++-- front/dist/resources/html/SelectCompanionScene.html | 2 +- front/src/Phaser/Game/DirtyScene.ts | 2 +- front/src/Phaser/Game/Game.ts | 12 ++++++++++-- front/src/Phaser/Game/GameScene.ts | 4 ++-- front/src/Phaser/Login/CustomizeScene.ts | 4 ++-- front/src/Phaser/Login/LoginScene.ts | 2 +- front/src/Phaser/Login/ResizableScene.ts | 4 ++-- front/src/Phaser/Login/SelectCharacterScene.ts | 8 ++++---- front/src/Phaser/Login/SelectCompanionScene.ts | 6 +++--- front/src/Phaser/Menu/HelpCameraSettingsScene.ts | 6 ++++-- front/src/Phaser/Services/WaScaleManager.ts | 9 ++++++++- 12 files changed, 40 insertions(+), 23 deletions(-) diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html index 0bc050ea..0bf3f753 100644 --- a/front/dist/resources/html/CustomCharacterScene.html +++ b/front/dist/resources/html/CustomCharacterScene.html @@ -10,8 +10,8 @@ color: #ebeeee; width: 42vw; height: 48vh; - /*max-width: 300px; - max-height: 48vh;*/ + max-width: 350px; + /*max-height: 48vh;*/ overflow: hidden; } #customizeScene h1 { diff --git a/front/dist/resources/html/SelectCompanionScene.html b/front/dist/resources/html/SelectCompanionScene.html index cffa7880..30c782cb 100644 --- a/front/dist/resources/html/SelectCompanionScene.html +++ b/front/dist/resources/html/SelectCompanionScene.html @@ -128,7 +128,7 @@
- No companion + No companion
diff --git a/front/src/Phaser/Game/DirtyScene.ts b/front/src/Phaser/Game/DirtyScene.ts index 2e94aa66..3e1f3cdf 100644 --- a/front/src/Phaser/Game/DirtyScene.ts +++ b/front/src/Phaser/Game/DirtyScene.ts @@ -69,7 +69,7 @@ export abstract class DirtyScene extends ResizableScene { return this.dirty || this.objectListChanged; } - public onResize(ev: UIEvent): void { + public onResize(): void { this.objectListChanged = true; } } diff --git a/front/src/Phaser/Game/Game.ts b/front/src/Phaser/Game/Game.ts index 01aecf9f..e267e80a 100644 --- a/front/src/Phaser/Game/Game.ts +++ b/front/src/Phaser/Game/Game.ts @@ -21,14 +21,22 @@ export class Game extends Phaser.Game { constructor(GameConfig: Phaser.Types.Core.GameConfig) { super(GameConfig); - window.addEventListener('resize', (event) => { + this.scale.on(Phaser.Scale.Events.RESIZE, () => { + for (const scene of this.scene.getScenes(true)) { + if (scene instanceof ResizableScene) { + scene.onResize(); + } + } + }) + + /*window.addEventListener('resize', (event) => { // Let's trigger the onResize method of any active scene that is a ResizableScene for (const scene of this.scene.getScenes(true)) { if (scene instanceof ResizableScene) { scene.onResize(event); } } - }); + });*/ } public step(time: number, delta: number) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 4de5ffd9..2d34060f 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1452,8 +1452,8 @@ ${escapedMessage} this.connection?.emitActionableEvent(itemId, eventName, state, parameters); } - public onResize(ev: UIEvent): void { - super.onResize(ev); + public onResize(): void { + super.onResize(); this.reposition(); // Send new viewport to server diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 8b9a9a7a..1892813c 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -52,7 +52,7 @@ export class CustomizeScene extends AbstractCharacterScene { create() { this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey); - this.centerXDomElement(this.customizeSceneElement, 150); + this.centerXDomElement(this.customizeSceneElement, 350); MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey); this.customizeSceneElement.addListener('click'); @@ -270,7 +270,7 @@ export class CustomizeScene extends AbstractCharacterScene { this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2; this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3; - this.centerXDomElement(this.customizeSceneElement, 150); + this.centerXDomElement(this.customizeSceneElement, 350); } private nextSceneToCamera(){ diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 435592f2..661ddeb4 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -80,7 +80,7 @@ export class LoginScene extends ResizableScene { } - public onResize(ev: UIEvent): void { + public onResize(): void { this.centerXDomElement(this.loginSceneElement, 200); } } diff --git a/front/src/Phaser/Login/ResizableScene.ts b/front/src/Phaser/Login/ResizableScene.ts index 39e2d74b..d06cb66c 100644 --- a/front/src/Phaser/Login/ResizableScene.ts +++ b/front/src/Phaser/Login/ResizableScene.ts @@ -2,7 +2,7 @@ import {Scene} from "phaser"; import DOMElement = Phaser.GameObjects.DOMElement; export abstract class ResizableScene extends Scene { - public abstract onResize(ev: UIEvent): void; + public abstract onResize(): void; /** * Centers the DOM element on the X axis. @@ -17,7 +17,7 @@ export abstract class ResizableScene extends Scene { && object.node && object.node.getBoundingClientRect().width > 0 ? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom) - : (300 / this.scale.zoom) + : (defaultWidth / this.scale.zoom) ); } } diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index ecbb9c64..998a62e6 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -51,7 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene { create() { this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey); - this.centerXDomElement(this.selectCharacterSceneElement, 150); + this.centerXDomElement(this.selectCharacterSceneElement, 300); MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey); this.selectCharacterSceneElement.addListener('click'); @@ -211,7 +211,7 @@ export class SelectCharacterScene extends AbstractCharacterScene { const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero); player.setBounce(0.2); - player.setCollideWorldBounds(true); + player.setCollideWorldBounds(false); player.setVisible( playerVisible ); player.setScale(playerScale, playerScale); player.setAlpha(playserOpactity); @@ -240,10 +240,10 @@ export class SelectCharacterScene extends AbstractCharacterScene { update(time: number, delta: number): void { } - public onResize(ev: UIEvent): void { + public onResize(): void { //move position of user this.moveUser(); - this.centerXDomElement(this.selectCharacterSceneElement, 150); + this.centerXDomElement(this.selectCharacterSceneElement, 300); } } diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts index 203fd557..0e32108a 100644 --- a/front/src/Phaser/Login/SelectCompanionScene.ts +++ b/front/src/Phaser/Login/SelectCompanionScene.ts @@ -43,7 +43,7 @@ export class SelectCompanionScene extends ResizableScene { create() { this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey); - this.centerXDomElement(this.selectCompanionSceneElement, 150); + this.centerXDomElement(this.selectCompanionSceneElement, 300); MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey); this.selectCompanionSceneElement.addListener('click'); @@ -126,10 +126,10 @@ export class SelectCompanionScene extends ResizableScene { this.selectedCompanion = this.companions[this.currentCompanion]; } - public onResize(ev: UIEvent): void { + public onResize(): void { this.moveCompanion(); - this.centerXDomElement(this.selectCompanionSceneElement, 150); + this.centerXDomElement(this.selectCompanionSceneElement, 300); } private updateSelectedCompanion(): void { diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts index 6bc520c0..fcc7996a 100644 --- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts +++ b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts @@ -109,8 +109,10 @@ export class HelpCameraSettingsScene extends DirtyScene { this.dirty = false; } - public onResize(ev: UIEvent): void { - super.onResize(ev); + public onResize(): void { + super.onResize( + + ); if (this.helpCameraSettingsOpened) { const middleX = this.getMiddleX(); const middleY = this.getMiddleY(); diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index ca8b668d..8ca4ad20 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -2,6 +2,7 @@ import {HdpiManager} from "./HdpiManager"; import ScaleManager = Phaser.Scale.ScaleManager; import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager"; import type {Game} from "../Game/Game"; +import {ResizableScene} from "../Login/ResizableScene"; class WaScaleManager { @@ -30,13 +31,19 @@ class WaScaleManager { const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({width: width * devicePixelRatio, height: height * devicePixelRatio}); this.actualZoom = realSize.width / gameSize.width / devicePixelRatio; - this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio); + this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio) this.scaleManager.resize(gameSize.width, gameSize.height); // Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves const style = this.scaleManager.canvas.style; style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px'; style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px'; + // Note: onResize will be called twice (once here and once is Game.ts), but we have no better way. + for (const scene of this.game.scene.getScenes(true)) { + if (scene instanceof ResizableScene) { + scene.onResize(); + } + } this.game.markDirty(); } From b8873d127780b92425ee9b6110e0b42ed4405283 Mon Sep 17 00:00:00 2001 From: GRL Date: Mon, 31 May 2021 12:06:11 +0200 Subject: [PATCH 06/48] selectCompanionScene work with svelte --- .../resources/html/CustomCharacterScene.html | 3 - .../resources/html/EnableCameraScene.html | 3 - .../resources/html/SelectCompanionScene.html | 134 ------------------ front/dist/resources/html/gameMenu.html | 3 - front/dist/resources/html/gameMenuIcon.html | 3 - .../dist/resources/html/gameQualityMenu.html | 3 - front/dist/resources/html/gameReport.html | 3 - front/dist/resources/html/gameShare.html | 3 - .../resources/html/helpCameraSettings.html | 3 - front/dist/resources/html/loginScene.html | 3 - .../resources/html/selectCharacterScene.html | 3 - .../dist/resources/html/warningContainer.html | 3 - front/src/Components/App.svelte | 10 +- front/src/Phaser/Game/GameScene.ts | 2 + .../src/Phaser/Login/SelectCompanionScene.ts | 65 +++------ front/src/WebRtc/SimplePeer.ts | 2 +- front/src/index.ts | 4 +- front/style/fonts.scss | 6 +- 18 files changed, 42 insertions(+), 214 deletions(-) delete mode 100644 front/dist/resources/html/SelectCompanionScene.html diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html index 0bf3f753..9a8aac4d 100644 --- a/front/dist/resources/html/CustomCharacterScene.html +++ b/front/dist/resources/html/CustomCharacterScene.html @@ -1,7 +1,4 @@ - - diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html index 6abf2753..399cf349 100644 --- a/front/dist/resources/html/gameMenu.html +++ b/front/dist/resources/html/gameMenu.html @@ -1,7 +1,4 @@ \ No newline at end of file diff --git a/front/src/Stores/SelectCompanionStore.ts b/front/src/Stores/SelectCompanionStore.ts new file mode 100644 index 00000000..e66f5de3 --- /dev/null +++ b/front/src/Stores/SelectCompanionStore.ts @@ -0,0 +1,3 @@ +import { derived, writable, Writable } from "svelte/store"; + +export const selectCompanionSceneVisibleStore = writable(false); From 13d32273238f51100ee2da4b8e4e4d070a3943b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Mon, 31 May 2021 17:03:29 +0200 Subject: [PATCH 08/48] Migrating LoginScene to Svelte --- CHANGELOG.md | 4 + front/dist/resources/html/loginScene.html | 117 ----------------- front/src/Components/App.svelte | 5 + front/src/Components/Login/LoginScene.svelte | 119 ++++++++++++++++++ .../SelectCompanionScene.svelte | 5 +- front/src/Components/images/logo.png | Bin 0 -> 15822 bytes front/src/Connexion/LocalUser.ts | 2 +- front/src/Enum/EnvironmentVariable.ts | 1 + front/src/Phaser/Login/LoginScene.ts | 59 ++------- front/src/Stores/LoginSceneStore.ts | 3 + front/src/WebRtc/ScreenSharingPeer.ts | 1 + front/style/fonts.scss | 6 +- front/webpack.config.ts | 4 +- 13 files changed, 150 insertions(+), 176 deletions(-) delete mode 100644 front/dist/resources/html/loginScene.html create mode 100644 front/src/Components/Login/LoginScene.svelte create mode 100644 front/src/Components/images/logo.png create mode 100644 front/src/Stores/LoginSceneStore.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index d9afd71e..b9b0a926 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,10 @@ - Mouse wheel support to zoom in / out - Pinch support on mobile to zoom in / out - Improved virtual joystick size (adapts to the zoom level) +- Redesigned intermediate scenes + - Redesigned Select Companion scene + - Redesigned Enter Your Name scene + - Added a new `DISPLAY_TERMS_OF_USE` environment variable to trigger the display of terms of use - New scripting API features: - Use `WA.loadSound(): Sound` to load / play / stop a sound diff --git a/front/dist/resources/html/loginScene.html b/front/dist/resources/html/loginScene.html deleted file mode 100644 index 9c076693..00000000 --- a/front/dist/resources/html/loginScene.html +++ /dev/null @@ -1,117 +0,0 @@ - - - diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte index f8a2589f..286b5687 100644 --- a/front/src/Components/App.svelte +++ b/front/src/Components/App.svelte @@ -7,12 +7,17 @@ import SelectCompanionScene from "./SelectCompanion/SelectCompanionScene.svelte"; import {selectCompanionSceneVisibleStore} from "../Stores/SelectCompanionStore"; import {Game} from "../Phaser/Game/Game"; + import LoginScene from "./Login/LoginScene.svelte"; + import {loginSceneVisibleStore} from "../Stores/LoginSceneStore"; export let game: Game;
+ {#if $loginSceneVisibleStore} + + {/if} {#if $selectCompanionSceneVisibleStore} {/if} diff --git a/front/src/Components/Login/LoginScene.svelte b/front/src/Components/Login/LoginScene.svelte new file mode 100644 index 00000000..6a05ba9f --- /dev/null +++ b/front/src/Components/Login/LoginScene.svelte @@ -0,0 +1,119 @@ + + +
+
+ WorkAdventure logo +
+
+

Enter your name

+
+ {startValidating = true}} class:is-error={name.trim() === '' && startValidating} /> +
+ {#if name.trim() === '' && startValidating } +

The name is empty

+ {/if} +
+ + {#if !DISPLAY_TERMS_OF_USE} +
+

By continuing, you are agreeing our terms of use, privacy policy and cookie policy.

+
+ {/if} +
+ +
+
+ + diff --git a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte index 8638dc4d..9aaa0757 100644 --- a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte +++ b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte @@ -41,9 +41,6 @@ pointer-events: auto; color: #ebeeee; } - .selectCompanionScene button { - font-family: "Press Start 2P"; - } .selectCompanionScene section { margin: 10px; } @@ -80,4 +77,4 @@ } - \ No newline at end of file + diff --git a/front/src/Components/images/logo.png b/front/src/Components/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..f4440ad51079b55755f5b1f510ed6da89907fcee GIT binary patch literal 15822 zcmV;$tqyk4vm|jMSEvmS%*8hDvU3ZjB&O zQBgLlqwa#^U&HV5Ct;rm>?SK<9~llzsSHmMM)LB~qh)3-kzLqb9% zKR;ipsz_QSCnrael9FWFv}s0MT%7dm+0#WltxV*Dbfe2&JPG>A_f)5w+1=kJ`zloO z>3Wzz&Jp(S-*51pzl|F=8cY~Ttz5bCNJ$@NN@}7jnKN_EjKYMOxkf)09oTK~soz<& zeAoWk-HbQS8E!>^VFV!jzB0oIvWfBROQVdG5(mu~+f`C2l3p(I=|RI7ci$}%5$M37tmVM(3dmhbsVLdoQY->g z+cIaAN&7P;(Gi^_!Ea?@byy`!x(FT4j{nzRf4xi2%sUbE#wY&M-{BHHve)>s& z{cf|#v*7(m9me(iyXZAng7EUU)p1_+nEqu8z_!dRzgxuz>2`y=}G>Ik$|_-j8{wj z>{4j6i=R!lq*vHvFC-on;y{_dU5fGh;-%q|S$RZhQYld!v)k=1g-cf^EIvN|$f=q# zd8Dt3W4aa4M5s2%F;B{tI_CiN5pj1x7bQUt@qK|wukCm0CAu%ltJZf@lTwsEWUY>F z9jo*p-jl}7TCCpdLA$*C?Jo)k8p$2VErKUqMtABP&B{c)LpLc%F*Q+3;U3^8gDM~) zJE6xMjh{$HUXcX&%Q;n*vcxDWl}M-Ft1QfwVy6P~%gG=@gwyy6F)ZApoJ!+`>GPHQ;;c$z5q^K*w*k1bQnQsi z-`4?u#0atfnw(;+$gMPHWmdXqADa{(nu8f&cvna zbxhxLXoiJ6F>{Ibl2N_Slz)vLC(r+~#MlA6HNXC#{I;)jgn6;gIX3#~0NVYve&_t> znh~$R{^T!;mO(s?^H)4wtpLq#Zw#|0#LO_OpY?m?+au+r&%Ts_2XaH`w|>)Bx$}aa zw#4*Y7c=O7Udzz4i_2x1c0WBl)P=+M$Deu578PMYtDbC53**o^i*fFojv^QT)UUDF}v&QA~+=$R;{QP9* z!o9hx&F(p+72;x=xjSG+;=7hI-9?~uQQ8hwH5qp7^q*xHn$P%PQKtUoXPr)GX&Tx{ zHpBEE(8TuI_gTiU1zASISq*Kr+@MBM26m!-KbRTVNKQpK!eh_BDC>dWu^wpEw+$+; zl<(+X9Nb6>(L_&AHk_ zdn+{MyHVd8!@jJjl2PbS+(&nv_AA4vXq@_hy-j{-uri76WD-G3nfj>1zdtg|4L{gQ zy_yBu64J{IyUma@n+MsJ9V|ot9u^T2Xc#uRA|_M{3JY!X(I7BcRY>2Um@tkdsDxh7 zyRY%;=QC9IfPUyD$+=DaZ41#DR3Q8%VRqZx9EVYMsWWq*u1Gdw+jo#Y&HP+U`#rr( zDM8)Cy0B$KsVXnqxFDlEe%ajLD4*|9b0EHbdt(`NRJRK*R|?_G(@rxMXIC1L z(XBC9Wit}sw;VbtF|X2C1tYk5v*t!z%a-UcRw<*F1}=ZmvF(g{c9}?{_veEZMvI6j zW!SEUp^IKs)KMq&FbUZ8uw!9ip=$_IyLo%oHID7uwn}D|U4o$OM}769v3AXBDTRg0 z;f}!IVC8o~c!-?U$WOhWG3ZuFOWP|eatwLwo;&2?CVo~ZX+(4?24r%nSp z1AaEcsKDTje=5w9!n`a;^nrG{aol9N<(<1?v zct%jRBBjsKBL!38@&4@tWJtIT#)Qbd6TeW1tmBGd;2iPa-D^D5pn-%d&%f|rbtmsI zA|f$dwA`wqNsTd_ojw6H1slr>A)7j+rv-qLWa-PQ0TiL&o`;J|@e`l^ZWq6`9Xvk2b@0EQN4h9X&Vj$Rgi`bkA0E(KR?nX;m^PJ%$4^NZd*5x6jXvhX z7x$F6=dYBg1|pBVG2VFZKSL!4?)CirB%>f-y$6Ogfb{z%5dWI!MpBG{1p;+l^N0wA zv#Zqbj|Jyq!Wv0XaEMI*^h5dPi>b1$#E|W1FgOiHC_-AwoSjp~qe=?yq}>oL{J9Nm z@*C0^g($l4|5!~A)p9aOK9u?^-_4SlFe5PZ z3~ld7bpY~FiT+*RFq@jnZD?~e3+>S%FF}hC7#Jkwz;{il;Cl|b!)0h~i*TG+AILzd-827)V~!(2ZgGprK25VaR<9c0de+G7K{x$<2wG$fDwYEn4od)Th9;Ow7fr_# z4RgHacfVkXsw}Q)I5%tx4d4yDb<*j6B!1rF@wxjrpr$#GM5t;LMju=MnH+Gb*%LAQ z-qgCzOKtw1{B$_|tgZRbIOeCu=g1$L;vrVQdj4{OQ7ONh-T96trzQHQfB9IAH64HE zx4+pyV?|5|~aD9u3gy{8^CzL_vqRYrCR zRHqAH3w~cJw(PxXjH>megQRssyNW+?-mk_JgZen|v5bOaS7|V>n+DlsNcULdk@r58 z*fTCv#%L%kSH?JZ`Zx0S(CgjOd@_ExMs0QGbZsegc?~_`aF~6?0FZ>{I9Fm}yb@1KOS{S-p z!78M2adECmd2b_0br~eF#$*02L4S5TRx0c(GUVUWW+^XDHEa!tl!+LjqcE{AzB#W- zN=o1XFwnJHf=+pJv~eL=y@XZm%ANnR83H31Td}%u*8%5r1>E;wuw*M}bPTi0q{r`) zwZHwS!c017sD6KPWn;Pa`B!E9eK#xj1sPQm3r!aQ`so-b*@JB*-ST`s2DW{!6?XrxXPH2yB zGrSmUmp+d?C4-(Bt(+SpFy`et<74>)t!*d0jpjCpMh+ZHjizT{6lb0P%mZ;+%N?m! zV^gPxU`d`u>mMLJi^?UD6ABz>xB6qg)keR{a!GJlWzK|I9u!;9Qj6t0#X~w2G|;cF zgE9=1r;VKftkH7o3@E|0%l%NM?>S{z2a~{%lfN_IRnRz%r{PGOPP3qy1&nmHkn#OU z1&v{SaAI(vM$<{#j8IqM@{~>Uw1W0G3zl}{^Js*Onue2Gjz&|reGck$)0$)M*PqMi zA-Ac0WyB|#{gs2$ZS$H$dF8jp7oV}!^Yb%) z&Vud&Sm~R;KYV_;d^PShTX>5IV#N30@~gB)Ha$`!&&hT_nXb;a13v(bq;U*27%HxwzV)woA^U7 z>M7gSBvzpL^XK$6p+oo6Wyove-x&A!&^MKX^B)<=Uu|HHhx7+xO1lJ8-2{Z?a%S3e zE-=&MJHw#x+GzxS>pakH&!(g;oE-*kqmMVFL_|f$DEpJ~Vsdd0p6C`;gQjVwQSIw^ zV;pASH%*H5%a+LSE6!D3x^i;*&}?p)=`Wx2tBkm=kHUBU+oC_h!lkN)plQ##KFtE= zNt0<$JE%-Ty87SnY*?_%S>Kg_G%)t#Fm8`rGS=)x_) z1^Ar_%k9xGeiA$O%P~D~UVF*Ev5QTu-Pg#K73H!Y^sxp{72qvRZ8ChuJURV>i`8<3 za~g_p>u`2(it=7@3OiHemXL{V$Uh^XIA#00Xdwqaz^g!2Cq$mgYu@S+@!VNh_=(;y=yB~xW6(#1DSzXdO9HsAWF@3$DOOc<$ATbi=dA&Z zV;Ay_RT$FHtY%D@Oyg<@K{xQ>(GNbCu&PpHJHqq;O>QjVa~krZfkL(o{;Z^1)-02k zuIlA_95|HL@|3dL!g#{> zxt;tR@M*G>zl{H$Ijl_^9jV{nGpD{(`8ZGu2e58%D7)+CUxPsDtb<^z=M}Rb-6@mz`TdH8PE z(Kdl*si zr^z2*O&Ze(L+kz!utMxL<~n~3JjnF`R>($ScWX-&_`P>rue@IQX})wnKSGU$r-G&i zPVuB;xke}^9h-pO*t;G0H$MKfoZh3GvYw<@tS; zpi{t@(gllG$mBlk&0Wu&c%^(XA*jU0%9u<{-8=w2; zH)$9gBt;qfp2&l?2td(NlZBY76V~7>0br@8q1mERWT6{p#tX#>~-Q-f}S}(e(%W0`Ns$t`Qf(V#Jn_{o_a#Ot_vH@nlLUdjwC!zo-2=I z@DJyEsitQKjB9Ei80rer&{T09e;8IIP!@8~ToypEH1JgGUHOKz#d~nl zwZ}dJ(vRuVRW2Rzj?91Yp^rv~%%3qj4uGr8&YBx_BuCB>p^F@e)fblds z!saClBw^ftv3p2;s(%ep(k;+rYM^kof<2~P;I$bm20z#IC?wIKse#|@3}_*Sjh4-m z^|e3kw8m&MHSjG8_M(P+!*LD|b~tIE&|Q81zoqBZH{GS;)*dJ6^Dk>I{|x@IuqXgp zz^W=MpbalQEwG3g^E876s90k&atzogZ9%;O;dm46hs%`EZrM%5b|s| zFnaE@tO4lMx`5hjXoStR!-^ipN_x zX@L#o{)$359}5L%D3#?z^7EJ8)MOAlDpMCA%xAE%?)0!IvBK^z=UKP#F(4Hzs!4U* z>Y{e?ym%Bc^Hw=#^+*hVtB{$6OS4aFvLg{PO~d#6`*YwgYc9>K(86VQ^Sz(E9B>md zy%$qwx2_sY;~&Y>rcOXS{E+qQON+`PnX>pm?&YCrjna}z8J6KeJHuI{^O`2lgMEIm%7ACjFbP|DU`_GFEeaIdp zKU9^-uhuJ6tZ`K!z=bWt?nalP*W&%TgSCHFahVKg*Zgd>zxAdktXt3`rnT}a!vg$E zqQh>0`!&G-m&W(@#FZ_h(e~yd?PKhwv|rh-2?RZ=~?dICS7QaO-2Q;|$D2 z-hrKMlI0)b>Nwai=B6Pj?VvR6>7b+CaE|;V+%)SrBGy6ATbgtjrd@*{=)XBP11pME9lS0EgBvps(U+s|(6~uAOKu zV1bg+oJNg-^&d+D9zYLyu=5I8R`ff9esGV|<-XU(Kgb|FmzvXAJkeM~Z|B+8{Kj3i z>YgOt(e%WC%Vf>(a}^o~dkIWSCv>cLp!15EFc)yRPN&l}bf^3&44uH24WMa02bA%r_{L4h{_Gv)jGVnqPn`gB!s`C+7*OTm;uHpEh`>FK z+|+9+Vm;QXHn462BQc=5WBwPPwds2PMG|oHoo+k0Nr%TvQy@ua7vfOhJ{RtEbUbu? zXnxdQMx7of(iV*jJhg|N1w~-EZO%Mgb+3{!Ie<#TJZYLJ+?#%Rtf@fv>)C% z}+JgO$Iu7CyxDi>?G)-zKKjLyvCBc$*HE+xNi8YW0d8p}I@O3&Bx|@(`0w>Bd z%D+OLj?LZPgbkS9;SO^w^HR67g(G+7%=4)3HmKdKeFR%QxyW8BuUA!6-hjDwRZY3s zRRb@DZ3m6SxknvGd4)ZhM}YGX`8a4FeV9ALa8A83;^Zb`76P=Q+Ub7Z;Cp4}M;g3ql%yX5X<(li{yA_Vc{<6~2-)j#POGAv+cZ1qy zK~4Q_zN%T>+QmwvmT{7dnoNc{!Pr$;CZ*iM56+$DwEtmiJ-#n1=LQPja`@>R#u+9L z18u7?!%mGx;j1dEmwEkjBP6Q#Af;*YAS~+_&DZpm_TthbE)8l20sP0d9ZBZeBs3aghCvnz#|Ug+r-KeTm*^Q zAQ@N(7mGZSHg7;)1wPP3IFM(G%n|(Pgv?3fxILnSs?=%-Zo`KXlaW_nqS7*G*mH8t z6E8|Lv~|t{5S2T$hqQq}t_L5e>Iu=&9rm<6<7`PrVNm#Z%z*|rd$jj0yC-0@_@pPaB9^`**KjBcDEe zw>|2_pWTy!pk<-IYyR z$OUKgP&KkU+y@Wr>q;L5fZD1Z1e1a`_|eB$i3K;m$tRE9C*OVi0asQ055o8^W+2{V z^Ni(U(w>3|A$;e%nd&TwFyQYj6N72wVJ0u#*q1{X(j8i3FVe$9OEyFB2VO7!-%ndm zQIxVxB3j2O4dCs%9vb0mkOyjHYFaCFhW~cNLE3D3U;Scc3hmSmr<^LByQe_$4i^oq zP~-~*o_v6i&PQ{2353yL1*3*bgrI5jqbb7DzT-hQT=|Z(Fw}J>&f7$AcPc6^Xg+^^ zU#W4WiH_9#Gz*p|fzr611nbxt`8t;BXQRq8tmQJK6~-HiD^QY72tf%3KpJ3XsA(JR z&K0uJI9Vqb#n%BAO~EBsN`1@^(T?kc$(@U$!lft|zE0Is0OmC=tALg6hno~}DGx5m z4unlJcKD<6{ih$1;b|zG8#Vpj(P1)kN2c(++txVkBI4pJCAhpo3Nc%LI_MN&{`0i* za(T%afCAsRtX#5?o)}!eGHsevV)5ifWmU$4#+ZYufKI8>hL?`S`OJhGj5o@W_CWD> z^_#1addEe|?Clv+P~k5PvA(U#MOR2Yq`eG_-fXa^n8p5aOX?ow;A!W?njEAPw%gk}^nnunS-#+)zfI~k8I=+9_k`g1TACfRdV9Db8& z{6R((|L8_d1|C1^L8;K&4KReE24g{gu-OAL%@w*ALM9fN-7zP71LkC>X*X&YY9b9x zw>d2|{87$h4wV*$gCMBEScsLIsG2pIr?}84xE&g!(_(#6^Qq=ipUHnL4qRa*M{*~T zHF0(M)~efzOI7U&yy2U0^C)2YyEc5_xy6De>oGLX=fUv|9sW>HD}CB%1gpEl)%|}B z9Fx$Ym-i|J@jU4EtK37?_?ih#{4!m=@r-_+;=-jEF}4!fP5(oI8>3D%Av;v&eExqA z4!8-~p_0Vi;~HoD&%e|utT_zB{@LMl`g~6x2Yej(XK{e$pAUQ-@NvM$ffJqsb+WEJ ziqTs|w!6K8#HJ`VUea3mZ!EM;a^V1KqEGRMV?)iu5&VS+D=j{`mqocJ8@bu&-= zGW6xZ#{nM)z=6ZE%zPX>HXPtwf5(oU-<|NqZxRyOOzd0>hN%@b365t0e*brUKiRrs zemu^NNw&s{x%^koIP>f$#!jD&6*_jQ!aSsn^NpM!$K-Z)S*6_4D_$zf_cT0sPzr*A zq^-SDA`Be=F?`f(vDe)7pxC(bgzM8WX|HZH;bINYsKP|M9W)Hm<53TsMJEn$na(f2 znIUgI@UL&|e)5)oux!HK=}ex08r>>(#)O~dN|T6|SoDG0xe=}kaq!$hhPRO>!rQn~ z15ThSHY{MM!iruy7k)bNwxk@8+s}&I%d4cYP9Qz6RJJnz$n(T2`VAa1;)5?83q!DO z5M&S+;z3*o@f;A-paN6O0a$B%F4muPkBV&h?)yK?k?_bEl^>hV58`G1_?=r?DYxR5 z@2t$7C;eTxIG z+`nGPkSQsJf{HGgKrce&hmLVyf`{*VP&oAv9(Uehc_jBO0ohNf9u>#ASW$NQO*dWl z{?m_L_w&TDTwV7+rZFXDm#jUQCvC&yBm|2>pkvjMfxHb;X&to!$dOK^bQuUZ>c=<` zS1=S*vyQRyU8d1;>Fi(sc=ca>J_E*`_$gSl_z%ep4p#cL0O_ZmbuA%uEHJcV;nNdX zaQMotFT5`O?te@Q5&2H4Kk$f3yB_#l4@)wk?~zB)pi}Nk8#Z zjVg=r}`#*>RB znLNA8d?u?7#4IsxLPPQlX~_p|=B)w31MJ-{>-Wl&Q-4x%^8jnc&HM#JAu|ptF&@WB zWAKwFhsw-J?r{N0FFGP zg9<6A3P+Hlvis9w!IK0*Y9qsdR0vRFsVwa9Cw-=s9<**42WePAr5f(#hy#CEs_y6t zGLO_XOs^T(Y+jgpRAS{sKUoVM*&JEXFUuwkqNTI{C`DkzAK@ zXP0!|w_nMG`)_7;n66ZW&qH{p9jjyVJx??auo3scapFKB4iVz!Dm#wrpt5LWI+8ZH zVIyf69vL=nO{#=qkc|~`(2xiC3mN;+J+k7LAJH9!HHPsYT4gvm3DySAX@>QsfSSkx zbZKCU1H)smbkxRlVsgBx3txB=J@#$=PQ}Hp7`vnapznttl^f#-uro#OP!57He59c% z4g^IUhTJvoQ+a5@XRwf%R!6uT?3v)k9~;ahc1x9YmUBP`wTn=SMk!EJ6ig3Kx@SH} zf;$%r5GNY~jvcbMSl<*k6>c%&F2oD1%Kf{x%itdE9kg*P64J2*V}BpOl3dCC;66C9 zIpB5xyEQBN@K5b-KHbc^JM(A{qtbEcXKhwtTwI(+t8u`)rvt29$d;Es<6s3#6t#X9 z78FS_6cD?YR07x_swx_fOulE*H;xJmcU?{8*{;`9oNC z{kRPn!KJjUO!?tefq@b6G}s>4c&EB&jDyya8juGD6@?X2vvVaJR5&p}vxS!r;ZLx^ zRMNA|M@l(D?#HbQjey8*9Tf@Vpp`{MyJPJ#$;Ao0W@sLR!y3ADbL?&eP14ON^^?>3 zUM;!%Qf2qrm1cA(uS(g9t;x(Y&nc%;ROyEzJcxW#sk!2Y8!b=9Z9_(J9=>GR{1xqt zT{~p|rgihM=j;Dm<9BW``94lW4)`py<5_B~l>k1lOIr@2cELuG=D4(pXE12>axi6w zEco<&i8}i-iNLQJ2GV%36hY&l?kWo^1BVaP^U_bFC6k3X%F&IDz+ncQW6}Xm0+mDV9=YM@02R|`%D7nzo zc|lF&ris&K$IP!}(gQcU;WHfvaF0;{@)v=7hhS{E(niE@UKlO`5piSSklG%zo z9#$GFKY^7LT{~Q*LzPrrK@CpJU3GyJ=jTaU@&*Z;{-rdHj*%Njj+M~U&Q!SiA9M(A zy0fVt-DtJA)pUHa8`cUp*%7pYQXlv?{QCtsc0v4#ujFuV*;S6R=~4c|`{hHyj$AKfZ5wx|<)&Qrl3^=_lTA@4hBM=$EdEC1*|y>R(Sg0k9Ji8-E~i(7PZ@Eg_pES1dnb{9%uaP>5t zIlMI=GHOsp|*5*qN&~L60SBJ z@~8}ofBW(!>Nn-_`{j|ZX3D9T_R&$eDe)F2`? zsjoM5mpggoTbkiw#|isl5wF_wVIB0Z9sBtBdb7liPinlz%3fgwhqh`1oZ{HkyaS-9 zQhoxy4Xfctqp}V|udz;mAuRT{?nBpZEuxICQ=r~{3~Lm}T6tON z{~6y_1*YS`^u5ah&~AUl6BgFzu&}r#=%@fz%R+QTFV#dai8u`FMn~)KBYlEyp6cRS z2q4`fknU$J&NV*kHIi_gKc3w%NIGJr$c7pSRtK9r0*i0FcE()5QkYBL`{Ek0j!!H_ zyBFKEK12H7NBZwMM6hzKyHf*_Tz3a6Z|))RIr+hRfWHO(DWHGTq44YK4~z5_Sl7>? zT>pb|efdz~aFJr$;$qny5+YHR#gcMJe49LrNp5w{H>~${!0&vhFm?3@PyPj-d}GGP zjKRhP!IBfEl0XLeXQ}b?AOgrg+?KSd$BVRq@xRZA6 zkteS0dr4karjeDtZxn?7SrD`JIK8L;hqD$)ybF`H}!(tql~Au@Z)hnl|MoevE4ANIz(R@B4#23dLc z-SINe$Q`Ysg@6snDU{{rcb?X1>AyTz~hK6T_Xnm+ygUjJl@{}ngh>V|u` zAKWGK^3%g5arQ6Mb|xo@U$7BXR3!V*K&6D#YaG-5v@Y`6q|YQWw$0&^cEis`CeCx- zDOsy!<`xPc$I}`!cP*{yGJkuszRWoK{djjRUzz-iH0{<-c44m|3&OdgL9moc)~#G7 zd0AOHsp{FGV@GKd*G65m1dB;QgQ!+Ae(8Fd^Y!O4_Ws*k_^T3E%GTTx-0f4X%%~|C z2gmA`Ecrw7^03?%becv)N{6o9)u0iUZwVLCS72%U1ki;dlkdil?YDK!N@Mf#B~PIR ze}$1OOIRu?Xmb66+?AP*gHJQ$=H|#BNn6C;wx%*8o-;eHAU4F$d=XN>ANn&UrXTE) zxwB`fMYMQz16VI=F)*(S#O4Au2|$G1TQ<4jEn2uxT}ow*7r_ySpM1W2z3kYPBGcY| z^J3)v;^bvZWbK~)(kVPfu!Ifw`Z^XZqw(+vKhBsT9WLvqHtd_@IPLrkB^Wc%svHoK zmx)ms5|W%{&QB=eT*-q!DMSFKlh+F-tz2FsOt0SVGsaBYV`!vH@Eh2=nG}^c zt|er^K6gJLgP$LzE)&bbs44H5(&^4hKOmdetWpKXdz~n&ly!4ik_Pd)HyM_s3l2+} zxkC9~jyVUo0F*b>5x5e5%E;$r_59fm2j~C)y!Muy@zBGP$yN3!O)UWQHovXC zgW+L_gKyA94BH4$s)XHq~i_f@jZ`J{rM(eCD{m6S>z(&BtkV~04T-^UtX>n09cE7ptlkQYH zo7=~i`Y?41_3o{kWdtsCvjT61b^%^VmtnII&g7#|sCc>2pJmDIZpCPf zty}GpzSG;|L(3YX^A1OP+q8Fzwfoezg{k(C-hIsz1b?@gPPV=jXeuVQKD$w<1USj? z36mf}C8|}VQh~fm{l-m%H)+$K0z&J6LP3FGT1{jXlmd&;`N4U%1<@ zL>8rO+0^=**GEZo+ji2a#~G3VL>&hOgz04EwgR_LF%9%*T(H_y9K428S5O=$6bI$p znqjGom~Kr9V@oO=yCg10B07PUh!u{T*2y1QLA-{PFmVxDZ)AdT6G-DDD1#+GOdABl zqV?2h=HQGtx>s#4M*XdVan%Q@KIw$$P3_|Nh;1H+KNnirY|tx{)J%;*kf2PE>6 zX{EgInp5@wSk@M>5r=f>rR4=q3Qq0TUA|tsMKyFv?ws!CvMdL3I`}i@#sA8xIloB( ztV2I6<#AqbwaEj>G@j zlviE5mDXe*@2;aYJ+*!NVcis!Q7S4ZD+-UyA+VqWnzfSlA=nrWf9^-jf?Fv{9G6|X zDpf1AY!L{vAA++#!@WyNIvK^K(gxvq2*+O3LY`5^{gRZ3qC&?iQ7DO649G@fKz7f* zgPH1TRaPvfhXT*Lj3W?Fadve#fwT#!*wfSq{_S!88N;OFYFSccr7FX5LfE{06KeaI zD{j7{!5bfas=AB&py)taDS`N4w9ZJ+R=6EN+*aT{#ZjQmagklvh{|xJO(8FD*-ll? zcHj}a8XFNY`Bqn`z>y@p5|`FPN8}H$vYX|AXAo{Ly#*H}cRK%Kd2;$Z>40?dYTa${ zQoGD0cmBhm9zp|-VLC|E(S%MmA)h5U?tF9M6`yZjZ%l@L|qVt zipjgUS0}%P z=93rDPy1ztjJ@p|_06qNW?4Zv8T3Z&)mpidY_v-&VC)YmpqDntd6o04`c=tBX4>|}M?3ULBs34jk z49l83vy#9AcE$F97R#$HKwhwsI~7Wn4b?g{B2+fKH(guAW;(nRo&2T(p}bHjF}cm) z-rR!*;GN`5X8`b6mh3WaL^`t({`;A~$ZI#&>}F2MFk}ZJVcC#=3}oo5AAV9ix~5ea zhE8%_NrJahR4hyON;aSvDWAOGJONww#t**Pg{xn5S5kj_dV0u;C$yt;tIYy4Q?9Eu zX6`zg!=GsHY>guzkSQq1A_!w5gpxo-;H+#pc%|I2t~H@TS%gN4{%rYlOPdZMqhhfF zt%)9J?I=83A&k7>ehuQ_Hw6yX*j&8EUfO?Pz_6(^1ljU@rC` zDeV4m?5I5|KjTk^Fw&Z09HZ8zDQk^NlNFb(HZ7n1@MqllSs8Lq`{pXih^q`}`KWP- zxf&u!8)0)057W=h?Mq<1(4t^=Jqb9va^s-1M^;m*euFjh46K+LbfIEp_{JdA5oJIn zunBR{dR>Y1JIBm2Z)98V@sa*-#-!A6Qo<^beq zC(45EY_zP<1fd#(9xcAr&U7+7dk&-lzEvO^rJaxkNSFk70S`mrzYTQRb=?78ZgcVo zIBvi+lFy52h~k|*;Dlsnq(2?9LvnDs+>tD!$ofzDyLeta* zQ;0k?aSNulDp9(f@Xgi`I{?n%4uG&Q2`k2Wtwt0mEQxCk%|Q!l55g|Rz-tRgGlk3w zt>LzwQ$?V8N(09!6C2U|Q*r*VYNLb&Nc&BQGaYm|bJVK=6`6r9i2?dHX$|R_HE+IL z+4mC4oT|L$IJ%=-(*Odv5d=9V*A0oL&?n(LAL1SlqO25~L33jPDlEkQY^3$_Zk=WO zrcD%DDz8~kcz?jMculEoX9SF|G0eQh$R9V*p9!AigGWiYAc5z$twJd*DZ))@(=Id+?h!Y>50eby8!Ue$qb&`OSq^TbakPH_*UoB~%XU z9fR5BPySb$zx;xHhjcbWg*=Ddo?ghqcJL<+G+QBEap2Kj^v5|FP#1_njI}C4OmO2%9ird4e4f=Z8iF4W7ejkyJ>IV6f~1jw)>Gb@}ebV zfn~c8c?(CH&j!D;U`8QJHGq~`M<^8zfh2(j&!dY+1T4$R@B@n$fz%}o2vK|nmh(u; z;#w%iPRLs)l<_toq@r}0Un*}id&1$?4aa|OfJ{)4or?64?`v^RQ;REalvRcQQu4nE zLXm|5xQ>vsa1hyAV#M!-g2bW7(gtztMVwTcceSwdY&*NZ`ON&Zv^1*{t&vf04z*cd zb+x$6wCiep{oMxj&3QP~yI=ZtDc&9|zo4Y41lqu^=boK~Xx*}L)|nMbGSeku&qmn_ zMUj9o%^(!bQQ_0@y>|CLE4nP*xLHn#%EAe>Hkku_7H+#hLv=3_FaXDHO)G?Ninup| z#u9u-gJvX-nC5ucrMc-hMBFVm#v6c7Xc ze_NY8drP+`cQ!!S0nmtP^9s|ZP4iZFyoUL+JVG#wqM={Eezm4sHvj+t07*qoM6N<$f+aWuq5uE@ literal 0 HcmV?d00001 diff --git a/front/src/Connexion/LocalUser.ts b/front/src/Connexion/LocalUser.ts index 43b184cf..f5a4ac2a 100644 --- a/front/src/Connexion/LocalUser.ts +++ b/front/src/Connexion/LocalUser.ts @@ -10,7 +10,7 @@ export interface CharacterTexture { export const maxUserNameLength: number = MAX_USERNAME_LENGTH; export function isUserNameValid(value: unknown): boolean { - return typeof value === "string" && value.length > 0 && value.length < maxUserNameLength && value.indexOf(' ') === -1; + return typeof value === "string" && value.length > 0 && value.length <= maxUserNameLength && value.indexOf(' ') === -1; } export function areCharacterLayersValid(value: string[] | null): boolean { diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts index 85b63335..73f6427c 100644 --- a/front/src/Enum/EnvironmentVariable.ts +++ b/front/src/Enum/EnvironmentVariable.ts @@ -14,6 +14,7 @@ const POSITION_DELAY = 200; // Wait 200ms between sending position events const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8; export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || '4'); +export const DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == 'true'; export const isMobile = ():boolean => ( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) ); diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 4b36e3d9..39a8f5f3 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -1,17 +1,12 @@ import {gameManager} from "../Game/GameManager"; import {SelectCharacterSceneName} from "./SelectCharacterScene"; import {ResizableScene} from "./ResizableScene"; -import { localUserStore } from "../../Connexion/LocalUserStore"; -import {MenuScene} from "../Menu/MenuScene"; -import { isUserNameValid } from "../../Connexion/LocalUser"; +import {loginSceneVisibleStore} from "../../Stores/LoginSceneStore"; export const LoginSceneName = "LoginScene"; -const loginSceneKey = 'loginScene'; - export class LoginScene extends ResizableScene { - private loginSceneElement!: Phaser.GameObjects.DOMElement; private name: string = ''; constructor() { @@ -22,65 +17,25 @@ export class LoginScene extends ResizableScene { } preload() { - this.load.html(loginSceneKey, 'resources/html/loginScene.html'); } create() { - this.loginSceneElement = this.add.dom(-1000, 0).createFromCache(loginSceneKey); - this.centerXDomElement(this.loginSceneElement, 200); - MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey); - - const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement; - const inputElement = this.loginSceneElement.getChildByID('loginSceneName') as HTMLInputElement; - inputElement.value = localUserStore.getName() ?? ''; - inputElement.focus(); - inputElement.addEventListener('keypress', (event: KeyboardEvent) => { - if(inputElement.value.length > 7){ - event.preventDefault(); - return; - } - pErrorElement.innerHTML = ''; - if(inputElement.value && !isUserNameValid(inputElement.value)){ - pErrorElement.innerHTML = 'Invalid user name: No spaces are allowed.'; - } - if (event.key === 'Enter') { - event.preventDefault(); - this.login(inputElement); - return; - } - }); - - const continuingButton = this.loginSceneElement.getChildByID('loginSceneFormSubmit') as HTMLButtonElement; - continuingButton.addEventListener('click', (e) => { - e.preventDefault(); - this.login(inputElement); - }); + loginSceneVisibleStore.set(true); } - private login(inputElement: HTMLInputElement): void { - const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement; - this.name = inputElement.value; - if (this.name === '') { - pErrorElement.innerHTML = 'The name is empty'; - return - } - if(!isUserNameValid(this.name)){ - pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.'; - return - } - if (this.name === '') return - gameManager.setPlayerName(this.name); + public login(name: string): void { + name = name.trim(); + gameManager.setPlayerName(name); this.scene.stop(LoginSceneName) gameManager.tryResumingGame(this, SelectCharacterSceneName); - this.scene.remove(LoginSceneName) + this.scene.remove(LoginSceneName); + loginSceneVisibleStore.set(false); } update(time: number, delta: number): void { - } public onResize(): void { - this.centerXDomElement(this.loginSceneElement, 200); } } diff --git a/front/src/Stores/LoginSceneStore.ts b/front/src/Stores/LoginSceneStore.ts new file mode 100644 index 00000000..6e2ea18b --- /dev/null +++ b/front/src/Stores/LoginSceneStore.ts @@ -0,0 +1,3 @@ +import { writable } from "svelte/store"; + +export const loginSceneVisibleStore = writable(false); diff --git a/front/src/WebRtc/ScreenSharingPeer.ts b/front/src/WebRtc/ScreenSharingPeer.ts index 947549eb..d797f59b 100644 --- a/front/src/WebRtc/ScreenSharingPeer.ts +++ b/front/src/WebRtc/ScreenSharingPeer.ts @@ -60,6 +60,7 @@ export class ScreenSharingPeer extends Peer { const message = JSON.parse(chunk.toString('utf8')); if (message.streamEnded !== true) { console.error('Unexpected message on screen sharing peer connection'); + return; } mediaManager.removeActiveScreenSharingVideo("" + this.userId); }); diff --git a/front/style/fonts.scss b/front/style/fonts.scss index 748710fa..a49d3967 100644 --- a/front/style/fonts.scss +++ b/front/style/fonts.scss @@ -2,4 +2,8 @@ *{ font-family: PixelFont-7,monospace; -} \ No newline at end of file +} + +.nes-btn { + font-family: "Press Start 2P"; +} diff --git a/front/webpack.config.ts b/front/webpack.config.ts index 6ebf907f..99cbff77 100644 --- a/front/webpack.config.ts +++ b/front/webpack.config.ts @@ -7,6 +7,7 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin'; import sveltePreprocess from 'svelte-preprocess'; import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin"; import NodePolyfillPlugin from 'node-polyfill-webpack-plugin'; +import {DISPLAY_TERMS_OF_USE} from "./src/Enum/EnvironmentVariable"; const mode = process.env.NODE_ENV ?? 'development'; const isProduction = mode === 'production'; @@ -175,7 +176,8 @@ module.exports = { 'JITSI_PRIVATE_MODE': null, 'START_ROOM_URL': null, 'MAX_USERNAME_LENGTH': 8, - 'MAX_PER_GROUP': 4 + 'MAX_PER_GROUP': 4, + 'DISPLAY_TERMS_OF_USE': false, }) ], From cb03580421de1cc24f628e6c2a2da2ea70079fcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Mon, 31 May 2021 17:49:41 +0200 Subject: [PATCH 09/48] Partial migration of EnableCameraScene to Svelte --- .../resources/html/EnableCameraScene.html | 126 ------------------ front/src/Components/App.svelte | 7 +- .../EnableCamera/EnableCameraScene.svelte | 76 +++++++++++ front/src/Components/Login/LoginScene.svelte | 3 +- front/src/Phaser/Login/EnableCameraScene.ts | 29 +--- 5 files changed, 87 insertions(+), 154 deletions(-) delete mode 100644 front/dist/resources/html/EnableCameraScene.html create mode 100644 front/src/Components/EnableCamera/EnableCameraScene.svelte diff --git a/front/dist/resources/html/EnableCameraScene.html b/front/dist/resources/html/EnableCameraScene.html deleted file mode 100644 index 21c798b5..00000000 --- a/front/dist/resources/html/EnableCameraScene.html +++ /dev/null @@ -1,126 +0,0 @@ - - - diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte index 286b5687..581c5673 100644 --- a/front/src/Components/App.svelte +++ b/front/src/Components/App.svelte @@ -1,7 +1,7 @@
@@ -21,6 +21,9 @@ {#if $selectCompanionSceneVisibleStore} {/if} + {#if $enableCameraSceneVisibilityStore} + + {/if} diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte new file mode 100644 index 00000000..ac2cf992 --- /dev/null +++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte @@ -0,0 +1,76 @@ + + +
+
+

Turn on your camera and microphone

+
+ +
+ +
+
+ + + diff --git a/front/src/Components/Login/LoginScene.svelte b/front/src/Components/Login/LoginScene.svelte index 6a05ba9f..ea824908 100644 --- a/front/src/Components/Login/LoginScene.svelte +++ b/front/src/Components/Login/LoginScene.svelte @@ -30,7 +30,7 @@

Enter your name

- {startValidating = true}} class:is-error={name.trim() === '' && startValidating} /> + {startValidating = true}} class:is-error={name.trim() === '' && startValidating} />
{#if name.trim() === '' && startValidating }

The name is empty

@@ -71,6 +71,7 @@ section.error-section { min-height: 2rem; + margin: 0; p { margin: 0; diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts index 6002da7b..73fa7303 100644 --- a/front/src/Phaser/Login/EnableCameraScene.ts +++ b/front/src/Phaser/Login/EnableCameraScene.ts @@ -12,8 +12,8 @@ import { MenuScene } from "../Menu/MenuScene"; import {ResizableScene} from "./ResizableScene"; import { audioConstraintStore, - enableCameraSceneVisibilityStore, localStreamStore, + enableCameraSceneVisibilityStore, mediaStreamConstraintsStore, videoConstraintStore } from "../../Stores/MediaStore"; @@ -28,8 +28,6 @@ enum LoginTextures { arrowUp = "arrow_up" } -const enableCameraSceneKey = 'enableCameraScene'; - export class EnableCameraScene extends ResizableScene { private textField!: TextField; private cameraNameField!: TextField; @@ -45,8 +43,6 @@ export class EnableCameraScene extends ResizableScene { private soundMeterSprite!: SoundMeterSprite; private microphoneNameField!: TextField; - private enableCameraSceneElement!: Phaser.GameObjects.DOMElement; - private mobileTapZone!: Zone; private localStreamStoreUnsubscriber!: Unsubscriber; @@ -58,9 +54,6 @@ export class EnableCameraScene extends ResizableScene { } preload() { - - this.load.html(enableCameraSceneKey, 'resources/html/EnableCameraScene.html'); - this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); this.load.image(LoginTextures.arrowRight, "resources/objects/arrow_right.png"); this.load.image(LoginTextures.arrowUp, "resources/objects/arrow_up.png"); @@ -69,18 +62,6 @@ export class EnableCameraScene extends ResizableScene { } create() { - - this.enableCameraSceneElement = this.add.dom(-1000, 0).createFromCache(enableCameraSceneKey); - this.centerXDomElement(this.enableCameraSceneElement, 300); - - 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); } @@ -272,19 +253,17 @@ export class EnableCameraScene extends ResizableScene { this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16; this.arrowUp.y = this.microphoneNameField.y; - const actionBtn = document.querySelector('#enableCameraScene .action'); + /*const actionBtn = document.querySelector('#enableCameraScene .action'); if (actionBtn !== null) { actionBtn.style.top = (this.scale.height - 65) + 'px'; - } + }*/ } update(time: number, delta: number): void { this.soundMeterSprite.setVolume(this.soundMeter.getVolume()); - - this.centerXDomElement(this.enableCameraSceneElement, 300); } - private login(): void { + public login(): void { HtmlUtils.getElementByIdOrFail('webRtcSetup').style.display = 'none'; this.soundMeter.stop(); From 4923ce8b833b07daf19c834b0a2383d420c5c0f1 Mon Sep 17 00:00:00 2001 From: GRL Date: Mon, 31 May 2021 17:50:14 +0200 Subject: [PATCH 10/48] selectCharacterScene and customCharacterScene in svelte --- .../resources/html/CustomCharacterScene.html | 157 ------------------ .../resources/html/selectCharacterScene.html | 139 ---------------- front/dist/resources/objects/arrow_down.png | Bin 0 -> 4816 bytes front/dist/resources/objects/arrow_up.png | Bin 149 -> 4710 bytes front/src/Components/App.svelte | 14 +- .../CustomCharacterScene.svelte | 110 ++++++++++++ .../SelectCharacterScene.svelte | 84 ++++++++++ front/src/Phaser/Login/CustomizeScene.ts | 63 ++----- .../Login/SelectCharacterMobileScene.ts | 24 +-- .../src/Phaser/Login/SelectCharacterScene.ts | 43 ++--- front/src/Stores/CustomCharacterStore.ts | 3 + front/src/Stores/SelectCharacterStore.ts | 3 + 12 files changed, 249 insertions(+), 391 deletions(-) delete mode 100644 front/dist/resources/html/CustomCharacterScene.html delete mode 100644 front/dist/resources/html/selectCharacterScene.html create mode 100644 front/dist/resources/objects/arrow_down.png create mode 100644 front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte create mode 100644 front/src/Components/selectCharacter/SelectCharacterScene.svelte create mode 100644 front/src/Stores/CustomCharacterStore.ts create mode 100644 front/src/Stores/SelectCharacterStore.ts diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html deleted file mode 100644 index 9a8aac4d..00000000 --- a/front/dist/resources/html/CustomCharacterScene.html +++ /dev/null @@ -1,157 +0,0 @@ - - - diff --git a/front/dist/resources/html/selectCharacterScene.html b/front/dist/resources/html/selectCharacterScene.html deleted file mode 100644 index 88c84041..00000000 --- a/front/dist/resources/html/selectCharacterScene.html +++ /dev/null @@ -1,139 +0,0 @@ - - - diff --git a/front/dist/resources/objects/arrow_down.png b/front/dist/resources/objects/arrow_down.png new file mode 100644 index 0000000000000000000000000000000000000000..c89fb5f3fa79da69e2a67e763de0304e82f5c1f9 GIT binary patch literal 4816 zcmeHLX;c$g77h)Hg5ZXVic-Xdtt(YYD(euI07BFtLTp7vtt6FDN*0p>f;|e2zz8lh zwkxivh({Y76c-eCZ~?SI!P5#dHj0g+fIFk3%u7JUp8n%G)Bj9Py;R-hyZ3(YzIW;+ zBRnj`!ETftjYe~jga$=`-$CZ9Utch~KJUV5H0#hMvRPCFo&f0$Iu#j9KvbfhfCv+* zqR~vZpKO?OXtei$;I5Iu>B-}5fN=fB#x2^Sv&!b`TGl{Y^dW z*EPD$cI+#s=xQbNQp?j+7uE=>N;fTP(KEc@^}r;m@ZueT)scDC6|cy}8~rX`nNRLY z**?$X(9vnNtr;%y@8WmI@W$U5Hz~h8^I2i2Y0J*&fLlkK6-TL(v=gx!zj%3lt7=Bp z^gC&~(}Cg_C(f@y5pmP>!>L!THX{Ph7LSF4Q?12=m#*05XehI>DjDIP^xOKAd4^Xl z=QKU93bHBZ zwNyFUc#9dWhgPiZ@OneSBgOE#yahb%nhi#&0VNxcAW1I8?E;V zRBQRhq3!-2RpRA8DIdy{Zzaz}EAo-z+gA^iOzL}K8+65nNFDZA^)lmGc#Si=Iiqx2 zQObOufqfb_-B&qy(sCEy&n~p`t$4yNvFrC}lL4*)g}}Q?AafETG!1 zFP`?|*T`erzmJLu@PhH02@JAm0zyD_>8ntxEIWO*PlaT4L;A}piQ7kwsWnaD^tmB% zm=Yyt9yr|$Y8 zY5d5<7xq@c=b5={4mNaHUR8FiaXfSaUR*kDp18D;5zHBq!9Q zRzz<*=N)de~M~X`IfkX@$y2L<4E(wzQb2F5_)U=tb7qWjuGJ_e;q7!fq72Le2a=rI(f z7a~YPLINX!&CnUt2vZ;sASerAv0z{U8xyq@Zi2POab}2aj3C0OFpzqR)M+6zCN9^- zQ6f4W=%Ek!Y4lR*M|iEVhXud~V#4(ZlYt@{4bt1gNCn3Oke-D8)WawPTN4sN7Vh%=`r2@=uG@r6pAf>a7Ew>%yP7qC?X zOfXd{7{kFJ;L9->WwMoAjslb89A+;liPlKrS_NT-0^kf1;3!o*Hp=9)V3wQ>AlO_! zEXO!t;3&8l##J#tGy@5`5|8bjl^IG2pjdJ~rs8o`uv|efVGQG7uw1}q!5p3d z6X0AP%2Qz$D5XL;NoUaDU^+<+t|kz@R&7z32^R*0OGI=Q1N|fkkHsk!a1ha_lG-@a zCxwjE5RnvaW|PTfu`nLW!dRGqg`(_FM&A(zBj`jkCKF|_x>GPuix3n8h{er)3IHq~ zpcY}Efxs!9L8jBiisrw5TA+(zZfe z(H+Ey#}i6RAmG=nQpDg|H38OlPeXl>lYcT4kYw&|?mY32tb+-Ix7WRC*s*)g)mZ~NGRh8Dp_(R# zriaq{yQR}yE`2k(8albG!>{vB!TN1mJJzO5hdP@0uH*dQGQtn=ue~n1R~ts_V(asG z|H<=0pG%hH<)&pNH)`%Soyhh4{%o@&+M&F>_wnRqIbyDT>5dv+-Vdke>|AuUwcvEt z4O>VOU9L-B9=HGtxz!3c-l=J*Kcjy1?j23gVED1|*Z>5aP5a8HgapyL%-@}-@_z!7 z{`$};BaP-*X1=V}dpnK>LR(5A4YqCWS$?yq@Xd~ mHh**C&9Exzo+0fatu`e&ey<#IejfY)`nk!ZS literal 0 HcmV?d00001 diff --git a/front/dist/resources/objects/arrow_up.png b/front/dist/resources/objects/arrow_up.png index b9f81ebc21b9be4af3c5f85ddeb5947ec958c7c1..6e948ae216bdbc1f31a4d1e7db53bc69de9db514 100644 GIT binary patch literal 4710 zcmeHLdsGu=7LRX4Kv1zRMi>SkfF_wdNoI*W0z!%bgeVVnbuyX20C|`U5CJJ-*&-@n zEmWx%5m2`lsSB>++XX5rT3xlS4-imPiV7%QSzDI<5)koh|M8sde`L-~X71y6@BQ8T zeJ7L6p}_&xmJXIQ8qHc7=obdQZB3`eL~wO_HGt7*V|!BMkyIF#4C(Y*6`4Rl)OsBO z5k^u)qZ#i$FI<^Rcee5$i1IJYP;b4WcXbR)%5Q%XR=Ms^u9 z>Qgoo3Xe2YI7HKYUtMx(8kbh^Bxaqx?M-oGuJw<{=gb$BbC0cXyl4}>_h4*Z)si1W z##z{8)>BST(;7wq=qv+a>Vw>l{+-Nf&$(l7c~o=iVxgevrRpm!amc#kM%azQulQ3ds_)hWT@YV4 z9D8xP7mbAqmN=jyEUUhkV zMW^3KT-%3!kY)>QTG2;UPrsPYoG_g#!tOKT@_7#kFcCrqn73rctc}i-Sh<^fKx&Jf5H+1rbAP z#BkTivoJ&|#c%{)hRAdhB9;tH(G%e*!E!t$9v3NLuf>+0Mic<32?~RZ>I97eHHu*~ zE(-2VVipXUO{jP=94QNhBw9TI@t8a&!tgheNgQ~wCFH4Bs?adMB|{M4NestQln!OF zl9Q8}$y}yZAH!mcL?RZ#VR1MNV8Jk~*HD;|p)t6aAOqVIXeg5x1pN?+FpQxTaWOu@;VM)@-UukE#z0{joG?KFa3%?G2#%7A;Fyx3Bya%1V{;io zA&4hEn3_60Kg1fp(H=EQVm|G%;p{iEz{>R4Rr!Oyr#;Gy$Vjz(EWzB{hl0 zcM3VFCc-Jq#3oz7;qW{Vj*!o1^F8<@yjKu<1DHe;CL3XL1_?2>1qHu# z!5{`KiBOsY0lz^N9*b#W2(Z3~2I{Sx{HU65oUN(TPY+@023mTsLNJ zX8if{dG+6H+ER7c=5Qv|H>U0J&^Y*(v?>tt-3eYRW%~&HtV(y z*}axiA#}z1sCkPQIC48O>+)7bc&0zxZHQ{w<;>l+bAgTBmYVr1igvckwi$DT-^QWs zQ{3{FUtPKTsAAWxu8V7CH9lQV_U!KdJaZY;-6nK$@&1JwdPsQn^^u1+gJ}a?UAf1v z-X=Sjrpm+pC-Dm&u>0v#RBi96BR)LezXD8vG??W9Y8W! z7Z_!r(QN8W=a_{_dEaq delta 121 zcmaE+GL>
+ {#if $selectCharacterSceneVisibleStore} + + {/if} + {#if $customCharacterSceneVisibleStore} + + {/if} {#if $selectCompanionSceneVisibleStore} - + {/if} +
+ Refresh + +
+ + + + diff --git a/front/dist/resources/objects/help-setting-camera-permission-chrome.png b/front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-chrome.png similarity index 100% rename from front/dist/resources/objects/help-setting-camera-permission-chrome.png rename to front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-chrome.png diff --git a/front/dist/resources/objects/help-setting-camera-permission-firefox.png b/front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-firefox.png similarity index 100% rename from front/dist/resources/objects/help-setting-camera-permission-firefox.png rename to front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-firefox.png diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index 2a1d3d8a..e1b969fc 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -7,6 +7,9 @@ import {LoginSceneName} from "../Login/LoginScene"; import {SelectCharacterSceneName} from "../Login/SelectCharacterScene"; import {EnableCameraSceneName} from "../Login/EnableCameraScene"; import {localUserStore} from "../../Connexion/LocalUserStore"; +import {get} from "svelte/store"; +import {requestedCameraState, requestedMicrophoneState} from "../../Stores/MediaStore"; +import {helpCameraSettingsVisibleStore} from "../../Stores/HelpCameraSettingsStore"; export interface HasMovedEvent { direction: string; @@ -89,7 +92,12 @@ 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 + //scenePlugin.launch(HelpCameraSettingsSceneName);//700 + + if(!localUserStore.getHelpCameraSettingsShown() && (!get(requestedMicrophoneState) || !get(requestedCameraState))){ + helpCameraSettingsVisibleStore.set(true); + localUserStore.setHelpCameraSettingsShown(); + } } public gameSceneIsCreated(scene: GameScene) { diff --git a/front/src/Stores/HelpCameraSettingsStore.ts b/front/src/Stores/HelpCameraSettingsStore.ts new file mode 100644 index 00000000..88373dab --- /dev/null +++ b/front/src/Stores/HelpCameraSettingsStore.ts @@ -0,0 +1,3 @@ +import { writable } from "svelte/store"; + +export const helpCameraSettingsVisibleStore = writable(false); diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 29973e46..180b5746 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -12,6 +12,7 @@ import { import { screenSharingLocalStreamStore } from "../Stores/ScreenSharingStore"; +import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore"; export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void; export type StartScreenSharingCallback = (media: MediaStream) => void; @@ -29,7 +30,6 @@ export class MediaManager { startScreenSharingCallBacks : Set = new Set(); stopScreenSharingCallBacks : Set = new Set(); showReportModalCallBacks : Set = new Set(); - helpCameraSettingsCallBacks : Set = new Set(); private focused : boolean = true; @@ -64,7 +64,7 @@ export class MediaManager { if (result.type === 'error') { console.error(result.error); layoutManager.addInformation('warning', 'Camera access denied. Click here and check your browser permissions.', () => { - this.showHelpCameraSettingsCallBack(); + helpCameraSettingsVisibleStore.set(true); }, this.userInputManager); return; } @@ -74,7 +74,7 @@ export class MediaManager { if (result.type === 'error') { console.error(result.error); layoutManager.addInformation('warning', 'Screen sharing denied. Click here and check your browser permissions.', () => { - this.showHelpCameraSettingsCallBack(); + helpCameraSettingsVisibleStore.set(true); }, this.userInputManager); return; } @@ -395,16 +395,6 @@ export class MediaManager { this.showReportModalCallBacks.add(callback); } - public setHelpCameraSettingsCallBack(callback: HelpCameraSettingsCallBack){ - this.helpCameraSettingsCallBacks.add(callback); - } - - private showHelpCameraSettingsCallBack(){ - for(const callBack of this.helpCameraSettingsCallBacks){ - callBack(); - } - } - //FIX ME SOUNDMETER: check stalability of sound meter calculation /*updateSoudMeter(){ try{ From 9063ba2a1fa7b23b415e04f3a2163a1d6745123d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 1 Jun 2021 09:12:31 +0200 Subject: [PATCH 15/48] Removing call to removed method --- front/src/Phaser/Menu/HelpCameraSettingsScene.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts index fcc7996a..7d684df2 100644 --- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts +++ b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts @@ -47,10 +47,6 @@ export class HelpCameraSettingsScene extends DirtyScene { this.openHelpCameraSettingsOpened(); localUserStore.setHelpCameraSettingsShown(); } - - mediaManager.setHelpCameraSettingsCallBack(() => { - this.openHelpCameraSettingsOpened(); - }); } private openHelpCameraSettingsOpened(): void{ From 5839e0b270ae0589b27ba553daae316d1a6fe4f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 1 Jun 2021 09:17:01 +0200 Subject: [PATCH 16/48] Throwing exceptions into store subscribers is wreaking havok --- front/src/Phaser/Login/EnableCameraScene.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts index 73fa7303..3eabe4d7 100644 --- a/front/src/Phaser/Login/EnableCameraScene.ts +++ b/front/src/Phaser/Login/EnableCameraScene.ts @@ -111,8 +111,10 @@ export class EnableCameraScene extends ResizableScene { this.localStreamStoreUnsubscriber = localStreamStore.subscribe((result) => { if (result.type === 'error') { - // TODO: proper handling of the error - throw result.error; + // TODO: we could handle the error in a specific way on the EnableCameraScene page. + // TODO: we could handle the error in a specific way on the EnableCameraScene page. + return; + //throw result.error; } this.getDevices(); From 9a5300dd2dd6853c8c662f4bd629754b18b3c3db Mon Sep 17 00:00:00 2001 From: GRL Date: Tue, 1 Jun 2021 11:07:52 +0200 Subject: [PATCH 17/48] helpCameraSettingPopup in svelte with nes-css --- .../resources/html/helpCameraSettings.html | 106 ------------- .../HelpCameraSettingsPopup.svelte | 116 ++++---------- front/src/Phaser/Game/GameManager.ts | 2 - .../Phaser/Menu/HelpCameraSettingsScene.ts | 150 ------------------ front/src/index.ts | 3 +- 5 files changed, 29 insertions(+), 348 deletions(-) delete mode 100644 front/dist/resources/html/helpCameraSettings.html delete mode 100644 front/src/Phaser/Menu/HelpCameraSettingsScene.ts diff --git a/front/dist/resources/html/helpCameraSettings.html b/front/dist/resources/html/helpCameraSettings.html deleted file mode 100644 index 8c4e63c4..00000000 --- a/front/dist/resources/html/helpCameraSettings.html +++ /dev/null @@ -1,106 +0,0 @@ - - -
-
- Refresh - -
- diff --git a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte index 44ebde3d..fc6656a0 100644 --- a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte +++ b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte @@ -3,6 +3,7 @@ import firefoxImg from "./images/help-setting-camera-permission-firefox.png"; import chromeImg from "./images/help-setting-camera-permission-chrome.png"; + let isAndroid = window.navigator.userAgent.includes('Android'); let isFirefox = window.navigator.userAgent.includes('Firefox'); let isChrome = window.navigator.userAgent.includes('Chrome'); @@ -16,115 +17,54 @@ -
-

Camera/Microphone access needed

-
-
Camera/Microphone access needed
-

Permission denied

-

You must allow camera and microphone access in your browser.

-
    -
  • 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.
    • -
  • Please ensure that you have a camera AND microphone plugged into your computer.
    • -
-

Once you've followed these steps, please refresh this page.

-

If you prefer to continue without allowing camera and microphone access, click on Continue

+ +
+

Camera/Microphone access needed

+

Permission denied

+

You must allow camera and microphone access in your browser.

{#if isFirefox } - - {:else if isChrome } - +

Please click the "Remember this decision" checkbox, if you don't want Firefox to keep asking you the authorization.

+ + {:else if isChrome && !isAndroid } + {/if}

- -
- Refresh - +
+ +
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index e1b969fc..8c38a626 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -2,7 +2,6 @@ import {GameScene} from "./GameScene"; import {connectionManager} from "../../Connexion/ConnectionManager"; import type {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"; @@ -92,7 +91,6 @@ 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 if(!localUserStore.getHelpCameraSettingsShown() && (!get(requestedMicrophoneState) || !get(requestedCameraState))){ helpCameraSettingsVisibleStore.set(true); diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts deleted file mode 100644 index 7d684df2..00000000 --- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts +++ /dev/null @@ -1,150 +0,0 @@ -import {mediaManager} from "../../WebRtc/MediaManager"; -import {HtmlUtils} from "../../WebRtc/HtmlUtils"; -import {localUserStore} from "../../Connexion/LocalUserStore"; -import {DirtyScene} from "../Game/DirtyScene"; -import {get} from "svelte/store"; -import {requestedCameraState, requestedMicrophoneState} from "../../Stores/MediaStore"; - -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 DirtyScene { - 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 = this.getMiddleX(); - 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) => { - if((event?.target as HTMLInputElement).id === 'mailto') { - return; - } - event.preventDefault(); - if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') { - window.location.reload(); - }else if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormContinue') { - this.closeHelpCameraSettingsOpened(); - } - }); - - if(!localUserStore.getHelpCameraSettingsShown() && (!get(requestedMicrophoneState) || !get(requestedCameraState))){ - this.openHelpCameraSettingsOpened(); - localUserStore.setHelpCameraSettingsShown(); - } - } - - private openHelpCameraSettingsOpened(): void{ - HtmlUtils.getElementByIdOrFail('webRtcSetup').style.display = 'none'; - this.helpCameraSettingsOpened = true; - try{ - if(window.navigator.userAgent.includes('Firefox')){ - HtmlUtils.getElementByIdOrFail('browserHelpSetting').innerHTML =''; - }else if(window.navigator.userAgent.includes('Chrome')){ - HtmlUtils.getElementByIdOrFail('browserHelpSetting').innerHTML =''; - } - }catch(err) { - console.error('openHelpCameraSettingsOpened => getElementByIdOrFail => error', err); - } - const middleY = this.getMiddleY(); - const middleX = this.getMiddleX(); - this.tweens.add({ - targets: this.helpCameraSettingsElement, - y: middleY, - x: middleX, - duration: 1000, - ease: 'Power3', - overflow: 'scroll' - }); - - this.dirty = true; - } - - private closeHelpCameraSettingsOpened(): void{ - const middleX = this.getMiddleX(); - /*const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement; - helpCameraSettingsInfo.innerText = ''; - helpCameraSettingsInfo.style.display = 'none';*/ - this.helpCameraSettingsOpened = false; - this.tweens.add({ - targets: this.helpCameraSettingsElement, - y: -1000, - x: middleX, - duration: 1000, - ease: 'Power3', - overflow: 'scroll' - }); - - this.dirty = true; - } - - 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); - } - - update(time: number, delta: number): void { - this.dirty = false; - } - - public onResize(): void { - super.onResize( - - ); - if (this.helpCameraSettingsOpened) { - const middleX = this.getMiddleX(); - const middleY = this.getMiddleY(); - this.tweens.add({ - targets: this.helpCameraSettingsElement, - x: middleX, - y: middleY, - duration: 1000, - ease: 'Power3' - }); - this.dirty = true; - } - } - - private getMiddleX() : number{ - return (this.scale.width / 2) - - ( - this.helpCameraSettingsElement - && this.helpCameraSettingsElement.node - && this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0 - ? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / (2 * this.scale.zoom)) - : (400 / 2) - ); - } - - private getMiddleY() : number{ - const middleY = ((this.scale.height) - ( - (this.helpCameraSettingsElement - && this.helpCameraSettingsElement.node - && this.helpCameraSettingsElement.node.getBoundingClientRect().height > 0 - ? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/)/this.scale.zoom)) / 2; - return (middleY > 0 ? middleY : 0); - } - - public isDirty(): boolean { - return this.dirty; - } -} - diff --git a/front/src/index.ts b/front/src/index.ts index bc435ee1..90d4c612 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -13,7 +13,6 @@ import WebFontLoaderPlugin from 'phaser3-rex-plugins/plugins/webfontloader-plugi 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"; import {iframeListener} from "./Api/IframeListener"; @@ -96,7 +95,7 @@ const config: GameConfig = { ErrorScene, CustomizeScene, MenuScene, - HelpCameraSettingsScene], + ], //resolution: window.devicePixelRatio / 2, fps: fps, dom: { From 47555d59558f8c324368d4fe155bbe09a6f98684 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 1 Jun 2021 11:19:46 +0200 Subject: [PATCH 18/48] Migrating cam to Svelte on Camera setup screen --- front/dist/index.tmpl.html | 4 -- .../EnableCamera/EnableCameraScene.svelte | 66 +++++++++++++++++++ front/src/Phaser/Login/EnableCameraScene.ts | 15 ++--- front/style/style.css | 33 ---------- 4 files changed, 71 insertions(+), 47 deletions(-) diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index 9c251bf3..279609e8 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -94,10 +94,6 @@
-
- - -
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte index ac2cf992..f8b2867e 100644 --- a/front/src/Components/EnableCamera/EnableCameraScene.svelte +++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte @@ -1,6 +1,8 @@

Turn on your camera and microphone

+
+ + +
+ - {#if $gameOverlayVisibilityStore} - - - {/if} {#if $helpCameraSettingsVisibleStore} {/if}
- +
From 9e35f96ce5284c9e6a7d5807ee72ac05315e8af7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 2 Jun 2021 09:58:00 +0200 Subject: [PATCH 29/48] Fixing absolute/relative layouts of Svelte layers --- front/src/Components/App.svelte | 47 ++++++++++------ front/src/Components/CameraControls.svelte | 44 +++++++-------- .../EnableCamera/EnableCameraScene.svelte | 54 ++++++++++++------- front/style/style.scss | 10 ++-- 4 files changed, 97 insertions(+), 58 deletions(-) diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte index cba741fe..d1a18f21 100644 --- a/front/src/Components/App.svelte +++ b/front/src/Components/App.svelte @@ -22,31 +22,48 @@
-{#if $gameOverlayVisibilityStore} - - -{/if} -
{#if $loginSceneVisibleStore} - +
+ +
{/if} {#if $selectCharacterSceneVisibleStore} - +
+ +
{/if} {#if $customCharacterSceneVisibleStore} - +
+ +
{/if} {#if $selectCompanionSceneVisibleStore} - +
+ +
{/if} {#if $enableCameraSceneVisibilityStore} - +
+ +
+ {/if} + + + {#if $gameOverlayVisibilityStore} +
+ + +
{/if} - {#if $helpCameraSettingsVisibleStore} - +
+ +
{/if}
-
diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte index bd35d230..5c17a9fe 100644 --- a/front/src/Components/CameraControls.svelte +++ b/front/src/Components/CameraControls.svelte @@ -34,26 +34,28 @@ -
-
- {#if $requestedScreenSharingState} - Start screen sharing - {:else} - Stop screen sharing - {/if} -
-
- {#if $requestedCameraState} - Turn on webcam - {:else} - Turn off webcam - {/if} -
-
- {#if $requestedMicrophoneState} - Turn on microphone - {:else} - Turn off microphone - {/if} +
+
+
+ {#if $requestedScreenSharingState} + Start screen sharing + {:else} + Stop screen sharing + {/if} +
+
+ {#if $requestedCameraState} + Turn on webcam + {:else} + Turn off webcam + {/if} +
+
+ {#if $requestedMicrophoneState} + Turn on microphone + {:else} + Turn off microphone + {/if} +
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte index 36e31cf6..b5b2748a 100644 --- a/front/src/Components/EnableCamera/EnableCameraScene.svelte +++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte @@ -11,6 +11,8 @@ import {onDestroy} from "svelte"; import HorizontalSoundMeterWidget from "./HorizontalSoundMeterWidget.svelte"; import cinemaCloseImg from "../images/cinema-close.svg"; + import cinemaImg from "../images/cinema.svg"; + import microphoneImg from "../images/microphone.svg"; export let game: Game; let selectedCamera : string|null = null; @@ -86,27 +88,33 @@
{#if $cameraListStore.length > 1 } -
- -
+
+ Camera +
+ +
+
{/if} {#if $microphoneListStore.length > 1 } -
- -
+
+ Microphone +
+ +
+
{/if}
@@ -190,6 +198,16 @@ font-size: 200%; } + .control-group { + display: flex; + flex-direction: row; + + img { + width: 30px; + margin-right: 10px; + } + } + .webrtcsetup{ /*position: absolute; top: 140px; diff --git a/front/style/style.scss b/front/style/style.scss index 78cfcc66..ef3df5c5 100644 --- a/front/style/style.scss +++ b/front/style/style.scss @@ -1212,13 +1212,15 @@ div.action.danger p.action-body{ height: 100%; pointer-events: none; - .absolute-overlay { - position: absolute; + & > div { + position: relative; width: 100%; height: 100%; - & > * { - position: relative; + & > div { + position: absolute; + width: 100%; + height: 100%; } } } From ea576477cdb21383598ae0778b51430a68ec8c92 Mon Sep 17 00:00:00 2001 From: GRL Date: Wed, 2 Jun 2021 09:58:34 +0200 Subject: [PATCH 30/48] Border on videocam in enable camera scene --- front/src/Components/App.svelte | 52 +++++++------- .../EnableCamera/EnableCameraScene.svelte | 71 +++++-------------- 2 files changed, 45 insertions(+), 78 deletions(-) diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte index cba741fe..6bf45e82 100644 --- a/front/src/Components/App.svelte +++ b/front/src/Components/App.svelte @@ -22,31 +22,31 @@
-{#if $gameOverlayVisibilityStore} - - -{/if} -
- {#if $loginSceneVisibleStore} - - {/if} - {#if $selectCharacterSceneVisibleStore} - - {/if} - {#if $customCharacterSceneVisibleStore} - - {/if} - {#if $selectCompanionSceneVisibleStore} - - {/if} - {#if $enableCameraSceneVisibilityStore} - - {/if} - - {#if $helpCameraSettingsVisibleStore} - + {#if $gameOverlayVisibilityStore} + + {/if} -
+
+ {#if $loginSceneVisibleStore} + + {/if} + {#if $selectCharacterSceneVisibleStore} + + {/if} + {#if $customCharacterSceneVisibleStore} + + {/if} + {#if $selectCompanionSceneVisibleStore} + + {/if} + {#if $enableCameraSceneVisibilityStore} + + {/if} + + {#if $helpCameraSettingsVisibleStore} + + {/if} +
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte index 36e31cf6..ddb31b1d 100644 --- a/front/src/Components/EnableCamera/EnableCameraScene.svelte +++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte @@ -77,10 +77,13 @@

Turn on your camera and microphone

-
- - -
+ {#if $localStreamStore.stream} + + {:else } +
+ +
+ {/if}
@@ -110,21 +113,6 @@ {/if}
- - -
@@ -132,23 +120,10 @@ diff --git a/front/src/Components/UI/images/megaphone.svg b/front/src/Components/UI/images/megaphone.svg new file mode 100644 index 00000000..708f860c --- /dev/null +++ b/front/src/Components/UI/images/megaphone.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 10a038ba..fff6912c 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -280,7 +280,7 @@ export class GameScene extends DirtyScene 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'); //eslint-disable-next-line @typescript-eslint/no-explicit-any - (this.load as any).rexWebFont({ + (this.load as any).rexWebFont({ custom: { families: ['Press Start 2P'], urls: ['/resources/fonts/fonts.css'], diff --git a/front/src/Phaser/Game/SoundManager.ts b/front/src/Phaser/Game/SoundManager.ts index f0210494..47614fca 100644 --- a/front/src/Phaser/Game/SoundManager.ts +++ b/front/src/Phaser/Game/SoundManager.ts @@ -17,7 +17,9 @@ class SoundManager { return res(sound); } loadPlugin.audio(soundUrl, soundUrl); - loadPlugin.once('filecomplete-audio-' + soundUrl, () => res(soundManager.add(soundUrl))); + loadPlugin.once('filecomplete-audio-' + soundUrl, () => { + res(soundManager.add(soundUrl)); + }); loadPlugin.start(); }); this.soundPromises.set(soundUrl,soundPromise); diff --git a/front/src/Stores/SoundPlayingStore.ts b/front/src/Stores/SoundPlayingStore.ts new file mode 100644 index 00000000..cf1d681c --- /dev/null +++ b/front/src/Stores/SoundPlayingStore.ts @@ -0,0 +1,22 @@ +import { writable } from "svelte/store"; + +/** + * A store that contains the URL of the sound currently playing + */ +function createSoundPlayingStore() { + const { subscribe, set, update } = writable(null); + + return { + subscribe, + playSound: (url: string) => { + set(url); + }, + soundEnded: () => { + set(null); + } + + + }; +} + +export const soundPlayingStore = createSoundPlayingStore(); diff --git a/front/style/style.scss b/front/style/style.scss index 883f63bb..f43fb240 100644 --- a/front/style/style.scss +++ b/front/style/style.scss @@ -810,35 +810,6 @@ input[type=range]:focus::-ms-fill-upper { } - -/*audio html when audio message playing*/ -.main-container .audio-playing { - position: absolute; - width: 200px; - height: 54px; - right: -210px; - top: 40px; - transition: all 0.1s ease-out; - background-color: black; - border-radius: 30px 0 0 30px; - display: inline-flex; -} - -.main-container .audio-playing.active{ - right: 0; -} -.main-container .audio-playing img{ - /*width: 30px;*/ - border-radius: 50%; - background-color: #ffda01; - padding: 10px; -} -.main-container .audio-playing p{ - color: white; - margin-left: 10px; - margin-top: 14px; -} - /* VIDEO QUALITY */ .main-console div.setting h1{ color: white; diff --git a/front/webpack.config.ts b/front/webpack.config.ts index 5ff37028..3a69b74a 100644 --- a/front/webpack.config.ts +++ b/front/webpack.config.ts @@ -94,6 +94,7 @@ module.exports = { // See https://github.com/sveltejs/svelte/issues/4946#issuecomment-662168782 if (warning.code === 'a11y-no-onchange') { return } + if (warning.code === 'a11y-autofocus') { return } // process as usual handleWarning(warning); From d43633e936448bc44740ebdb3f21164c2a135ebe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 2 Jun 2021 16:52:25 +0200 Subject: [PATCH 37/48] Added an animation when audio message played --- front/src/Components/UI/AudioPlaying.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front/src/Components/UI/AudioPlaying.svelte b/front/src/Components/UI/AudioPlaying.svelte index 1001c5b2..a2c6d321 100644 --- a/front/src/Components/UI/AudioPlaying.svelte +++ b/front/src/Components/UI/AudioPlaying.svelte @@ -1,4 +1,5 @@ -
+
Audio playing

Audio message