Merge pull request #1322 from thecodingmachine/improveCapacityWarning

FEATURE: improved the room capacity warning visuals

.github/workflows/continuous_integration.yml

@@ -50,6 +50,7 @@ jobs:
         run: yarn run build
         env:
           PUSHER_URL: "//localhost:8080"
+          ADMIN_URL: "//localhost:80"
         working-directory: "front"
 
       - name: "Svelte check"

.github/workflows/push-to-npm.yml

@@ -47,6 +47,7 @@ jobs:
         run: yarn run build-typings
         env:
           PUSHER_URL: "//localhost:8080"
+          ADMIN_URL: "//localhost:80"
         working-directory: "front"
 
       # We build the front to generate the typings of iframe_api, then we copy those typings in a separate package.

back/src/Services/SocketManager.ts

@@ -790,7 +790,7 @@ export class SocketManager {
         if (!room) {
             //todo: this should cause the http call to return a 500
             console.error(
-                "In sendAdminRoomMessage, could not find room with id '" +
+                "In dispatchWorldFullWarning, could not find room with id '" +
                     roomId +
                     "'. Maybe the room was closed a few milliseconds ago and there was a race condition?"
             );

front/dist/resources/html/warningContainer.html

@@ -1,18 +0,0 @@
-<style>
-    #warningMain {
-        border-radius: 5px;
-        height: 100px;
-        width: 300px;
-        background-color: red;
-        text-align: center;
-    }
-
-    #warningMain h2 {
-        padding: 5px;
-    }
-</style>
-
-<main id="warningMain">
-    <h2>Warning!</h2>
-    <p>This world is close to its limit!</p>
-</main>

front/src/Components/App.svelte

@@ -27,6 +27,8 @@
     import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility";
     import {consoleGlobalMessageManagerVisibleStore} from "../Stores/ConsoleGlobalMessageManagerStore";
     import ConsoleGlobalMessageManager from "./ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte";
+    import {warningContainerStore} from "../Stores/MenuStore";
+    import WarningContainer from "./WarningContainer/WarningContainer.svelte";
 
     export let game: Game;
 
@@ -91,4 +93,7 @@
     {#if $chatVisibilityStore}
         <Chat></Chat>
     {/if}
+    {#if $warningContainerStore}
+        <WarningContainer></WarningContainer>
+    {/if}
 </div>

front/src/Components/WarningContainer/WarningContainer.svelte

@@ -0,0 +1,37 @@
+<script lang="typescript">
+    import { fly } from 'svelte/transition';
+    import {userIsAdminStore} from "../../Stores/GameStore";
+    import {ADMIN_URL} from "../../Enum/EnvironmentVariable";
+    
+    const upgradeLink = ADMIN_URL+'/pricing';
+    
+</script>
+
+<main class="warningMain" transition:fly="{{ y: -200, duration: 500 }}">
+    <h2>Warning!</h2>
+    {#if $userIsAdminStore}
+        <p>This world is close to its limit!. You can upgrade its capacity <a href="{upgradeLink}" target="_blank">here</a></p>
+    {:else}
+        <p>This world is close to its limit!</p>
+    {/if}    
+        
+</main>
+
+<style lang="scss">
+  main.warningMain {
+    pointer-events: auto;
+    width: 100vw;
+    background-color: red;
+    text-align: center;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+    font-family: Lato;
+    min-width: 300px;
+    opacity: 0.9;
+    z-index: 2;
+        h2 {
+          padding: 5px;
+        }
+    }
+</style>

front/src/Connexion/RoomConnection.ts

@@ -32,7 +32,8 @@ import {
     EmotePromptMessage,
     SendUserMessage,
     BanUserMessage,
-    VariableMessage, ErrorMessage,
+    VariableMessage,
+    ErrorMessage,
 } from "../Messages/generated/messages_pb";
 
 import type { UserSimplePeerInterface } from "../WebRtc/SimplePeer";
@@ -54,9 +55,9 @@ import {
 import type { BodyResourceDescriptionInterface } from "../Phaser/Entity/PlayerTextures";
 import { adminMessagesService } from "./AdminMessagesService";
 import { worldFullMessageStream } from "./WorldFullMessageStream";
-import { worldFullWarningStream } from "./WorldFullWarningStream";
 import { connectionManager } from "./ConnectionManager";
 import { emoteEventStream } from "./EmoteEventStream";
+import { warningContainerStore } from "../Stores/MenuStore";
 
 const manualPingDelay = 20000;
 
@@ -167,7 +168,7 @@ export class RoomConnection implements RoomConnection {
                         emoteEventStream.fire(emoteMessage.getActoruserid(), emoteMessage.getEmote());
                     } else if (subMessage.hasErrormessage()) {
                         const errorMessage = subMessage.getErrormessage() as ErrorMessage;
-                        console.error('An error occurred server side: '+errorMessage.getMessage());
+                        console.error("An error occurred server side: " + errorMessage.getMessage());
                     } else if (subMessage.hasVariablemessage()) {
                         event = EventMessage.SET_VARIABLE;
                         payload = subMessage.getVariablemessage();
@@ -192,7 +193,14 @@ export class RoomConnection implements RoomConnection {
                     try {
                         variables.set(variable.getName(), JSON.parse(variable.getValue()));
                     } catch (e) {
-                        console.error('Unable to unserialize value received from server for variable "'+variable.getName()+'". Value received: "'+variable.getValue()+'". Error: ', e);
+                        console.error(
+                            'Unable to unserialize value received from server for variable "' +
+                                variable.getName() +
+                                '". Value received: "' +
+                                variable.getValue() +
+                                '". Error: ',
+                            e
+                        );
                     }
                 }
 
@@ -236,7 +244,7 @@ export class RoomConnection implements RoomConnection {
             } else if (message.hasBanusermessage()) {
                 adminMessagesService.onSendusermessage(message.getBanusermessage() as BanUserMessage);
             } else if (message.hasWorldfullwarningmessage()) {
-                worldFullWarningStream.onMessage();
+                warningContainerStore.activateWarningContainer();
             } else if (message.hasRefreshroommessage()) {
                 //todo: implement a way to notify the user the room was refreshed.
             } else {
@@ -659,7 +667,14 @@ export class RoomConnection implements RoomConnection {
                 try {
                     value = JSON.parse(serializedValue);
                 } catch (e) {
-                    console.error('Unable to unserialize value received from server for variable "'+name+'". Value received: "'+serializedValue+'". Error: ', e);
+                    console.error(
+                        'Unable to unserialize value received from server for variable "' +
+                            name +
+                            '". Value received: "' +
+                            serializedValue +
+                            '". Error: ',
+                        e
+                    );
                 }
             }
             callback(name, value);

front/src/Connexion/WorldFullWarningStream.ts

@@ -1,14 +0,0 @@
-import {Subject} from "rxjs";
-
-class WorldFullWarningStream {
-
-    private _stream:Subject<void> = new Subject();
-    public stream = this._stream.asObservable();
-
-
-    onMessage() {
-        this._stream.next();
-    }
-}
-
-export const worldFullWarningStream = new WorldFullWarningStream();

front/src/Enum/EnvironmentVariable.ts

@@ -1,22 +1,24 @@
 const DEBUG_MODE: boolean = process.env.DEBUG_MODE == "true";
-const START_ROOM_URL : string = process.env.START_ROOM_URL || '/_/global/maps.workadventure.localhost/Floor0/floor0.json';
+const START_ROOM_URL: string =
-const PUSHER_URL = process.env.PUSHER_URL || '//pusher.workadventure.localhost';
+    process.env.START_ROOM_URL || "/_/global/maps.workadventure.localhost/Floor0/floor0.json";
-const UPLOADER_URL = process.env.UPLOADER_URL || '//uploader.workadventure.localhost';
+const PUSHER_URL = process.env.PUSHER_URL || "//pusher.workadventure.localhost";
+export const ADMIN_URL = process.env.ADMIN_URL || "//workadventu.re";
+const UPLOADER_URL = process.env.UPLOADER_URL || "//uploader.workadventure.localhost";
 const STUN_SERVER: string = process.env.STUN_SERVER || "stun:stun.l.google.com:19302";
 const TURN_SERVER: string = process.env.TURN_SERVER || "";
 const SKIP_RENDER_OPTIMIZATIONS: boolean = process.env.SKIP_RENDER_OPTIMIZATIONS == "true";
 const DISABLE_NOTIFICATIONS: boolean = process.env.DISABLE_NOTIFICATIONS == "true";
-const TURN_USER: string = process.env.TURN_USER || '';
+const TURN_USER: string = process.env.TURN_USER || "";
-const TURN_PASSWORD: string = process.env.TURN_PASSWORD || '';
+const TURN_PASSWORD: string = process.env.TURN_PASSWORD || "";
-const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
+const JITSI_URL: string | undefined = process.env.JITSI_URL === "" ? undefined : process.env.JITSI_URL;
-const JITSI_PRIVATE_MODE : boolean = process.env.JITSI_PRIVATE_MODE == "true";
+const JITSI_PRIVATE_MODE: boolean = process.env.JITSI_PRIVATE_MODE == "true";
 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_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || "") || 8;
-export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || '4');
+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 DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == "true";
 
-export const isMobile = ():boolean => ( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) );
+export const isMobile = (): boolean => window.innerWidth <= 800 || window.innerHeight <= 600;
 
 export {
     DEBUG_MODE,
@@ -32,5 +34,5 @@ export {
     TURN_USER,
     TURN_PASSWORD,
     JITSI_URL,
-    JITSI_PRIVATE_MODE
+    JITSI_PRIVATE_MODE,
-}
+};

front/src/Phaser/Components/WarningContainer.ts

@@ -1,14 +0,0 @@
-
-export const warningContainerKey = 'warningContainer';
-export const warningContainerHtml = 'resources/html/warningContainer.html';
-
-export class WarningContainer extends Phaser.GameObjects.DOMElement {
-    
-    constructor(scene: Phaser.Scene) {
-        super(scene, 100, 0);
-        this.setOrigin(0, 0);
-        this.createFromCache(warningContainerKey);        
-        this.scene.add.existing(this);
-    }
-    
-}

front/src/Phaser/Game/GameScene.ts

@@ -88,6 +88,7 @@ import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStor
 import { SharedVariablesManager } from "./SharedVariablesManager";
 import { playersStore } from "../../Stores/PlayersStore";
 import { chatVisibilityStore } from "../../Stores/ChatStore";
+import { userIsAdminStore } from "../../Stores/GameStore";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
@@ -604,6 +605,8 @@ export class GameScene extends DirtyScene {
 
                 playersStore.connectToRoomConnection(this.connection);
 
+                userIsAdminStore.set(this.connection.hasTag("admin"));
+
                 this.connection.onUserJoins((message: MessageUserJoined) => {
                     const userMessage: AddPlayerInterface = {
                         userId: message.userId,

front/src/Phaser/Menu/MenuScene.ts

@@ -6,8 +6,6 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
 import { gameReportKey, gameReportRessource, ReportMenu } from "./ReportMenu";
 import { connectionManager } from "../../Connexion/ConnectionManager";
 import { GameConnexionTypes } from "../../Url/UrlManager";
-import { WarningContainer, warningContainerHtml, warningContainerKey } from "../Components/WarningContainer";
-import { worldFullWarningStream } from "../../Connexion/WorldFullWarningStream";
 import { menuIconVisible } from "../../Stores/MenuStore";
 import { videoConstraintStore } from "../../Stores/MediaStore";
 import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
@@ -21,6 +19,7 @@ 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";
@@ -45,8 +44,6 @@ export class MenuScene extends Phaser.Scene {
     private gameQualityValue: number;
     private videoQualityValue: number;
     private menuButton!: Phaser.GameObjects.DOMElement;
-    private warningContainer: WarningContainer | null = null;
-    private warningContainerTimeout: NodeJS.Timeout | null = null;
     private subscriptions = new Subscription();
     constructor() {
         super({ key: MenuSceneName });
@@ -91,7 +88,6 @@ export class MenuScene extends Phaser.Scene {
         this.load.html(gameSettingsMenuKey, "resources/html/gameQualityMenu.html");
         this.load.html(gameShare, "resources/html/gameShare.html");
         this.load.html(gameReportKey, gameReportRessource);
-        this.load.html(warningContainerKey, warningContainerHtml);
     }
 
     create() {
@@ -147,7 +143,6 @@ export class MenuScene extends Phaser.Scene {
         this.menuElement.addListener("click");
         this.menuElement.on("click", this.onMenuClick.bind(this));
 
-        worldFullWarningStream.stream.subscribe(() => this.showWorldCapacityWarning());
         chatVisibilityStore.subscribe((v) => {
             this.menuButton.setVisible(!v);
         });
@@ -194,20 +189,6 @@ export class MenuScene extends Phaser.Scene {
         });
     }
 
-    private showWorldCapacityWarning() {
-        if (!this.warningContainer) {
-            this.warningContainer = new WarningContainer(this);
-        }
-        if (this.warningContainerTimeout) {
-            clearTimeout(this.warningContainerTimeout);
-        }
-        this.warningContainerTimeout = setTimeout(() => {
-            this.warningContainer?.destroy();
-            this.warningContainer = null;
-            this.warningContainerTimeout = null;
-        }, 120000);
-    }
-
     private closeSideMenu(): void {
         if (!this.sideMenuOpened) return;
         this.sideMenuOpened = false;
@@ -403,7 +384,7 @@ export class MenuScene extends Phaser.Scene {
     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 = "https://workadventu.re/getting-started";
+        const sparkHost = ADMIN_URL + "/getting-started";
         window.open(sparkHost, "_blank");
     }
 

front/src/Stores/GameStore.ts

@@ -2,4 +2,6 @@ import { writable } from "svelte/store";
 
 export const userMovingStore = writable(false);
 
-export const requestVisitCardsStore = writable<string|null>(null);
+export const requestVisitCardsStore = writable<string | null>(null);
+
+export const userIsAdminStore = writable(false);

front/src/Stores/MenuStore.ts

@@ -1,3 +1,23 @@
-import { derived, writable, Writable } from "svelte/store";
+import { writable } from "svelte/store";
+import Timeout = NodeJS.Timeout;
 
 export const menuIconVisible = writable(false);
+
+let warningContainerTimeout: Timeout | null = null;
+function createWarningContainerStore() {
+    const { subscribe, set } = writable<boolean>(false);
+
+    return {
+        subscribe,
+        activateWarningContainer() {
+            set(true);
+            if (warningContainerTimeout) clearTimeout(warningContainerTimeout);
+            warningContainerTimeout = setTimeout(() => {
+                set(false);
+                warningContainerTimeout = null;
+            }, 120000);
+        },
+    };
+}
+
+export const warningContainerStore = createWarningContainerStore();

front/webpack.config.ts

@@ -189,7 +189,7 @@ module.exports = {
             DISABLE_NOTIFICATIONS: false,
             PUSHER_URL: undefined,
             UPLOADER_URL: null,
-            ADMIN_URL: null,
+            ADMIN_URL: undefined,
             DEBUG_MODE: null,
             STUN_SERVER: null,
             TURN_SERVER: null,