From fd64fc43a4c062e529bbde8559bf6791cc5a4ba1 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Thu, 23 Dec 2021 13:09:28 +0100
Subject: [PATCH] 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               |  13 +++
 front/src/Components/Menu/GuestSubMenu.svelte |   4 +-
 front/src/Components/Menu/MenuIcon.svelte     |  21 +++-
 .../Components/Modal/LimitRoomModal.svelte    |  45 +++++++++
 .../Components/Modal/ShareLinkMapModal.svelte |  90 ++++++++++++++++++
 .../WarningContainer/WarningContainer.svelte  |   7 +-
 .../Components/images/logo-invite-pixel.png   | Bin 0 -> 1104 bytes
 .../Components/images/logo-register-pixel.png | Bin 0 -> 977 bytes
 front/src/Connexion/ConnectionManager.ts      |  10 +-
 front/src/Stores/GameStore.ts                 |   2 +-
 front/src/Stores/ModalStore.ts                |   4 +
 front/src/Url/UrlManager.ts                   |   9 ++
 12 files changed, 194 insertions(+), 11 deletions(-)
 create mode 100644 front/src/Components/Modal/LimitRoomModal.svelte
 create mode 100644 front/src/Components/Modal/ShareLinkMapModal.svelte
 create mode 100644 front/src/Components/images/logo-invite-pixel.png
 create mode 100644 front/src/Components/images/logo-register-pixel.png
 create mode 100644 front/src/Stores/ModalStore.ts

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 4886cc4e..cee819e1 100644
--- a/front/src/Components/App.svelte
+++ b/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}
diff --git a/front/src/Components/Menu/GuestSubMenu.svelte b/front/src/Components/Menu/GuestSubMenu.svelte
index 0ae25b75..408dcbce 100644
--- a/front/src/Components/Menu/GuestSubMenu.svelte
+++ b/front/src/Components/Menu/GuestSubMenu.svelte
@@ -21,12 +21,12 @@
 <div class="guest-main">
     <section class="container-overflow">
         <section class="share-url not-mobile">
-            <h3>Share the link of the room !</h3>
+            <h3>Share the link of the room!</h3>
             <input type="text" readonly id="input-share-link" value={location.toString()} />
             <button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
         </section>
         <section class="is-mobile">
-            <h3>Share the link of the room !</h3>
+            <h3>Share the link of the room!</h3>
             <input type="hidden" readonly id="input-share-link" value={location.toString()} />
             <button type="button" class="nes-btn is-primary" on:click={shareLink}>Share</button>
         </section>
diff --git a/front/src/Components/Menu/MenuIcon.svelte b/front/src/Components/Menu/MenuIcon.svelte
index bb5a2df2..90248115 100644
--- a/front/src/Components/Menu/MenuIcon.svelte
+++ b/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">
-    <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 $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">
diff --git a/front/src/Components/Modal/LimitRoomModal.svelte b/front/src/Components/Modal/LimitRoomModal.svelte
new file mode 100644
index 00000000..8fb6c09f
--- /dev/null
+++ b/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>
diff --git a/front/src/Components/Modal/ShareLinkMapModal.svelte b/front/src/Components/Modal/ShareLinkMapModal.svelte
new file mode 100644
index 00000000..5f84e791
--- /dev/null
+++ b/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>
diff --git a/front/src/Components/WarningContainer/WarningContainer.svelte b/front/src/Components/WarningContainer/WarningContainer.svelte
index 29a6740f..1c5f7793 100644
--- a/front/src/Components/WarningContainer/WarningContainer.svelte
+++ b/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"
-                >here</a
+            This world is close to its limit!. You can upgrade its capacity <a href={upgradeLink} target="_blank">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
diff --git a/front/src/Components/images/logo-invite-pixel.png b/front/src/Components/images/logo-invite-pixel.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8ae6fff9c3af9526d13ca8c47a2e412df612a3d
GIT binary patch
literal 1104
zcmV-W1h4yvP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00009a7bBm000XT
z000XT0n*)m`~Uz10!c(cRCt{2TRlt^K@@&xs5nX$D^0LE63;>!NKl)LM+aV~Knt;y
z#KeTe_!A2e?aUcVjFl*zD3zE%a};ukRFGgLNGY~!KIRUVz5Scn_jVU=zvObs-R$n0
zZ{FX0bC<I$i~Nww<@^Vv9F}F}{46|mk|)Q3jDQr_kSJPmKv2wEH*TeSLZ9FHe(%f)
zZSMhXPe2EiZ(mP=9r3|2U&O<Sj`<)2<%G5mfsB9@*pMh%a)4;ecb_2|DH9F!5uH7K
z{JZ)F(U)bS)f&;CzhWjhb3%vMlbjf>5RKmS{{B)yy>=@^&#Of18?l%bPY6s+`cK{t
zc*e77qSDn^Op_;Ia*U`nsDItmgbEd5$P!R25Dk~juLlWTotzf6K$d{9O0?_qo#LS&
zM*uQDl3G-hu8Ell$PsYy0?&PV&hy;I19AlPFcCnEWV+yFbb@)gL?}nV&TqbZZEf@2
z%K<q8xQyQ26K##<2-w_K#z)0>*_K!~2Vip(6>sN7O_U`7#&7+MaQz3~T;c-xDll6m
z+Bb;drElV^56BaMTyXD+UOre@RK&%Ac=P~}aOXbJ@Q@Njyy`kck-7QUv;aVs0CaHu
zeMFZFM8EcwOXG!IVzKvV9O4|4#yd7YGZj_(R%%C|3xQt}>uT)aMuu8tFJN^|O$?LT
z*(2(1jKSXDO)3K(y;RpQKu!|F#DiQM=)a;~L2zn>Mcd92Np+K_(c&QhD+lp{qi4tD
z5GEfNl_x<?b0ZAnR@T(m2q6-k02pW@dAR|TLdC#}&rJL42?t`ypn9QdROgHy8I1tW
z$pa5xsP|V-^}GqPTRv}8I?ek4xIO3O(e+^i_291e<k1{?b(XLN3!({g0-*MC0j|IB
ziD+Wny$T!>@YTN>fP|u+3};3F9^z-HE|!*+3v+msrVwjLKyQda8UO(UAxdKyAaO#F
z4GA*>G#(HNsOg-CAR1v{Rt3&6x_`aV_ag-CK(gE4KmHkV1!{iXu~)!?*h5ldf#N$H
z4T4?%KIjJ?yGvp4mL-SKf)&Skq5+a8pt<r`)n?;^GWh;Y>sT~N$Uk8ZT0<atS-iRO
zoWiF@Yn+aA0l4t`55D_p=n3f{0Ox;*YZK|r32e8;J%DK|dI&T?$OYH|Mun!1Xhr}G
z<<R`?Kx-YOB2SJhy}=9EPiQWV83AxHXneD;mCJDedw%TyQU1J0K*IFfC>f~8e3BSC
zxu(_^<w*O0)LJ-oi5fivt_dlbIVCZ<pUHs?h@$Aqn#bE=elTI5P*Y}usEXruI~nL3
zFb2s}ql5+$;6(OY;r|>N0V%K{QDpxak~S#q$OuS*4T&QA?{Ivkq!SqdDX<|q5Ya#X
W;77$Yjq=?90000<MNUMnLSTY!g!HNa

literal 0
HcmV?d00001

diff --git a/front/src/Components/images/logo-register-pixel.png b/front/src/Components/images/logo-register-pixel.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9a45d3cbe3e5d8dc4f75df15abee420042c5722
GIT binary patch
literal 977
zcmV;?11|iDP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00009a7bBm000XT
z000XT0n*)m`~Uz0gGod|RCt{2n>|bvK@`XTXQ((z6)R1!!UP&@B$3#NM+ed=)Y2-^
z%8wY01qqhsuJzQ8Xo+4WCfaBrBvMJDmFSfo?V5jvmA$>&&zZM7m)&1NF5G_Hy#K!U
z=FOYCisLv4qf)7apI|wT<5a>%cx;f3GeIeU1!KsSo*WPr^UjrPb{q8eRp@blPAI$w
z6kdQK)UIE$U>w=uvzPHO&@mrHR8A;-2$TX?Fos;|$pPXqKQau=&jAZHpgOGH``rfW
zP2l5aaV`8gA$t#4y9X>?Ju;r0JPzEy30$7Zd^p((Km*542OnR(0gRr=azq#s{{*`H
z>WX?DI}?5WgIhqS1APCX!a^8%0ciY%srcu+9x^cw?Ee8?Z;B0#m=$39Jg~H=jM&))
zZa-E}J}uR%x^VNQdj0f8c?E?rgt;8R_+}yti*a4(Nza}b%@bw>;8R{%?tagGdb*tT
z<&A2e&(gq*0F&psr!^eLGKKlNoBqD7t^SEKNluBti~vE|o%!I!2Jj|fBI_Ig>kTy<
zEHCyyXL3CGIQt+w3(VJmzXvLDQHVIx;C@>rIeHI^CKgG8$WMc;`etWTnM*O^z$7<4
z)f-j<$P0kOQkULfA%$NJmI7EXhFp=&0j&?fdOiL1?o1$9UCMgE_BXxjIcsoLD2S{F
zaD6|k(d1w`ExESHWEz|>Q?bQ@>jt*lNb5bY9bJZJQwK=U@fB5Ejnd=(|9?@H(_Bx4
zAS=M$PyI%xw|VM9!@Rk{Z@i29UWf>?0z7=G-@M@UUgP{vHOP1u9^*X%!a-I5_V?<~
z(_cSQ?OyvQHQr@mE++w)!PoAZxmQ}_fzY<xU{r!S#*<&|z(ex0z>Y>oh`ig<GoFdK
z5gdlH0>qex5|PIEJC8#95V9e_UZE)jj3=@lz+!}dNzsk@n8p+Pl3=5mneoJo0DFd3
zY}_XIZiNXOPs|9wWv{<BPeXI#=%NgaCuRh2Ti?2PT|de0PfFv7xg^NJ(+k|q(WH3m
z1-8ZGw!}4zCuU~>uKe89U(%f$ZwQUX+zin)p2$suF`5y9#Hk+)7*Fh63q);y8#12Q
zDZr_a5HM&wv9l${Ep@k-NQ2qXU<ZiPtxjn5!QSr*a}96cDG%;<g$=oQ6oua!E4%>Z
zZ-%4?WILq*7K|ZR%HIxWHxxT51+ZWY`2pY`4+=K%QEgaO00000NkvXXu0mjfp5Mn5

literal 0
HcmV?d00001

diff --git a/front/src/Connexion/ConnectionManager.ts b/front/src/Connexion/ConnectionManager.ts
index aae3f386..b93be739 100644
--- a/front/src/Connexion/ConnectionManager.ts
+++ b/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();
diff --git a/front/src/Stores/GameStore.ts b/front/src/Stores/GameStore.ts
index 1ad975ee..e5298b7c 100644
--- a/front/src/Stores/GameStore.ts
+++ b/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);
diff --git a/front/src/Stores/ModalStore.ts b/front/src/Stores/ModalStore.ts
new file mode 100644
index 00000000..3e99cde9
--- /dev/null
+++ b/front/src/Stores/ModalStore.ts
@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+
+export const showLimitRoomModalStore = writable(false);
+export const showShareLinkMapModalStore = writable(false);
diff --git a/front/src/Url/UrlManager.ts b/front/src/Url/UrlManager.ts
index 8a39354d..4e2b20df 100644
--- a/front/src/Url/UrlManager.ts
+++ b/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();