From 53b184e82bb0f0bb7aabe16ba2631297a5974a96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 15 Mar 2022 15:50:25 +0100 Subject: [PATCH] Adding support for custom logos The admin can now set custom logos for the login scene and for the loading screen. --- front/src/Components/Login/LoginScene.svelte | 4 +++- front/src/Connexion/Room.ts | 12 +++++++++++ front/src/Phaser/Components/Loader.ts | 21 +++++++++++--------- messages/JsonMessages/MapDetailsData.ts | 4 ++++ pusher/src/Controller/MapController.ts | 8 ++++++++ pusher/src/Services/AdminApi.ts | 12 ++++++++--- 6 files changed, 48 insertions(+), 13 deletions(-) diff --git a/front/src/Components/Login/LoginScene.svelte b/front/src/Components/Login/LoginScene.svelte index 6b26e659..63a76342 100644 --- a/front/src/Components/Login/LoginScene.svelte +++ b/front/src/Components/Login/LoginScene.svelte @@ -13,6 +13,8 @@ let name = gameManager.getPlayerName() || ""; let startValidating = false; + let logo = gameManager.currentStartedRoom.loginSceneLogo ?? logoImg; + function submit() { startValidating = true; @@ -25,7 +27,7 @@
- WorkAdventure logo +

{$LL.login.input.name.placeholder()}

diff --git a/front/src/Connexion/Room.ts b/front/src/Connexion/Room.ts index 778f7e35..bf95e48d 100644 --- a/front/src/Connexion/Room.ts +++ b/front/src/Connexion/Room.ts @@ -31,6 +31,8 @@ export class Room { private _group: string | null = null; private _expireOn: Date | undefined; private _canReport: boolean = false; + private _loadingLogo: string | undefined; + private _loginSceneLogo: string | undefined; private constructor(private roomUrl: URL) { this.id = roomUrl.pathname; @@ -126,6 +128,8 @@ export class Room { this._expireOn = new Date(data.expireOn); } this._canReport = data.canReport ?? false; + this._loadingLogo = data.loadingLogo ?? undefined; + this._loginSceneLogo = data.loginSceneLogo ?? undefined; return new MapDetail(data.mapUrl); } else { throw new Error("Data received by the /map endpoint of the Pusher is not in a valid format."); @@ -233,4 +237,12 @@ export class Room { get canReport(): boolean { return this._canReport; } + + get loadingLogo(): string | undefined { + return this._loadingLogo; + } + + get loginSceneLogo(): string | undefined { + return this._loginSceneLogo; + } } diff --git a/front/src/Phaser/Components/Loader.ts b/front/src/Phaser/Components/Loader.ts index 7eb08e6d..e13272e7 100644 --- a/front/src/Phaser/Components/Loader.ts +++ b/front/src/Phaser/Components/Loader.ts @@ -1,9 +1,8 @@ import ImageFrameConfig = Phaser.Types.Loader.FileTypes.ImageFrameConfig; import { DirtyScene } from "../Game/DirtyScene"; +import { gameManager } from "../Game/GameManager"; -const LogoNameIndex: string = "logoLoading"; const TextName: string = "Loading..."; -const LogoResource: string = "static/images/logo.png"; const LogoFrame: ImageFrameConfig = { frameWidth: 310, frameHeight: 60 }; const loadingBarHeight: number = 16; @@ -15,6 +14,7 @@ export class Loader { private progressAmount: number = 0; private logo: Phaser.GameObjects.Image | undefined; private loadingText: Phaser.GameObjects.Text | null = null; + private logoNameIndex!: string; public constructor(private scene: Phaser.Scene) {} @@ -24,15 +24,18 @@ export class Loader { return; } + const logoResource = gameManager.currentStartedRoom.loadingLogo ?? "static/images/logo.png"; + this.logoNameIndex = "logoLoading" + logoResource; + const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3); const promiseLoadLogoTexture = new Promise((res) => { - if (this.scene.load.textureManager.exists(LogoNameIndex)) { + if (this.scene.load.textureManager.exists(this.logoNameIndex)) { return res( (this.logo = this.scene.add.image( this.scene.game.renderer.width / 2, this.scene.game.renderer.height / 2 - 150, - LogoNameIndex + this.logoNameIndex )) ); } else { @@ -43,8 +46,8 @@ export class Loader { TextName ); } - this.scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame); - this.scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => { + this.scene.load.spritesheet(this.logoNameIndex, logoResource, LogoFrame); + this.scene.load.once(`filecomplete-spritesheet-${this.logoNameIndex}`, () => { if (this.loadingText) { this.loadingText.destroy(); } @@ -52,7 +55,7 @@ export class Loader { (this.logo = this.scene.add.image( this.scene.game.renderer.width / 2, this.scene.game.renderer.height / 2 - 150, - LogoNameIndex + this.logoNameIndex )) ); }); @@ -86,8 +89,8 @@ export class Loader { } public removeLoader(): void { - if (this.scene.load.textureManager.exists(LogoNameIndex)) { - this.scene.load.textureManager.remove(LogoNameIndex); + if (this.scene.load.textureManager.exists(this.logoNameIndex)) { + this.scene.load.textureManager.remove(this.logoNameIndex); } } diff --git a/messages/JsonMessages/MapDetailsData.ts b/messages/JsonMessages/MapDetailsData.ts index 09500b80..2dbf88ea 100644 --- a/messages/JsonMessages/MapDetailsData.ts +++ b/messages/JsonMessages/MapDetailsData.ts @@ -22,6 +22,10 @@ export const isMapDetailsData = new tg.IsInterface() expireOn: tg.isString, // Whether the "report" feature is enabled or not on this room canReport: tg.isBoolean, + // The URL of the logo image on the loading screen + loadingLogo: tg.isNullable(tg.isString), + // The URL of the logo image on "LoginScene" + loginSceneLogo: tg.isNullable(tg.isString), }) .get(); diff --git a/pusher/src/Controller/MapController.ts b/pusher/src/Controller/MapController.ts index c6243713..bbab821d 100644 --- a/pusher/src/Controller/MapController.ts +++ b/pusher/src/Controller/MapController.ts @@ -88,6 +88,14 @@ export class MapController extends BaseHttpController { * type: boolean|undefined * description: Whether the "report" feature is enabled or not on this room * example: true + * loadingLogo: + * type: string + * description: The URL of the image to be used on the loading page + * example: https://example.com/logo.png + * loginSceneLogo: + * type: string + * description: The URL of the image to be used on the LoginScene + * example: https://example.com/logo_login.png * */ this.app.get("/map", (req, res) => { diff --git a/pusher/src/Services/AdminApi.ts b/pusher/src/Services/AdminApi.ts index 9ea84b2d..59df89f9 100644 --- a/pusher/src/Services/AdminApi.ts +++ b/pusher/src/Services/AdminApi.ts @@ -1,7 +1,7 @@ import { ADMIN_API_TOKEN, ADMIN_API_URL, ADMIN_URL, OPID_PROFILE_SCREEN_PROVIDER } from "../Enum/EnvironmentVariable"; import Axios, { AxiosResponse } from "axios"; -import { MapDetailsData } from "../Messages/JsonMessages/MapDetailsData"; -import { RoomRedirect } from "../Messages/JsonMessages/RoomRedirect"; +import { isMapDetailsData, MapDetailsData } from "../Messages/JsonMessages/MapDetailsData"; +import { isRoomRedirect, RoomRedirect } from "../Messages/JsonMessages/RoomRedirect"; import { AdminApiData, isAdminApiData } from "../Messages/JsonMessages/AdminApiData"; import * as tg from "generic-type-guard"; import { isNumber } from "generic-type-guard"; @@ -46,10 +46,16 @@ class AdminApi { userId, }; - const res = await Axios.get(ADMIN_API_URL + "/api/map", { + const res = await Axios.get>(ADMIN_API_URL + "/api/map", { headers: { Authorization: `${ADMIN_API_TOKEN}` }, params, }); + if (!isMapDetailsData(res.data) && !isRoomRedirect(res.data)) { + throw new Error( + "Invalid answer received from the admin for the /api/map endpoint. Received: " + + JSON.stringify(res.data) + ); + } return res.data; }