From 7c956d1481ce5a016e869152df1baea39fe4fe36 Mon Sep 17 00:00:00 2001 From: GRL78 <80678534+GRL78@users.noreply.github.com> Date: Thu, 26 Aug 2021 12:01:07 +0200 Subject: [PATCH] REVIEW : Migration Menu and Report Menu in Svelte (#1363) * WIP: svelte menu * temp * temp * New menu svelte * Migration of report menu in svelte * Migration of registerCustomMenu for Menu in Svelte Refactor subMenuStore Suppression of old MenuScene and ReportMenu * Suppression of HTML files that aren't use anymore * fix deeployer * First pass on css * First pass on css * Second pass on css and reportMenu * Second pass on css and reportMenu * Second pass on css and reportMenu * Third pass on css and reportMenu * Correction following test * Contact page only if environment variable exist * Update service worker Signed-off-by: Gregoire Parant * Change requested * Change requested Co-authored-by: kharhamel Co-authored-by: Gregoire Parant --- front/dist/index.tmpl.html | 26 -- front/dist/resources/html/gameMenu.html | 78 ---- front/dist/resources/html/gameMenuIcon.html | 28 -- .../dist/resources/html/gameQualityMenu.html | 81 ---- front/dist/resources/html/gameReport.html | 115 ----- front/dist/resources/html/gameShare.html | 96 ---- front/dist/resources/logos/tcm_full.png | Bin 0 -> 300 bytes front/dist/resources/logos/tcm_short.png | Bin 0 -> 216 bytes .../Api/Events/ui/MenuItemRegisterEvent.ts | 6 +- front/src/Api/IframeListener.ts | 9 +- front/src/Components/App.svelte | 27 +- .../ConsoleGlobalMessageManager.svelte | 150 ------ .../Components/Menu/AboutRoomSubMenu.svelte | 147 ++++++ .../AudioGlobalMessage.svelte} | 20 +- .../src/Components/Menu/ContactSubMenu.svelte | 15 + .../Components/Menu/CreateMapSubMenu.svelte | 51 +++ .../Menu/GlobalMessagesSubMenu.svelte | 118 +++++ front/src/Components/Menu/Menu.svelte | 132 ++++++ front/src/Components/Menu/MenuIcon.svelte | 51 ++- .../src/Components/Menu/ProfileSubMenu.svelte | 78 ++++ .../Components/Menu/SettingsSubMenu.svelte | 140 ++++++ .../TextGlobalMessage.svelte} | 32 +- .../Components/ReportMenu/BlockSubMenu.svelte | 44 ++ .../Components/ReportMenu/ReportMenu.svelte | 141 ++++++ .../ReportMenu/ReportSubMenu.svelte | 55 +++ .../Components/images}/logo-WA-min.png | Bin front/src/Connexion/LocalUserStore.ts | 9 + front/src/Enum/EnvironmentVariable.ts | 1 + front/src/Phaser/Components/Loader.ts | 52 ++- front/src/Phaser/Game/GameManager.ts | 13 +- front/src/Phaser/Game/GameScene.ts | 4 - front/src/Phaser/Login/EnableCameraScene.ts | 9 - .../src/Phaser/Login/SelectCompanionScene.ts | 1 - front/src/Phaser/Menu/MenuScene.ts | 430 ------------------ front/src/Phaser/Menu/ReportMenu.ts | 118 ----- front/src/Stores/MediaStore.ts | 2 +- front/src/Stores/MenuStore.ts | 63 ++- front/src/Stores/ShowReportScreenStore.ts | 7 +- front/src/Stores/UserInputStore.ts | 8 +- front/src/WebRtc/MediaManager.ts | 7 +- front/src/index.ts | 2 - ...css => TextGlobalMessageSvelte-Style.scss} | 18 +- front/style/index.scss | 2 +- front/style/style.scss | 1 - front/webpack.config.ts | 1 + 45 files changed, 1131 insertions(+), 1257 deletions(-) delete mode 100644 front/dist/resources/html/gameMenu.html delete mode 100644 front/dist/resources/html/gameMenuIcon.html delete mode 100644 front/dist/resources/html/gameQualityMenu.html delete mode 100644 front/dist/resources/html/gameReport.html delete mode 100644 front/dist/resources/html/gameShare.html create mode 100644 front/dist/resources/logos/tcm_full.png create mode 100644 front/dist/resources/logos/tcm_short.png delete mode 100644 front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte create mode 100644 front/src/Components/Menu/AboutRoomSubMenu.svelte rename front/src/Components/{ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte => Menu/AudioGlobalMessage.svelte} (85%) create mode 100644 front/src/Components/Menu/ContactSubMenu.svelte create mode 100644 front/src/Components/Menu/CreateMapSubMenu.svelte create mode 100644 front/src/Components/Menu/GlobalMessagesSubMenu.svelte create mode 100644 front/src/Components/Menu/Menu.svelte create mode 100644 front/src/Components/Menu/ProfileSubMenu.svelte create mode 100644 front/src/Components/Menu/SettingsSubMenu.svelte rename front/src/Components/{ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte => Menu/TextGlobalMessage.svelte} (73%) create mode 100644 front/src/Components/ReportMenu/BlockSubMenu.svelte create mode 100644 front/src/Components/ReportMenu/ReportMenu.svelte create mode 100644 front/src/Components/ReportMenu/ReportSubMenu.svelte rename front/{dist/resources/logos => src/Components/images}/logo-WA-min.png (100%) delete mode 100644 front/src/Phaser/Menu/MenuScene.ts delete mode 100644 front/src/Phaser/Menu/ReportMenu.ts rename front/style/{inputTextGlobalMessageSvelte-Style.scss => TextGlobalMessageSvelte-Style.scss} (56%) diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index 187e513a..0c89b611 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -34,7 +34,6 @@ WorkAdventure -
@@ -62,31 +61,6 @@
- -
diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html deleted file mode 100644 index 73c62918..00000000 --- a/front/dist/resources/html/gameMenu.html +++ /dev/null @@ -1,78 +0,0 @@ - - - diff --git a/front/dist/resources/html/gameMenuIcon.html b/front/dist/resources/html/gameMenuIcon.html deleted file mode 100644 index 22fe9867..00000000 --- a/front/dist/resources/html/gameMenuIcon.html +++ /dev/null @@ -1,28 +0,0 @@ - -
-
- -
-
\ No newline at end of file diff --git a/front/dist/resources/html/gameQualityMenu.html b/front/dist/resources/html/gameQualityMenu.html deleted file mode 100644 index babb3f0e..00000000 --- a/front/dist/resources/html/gameQualityMenu.html +++ /dev/null @@ -1,81 +0,0 @@ - - - diff --git a/front/dist/resources/html/gameReport.html b/front/dist/resources/html/gameReport.html deleted file mode 100644 index d35ae556..00000000 --- a/front/dist/resources/html/gameReport.html +++ /dev/null @@ -1,115 +0,0 @@ - - -
-
- -

Moderate

-

What action do you want to take?

-
-
-

Block:

-

Block any communication from and to this user. This can be reverted.

-
- -
-
-
-

Report:

-

Send a report message to the administrators of this room. They may later ban this user.

-
-
-
Your message:
- -

-
-
- -
-
-
-
- diff --git a/front/dist/resources/html/gameShare.html b/front/dist/resources/html/gameShare.html deleted file mode 100644 index 404c8680..00000000 --- a/front/dist/resources/html/gameShare.html +++ /dev/null @@ -1,96 +0,0 @@ - - - diff --git a/front/dist/resources/logos/tcm_full.png b/front/dist/resources/logos/tcm_full.png new file mode 100644 index 0000000000000000000000000000000000000000..3ea27990a3ca3cfd62f1866b766d92d407709a46 GIT binary patch literal 300 zcmV+{0n`48P)sgDDXIM|1Dp| zmbyeoV8V);i2YXtGwvUAa6OXpc(I5BlZpe=e#L|`)0nGQe!HC7{xdq`c;SNf%l|DR zO%vl3%D$^I>gH-3kbP*;zq@gog-GzZChK)p7q}jY{C8p4l`AQ+)1LE}UWDR>;!c)b zJI`-5Qf1)ITE-zS+`tiDcJM^))FyL1*W0XTW;~kO!{X5ZLVQKHxBlLdx_JxGp$wj` MelF{r5}Fto0L7nB_y7O^ literal 0 HcmV?d00001 diff --git a/front/src/Api/Events/ui/MenuItemRegisterEvent.ts b/front/src/Api/Events/ui/MenuItemRegisterEvent.ts index 404bdb13..abc8974d 100644 --- a/front/src/Api/Events/ui/MenuItemRegisterEvent.ts +++ b/front/src/Api/Events/ui/MenuItemRegisterEvent.ts @@ -1,5 +1,6 @@ import * as tg from "generic-type-guard"; import { Subject } from "rxjs"; +import { subMenusStore } from "../../../Stores/MenuStore"; export const isMenuItemRegisterEvent = new tg.IsInterface() .withProperties({ @@ -18,9 +19,6 @@ export const isMenuItemRegisterIframeEvent = new tg.IsInterface() }) .get(); -const _registerMenuCommandStream: Subject = new Subject(); -export const registerMenuCommandStream = _registerMenuCommandStream.asObservable(); - export function handleMenuItemRegistrationEvent(event: MenuItemRegisterEvent) { - _registerMenuCommandStream.next(event.menutItem); + subMenusStore.addMenu(event.menutItem); } diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index eab33945..8ab68096 100644 --- a/front/src/Api/IframeListener.ts +++ b/front/src/Api/IframeListener.ts @@ -34,6 +34,7 @@ import { SetTilesEvent, isSetTilesEvent } from "./Events/SetTilesEvent"; import type { SetVariableEvent } from "./Events/SetVariableEvent"; import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent"; import { EmbeddedWebsite } from "./iframe/Room/EmbeddedWebsite"; +import { subMenusStore } from "../Stores/MenuStore"; type AnswererCallback = ( query: IframeQueryMap[T]["query"], @@ -93,12 +94,6 @@ class IframeListener { private readonly _setPropertyStream: Subject = new Subject(); public readonly setPropertyStream = this._setPropertyStream.asObservable(); - private readonly _registerMenuCommandStream: Subject = new Subject(); - public readonly registerMenuCommandStream = this._registerMenuCommandStream.asObservable(); - - private readonly _unregisterMenuCommandStream: Subject = new Subject(); - public readonly unregisterMenuCommandStream = this._unregisterMenuCommandStream.asObservable(); - private readonly _playSoundStream: Subject = new Subject(); public readonly playSoundStream = this._playSoundStream.asObservable(); @@ -264,7 +259,7 @@ class IframeListener { const data = payload.data.menutItem; // @ts-ignore this.iframeCloseCallbacks.get(iframe).push(() => { - this._unregisterMenuCommandStream.next(data); + subMenusStore.removeMenu(data); }); handleMenuItemRegistrationEvent(payload.data); } else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) { diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte index 806eaea1..8b033e5f 100644 --- a/front/src/Components/App.svelte +++ b/front/src/Components/App.svelte @@ -1,4 +1,6 @@ - - - -
-
- - -
-
-
-

Global Message

- -
-
- {#if inputSendTextActive} - - {/if} - {#if uploadMusicActive} - - {/if} -
-
- - -
-
-
- - - - diff --git a/front/src/Components/Menu/AboutRoomSubMenu.svelte b/front/src/Components/Menu/AboutRoomSubMenu.svelte new file mode 100644 index 00000000..3ccc9669 --- /dev/null +++ b/front/src/Components/Menu/AboutRoomSubMenu.svelte @@ -0,0 +1,147 @@ + + +
+ +
+

Share the link of the room !

+ +
+

Information on the map

+
+

{mapName}

+

{mapDescription}

+

expandedMapCopyright = !expandedMapCopyright}>Copyrights of the map

+ +

expandedTilesetCopyright = !expandedTilesetCopyright}>Copyrights of the tilesets

+ +
+
+ + + \ No newline at end of file diff --git a/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte b/front/src/Components/Menu/AudioGlobalMessage.svelte similarity index 85% rename from front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte rename to front/src/Components/Menu/AudioGlobalMessage.svelte index 4718d246..1704e732 100644 --- a/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte +++ b/front/src/Components/Menu/AudioGlobalMessage.svelte @@ -1,17 +1,14 @@ @@ -103,24 +94,17 @@ img { flex: 1 1 auto; - max-height: 80%; margin-bottom: 20px; } - p { - flex: 1 1 auto; - margin-bottom: 5px; - color: whitesmoke; font-size: 1rem; - &.err { color: #ce372b; } } - input { display: none; } diff --git a/front/src/Components/Menu/ContactSubMenu.svelte b/front/src/Components/Menu/ContactSubMenu.svelte new file mode 100644 index 00000000..6cca0609 --- /dev/null +++ b/front/src/Components/Menu/ContactSubMenu.svelte @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/front/src/Components/Menu/CreateMapSubMenu.svelte b/front/src/Components/Menu/CreateMapSubMenu.svelte new file mode 100644 index 00000000..6cce71ac --- /dev/null +++ b/front/src/Components/Menu/CreateMapSubMenu.svelte @@ -0,0 +1,51 @@ + + +
+
+
+

Getting started

+

+ WorkAdventure allows you to create an online space to communicate spontaneously with others. + And it all starts with creating your own space. Choose from a large selection of prefabricated maps by our team. +

+ +
+
+

Create your map

+

You can also create your own custom map by following the step of the documentation.

+ +
+
+
+ + \ No newline at end of file diff --git a/front/src/Components/Menu/GlobalMessagesSubMenu.svelte b/front/src/Components/Menu/GlobalMessagesSubMenu.svelte new file mode 100644 index 00000000..8ec66de9 --- /dev/null +++ b/front/src/Components/Menu/GlobalMessagesSubMenu.svelte @@ -0,0 +1,118 @@ + + +
+
+
+ +
+
+ +
+
+
+ {#if inputSendTextActive} + + {/if} + {#if uploadAudioActive} + + {/if} +
+
+ +
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/front/src/Components/Menu/Menu.svelte b/front/src/Components/Menu/Menu.svelte new file mode 100644 index 00000000..afbcd065 --- /dev/null +++ b/front/src/Components/Menu/Menu.svelte @@ -0,0 +1,132 @@ + + + + + +
+
+

Menu

+ +
+
+

{activeSubMenu}

+ +
+
+ + \ No newline at end of file diff --git a/front/src/Components/Menu/MenuIcon.svelte b/front/src/Components/Menu/MenuIcon.svelte index 241bf45f..2da9e870 100644 --- a/front/src/Components/Menu/MenuIcon.svelte +++ b/front/src/Components/Menu/MenuIcon.svelte @@ -1,33 +1,40 @@ + +
-
- -
+ open menu
diff --git a/front/src/Components/Menu/ProfileSubMenu.svelte b/front/src/Components/Menu/ProfileSubMenu.svelte new file mode 100644 index 00000000..516baf6b --- /dev/null +++ b/front/src/Components/Menu/ProfileSubMenu.svelte @@ -0,0 +1,78 @@ + + +
+
+ +
+
+ +
+
+ +
+ +
+ + \ No newline at end of file diff --git a/front/src/Components/Menu/SettingsSubMenu.svelte b/front/src/Components/Menu/SettingsSubMenu.svelte new file mode 100644 index 00000000..4c0c62dd --- /dev/null +++ b/front/src/Components/Menu/SettingsSubMenu.svelte @@ -0,0 +1,140 @@ + + +
+
+

Game quality

+
+ +
+
+
+

Video quality

+
+ +
+
+
+

(Saving these settings will restart the game)

+ +
+
+ + +
+
+ + \ No newline at end of file diff --git a/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte b/front/src/Components/Menu/TextGlobalMessage.svelte similarity index 73% rename from front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte rename to front/src/Components/Menu/TextGlobalMessage.svelte index a9817a98..1749ba7d 100644 --- a/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte +++ b/front/src/Components/Menu/TextGlobalMessage.svelte @@ -1,7 +1,7 @@
-
+
diff --git a/front/src/Components/ReportMenu/BlockSubMenu.svelte b/front/src/Components/ReportMenu/BlockSubMenu.svelte new file mode 100644 index 00000000..0ec04abc --- /dev/null +++ b/front/src/Components/ReportMenu/BlockSubMenu.svelte @@ -0,0 +1,44 @@ + + +
+

Block

+

Block any communication from and to {userName}. This can be reverted.

+ +
+ + + \ No newline at end of file diff --git a/front/src/Components/ReportMenu/ReportMenu.svelte b/front/src/Components/ReportMenu/ReportMenu.svelte new file mode 100644 index 00000000..9dd0d9f3 --- /dev/null +++ b/front/src/Components/ReportMenu/ReportMenu.svelte @@ -0,0 +1,141 @@ + + + + +
+
+

Moderate {userName}

+
+ +
+
+
+
+ +
+
+ +
+
+
+ {#if blockActive} + + {:else if reportActive} + + {:else } +

ERROR : There is no action selected.

+ {/if} +
+
+ + \ No newline at end of file diff --git a/front/src/Components/ReportMenu/ReportSubMenu.svelte b/front/src/Components/ReportMenu/ReportSubMenu.svelte new file mode 100644 index 00000000..45167cc0 --- /dev/null +++ b/front/src/Components/ReportMenu/ReportSubMenu.svelte @@ -0,0 +1,55 @@ + + +
+

Report

+

Send a report message to the administrators of this room. They may later ban this user.

+
+
+ + +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/front/dist/resources/logos/logo-WA-min.png b/front/src/Components/images/logo-WA-min.png similarity index 100% rename from front/dist/resources/logos/logo-WA-min.png rename to front/src/Components/images/logo-WA-min.png diff --git a/front/src/Connexion/LocalUserStore.ts b/front/src/Connexion/LocalUserStore.ts index 8c17ed3f..db4c3083 100644 --- a/front/src/Connexion/LocalUserStore.ts +++ b/front/src/Connexion/LocalUserStore.ts @@ -16,6 +16,7 @@ const lastRoomUrl = "lastRoomUrl"; const authToken = "authToken"; const state = "state"; const nonce = "nonce"; +const notification = "notificationPermission"; const cacheAPIIndex = "workavdenture-cache"; @@ -143,6 +144,14 @@ class LocalUserStore { return localStorage.getItem(authToken); } + setNotification(value: string): void { + localStorage.setItem(notification, value); + } + + getNotification(): string | null { + return localStorage.getItem(notification); + } + generateState(): string { const newState = uuidv4(); localStorage.setItem(state, newState); diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts index b63f4f07..907162d4 100644 --- a/front/src/Enum/EnvironmentVariable.ts +++ b/front/src/Enum/EnvironmentVariable.ts @@ -18,6 +18,7 @@ export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || " 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 NODE_ENV = process.env.NODE_ENV || "development"; +export const CONTACT_URL = process.env.CONTACT_URL || undefined; export const isMobile = (): boolean => window.innerWidth <= 800 || window.innerHeight <= 600; diff --git a/front/src/Phaser/Components/Loader.ts b/front/src/Phaser/Components/Loader.ts index 1ee18b32..c80e31b8 100644 --- a/front/src/Phaser/Components/Loader.ts +++ b/front/src/Phaser/Components/Loader.ts @@ -1,48 +1,63 @@ import ImageFrameConfig = Phaser.Types.Loader.FileTypes.ImageFrameConfig; +import { DirtyScene } from "../Game/DirtyScene"; -const LogoNameIndex: string = 'logoLoading'; -const TextName: string = 'Loading...'; -const LogoResource: string = 'resources/logos/logo.png'; -const LogoFrame: ImageFrameConfig = {frameWidth: 307, frameHeight: 59}; +const LogoNameIndex: string = "logoLoading"; +const TextName: string = "Loading..."; +const LogoResource: string = "resources/logos/logo.png"; +const LogoFrame: ImageFrameConfig = { frameWidth: 307, frameHeight: 59 }; export const addLoader = (scene: Phaser.Scene): void => { // If there is nothing to load, do not display the loader. if (scene.load.list.entries.length === 0) { return; } - let loadingText: Phaser.GameObjects.Text|null = null; + let loadingText: Phaser.GameObjects.Text | null = null; const loadingBarWidth: number = Math.floor(scene.game.renderer.width / 3); const loadingBarHeight: number = 16; const padding: number = 5; const promiseLoadLogoTexture = new Promise((res) => { - if(scene.load.textureManager.exists(LogoNameIndex)){ - return res(scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)); - }else{ + if (scene.load.textureManager.exists(LogoNameIndex)) { + return res( + scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex) + ); + } else { //add loading if logo image is not ready loadingText = scene.add.text(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 50, TextName); } scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame); scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => { - if(loadingText){ + if (loadingText) { loadingText.destroy(); } - return res(scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)); + return res( + scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex) + ); }); }); const progressContainer = scene.add.graphics(); const progress = scene.add.graphics(); progressContainer.fillStyle(0x444444, 0.8); - progressContainer.fillRect((scene.game.renderer.width - loadingBarWidth) / 2 - padding, scene.game.renderer.height / 2 + 50 - padding, loadingBarWidth + padding * 2, loadingBarHeight + padding * 2); + progressContainer.fillRect( + (scene.game.renderer.width - loadingBarWidth) / 2 - padding, + scene.game.renderer.height / 2 + 50 - padding, + loadingBarWidth + padding * 2, + loadingBarHeight + padding * 2 + ); - scene.load.on('progress', (value: number) => { + scene.load.on("progress", (value: number) => { progress.clear(); - progress.fillStyle(0xBBBBBB, 1); - progress.fillRect((scene.game.renderer.width - loadingBarWidth) / 2, scene.game.renderer.height / 2 + 50, loadingBarWidth * value, loadingBarHeight); + progress.fillStyle(0xbbbbbb, 1); + progress.fillRect( + (scene.game.renderer.width - loadingBarWidth) / 2, + scene.game.renderer.height / 2 + 50, + loadingBarWidth * value, + loadingBarHeight + ); }); - scene.load.on('complete', () => { - if(loadingText){ + scene.load.on("complete", () => { + if (loadingText) { loadingText.destroy(); } promiseLoadLogoTexture.then((resLoadingImage: Phaser.GameObjects.Image) => { @@ -50,5 +65,8 @@ export const addLoader = (scene: Phaser.Scene): void => { }); progress.destroy(); progressContainer.destroy(); + if (scene instanceof DirtyScene) { + scene.markDirty(); + } }); -} +}; diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index df527f9b..45d0bc86 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -1,7 +1,6 @@ import { GameScene } from "./GameScene"; import { connectionManager } from "../../Connexion/ConnectionManager"; import type { Room } from "../../Connexion/Room"; -import { MenuScene, MenuSceneName } from "../Menu/MenuScene"; import { LoginSceneName } from "../Login/LoginScene"; import { SelectCharacterSceneName } from "../Login/SelectCharacterScene"; import { EnableCameraSceneName } from "../Login/EnableCameraScene"; @@ -9,6 +8,7 @@ import { localUserStore } from "../../Connexion/LocalUserStore"; import { get } from "svelte/store"; import { requestedCameraState, requestedMicrophoneState } from "../../Stores/MediaStore"; import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore"; +import { menuIconVisiblilityStore } from "../../Stores/MenuStore"; /** * This class should be responsible for any scene starting/stopping @@ -18,8 +18,9 @@ export class GameManager { private characterLayers: string[] | null; private companion: string | null; private startRoom!: Room; - private scenePlugin!: Phaser.Scenes.ScenePlugin; currentGameSceneName: string | null = null; + // Note: this scenePlugin is the scenePlugin of the EntryScene. We should always provide a key in methods called on this scenePlugin. + private scenePlugin!: Phaser.Scenes.ScenePlugin; constructor() { this.playerName = localUserStore.getName(); @@ -83,7 +84,6 @@ export class GameManager { public goToStartingMap(): void { console.log("starting " + (this.currentGameSceneName || this.startRoom.key)); this.scenePlugin.start(this.currentGameSceneName || this.startRoom.key); - this.scenePlugin.launch(MenuSceneName); if ( !localUserStore.getHelpCameraSettingsShown() && @@ -96,8 +96,7 @@ export class GameManager { public gameSceneIsCreated(scene: GameScene) { this.currentGameSceneName = scene.scene.key; - const menuScene: MenuScene = scene.scene.get(MenuSceneName) as MenuScene; - menuScene.revealMenuIcon(); + menuIconVisiblilityStore.set(true); } /** @@ -109,7 +108,7 @@ export class GameManager { const gameScene: GameScene = this.scenePlugin.get(this.currentGameSceneName) as GameScene; gameScene.cleanupClosingScene(); gameScene.createSuccessorGameScene(false, false); - this.scenePlugin.sleep(MenuSceneName); + menuIconVisiblilityStore.set(false); if (!this.scenePlugin.get(targetSceneName)) { this.scenePlugin.add(targetSceneName, sceneClass, false); } @@ -122,7 +121,7 @@ export class GameManager { tryResumingGame(fallbackSceneName: string) { if (this.currentGameSceneName) { this.scenePlugin.start(this.currentGameSceneName); - this.scenePlugin.wake(MenuSceneName); + menuIconVisiblilityStore.set(true); } else { this.scenePlugin.run(fallbackSceneName); } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index bd6890dc..be3b61ef 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -45,7 +45,6 @@ import type { ActionableItem } from "../Items/ActionableItem"; import type { ItemFactoryInterface } from "../Items/ItemFactoryInterface"; import { SelectCharacterScene, SelectCharacterSceneName } from "../Login/SelectCharacterScene"; import type { ITiledMap, ITiledMapLayer, ITiledMapProperty, ITiledMapObject, ITiledTileSet } from "../Map/ITiledMap"; -import { MenuScene, MenuSceneName } from "../Menu/MenuScene"; import { PlayerAnimationDirections } from "../Player/Animation"; import { hasMovedEventName, Player, requestEmoteEventName } from "../Player/Player"; import { ErrorSceneName } from "../Reconnecting/ErrorScene"; @@ -1323,9 +1322,6 @@ ${escapedMessage} urlManager.pushStartLayerNameToUrl(roomUrl.hash); } - const menuScene: MenuScene = this.scene.get(MenuSceneName) as MenuScene; - menuScene.reset(); - if (!targetRoom.isEqual(this.room)) { if (this.scene.get(targetRoom.key) === null) { console.error("next room not loaded", targetRoom.key); diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts index 55fc4b82..1b317d12 100644 --- a/front/src/Phaser/Login/EnableCameraScene.ts +++ b/front/src/Phaser/Login/EnableCameraScene.ts @@ -1,13 +1,4 @@ import { gameManager } from "../Game/GameManager"; -import { TextField } from "../Components/TextField"; -import Image = Phaser.GameObjects.Image; -import { mediaManager } from "../../WebRtc/MediaManager"; -import { SoundMeter } from "../Components/SoundMeter"; -import { HtmlUtils } from "../../WebRtc/HtmlUtils"; -import { touchScreenManager } from "../../Touch/TouchScreenManager"; -import { PinchManager } from "../UserInput/PinchManager"; -import Zone = Phaser.GameObjects.Zone; -import { MenuScene } from "../Menu/MenuScene"; import { ResizableScene } from "./ResizableScene"; import { enableCameraSceneVisibilityStore } from "../../Stores/MediaStore"; diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts index ed0947cf..cbff75d3 100644 --- a/front/src/Phaser/Login/SelectCompanionScene.ts +++ b/front/src/Phaser/Login/SelectCompanionScene.ts @@ -9,7 +9,6 @@ import type { CompanionResourceDescriptionInterface } from "../Companion/Compani import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager"; import { touchScreenManager } from "../../Touch/TouchScreenManager"; import { PinchManager } from "../UserInput/PinchManager"; -import { MenuScene } from "../Menu/MenuScene"; import { selectCompanionSceneVisibleStore } from "../../Stores/SelectCompanionStore"; import { waScaleManager } from "../Services/WaScaleManager"; import { isMobile } from "../../Enum/EnvironmentVariable"; diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts deleted file mode 100644 index 9dd138ca..00000000 --- a/front/src/Phaser/Menu/MenuScene.ts +++ /dev/null @@ -1,430 +0,0 @@ -import { LoginScene, LoginSceneName } from "../Login/LoginScene"; -import { SelectCharacterScene, SelectCharacterSceneName } from "../Login/SelectCharacterScene"; -import { SelectCompanionScene, SelectCompanionSceneName } from "../Login/SelectCompanionScene"; -import { gameManager } from "../Game/GameManager"; -import { localUserStore } from "../../Connexion/LocalUserStore"; -import { gameReportKey, gameReportRessource, ReportMenu } from "./ReportMenu"; -import { connectionManager } from "../../Connexion/ConnectionManager"; -import { GameConnexionTypes } from "../../Url/UrlManager"; -import { menuIconVisible } from "../../Stores/MenuStore"; -import { videoConstraintStore } from "../../Stores/MediaStore"; -import { showReportScreenStore } from "../../Stores/ShowReportScreenStore"; -import { HtmlUtils } from "../../WebRtc/HtmlUtils"; -import { iframeListener } from "../../Api/IframeListener"; -import { Subscription } from "rxjs"; -import { registerMenuCommandStream } from "../../Api/Events/ui/MenuItemRegisterEvent"; -import { sendMenuClickedEvent } from "../../Api/iframe/Ui/MenuItem"; -import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore"; -import { get } from "svelte/store"; -import { playersStore } from "../../Stores/PlayersStore"; -import { mediaManager } from "../../WebRtc/MediaManager"; -import { chatVisibilityStore } from "../../Stores/ChatStore"; -import { ADMIN_URL } from "../../Enum/EnvironmentVariable"; - -export const MenuSceneName = "MenuScene"; -const gameMenuKey = "gameMenu"; -const gameMenuIconKey = "gameMenuIcon"; -const gameSettingsMenuKey = "gameSettingsMenu"; -const gameShare = "gameShare"; - -const closedSideMenuX = -1000; -const openedSideMenuX = 0; - -/** - * The scene that manages the game menu, rendered using a DOM element. - */ -export class MenuScene extends Phaser.Scene { - private menuElement!: Phaser.GameObjects.DOMElement; - private gameQualityMenuElement!: Phaser.GameObjects.DOMElement; - private gameShareElement!: Phaser.GameObjects.DOMElement; - private gameReportElement!: ReportMenu; - private sideMenuOpened = false; - private settingsMenuOpened = false; - private gameShareOpened = false; - private gameQualityValue: number; - private videoQualityValue: number; - private menuButton!: Phaser.GameObjects.DOMElement; - private subscriptions = new Subscription(); - constructor() { - super({ key: MenuSceneName }); - - this.gameQualityValue = localUserStore.getGameQualityValue(); - this.videoQualityValue = localUserStore.getVideoQualityValue(); - - this.subscriptions.add( - registerMenuCommandStream.subscribe((menuCommand) => { - this.addMenuOption(menuCommand); - }) - ); - - this.subscriptions.add( - iframeListener.unregisterMenuCommandStream.subscribe((menuCommand) => { - this.destroyMenu(menuCommand); - }) - ); - } - - reset() { - const addedMenuItems = [...this.menuElement.node.querySelectorAll(".fromApi")]; - for (let index = addedMenuItems.length - 1; index >= 0; index--) { - addedMenuItems[index].remove(); - } - } - - public addMenuOption(menuText: string) { - const wrappingSection = document.createElement("section"); - const escapedHtml = HtmlUtils.escapeHtml(menuText); - wrappingSection.innerHTML = ``; - const menuItemContainer = this.menuElement.node.querySelector("#gameMenu main"); - if (menuItemContainer) { - menuItemContainer.querySelector(`#${escapedHtml}.fromApi`)?.remove(); - menuItemContainer.insertBefore(wrappingSection, menuItemContainer.querySelector("#socialLinks")); - } - } - - preload() { - this.load.html(gameMenuKey, "resources/html/gameMenu.html"); - this.load.html(gameMenuIconKey, "resources/html/gameMenuIcon.html"); - this.load.html(gameSettingsMenuKey, "resources/html/gameQualityMenu.html"); - this.load.html(gameShare, "resources/html/gameShare.html"); - this.load.html(gameReportKey, gameReportRessource); - } - - create() { - menuIconVisible.set(true); - this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey); - this.menuElement.setOrigin(0); - MenuScene.revealMenusAfterInit(this.menuElement, "gameMenu"); - - if (mediaManager.hasNotification()) { - HtmlUtils.getElementByIdOrFail("enableNotification").hidden = true; - } - - const middleX = window.innerWidth / 3 - 298; - this.gameQualityMenuElement = this.add.dom(middleX, -400).createFromCache(gameSettingsMenuKey); - MenuScene.revealMenusAfterInit(this.gameQualityMenuElement, "gameQuality"); - - this.gameShareElement = this.add.dom(middleX, -400).createFromCache(gameShare); - MenuScene.revealMenusAfterInit(this.gameShareElement, gameShare); - this.gameShareElement.addListener("click"); - this.gameShareElement.on("click", (event: MouseEvent) => { - event.preventDefault(); - if ((event?.target as HTMLInputElement).id === "gameShareFormSubmit") { - this.copyLink(); - } else if ((event?.target as HTMLInputElement).id === "gameShareFormCancel") { - this.closeGameShare(); - } - }); - - this.gameReportElement = new ReportMenu( - this, - connectionManager.getConnexionType === GameConnexionTypes.anonymous - ); - showReportScreenStore.subscribe((user) => { - if (user !== null) { - this.closeAll(); - const uuid = playersStore.getPlayerById(user.userId)?.userUuid; - if (uuid === undefined) { - throw new Error("Could not find UUID for user with ID " + user.userId); - } - this.gameReportElement.open(uuid, user.userName); - } - }); - - this.input.keyboard.on("keyup-TAB", () => { - this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu(); - }); - this.menuButton = this.add.dom(0, 0).createFromCache(gameMenuIconKey); - this.menuButton.addListener("click"); - this.menuButton.on("click", () => { - this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu(); - }); - - this.menuElement.addListener("click"); - this.menuElement.on("click", this.onMenuClick.bind(this)); - - chatVisibilityStore.subscribe((v) => { - this.menuButton.setVisible(!v); - }); - } - - //todo put this method in a parent menuElement class - static 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); - } - - public revealMenuIcon(): void { - //TODO fix me: add try catch because at the same time, 'this.menuButton' variable doesn't exist and there is error on 'getChildByID' function - try { - (this.menuButton.getChildByID("menuIcon") as HTMLElement).hidden = false; - } catch (err) { - console.error(err); - } - } - - openSideMenu() { - if (this.sideMenuOpened) return; - this.closeAll(); - this.sideMenuOpened = true; - this.menuButton.getChildByID("openMenuButton").innerHTML = "X"; - const connection = gameManager.getCurrentGameScene().connection; - if (connection && connection.isAdmin()) { - const adminSection = this.menuElement.getChildByID("adminConsoleSection") as HTMLElement; - adminSection.hidden = false; - } - //TODO bind with future metadata of card - //if (connectionManager.getConnexionType === GameConnexionTypes.anonymous){ - const adminSection = this.menuElement.getChildByID("socialLinks") as HTMLElement; - adminSection.hidden = false; - //} - this.tweens.add({ - targets: this.menuElement, - x: openedSideMenuX, - duration: 500, - ease: "Power3", - }); - } - - private closeSideMenu(): void { - if (!this.sideMenuOpened) return; - this.sideMenuOpened = false; - this.closeAll(); - this.menuButton.getChildByID("openMenuButton").innerHTML = ``; - consoleGlobalMessageManagerVisibleStore.set(false); - this.tweens.add({ - targets: this.menuElement, - x: closedSideMenuX, - duration: 500, - ease: "Power3", - }); - } - - private openGameSettingsMenu(): void { - if (this.settingsMenuOpened) { - this.closeGameQualityMenu(); - return; - } - //close all - this.closeAll(); - - this.settingsMenuOpened = true; - - const gameQualitySelect = this.gameQualityMenuElement.getChildByID("select-game-quality") as HTMLInputElement; - gameQualitySelect.value = "" + this.gameQualityValue; - const videoQualitySelect = this.gameQualityMenuElement.getChildByID("select-video-quality") as HTMLInputElement; - videoQualitySelect.value = "" + this.videoQualityValue; - - this.gameQualityMenuElement.addListener("click"); - this.gameQualityMenuElement.on("click", (event: MouseEvent) => { - event.preventDefault(); - if ((event?.target as HTMLInputElement).id === "gameQualityFormSubmit") { - const gameQualitySelect = this.gameQualityMenuElement.getChildByID( - "select-game-quality" - ) as HTMLInputElement; - const videoQualitySelect = this.gameQualityMenuElement.getChildByID( - "select-video-quality" - ) as HTMLInputElement; - this.saveSetting(parseInt(gameQualitySelect.value), parseInt(videoQualitySelect.value)); - } else if ((event?.target as HTMLInputElement).id === "gameQualityFormCancel") { - this.closeGameQualityMenu(); - } - }); - - let middleY = this.scale.height / 2 - 392 / 2; - if (middleY < 0) { - middleY = 0; - } - let middleX = this.scale.width / 2 - 457 / 2; - if (middleX < 0) { - middleX = 0; - } - this.tweens.add({ - targets: this.gameQualityMenuElement, - y: middleY, - x: middleX, - duration: 1000, - ease: "Power3", - }); - } - - private closeGameQualityMenu(): void { - if (!this.settingsMenuOpened) return; - this.settingsMenuOpened = false; - - this.gameQualityMenuElement.removeListener("click"); - this.tweens.add({ - targets: this.gameQualityMenuElement, - y: -400, - duration: 1000, - ease: "Power3", - }); - } - - private openGameShare(): void { - if (this.gameShareOpened) { - this.closeGameShare(); - return; - } - //close all - this.closeAll(); - - const gameShareLink = this.gameShareElement.getChildByID("gameShareLink") as HTMLInputElement; - gameShareLink.value = location.toString(); - - this.gameShareOpened = true; - - let middleY = this.scale.height / 2 - 85; - if (middleY < 0) { - middleY = 0; - } - let middleX = this.scale.width / 2 - 200; - if (middleX < 0) { - middleX = 0; - } - this.tweens.add({ - targets: this.gameShareElement, - y: middleY, - x: middleX, - duration: 1000, - ease: "Power3", - }); - } - - private closeGameShare(): void { - const gameShareInfo = this.gameShareElement.getChildByID("gameShareInfo") as HTMLParagraphElement; - gameShareInfo.innerText = ""; - gameShareInfo.style.display = "none"; - this.gameShareOpened = false; - this.tweens.add({ - targets: this.gameShareElement, - y: -400, - duration: 1000, - ease: "Power3", - }); - } - - private onMenuClick(event: MouseEvent) { - const htmlMenuItem = event?.target as HTMLInputElement; - if (htmlMenuItem.classList.contains("not-button")) { - return; - } - event.preventDefault(); - - if (htmlMenuItem.classList.contains("fromApi")) { - sendMenuClickedEvent(htmlMenuItem.id); - return; - } - - switch ((event?.target as HTMLInputElement).id) { - case "changeNameButton": - this.closeSideMenu(); - gameManager.leaveGame(LoginSceneName, new LoginScene()); - break; - case "sparkButton": - this.gotToCreateMapPage(); - break; - case "changeSkinButton": - this.closeSideMenu(); - gameManager.leaveGame(SelectCharacterSceneName, new SelectCharacterScene()); - break; - case "changeCompanionButton": - this.closeSideMenu(); - gameManager.leaveGame(SelectCompanionSceneName, new SelectCompanionScene()); - break; - case "closeButton": - this.closeSideMenu(); - break; - case "shareButton": - this.openGameShare(); - break; - case "editGameSettingsButton": - this.openGameSettingsMenu(); - break; - case "oidcLogin": - connectionManager.loadOpenIDScreen(); - break; - case "toggleFullscreen": - this.toggleFullscreen(); - break; - case "enableNotification": - this.enableNotification(); - break; - case "adminConsoleButton": - if (get(consoleGlobalMessageManagerVisibleStore)) { - consoleGlobalMessageManagerVisibleStore.set(false); - } else { - consoleGlobalMessageManagerVisibleStore.set(true); - } - break; - } - } - - private async copyLink() { - await navigator.clipboard.writeText(location.toString()); - const gameShareInfo = this.gameShareElement.getChildByID("gameShareInfo") as HTMLParagraphElement; - gameShareInfo.innerText = "Link copied, you can share it now!"; - gameShareInfo.style.display = "block"; - } - - private saveSetting(valueGame: number, valueVideo: number) { - if (valueGame !== this.gameQualityValue) { - this.gameQualityValue = valueGame; - localUserStore.setGameQualityValue(valueGame); - window.location.reload(); - } - if (valueVideo !== this.videoQualityValue) { - this.videoQualityValue = valueVideo; - localUserStore.setVideoQualityValue(valueVideo); - videoConstraintStore.setFrameRate(valueVideo); - } - this.closeGameQualityMenu(); - } - - private gotToCreateMapPage() { - //const sparkHost = 'https://'+window.location.host.replace('play.', '')+'/choose-map.html'; - //TODO fix me: this button can to send us on WorkAdventure BO. - //const sparkHost = ADMIN_URL + "/getting-started"; - - //The redirection must be only on workadventu.re domain - //To day the domain staging cannot be use by customer - const sparkHost = "https://workadventu.re/getting-started"; - window.open(sparkHost, "_blank"); - } - - private closeAll() { - this.closeGameQualityMenu(); - this.closeGameShare(); - this.gameReportElement.close(); - } - - private toggleFullscreen() { - const body = document.querySelector("body"); - if (body) { - if (document.fullscreenElement ?? document.fullscreen) { - document.exitFullscreen(); - } else { - body.requestFullscreen(); - } - } - } - - public destroyMenu(menu: string) { - this.menuElement.getChildByID(menu).remove(); - } - - public isDirty(): boolean { - return false; - } - - private enableNotification() { - mediaManager.requestNotification().then(() => { - if (mediaManager.hasNotification()) { - HtmlUtils.getElementByIdOrFail("enableNotification").hidden = true; - } - }); - } -} diff --git a/front/src/Phaser/Menu/ReportMenu.ts b/front/src/Phaser/Menu/ReportMenu.ts deleted file mode 100644 index 5bcec0a8..00000000 --- a/front/src/Phaser/Menu/ReportMenu.ts +++ /dev/null @@ -1,118 +0,0 @@ -import { MenuScene } from "./MenuScene"; -import { gameManager } from "../Game/GameManager"; -import { blackListManager } from "../../WebRtc/BlackListManager"; -import { playersStore } from "../../Stores/PlayersStore"; - -export const gameReportKey = "gameReport"; -export const gameReportRessource = "resources/html/gameReport.html"; - -export class ReportMenu extends Phaser.GameObjects.DOMElement { - private opened: boolean = false; - - private userUuid!: string; - private userName!: string | undefined; - private anonymous: boolean; - - constructor(scene: Phaser.Scene, anonymous: boolean) { - super(scene, -2000, -2000); - this.anonymous = anonymous; - this.createFromCache(gameReportKey); - - if (this.anonymous) { - const divToHide = this.getChildByID("reportSection") as HTMLElement; - divToHide.hidden = true; - const textToHide = this.getChildByID("askActionP") as HTMLElement; - textToHide.hidden = true; - } - - scene.add.existing(this); - MenuScene.revealMenusAfterInit(this, gameReportKey); - - this.addListener("click"); - this.on("click", (event: MouseEvent) => { - event.preventDefault(); - if ((event?.target as HTMLInputElement).id === "gameReportFormSubmit") { - this.submitReport(); - } else if ((event?.target as HTMLInputElement).id === "gameReportFormCancel") { - this.close(); - } else if ((event?.target as HTMLInputElement).id === "toggleBlockButton") { - this.toggleBlock(); - } - }); - } - - public open(userUuid: string, userName: string | undefined): void { - if (this.opened) { - this.close(); - return; - } - - this.userUuid = userUuid; - this.userName = userName; - - const mainEl = this.getChildByID("gameReport") as HTMLElement; - this.x = this.getCenteredX(mainEl); - this.y = this.getHiddenY(mainEl); - - const gameTitleReport = this.getChildByID("nameReported") as HTMLElement; - gameTitleReport.innerText = userName || ""; - - const blockButton = this.getChildByID("toggleBlockButton") as HTMLElement; - blockButton.innerText = blackListManager.isBlackListed(this.userUuid) ? "Unblock this user" : "Block this user"; - - this.opened = true; - - gameManager.getCurrentGameScene().userInputManager.disableControls(); - - this.scene.tweens.add({ - targets: this, - y: this.getCenteredY(mainEl), - duration: 1000, - ease: "Power3", - }); - } - - public close(): void { - gameManager.getCurrentGameScene().userInputManager.restoreControls(); - this.opened = false; - const mainEl = this.getChildByID("gameReport") as HTMLElement; - this.scene.tweens.add({ - targets: this, - y: this.getHiddenY(mainEl), - duration: 1000, - ease: "Power3", - }); - } - - //todo: into a parent class? - private getCenteredX(mainEl: HTMLElement): number { - return window.innerWidth / 4 - mainEl.clientWidth / 2; - } - private getHiddenY(mainEl: HTMLElement): number { - return -mainEl.clientHeight - 50; - } - private getCenteredY(mainEl: HTMLElement): number { - return window.innerHeight / 4 - mainEl.clientHeight / 2; - } - - private toggleBlock(): void { - !blackListManager.isBlackListed(this.userUuid) - ? blackListManager.blackList(this.userUuid) - : blackListManager.cancelBlackList(this.userUuid); - this.close(); - } - - private submitReport(): void { - const gamePError = this.getChildByID("gameReportErr") as HTMLParagraphElement; - gamePError.innerText = ""; - gamePError.style.display = "none"; - const gameTextArea = this.getChildByID("gameReportInput") as HTMLInputElement; - if (!gameTextArea || !gameTextArea.value) { - gamePError.innerText = "Report message cannot to be empty."; - gamePError.style.display = "block"; - return; - } - gameManager.getCurrentGameScene().connection?.emitReportPlayerMessage(this.userUuid, gameTextArea.value); - this.close(); - } -} diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts index 8e70a1af..eda124c6 100644 --- a/front/src/Stores/MediaStore.ts +++ b/front/src/Stores/MediaStore.ts @@ -170,7 +170,7 @@ function createVideoConstraintStore() { setFrameRate: (frameRate: number) => update((constraints) => { constraints.frameRate = { ideal: frameRate }; - + localUserStore.setVideoQualityValue(frameRate); return constraints; }), }; diff --git a/front/src/Stores/MenuStore.ts b/front/src/Stores/MenuStore.ts index 084e8ce8..5613eee8 100644 --- a/front/src/Stores/MenuStore.ts +++ b/front/src/Stores/MenuStore.ts @@ -1,7 +1,11 @@ -import { writable } from "svelte/store"; +import { get, writable } from "svelte/store"; import Timeout = NodeJS.Timeout; +import { userIsAdminStore } from "./GameStore"; +import { CONTACT_URL } from "../Enum/EnvironmentVariable"; -export const menuIconVisible = writable(false); +export const menuIconVisiblilityStore = writable(false); +export const menuVisiblilityStore = writable(false); +export const menuInputFocusStore = writable(false); let warningContainerTimeout: Timeout | null = null; function createWarningContainerStore() { @@ -21,3 +25,58 @@ function createWarningContainerStore() { } export const warningContainerStore = createWarningContainerStore(); + +export enum SubMenusInterface { + settings = "Settings", + profile = "Profile", + createMap = "Create a Map", + aboutRoom = "About the Room", + globalMessages = "Global Messages", + contact = "Contact", +} + +function createSubMenusStore() { + const { subscribe, update } = writable([ + SubMenusInterface.settings, + SubMenusInterface.profile, + SubMenusInterface.createMap, + SubMenusInterface.aboutRoom, + SubMenusInterface.globalMessages, + SubMenusInterface.contact, + ]); + + return { + subscribe, + addMenu(menuCommand: string) { + update((menuList: string[]) => { + if (!menuList.find((menu) => menu === menuCommand)) { + menuList.push(menuCommand); + } + return menuList; + }); + }, + removeMenu(menuCommand: string) { + update((menuList: string[]) => { + const index = menuList.findIndex((menu) => menu === menuCommand); + if (index !== -1) { + menuList.splice(index, 1); + } + return menuList; + }); + }, + }; +} + +export const subMenusStore = createSubMenusStore(); + +function checkSubMenuToShow() { + if (!get(userIsAdminStore)) { + subMenusStore.removeMenu(SubMenusInterface.globalMessages); + } + + if (CONTACT_URL === undefined) { + subMenusStore.removeMenu(SubMenusInterface.contact); + } +} + +checkSubMenuToShow(); diff --git a/front/src/Stores/ShowReportScreenStore.ts b/front/src/Stores/ShowReportScreenStore.ts index 665048da..6120263e 100644 --- a/front/src/Stores/ShowReportScreenStore.ts +++ b/front/src/Stores/ShowReportScreenStore.ts @@ -1,3 +1,8 @@ import { writable } from "svelte/store"; -export const showReportScreenStore = writable<{ userId: number; userName: string } | null>(null); +export const userReportEmpty = { + userId: 0, + userName: "Empty", +}; + +export const showReportScreenStore = writable<{ userId: number; userName: string }>(userReportEmpty); diff --git a/front/src/Stores/UserInputStore.ts b/front/src/Stores/UserInputStore.ts index 993d8795..e24b3afe 100644 --- a/front/src/Stores/UserInputStore.ts +++ b/front/src/Stores/UserInputStore.ts @@ -1,11 +1,11 @@ import { derived } from "svelte/store"; -import { consoleGlobalMessageManagerFocusStore } from "./ConsoleGlobalMessageManagerStore"; +import { menuInputFocusStore } from "./MenuStore"; import { chatInputFocusStore } from "./ChatStore"; //derived from the focus on Menu, ConsoleGlobal, Chat and ... export const enableUserInputsStore = derived( - [consoleGlobalMessageManagerFocusStore, chatInputFocusStore], - ([$consoleGlobalMessageManagerFocusStore, $chatInputFocusStore]) => { - return !$consoleGlobalMessageManagerFocusStore && !$chatInputFocusStore; + [menuInputFocusStore, chatInputFocusStore], + ([$menuInputFocusStore, $chatInputFocusStore]) => { + return !$menuInputFocusStore && !$chatInputFocusStore; } ); diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index a7a73ecb..f2a54b9e 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -11,6 +11,7 @@ import { cowebsiteCloseButtonId } from "./CoWebsiteManager"; import { gameOverlayVisibilityStore } from "../Stores/GameOverlayStoreVisibility"; import { layoutManagerActionStore, layoutManagerVisibilityStore } from "../Stores/LayoutManagerStore"; import { get } from "svelte/store"; +import { localUserStore } from "../Connexion/LocalUserStore"; export class MediaManager { startScreenSharingCallBacks: Set = new Set(); @@ -187,7 +188,11 @@ export class MediaManager { } public hasNotification(): boolean { - return Notification.permission === "granted"; + if (Notification.permission === "granted") { + return localUserStore.getNotification() === "granted"; + } else { + return false; + } } public requestNotification() { diff --git a/front/src/index.ts b/front/src/index.ts index 6d2931a7..30f25c6e 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 OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js"; import { EntryScene } from "./Phaser/Login/EntryScene"; import { coWebsiteManager } from "./WebRtc/CoWebsiteManager"; -import { MenuScene } from "./Phaser/Menu/MenuScene"; import { localUserStore } from "./Connexion/LocalUserStore"; import { ErrorScene } from "./Phaser/Reconnecting/ErrorScene"; import { iframeListener } from "./Api/IframeListener"; @@ -97,7 +96,6 @@ const config: GameConfig = { ReconnectingScene, ErrorScene, CustomizeScene, - MenuScene, ], //resolution: window.devicePixelRatio / 2, fps: fps, diff --git a/front/style/inputTextGlobalMessageSvelte-Style.scss b/front/style/TextGlobalMessageSvelte-Style.scss similarity index 56% rename from front/style/inputTextGlobalMessageSvelte-Style.scss rename to front/style/TextGlobalMessageSvelte-Style.scss index 46b54e2c..ce67b699 100644 --- a/front/style/inputTextGlobalMessageSvelte-Style.scss +++ b/front/style/TextGlobalMessageSvelte-Style.scss @@ -1,15 +1,15 @@ -//InputTextGlobalMessage +//TextGlobalMessage section.section-input-send-text { + --height-toolbar: 15%; height: 100%; .ql-toolbar{ - max-height: 100px; - + height: var(--height-toolbar); background: whitesmoke; } div.input-send-text{ - height: calc(100% - 100px); + height: calc(100% - var(--height-toolbar)); overflow: auto; color: whitesmoke; @@ -29,3 +29,13 @@ section.section-input-send-text { } } } + +@media only screen and (max-width: 800px), only screen and (max-height: 800px) { + section.section-input-send-text { + --height-toolbar: 30%; + + .ql-toolbar { + overflow: auto; + } + } +} diff --git a/front/style/index.scss b/front/style/index.scss index e69517fb..7fea8696 100644 --- a/front/style/index.scss +++ b/front/style/index.scss @@ -3,4 +3,4 @@ @import "style"; @import "mobile-style.scss"; @import "fonts.scss"; -@import "inputTextGlobalMessageSvelte-Style.scss"; +@import "TextGlobalMessageSvelte-Style"; diff --git a/front/style/style.scss b/front/style/style.scss index 68e31cbc..cfc342bd 100644 --- a/front/style/style.scss +++ b/front/style/style.scss @@ -1,5 +1,4 @@ *{ - font-family: Lato; cursor: url('./images/cursor_normal.png'), auto; } * a, button, select{ diff --git a/front/webpack.config.ts b/front/webpack.config.ts index 39a00828..9d9a4a7b 100644 --- a/front/webpack.config.ts +++ b/front/webpack.config.ts @@ -190,6 +190,7 @@ module.exports = { PUSHER_URL: undefined, UPLOADER_URL: null, ADMIN_URL: undefined, + CONTACT_URL: null, DEBUG_MODE: null, STUN_SERVER: null, TURN_SERVER: null,