Finish 2 days room limit

- Create modal to register when limit is past
 - Create modal to share the link
 - Use UrlManager to check if limit room is active

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>

front/src/Components/App.svelte

@@ -23,6 +23,9 @@
     import { chatVisibilityStore } from "../Stores/ChatStore";
     import { helpCameraSettingsVisibleStore } from "../Stores/HelpCameraSettingsStore";
     import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
+    import { showLimitRoomModalStore, showShareLinkMapModalStore } from "../Stores/ModalStore";
+    import LimitRoomModal from "./Modal/LimitRoomModal.svelte";
+    import ShareLinkMapModal from "./Modal/ShareLinkMapModal.svelte";
     import AudioPlaying from "./UI/AudioPlaying.svelte";
     import { soundPlayingStore } from "../Stores/SoundPlayingStore";
     import ErrorDialog from "./UI/ErrorDialog.svelte";
@@ -129,6 +132,16 @@
             <HelpCameraSettingsPopup />
         </div>
     {/if}
+    {#if $showLimitRoomModalStore}
+        <div>
+            <LimitRoomModal />
+        </div>
+    {/if}
+    {#if $showShareLinkMapModalStore}
+        <div>
+            <ShareLinkMapModal />
+        </div>
+    {/if}
     {#if $requestVisitCardsStore}
         <VisitCard visitCardUrl={$requestVisitCardsStore} />
     {/if}

front/src/Components/Menu/MenuIcon.svelte

@@ -1,9 +1,14 @@
 <script lang="typescript">
     import logoTalk from "../images/logo-message-pixel.png";
     import logoWA from "../images/logo-WA-pixel.png";
+    import logoInvite from "../images/logo-invite-pixel.png";
+    import logoRegister from "../images/logo-register-pixel.png";
     import { menuVisiblilityStore } from "../../Stores/MenuStore";
     import { chatVisibilityStore } from "../../Stores/ChatStore";
+    import { limitMapStore } from "../../Stores/GameStore";
     import { get } from "svelte/store";
+    import {ADMIN_URL} from "../../Enum/EnvironmentVariable";
+    import {showShareLinkMapModalStore} from "../../Stores/ModalStore";
 
     function showMenu() {
         menuVisiblilityStore.set(!get(menuVisiblilityStore));
@@ -11,13 +16,25 @@
     function showChat() {
         chatVisibilityStore.set(true);
     }
+
+    function register() {
+        window.open(`${ADMIN_URL}/second-step-register`, '_self');
+    }
+    function showInvite() {
+        showShareLinkMapModalStore.set(true);
+    }
 </script>
 
 <svelte:window />
 
 <main class="menuIcon">
+    {#if $limitMapStore}
+        <img src={logoInvite} alt="open menu" class="nes-pointer" on:click|preventDefault={showInvite} />
+        <img src={logoRegister} alt="open menu" class="nes-pointer" on:click|preventDefault={register} />
+    {:else}
         <img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu} />
         <img src={logoTalk} alt="open menu" class="nes-pointer" on:click|preventDefault={showChat} />
+    {/if}
 </main>
 
 <style lang="scss">

front/src/Components/Modal/LimitRoomModal.svelte

@@ -0,0 +1,45 @@
+<script lang="typescript">
+    import { fly } from "svelte/transition";
+    import {ADMIN_URL} from "../../Enum/EnvironmentVariable";
+
+    function register(){
+        window.open(`${ADMIN_URL}/second-step-register`, '_self');
+    }
+</script>
+
+<div class="limit-map nes-container"
+     transition:fly={{ y: -900, duration: 500 }}>
+    <section>
+        <h2>Limit of your room</h2>
+        <p>Register your account!</p>
+        <p>This map is limited in the time and to continue to use WorkAdventure, you must register your account in our back office.</p>
+    </section>
+    <section>
+        <button class="nes-btn is-primary" on:click|preventDefault={register}>Register</button>
+    </section>
+</div>
+
+<style lang="scss">
+  .limit-map {
+    pointer-events: auto;
+    background: #eceeee;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10vh;
+    max-height: 80vh;
+    max-width: 80vw;
+    overflow: auto;
+    text-align: center;
+
+    h2 {
+      font-family: "Press Start 2P";
+    }
+
+    section {
+      p {
+        margin: 15px;
+        font-family: "Press Start 2P";
+      }
+    }
+  }
+</style>

front/src/Components/Modal/ShareLinkMapModal.svelte

@@ -0,0 +1,90 @@
+<script lang="typescript">
+    import { fly } from "svelte/transition";
+    import {showShareLinkMapModalStore} from "../../Stores/ModalStore";
+
+    interface ExtNavigator extends Navigator{
+        canShare?(data?: ShareData): Promise<boolean>;
+    }
+
+    const myNavigator : ExtNavigator = window.navigator;
+    const haveNavigatorSharingFeature = myNavigator && myNavigator.canShare && myNavigator.share;
+
+    let copied = false;
+
+    function copyLink() {
+        try {
+            const input: HTMLInputElement = document.getElementById("input-share-link") as HTMLInputElement;
+            input.focus();
+            input.select();
+            document.execCommand("copy");
+            copied = true;
+        }catch (e){
+            console.error(e);
+            copied = false;
+        }
+    }
+
+    async function shareLink() {
+        const shareData = { url: location.toString() };
+
+        try {
+            await myNavigator.share(shareData);
+        } catch (err) {
+            console.error("Error: " + err);
+            copyLink();
+        }
+    }
+
+    function close() {
+        showShareLinkMapModalStore.set(false);
+        copied = false;
+    }
+</script>
+
+<div class="share-link-map nes-container"
+     transition:fly={{ y: -900, duration: 500 }}>
+    <section>
+        <h2>Invite your friends or colleagues</h2>
+        <p>Share the link of the room!</p>
+    </section>
+    <section>
+        {#if $haveNavigatorSharingFeature}
+            <input type="hidden" readonly id="input-share-link" value={location.toString()} />
+            <button type="button" class="nes-btn is-primary" on:click={shareLink}>Share</button>
+        {:else}
+            <input type="text" readonly id="input-share-link" value={location.toString()} />
+            <button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
+        {/if}
+        {#if $copied}
+            <p>Copied!</p>
+        {/if}
+    </section>
+    <section>
+        <button class="nes-btn" on:click|preventDefault={close}>Close</button>
+    </section>
+</div>
+
+<style lang="scss">
+  div.share-link-map {
+    pointer-events: auto;
+    background: #eceeee;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10vh;
+    max-height: 80vh;
+    max-width: 80vw;
+    overflow: auto;
+    text-align: center;
+
+    h2 {
+      font-family: "Press Start 2P";
+    }
+
+    section {
+      p {
+        margin: 15px;
+        font-family: "Press Start 2P";
+      }
+    }
+  }
+</style>

front/src/Components/WarningContainer/WarningContainer.svelte

@@ -1,6 +1,6 @@
 <script lang="typescript">
     import { fly } from "svelte/transition";
-    import { userIsAdminStore, limitMap } from "../../Stores/GameStore";
+    import { userIsAdminStore, limitMapStore } from "../../Stores/GameStore";
     import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
 
     const upgradeLink = ADMIN_URL + "/pricing";
@@ -11,11 +11,10 @@
     {#if $userIsAdminStore}
         <h2>Warning!</h2>
         <p>
-            This world is close to its limit!. You can upgrade its capacity <a href={upgradeLink} target="_blank"
+            This world is close to its limit!. You can upgrade its capacity <a href={upgradeLink} target="_blank">here</a
-                >here</a
             >
         </p>
-    {:else if $limitMap}
+    {:else if $limitMapStore}
         <p>
             Your are une test mode. This map will be opened during 2 days. You can register your domain <a
                 href={registerLink}>here</a

front/src/Connexion/ConnectionManager.ts

@@ -11,7 +11,8 @@ import { loginSceneVisibleIframeStore } from "../Stores/LoginSceneStore";
 import { userIsConnected, warningContainerStore } from "../Stores/MenuStore";
 import { analyticsClient } from "../Administration/AnalyticsClient";
 import { axiosWithRetry } from "./AxiosUtils";
-import { limitMap } from "../Stores/GameStore";
+import {limitMapStore} from "../Stores/GameStore";
+import {showLimitRoomModalStore} from "../Stores/ModalStore";
 
 class ConnectionManager {
     private localUser!: LocalUser;
@@ -233,7 +234,12 @@ class ConnectionManager {
         //if limit room active test headband
         if (connexionType === GameConnexionTypes.limit) {
             warningContainerStore.activateWarningContainer();
-            limitMap.set(true);
+            limitMapStore.set(true);
+
+            //check time of map
+            if(!urlManager.isActiveLimitRoom){
+                showLimitRoomModalStore.set(true);
+            }
         }
 
         this.serviceWorker = new _ServiceWorker();

front/src/Stores/GameStore.ts

@@ -6,4 +6,4 @@ export const requestVisitCardsStore = writable<string | null>(null);
 
 export const userIsAdminStore = writable(false);
 
-export const limitMap = writable(false);
+export const limitMapStore = writable(false);

front/src/Stores/ModalStore.ts

@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+
+export const showLimitRoomModalStore = writable(false);
+export const showShareLinkMapModalStore = writable(false);

front/src/Url/UrlManager.ts

@@ -58,6 +58,15 @@ class UrlManager {
     pushStartLayerNameToUrl(startLayerName: string): void {
         window.location.hash = startLayerName;
     }
+
+    get isActiveLimitRoom(): boolean {
+        const match = /\*\/(\w+)\/(?:\w+)/.exec(window.location.pathname.toString());
+        const timestamp = match ? Number.parseInt(match[1]) : null;
+        if(!timestamp){
+            return false;
+        }
+        return ((new Date()).getTime() - 48*60*60*1000) < timestamp;
+    }
 }
 
 export const urlManager = new UrlManager();