latest dev + i18n

front/src/Components/LayoutManager/LayoutManager.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
     import { HtmlUtils } from "../../WebRtc/HtmlUtils";
+    import { i18nJson } from "../../i18n/locales";
+
 
     function onClick(callback: () => void) {
         callback();
@@ -8,20 +10,7 @@
 
     function i18n(text: string | number | boolean | undefined): string {
         if (typeof text === "string") {
-            if (text.trim().startsWith("{")) {
-                try {
-                    let textObject = JSON.parse(text);
-                    if (textObject[$locale]) {
-                        return textObject[$locale];
-                    } else if (Object.keys(textObject).length > 0) {
-                        // fallback to first value
-                        return textObject[Object.keys(textObject)[0]];
-                    }
-                } catch (err) {
-                    //
-                }
-            }
-            return text;
+            return i18nJson(text);
         }
         return "";
     }

front/src/Components/MyCamera.svelte

@@ -34,5 +34,5 @@
             <SoundMeterWidget {stream} />
         {/if}
     </div>
-    <div class="is-silent" class:hide={isSilent}>{$LL.camera.my.silentZone()}</div>
+    <div class="nes-container is-dark is-silent" class:hide={isSilent}>{$LL.camera.my.silentZone()}</div>
 </div>

front/src/Connexion/ConnectionManager.ts

@@ -17,6 +17,9 @@ import { isRegisterData } from "../Messages/JsonMessages/RegisterData";
 import { isAdminApiData } from "../Messages/JsonMessages/AdminApiData";
 import { limitMapStore } from "../Stores/GameStore";
 import { showLimitRoomModalStore } from "../Stores/ModalStore";
+import { locales } from "../i18n/i18n-util";
+import type { Locales } from "../i18n/i18n-types";
+import { setCurrentLocale } from "../i18n/locales";
 
 class ConnectionManager {
     private localUser!: LocalUser;
@@ -343,9 +346,12 @@ class ConnectionManager {
                 throw new Error("No Auth code provided");
             }
         }
-        const { authToken, userUuid, textures, email, username } = await Axios.get(`${PUSHER_URL}/login-callback`, {
-            params: { code, nonce, token, playUri: this.currentRoom?.key },
-        }).then((res) => {
+        const { authToken, userUuid, textures, email, username, locale } = await Axios.get(
+            `${PUSHER_URL}/login-callback`,
+            {
+                params: { code, nonce, token, playUri: this.currentRoom?.key },
+            }
+        ).then((res) => {
             return res.data;
         });
         localUserStore.setAuthToken(authToken);
@@ -355,6 +361,25 @@ class ConnectionManager {
         if (username) {
             gameManager.setPlayerName(username);
         }
+
+        if (locale) {
+            try {
+                if (locales.indexOf(locale) == -1) {
+                    locales.forEach((l) => {
+                        if (l.startsWith(locale.split("-")[0])) {
+                            setCurrentLocale(l);
+                            return;
+                        }
+                    });
+                } else {
+                    setCurrentLocale(locale as Locales);
+                }
+            } catch (err) {
+                console.warn("Could not set locale", err);
+            }
+        } else {
+            console.log("no locale", locale);
+        }
         //user connected, set connected store for menu at true
         userIsConnected.set(true);
     }

front/src/Phaser/Game/GameScene.ts

@@ -92,6 +92,7 @@ import { followUsersColorStore } from "../../Stores/FollowStore";
 import Camera = Phaser.Cameras.Scene2D.Camera;
 import { GameSceneUserInputHandler } from "../UserInput/GameSceneUserInputHandler";
 import { locale } from "../../i18n/i18n-svelte";
+import { i18nJson } from "../../i18n/locales";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
@@ -1066,7 +1067,7 @@ export class GameScene extends DirtyScene {
                     );
                     return;
                 }
-                const escapedMessage = HtmlUtils.sanitize(openPopupEvent.message);
+                const escapedMessage = HtmlUtils.sanitize(i18nJson(openPopupEvent.message));
                 let html = `<div id="container" hidden><div class="nes-container with-title is-centered">`;
                 html += escapedMessage;
                 if (openPopupEvent.input) {
@@ -1080,7 +1081,9 @@ export class GameScene extends DirtyScene {
                 for (const button of openPopupEvent.buttons) {
                     html += `<button type="button" class="nes-btn is-${HtmlUtils.escapeHtml(
                         button.className ?? ""
-                    )}" id="popup-${openPopupEvent.popupId}-${id}">${HtmlUtils.escapeHtml(button.label)}</button>`;
+                    )}" id="popup-${openPopupEvent.popupId}-${id}">${HtmlUtils.escapeHtml(
+                        i18nJson(button.label)
+                    )}</button>`;
                     id++;
                 }
                 html += "</div>";

front/src/i18n/de-DE/index.ts

@@ -28,7 +28,7 @@ const de_DE: Translation = {
     menu,
     report,
     warning,
-    emiji,
+    emoji,
 };
 
 export default de_DE;

front/src/i18n/de-DE/menu.ts

@@ -114,6 +114,7 @@ const menu: NonNullable<Translation["menu"]> = {
     },
     sub: {
         profile: "Profil",
+        worlds: "Welt",
         settings: "Einstellungen",
         invite: "Einladung",
         credit: "Über die Karte",

front/src/i18n/en-US/menu.ts

@@ -113,6 +113,7 @@ const menu: BaseTranslation = {
     },
     sub: {
         profile: "Profile",
+        worlds: "Worlds",
         settings: "Settings",
         invite: "Invite",
         credit: "Credit",

front/src/i18n/locales.ts

@@ -1,8 +1,9 @@
 import { detectLocale, navigatorDetector, initLocalStorageDetector } from "typesafe-i18n/detectors";
 import { FALLBACK_LOCALE } from "../Enum/EnvironmentVariable";
-import { initI18n, setLocale } from "./i18n-svelte";
+import { initI18n, setLocale, locale } from "./i18n-svelte";
 import type { Locales, Translation } from "./i18n-types";
 import { baseLocale, getTranslationForLocale, locales } from "./i18n-util";
+import { get } from "svelte/store";
 
 const fallbackLocale = FALLBACK_LOCALE || baseLocale;
 const localStorageProperty = "language";
@@ -50,3 +51,20 @@ function getDisplayableLocales() {
 }
 
 export const displayableLocales = getDisplayableLocales();
+
+export const i18nJson = (text: string): string => {
+    if (text.trim().startsWith("{")) {
+        try {
+            const textObject = JSON.parse(text);
+            if (textObject[get(locale)]) {
+                return textObject[get(locale)];
+            } else if (Object.keys(textObject).length > 0) {
+                // fallback to first value
+                return textObject[Object.keys(textObject)[0]];
+            }
+        } catch (err) {
+            //
+        }
+    }
+    return text;
+};

front/style/style.scss

@@ -1047,15 +1047,12 @@ div.action.danger p.action-body{
 }
 
 div.is-silent {
-    position: absolute;
+    position: absolute !important;
     bottom: 40px;
-    border-radius: 15px 15px 15px 15px;
     max-height: 20%;
     transition: right 350ms;
-    right: -300px;
-    background-color: black;
+    right: -1000px;
     font-size: 20px;
-    color: white;
     padding: 30px 20px;
 }
 div.is-silent.hide {