Merge branch 'develop' of github.com:thecodingmachine/workadventure

2021-09-09 08:25:41 +02:00 · 2021-09-09 08:25:41 +02:00 · 52489f9c72
commit 52489f9c72
parent 610ed9ae85 3a3e5d5f3b
12 changed files with 206 additions and 52 deletions
--- a/docs/maps/menu.php
+++ b/docs/maps/menu.php
@ -0,0 +1,133 @@
+<?php
+$extraMenu = require __DIR__.'/../../scripting_api_extra_doc/menu.php';
+$extraUtilsMenu = require __DIR__.'/../../scripting_api_extra_doc/menu_functions.php';
+
+return [
+    [
+        'title' => 'Getting started',
+        'url' => '/map-building',
+        'markdown' => 'maps.index'
+    ],
+    [
+        'title' => 'WorkAdventure maps',
+        'url' => '/map-building/wa-maps',
+        'markdown' => 'maps.wa-maps'
+    ],
+    [
+        'title' => 'Entries and exits',
+        'url' => '/map-building/entry-exit.md',
+        'markdown' => 'maps.entry-exit'
+    ],
+    [
+        'title' => 'Opening a website',
+        'url' => '/map-building/opening-a-website.md',
+        'markdown' => 'maps.opening-a-website'
+    ],
+    [
+        'title' => 'Meeting rooms',
+        'url' => '/map-building/meeting-rooms.md',
+        'markdown' => 'maps.meeting-rooms'
+    ],
+    [
+        'title' => 'Special zones',
+        'url' => '/map-building/special-zones.md',
+        'markdown' => 'maps.special-zones'
+    ],
+    [
+        'title' => 'Animations',
+        'url' => '/map-building/animations.md',
+        'markdown' => 'maps.animations'
+    ],
+    [
+        'title' => 'Integrated websites',
+        'url' => '/map-building/website-in-map.md',
+        'markdown' => 'maps.website-in-map'
+    ],
+    [
+        'title' => 'Variables',
+        'url' => '/map-building/variables.md',
+        'markdown' => 'maps.variables'
+    ],
+    [
+        'title' => 'Self-hosting your map',
+        'url' => '/map-building/hosting.md',
+        'markdown' => 'maps.hosting'
+    ],
+    $extraMenu,
+    [
+        'title' => 'Scripting maps',
+        'url' => '/map-building/scripting',
+        'markdown' => 'maps.scripting',
+        'children' => [
+            [
+                'title' => 'Using Typescript',
+                'url' => '/map-building/using-typescript.md',
+                'markdown' => 'maps.using-typescript'
+            ],
+            [
+                'title' => 'API Reference',
+                'url' => '/map-building/api-reference',
+                'markdown' => 'maps.api-reference',
+                'collapse' => true,
+                'children' => [
+                    [
+                        'title' => 'Initialization',
+                        'url' => '/map-building/api-start.md',
+                        'markdown' => 'maps.api-start',
+                    ],
+                    [
+                        'title' => 'Navigation',
+                        'url' => '/map-building/api-nav.md',
+                        'markdown' => 'maps.api-nav',
+                    ],
+                    [
+                        'title' => 'Chat',
+                        'url' => '/map-building/api-chat.md',
+                        'markdown' => 'maps.api-chat',
+                    ],
+                    [
+                        'title' => 'Room',
+                        'url' => '/map-building/api-room.md',
+                        'markdown' => 'maps.api-room',
+                    ],
+                    [
+                        'title' => 'State',
+                        'url' => '/map-building/api-state.md',
+                        'markdown' => 'maps.api-state',
+                    ],
+                    [
+                        'title' => 'Player',
+                        'url' => '/map-building/api-player.md',
+                        'markdown' => 'maps.api-player',
+                    ],
+                    [
+                        'title' => 'UI',
+                        'url' => '/map-building/api-ui.md',
+                        'markdown' => 'maps.api-ui',
+                    ],
+                    [
+                        'title' => 'Sound',
+                        'url' => '/map-building/api-sound.md',
+                        'markdown' => 'maps.api-sound',
+                    ],
+                    [
+                        'title' => 'Controls',
+                        'url' => '/map-building/api-controls.md',
+                        'markdown' => 'maps.api-controls',
+                    ],
+                    [
+                        'title' => 'Deprecated',
+                        'url' => '/map-building/api-deprecated.md',
+                        'markdown' => 'maps.api-deprecated',
+                    ],
+                ]
+            ],
+            $extraUtilsMenu
+        ]
+    ],
+    [
+        'title' => 'Troubleshooting',
+        'url' => '/map-building/troubleshooting',
+        'view' => 'content.map.troubleshooting'
+    ],
+];
--- a/docs/maps/opening-a-website.md
+++ b/docs/maps/opening-a-website.md
@ -10,9 +10,10 @@ on the right side of the screen)

 In order to create a zone that opens websites:

-*   You must create a specific layer.
-*   In layer properties, you MUST add a "`openWebsite`" property (of type "`string`"). The value of the property is the URL of the website to open (the URL must start with "https://")
-*   You may also use "`openWebsiteWidth`" property (of type "`number`" between 0 and 100) to control the width of the iframe.
+* You must create a specific layer.
+* In layer properties, you MUST add a "`openWebsite`" property (of type "`string`"). The value of the property is the URL of the website to open (the URL must start with "https://")
+* You may also use "`openWebsiteWidth`" property (of type "`number`" between 0 and 100) to control the width of the iframe.
+* You may also use "`openTab`" property (of type "`string`") to open in a new tab instead.

 {.alert.alert-warning}
 A website can explicitly forbid another website from loading it in an iFrame using 
--- a/front/dist/.htaccess
+++ b/front/dist/.htaccess
@ -22,3 +22,5 @@ RewriteBase /
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteRule "^[_@]/" "/index.html" [L]
 RewriteRule "^register/" "/index.html" [L]
+RewriteRule "^login" "/index.html" [L]
+RewriteRule "^jwt/" "/index.html" [L]
--- a/front/src/Components/Menu/Menu.svelte
+++ b/front/src/Components/Menu/Menu.svelte
@ -7,7 +7,13 @@
    import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
    import ContactSubMenu from "./ContactSubMenu.svelte";
    import CustomSubMenu from "./CustomSubMenu.svelte"
-    import {customMenuIframe, menuVisiblilityStore, SubMenusInterface, subMenusStore} from "../../Stores/MenuStore";
+    import {
+        checkSubMenuToShow,
+        customMenuIframe,
+        menuVisiblilityStore,
+        SubMenusInterface,
+        subMenusStore
+    } from "../../Stores/MenuStore";
    import {onDestroy, onMount} from "svelte";
    import {get} from "svelte/store";
    import type {Unsubscriber} from "svelte/store";
@ -25,6 +31,8 @@
            }
        })

+        checkSubMenuToShow();
+
        switchMenu(SubMenusInterface.settings);
    })

@ -95,6 +103,7 @@
        </nav>
    </div>
    <div class="menu-submenu-container nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
+        <button type="button" class="nes-btn is-error close" on:click={closeMenu}>&times</button>
        <h2>{activeSubMenu}</h2>
        <svelte:component this={activeComponent} {...props}/>
    </div>
@ -110,9 +119,9 @@

    font-family: "Press Start 2P";
    pointer-events: auto;
-    height: 80vh;
-    width: 75vw;
-    top: 10vh;
+    height: 80%;
+    width: 75%;
+    top: 10%;

    position: relative;
    margin: auto;
@ -139,16 +148,34 @@
    div.menu-submenu-container {
      background-color: #333333;
      color: whitesmoke;
+
+      .nes-btn.is-error.close {
+        position: absolute;
+        top: -20px;
+        right: -20px;
+      }
    }
  }

  @media only screen and (max-width: 800px) {
    div.menu-container-main {
      --size-first-columns-grid: 120px;
-      height: 70vh;
+      height: 70%;
      top: 55px;
-      width: 100vw;
+      width: 100%;
      font-size: 0.5em;
+
+      div.menu-nav-sidebar {
+        overflow-y: auto;
+      }
+
+      div.menu-submenu-container {
+        .nes-btn.is-error.close {
+          position: absolute;
+          top: -35px;
+          right: 0;
+        }
+      }
    }
  }
 </style>
--- a/front/src/Components/Menu/ProfileSubMenu.svelte
+++ b/front/src/Components/Menu/ProfileSubMenu.svelte
@ -45,11 +45,6 @@
        enableCameraSceneVisibilityStore.showEnableCameraScene();
        gameManager.leaveGame(EnableCameraSceneName, new EnableCameraScene());
    }
-
-    //TODO: Uncomment when login will be completely developed
-    /*function clickLogin() {
-        connectionManager.loadOpenIDScreen();
-    }*/
 </script>

 <div class="customize-main">
@ -63,29 +58,27 @@
        <button type="button" class="nes-btn" on:click|preventDefault={logOut}>Log out</button>
    </section>
    {:else}
-    <section>
-        <a type="button" class="nes-btn" href="/login">Sing in</a>
-    </section>
+        <section>
+            <a type="button" class="nes-btn" href="/login">Sign in</a>
+        </section>
    {/if}
    <section>
-        <button type="button" class="nes-btn is-rounded" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
+        <button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
        <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
    </section>
    <section>
        <button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>Setup camera</button>
    </section>
-    <!--    <section>
-        <button type="button" class="nes-btn is-primary" on:click|preventDefault={clickLogin}>Login</button>
-    </section>-->
 </div>

 <style lang="scss">
-    div.customize-main {
-        section {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-bottom: 20px;
+    div.customize-main{
+      section {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        margin-bottom: 20px;

            iframe {
                width: 100%;
--- a/front/src/Components/Menu/SettingsSubMenu.svelte
+++ b/front/src/Components/Menu/SettingsSubMenu.svelte
@ -94,6 +94,7 @@ function changeNotification() {
 <style lang="scss">
  div.settings-main {
    height: calc(100% - 40px);
+    overflow-y: auto;

    section {
      width: 100%;
@ -112,14 +113,14 @@ function changeNotification() {
      }
    }
    section.settings-section-noSaveOption {
-      --nb-noSaveOptions: 2; //number of sub-element in the section
-      display: grid;
-      grid-template-columns: calc(100% / var(--nb-noSaveOptions)) calc(100% / var(--nb-noSaveOptions)); //Same size for every sub-element
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;

      label {
+        flex: 1 1 auto;
        text-align: center;
-        width: 100%;
-        margin: 0;
+        margin: 0 0 15px;
      }
    }
  }
@ -129,12 +130,6 @@ function changeNotification() {
      section {
        padding: 0;
      }
-
-      section.settings-section-noSaveOption {
-        height: 80px;
-        grid-template-columns: none;
-        grid-template-rows: calc(100% / var(--nb-noSaveOptions)) calc(100% / var(--nb-noSaveOptions)); //Same size for every sub-element;
-      }
    }
  }
 </style>
--- a/front/src/Connexion/ConnectionManager.ts
+++ b/front/src/Connexion/ConnectionManager.ts
@ -57,7 +57,7 @@ class ConnectionManager {
            loginSceneVisibleIframeStore.set(false);
            return null;
        }
-        const redirectUrl = `${this._currentRoom.iframeAuthentication}?state=${state}&nonce=${nonce}`;
+        const redirectUrl = `${this._currentRoom.iframeAuthentication}?state=${state}&nonce=${nonce}&playUri=${this._currentRoom.key}`;
        window.location.assign(redirectUrl);
        return redirectUrl;
    }
@ -88,10 +88,9 @@ class ConnectionManager {
        this.connexionType = connexionType;
        this._currentRoom = null;
        if (connexionType === GameConnexionTypes.login) {
-            //TODO clear all cash and redirect on login scene (iframe)
-            localUserStore.setAuthToken(null);
            this._currentRoom = await Room.createRoom(new URL(localUserStore.getLastRoomUrl()));
-            urlManager.pushRoomIdToUrl(this._currentRoom);
+            this.loadOpenIDScreen();
+            return Promise.reject(new Error("You will be redirect on login page"));
        } else if (connexionType === GameConnexionTypes.jwt) {
            const urlParams = new URLSearchParams(window.location.search);
            const code = urlParams.get("code");
@ -103,13 +102,14 @@ class ConnectionManager {
                throw "No Auth code provided";
            }
            localUserStore.setCode(code);
+            this._currentRoom = await Room.createRoom(new URL(localUserStore.getLastRoomUrl()));
            try {
                await this.checkAuthUserConnexion();
            } catch (err) {
                console.error(err);
                this.loadOpenIDScreen();
+                return Promise.reject(new Error("You will be redirect on login page"));
            }
-            this._currentRoom = await Room.createRoom(new URL(localUserStore.getLastRoomUrl()));
            urlManager.pushRoomIdToUrl(this._currentRoom);
        } else if (connexionType === GameConnexionTypes.register) {
            //@deprecated
--- a/front/src/Stores/MenuStore.ts
+++ b/front/src/Stores/MenuStore.ts
@ -71,7 +71,7 @@ function createSubMenusStore() {

 export const subMenusStore = createSubMenusStore();

-function checkSubMenuToShow() {
+export function checkSubMenuToShow() {
    if (!get(userIsAdminStore)) {
        subMenusStore.removeMenu(SubMenusInterface.globalMessages);
    }
@ -83,8 +83,6 @@ function checkSubMenuToShow() {
    subMenusStore.removeMenu(SubMenusInterface.aboutRoom);
 }

-checkSubMenuToShow();
-
 export const customMenuIframe = new Map<string, { url: string; allowApi: boolean }>();

 export function handleMenuRegistrationEvent(
--- a/front/style/TextGlobalMessageSvelte-Style.scss
+++ b/front/style/TextGlobalMessageSvelte-Style.scss
@ -1,10 +1,10 @@
 //TextGlobalMessage
 section.section-input-send-text {
-  --height-toolbar: 15%;
+  --height-toolbar: 20%;
  height: 100%;

  .ql-toolbar{
-    height: var(--height-toolbar);
+    max-height: var(--height-toolbar);
    background: whitesmoke;
  }

--- a/front/style/style.scss
+++ b/front/style/style.scss
@ -1101,7 +1101,7 @@ div.is-silent {
    border-radius: 15px 15px 15px 15px;
    max-height: 20%;
    transition: right 350ms;
-    right: -20vw;
+    right: -300px;
    background-color: black;
    font-size: 20px;
    color: white;
--- a/pusher/src/Controller/AuthenticateController.ts
+++ b/pusher/src/Controller/AuthenticateController.ts
@ -27,13 +27,17 @@ export class AuthenticateController extends BaseController {
                console.warn("/message request was aborted");
            });

-            const { nonce, state } = parse(req.getQuery());
+            const { nonce, state, playUri } = parse(req.getQuery());
            if (!state || !nonce) {
                res.writeStatus("400 Unauthorized").end("missing state and nonce URL parameters");
                return;
            }
            try {
-                const loginUri = await openIDClient.authorizationUrl(state as string, nonce as string);
+                const loginUri = await openIDClient.authorizationUrl(
+                    state as string,
+                    nonce as string,
+                    playUri as string | undefined
+                );
                res.writeStatus("302");
                res.writeHeader("Location", loginUri);
                return res.end();
--- a/pusher/src/Services/OpenIDClient.ts
+++ b/pusher/src/Services/OpenIDClient.ts
@ -20,13 +20,14 @@ class OpenIDClient {
        return this.issuerPromise;
    }

-    public authorizationUrl(state: string, nonce: string) {
+    public authorizationUrl(state: string, nonce: string, playUri?: string) {
        return this.initClient().then((client) => {
            return client.authorizationUrl({
                scope: "openid email",
                prompt: "login",
                state: state,
                nonce: nonce,
+                playUri: playUri,
            });
        });
    }