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

2022-01-27 19:08:57 +01:00
parent 8c1b55f5db 767ac9a68f
commit 6783598244
102 changed files with 3792 additions and 2048 deletions
@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
+    import { HtmlUtils } from "../../WebRtc/HtmlUtils";
+    import { i18nJson } from "../../i18n/locales";
+
+
+    function onClick(callback: () => void) {
+        callback();
+    }
+
+    function i18n(text: string | number | boolean | undefined): string {
+        if (typeof text === "string") {
+            return i18nJson(text);
+        }
+        return "";
+    }
+
+    function sanitize(html : string | number | boolean | undefined): string {
+      return HtmlUtils.sanitize(html);
+    }
+</script>
+
+<div class="layout-manager-list">
+    {#each $layoutManagerActionStore as action}
+        <div class="nes-container is-dark {action.type}" on:click={() => onClick(action.callback)}>
+          <p>{@html sanitize(i18n(action.message))}</p>
+        </div>
+    {/each}
+</div>
+
+<style lang="scss">
+    div.layout-manager-list {
+        pointer-events: auto;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 40px;
+        margin-right: auto;
+        margin-left: auto;
+        padding: 0;
+        width: clamp(200px, 20vw, 20vw);
+        z-index: 155;
+
+        display: flex;
+        flex-direction: column;
+
+        animation: moveMessage 0.5s;
+        animation-iteration-count: infinite;
+        animation-timing-function: ease-in-out;
+
+        div {
+            margin-bottom: 5%;
+        }
+    }
+
+    div.nes-container {
+        padding: 8px 4px;
+        text-align: center;
+
+        &.warning {
+            background-color: #ff9800eb;
+            color: #000;
+        }
+    }
+
+    @keyframes moveMessage {
+        0% {
+            bottom: 40px;
+        }
+        50% {
+            bottom: 30px;
+        }
+        100% {
+            bottom: 40px;
+        }
+    }
+</style>