All customized logo (#2168)

* Change dynamic logo in reconnecting scene

* Add cowebsite customized logo

* Fix prettier issues

* Fix prettier issues (2)

* Fix login scene PoweredBy

* Delete all console logs
This commit is contained in:
César Cardinale 2022-05-05 19:23:07 +02:00 committed by GitHub
parent 657bf4d8d2
commit a6e0374257
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 74 additions and 14 deletions

View File

@ -64,7 +64,7 @@
<button type="submit" class="nes-btn is-primary loginSceneFormSubmit">{$LL.login.continue()}</button> <button type="submit" class="nes-btn is-primary loginSceneFormSubmit">{$LL.login.continue()}</button>
</section> </section>
{#if logo !== logoImg && gameManager.currentStartedRoom.showPoweredBy !== false} {#if logo !== logoImg && gameManager.currentStartedRoom.showPoweredBy !== false}
<section class="text-center powered-by"> <section class="text-right powered-by">
<img src={poweredByWorkAdventureImg} alt="Powered by WorkAdventure" /> <img src={poweredByWorkAdventureImg} alt="Powered by WorkAdventure" />
</section> </section>
{/if} {/if}
@ -144,6 +144,7 @@
&.powered-by { &.powered-by {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 10px;
} }
} }
} }

View File

@ -11,6 +11,9 @@
import { showShareLinkMapModalStore } from "../../Stores/ModalStore"; import { showShareLinkMapModalStore } from "../../Stores/ModalStore";
import LL from "../../i18n/i18n-svelte"; import LL from "../../i18n/i18n-svelte";
import { analyticsClient } from "../../Administration/AnalyticsClient"; import { analyticsClient } from "../../Administration/AnalyticsClient";
import { gameManager } from "../../Phaser/Game/GameManager";
let miniLogo = gameManager.currentStartedRoom.miniLogo ?? logoWA;
function showMenu() { function showMenu() {
menuVisiblilityStore.set(!get(menuVisiblilityStore)); menuVisiblilityStore.set(!get(menuVisiblilityStore));
@ -57,7 +60,7 @@
/> />
{:else} {:else}
<img <img
src={logoWA} src={miniLogo}
alt={$LL.menu.icon.open.menu()} alt={$LL.menu.icon.open.menu()}
class="nes-pointer" class="nes-pointer"
draggable="false" draggable="false"

View File

@ -23,6 +23,8 @@ export class Room {
private _group: string | null = null; private _group: string | null = null;
private _expireOn: Date | undefined; private _expireOn: Date | undefined;
private _canReport: boolean = false; private _canReport: boolean = false;
private _miniLogo: string | undefined;
private _loadingCowebsiteLogo: string | undefined;
private _loadingLogo: string | undefined; private _loadingLogo: string | undefined;
private _loginSceneLogo: string | undefined; private _loginSceneLogo: string | undefined;
private _showPoweredBy: boolean | undefined = true; private _showPoweredBy: boolean | undefined = true;
@ -119,6 +121,8 @@ export class Room {
this._expireOn = new Date(data.expireOn); this._expireOn = new Date(data.expireOn);
} }
this._canReport = data.canReport ?? false; this._canReport = data.canReport ?? false;
this._miniLogo = data.miniLogo ?? undefined;
this._loadingCowebsiteLogo = data.loadingCowebsiteLogo ?? undefined;
this._loadingLogo = data.loadingLogo ?? undefined; this._loadingLogo = data.loadingLogo ?? undefined;
this._loginSceneLogo = data.loginSceneLogo ?? undefined; this._loginSceneLogo = data.loginSceneLogo ?? undefined;
this._showPoweredBy = data.showPoweredBy ?? true; this._showPoweredBy = data.showPoweredBy ?? true;
@ -208,10 +212,18 @@ export class Room {
return this._canReport; return this._canReport;
} }
get loadingCowebsiteLogo(): string | undefined {
return this._loadingCowebsiteLogo;
}
get loadingLogo(): string | undefined { get loadingLogo(): string | undefined {
return this._loadingLogo; return this._loadingLogo;
} }
get miniLogo(): string | undefined {
return this._miniLogo;
}
get loginSceneLogo(): string | undefined { get loginSceneLogo(): string | undefined {
return this._loginSceneLogo; return this._loginSceneLogo;
} }

View File

@ -24,7 +24,6 @@ export class EntryScene extends Scene {
// From the very start, let's preload images used in the ReconnectingScene. // From the very start, let's preload images used in the ReconnectingScene.
preload() { preload() {
this.load.image(ReconnectingTextures.icon, "static/images/favicons/favicon-32x32.png");
// Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
this.load.bitmapFont(ReconnectingTextures.mainFont, "resources/fonts/arcade.png", "resources/fonts/arcade.xml"); this.load.bitmapFont(ReconnectingTextures.mainFont, "resources/fonts/arcade.png", "resources/fonts/arcade.xml");
this.load.spritesheet("cat", "resources/characters/pipoya/Cat 01-1.png", { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet("cat", "resources/characters/pipoya/Cat 01-1.png", { frameWidth: 32, frameHeight: 32 });

View File

@ -2,6 +2,7 @@ import { TextField } from "../Components/TextField";
import Image = Phaser.GameObjects.Image; import Image = Phaser.GameObjects.Image;
import LL from "../../i18n/i18n-svelte"; import LL from "../../i18n/i18n-svelte";
import { get } from "svelte/store"; import { get } from "svelte/store";
import { gameManager } from "../Game/GameManager";
export const ReconnectingSceneName = "ReconnectingScene"; export const ReconnectingSceneName = "ReconnectingScene";
export enum ReconnectingTextures { export enum ReconnectingTextures {
@ -20,7 +21,10 @@ export class ReconnectingScene extends Phaser.Scene {
} }
preload() { preload() {
this.load.image(ReconnectingTextures.icon, "static/images/favicons/favicon-32x32.png"); this.load.image(
ReconnectingTextures.icon,
gameManager.currentStartedRoom.miniLogo ?? "static/images/favicons/favicon-32x32.png"
);
// Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
this.load.bitmapFont(ReconnectingTextures.mainFont, "resources/fonts/arcade.png", "resources/fonts/arcade.xml"); this.load.bitmapFont(ReconnectingTextures.mainFont, "resources/fonts/arcade.png", "resources/fonts/arcade.xml");
this.load.spritesheet("cat", "resources/characters/pipoya/Cat 01-1.png", { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet("cat", "resources/characters/pipoya/Cat 01-1.png", { frameWidth: 32, frameHeight: 32 });
@ -30,9 +34,10 @@ export class ReconnectingScene extends Phaser.Scene {
this.logo = new Image( this.logo = new Image(
this, this,
this.game.renderer.width - 30, this.game.renderer.width - 30,
this.game.renderer.height - 20, this.game.renderer.height - 30,
ReconnectingTextures.icon ReconnectingTextures.icon
); );
this.logo.setDisplaySize(32, 32);
this.add.existing(this.logo); this.add.existing(this.logo);
this.reconnectingField = new TextField( this.reconnectingField = new TextField(

View File

@ -5,6 +5,7 @@ import { CONTACT_URL, IDENTITY_URL, PROFILE_URL } from "../Enum/EnvironmentVaria
import type { Translation } from "../i18n/i18n-types"; import type { Translation } from "../i18n/i18n-types";
import axios from "axios"; import axios from "axios";
import { localUserStore } from "../Connexion/LocalUserStore"; import { localUserStore } from "../Connexion/LocalUserStore";
import { connectionManager } from "../Connexion/ConnectionManager";
export const menuIconVisiblilityStore = writable(false); export const menuIconVisiblilityStore = writable(false);
export const menuVisiblilityStore = writable(false); export const menuVisiblilityStore = writable(false);
@ -183,9 +184,9 @@ export function handleMenuUnregisterEvent(menuName: string) {
} }
export function getProfileUrl() { export function getProfileUrl() {
return PROFILE_URL + `?token=${localUserStore.getAuthToken()}`; return PROFILE_URL + `?token=${localUserStore.getAuthToken()}&playUri=${connectionManager.currentRoom?.key}`;
} }
export function getMeUrl() { export function getMeUrl() {
return IDENTITY_URL + `?token=${localUserStore.getAuthToken()}`; return IDENTITY_URL + `?token=${localUserStore.getAuthToken()}&playUri=${connectionManager.currentRoom?.key}`;
} }

View File

@ -9,6 +9,7 @@ import { LayoutMode } from "./LayoutManager";
import type { CoWebsite } from "./CoWebsite/CoWesbite"; import type { CoWebsite } from "./CoWebsite/CoWesbite";
import type CancelablePromise from "cancelable-promise"; import type CancelablePromise from "cancelable-promise";
import { analyticsClient } from "../Administration/AnalyticsClient"; import { analyticsClient } from "../Administration/AnalyticsClient";
import { gameManager } from "../Phaser/Game/GameManager";
export enum iframeStates { export enum iframeStates {
closed = 1, closed = 1,
@ -357,6 +358,16 @@ class CoWebsiteManager {
private activateMainLoaderAnimation() { private activateMainLoaderAnimation() {
this.desactivateMainLoaderAnimation(); this.desactivateMainLoaderAnimation();
const customLogo = gameManager.currentStartedRoom.loadingCowebsiteLogo;
if (customLogo) {
const logo = document.createElement("img");
logo.id = "custom-logo";
logo.src = customLogo;
this.cowebsiteLoaderDom.parentNode?.replaceChild(logo, this.cowebsiteLoaderDom);
this.cowebsiteLoaderDom.style.display = "block";
return;
}
this.cowebsiteLoaderDom.style.display = "block"; this.cowebsiteLoaderDom.style.display = "block";
this.loaderAnimationInterval.interval = setInterval(() => { this.loaderAnimationInterval.interval = setInterval(() => {

View File

@ -5,6 +5,10 @@
background-color: rgba(10, 9, 9, 0.8); background-color: rgba(10, 9, 9, 0.8);
display: none; display: none;
#cowebsite-slot-main #custom-logo{
max-width: 30%;
}
main { main {
iframe { iframe {
width: 100%; width: 100%;

View File

@ -39,6 +39,11 @@ export const isMapDetailsData = z.object({
description: 'Whether the "report" feature is enabled or not on this room', description: 'Whether the "report" feature is enabled or not on this room',
example: true, example: true,
}), }),
loadingCowebsiteLogo: extendApi(z.optional(z.nullable(z.string())), {
description: "The URL of the image to be used on the cowebsite loading page",
example: "https://example.com/logo.gif",
}),
miniLogo: z.optional(z.nullable(z.string())),
// The URL of the logo image on the loading screen // The URL of the logo image on the loading screen
loadingLogo: extendApi(z.optional(z.nullable(z.string())), { loadingLogo: extendApi(z.optional(z.nullable(z.string())), {
description: "The URL of the image to be used on the loading page", description: "The URL of the image to be used on the loading page",

View File

@ -418,7 +418,7 @@ export class AuthenticateController extends BaseHttpController {
profileCallback() { profileCallback() {
// eslint-disable-next-line @typescript-eslint/no-misused-promises // eslint-disable-next-line @typescript-eslint/no-misused-promises
this.app.get("/profile-callback", async (req, res) => { this.app.get("/profile-callback", async (req, res) => {
const { token } = parse(req.path_query); const { token, playUri } = parse(req.path_query);
try { try {
//verify connected by token //verify connected by token
if (token != undefined) { if (token != undefined) {
@ -431,7 +431,10 @@ export class AuthenticateController extends BaseHttpController {
//get login profile //get login profile
res.status(302); res.status(302);
res.setHeader("Location", adminService.getProfileUrl(authTokenData.accessToken)); res.setHeader(
"Location",
adminService.getProfileUrl(authTokenData.accessToken, playUri as string)
);
res.send(""); res.send("");
return; return;
} catch (error) { } catch (error) {
@ -497,7 +500,7 @@ export class AuthenticateController extends BaseHttpController {
* @param email * @param email
* @param playUri * @param playUri
* @param IPAddress * @param IPAddress
* @return * @return
|object |object
* @private * @private
*/ */

View File

@ -457,11 +457,15 @@ class AdminApi implements AdminInterface {
}); });
} }
getProfileUrl(accessToken: string): string { getProfileUrl(accessToken: string, playUri: string): string {
if (!OPID_PROFILE_SCREEN_PROVIDER) { if (!OPID_PROFILE_SCREEN_PROVIDER) {
throw new Error("No admin backoffice set!"); throw new Error("No admin backoffice set!");
} }
return `${OPID_PROFILE_SCREEN_PROVIDER}?accessToken=${accessToken}`; return `${OPID_PROFILE_SCREEN_PROVIDER}?accessToken=${accessToken}&playUri=${playUri}`;
}
async logoutOauth(token: string): Promise<void> {
await Axios.get(ADMIN_API_URL + `/oauth/logout?token=${token}`);
} }
} }

View File

@ -71,7 +71,13 @@ export interface AdminInterface {
/** /**
* @param accessToken * @param accessToken
* @param playUri
* @return string * @return string
*/ */
getProfileUrl(accessToken: string): string; getProfileUrl(accessToken: string, playUri: string): string;
/**
* @param token
*/
logoutOauth(token: string): Promise<void>;
} }

View File

@ -47,9 +47,11 @@ class LocalAdmin implements AdminInterface {
contactPage: null, contactPage: null,
group: null, group: null,
iframeAuthentication: null, iframeAuthentication: null,
miniLogo: null,
loadingLogo: null, loadingLogo: null,
loginSceneLogo: null, loginSceneLogo: null,
showPoweredBy: true, showPoweredBy: true,
loadingCowebsiteLogo: null,
}); });
} }
@ -84,10 +86,14 @@ class LocalAdmin implements AdminInterface {
return Promise.reject(new Error("No admin backoffice set!")); return Promise.reject(new Error("No admin backoffice set!"));
} }
getProfileUrl(accessToken: string): string { getProfileUrl(accessToken: string, playUri: string): string {
new Error("No admin backoffice set!"); new Error("No admin backoffice set!");
return ""; return "";
} }
async logoutOauth(token: string): Promise<void> {
return Promise.reject(new Error("No admin backoffice set!"));
}
} }
export const localAdmin = new LocalAdmin(); export const localAdmin = new LocalAdmin();