From 51c3f1d9725bd17927a90a4e1525f9e36e08f952 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 19 Jan 2022 09:28:08 +0100
Subject: [PATCH] Refactoring translator to use "_" instead of "translator._".

This is shorter and pollutes less the code.
---
 docs/dev/how-to-translate.md                  | 10 ++--
 .../AudioManager/AudioManager.svelte          |  4 +-
 front/src/Components/Chat/Chat.svelte         |  4 +-
 .../Components/Chat/ChatMessageForm.svelte    |  4 +-
 front/src/Components/Chat/ChatSubMenu.svelte  |  6 +--
 .../CustomCharacterScene.svelte               | 12 ++---
 .../EnableCamera/EnableCameraScene.svelte     |  6 +--
 .../Components/FollowMenu/FollowMenu.svelte   | 28 +++++-----
 .../HelpCameraSettingsPopup.svelte            | 14 ++---
 front/src/Components/Login/LoginScene.svelte  | 10 ++--
 .../Components/Menu/AboutRoomSubMenu.svelte   | 18 +++----
 .../Components/Menu/AudioGlobalMessage.svelte |  6 +--
 .../src/Components/Menu/ContactSubMenu.svelte | 14 ++---
 .../Menu/GlobalMessagesSubMenu.svelte         | 12 ++---
 front/src/Components/Menu/GuestSubMenu.svelte | 14 ++---
 front/src/Components/Menu/Menu.svelte         |  6 +--
 front/src/Components/Menu/MenuIcon.svelte     | 20 ++-----
 .../src/Components/Menu/ProfileSubMenu.svelte | 18 +++----
 .../Components/Menu/SettingsSubMenu.svelte    | 52 +++++++++----------
 .../Components/Menu/TextGlobalMessage.svelte  |  4 +-
 front/src/Components/MyCamera.svelte          |  4 +-
 .../Components/ReportMenu/BlockSubMenu.svelte |  8 +--
 .../Components/ReportMenu/ReportMenu.svelte   | 10 ++--
 .../ReportMenu/ReportSubMenu.svelte           | 14 +++--
 .../SelectCompanionScene.svelte               |  8 +--
 .../Components/TypeMessage/BanMessage.svelte  |  4 +-
 front/src/Components/UI/AudioPlaying.svelte   |  4 +-
 .../src/Components/VisitCard/VisitCard.svelte |  5 +-
 .../WarningContainer/WarningContainer.svelte  | 10 ++--
 .../SelectCharacterScene.svelte               |  8 +--
 front/src/Phaser/Login/EntryScene.ts          | 14 ++---
 .../Phaser/Reconnecting/ReconnectingScene.ts  |  4 +-
 front/src/Translator/Translator.ts            |  3 +-
 front/src/WebRtc/MediaManager.ts              |  6 +--
 34 files changed, 174 insertions(+), 190 deletions(-)

diff --git a/docs/dev/how-to-translate.md b/docs/dev/how-to-translate.md
index 86fd5129..77cbe3f4 100644
--- a/docs/dev/how-to-translate.md
+++ b/docs/dev/how-to-translate.md
@@ -73,10 +73,12 @@ Example:
 }
 ```
 
-In the code you can use it like this:
+In the code you can translate using `translator.translate`, or the shortcut alias: `_`.
 
 ```js
-translator._('messages.coffe-machine.start');
+import { _ } from "../../Translator/Translator";
+
+console.log(_('messages.coffe-machine.start'));
 ```
 
 ### Add a key with parameters
@@ -99,7 +101,7 @@ Example:
 In the code you can use it like this:
 
 ```js
-translator._('messages.coffe-machine.player-start', {
+_('messages.coffe-machine.player-start', {
     playerName: "John"
 });
-```
\ No newline at end of file
+```
diff --git a/front/src/Components/AudioManager/AudioManager.svelte b/front/src/Components/AudioManager/AudioManager.svelte
index 5bf02fc9..aab2747e 100644
--- a/front/src/Components/AudioManager/AudioManager.svelte
+++ b/front/src/Components/AudioManager/AudioManager.svelte
@@ -5,7 +5,7 @@
     import { get } from "svelte/store";
     import type { Unsubscriber } from "svelte/store";
     import { onDestroy, onMount } from "svelte";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     let HTMLAudioPlayer: HTMLAudioElement;
     let audioPlayerVolumeIcon: HTMLElement;
@@ -145,7 +145,7 @@
     </div>
     <div class="audio-manager-reduce-conversation">
         <label>
-            {translator._("audio.manager.reduce")}
+            {_("audio.manager.reduce")}
             <input type="checkbox" bind:checked={decreaseWhileTalking} on:change={setDecrease} />
         </label>
         <section class="audio-manager-file">
diff --git a/front/src/Components/Chat/Chat.svelte b/front/src/Components/Chat/Chat.svelte
index 2e60e43e..5f66837b 100644
--- a/front/src/Components/Chat/Chat.svelte
+++ b/front/src/Components/Chat/Chat.svelte
@@ -5,7 +5,7 @@
     import ChatElement from "./ChatElement.svelte";
     import { afterUpdate, beforeUpdate, onMount } from "svelte";
     import { HtmlUtils } from "../../WebRtc/HtmlUtils";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     let listDom: HTMLElement;
     let chatWindowElement: HTMLElement;
@@ -46,7 +46,7 @@
     <p class="close-icon" on:click={closeChat}>&times</p>
     <section class="messagesList" bind:this={listDom}>
         <ul>
-            <li><p class="system-text">{translator._("chat.intro")}</p></li>
+            <li><p class="system-text">{_("chat.intro")}</p></li>
             {#each $chatMessagesStore as message, i}
                 <li><ChatElement {message} line={i} /></li>
             {/each}
diff --git a/front/src/Components/Chat/ChatMessageForm.svelte b/front/src/Components/Chat/ChatMessageForm.svelte
index 6853d669..345c4b7d 100644
--- a/front/src/Components/Chat/ChatMessageForm.svelte
+++ b/front/src/Components/Chat/ChatMessageForm.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { chatMessagesStore, chatInputFocusStore } from "../../Stores/ChatStore";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export const handleForm = {
         blur() {
@@ -28,7 +28,7 @@
     <input
         type="text"
         bind:value={newMessageText}
-        placeholder={translator._("chat.enter")}
+        placeholder={_("chat.enter")}
         on:focus={onFocus}
         on:blur={onBlur}
         bind:this={inputElement}
diff --git a/front/src/Components/Chat/ChatSubMenu.svelte b/front/src/Components/Chat/ChatSubMenu.svelte
index 48f59e65..a6c09b83 100644
--- a/front/src/Components/Chat/ChatSubMenu.svelte
+++ b/front/src/Components/Chat/ChatSubMenu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { PlayerInterface } from "../../Phaser/Game/PlayerInterface";
     import { requestVisitCardsStore } from "../../Stores/GameStore";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export let player: PlayerInterface;
 
@@ -15,10 +15,10 @@
 <ul class="selectMenu" style="border-top: {player.color || 'whitesmoke'} 5px solid">
     <li>
         <button class="text-btn" disabled={!player.visitCardUrl} on:click={openVisitCard}
-            >{translator._("chat.menu.visit-card")}</button
+            >{_("chat.menu.visit-card")}</button
         >
     </li>
-    <li><button class="text-btn" disabled>{translator._("chat.menu.add-friend")}</button></li>
+    <li><button class="text-btn" disabled>{_("chat.menu.add-friend")}</button></li>
 </ul>
 
 <style lang="scss">
diff --git a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
index c446ccbc..b29a27f7 100644
--- a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
+++ b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
@@ -2,7 +2,7 @@
     import type { Game } from "../../Phaser/Game/Game";
     import { CustomizeScene, CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
     import { activeRowStore } from "../../Stores/CustomCharacterStore";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export let game: Game;
 
@@ -35,7 +35,7 @@
 
 <form class="customCharacterScene">
     <section class="text-center">
-        <h2>{translator._("custom-character.title")}</h2>
+        <h2>{_("custom-character.title")}</h2>
     </section>
     <section class="action action-move">
         <button
@@ -54,12 +54,12 @@
     <section class="action">
         {#if $activeRowStore === 0}
             <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={previousScene}
-                >{translator._("custom-character.navigation.return")}</button
+                >{_("custom-character.navigation.return")}</button
             >
         {/if}
         {#if $activeRowStore !== 0}
             <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={selectUp}
-                >{translator._("custom-character.navigation.back")}
+                >{_("custom-character.navigation.back")}
                 <img src="resources/objects/arrow_up_black.png" alt="" /></button
             >
         {/if}
@@ -67,7 +67,7 @@
             <button
                 type="submit"
                 class="customCharacterSceneFormSubmit nes-btn is-primary"
-                on:click|preventDefault={finish}>{translator._("custom-character.navigation.finish")}</button
+                on:click|preventDefault={finish}>{_("custom-character.navigation.finish")}</button
             >
         {/if}
         {#if $activeRowStore !== 5}
@@ -75,7 +75,7 @@
                 type="submit"
                 class="customCharacterSceneFormSubmit nes-btn is-primary"
                 on:click|preventDefault={selectDown}
-                >{translator._("custom-character.navigation.next")}
+                >{_("custom-character.navigation.next")}
                 <img src="resources/objects/arrow_down.png" alt="" /></button
             >
         {/if}
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 7dba267b..5387a3c5 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -13,7 +13,7 @@
     import cinemaCloseImg from "../images/cinema-close.svg";
     import cinemaImg from "../images/cinema.svg";
     import microphoneImg from "../images/microphone.svg";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export let game: Game;
     let selectedCamera: string | undefined = undefined;
@@ -77,7 +77,7 @@
 
 <form class="enableCameraScene" on:submit|preventDefault={submit}>
     <section class="text-center">
-        <h2>{translator._("camera.enable.title")}</h2>
+        <h2>{_("camera.enable.title")}</h2>
     </section>
     {#if $localStreamStore.type === "success" && $localStreamStore.stream}
         <video class="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted playsinline />
@@ -122,7 +122,7 @@
         {/if}
     </section>
     <section class="action">
-        <button type="submit" class="nes-btn is-primary letsgo">{translator._("camera.enable.start")}</button>
+        <button type="submit" class="nes-btn is-primary letsgo">{_("camera.enable.start")}</button>
     </section>
 </form>
 
diff --git a/front/src/Components/FollowMenu/FollowMenu.svelte b/front/src/Components/FollowMenu/FollowMenu.svelte
index b41e0fd4..170c884f 100644
--- a/front/src/Components/FollowMenu/FollowMenu.svelte
+++ b/front/src/Components/FollowMenu/FollowMenu.svelte
@@ -6,7 +6,7 @@ vim: ft=typescript
     import followImg from "../images/follow.svg";
 
     import { followStateStore, followRoleStore, followUsersStore } from "../../Stores/FollowStore";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     const gameScene = gameManager.getCurrentGameScene();
 
@@ -44,14 +44,14 @@ vim: ft=typescript
 {#if $followStateStore === "requesting" && $followRoleStore === "follower"}
     <div class="interact-menu nes-container is-rounded">
         <section class="interact-menu-title">
-            <h2>{translator._("follow.interact-menu.title.follow", { leader: name($followUsersStore[0]) })}</h2>
+            <h2>{_("follow.interact-menu.title.follow", { leader: name($followUsersStore[0]) })}</h2>
         </section>
         <section class="interact-menu-action">
             <button type="button" class="nes-btn is-success" on:click|preventDefault={acceptFollowRequest}
-                >{translator._("follow.interact-menu.yes")}</button
+                >{_("follow.interact-menu.yes")}</button
             >
             <button type="button" class="nes-btn is-error" on:click|preventDefault={reset}
-                >{translator._("follow.interact-menu.no")}</button
+                >{_("follow.interact-menu.no")}</button
             >
         </section>
     </div>
@@ -60,23 +60,23 @@ vim: ft=typescript
 {#if $followStateStore === "ending"}
     <div class="interact-menu nes-container is-rounded">
         <section class="interact-menu-title">
-            <h2>{translator._("follow.interact-menu.title.interact")}</h2>
+            <h2>{_("follow.interact-menu.title.interact")}</h2>
         </section>
         {#if $followRoleStore === "follower"}
             <section class="interact-menu-question">
-                <p>{translator._("follow.interact-menu.stop.follower", { leader: name($followUsersStore[0]) })}</p>
+                <p>{_("follow.interact-menu.stop.follower", { leader: name($followUsersStore[0]) })}</p>
             </section>
         {:else if $followRoleStore === "leader"}
             <section class="interact-menu-question">
-                <p>{translator._("follow.interact-menu.stop.leader")}</p>
+                <p>{_("follow.interact-menu.stop.leader")}</p>
             </section>
         {/if}
         <section class="interact-menu-action">
             <button type="button" class="nes-btn is-success" on:click|preventDefault={reset}
-                >{translator._("follow.interact-menu.yes")}</button
+                >{_("follow.interact-menu.yes")}</button
             >
             <button type="button" class="nes-btn is-error" on:click|preventDefault={abortEnding}
-                >{translator._("follow.interact-menu.no")}</button
+                >{_("follow.interact-menu.no")}</button
             >
         </section>
     </div>
@@ -86,21 +86,21 @@ vim: ft=typescript
     <div class="interact-status nes-container is-rounded">
         <section class="interact-status">
             {#if $followRoleStore === "follower"}
-                <p>{translator._("follow.interact-status.following", { leader: name($followUsersStore[0]) })}</p>
+                <p>{_("follow.interact-status.following", { leader: name($followUsersStore[0]) })}</p>
             {:else if $followUsersStore.length === 0}
-                <p>{translator._("follow.interact-status.waiting-followers")}</p>
+                <p>{_("follow.interact-status.waiting-followers")}</p>
             {:else if $followUsersStore.length === 1}
-                <p>{translator._("follow.interact-status.followed.one", { follower: name($followUsersStore[0]) })}</p>
+                <p>{_("follow.interact-status.followed.one", { follower: name($followUsersStore[0]) })}</p>
             {:else if $followUsersStore.length === 2}
                 <p>
-                    {translator._("follow.interact-status.followed.one", {
+                    {_("follow.interact-status.followed.one", {
                         firstFollower: name($followUsersStore[0]),
                         secondFollower: name($followUsersStore[1]),
                     })}
                 </p>
             {:else}
                 <p>
-                    {translator._("follow.interact-status.followed.many", {
+                    {_("follow.interact-status.followed.many", {
                         followers: $followUsersStore.slice(0, -1).map(name).join(", "),
                         lastFollower: name($followUsersStore[$followUsersStore.length - 1]),
                     })}
diff --git a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
index c7cdb9aa..f63ebaf5 100644
--- a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
+++ b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
@@ -4,7 +4,7 @@
     import firefoxImg from "./images/help-setting-camera-permission-firefox.png";
     import chromeImg from "./images/help-setting-camera-permission-chrome.png";
     import { getNavigatorType, isAndroid as isAndroidFct, NavigatorType } from "../../WebRtc/DeviceUtils";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     let isAndroid = isAndroidFct();
     let isFirefox = getNavigatorType() === NavigatorType.firefox;
@@ -25,13 +25,13 @@
     transition:fly={{ y: -900, duration: 500 }}
 >
     <section>
-        <h2>{translator._("camera.help.title")}</h2>
-        <p class="err">{translator._("camera.help.permission-denied")}</p>
-        <p>{translator._("camera.help.content")}</p>
+        <h2>{_("camera.help.title")}</h2>
+        <p class="err">{_("camera.help.permission-denied")}</p>
+        <p>{_("camera.help.content")}</p>
         <p>
             {#if isFirefox}
                 <p class="err">
-                    {translator._("camera.help.firefox-content")}
+                    {_("camera.help.firefox-content")}
                 </p>
                 <img src={firefoxImg} alt="" />
             {:else if isChrome && !isAndroid}
@@ -41,10 +41,10 @@
     </section>
     <section>
         <button class="helpCameraSettingsFormRefresh nes-btn" on:click|preventDefault={refresh}
-            >{translator._("camera.help.refresh")}</button
+            >{_("camera.help.refresh")}</button
         >
         <button type="submit" class="helpCameraSettingsFormContinue nes-btn is-primary" on:click|preventDefault={close}
-            >{translator._("camera.help.continue")}</button
+            >{_("camera.help.continue")}</button
         >
     </section>
 </form>
diff --git a/front/src/Components/Login/LoginScene.svelte b/front/src/Components/Login/LoginScene.svelte
index e4f47d60..2543b97e 100644
--- a/front/src/Components/Login/LoginScene.svelte
+++ b/front/src/Components/Login/LoginScene.svelte
@@ -4,7 +4,7 @@
     import { DISPLAY_TERMS_OF_USE, MAX_USERNAME_LENGTH } from "../../Enum/EnvironmentVariable";
     import logoImg from "../images/logo.png";
     import { gameManager } from "../../Phaser/Game/GameManager";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export let game: Game;
 
@@ -28,7 +28,7 @@
         <img src={logoImg} alt="WorkAdventure logo" />
     </section>
     <section class="text-center">
-        <h2>{translator._("login.input.name.placeholder")}</h2>
+        <h2>{_("login.input.name.placeholder")}</h2>
     </section>
     <!-- svelte-ignore a11y-autofocus -->
     <input
@@ -45,7 +45,7 @@
     />
     <section class="error-section">
         {#if name.trim() === "" && startValidating}
-            <p class="err">{translator._("login.input.name.empty")}</p>
+            <p class="err">{_("login.input.name.empty")}</p>
         {/if}
     </section>
 
@@ -53,12 +53,12 @@
         <section class="terms-and-conditions">
             <a style="display: none;" href="traduction">Need for traduction</a>
             <p>
-                {translator._("login.terms")}
+                {_("login.terms")}
             </p>
         </section>
     {/if}
     <section class="action">
-        <button type="submit" class="nes-btn is-primary loginSceneFormSubmit">{translator._("login.continue")}</button>
+        <button type="submit" class="nes-btn is-primary loginSceneFormSubmit">{_("login.continue")}</button>
     </section>
 </form>
 
diff --git a/front/src/Components/Menu/AboutRoomSubMenu.svelte b/front/src/Components/Menu/AboutRoomSubMenu.svelte
index ee560340..75f17132 100644
--- a/front/src/Components/Menu/AboutRoomSubMenu.svelte
+++ b/front/src/Components/Menu/AboutRoomSubMenu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { gameManager } from "../../Phaser/Game/GameManager";
     import { onMount } from "svelte";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     let gameScene = gameManager.getCurrentGameScene();
 
@@ -12,7 +12,7 @@
     let mapName: string = "";
     let mapLink: string = "";
     let mapDescription: string = "";
-    let mapCopyright: string = translator._("menu.about.copyrights.map.empty");
+    let mapCopyright: string = _("menu.about.copyrights.map.empty");
     let tilesetCopyright: string[] = [];
     let audioCopyright: string[] = [];
 
@@ -63,37 +63,37 @@
 </script>
 
 <div class="about-room-main">
-    <h2>{translator._("menu.about.map-info")}</h2>
+    <h2>{_("menu.about.map-info")}</h2>
     <section class="container-overflow">
         <h3>{mapName}</h3>
         <p class="string-HTML">{mapDescription}</p>
         {#if mapLink}
             <p class="string-HTML">
-                &gt; <a href={mapLink} target="_blank">{translator._("menu.about.map-link")}</a> &lt;
+                &gt; <a href={mapLink} target="_blank">{_("menu.about.map-link")}</a> &lt;
             </p>
         {/if}
         <h3 class="nes-pointer hoverable" on:click={() => (expandedMapCopyright = !expandedMapCopyright)}>
-            {translator._("menu.about.copyrights.map.title")}
+            {_("menu.about.copyrights.map.title")}
         </h3>
         <p class="string-HTML" hidden={!expandedMapCopyright}>{mapCopyright}</p>
         <h3 class="nes-pointer hoverable" on:click={() => (expandedTilesetCopyright = !expandedTilesetCopyright)}>
-            {translator._("menu.about.copyrights.tileset.title")}
+            {_("menu.about.copyrights.tileset.title")}
         </h3>
         <section hidden={!expandedTilesetCopyright}>
             {#each tilesetCopyright as copyright}
                 <p class="string-HTML">{copyright}</p>
             {:else}
-                <p>{translator._("menu.about.copyrights.tileset.empty")}</p>
+                <p>{_("menu.about.copyrights.tileset.empty")}</p>
             {/each}
         </section>
         <h3 class="nes-pointer hoverable" on:click={() => (expandedAudioCopyright = !expandedAudioCopyright)}>
-            {translator._("menu.about.copyrights.audio.title")}
+            {_("menu.about.copyrights.audio.title")}
         </h3>
         <section hidden={!expandedAudioCopyright}>
             {#each audioCopyright as copyright}
                 <p class="string-HTML">{copyright}</p>
             {:else}
-                <p>{translator._("menu.about.copyrights.audio.empty")}</p>
+                <p>{_("menu.about.copyrights.audio.empty")}</p>
             {/each}
         </section>
     </section>
diff --git a/front/src/Components/Menu/AudioGlobalMessage.svelte b/front/src/Components/Menu/AudioGlobalMessage.svelte
index edc9568d..12f7a848 100644
--- a/front/src/Components/Menu/AudioGlobalMessage.svelte
+++ b/front/src/Components/Menu/AudioGlobalMessage.svelte
@@ -4,7 +4,7 @@
     import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
     import uploadFile from "../images/music-file.svg";
     import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     interface EventTargetFiles extends EventTarget {
         files: Array<File>;
@@ -77,7 +77,7 @@
     <img
         class="nes-pointer"
         src={uploadFile}
-        alt={translator._("menu.global-audio.upload-info")}
+        alt={_("menu.global-audio.upload-info")}
         on:click|preventDefault={() => {
             fileInput.click();
         }}
@@ -86,7 +86,7 @@
         <p>{fileName} : {fileSize}</p>
     {/if}
     {#if errorFile}
-        <p class="err">{translator._("menu.global-audio.error")}</p>
+        <p class="err">{_("menu.global-audio.error")}</p>
     {/if}
     <input
         type="file"
diff --git a/front/src/Components/Menu/ContactSubMenu.svelte b/front/src/Components/Menu/ContactSubMenu.svelte
index 6eb7c963..54a674d5 100644
--- a/front/src/Components/Menu/ContactSubMenu.svelte
+++ b/front/src/Components/Menu/ContactSubMenu.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { contactPageStore } from "../../Stores/MenuStore";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     function goToGettingStarted() {
         const sparkHost = "https://workadventu.re/getting-started";
@@ -16,18 +16,18 @@
 <div class="create-map-main">
     <section class="container-overflow">
         <section>
-            <h3>{translator._("menu.contact.getting-started.title")}</h3>
-            <p>{translator._("menu.contact.getting-started.description")}</p>
+            <h3>{_("menu.contact.getting-started.title")}</h3>
+            <p>{_("menu.contact.getting-started.description")}</p>
             <button type="button" class="nes-btn is-primary" on:click={goToGettingStarted}
-                >{translator._("menu.contact.getting-started.title")}</button
+                >{_("menu.contact.getting-started.title")}</button
             >
         </section>
 
         <section>
-            <h3>{translator._("menu.contact.create-map.title")}</h3>
-            <p>{translator._("menu.contact.create-map.description")}</p>
+            <h3>{_("menu.contact.create-map.title")}</h3>
+            <p>{_("menu.contact.create-map.description")}</p>
             <button type="button" class="nes-btn" on:click={goToBuildingMap}
-                >{translator._("menu.contact.create-map.title")}</button
+                >{_("menu.contact.create-map.title")}</button
             >
         </section>
 
diff --git a/front/src/Components/Menu/GlobalMessagesSubMenu.svelte b/front/src/Components/Menu/GlobalMessagesSubMenu.svelte
index 654c0449..31bd674a 100644
--- a/front/src/Components/Menu/GlobalMessagesSubMenu.svelte
+++ b/front/src/Components/Menu/GlobalMessagesSubMenu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import TextGlobalMessage from "./TextGlobalMessage.svelte";
     import AudioGlobalMessage from "./AudioGlobalMessage.svelte";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     let handleSendText: { sendTextMessage(broadcast: boolean): void };
     let handleSendAudio: { sendAudioMessage(broadcast: boolean): Promise<void> };
@@ -36,14 +36,14 @@
             <button
                 type="button"
                 class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}"
-                on:click|preventDefault={activateInputText}>{translator._("menu.global-message.text")}</button
+                on:click|preventDefault={activateInputText}>{_("menu.global-message.text")}</button
             >
         </section>
         <section>
             <button
                 type="button"
                 class="nes-btn {uploadAudioActive ? 'is-disabled' : ''}"
-                on:click|preventDefault={activateUploadAudio}>{translator._("menu.global-message.audio")}</button
+                on:click|preventDefault={activateUploadAudio}>{_("menu.global-message.audio")}</button
             >
         </section>
     </div>
@@ -58,12 +58,10 @@
     <div class="global-message-footer">
         <label>
             <input type="checkbox" class="nes-checkbox is-dark nes-pointer" bind:checked={broadcastToWorld} />
-            <span>{translator._("menu.global-message.warning")}</span>
+            <span>{_("menu.global-message.warning")}</span>
         </label>
         <section>
-            <button class="nes-btn is-primary" on:click|preventDefault={send}
-                >{translator._("menu.global-message.send")}</button
-            >
+            <button class="nes-btn is-primary" on:click|preventDefault={send}>{_("menu.global-message.send")}</button>
         </section>
     </div>
 </div>
diff --git a/front/src/Components/Menu/GuestSubMenu.svelte b/front/src/Components/Menu/GuestSubMenu.svelte
index e83cd682..805525b0 100644
--- a/front/src/Components/Menu/GuestSubMenu.svelte
+++ b/front/src/Components/Menu/GuestSubMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     function copyLink() {
         const input: HTMLInputElement = document.getElementById("input-share-link") as HTMLInputElement;
@@ -23,18 +23,14 @@
 <div class="guest-main">
     <section class="container-overflow">
         <section class="share-url not-mobile">
-            <h3>{translator._("menu.invite.description")}</h3>
+            <h3>{_("menu.invite.description")}</h3>
             <input type="text" readonly id="input-share-link" value={location.toString()} />
-            <button type="button" class="nes-btn is-primary" on:click={copyLink}
-                >{translator._("menu.invite.copy")}</button
-            >
+            <button type="button" class="nes-btn is-primary" on:click={copyLink}>{_("menu.invite.copy")}</button>
         </section>
         <section class="is-mobile">
-            <h3>{translator._("menu.invite.description")}</h3>
+            <h3>{_("menu.invite.description")}</h3>
             <input type="hidden" readonly id="input-share-link" value={location.toString()} />
-            <button type="button" class="nes-btn is-primary" on:click={shareLink}
-                >{translator._("menu.invite.share")}</button
-            >
+            <button type="button" class="nes-btn is-primary" on:click={shareLink}>{_("menu.invite.share")}</button>
         </section>
     </section>
 </div>
diff --git a/front/src/Components/Menu/Menu.svelte b/front/src/Components/Menu/Menu.svelte
index a8606653..f2a94a95 100644
--- a/front/src/Components/Menu/Menu.svelte
+++ b/front/src/Components/Menu/Menu.svelte
@@ -18,7 +18,7 @@
     import { get } from "svelte/store";
     import type { Unsubscriber } from "svelte/store";
     import { sendMenuClickedEvent } from "../../Api/iframe/Ui/MenuItem";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     let activeSubMenu: string = SubMenusInterface.profile;
     let activeComponent: typeof ProfileSubMenu | typeof CustomSubMenu = ProfileSubMenu;
@@ -92,7 +92,7 @@
 
     function translateMenuName(menuName: string) {
         const nameFormatted = "menu.sub." + menuName.toLowerCase().replaceAll(" ", "-");
-        const translation = translator._(nameFormatted);
+        const translation = _(nameFormatted);
 
         return translation === nameFormatted ? menuName : translation;
     }
@@ -102,7 +102,7 @@
 
 <div class="menu-container-main">
     <div class="menu-nav-sidebar nes-container is-rounded" transition:fly={{ x: -1000, duration: 500 }}>
-        <h2>{translator._("menu.title")}</h2>
+        <h2>{_("menu.title")}</h2>
         <nav>
             {#each $subMenusStore as submenu}
                 <button
diff --git a/front/src/Components/Menu/MenuIcon.svelte b/front/src/Components/Menu/MenuIcon.svelte
index 5c0a1304..e3068bb6 100644
--- a/front/src/Components/Menu/MenuIcon.svelte
+++ b/front/src/Components/Menu/MenuIcon.svelte
@@ -9,7 +9,7 @@
     import { get } from "svelte/store";
     import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
     import { showShareLinkMapModalStore } from "../../Stores/ModalStore";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     function showMenu() {
         menuVisiblilityStore.set(!get(menuVisiblilityStore));
@@ -32,29 +32,19 @@
     {#if $limitMapStore}
         <img
             src={logoInvite}
-            alt={translator._("menu.icon.open.invite")}
+            alt={_("menu.icon.open.invite")}
             class="nes-pointer"
             on:click|preventDefault={showInvite}
         />
         <img
             src={logoRegister}
-            alt={translator._("menu.icon.open.register")}
+            alt={_("menu.icon.open.register")}
             class="nes-pointer"
             on:click|preventDefault={register}
         />
     {:else}
-        <img
-            src={logoWA}
-            alt={translator._("menu.icon.open.menu")}
-            class="nes-pointer"
-            on:click|preventDefault={showMenu}
-        />
-        <img
-            src={logoTalk}
-            alt={translator._("menu.icon.open.chat")}
-            class="nes-pointer"
-            on:click|preventDefault={showChat}
-        />
+        <img src={logoWA} alt={_("menu.icon.open.menu")} class="nes-pointer" on:click|preventDefault={showMenu} />
+        <img src={logoTalk} alt={_("menu.icon.open.chat")} class="nes-pointer" on:click|preventDefault={showChat} />
     {/if}
 </main>
 
diff --git a/front/src/Components/Menu/ProfileSubMenu.svelte b/front/src/Components/Menu/ProfileSubMenu.svelte
index 621670ec..88269711 100644
--- a/front/src/Components/Menu/ProfileSubMenu.svelte
+++ b/front/src/Components/Menu/ProfileSubMenu.svelte
@@ -17,7 +17,7 @@
     import btnProfileSubMenuCompanion from "../images/btn-menu-profile-companion.svg";
     import Woka from "../Woka/Woka.svelte";
     import Companion from "../Companion/Companion.svelte";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     function disableMenuStores() {
         menuVisiblilityStore.set(false);
@@ -63,20 +63,20 @@
     <div class="submenu">
         <section>
             <button type="button" class="nes-btn" on:click|preventDefault={openEditNameScene}>
-                <img src={btnProfileSubMenuIdentity} alt={translator._("menu.profile.edit.name")} />
-                <span class="btn-hover">{translator._("menu.profile.edit.name")}</span>
+                <img src={btnProfileSubMenuIdentity} alt={_("menu.profile.edit.name")} />
+                <span class="btn-hover">{_("menu.profile.edit.name")}</span>
             </button>
             <button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>
                 <Woka userId={-1} placeholderSrc="" width="26px" height="26px" />
-                <span class="btn-hover">{translator._("menu.profile.edit.woka")}</span>
+                <span class="btn-hover">{_("menu.profile.edit.woka")}</span>
             </button>
             <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>
                 <Companion userId={-1} placeholderSrc={btnProfileSubMenuCompanion} width="26px" height="26px" />
-                <span class="btn-hover">{translator._("menu.profile.edit.companion")}</span>
+                <span class="btn-hover">{_("menu.profile.edit.companion")}</span>
             </button>
             <button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>
-                <img src={btnProfileSubMenuCamera} alt={translator._("menu.profile.edit.camera")} />
-                <span class="btn-hover">{translator._("menu.profile.edit.camera")}</span>
+                <img src={btnProfileSubMenuCamera} alt={_("menu.profile.edit.camera")} />
+                <span class="btn-hover">{_("menu.profile.edit.camera")}</span>
             </button>
         </section>
     </div>
@@ -90,12 +90,12 @@
             </section>
             <section>
                 <button type="button" class="nes-btn" on:click|preventDefault={logOut}
-                    >{translator._("menu.profile.logout")}</button
+                    >{_("menu.profile.logout")}</button
                 >
             </section>
         {:else}
             <section>
-                <a type="button" class="nes-btn" href="/login">{translator._("menu.profile.login")}</a>
+                <a type="button" class="nes-btn" href="/login">{_("menu.profile.login")}</a>
             </section>
         {/if}
     </div>
diff --git a/front/src/Components/Menu/SettingsSubMenu.svelte b/front/src/Components/Menu/SettingsSubMenu.svelte
index 776acbbe..a2eba2be 100644
--- a/front/src/Components/Menu/SettingsSubMenu.svelte
+++ b/front/src/Components/Menu/SettingsSubMenu.svelte
@@ -4,7 +4,7 @@
     import { HtmlUtils } from "../../WebRtc/HtmlUtils";
     import { isMobile } from "../../Enum/EnvironmentVariable";
     import { menuVisiblilityStore } from "../../Stores/MenuStore";
-    import { languages, translator } from "../../Translator/Translator";
+    import { languages, translator, _ } from "../../Translator/Translator";
 
     let fullscreen: boolean = localUserStore.getFullscreen();
     let notification: boolean = localUserStore.getNotification() === "granted";
@@ -88,61 +88,61 @@
 
 <div class="settings-main" on:submit|preventDefault={saveSetting}>
     <section>
-        <h3>{translator._("menu.settings.game-quality.title")}</h3>
+        <h3>{_("menu.settings.game-quality.title")}</h3>
         <div class="nes-select is-dark">
             <select bind:value={valueGame}>
                 <option value={120}
                     >{isMobile()
-                        ? translator._("menu.settings.game-quality.short.high")
-                        : translator._("menu.settings.game-quality.long.high")}</option
+                        ? _("menu.settings.game-quality.short.high")
+                        : _("menu.settings.game-quality.long.high")}</option
                 >
                 <option value={60}
                     >{isMobile()
-                        ? translator._("menu.settings.game-quality.short.medium")
-                        : translator._("menu.settings.game-quality.long.medium")}</option
+                        ? _("menu.settings.game-quality.short.medium")
+                        : _("menu.settings.game-quality.long.medium")}</option
                 >
                 <option value={40}
                     >{isMobile()
-                        ? translator._("menu.settings.game-quality.short.minimum")
-                        : translator._("menu.settings.game-quality.long.minimum")}</option
+                        ? _("menu.settings.game-quality.short.minimum")
+                        : _("menu.settings.game-quality.long.minimum")}</option
                 >
                 <option value={20}
                     >{isMobile()
-                        ? translator._("menu.settings.game-quality.short.small")
-                        : translator._("menu.settings.game-quality.long.small")}</option
+                        ? _("menu.settings.game-quality.short.small")
+                        : _("menu.settings.game-quality.long.small")}</option
                 >
             </select>
         </div>
     </section>
     <section>
-        <h3>{translator._("menu.settings.video-quality.title")}</h3>
+        <h3>{_("menu.settings.video-quality.title")}</h3>
         <div class="nes-select is-dark">
             <select bind:value={valueVideo}>
                 <option value={30}
                     >{isMobile()
-                        ? translator._("menu.settings.video-quality.short.high")
-                        : translator._("menu.settings.video-quality.long.high")}</option
+                        ? _("menu.settings.video-quality.short.high")
+                        : _("menu.settings.video-quality.long.high")}</option
                 >
                 <option value={20}
                     >{isMobile()
-                        ? translator._("menu.settings.video-quality.short.medium")
-                        : translator._("menu.settings.video-quality.long.medium")}</option
+                        ? _("menu.settings.video-quality.short.medium")
+                        : _("menu.settings.video-quality.long.medium")}</option
                 >
                 <option value={10}
                     >{isMobile()
-                        ? translator._("menu.settings.video-quality.short.minimum")
-                        : translator._("menu.settings.video-quality.long.minimum")}</option
+                        ? _("menu.settings.video-quality.short.minimum")
+                        : _("menu.settings.video-quality.long.minimum")}</option
                 >
                 <option value={5}
                     >{isMobile()
-                        ? translator._("menu.settings.video-quality.short.small")
-                        : translator._("menu.settings.video-quality.long.small")}</option
+                        ? _("menu.settings.video-quality.short.small")
+                        : _("menu.settings.video-quality.long.small")}</option
                 >
             </select>
         </div>
     </section>
     <section>
-        <h3>{translator._("menu.settings.language.title")}</h3>
+        <h3>{_("menu.settings.language.title")}</h3>
         <div class="nes-select is-dark">
             <select class="languages-switcher" bind:value={valueLanguage}>
                 <!-- svelte-ignore missing-declaration -->
@@ -153,9 +153,9 @@
         </div>
     </section>
     <section class="settings-section-save">
-        <p>{translator._("menu.settings.save.warning")}</p>
+        <p>{_("menu.settings.save.warning")}</p>
         <button type="button" class="nes-btn is-primary" on:click|preventDefault={saveSetting}
-            >{translator._("menu.settings.save.button")}</button
+            >{_("menu.settings.save.button")}</button
         >
     </section>
     <section class="settings-section-noSaveOption">
@@ -166,7 +166,7 @@
                 bind:checked={fullscreen}
                 on:change={changeFullscreen}
             />
-            <span>{translator._("menu.settings.fullscreen")}</span>
+            <span>{_("menu.settings.fullscreen")}</span>
         </label>
         <label>
             <input
@@ -175,7 +175,7 @@
                 bind:checked={notification}
                 on:change={changeNotification}
             />
-            <span>{translator._("menu.settings.notifications")}</span>
+            <span>{_("menu.settings.notifications")}</span>
         </label>
         <label>
             <input
@@ -184,7 +184,7 @@
                 bind:checked={forceCowebsiteTrigger}
                 on:change={changeForceCowebsiteTrigger}
             />
-            <span>{translator._("menu.settings.cowebsite-trigger")}</span>
+            <span>{_("menu.settings.cowebsite-trigger")}</span>
         </label>
         <label>
             <input
@@ -193,7 +193,7 @@
                 bind:checked={ignoreFollowRequests}
                 on:change={changeIgnoreFollowRequests}
             />
-            <span>{translator._("menu.settings.ignore-follow-request")}</span>
+            <span>{_("menu.settings.ignore-follow-request")}</span>
         </label>
     </section>
 </div>
diff --git a/front/src/Components/Menu/TextGlobalMessage.svelte b/front/src/Components/Menu/TextGlobalMessage.svelte
index 8f984f68..de863209 100644
--- a/front/src/Components/Menu/TextGlobalMessage.svelte
+++ b/front/src/Components/Menu/TextGlobalMessage.svelte
@@ -5,7 +5,7 @@
     import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
     import type { Quill } from "quill";
     import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     //toolbar
     const toolbarOptions = [
@@ -59,7 +59,7 @@
         const { default: Quill } = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
 
         quill = new Quill(QUILL_EDITOR, {
-            placeholder: translator._("menu.global-message.enter"),
+            placeholder: _("menu.global-message.enter"),
             theme: "snow",
             modules: {
                 toolbar: toolbarOptions,
diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte
index 6c259b54..c6acddec 100644
--- a/front/src/Components/MyCamera.svelte
+++ b/front/src/Components/MyCamera.svelte
@@ -4,7 +4,7 @@
     import SoundMeterWidget from "./SoundMeterWidget.svelte";
     import { onDestroy } from "svelte";
     import { srcObject } from "./Video/utils";
-    import { translator } from "../Translator/Translator";
+    import { _ } from "../Translator/Translator";
 
     let stream: MediaStream | null;
 
@@ -33,5 +33,5 @@
             <SoundMeterWidget {stream} />
         {/if}
     </div>
-    <div class="is-silent" class:hide={isSilent}>{translator._("camera.my.silent-zone")}</div>
+    <div class="is-silent" class:hide={isSilent}>{_("camera.my.silent-zone")}</div>
 </div>
diff --git a/front/src/Components/ReportMenu/BlockSubMenu.svelte b/front/src/Components/ReportMenu/BlockSubMenu.svelte
index 765b0202..afabe450 100644
--- a/front/src/Components/ReportMenu/BlockSubMenu.svelte
+++ b/front/src/Components/ReportMenu/BlockSubMenu.svelte
@@ -2,7 +2,7 @@
     import { blackListManager } from "../../WebRtc/BlackListManager";
     import { showReportScreenStore, userReportEmpty } from "../../Stores/ShowReportScreenStore";
     import { onMount } from "svelte";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export let userUUID: string | undefined;
     export let userName: string;
@@ -30,10 +30,10 @@
 </script>
 
 <div class="block-container">
-    <h3>{translator._("report.block.title")}</h3>
-    <p>{translator._("report.block.content", { userName })}</p>
+    <h3>{_("report.block.title")}</h3>
+    <p>{_("report.block.content", { userName })}</p>
     <button type="button" class="nes-btn is-error" on:click|preventDefault={blockUser}>
-        {userIsBlocked ? translator._("report.block.unblock") : translator._("report.block.block")}
+        {userIsBlocked ? _("report.block.unblock") : _("report.block.block")}
     </button>
 </div>
 
diff --git a/front/src/Components/ReportMenu/ReportMenu.svelte b/front/src/Components/ReportMenu/ReportMenu.svelte
index 0b482dc6..ab44e525 100644
--- a/front/src/Components/ReportMenu/ReportMenu.svelte
+++ b/front/src/Components/ReportMenu/ReportMenu.svelte
@@ -7,7 +7,7 @@
     import { playersStore } from "../../Stores/PlayersStore";
     import { connectionManager } from "../../Connexion/ConnectionManager";
     import { get } from "svelte/store";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     let blockActive = true;
     let reportActive = !blockActive;
@@ -60,7 +60,7 @@
 
 <div class="report-menu-main nes-container is-rounded">
     <section class="report-menu-title">
-        <h2>{translator._("moderate.title", { userName })}</h2>
+        <h2>{_("moderate.title", { userName })}</h2>
         <section class="justify-center">
             <button type="button" class="nes-btn" on:click|preventDefault={close}>X</button>
         </section>
@@ -70,14 +70,14 @@
             <button
                 type="button"
                 class="nes-btn {blockActive ? 'is-disabled' : ''}"
-                on:click|preventDefault={activateBlock}>{translator._("moderate.block")}</button
+                on:click|preventDefault={activateBlock}>{_("moderate.block")}</button
             >
         </section>
         <section class="justify-center">
             <button
                 type="button"
                 class="nes-btn {reportActive ? 'is-disabled' : ''}"
-                on:click|preventDefault={activateReport}>{translator._("moderate.report")}</button
+                on:click|preventDefault={activateReport}>{_("moderate.report")}</button
             >
         </section>
     </section>
@@ -87,7 +87,7 @@
         {:else if reportActive}
             <ReportSubMenu {userUUID} />
         {:else}
-            <p>{translator._("moderate.no-select")}</p>
+            <p>{_("moderate.no-select")}</p>
         {/if}
     </section>
 </div>
diff --git a/front/src/Components/ReportMenu/ReportSubMenu.svelte b/front/src/Components/ReportMenu/ReportSubMenu.svelte
index 20a38a9b..745816c1 100644
--- a/front/src/Components/ReportMenu/ReportSubMenu.svelte
+++ b/front/src/Components/ReportMenu/ReportSubMenu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { showReportScreenStore, userReportEmpty } from "../../Stores/ShowReportScreenStore";
     import { gameManager } from "../../Phaser/Game/GameManager";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export let userUUID: string | undefined;
     let reportMessage: string;
@@ -23,20 +23,18 @@
 </script>
 
 <div class="report-container-main">
-    <h3>{translator._("report.title")}</h3>
-    <p>{translator._("report.message")}</p>
+    <h3>{_("report.title")}</h3>
+    <p>{_("report.message")}</p>
     <form>
         <section>
             <label>
-                <span>{translator._("report.message.title")}</span>
+                <span>{_("report.message.title")}</span>
                 <textarea type="text" class="nes-textarea" bind:value={reportMessage} />
             </label>
-            <p hidden={hiddenError}>{translator._("report.message.empty")}</p>
+            <p hidden={hiddenError}>{_("report.message.empty")}</p>
         </section>
         <section>
-            <button type="submit" class="nes-btn is-error" on:click={submitReport}
-                >{translator._("report.submit")}</button
-            >
+            <button type="submit" class="nes-btn is-error" on:click={submitReport}>{_("report.submit")}</button>
         </section>
     </form>
 </div>
diff --git a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
index 94c1d9c6..9f8ecdc3 100644
--- a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
+++ b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import type { Game } from "../../Phaser/Game/Game";
     import { SelectCompanionScene, SelectCompanionSceneName } from "../../Phaser/Login/SelectCompanionScene";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export let game: Game;
 
@@ -26,7 +26,7 @@
 
 <form class="selectCompanionScene">
     <section class="text-center">
-        <h2>{translator._("companion.select.title")}</h2>
+        <h2>{_("companion.select.title")}</h2>
         <button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={selectLeft}>
             &lt;
         </button>
@@ -36,12 +36,12 @@
     </section>
     <section class="action">
         <button href="/" class="selectCompanionSceneFormBack nes-btn" on:click|preventDefault={noCompanion}
-            >{translator._("companion.select.any")}</button
+            >{_("companion.select.any")}</button
         >
         <button
             type="submit"
             class="selectCompanionSceneFormSubmit nes-btn is-primary"
-            on:click|preventDefault={selectCompanion}>{translator._("companion.select.continue")}</button
+            on:click|preventDefault={selectCompanion}>{_("companion.select.continue")}</button
         >
     </section>
 </form>
diff --git a/front/src/Components/TypeMessage/BanMessage.svelte b/front/src/Components/TypeMessage/BanMessage.svelte
index 4b19523b..a664e21c 100644
--- a/front/src/Components/TypeMessage/BanMessage.svelte
+++ b/front/src/Components/TypeMessage/BanMessage.svelte
@@ -3,7 +3,7 @@
     import { onMount } from "svelte";
     import type { Message } from "../../Stores/TypeMessageStore/MessageStore";
     import { banMessageStore } from "../../Stores/TypeMessageStore/BanMessageStore";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export let message: Message;
 
@@ -39,7 +39,7 @@
 >
     <h2 class="title-ban-message">
         <img src="resources/logos/report.svg" alt="***" />
-        {translator._("important-message")}
+        {_("important-message")}
         <img src="resources/logos/report.svg" alt="***" />
     </h2>
     <div class="content-ban-message">
diff --git a/front/src/Components/UI/AudioPlaying.svelte b/front/src/Components/UI/AudioPlaying.svelte
index bfe34157..12212b13 100644
--- a/front/src/Components/UI/AudioPlaying.svelte
+++ b/front/src/Components/UI/AudioPlaying.svelte
@@ -3,7 +3,7 @@
     import megaphoneImg from "./images/megaphone.svg";
     import { soundPlayingStore } from "../../Stores/SoundPlayingStore";
     import { afterUpdate } from "svelte";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export let url: string;
     let audio: HTMLAudioElement;
@@ -19,7 +19,7 @@
 
 <div class="audio-playing" transition:fly={{ x: 210, duration: 500 }}>
     <img src={megaphoneImg} alt="Audio playing" />
-    <p>{translator._("audio.message")}</p>
+    <p>{_("audio.message")}</p>
     <audio bind:this={audio} src={url} on:ended={soundEnded}>
         <track kind="captions" />
     </audio>
diff --git a/front/src/Components/VisitCard/VisitCard.svelte b/front/src/Components/VisitCard/VisitCard.svelte
index df1342a8..d56f12ae 100644
--- a/front/src/Components/VisitCard/VisitCard.svelte
+++ b/front/src/Components/VisitCard/VisitCard.svelte
@@ -2,7 +2,7 @@
     import { fly } from "svelte/transition";
     import { requestVisitCardsStore } from "../../Stores/GameStore";
     import { onMount } from "svelte";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export let visitCardUrl: string;
     let w = "500px";
@@ -41,8 +41,7 @@
     />
     {#if !hidden}
         <div class="buttonContainer">
-            <button class="nes-btn is-popUpElement" on:click={closeCard}>{translator._("menu.visit-card.close")}</button
-            >
+            <button class="nes-btn is-popUpElement" on:click={closeCard}>{_("menu.visit-card.close")}</button>
         </div>
     {/if}
 </section>
diff --git a/front/src/Components/WarningContainer/WarningContainer.svelte b/front/src/Components/WarningContainer/WarningContainer.svelte
index 2791d462..b0cacee3 100644
--- a/front/src/Components/WarningContainer/WarningContainer.svelte
+++ b/front/src/Components/WarningContainer/WarningContainer.svelte
@@ -2,7 +2,7 @@
     import { fly } from "svelte/transition";
     import { userIsAdminStore, limitMapStore } from "../../Stores/GameStore";
     import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     const upgradeLink = ADMIN_URL + "/pricing";
     const registerLink = ADMIN_URL + "/second-step-register";
@@ -10,17 +10,17 @@
 
 <main class="warningMain" transition:fly={{ y: -200, duration: 500 }}>
     {#if $userIsAdminStore}
-        <h2>{translator._("warning.title")}</h2>
+        <h2>{_("warning.title")}</h2>
         <p>
-            {translator._("warning.content", { upgradeLink })}
+            {_("warning.content", { upgradeLink })}
         </p>
     {:else if $limitMapStore}
         <p>
             This map is available for 2 days. You can register your domain <a href={registerLink}>here</a>!
         </p>
     {:else}
-        <h2>{translator._("warning.title")}</h2>
-        <p>{translator._("warning.limit")}</p>
+        <h2>{_("warning.title")}</h2>
+        <p>{_("warning.limit")}</p>
     {/if}
 </main>
 
diff --git a/front/src/Components/selectCharacter/SelectCharacterScene.svelte b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
index f7e3be5b..d38ba77a 100644
--- a/front/src/Components/selectCharacter/SelectCharacterScene.svelte
+++ b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import type { Game } from "../../Phaser/Game/Game";
     import { SelectCharacterScene, SelectCharacterSceneName } from "../../Phaser/Login/SelectCharacterScene";
-    import { translator } from "../../Translator/Translator";
+    import { _ } from "../../Translator/Translator";
 
     export let game: Game;
 
@@ -26,7 +26,7 @@
 
 <form class="selectCharacterScene">
     <section class="text-center">
-        <h2>{translator._("select-woka.title")}</h2>
+        <h2>{_("select-woka.title")}</h2>
         <button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={selectLeft}>
             &lt;
         </button>
@@ -38,12 +38,12 @@
         <button
             type="submit"
             class="selectCharacterSceneFormSubmit nes-btn is-primary"
-            on:click|preventDefault={cameraScene}>{translator._("select-woka.continue")}</button
+            on:click|preventDefault={cameraScene}>{_("select-woka.continue")}</button
         >
         <button
             type="submit"
             class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn"
-            on:click|preventDefault={customizeScene}>{translator._("select-woka.customize")}</button
+            on:click|preventDefault={customizeScene}>{_("select-woka.customize")}</button
         >
     </section>
 </form>
diff --git a/front/src/Phaser/Login/EntryScene.ts b/front/src/Phaser/Login/EntryScene.ts
index b67b559a..93311838 100644
--- a/front/src/Phaser/Login/EntryScene.ts
+++ b/front/src/Phaser/Login/EntryScene.ts
@@ -4,7 +4,7 @@ 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 { translator, _ } from "../../Translator/Translator";
 
 export const EntrySceneName = "EntryScene";
 
@@ -47,20 +47,20 @@ export class EntryScene extends Scene {
                         if (err.response && err.response.status == 404) {
                             ErrorScene.showError(
                                 new WAError(
-                                    translator._("error.access-link.title"),
-                                    translator._("error.access-link.sub-title"),
-                                    translator._("error.access-link.details")
+                                    _("error.access-link.title"),
+                                    _("error.access-link.sub-title"),
+                                    _("error.access-link.details")
                                 ),
                                 this.scene
                             );
                         } else if (err.response && err.response.status == 403) {
                             ErrorScene.showError(
                                 new WAError(
-                                    translator._("error.connection-rejected.title"),
-                                    translator._("error.connection-rejected.sub-title", {
+                                    _("error.connection-rejected.title"),
+                                    _("error.connection-rejected.sub-title", {
                                         error: err.response.data ? ". \n\r \n\r" + `${err.response.data}` : "",
                                     }),
-                                    translator._("error.connection-rejected.details")
+                                    _("error.connection-rejected.details")
                                 ),
                                 this.scene
                             );
diff --git a/front/src/Phaser/Reconnecting/ReconnectingScene.ts b/front/src/Phaser/Reconnecting/ReconnectingScene.ts
index 08092488..ab9ec261 100644
--- a/front/src/Phaser/Reconnecting/ReconnectingScene.ts
+++ b/front/src/Phaser/Reconnecting/ReconnectingScene.ts
@@ -1,4 +1,4 @@
-import { translator } from "../../Translator/Translator";
+import { _ } from "../../Translator/Translator";
 import { TextField } from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Sprite = Phaser.GameObjects.Sprite;
@@ -39,7 +39,7 @@ export class ReconnectingScene extends Phaser.Scene {
             this,
             this.game.renderer.width / 2,
             this.game.renderer.height / 2,
-            translator._("connection-lost")
+            _("connection-lost")
         );
 
         const cat = this.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, "cat");
diff --git a/front/src/Translator/Translator.ts b/front/src/Translator/Translator.ts
index b8af8e05..f70705bc 100644
--- a/front/src/Translator/Translator.ts
+++ b/front/src/Translator/Translator.ts
@@ -226,7 +226,7 @@ class Translator {
      * @param {TranslationParams} params Tags to replace by value
      * @returns {string} Translation formatted
      */
-    public _(key: string, params?: TranslationParams): string {
+    public translate(key: string, params?: TranslationParams): string {
         const currentLanguageValue = this.getObjectValueByPath(key, this.currentLanguageObject);
 
         if (currentLanguageValue) {
@@ -251,3 +251,4 @@ class Translator {
 
 export const languages: LanguageFound[] = LANGUAGES;
 export const translator = new Translator();
+export const _ = translator.translate.bind(translator);
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 6302f217..cfefae20 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -13,7 +13,7 @@ import { layoutManagerActionStore, layoutManagerVisibilityStore } from "../Store
 import { get } from "svelte/store";
 import { localUserStore } from "../Connexion/LocalUserStore";
 import { MediaStreamConstraintsError } from "../Stores/Errors/MediaStreamConstraintsError";
-import { translator } from "../Translator/Translator";
+import { _ } from "../Translator/Translator";
 
 export class MediaManager {
     startScreenSharingCallBacks: Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
@@ -30,7 +30,7 @@ export class MediaManager {
                     layoutManagerActionStore.addAction({
                         uuid: "cameraAccessDenied",
                         type: "warning",
-                        message: translator._("warning.access-denied.camera"),
+                        message: _("warning.access-denied.camera"),
                         callback: () => {
                             helpCameraSettingsVisibleStore.set(true);
                         },
@@ -51,7 +51,7 @@ export class MediaManager {
                 layoutManagerActionStore.addAction({
                     uuid: "screenSharingAccessDenied",
                     type: "warning",
-                    message: translator._("warning.access-denied.screen-sharing"),
+                    message: _("warning.access-denied.screen-sharing"),
                     callback: () => {
                         helpCameraSettingsVisibleStore.set(true);
                     },