REVIEW : Migration Menu and Report Menu in Svelte (#1363)

* WIP: svelte menu * temp * temp * New menu svelte * Migration of report menu in svelte * Migration of registerCustomMenu for Menu in Svelte Refactor subMenuStore Suppression of old MenuScene and ReportMenu * Suppression of HTML files that aren't use anymore * fix deeployer * First pass on css * First pass on css * Second pass on css and reportMenu * Second pass on css and reportMenu * Second pass on css and reportMenu * Third pass on css and reportMenu * Correction following test * Contact page only if environment variable exist * Update service worker Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com> * Change requested * Change requested Co-authored-by: kharhamel <oognic@gmail.com> Co-authored-by: Gregoire Parant <g.parant@thecodingmachine.com>
2021-08-26 12:01:07 +02:00
parent 29c1ea25c7
commit 7c956d1481
45 changed files with 1131 additions and 1257 deletions
@@ -0,0 +1,147 @@
+<script lang="ts">
+    import { gameManager } from "../../Phaser/Game/GameManager";
+    import {onMount} from "svelte";
+
+    let gameScene = gameManager.getCurrentGameScene();
+
+    let HTMLShareLink: HTMLInputElement;
+    let expandedMapCopyright = false;
+    let expandedTilesetCopyright = false;
+
+    let mapName: string = "";
+    let mapDescription: string = "";
+    let mapCopyright: string = "The map creator did not declare a copyright for the map.";
+    let tilesetCopyright: string[] = [];
+
+    onMount(() => {
+        if (gameScene.mapFile.properties !== undefined) {
+            const propertyName = gameScene.mapFile.properties.find((property) => property.name === 'mapName')
+            if ( propertyName !== undefined && typeof propertyName.value === 'string') {
+                mapName = propertyName.value;
+            }
+            const propertyDescription = gameScene.mapFile.properties.find((property) => property.name === 'mapDescription')
+            if (propertyDescription !== undefined && typeof propertyDescription.value === 'string') {
+                mapDescription = propertyDescription.value;
+            }
+            const propertyCopyright = gameScene.mapFile.properties.find((property) => property.name === 'mapCopyright')
+            if (propertyCopyright !== undefined && typeof propertyCopyright.value === 'string') {
+                mapCopyright = propertyCopyright.value;
+            }
+        }
+
+        for (const tileset of gameScene.mapFile.tilesets) {
+            if (tileset.properties !== undefined) {
+                const propertyTilesetCopyright = tileset.properties.find((property) => property.name === 'tilesetCopyright')
+                if (propertyTilesetCopyright !== undefined && typeof propertyTilesetCopyright.value === 'string') {
+                    tilesetCopyright = [...tilesetCopyright, propertyTilesetCopyright.value]; //Assignment needed to trigger Svelte's reactivity
+                }
+            }
+        }
+    })
+
+    function copyLink() {
+        HTMLShareLink.select();
+        document.execCommand('copy');
+    }
+
+    async function shareLink() {
+        const shareData = {url: location.toString()};
+
+        try {
+            await navigator.share(shareData);
+        } catch (err) {
+            console.error('Error: ' + err);
+        }
+    }
+</script>
+
+<div class="about-room-main">
+    <section class="share-url not-mobile">
+        <h3>Share the link of the room !</h3>
+        <input type="text" readonly bind:this={HTMLShareLink} 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>
+        <button type="button" class="nes-btn is-primary" on:click={shareLink}>Share</button>
+    </section>
+    <h2>Information on the map</h2>
+    <section class="container-overflow">
+        <h3>{mapName}</h3>
+        <p class="string-HTML">{mapDescription}</p>
+        <h3 class="nes-pointer hoverable" on:click={() => expandedMapCopyright = !expandedMapCopyright}>Copyrights of the map</h3>
+        <p class="string-HTML" hidden="{!expandedMapCopyright}">{mapCopyright}</p>
+        <h3 class="nes-pointer hoverable" on:click={() => expandedTilesetCopyright = !expandedTilesetCopyright}>Copyrights of the tilesets</h3>
+        <section hidden="{!expandedTilesetCopyright}">
+            {#each tilesetCopyright as copyright}
+                <p class="string-HTML">{copyright}</p>
+            {:else}
+                <p>The map creator did not declare a copyright for the tilesets. Warning, This doesn't mean that those tilesets have no license.</p>
+            {/each}
+        </section>
+    </section>
+</div>
+
+
+<style lang="scss">
+  .string-HTML{
+    white-space: pre-line;
+  }
+
+  div.about-room-main {
+    height: calc(100% - 56px);
+
+    section.share-url {
+      text-align: center;
+      margin-bottom: 20px;
+
+      input {
+        width: 85%;
+        border-radius: 32px;
+        padding: 3px;
+      }
+      input::selection {
+        background-color: #209cee;
+      }
+    }
+
+    section.is-mobile {
+      display: none;
+    }
+
+    h2, h3 {
+      width: 100%;
+      text-align: center;
+    }
+
+    h3.hoverable:hover {
+      background-color: #3c3e40;
+      border-radius: 32px;
+    }
+
+    section.container-overflow {
+      height: calc(100% - 220px);
+      margin: 0;
+      padding: 0;
+      overflow-y: auto;
+      }
+  }
+
+  @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
+    div.about-room-main {
+      section.share-url.not-mobile {
+        display: none;
+      }
+
+      section.is-mobile {
+        display: block;
+        text-align: center;
+        margin-bottom: 20px;
+      }
+
+      section.container-overflow {
+        height: calc(100% - 120px);
+      }
+    }
+  }
+</style>