Implement typesafe-i18n

front/src/Phaser/Game/GameScene.ts

@@ -76,7 +76,6 @@ import { userIsAdminStore } from "../../Stores/GameStore";
 import { contactPageStore } from "../../Stores/MenuStore";
 import type { WasCameraUpdatedEvent } from "../../Api/Events/WasCameraUpdatedEvent";
 import { audioManagerFileStore, audioManagerVisibilityStore } from "../../Stores/AudioManagerStore";
-import { translator } from "../../Translator/Translator";
 
 import EVENT_TYPE = Phaser.Scenes.Events;
 import Texture = Phaser.Textures.Texture;
@@ -92,6 +91,7 @@ import { MapStore } from "../../Stores/Utils/MapStore";
 import { followUsersColorStore } from "../../Stores/FollowStore";
 import Camera = Phaser.Cameras.Scene2D.Camera;
 import { GameSceneUserInputHandler } from "../UserInput/GameSceneUserInputHandler";
+import { locale } from "../../i18n/i18n-svelte";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
@@ -1322,7 +1322,7 @@ ${escapedMessage}
                 startLayerName: this.startPositionCalculator.startLayerName,
                 uuid: localUserStore.getLocalUser()?.uuid,
                 nickname: this.playerName,
-                language: translator.getStringByLanguage(translator.getCurrentLanguage()),
+                language: get(locale),
                 roomId: this.roomUrl,
                 tags: this.connection ? this.connection.getAllTags() : [],
                 variables: this.sharedVariablesManager.variables,

front/src/Phaser/Login/EntryScene.ts

@@ -4,7 +4,11 @@ import { ErrorScene, ErrorSceneName } from "../Reconnecting/ErrorScene";
 import { WAError } from "../Reconnecting/WAError";
 import { waScaleManager } from "../Services/WaScaleManager";
 import { ReconnectingTextures } from "../Reconnecting/ReconnectingScene";
-import { translator, _ } from "../../Translator/Translator";
+import LL from "../../i18n/i18n-svelte";
+import { get } from "svelte/store";
+import { localeDetector } from "../../i18n/locales";
+
+const $LL = get(LL);
 
 export const EntrySceneName = "EntryScene";
 
@@ -25,16 +29,11 @@ export class EntryScene extends Scene {
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
         this.load.bitmapFont(ReconnectingTextures.mainFont, "resources/fonts/arcade.png", "resources/fonts/arcade.xml");
         this.load.spritesheet("cat", "resources/characters/pipoya/Cat 01-1.png", { frameWidth: 32, frameHeight: 32 });
-        translator.loadCurrentLanguageFile(this.load);
     }
 
     create() {
-        translator
-            .loadCurrentLanguageObject(this.cache)
-            .catch((e: unknown) => {
-                console.error("Error during language loading!", e);
-            })
-            .finally(() => {
+        localeDetector()
+            .then(() => {
                 gameManager
                     .init(this.scene)
                     .then((nextSceneName) => {
@@ -47,20 +46,20 @@ export class EntryScene extends Scene {
                         if (err.response && err.response.status == 404) {
                             ErrorScene.showError(
                                 new WAError(
-                                    _("error.access-link.title"),
-                                    _("error.access-link.sub-title"),
-                                    _("error.access-link.details")
+                                    $LL.error.accessLink.title(),
+                                    $LL.error.accessLink.subTitle(),
+                                    $LL.error.accessLink.details()
                                 ),
                                 this.scene
                             );
                         } else if (err.response && err.response.status == 403) {
                             ErrorScene.showError(
                                 new WAError(
-                                    _("error.connection-rejected.title"),
-                                    _("error.connection-rejected.sub-title", {
+                                    $LL.error.connectionRejected.title(),
+                                    $LL.error.connectionRejected.subTitle({
                                         error: err.response.data ? ". \n\r \n\r" + `${err.response.data}` : "",
                                     }),
-                                    _("error.connection-rejected.details")
+                                    $LL.error.connectionRejected.details()
                                 ),
                                 this.scene
                             );
@@ -68,6 +67,9 @@ export class EntryScene extends Scene {
                             ErrorScene.showError(err, this.scene);
                         }
                     });
+            })
+            .catch(() => {
+                throw new Error("Cannot load locale!");
             });
     }
 }

front/src/Phaser/Reconnecting/ReconnectingScene.ts

@@ -1,7 +1,8 @@
-import { _ } from "../../Translator/Translator";
 import { TextField } from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Sprite = Phaser.GameObjects.Sprite;
+import LL from "../../i18n/i18n-svelte";
+import { get } from "svelte/store";
 
 export const ReconnectingSceneName = "ReconnectingScene";
 export enum ReconnectingTextures {
@@ -39,7 +40,7 @@ export class ReconnectingScene extends Phaser.Scene {
             this,
             this.game.renderer.width / 2,
             this.game.renderer.height / 2,
-            _("connection-lost")
+            get(LL).warning.connectionLost()
         );
 
         const cat = this.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, "cat");