From 7743bda3ebb52c04caefe3b40465613550ef03f3 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Mon, 6 Sep 2021 14:27:01 +0200
Subject: [PATCH 1/2] added yarn run pretty to the front ci

---
 .github/workflows/continuous_integration.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.github/workflows/continuous_integration.yml b/.github/workflows/continuous_integration.yml
index ca2a01cb..a90d9397 100644
--- a/.github/workflows/continuous_integration.yml
+++ b/.github/workflows/continuous_integration.yml
@@ -61,6 +61,10 @@ jobs:
         run: yarn run lint
         working-directory: "front"
 
+      - name: "Pretty"
+        run: yarn run pretty
+        working-directory: "front"
+
       - name: "Jasmine"
         run: yarn test
         working-directory: "front"

From 4160235b92c2cb330a59920e769db9219560c3b9 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Mon, 6 Sep 2021 14:27:54 +0200
Subject: [PATCH 2/2] ran pretty on the front

---
 front/src/Api/Events/ButtonClickedEvent.ts    |   7 +-
 front/src/Api/Events/ChatEvent.ts             |   7 +-
 front/src/Api/Events/ClosePopupEvent.ts       |   7 +-
 front/src/Api/Events/EnterLeaveEvent.ts       |   7 +-
 front/src/Api/Events/GoToPageEvent.ts         |   9 +-
 front/src/Api/Events/LoadSoundEvent.ts        |   7 +-
 front/src/Api/Events/OpenPopupEvent.ts        |  18 +-
 front/src/Api/Events/OpenTabEvent.ts          |   9 +-
 front/src/Api/Events/PlaySoundEvent.ts        |  19 +-
 front/src/Api/Events/StopSoundEvent.ts        |   7 +-
 front/src/Api/Events/UserInputChatEvent.ts    |   7 +-
 front/src/Api/iframe/Ui/ButtonDescriptor.ts   |   8 +-
 front/src/Api/iframe/Ui/Popup.ts              |  15 +-
 front/src/Api/iframe/registeredCallbacks.ts   |  16 +-
 front/src/Connexion/AdminMessagesService.ts   |  20 +-
 front/src/Connexion/EmoteEventStream.ts       |  16 +-
 front/src/Connexion/WorldFullMessageStream.ts |  10 +-
 front/src/Exception/TextureError.ts           |   2 +-
 front/src/Logger/MessageUI.ts                 |  16 +-
 front/src/Network/ProtobufClientUtils.ts      |  13 +-
 front/src/Phaser/Companion/Companion.ts       |  61 +-
 .../src/Phaser/Companion/CompanionTextures.ts |   8 +-
 .../CompanionTexturesLoadingManager.ts        |  14 +-
 front/src/Phaser/Components/ChatModeIcon.ts   |   4 +-
 front/src/Phaser/Components/ClickButton.ts    |   7 +-
 .../Phaser/Components/PresentationModeIcon.ts |   6 +-
 front/src/Phaser/Components/RadialMenu.ts     |  44 +-
 front/src/Phaser/Components/SoundMeter.ts     |  24 +-
 front/src/Phaser/Components/TextField.ts      |   5 +-
 .../src/Phaser/Entity/CustomizedCharacter.ts  |   2 +-
 front/src/Phaser/Entity/PlayerTextures.ts     | 716 ++++++++++--------
 front/src/Phaser/Entity/SpeechBubble.ts       |  19 +-
 front/src/Phaser/Entity/Sprite.ts             |   3 +-
 front/src/Phaser/Game/SoundManager.ts         |  24 +-
 front/src/Phaser/Items/ActionableItem.ts      |  24 +-
 front/src/Phaser/Items/Computer/computer.ts   |  87 ++-
 .../src/Phaser/Items/ItemFactoryInterface.ts  |   6 +-
 .../Phaser/Login/AbstractCharacterScene.ts    |  23 +-
 front/src/Phaser/Login/ResizableScene.ts      |  15 +-
 .../Login/SelectCharacterMobileScene.ts       |  33 +-
 front/src/Phaser/Player/Animation.ts          |  15 +-
 front/src/Phaser/Reconnecting/WAError.ts      |   6 +-
 front/src/Phaser/Services/HdpiManager.ts      |  28 +-
 front/src/Phaser/Services/WaScaleManager.ts   |  31 +-
 front/src/Phaser/UserInput/PinchManager.ts    |  14 +-
 .../ConsoleGlobalMessageManagerStore.ts       |   2 +-
 front/src/Stores/ErrorStore.ts                |   6 +-
 front/src/Stores/Errors/BrowserTooOldError.ts |   6 +-
 front/src/Stores/Errors/WebviewOnOldIOS.ts    |   6 +-
 front/src/Stores/SelectCharacterStore.ts      |   2 +-
 front/src/Stores/SoundPlayingStore.ts         |   6 +-
 front/src/Touch/TouchScreenManager.ts         |  10 +-
 front/src/WebRtc/DeviceUtils.ts               |  15 +-
 front/src/rex-plugins.d.ts                    |  10 +-
 54 files changed, 808 insertions(+), 694 deletions(-)

diff --git a/front/src/Api/Events/ButtonClickedEvent.ts b/front/src/Api/Events/ButtonClickedEvent.ts
index de807037..26a8aceb 100644
--- a/front/src/Api/Events/ButtonClickedEvent.ts
+++ b/front/src/Api/Events/ButtonClickedEvent.ts
@@ -1,10 +1,11 @@
 import * as tg from "generic-type-guard";
 
-export const isButtonClickedEvent =
-    new tg.IsInterface().withProperties({
+export const isButtonClickedEvent = new tg.IsInterface()
+    .withProperties({
         popupId: tg.isNumber,
         buttonId: tg.isNumber,
-    }).get();
+    })
+    .get();
 /**
  * A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property.
  */
diff --git a/front/src/Api/Events/ChatEvent.ts b/front/src/Api/Events/ChatEvent.ts
index 5729a120..984859e8 100644
--- a/front/src/Api/Events/ChatEvent.ts
+++ b/front/src/Api/Events/ChatEvent.ts
@@ -1,10 +1,11 @@
 import * as tg from "generic-type-guard";
 
-export const isChatEvent =
-    new tg.IsInterface().withProperties({
+export const isChatEvent = new tg.IsInterface()
+    .withProperties({
         message: tg.isString,
         author: tg.isString,
-    }).get();
+    })
+    .get();
 /**
  * A message sent from the iFrame to the game to add a message in the chat.
  */
diff --git a/front/src/Api/Events/ClosePopupEvent.ts b/front/src/Api/Events/ClosePopupEvent.ts
index 83b09c96..f604a404 100644
--- a/front/src/Api/Events/ClosePopupEvent.ts
+++ b/front/src/Api/Events/ClosePopupEvent.ts
@@ -1,9 +1,10 @@
 import * as tg from "generic-type-guard";
 
-export const isClosePopupEvent =
-    new tg.IsInterface().withProperties({
+export const isClosePopupEvent = new tg.IsInterface()
+    .withProperties({
         popupId: tg.isNumber,
-    }).get();
+    })
+    .get();
 
 /**
  * A message sent from the iFrame to the game to add a message in the chat.
diff --git a/front/src/Api/Events/EnterLeaveEvent.ts b/front/src/Api/Events/EnterLeaveEvent.ts
index 0c0cb4ff..ca68136e 100644
--- a/front/src/Api/Events/EnterLeaveEvent.ts
+++ b/front/src/Api/Events/EnterLeaveEvent.ts
@@ -1,9 +1,10 @@
 import * as tg from "generic-type-guard";
 
-export const isEnterLeaveEvent =
-    new tg.IsInterface().withProperties({
+export const isEnterLeaveEvent = new tg.IsInterface()
+    .withProperties({
         name: tg.isString,
-    }).get();
+    })
+    .get();
 /**
  * A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property.
  */
diff --git a/front/src/Api/Events/GoToPageEvent.ts b/front/src/Api/Events/GoToPageEvent.ts
index cb258b03..d8d6467d 100644
--- a/front/src/Api/Events/GoToPageEvent.ts
+++ b/front/src/Api/Events/GoToPageEvent.ts
@@ -1,11 +1,10 @@
 import * as tg from "generic-type-guard";
 
-
-
-export const isGoToPageEvent =
-    new tg.IsInterface().withProperties({
+export const isGoToPageEvent = new tg.IsInterface()
+    .withProperties({
         url: tg.isString,
-    }).get();
+    })
+    .get();
 
 /**
  * A message sent from the iFrame to the game to add a message in the chat.
diff --git a/front/src/Api/Events/LoadSoundEvent.ts b/front/src/Api/Events/LoadSoundEvent.ts
index 19b4b8e1..f48f202f 100644
--- a/front/src/Api/Events/LoadSoundEvent.ts
+++ b/front/src/Api/Events/LoadSoundEvent.ts
@@ -1,9 +1,10 @@
 import * as tg from "generic-type-guard";
 
-export const isLoadSoundEvent =
-    new tg.IsInterface().withProperties({
+export const isLoadSoundEvent = new tg.IsInterface()
+    .withProperties({
         url: tg.isString,
-    }).get();
+    })
+    .get();
 
 /**
  * A message sent from the iFrame to the game to add a message in the chat.
diff --git a/front/src/Api/Events/OpenPopupEvent.ts b/front/src/Api/Events/OpenPopupEvent.ts
index 094ba555..c1070bbe 100644
--- a/front/src/Api/Events/OpenPopupEvent.ts
+++ b/front/src/Api/Events/OpenPopupEvent.ts
@@ -1,18 +1,20 @@
 import * as tg from "generic-type-guard";
 
-const isButtonDescriptor =
-    new tg.IsInterface().withProperties({
+const isButtonDescriptor = new tg.IsInterface()
+    .withProperties({
         label: tg.isString,
-        className: tg.isOptional(tg.isString)
-    }).get();
+        className: tg.isOptional(tg.isString),
+    })
+    .get();
 
-export const isOpenPopupEvent =
-    new tg.IsInterface().withProperties({
+export const isOpenPopupEvent = new tg.IsInterface()
+    .withProperties({
         popupId: tg.isNumber,
         targetObject: tg.isString,
         message: tg.isString,
-        buttons: tg.isArray(isButtonDescriptor)
-    }).get();
+        buttons: tg.isArray(isButtonDescriptor),
+    })
+    .get();
 
 /**
  * A message sent from the iFrame to the game to add a message in the chat.
diff --git a/front/src/Api/Events/OpenTabEvent.ts b/front/src/Api/Events/OpenTabEvent.ts
index e510f8b6..6fe6ec21 100644
--- a/front/src/Api/Events/OpenTabEvent.ts
+++ b/front/src/Api/Events/OpenTabEvent.ts
@@ -1,11 +1,10 @@
 import * as tg from "generic-type-guard";
 
-
-
-export const isOpenTabEvent =
-    new tg.IsInterface().withProperties({
+export const isOpenTabEvent = new tg.IsInterface()
+    .withProperties({
         url: tg.isString,
-    }).get();
+    })
+    .get();
 
 /**
  * A message sent from the iFrame to the game to add a message in the chat.
diff --git a/front/src/Api/Events/PlaySoundEvent.ts b/front/src/Api/Events/PlaySoundEvent.ts
index 33ca1ff4..6fe56746 100644
--- a/front/src/Api/Events/PlaySoundEvent.ts
+++ b/front/src/Api/Events/PlaySoundEvent.ts
@@ -1,22 +1,23 @@
 import * as tg from "generic-type-guard";
 
-
-const isSoundConfig =
-    new tg.IsInterface().withProperties({
+const isSoundConfig = new tg.IsInterface()
+    .withProperties({
         volume: tg.isOptional(tg.isNumber),
         loop: tg.isOptional(tg.isBoolean),
         mute: tg.isOptional(tg.isBoolean),
         rate: tg.isOptional(tg.isNumber),
         detune: tg.isOptional(tg.isNumber),
         seek: tg.isOptional(tg.isNumber),
-        delay: tg.isOptional(tg.isNumber)
-    }).get();
+        delay: tg.isOptional(tg.isNumber),
+    })
+    .get();
 
-export const isPlaySoundEvent =
-    new tg.IsInterface().withProperties({
+export const isPlaySoundEvent = new tg.IsInterface()
+    .withProperties({
         url: tg.isString,
-        config : tg.isOptional(isSoundConfig),
-    }).get();
+        config: tg.isOptional(isSoundConfig),
+    })
+    .get();
 
 /**
  * A message sent from the iFrame to the game to add a message in the chat.
diff --git a/front/src/Api/Events/StopSoundEvent.ts b/front/src/Api/Events/StopSoundEvent.ts
index 6d12516d..cdfe43ca 100644
--- a/front/src/Api/Events/StopSoundEvent.ts
+++ b/front/src/Api/Events/StopSoundEvent.ts
@@ -1,9 +1,10 @@
 import * as tg from "generic-type-guard";
 
-export const isStopSoundEvent =
-    new tg.IsInterface().withProperties({
+export const isStopSoundEvent = new tg.IsInterface()
+    .withProperties({
         url: tg.isString,
-    }).get();
+    })
+    .get();
 
 /**
  * A message sent from the iFrame to the game to add a message in the chat.
diff --git a/front/src/Api/Events/UserInputChatEvent.ts b/front/src/Api/Events/UserInputChatEvent.ts
index de21ff6e..9de41327 100644
--- a/front/src/Api/Events/UserInputChatEvent.ts
+++ b/front/src/Api/Events/UserInputChatEvent.ts
@@ -1,9 +1,10 @@
 import * as tg from "generic-type-guard";
 
-export const isUserInputChatEvent =
-    new tg.IsInterface().withProperties({
+export const isUserInputChatEvent = new tg.IsInterface()
+    .withProperties({
         message: tg.isString,
-    }).get();
+    })
+    .get();
 /**
  * A message sent from the game to the iFrame when a user types a message in the chat.
  */
diff --git a/front/src/Api/iframe/Ui/ButtonDescriptor.ts b/front/src/Api/iframe/Ui/ButtonDescriptor.ts
index 119daf5c..9cf1688a 100644
--- a/front/src/Api/iframe/Ui/ButtonDescriptor.ts
+++ b/front/src/Api/iframe/Ui/ButtonDescriptor.ts
@@ -1,4 +1,4 @@
-import type {Popup} from "./Popup";
+import type { Popup } from "./Popup";
 
 export type ButtonClickedCallback = (popup: Popup) => void;
 
@@ -6,13 +6,13 @@ export interface ButtonDescriptor {
     /**
      * The label of the button
      */
-    label: string,
+    label: string;
     /**
      * The type of the button. Can be one of "normal", "primary", "success", "warning", "error", "disabled"
      */
-    className?: "normal" | "primary" | "success" | "warning" | "error" | "disabled",
+    className?: "normal" | "primary" | "success" | "warning" | "error" | "disabled";
     /**
      * Callback called if the button is pressed
      */
-    callback: ButtonClickedCallback,
+    callback: ButtonClickedCallback;
 }
diff --git a/front/src/Api/iframe/Ui/Popup.ts b/front/src/Api/iframe/Ui/Popup.ts
index 37dea922..085fdc2c 100644
--- a/front/src/Api/iframe/Ui/Popup.ts
+++ b/front/src/Api/iframe/Ui/Popup.ts
@@ -1,19 +1,18 @@
-import {sendToWorkadventure} from "../IframeApiContribution";
-import type {ClosePopupEvent} from "../../Events/ClosePopupEvent";
+import { sendToWorkadventure } from "../IframeApiContribution";
+import type { ClosePopupEvent } from "../../Events/ClosePopupEvent";
 
 export class Popup {
-    constructor(private id: number) {
-    }
+    constructor(private id: number) {}
 
     /**
      * Closes the popup
      */
     public close(): void {
         sendToWorkadventure({
-            'type': 'closePopup',
-            'data': {
-                'popupId': this.id,
-            } as ClosePopupEvent
+            type: "closePopup",
+            data: {
+                popupId: this.id,
+            } as ClosePopupEvent,
         });
     }
 }
diff --git a/front/src/Api/iframe/registeredCallbacks.ts b/front/src/Api/iframe/registeredCallbacks.ts
index 5d6f784d..3b6ee6c7 100644
--- a/front/src/Api/iframe/registeredCallbacks.ts
+++ b/front/src/Api/iframe/registeredCallbacks.ts
@@ -1,16 +1,18 @@
-import type {IframeResponseEventMap} from "../../Api/Events/IframeEvent";
-import type {IframeCallback} from "../../Api/iframe/IframeApiContribution";
-import type {IframeCallbackContribution} from "../../Api/iframe/IframeApiContribution";
+import type { IframeResponseEventMap } from "../../Api/Events/IframeEvent";
+import type { IframeCallback } from "../../Api/iframe/IframeApiContribution";
+import type { IframeCallbackContribution } from "../../Api/iframe/IframeApiContribution";
 
-export const registeredCallbacks: { [K in keyof IframeResponseEventMap]?: IframeCallback<K> } = {}
+export const registeredCallbacks: { [K in keyof IframeResponseEventMap]?: IframeCallback<K> } = {};
 
-export function apiCallback<T extends keyof IframeResponseEventMap>(callbackData: IframeCallbackContribution<T>): IframeCallbackContribution<keyof IframeResponseEventMap> {
+export function apiCallback<T extends keyof IframeResponseEventMap>(
+    callbackData: IframeCallbackContribution<T>
+): IframeCallbackContribution<keyof IframeResponseEventMap> {
     const iframeCallback = {
         typeChecker: callbackData.typeChecker,
-        callback: callbackData.callback
+        callback: callbackData.callback,
     } as IframeCallback<T>;
 
     const newCallback = { [callbackData.type]: iframeCallback };
-    Object.assign(registeredCallbacks, newCallback)
+    Object.assign(registeredCallbacks, newCallback);
     return callbackData as unknown as IframeCallbackContribution<keyof IframeResponseEventMap>;
 }
diff --git a/front/src/Connexion/AdminMessagesService.ts b/front/src/Connexion/AdminMessagesService.ts
index 0cf7f95f..0b217760 100644
--- a/front/src/Connexion/AdminMessagesService.ts
+++ b/front/src/Connexion/AdminMessagesService.ts
@@ -1,15 +1,15 @@
-import {Subject} from "rxjs";
-import type {BanUserMessage, SendUserMessage} from "../Messages/generated/messages_pb";
+import { Subject } from "rxjs";
+import type { BanUserMessage, SendUserMessage } from "../Messages/generated/messages_pb";
 
 export enum AdminMessageEventTypes {
-    admin = 'message',
-    audio = 'audio',
-    ban = 'ban',
-    banned = 'banned',
+    admin = "message",
+    audio = "audio",
+    ban = "ban",
+    banned = "banned",
 }
 
 interface AdminMessageEvent {
-    type: AdminMessageEventTypes,
+    type: AdminMessageEventTypes;
     text: string;
     //todo add optional properties for other event types
 }
@@ -21,14 +21,14 @@ class AdminMessagesService {
     public messageStream = this._messageStream.asObservable();
 
     constructor() {
-        this.messageStream.subscribe((event) => console.log('message', event))
+        this.messageStream.subscribe((event) => console.log("message", event));
     }
 
-    onSendusermessage(message: SendUserMessage|BanUserMessage) {
+    onSendusermessage(message: SendUserMessage | BanUserMessage) {
         this._messageStream.next({
             type: message.getType() as unknown as AdminMessageEventTypes,
             text: message.getMessage(),
-        })
+        });
     }
 }
 
diff --git a/front/src/Connexion/EmoteEventStream.ts b/front/src/Connexion/EmoteEventStream.ts
index 9a639697..e8d01095 100644
--- a/front/src/Connexion/EmoteEventStream.ts
+++ b/front/src/Connexion/EmoteEventStream.ts
@@ -1,19 +1,17 @@
-import {Subject} from "rxjs";
+import { Subject } from "rxjs";
 
 interface EmoteEvent {
-    userId: number,
-    emoteName: string,
+    userId: number;
+    emoteName: string;
 }
 
 class EmoteEventStream {
-
-    private _stream:Subject<EmoteEvent> = new Subject();
+    private _stream: Subject<EmoteEvent> = new Subject();
     public stream = this._stream.asObservable();
 
-
-    fire(userId: number, emoteName:string) {
-        this._stream.next({userId, emoteName});
+    fire(userId: number, emoteName: string) {
+        this._stream.next({ userId, emoteName });
     }
 }
 
-export const emoteEventStream = new EmoteEventStream();
\ No newline at end of file
+export const emoteEventStream = new EmoteEventStream();
diff --git a/front/src/Connexion/WorldFullMessageStream.ts b/front/src/Connexion/WorldFullMessageStream.ts
index c9f65d84..01ce6f20 100644
--- a/front/src/Connexion/WorldFullMessageStream.ts
+++ b/front/src/Connexion/WorldFullMessageStream.ts
@@ -1,14 +1,12 @@
-import {Subject} from "rxjs";
+import { Subject } from "rxjs";
 
 class WorldFullMessageStream {
-    
-    private _stream:Subject<string|null> = new Subject<string|null>();
+    private _stream: Subject<string | null> = new Subject<string | null>();
     public stream = this._stream.asObservable();
 
-
-    onMessage(message? :string) {
+    onMessage(message?: string) {
         this._stream.next(message);
     }
 }
 
-export const worldFullMessageStream = new WorldFullMessageStream();
\ No newline at end of file
+export const worldFullMessageStream = new WorldFullMessageStream();
diff --git a/front/src/Exception/TextureError.ts b/front/src/Exception/TextureError.ts
index 39a339f6..4e7e2e80 100644
--- a/front/src/Exception/TextureError.ts
+++ b/front/src/Exception/TextureError.ts
@@ -1 +1 @@
-export class TextureError extends Error{}
\ No newline at end of file
+export class TextureError extends Error {}
diff --git a/front/src/Logger/MessageUI.ts b/front/src/Logger/MessageUI.ts
index 2a581091..d10460bd 100644
--- a/front/src/Logger/MessageUI.ts
+++ b/front/src/Logger/MessageUI.ts
@@ -1,19 +1,21 @@
 export class MessageUI {
-
-    static warningMessage(text: string){
+    static warningMessage(text: string) {
         this.removeMessage();
         const body = document.getElementById("body");
-        body?.insertAdjacentHTML('afterbegin', `
+        body?.insertAdjacentHTML(
+            "afterbegin",
+            `
                 <div id="message-reconnect" class="message-info warning">
                     ${text}
                 </div>
-         `);
+         `
+        );
     }
 
-    static removeMessage(id : string|null = null) {
-        if(!id){
+    static removeMessage(id: string | null = null) {
+        if (!id) {
             const messages = document.getElementsByClassName("message-info");
-            for (let i = 0; i < messages.length; i++){
+            for (let i = 0; i < messages.length; i++) {
                 messages.item(i)?.remove();
             }
             return;
diff --git a/front/src/Network/ProtobufClientUtils.ts b/front/src/Network/ProtobufClientUtils.ts
index 3d2d5c32..9ba0f40b 100644
--- a/front/src/Network/ProtobufClientUtils.ts
+++ b/front/src/Network/ProtobufClientUtils.ts
@@ -1,23 +1,22 @@
-import {PositionMessage} from "../Messages/generated/messages_pb";
+import { PositionMessage } from "../Messages/generated/messages_pb";
 import Direction = PositionMessage.Direction;
-import type {PointInterface} from "../Connexion/ConnexionModels";
+import type { PointInterface } from "../Connexion/ConnexionModels";
 
 export class ProtobufClientUtils {
-
     public static toPointInterface(position: PositionMessage): PointInterface {
         let direction: string;
         switch (position.getDirection()) {
             case Direction.UP:
-                direction = 'up';
+                direction = "up";
                 break;
             case Direction.DOWN:
-                direction = 'down';
+                direction = "down";
                 break;
             case Direction.LEFT:
-                direction = 'left';
+                direction = "left";
                 break;
             case Direction.RIGHT:
-                direction = 'right';
+                direction = "right";
                 break;
             default:
                 throw new Error("Unexpected direction");
diff --git a/front/src/Phaser/Companion/Companion.ts b/front/src/Phaser/Companion/Companion.ts
index 1c43f452..75eb844f 100644
--- a/front/src/Phaser/Companion/Companion.ts
+++ b/front/src/Phaser/Companion/Companion.ts
@@ -16,7 +16,7 @@ export class Companion extends Container {
     private delta: number;
     private invisible: boolean;
     private updateListener: Function;
-    private target: { x: number, y: number, direction: PlayerAnimationDirections };
+    private target: { x: number; y: number; direction: PlayerAnimationDirections };
 
     private companionName: string;
     private direction: PlayerAnimationDirections;
@@ -36,10 +36,10 @@ export class Companion extends Container {
 
         this.companionName = name;
 
-        texturePromise.then(resource => {
+        texturePromise.then((resource) => {
             this.addResource(resource);
             this.invisible = false;
-        })
+        });
 
         this.scene.physics.world.enableBody(this);
 
@@ -52,7 +52,7 @@ export class Companion extends Container {
         this.setDepth(-1);
 
         this.updateListener = this.step.bind(this);
-        this.scene.events.addListener('update', this.updateListener);
+        this.scene.events.addListener("update", this.updateListener);
 
         this.scene.add.existing(this);
     }
@@ -62,7 +62,7 @@ export class Companion extends Container {
     }
 
     public step(time: number, delta: number) {
-        if (typeof this.target === 'undefined') return;
+        if (typeof this.target === "undefined") return;
 
         this.delta += delta;
         if (this.delta < 128) {
@@ -87,7 +87,10 @@ export class Companion extends Container {
             const yDir = yDist / Math.max(Math.abs(yDist), 1);
 
             const speed = 256;
-            this.getBody().setVelocity(Math.min(Math.abs(xDist * 2.5), speed) * xDir, Math.min(Math.abs(yDist * 2.5), speed) * yDir);
+            this.getBody().setVelocity(
+                Math.min(Math.abs(xDist * 2.5), speed) * xDir,
+                Math.min(Math.abs(yDist * 2.5), speed) * yDir
+            );
 
             if (Math.abs(xDist) > Math.abs(yDist)) {
                 if (xDist < 0) {
@@ -116,8 +119,8 @@ export class Companion extends Container {
             y,
             direction,
             moving: animationType === PlayerAnimationTypes.Walk,
-            name: companionName
-        }
+            name: companionName,
+        };
     }
 
     private playAnimation(direction: PlayerAnimationDirections, type: PlayerAnimationTypes): void {
@@ -133,7 +136,7 @@ export class Companion extends Container {
 
         this.add(sprite);
 
-        this.getAnimations(resource).forEach(animation => {
+        this.getAnimations(resource).forEach((animation) => {
             this.scene.anims.create(animation);
         });
 
@@ -145,60 +148,60 @@ export class Companion extends Container {
         return [
             {
                 key: `${resource}-${PlayerAnimationDirections.Down}-${PlayerAnimationTypes.Idle}`,
-                frames: this.scene.anims.generateFrameNumbers(resource, {frames: [1]}),
+                frames: this.scene.anims.generateFrameNumbers(resource, { frames: [1] }),
                 frameRate: 10,
-                repeat: 1
+                repeat: 1,
             },
             {
                 key: `${resource}-${PlayerAnimationDirections.Left}-${PlayerAnimationTypes.Idle}`,
-                frames: this.scene.anims.generateFrameNumbers(resource, {frames: [4]}),
+                frames: this.scene.anims.generateFrameNumbers(resource, { frames: [4] }),
                 frameRate: 10,
-                repeat: 1
+                repeat: 1,
             },
             {
                 key: `${resource}-${PlayerAnimationDirections.Right}-${PlayerAnimationTypes.Idle}`,
-                frames: this.scene.anims.generateFrameNumbers(resource, {frames: [7]}),
+                frames: this.scene.anims.generateFrameNumbers(resource, { frames: [7] }),
                 frameRate: 10,
-                repeat: 1
+                repeat: 1,
             },
             {
                 key: `${resource}-${PlayerAnimationDirections.Up}-${PlayerAnimationTypes.Idle}`,
-                frames: this.scene.anims.generateFrameNumbers(resource, {frames: [10]}),
+                frames: this.scene.anims.generateFrameNumbers(resource, { frames: [10] }),
                 frameRate: 10,
-                repeat: 1
+                repeat: 1,
             },
             {
                 key: `${resource}-${PlayerAnimationDirections.Down}-${PlayerAnimationTypes.Walk}`,
-                frames: this.scene.anims.generateFrameNumbers(resource, {frames: [0, 1, 2]}),
+                frames: this.scene.anims.generateFrameNumbers(resource, { frames: [0, 1, 2] }),
                 frameRate: 15,
-                repeat: -1
+                repeat: -1,
             },
             {
                 key: `${resource}-${PlayerAnimationDirections.Left}-${PlayerAnimationTypes.Walk}`,
-                frames: this.scene.anims.generateFrameNumbers(resource, {frames: [3, 4, 5]}),
+                frames: this.scene.anims.generateFrameNumbers(resource, { frames: [3, 4, 5] }),
                 frameRate: 15,
-                repeat: -1
+                repeat: -1,
             },
             {
                 key: `${resource}-${PlayerAnimationDirections.Right}-${PlayerAnimationTypes.Walk}`,
-                frames: this.scene.anims.generateFrameNumbers(resource, {frames: [6, 7, 8]}),
+                frames: this.scene.anims.generateFrameNumbers(resource, { frames: [6, 7, 8] }),
                 frameRate: 15,
-                repeat: -1
+                repeat: -1,
             },
             {
                 key: `${resource}-${PlayerAnimationDirections.Up}-${PlayerAnimationTypes.Walk}`,
-                frames: this.scene.anims.generateFrameNumbers(resource, {frames: [9, 10, 11]}),
+                frames: this.scene.anims.generateFrameNumbers(resource, { frames: [9, 10, 11] }),
                 frameRate: 15,
-                repeat: -1
-            }
-        ]
+                repeat: -1,
+            },
+        ];
     }
 
     private getBody(): Phaser.Physics.Arcade.Body {
         const body = this.body;
 
         if (!(body instanceof Phaser.Physics.Arcade.Body)) {
-            throw new Error('Container does not have arcade body');
+            throw new Error("Container does not have arcade body");
         }
 
         return body;
@@ -212,7 +215,7 @@ export class Companion extends Container {
         }
 
         if (this.scene) {
-            this.scene.events.removeListener('update', this.updateListener);
+            this.scene.events.removeListener("update", this.updateListener);
         }
 
         super.destroy();
diff --git a/front/src/Phaser/Companion/CompanionTextures.ts b/front/src/Phaser/Companion/CompanionTextures.ts
index 84eaf38f..279b027d 100644
--- a/front/src/Phaser/Companion/CompanionTextures.ts
+++ b/front/src/Phaser/Companion/CompanionTextures.ts
@@ -1,7 +1,7 @@
 export interface CompanionResourceDescriptionInterface {
-    name: string,
-    img: string,
-    behaviour: "dog" | "cat"
+    name: string;
+    img: string;
+    behaviour: "dog" | "cat";
 }
 
 export const COMPANION_RESOURCES: CompanionResourceDescriptionInterface[] = [
@@ -11,4 +11,4 @@ export const COMPANION_RESOURCES: CompanionResourceDescriptionInterface[] = [
     { name: "cat1", img: "resources/characters/pipoya/Cat 01-1.png", behaviour: "cat" },
     { name: "cat2", img: "resources/characters/pipoya/Cat 01-2.png", behaviour: "cat" },
     { name: "cat3", img: "resources/characters/pipoya/Cat 01-3.png", behaviour: "cat" },
-]
+];
diff --git a/front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts b/front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts
index 75c20a48..bd87ba75 100644
--- a/front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts
+++ b/front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts
@@ -7,23 +7,23 @@ export const getAllCompanionResources = (loader: LoaderPlugin): CompanionResourc
     });
 
     return COMPANION_RESOURCES;
-}
+};
 
 export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): Promise<string> => {
     return new Promise((resolve, reject) => {
-        const resource = COMPANION_RESOURCES.find(item => item.name === name);
+        const resource = COMPANION_RESOURCES.find((item) => item.name === name);
 
-        if (typeof resource === 'undefined') {
+        if (typeof resource === "undefined") {
             return reject(`Texture '${name}' not found!`);
         }
-    
+
         if (loader.textureManager.exists(resource.name)) {
             return resolve(resource.name);
         }
-    
+
         loader.spritesheet(resource.name, resource.img, { frameWidth: 32, frameHeight: 32, endFrame: 12 });
         loader.once(`filecomplete-spritesheet-${resource.name}`, () => resolve(resource.name));
-    
+
         loader.start(); // It's only automatically started during the Scene preload.
     });
-}
+};
diff --git a/front/src/Phaser/Components/ChatModeIcon.ts b/front/src/Phaser/Components/ChatModeIcon.ts
index 69449a1d..cba5a447 100644
--- a/front/src/Phaser/Components/ChatModeIcon.ts
+++ b/front/src/Phaser/Components/ChatModeIcon.ts
@@ -2,7 +2,7 @@ import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
 
 export class ChatModeIcon extends Phaser.GameObjects.Sprite {
     constructor(scene: Phaser.Scene, x: number, y: number) {
-        super(scene, x, y, 'layout_modes', 3);
+        super(scene, x, y, "layout_modes", 3);
         scene.add.existing(this);
         this.setScrollFactor(0, 0);
         this.setOrigin(0, 1);
@@ -10,4 +10,4 @@ export class ChatModeIcon extends Phaser.GameObjects.Sprite {
         this.setVisible(false);
         this.setDepth(DEPTH_INGAME_TEXT_INDEX);
     }
-}
\ No newline at end of file
+}
diff --git a/front/src/Phaser/Components/ClickButton.ts b/front/src/Phaser/Components/ClickButton.ts
index 204e9542..65aaadbe 100644
--- a/front/src/Phaser/Components/ClickButton.ts
+++ b/front/src/Phaser/Components/ClickButton.ts
@@ -1,11 +1,8 @@
-
-export class ClickButton extends Phaser.GameObjects.Image{
-    
+export class ClickButton extends Phaser.GameObjects.Image {
     constructor(scene: Phaser.Scene, x: number, y: number, textureName: string, callback: Function) {
         super(scene, x, y, textureName);
         this.scene.add.existing(this);
         this.setInteractive();
         this.on("pointerup", callback);
     }
-    
-}
\ No newline at end of file
+}
diff --git a/front/src/Phaser/Components/PresentationModeIcon.ts b/front/src/Phaser/Components/PresentationModeIcon.ts
index 09c8beb5..5f7c8d2f 100644
--- a/front/src/Phaser/Components/PresentationModeIcon.ts
+++ b/front/src/Phaser/Components/PresentationModeIcon.ts
@@ -1,8 +1,8 @@
-import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes";
+import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
 
 export class PresentationModeIcon extends Phaser.GameObjects.Sprite {
     constructor(scene: Phaser.Scene, x: number, y: number) {
-        super(scene, x, y, 'layout_modes', 0);
+        super(scene, x, y, "layout_modes", 0);
         scene.add.existing(this);
         this.setScrollFactor(0, 0);
         this.setOrigin(0, 1);
@@ -10,4 +10,4 @@ export class PresentationModeIcon extends Phaser.GameObjects.Sprite {
         this.setVisible(false);
         this.setDepth(DEPTH_INGAME_TEXT_INDEX);
     }
-}
\ No newline at end of file
+}
diff --git a/front/src/Phaser/Components/RadialMenu.ts b/front/src/Phaser/Components/RadialMenu.ts
index 1094f73a..c82bc4bf 100644
--- a/front/src/Phaser/Components/RadialMenu.ts
+++ b/front/src/Phaser/Components/RadialMenu.ts
@@ -1,20 +1,20 @@
 import Sprite = Phaser.GameObjects.Sprite;
-import {DEPTH_UI_INDEX} from "../Game/DepthIndexes";
-import {waScaleManager} from "../Services/WaScaleManager";
+import { DEPTH_UI_INDEX } from "../Game/DepthIndexes";
+import { waScaleManager } from "../Services/WaScaleManager";
 
 export interface RadialMenuItem {
-    image: string,
-    name: string,
+    image: string;
+    name: string;
 }
 
-export const RadialMenuClickEvent = 'radialClick';
+export const RadialMenuClickEvent = "radialClick";
 
 export class RadialMenu extends Phaser.GameObjects.Container {
     private resizeCallback: OmitThisParameter<() => void>;
-    
+
     constructor(scene: Phaser.Scene, x: number, y: number, private items: RadialMenuItem[]) {
         super(scene, x, y);
-        this.setDepth(DEPTH_UI_INDEX)
+        this.setDepth(DEPTH_UI_INDEX);
         this.scene.add.existing(this);
         this.initItems();
 
@@ -22,45 +22,45 @@ export class RadialMenu extends Phaser.GameObjects.Container {
         this.resizeCallback = this.resize.bind(this);
         this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
     }
-    
+
     private initItems() {
         const itemsNumber = this.items.length;
         const menuRadius = 70 + (waScaleManager.uiScalingFactor - 1) * 20;
-        this.items.forEach((item, index) => this.createRadialElement(item, index, itemsNumber, menuRadius))
+        this.items.forEach((item, index) => this.createRadialElement(item, index, itemsNumber, menuRadius));
     }
-    
+
     private createRadialElement(item: RadialMenuItem, index: number, itemsNumber: number, menuRadius: number) {
-        const image = new Sprite(this.scene, 0,  menuRadius, item.image);
+        const image = new Sprite(this.scene, 0, menuRadius, item.image);
         this.add(image);
         this.scene.sys.updateList.add(image);
         const scalingFactor = waScaleManager.uiScalingFactor * 0.075;
-        image.setScale(scalingFactor)
+        image.setScale(scalingFactor);
         image.setInteractive({
             useHandCursor: true,
         });
-        image.on('pointerdown', () => this.emit(RadialMenuClickEvent, item));
-        image.on('pointerover', () => {
+        image.on("pointerdown", () => this.emit(RadialMenuClickEvent, item));
+        image.on("pointerover", () => {
             this.scene.tweens.add({
                 targets: image,
                 props: {
                     scale: 2 * scalingFactor,
                 },
                 duration: 500,
-                ease: 'Power3',
-            })
+                ease: "Power3",
+            });
         });
-        image.on('pointerout', () => {
+        image.on("pointerout", () => {
             this.scene.tweens.add({
                 targets: image,
                 props: {
                     scale: scalingFactor,
                 },
                 duration: 500,
-                ease: 'Power3',
-            })
+                ease: "Power3",
+            });
         });
-        const angle = 2 * Math.PI * index / itemsNumber;
-        Phaser.Actions.RotateAroundDistance([image], {x: 0, y: 0}, angle, menuRadius);
+        const angle = (2 * Math.PI * index) / itemsNumber;
+        Phaser.Actions.RotateAroundDistance([image], { x: 0, y: 0 }, angle, menuRadius);
     }
 
     private resize() {
@@ -71,4 +71,4 @@ export class RadialMenu extends Phaser.GameObjects.Container {
         this.scene.scale.removeListener(Phaser.Scale.Events.RESIZE, this.resizeCallback);
         super.destroy();
     }
-}
\ No newline at end of file
+}
diff --git a/front/src/Phaser/Components/SoundMeter.ts b/front/src/Phaser/Components/SoundMeter.ts
index 53802d31..4e7f4e8b 100644
--- a/front/src/Phaser/Components/SoundMeter.ts
+++ b/front/src/Phaser/Components/SoundMeter.ts
@@ -1,4 +1,4 @@
-import type {IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode} from 'standardized-audio-context';
+import type { IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "standardized-audio-context";
 
 /**
  * Class to measure the sound volume of a media stream
@@ -7,10 +7,10 @@ export class SoundMeter {
     private instant: number;
     private clip: number;
     //private script: ScriptProcessorNode;
-    private analyser: IAnalyserNode<IAudioContext>|undefined;
-    private dataArray: Uint8Array|undefined;
-    private context: IAudioContext|undefined;
-    private source: IMediaStreamAudioSourceNode<IAudioContext>|undefined;
+    private analyser: IAnalyserNode<IAudioContext> | undefined;
+    private dataArray: Uint8Array | undefined;
+    private context: IAudioContext | undefined;
+    private source: IMediaStreamAudioSourceNode<IAudioContext> | undefined;
 
     constructor() {
         this.instant = 0.0;
@@ -27,8 +27,7 @@ export class SoundMeter {
         this.dataArray = new Uint8Array(bufferLength);
     }
 
-    public connectToSource(stream: MediaStream, context: IAudioContext): void
-    {
+    public connectToSource(stream: MediaStream, context: IAudioContext): void {
         if (this.source !== undefined) {
             this.stop();
         }
@@ -42,8 +41,6 @@ export class SoundMeter {
         //analyser.connect(distortion);
         //distortion.connect(this.context.destination);
         //this.analyser.connect(this.context.destination);
-
-
     }
 
     public getVolume(): number {
@@ -52,16 +49,15 @@ export class SoundMeter {
         }
         this.analyser.getByteFrequencyData(this.dataArray);
 
-
         const input = this.dataArray;
         let i;
         let sum = 0.0;
         //let clipcount = 0;
         for (i = 0; i < input.length; ++i) {
             sum += input[i] * input[i];
-        //    if (Math.abs(input[i]) > 0.99) {
-        //        clipcount += 1;
-        //    }
+            //    if (Math.abs(input[i]) > 0.99) {
+            //        clipcount += 1;
+            //    }
         }
         this.instant = Math.sqrt(sum / input.length);
         //this.slow = 0.95 * that.slow + 0.05 * that.instant;
@@ -84,6 +80,4 @@ export class SoundMeter {
         this.dataArray = undefined;
         this.source = undefined;
     }
-
 }
-
diff --git a/front/src/Phaser/Components/TextField.ts b/front/src/Phaser/Components/TextField.ts
index 4eb6f41b..29f32497 100644
--- a/front/src/Phaser/Components/TextField.ts
+++ b/front/src/Phaser/Components/TextField.ts
@@ -1,10 +1,9 @@
-
 export class TextField extends Phaser.GameObjects.BitmapText {
     constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[], center: boolean = true) {
-        super(scene, x, y, 'main_font', text, 8);
+        super(scene, x, y, "main_font", text, 8);
         this.scene.add.existing(this);
         if (center) {
-            this.setOrigin(0.5).setCenterAlign()
+            this.setOrigin(0.5).setCenterAlign();
         }
     }
 }
diff --git a/front/src/Phaser/Entity/CustomizedCharacter.ts b/front/src/Phaser/Entity/CustomizedCharacter.ts
index 3a7f1597..79ac8ebc 100644
--- a/front/src/Phaser/Entity/CustomizedCharacter.ts
+++ b/front/src/Phaser/Entity/CustomizedCharacter.ts
@@ -1,5 +1,5 @@
 import Container = Phaser.GameObjects.Container;
-import type {Scene} from "phaser";
+import type { Scene } from "phaser";
 import Sprite = Phaser.GameObjects.Sprite;
 
 /**
diff --git a/front/src/Phaser/Entity/PlayerTextures.ts b/front/src/Phaser/Entity/PlayerTextures.ts
index d0542d6a..d4376c66 100644
--- a/front/src/Phaser/Entity/PlayerTextures.ts
+++ b/front/src/Phaser/Entity/PlayerTextures.ts
@@ -1,333 +1,439 @@
 //The list of all the player textures, both the default models and the partial textures used for customization
 
 export interface BodyResourceDescriptionListInterface {
-    [key: string]: BodyResourceDescriptionInterface
+    [key: string]: BodyResourceDescriptionInterface;
 }
 
 export interface BodyResourceDescriptionInterface {
-    name: string,
-    img: string,
-    level?: number
+    name: string;
+    img: string;
+    level?: number;
 }
 
 export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {
-    "male1": {name: "male1", img: "resources/characters/pipoya/Male 01-1.png"},
-    "male2": {name: "male2", img: "resources/characters/pipoya/Male 02-2.png"},
-    "male3": {name: "male3", img: "resources/characters/pipoya/Male 03-4.png"},
-    "male4": {name: "male4", img: "resources/characters/pipoya/Male 09-1.png"},
-    "male5": {name: "male5", img: "resources/characters/pipoya/Male 10-3.png"},
-    "male6": {name: "male6", img: "resources/characters/pipoya/Male 17-2.png"},
-    "male7": {name: "male7", img: "resources/characters/pipoya/Male 18-1.png"},
-    "male8": {name: "male8", img: "resources/characters/pipoya/Male 16-4.png"},
-    "male9": {name: "male9", img: "resources/characters/pipoya/Male 07-2.png"},
-    "male10": {name: "male10", img: "resources/characters/pipoya/Male 05-3.png"},
-    "male11": {name: "male11", img: "resources/characters/pipoya/Teacher male 02.png"},
-    "male12": {name: "male12", img: "resources/characters/pipoya/su4 Student male 12.png"},
+    male1: { name: "male1", img: "resources/characters/pipoya/Male 01-1.png" },
+    male2: { name: "male2", img: "resources/characters/pipoya/Male 02-2.png" },
+    male3: { name: "male3", img: "resources/characters/pipoya/Male 03-4.png" },
+    male4: { name: "male4", img: "resources/characters/pipoya/Male 09-1.png" },
+    male5: { name: "male5", img: "resources/characters/pipoya/Male 10-3.png" },
+    male6: { name: "male6", img: "resources/characters/pipoya/Male 17-2.png" },
+    male7: { name: "male7", img: "resources/characters/pipoya/Male 18-1.png" },
+    male8: { name: "male8", img: "resources/characters/pipoya/Male 16-4.png" },
+    male9: { name: "male9", img: "resources/characters/pipoya/Male 07-2.png" },
+    male10: { name: "male10", img: "resources/characters/pipoya/Male 05-3.png" },
+    male11: { name: "male11", img: "resources/characters/pipoya/Teacher male 02.png" },
+    male12: { name: "male12", img: "resources/characters/pipoya/su4 Student male 12.png" },
 
-    "Female1": {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png"},
-    "Female2": {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png"},
-    "Female3": {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png"},
-    "Female4": {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png"},
-    "Female5": {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png"},
-    "Female6": {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png"},
-    "Female7": {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png"},
-    "Female8": {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"},
-    "Female9": {name: "Female9", img: "resources/characters/pipoya/Female 07-2.png"},
-    "Female10": {name: "Female10", img: "resources/characters/pipoya/Female 05-3.png"},
-    "Female11": {name: "Female11", img: "resources/characters/pipoya/Teacher fmale 02.png"},
-    "Female12": {name: "Female12", img: "resources/characters/pipoya/su4 Student fmale 12.png"},
+    Female1: { name: "Female1", img: "resources/characters/pipoya/Female 01-1.png" },
+    Female2: { name: "Female2", img: "resources/characters/pipoya/Female 02-2.png" },
+    Female3: { name: "Female3", img: "resources/characters/pipoya/Female 03-4.png" },
+    Female4: { name: "Female4", img: "resources/characters/pipoya/Female 09-1.png" },
+    Female5: { name: "Female5", img: "resources/characters/pipoya/Female 10-3.png" },
+    Female6: { name: "Female6", img: "resources/characters/pipoya/Female 17-2.png" },
+    Female7: { name: "Female7", img: "resources/characters/pipoya/Female 18-1.png" },
+    Female8: { name: "Female8", img: "resources/characters/pipoya/Female 16-4.png" },
+    Female9: { name: "Female9", img: "resources/characters/pipoya/Female 07-2.png" },
+    Female10: { name: "Female10", img: "resources/characters/pipoya/Female 05-3.png" },
+    Female11: { name: "Female11", img: "resources/characters/pipoya/Teacher fmale 02.png" },
+    Female12: { name: "Female12", img: "resources/characters/pipoya/su4 Student fmale 12.png" },
 };
 
 export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = {
-    "color_1": {name: "color_1", img: "resources/customisation/character_color/character_color0.png"},
-    "color_2": {name: "color_2", img: "resources/customisation/character_color/character_color1.png"},
-    "color_3": {name: "color_3", img: "resources/customisation/character_color/character_color2.png"},
-    "color_4": {name: "color_4", img: "resources/customisation/character_color/character_color3.png"},
-    "color_5": {name: "color_5", img: "resources/customisation/character_color/character_color4.png"},
-    "color_6": {name: "color_6", img: "resources/customisation/character_color/character_color5.png"},
-    "color_7": {name: "color_7", img: "resources/customisation/character_color/character_color6.png"},
-    "color_8": {name: "color_8", img: "resources/customisation/character_color/character_color7.png"},
-    "color_9": {name: "color_9", img: "resources/customisation/character_color/character_color8.png"},
-    "color_10": {name: "color_10", img: "resources/customisation/character_color/character_color9.png"},
-    "color_11": {name: "color_11", img: "resources/customisation/character_color/character_color10.png"},
-    "color_12": {name: "color_12", img: "resources/customisation/character_color/character_color11.png"},
-    "color_13": {name: "color_13", img: "resources/customisation/character_color/character_color12.png"},
-    "color_14": {name: "color_14", img: "resources/customisation/character_color/character_color13.png"},
-    "color_15": {name: "color_15", img: "resources/customisation/character_color/character_color14.png"},
-    "color_16": {name: "color_16", img: "resources/customisation/character_color/character_color15.png"},
-    "color_17": {name: "color_17", img: "resources/customisation/character_color/character_color16.png"},
-    "color_18": {name: "color_18", img: "resources/customisation/character_color/character_color17.png"},
-    "color_19": {name: "color_19", img: "resources/customisation/character_color/character_color18.png"},
-    "color_20": {name: "color_20", img: "resources/customisation/character_color/character_color19.png"},
-    "color_21": {name: "color_21", img: "resources/customisation/character_color/character_color20.png"},
-    "color_22": {name: "color_22", img: "resources/customisation/character_color/character_color21.png"},
-    "color_23": {name: "color_23", img: "resources/customisation/character_color/character_color22.png"},
-    "color_24": {name: "color_24", img: "resources/customisation/character_color/character_color23.png"},
-    "color_25": {name: "color_25", img: "resources/customisation/character_color/character_color24.png"},
-    "color_26": {name: "color_26", img: "resources/customisation/character_color/character_color25.png"},
-    "color_27": {name: "color_27", img: "resources/customisation/character_color/character_color26.png"},
-    "color_28": {name: "color_28", img: "resources/customisation/character_color/character_color27.png"},
-    "color_29": {name: "color_29", img: "resources/customisation/character_color/character_color28.png"},
-    "color_30": {name: "color_30", img: "resources/customisation/character_color/character_color29.png"},
-    "color_31": {name: "color_31", img: "resources/customisation/character_color/character_color30.png"},
-    "color_32": {name: "color_32", img: "resources/customisation/character_color/character_color31.png"},
-    "color_33": {name: "color_33", img: "resources/customisation/character_color/character_color32.png"}
+    color_1: { name: "color_1", img: "resources/customisation/character_color/character_color0.png" },
+    color_2: { name: "color_2", img: "resources/customisation/character_color/character_color1.png" },
+    color_3: { name: "color_3", img: "resources/customisation/character_color/character_color2.png" },
+    color_4: { name: "color_4", img: "resources/customisation/character_color/character_color3.png" },
+    color_5: { name: "color_5", img: "resources/customisation/character_color/character_color4.png" },
+    color_6: { name: "color_6", img: "resources/customisation/character_color/character_color5.png" },
+    color_7: { name: "color_7", img: "resources/customisation/character_color/character_color6.png" },
+    color_8: { name: "color_8", img: "resources/customisation/character_color/character_color7.png" },
+    color_9: { name: "color_9", img: "resources/customisation/character_color/character_color8.png" },
+    color_10: { name: "color_10", img: "resources/customisation/character_color/character_color9.png" },
+    color_11: { name: "color_11", img: "resources/customisation/character_color/character_color10.png" },
+    color_12: { name: "color_12", img: "resources/customisation/character_color/character_color11.png" },
+    color_13: { name: "color_13", img: "resources/customisation/character_color/character_color12.png" },
+    color_14: { name: "color_14", img: "resources/customisation/character_color/character_color13.png" },
+    color_15: { name: "color_15", img: "resources/customisation/character_color/character_color14.png" },
+    color_16: { name: "color_16", img: "resources/customisation/character_color/character_color15.png" },
+    color_17: { name: "color_17", img: "resources/customisation/character_color/character_color16.png" },
+    color_18: { name: "color_18", img: "resources/customisation/character_color/character_color17.png" },
+    color_19: { name: "color_19", img: "resources/customisation/character_color/character_color18.png" },
+    color_20: { name: "color_20", img: "resources/customisation/character_color/character_color19.png" },
+    color_21: { name: "color_21", img: "resources/customisation/character_color/character_color20.png" },
+    color_22: { name: "color_22", img: "resources/customisation/character_color/character_color21.png" },
+    color_23: { name: "color_23", img: "resources/customisation/character_color/character_color22.png" },
+    color_24: { name: "color_24", img: "resources/customisation/character_color/character_color23.png" },
+    color_25: { name: "color_25", img: "resources/customisation/character_color/character_color24.png" },
+    color_26: { name: "color_26", img: "resources/customisation/character_color/character_color25.png" },
+    color_27: { name: "color_27", img: "resources/customisation/character_color/character_color26.png" },
+    color_28: { name: "color_28", img: "resources/customisation/character_color/character_color27.png" },
+    color_29: { name: "color_29", img: "resources/customisation/character_color/character_color28.png" },
+    color_30: { name: "color_30", img: "resources/customisation/character_color/character_color29.png" },
+    color_31: { name: "color_31", img: "resources/customisation/character_color/character_color30.png" },
+    color_32: { name: "color_32", img: "resources/customisation/character_color/character_color31.png" },
+    color_33: { name: "color_33", img: "resources/customisation/character_color/character_color32.png" },
 };
 
 export const EYES_RESOURCES: BodyResourceDescriptionListInterface = {
-    "eyes_1": {name: "eyes_1", img: "resources/customisation/character_eyes/character_eyes1.png"},
-    "eyes_2": {name: "eyes_2", img: "resources/customisation/character_eyes/character_eyes2.png"},
-    "eyes_3": {name: "eyes_3", img: "resources/customisation/character_eyes/character_eyes3.png"},
-    "eyes_4": {name: "eyes_4", img: "resources/customisation/character_eyes/character_eyes4.png"},
-    "eyes_5": {name: "eyes_5", img: "resources/customisation/character_eyes/character_eyes5.png"},
-    "eyes_6": {name: "eyes_6", img: "resources/customisation/character_eyes/character_eyes6.png"},
-    "eyes_7": {name: "eyes_7", img: "resources/customisation/character_eyes/character_eyes7.png"},
-    "eyes_8": {name: "eyes_8", img: "resources/customisation/character_eyes/character_eyes8.png"},
-    "eyes_9": {name: "eyes_9", img: "resources/customisation/character_eyes/character_eyes9.png"},
-    "eyes_10": {name: "eyes_10", img: "resources/customisation/character_eyes/character_eyes10.png"},
-    "eyes_11": {name: "eyes_11", img: "resources/customisation/character_eyes/character_eyes11.png"},
-    "eyes_12": {name: "eyes_12", img: "resources/customisation/character_eyes/character_eyes12.png"},
-    "eyes_13": {name: "eyes_13", img: "resources/customisation/character_eyes/character_eyes13.png"},
-    "eyes_14": {name: "eyes_14", img: "resources/customisation/character_eyes/character_eyes14.png"},
-    "eyes_15": {name: "eyes_15", img: "resources/customisation/character_eyes/character_eyes15.png"},
-    "eyes_16": {name: "eyes_16", img: "resources/customisation/character_eyes/character_eyes16.png"},
-    "eyes_17": {name: "eyes_17", img: "resources/customisation/character_eyes/character_eyes17.png"},
-    "eyes_18": {name: "eyes_18", img: "resources/customisation/character_eyes/character_eyes18.png"},
-    "eyes_19": {name: "eyes_19", img: "resources/customisation/character_eyes/character_eyes19.png"},
-    "eyes_20": {name: "eyes_20", img: "resources/customisation/character_eyes/character_eyes20.png"},
-    "eyes_21": {name: "eyes_21", img: "resources/customisation/character_eyes/character_eyes21.png"},
-    "eyes_22": {name: "eyes_22", img: "resources/customisation/character_eyes/character_eyes22.png"},
-    "eyes_23": {name: "eyes_23", img: "resources/customisation/character_eyes/character_eyes23.png"},
-    "eyes_24": {name: "eyes_24", img: "resources/customisation/character_eyes/character_eyes24.png"},
-    "eyes_25": {name: "eyes_25", img: "resources/customisation/character_eyes/character_eyes25.png"},
-    "eyes_26": {name: "eyes_26", img: "resources/customisation/character_eyes/character_eyes26.png"},
-    "eyes_27": {name: "eyes_27", img: "resources/customisation/character_eyes/character_eyes27.png"},
-    "eyes_28": {name: "eyes_28", img: "resources/customisation/character_eyes/character_eyes28.png"},
-    "eyes_29": {name: "eyes_29", img: "resources/customisation/character_eyes/character_eyes29.png"},
-    "eyes_30": {name: "eyes_30", img: "resources/customisation/character_eyes/character_eyes30.png"}
-
+    eyes_1: { name: "eyes_1", img: "resources/customisation/character_eyes/character_eyes1.png" },
+    eyes_2: { name: "eyes_2", img: "resources/customisation/character_eyes/character_eyes2.png" },
+    eyes_3: { name: "eyes_3", img: "resources/customisation/character_eyes/character_eyes3.png" },
+    eyes_4: { name: "eyes_4", img: "resources/customisation/character_eyes/character_eyes4.png" },
+    eyes_5: { name: "eyes_5", img: "resources/customisation/character_eyes/character_eyes5.png" },
+    eyes_6: { name: "eyes_6", img: "resources/customisation/character_eyes/character_eyes6.png" },
+    eyes_7: { name: "eyes_7", img: "resources/customisation/character_eyes/character_eyes7.png" },
+    eyes_8: { name: "eyes_8", img: "resources/customisation/character_eyes/character_eyes8.png" },
+    eyes_9: { name: "eyes_9", img: "resources/customisation/character_eyes/character_eyes9.png" },
+    eyes_10: { name: "eyes_10", img: "resources/customisation/character_eyes/character_eyes10.png" },
+    eyes_11: { name: "eyes_11", img: "resources/customisation/character_eyes/character_eyes11.png" },
+    eyes_12: { name: "eyes_12", img: "resources/customisation/character_eyes/character_eyes12.png" },
+    eyes_13: { name: "eyes_13", img: "resources/customisation/character_eyes/character_eyes13.png" },
+    eyes_14: { name: "eyes_14", img: "resources/customisation/character_eyes/character_eyes14.png" },
+    eyes_15: { name: "eyes_15", img: "resources/customisation/character_eyes/character_eyes15.png" },
+    eyes_16: { name: "eyes_16", img: "resources/customisation/character_eyes/character_eyes16.png" },
+    eyes_17: { name: "eyes_17", img: "resources/customisation/character_eyes/character_eyes17.png" },
+    eyes_18: { name: "eyes_18", img: "resources/customisation/character_eyes/character_eyes18.png" },
+    eyes_19: { name: "eyes_19", img: "resources/customisation/character_eyes/character_eyes19.png" },
+    eyes_20: { name: "eyes_20", img: "resources/customisation/character_eyes/character_eyes20.png" },
+    eyes_21: { name: "eyes_21", img: "resources/customisation/character_eyes/character_eyes21.png" },
+    eyes_22: { name: "eyes_22", img: "resources/customisation/character_eyes/character_eyes22.png" },
+    eyes_23: { name: "eyes_23", img: "resources/customisation/character_eyes/character_eyes23.png" },
+    eyes_24: { name: "eyes_24", img: "resources/customisation/character_eyes/character_eyes24.png" },
+    eyes_25: { name: "eyes_25", img: "resources/customisation/character_eyes/character_eyes25.png" },
+    eyes_26: { name: "eyes_26", img: "resources/customisation/character_eyes/character_eyes26.png" },
+    eyes_27: { name: "eyes_27", img: "resources/customisation/character_eyes/character_eyes27.png" },
+    eyes_28: { name: "eyes_28", img: "resources/customisation/character_eyes/character_eyes28.png" },
+    eyes_29: { name: "eyes_29", img: "resources/customisation/character_eyes/character_eyes29.png" },
+    eyes_30: { name: "eyes_30", img: "resources/customisation/character_eyes/character_eyes30.png" },
 };
 
 export const HAIR_RESOURCES: BodyResourceDescriptionListInterface = {
-    "hair_1": {name:"hair_1", img: "resources/customisation/character_hairs/character_hairs0.png"},
-    "hair_2": {name:"hair_2", img: "resources/customisation/character_hairs/character_hairs1.png"},
-    "hair_3": {name:"hair_3", img: "resources/customisation/character_hairs/character_hairs2.png"},
-    "hair_4": {name:"hair_4", img: "resources/customisation/character_hairs/character_hairs3.png"},
-    "hair_5": {name:"hair_5", img: "resources/customisation/character_hairs/character_hairs4.png"},
-    "hair_6": {name:"hair_6", img: "resources/customisation/character_hairs/character_hairs5.png"},
-    "hair_7": {name:"hair_7", img: "resources/customisation/character_hairs/character_hairs6.png"},
-    "hair_8": {name:"hair_8", img: "resources/customisation/character_hairs/character_hairs7.png"},
-    "hair_9": {name:"hair_9", img: "resources/customisation/character_hairs/character_hairs8.png"},
-    "hair_10": {name:"hair_10",img: "resources/customisation/character_hairs/character_hairs9.png"},
-    "hair_11": {name:"hair_11",img: "resources/customisation/character_hairs/character_hairs10.png"},
-    "hair_12": {name:"hair_12",img: "resources/customisation/character_hairs/character_hairs11.png"},
-    "hair_13": {name:"hair_13",img: "resources/customisation/character_hairs/character_hairs12.png"},
-    "hair_14": {name:"hair_14",img: "resources/customisation/character_hairs/character_hairs13.png"},
-    "hair_15": {name:"hair_15",img: "resources/customisation/character_hairs/character_hairs14.png"},
-    "hair_16": {name:"hair_16",img: "resources/customisation/character_hairs/character_hairs15.png"},
-    "hair_17": {name:"hair_17",img: "resources/customisation/character_hairs/character_hairs16.png"},
-    "hair_18": {name:"hair_18",img: "resources/customisation/character_hairs/character_hairs17.png"},
-    "hair_19": {name:"hair_19",img: "resources/customisation/character_hairs/character_hairs18.png"},
-    "hair_20": {name:"hair_20",img: "resources/customisation/character_hairs/character_hairs19.png"},
-    "hair_21": {name:"hair_21",img: "resources/customisation/character_hairs/character_hairs20.png"},
-    "hair_22": {name:"hair_22",img: "resources/customisation/character_hairs/character_hairs21.png"},
-    "hair_23": {name:"hair_23",img: "resources/customisation/character_hairs/character_hairs22.png"},
-    "hair_24": {name:"hair_24",img: "resources/customisation/character_hairs/character_hairs23.png"},
-    "hair_25": {name:"hair_25",img: "resources/customisation/character_hairs/character_hairs24.png"},
-    "hair_26": {name:"hair_26",img: "resources/customisation/character_hairs/character_hairs25.png"},
-    "hair_27": {name:"hair_27",img: "resources/customisation/character_hairs/character_hairs26.png"},
-    "hair_28": {name:"hair_28",img: "resources/customisation/character_hairs/character_hairs27.png"},
-    "hair_29": {name:"hair_29",img: "resources/customisation/character_hairs/character_hairs28.png"},
-    "hair_30": {name:"hair_30",img: "resources/customisation/character_hairs/character_hairs29.png"},
-    "hair_31": {name:"hair_31",img: "resources/customisation/character_hairs/character_hairs30.png"},
-    "hair_32": {name:"hair_32",img: "resources/customisation/character_hairs/character_hairs31.png"},
-    "hair_33": {name:"hair_33",img: "resources/customisation/character_hairs/character_hairs32.png"},
-    "hair_34": {name:"hair_34",img: "resources/customisation/character_hairs/character_hairs33.png"},
-    "hair_35": {name:"hair_35",img: "resources/customisation/character_hairs/character_hairs34.png"},
-    "hair_36": {name:"hair_36",img: "resources/customisation/character_hairs/character_hairs35.png"},
-    "hair_37": {name:"hair_37",img: "resources/customisation/character_hairs/character_hairs36.png"},
-    "hair_38": {name:"hair_38",img: "resources/customisation/character_hairs/character_hairs37.png"},
-    "hair_39": {name:"hair_39",img: "resources/customisation/character_hairs/character_hairs38.png"},
-    "hair_40": {name:"hair_40",img: "resources/customisation/character_hairs/character_hairs39.png"},
-    "hair_41": {name:"hair_41",img: "resources/customisation/character_hairs/character_hairs40.png"},
-    "hair_42": {name:"hair_42",img: "resources/customisation/character_hairs/character_hairs41.png"},
-    "hair_43": {name:"hair_43",img: "resources/customisation/character_hairs/character_hairs42.png"},
-    "hair_44": {name:"hair_44",img: "resources/customisation/character_hairs/character_hairs43.png"},
-    "hair_45": {name:"hair_45",img: "resources/customisation/character_hairs/character_hairs44.png"},
-    "hair_46": {name:"hair_46",img: "resources/customisation/character_hairs/character_hairs45.png"},
-    "hair_47": {name:"hair_47",img: "resources/customisation/character_hairs/character_hairs46.png"},
-    "hair_48": {name:"hair_48",img: "resources/customisation/character_hairs/character_hairs47.png"},
-    "hair_49": {name:"hair_49",img: "resources/customisation/character_hairs/character_hairs48.png"},
-    "hair_50": {name:"hair_50",img: "resources/customisation/character_hairs/character_hairs49.png"},
-    "hair_51": {name:"hair_51",img: "resources/customisation/character_hairs/character_hairs50.png"},
-    "hair_52": {name:"hair_52",img: "resources/customisation/character_hairs/character_hairs51.png"},
-    "hair_53": {name:"hair_53",img: "resources/customisation/character_hairs/character_hairs52.png"},
-    "hair_54": {name:"hair_54",img: "resources/customisation/character_hairs/character_hairs53.png"},
-    "hair_55": {name:"hair_55",img: "resources/customisation/character_hairs/character_hairs54.png"},
-    "hair_56": {name:"hair_56",img: "resources/customisation/character_hairs/character_hairs55.png"},
-    "hair_57": {name:"hair_57",img: "resources/customisation/character_hairs/character_hairs56.png"},
-    "hair_58": {name:"hair_58",img: "resources/customisation/character_hairs/character_hairs57.png"},
-    "hair_59": {name:"hair_59",img: "resources/customisation/character_hairs/character_hairs58.png"},
-    "hair_60": {name:"hair_60",img: "resources/customisation/character_hairs/character_hairs59.png"},
-    "hair_61": {name:"hair_61",img: "resources/customisation/character_hairs/character_hairs60.png"},
-    "hair_62": {name:"hair_62",img: "resources/customisation/character_hairs/character_hairs61.png"},
-    "hair_63": {name:"hair_63",img: "resources/customisation/character_hairs/character_hairs62.png"},
-    "hair_64": {name:"hair_64",img: "resources/customisation/character_hairs/character_hairs63.png"},
-    "hair_65": {name:"hair_65",img: "resources/customisation/character_hairs/character_hairs64.png"},
-    "hair_66": {name:"hair_66",img: "resources/customisation/character_hairs/character_hairs65.png"},
-    "hair_67": {name:"hair_67",img: "resources/customisation/character_hairs/character_hairs66.png"},
-    "hair_68": {name:"hair_68",img: "resources/customisation/character_hairs/character_hairs67.png"},
-    "hair_69": {name:"hair_69",img: "resources/customisation/character_hairs/character_hairs68.png"},
-    "hair_70": {name:"hair_70",img: "resources/customisation/character_hairs/character_hairs69.png"},
-    "hair_71": {name:"hair_71",img: "resources/customisation/character_hairs/character_hairs70.png"},
-    "hair_72": {name:"hair_72",img: "resources/customisation/character_hairs/character_hairs71.png"},
-    "hair_73": {name:"hair_73",img: "resources/customisation/character_hairs/character_hairs72.png"},
-    "hair_74": {name:"hair_74",img: "resources/customisation/character_hairs/character_hairs73.png"}
+    hair_1: { name: "hair_1", img: "resources/customisation/character_hairs/character_hairs0.png" },
+    hair_2: { name: "hair_2", img: "resources/customisation/character_hairs/character_hairs1.png" },
+    hair_3: { name: "hair_3", img: "resources/customisation/character_hairs/character_hairs2.png" },
+    hair_4: { name: "hair_4", img: "resources/customisation/character_hairs/character_hairs3.png" },
+    hair_5: { name: "hair_5", img: "resources/customisation/character_hairs/character_hairs4.png" },
+    hair_6: { name: "hair_6", img: "resources/customisation/character_hairs/character_hairs5.png" },
+    hair_7: { name: "hair_7", img: "resources/customisation/character_hairs/character_hairs6.png" },
+    hair_8: { name: "hair_8", img: "resources/customisation/character_hairs/character_hairs7.png" },
+    hair_9: { name: "hair_9", img: "resources/customisation/character_hairs/character_hairs8.png" },
+    hair_10: { name: "hair_10", img: "resources/customisation/character_hairs/character_hairs9.png" },
+    hair_11: { name: "hair_11", img: "resources/customisation/character_hairs/character_hairs10.png" },
+    hair_12: { name: "hair_12", img: "resources/customisation/character_hairs/character_hairs11.png" },
+    hair_13: { name: "hair_13", img: "resources/customisation/character_hairs/character_hairs12.png" },
+    hair_14: { name: "hair_14", img: "resources/customisation/character_hairs/character_hairs13.png" },
+    hair_15: { name: "hair_15", img: "resources/customisation/character_hairs/character_hairs14.png" },
+    hair_16: { name: "hair_16", img: "resources/customisation/character_hairs/character_hairs15.png" },
+    hair_17: { name: "hair_17", img: "resources/customisation/character_hairs/character_hairs16.png" },
+    hair_18: { name: "hair_18", img: "resources/customisation/character_hairs/character_hairs17.png" },
+    hair_19: { name: "hair_19", img: "resources/customisation/character_hairs/character_hairs18.png" },
+    hair_20: { name: "hair_20", img: "resources/customisation/character_hairs/character_hairs19.png" },
+    hair_21: { name: "hair_21", img: "resources/customisation/character_hairs/character_hairs20.png" },
+    hair_22: { name: "hair_22", img: "resources/customisation/character_hairs/character_hairs21.png" },
+    hair_23: { name: "hair_23", img: "resources/customisation/character_hairs/character_hairs22.png" },
+    hair_24: { name: "hair_24", img: "resources/customisation/character_hairs/character_hairs23.png" },
+    hair_25: { name: "hair_25", img: "resources/customisation/character_hairs/character_hairs24.png" },
+    hair_26: { name: "hair_26", img: "resources/customisation/character_hairs/character_hairs25.png" },
+    hair_27: { name: "hair_27", img: "resources/customisation/character_hairs/character_hairs26.png" },
+    hair_28: { name: "hair_28", img: "resources/customisation/character_hairs/character_hairs27.png" },
+    hair_29: { name: "hair_29", img: "resources/customisation/character_hairs/character_hairs28.png" },
+    hair_30: { name: "hair_30", img: "resources/customisation/character_hairs/character_hairs29.png" },
+    hair_31: { name: "hair_31", img: "resources/customisation/character_hairs/character_hairs30.png" },
+    hair_32: { name: "hair_32", img: "resources/customisation/character_hairs/character_hairs31.png" },
+    hair_33: { name: "hair_33", img: "resources/customisation/character_hairs/character_hairs32.png" },
+    hair_34: { name: "hair_34", img: "resources/customisation/character_hairs/character_hairs33.png" },
+    hair_35: { name: "hair_35", img: "resources/customisation/character_hairs/character_hairs34.png" },
+    hair_36: { name: "hair_36", img: "resources/customisation/character_hairs/character_hairs35.png" },
+    hair_37: { name: "hair_37", img: "resources/customisation/character_hairs/character_hairs36.png" },
+    hair_38: { name: "hair_38", img: "resources/customisation/character_hairs/character_hairs37.png" },
+    hair_39: { name: "hair_39", img: "resources/customisation/character_hairs/character_hairs38.png" },
+    hair_40: { name: "hair_40", img: "resources/customisation/character_hairs/character_hairs39.png" },
+    hair_41: { name: "hair_41", img: "resources/customisation/character_hairs/character_hairs40.png" },
+    hair_42: { name: "hair_42", img: "resources/customisation/character_hairs/character_hairs41.png" },
+    hair_43: { name: "hair_43", img: "resources/customisation/character_hairs/character_hairs42.png" },
+    hair_44: { name: "hair_44", img: "resources/customisation/character_hairs/character_hairs43.png" },
+    hair_45: { name: "hair_45", img: "resources/customisation/character_hairs/character_hairs44.png" },
+    hair_46: { name: "hair_46", img: "resources/customisation/character_hairs/character_hairs45.png" },
+    hair_47: { name: "hair_47", img: "resources/customisation/character_hairs/character_hairs46.png" },
+    hair_48: { name: "hair_48", img: "resources/customisation/character_hairs/character_hairs47.png" },
+    hair_49: { name: "hair_49", img: "resources/customisation/character_hairs/character_hairs48.png" },
+    hair_50: { name: "hair_50", img: "resources/customisation/character_hairs/character_hairs49.png" },
+    hair_51: { name: "hair_51", img: "resources/customisation/character_hairs/character_hairs50.png" },
+    hair_52: { name: "hair_52", img: "resources/customisation/character_hairs/character_hairs51.png" },
+    hair_53: { name: "hair_53", img: "resources/customisation/character_hairs/character_hairs52.png" },
+    hair_54: { name: "hair_54", img: "resources/customisation/character_hairs/character_hairs53.png" },
+    hair_55: { name: "hair_55", img: "resources/customisation/character_hairs/character_hairs54.png" },
+    hair_56: { name: "hair_56", img: "resources/customisation/character_hairs/character_hairs55.png" },
+    hair_57: { name: "hair_57", img: "resources/customisation/character_hairs/character_hairs56.png" },
+    hair_58: { name: "hair_58", img: "resources/customisation/character_hairs/character_hairs57.png" },
+    hair_59: { name: "hair_59", img: "resources/customisation/character_hairs/character_hairs58.png" },
+    hair_60: { name: "hair_60", img: "resources/customisation/character_hairs/character_hairs59.png" },
+    hair_61: { name: "hair_61", img: "resources/customisation/character_hairs/character_hairs60.png" },
+    hair_62: { name: "hair_62", img: "resources/customisation/character_hairs/character_hairs61.png" },
+    hair_63: { name: "hair_63", img: "resources/customisation/character_hairs/character_hairs62.png" },
+    hair_64: { name: "hair_64", img: "resources/customisation/character_hairs/character_hairs63.png" },
+    hair_65: { name: "hair_65", img: "resources/customisation/character_hairs/character_hairs64.png" },
+    hair_66: { name: "hair_66", img: "resources/customisation/character_hairs/character_hairs65.png" },
+    hair_67: { name: "hair_67", img: "resources/customisation/character_hairs/character_hairs66.png" },
+    hair_68: { name: "hair_68", img: "resources/customisation/character_hairs/character_hairs67.png" },
+    hair_69: { name: "hair_69", img: "resources/customisation/character_hairs/character_hairs68.png" },
+    hair_70: { name: "hair_70", img: "resources/customisation/character_hairs/character_hairs69.png" },
+    hair_71: { name: "hair_71", img: "resources/customisation/character_hairs/character_hairs70.png" },
+    hair_72: { name: "hair_72", img: "resources/customisation/character_hairs/character_hairs71.png" },
+    hair_73: { name: "hair_73", img: "resources/customisation/character_hairs/character_hairs72.png" },
+    hair_74: { name: "hair_74", img: "resources/customisation/character_hairs/character_hairs73.png" },
 };
 
-
 export const CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = {
-    "clothes_1": {name:"clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png"},
-    "clothes_2": {name:"clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png"},
-    "clothes_3": {name:"clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png"},
-    "clothes_4": {name:"clothes_4", img: "resources/customisation/character_clothes/character_clothes3.png"},
-    "clothes_5": {name:"clothes_5", img: "resources/customisation/character_clothes/character_clothes4.png"},
-    "clothes_6": {name:"clothes_6", img: "resources/customisation/character_clothes/character_clothes5.png"},
-    "clothes_7": {name:"clothes_7", img: "resources/customisation/character_clothes/character_clothes6.png"},
-    "clothes_8": {name:"clothes_8", img: "resources/customisation/character_clothes/character_clothes7.png"},
-    "clothes_9": {name:"clothes_9", img: "resources/customisation/character_clothes/character_clothes8.png"},
-    "clothes_10": {name:"clothes_10",img: "resources/customisation/character_clothes/character_clothes9.png"},
-    "clothes_11": {name:"clothes_11",img: "resources/customisation/character_clothes/character_clothes10.png"},
-    "clothes_12": {name:"clothes_12",img: "resources/customisation/character_clothes/character_clothes11.png"},
-    "clothes_13": {name:"clothes_13",img: "resources/customisation/character_clothes/character_clothes12.png"},
-    "clothes_14": {name:"clothes_14",img: "resources/customisation/character_clothes/character_clothes13.png"},
-    "clothes_15": {name:"clothes_15",img: "resources/customisation/character_clothes/character_clothes14.png"},
-    "clothes_16": {name:"clothes_16",img: "resources/customisation/character_clothes/character_clothes15.png"},
-    "clothes_17": {name:"clothes_17",img: "resources/customisation/character_clothes/character_clothes16.png"},
-    "clothes_18": {name:"clothes_18",img: "resources/customisation/character_clothes/character_clothes17.png"},
-    "clothes_19": {name:"clothes_19",img: "resources/customisation/character_clothes/character_clothes18.png"},
-    "clothes_20": {name:"clothes_20",img: "resources/customisation/character_clothes/character_clothes19.png"},
-    "clothes_21": {name:"clothes_21",img: "resources/customisation/character_clothes/character_clothes20.png"},
-    "clothes_22": {name:"clothes_22",img: "resources/customisation/character_clothes/character_clothes21.png"},
-    "clothes_23": {name:"clothes_23",img: "resources/customisation/character_clothes/character_clothes22.png"},
-    "clothes_24": {name:"clothes_24",img: "resources/customisation/character_clothes/character_clothes23.png"},
-    "clothes_25": {name:"clothes_25",img: "resources/customisation/character_clothes/character_clothes24.png"},
-    "clothes_26": {name:"clothes_26",img: "resources/customisation/character_clothes/character_clothes25.png"},
-    "clothes_27": {name:"clothes_27",img: "resources/customisation/character_clothes/character_clothes26.png"},
-    "clothes_28": {name:"clothes_28",img: "resources/customisation/character_clothes/character_clothes27.png"},
-    "clothes_29": {name:"clothes_29",img: "resources/customisation/character_clothes/character_clothes28.png"},
-    "clothes_30": {name:"clothes_30",img: "resources/customisation/character_clothes/character_clothes29.png"},
-    "clothes_31": {name:"clothes_31",img: "resources/customisation/character_clothes/character_clothes30.png"},
-    "clothes_32": {name:"clothes_32",img: "resources/customisation/character_clothes/character_clothes31.png"},
-    "clothes_33": {name:"clothes_33",img: "resources/customisation/character_clothes/character_clothes32.png"},
-    "clothes_34": {name:"clothes_34",img: "resources/customisation/character_clothes/character_clothes33.png"},
-    "clothes_35": {name:"clothes_35",img: "resources/customisation/character_clothes/character_clothes34.png"},
-    "clothes_36": {name:"clothes_36",img: "resources/customisation/character_clothes/character_clothes35.png"},
-    "clothes_37": {name:"clothes_37",img: "resources/customisation/character_clothes/character_clothes36.png"},
-    "clothes_38": {name:"clothes_38",img: "resources/customisation/character_clothes/character_clothes37.png"},
-    "clothes_39": {name:"clothes_39",img: "resources/customisation/character_clothes/character_clothes38.png"},
-    "clothes_40": {name:"clothes_40",img: "resources/customisation/character_clothes/character_clothes39.png"},
-    "clothes_41": {name:"clothes_41",img: "resources/customisation/character_clothes/character_clothes40.png"},
-    "clothes_42": {name:"clothes_42",img: "resources/customisation/character_clothes/character_clothes41.png"},
-    "clothes_43": {name:"clothes_43",img: "resources/customisation/character_clothes/character_clothes42.png"},
-    "clothes_44": {name:"clothes_44",img: "resources/customisation/character_clothes/character_clothes43.png"},
-    "clothes_45": {name:"clothes_45",img: "resources/customisation/character_clothes/character_clothes44.png"},
-    "clothes_46": {name:"clothes_46",img: "resources/customisation/character_clothes/character_clothes45.png"},
-    "clothes_47": {name:"clothes_47",img: "resources/customisation/character_clothes/character_clothes46.png"},
-    "clothes_48": {name:"clothes_48",img: "resources/customisation/character_clothes/character_clothes47.png"},
-    "clothes_49": {name:"clothes_49",img: "resources/customisation/character_clothes/character_clothes48.png"},
-    "clothes_50": {name:"clothes_50",img: "resources/customisation/character_clothes/character_clothes49.png"},
-    "clothes_51": {name:"clothes_51",img: "resources/customisation/character_clothes/character_clothes50.png"},
-    "clothes_52": {name:"clothes_52",img: "resources/customisation/character_clothes/character_clothes51.png"},
-    "clothes_53": {name:"clothes_53",img: "resources/customisation/character_clothes/character_clothes52.png"},
-    "clothes_54": {name:"clothes_54",img: "resources/customisation/character_clothes/character_clothes53.png"},
-    "clothes_55": {name:"clothes_55",img: "resources/customisation/character_clothes/character_clothes54.png"},
-    "clothes_56": {name:"clothes_56",img: "resources/customisation/character_clothes/character_clothes55.png"},
-    "clothes_57": {name:"clothes_57",img: "resources/customisation/character_clothes/character_clothes56.png"},
-    "clothes_58": {name:"clothes_58",img: "resources/customisation/character_clothes/character_clothes57.png"},
-    "clothes_59": {name:"clothes_59",img: "resources/customisation/character_clothes/character_clothes58.png"},
-    "clothes_60": {name:"clothes_60",img: "resources/customisation/character_clothes/character_clothes59.png"},
-    "clothes_61": {name:"clothes_61",img: "resources/customisation/character_clothes/character_clothes60.png"},
-    "clothes_62": {name:"clothes_62",img: "resources/customisation/character_clothes/character_clothes61.png"},
-    "clothes_63": {name:"clothes_63",img: "resources/customisation/character_clothes/character_clothes62.png"},
-    "clothes_64": {name:"clothes_64",img: "resources/customisation/character_clothes/character_clothes63.png"},
-    "clothes_65": {name:"clothes_65",img: "resources/customisation/character_clothes/character_clothes64.png"},
-    "clothes_66": {name:"clothes_66",img: "resources/customisation/character_clothes/character_clothes65.png"},
-    "clothes_67": {name:"clothes_67",img: "resources/customisation/character_clothes/character_clothes66.png"},
-    "clothes_68": {name:"clothes_68",img: "resources/customisation/character_clothes/character_clothes67.png"},
-    "clothes_69": {name:"clothes_69",img: "resources/customisation/character_clothes/character_clothes68.png"},
-    "clothes_70": {name:"clothes_70",img: "resources/customisation/character_clothes/character_clothes69.png"},
-    "clothes_pride_shirt": {name:"clothes_pride_shirt",img: "resources/customisation/character_clothes/pride_shirt.png"},
-    "clothes_black_hoodie": {name:"clothes_black_hoodie",img: "resources/customisation/character_clothes/black_hoodie.png"},
-    "clothes_white_hoodie": {name:"clothes_white_hoodie",img: "resources/customisation/character_clothes/white_hoodie.png"},
-    "clothes_engelbert": {name:"clothes_engelbert",img: "resources/customisation/character_clothes/engelbert.png"}
+    clothes_1: { name: "clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png" },
+    clothes_2: { name: "clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png" },
+    clothes_3: { name: "clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png" },
+    clothes_4: { name: "clothes_4", img: "resources/customisation/character_clothes/character_clothes3.png" },
+    clothes_5: { name: "clothes_5", img: "resources/customisation/character_clothes/character_clothes4.png" },
+    clothes_6: { name: "clothes_6", img: "resources/customisation/character_clothes/character_clothes5.png" },
+    clothes_7: { name: "clothes_7", img: "resources/customisation/character_clothes/character_clothes6.png" },
+    clothes_8: { name: "clothes_8", img: "resources/customisation/character_clothes/character_clothes7.png" },
+    clothes_9: { name: "clothes_9", img: "resources/customisation/character_clothes/character_clothes8.png" },
+    clothes_10: { name: "clothes_10", img: "resources/customisation/character_clothes/character_clothes9.png" },
+    clothes_11: { name: "clothes_11", img: "resources/customisation/character_clothes/character_clothes10.png" },
+    clothes_12: { name: "clothes_12", img: "resources/customisation/character_clothes/character_clothes11.png" },
+    clothes_13: { name: "clothes_13", img: "resources/customisation/character_clothes/character_clothes12.png" },
+    clothes_14: { name: "clothes_14", img: "resources/customisation/character_clothes/character_clothes13.png" },
+    clothes_15: { name: "clothes_15", img: "resources/customisation/character_clothes/character_clothes14.png" },
+    clothes_16: { name: "clothes_16", img: "resources/customisation/character_clothes/character_clothes15.png" },
+    clothes_17: { name: "clothes_17", img: "resources/customisation/character_clothes/character_clothes16.png" },
+    clothes_18: { name: "clothes_18", img: "resources/customisation/character_clothes/character_clothes17.png" },
+    clothes_19: { name: "clothes_19", img: "resources/customisation/character_clothes/character_clothes18.png" },
+    clothes_20: { name: "clothes_20", img: "resources/customisation/character_clothes/character_clothes19.png" },
+    clothes_21: { name: "clothes_21", img: "resources/customisation/character_clothes/character_clothes20.png" },
+    clothes_22: { name: "clothes_22", img: "resources/customisation/character_clothes/character_clothes21.png" },
+    clothes_23: { name: "clothes_23", img: "resources/customisation/character_clothes/character_clothes22.png" },
+    clothes_24: { name: "clothes_24", img: "resources/customisation/character_clothes/character_clothes23.png" },
+    clothes_25: { name: "clothes_25", img: "resources/customisation/character_clothes/character_clothes24.png" },
+    clothes_26: { name: "clothes_26", img: "resources/customisation/character_clothes/character_clothes25.png" },
+    clothes_27: { name: "clothes_27", img: "resources/customisation/character_clothes/character_clothes26.png" },
+    clothes_28: { name: "clothes_28", img: "resources/customisation/character_clothes/character_clothes27.png" },
+    clothes_29: { name: "clothes_29", img: "resources/customisation/character_clothes/character_clothes28.png" },
+    clothes_30: { name: "clothes_30", img: "resources/customisation/character_clothes/character_clothes29.png" },
+    clothes_31: { name: "clothes_31", img: "resources/customisation/character_clothes/character_clothes30.png" },
+    clothes_32: { name: "clothes_32", img: "resources/customisation/character_clothes/character_clothes31.png" },
+    clothes_33: { name: "clothes_33", img: "resources/customisation/character_clothes/character_clothes32.png" },
+    clothes_34: { name: "clothes_34", img: "resources/customisation/character_clothes/character_clothes33.png" },
+    clothes_35: { name: "clothes_35", img: "resources/customisation/character_clothes/character_clothes34.png" },
+    clothes_36: { name: "clothes_36", img: "resources/customisation/character_clothes/character_clothes35.png" },
+    clothes_37: { name: "clothes_37", img: "resources/customisation/character_clothes/character_clothes36.png" },
+    clothes_38: { name: "clothes_38", img: "resources/customisation/character_clothes/character_clothes37.png" },
+    clothes_39: { name: "clothes_39", img: "resources/customisation/character_clothes/character_clothes38.png" },
+    clothes_40: { name: "clothes_40", img: "resources/customisation/character_clothes/character_clothes39.png" },
+    clothes_41: { name: "clothes_41", img: "resources/customisation/character_clothes/character_clothes40.png" },
+    clothes_42: { name: "clothes_42", img: "resources/customisation/character_clothes/character_clothes41.png" },
+    clothes_43: { name: "clothes_43", img: "resources/customisation/character_clothes/character_clothes42.png" },
+    clothes_44: { name: "clothes_44", img: "resources/customisation/character_clothes/character_clothes43.png" },
+    clothes_45: { name: "clothes_45", img: "resources/customisation/character_clothes/character_clothes44.png" },
+    clothes_46: { name: "clothes_46", img: "resources/customisation/character_clothes/character_clothes45.png" },
+    clothes_47: { name: "clothes_47", img: "resources/customisation/character_clothes/character_clothes46.png" },
+    clothes_48: { name: "clothes_48", img: "resources/customisation/character_clothes/character_clothes47.png" },
+    clothes_49: { name: "clothes_49", img: "resources/customisation/character_clothes/character_clothes48.png" },
+    clothes_50: { name: "clothes_50", img: "resources/customisation/character_clothes/character_clothes49.png" },
+    clothes_51: { name: "clothes_51", img: "resources/customisation/character_clothes/character_clothes50.png" },
+    clothes_52: { name: "clothes_52", img: "resources/customisation/character_clothes/character_clothes51.png" },
+    clothes_53: { name: "clothes_53", img: "resources/customisation/character_clothes/character_clothes52.png" },
+    clothes_54: { name: "clothes_54", img: "resources/customisation/character_clothes/character_clothes53.png" },
+    clothes_55: { name: "clothes_55", img: "resources/customisation/character_clothes/character_clothes54.png" },
+    clothes_56: { name: "clothes_56", img: "resources/customisation/character_clothes/character_clothes55.png" },
+    clothes_57: { name: "clothes_57", img: "resources/customisation/character_clothes/character_clothes56.png" },
+    clothes_58: { name: "clothes_58", img: "resources/customisation/character_clothes/character_clothes57.png" },
+    clothes_59: { name: "clothes_59", img: "resources/customisation/character_clothes/character_clothes58.png" },
+    clothes_60: { name: "clothes_60", img: "resources/customisation/character_clothes/character_clothes59.png" },
+    clothes_61: { name: "clothes_61", img: "resources/customisation/character_clothes/character_clothes60.png" },
+    clothes_62: { name: "clothes_62", img: "resources/customisation/character_clothes/character_clothes61.png" },
+    clothes_63: { name: "clothes_63", img: "resources/customisation/character_clothes/character_clothes62.png" },
+    clothes_64: { name: "clothes_64", img: "resources/customisation/character_clothes/character_clothes63.png" },
+    clothes_65: { name: "clothes_65", img: "resources/customisation/character_clothes/character_clothes64.png" },
+    clothes_66: { name: "clothes_66", img: "resources/customisation/character_clothes/character_clothes65.png" },
+    clothes_67: { name: "clothes_67", img: "resources/customisation/character_clothes/character_clothes66.png" },
+    clothes_68: { name: "clothes_68", img: "resources/customisation/character_clothes/character_clothes67.png" },
+    clothes_69: { name: "clothes_69", img: "resources/customisation/character_clothes/character_clothes68.png" },
+    clothes_70: { name: "clothes_70", img: "resources/customisation/character_clothes/character_clothes69.png" },
+    clothes_pride_shirt: {
+        name: "clothes_pride_shirt",
+        img: "resources/customisation/character_clothes/pride_shirt.png",
+    },
+    clothes_black_hoodie: {
+        name: "clothes_black_hoodie",
+        img: "resources/customisation/character_clothes/black_hoodie.png",
+    },
+    clothes_white_hoodie: {
+        name: "clothes_white_hoodie",
+        img: "resources/customisation/character_clothes/white_hoodie.png",
+    },
+    clothes_engelbert: { name: "clothes_engelbert", img: "resources/customisation/character_clothes/engelbert.png" },
 };
 
 export const HATS_RESOURCES: BodyResourceDescriptionListInterface = {
-    "hats_1": {name: "hats_1", img: "resources/customisation/character_hats/character_hats1.png"},
-    "hats_2": {name: "hats_2", img: "resources/customisation/character_hats/character_hats2.png"},
-    "hats_3": {name: "hats_3", img: "resources/customisation/character_hats/character_hats3.png"},
-    "hats_4": {name: "hats_4", img: "resources/customisation/character_hats/character_hats4.png"},
-    "hats_5": {name: "hats_5", img: "resources/customisation/character_hats/character_hats5.png"},
-    "hats_6": {name: "hats_6", img: "resources/customisation/character_hats/character_hats6.png"},
-    "hats_7": {name: "hats_7", img: "resources/customisation/character_hats/character_hats7.png"},
-    "hats_8": {name: "hats_8", img: "resources/customisation/character_hats/character_hats8.png"},
-    "hats_9": {name: "hats_9", img: "resources/customisation/character_hats/character_hats9.png"},
-    "hats_10": {name: "hats_10", img: "resources/customisation/character_hats/character_hats10.png"},
-    "hats_11": {name: "hats_11", img: "resources/customisation/character_hats/character_hats11.png"},
-    "hats_12": {name: "hats_12", img: "resources/customisation/character_hats/character_hats12.png"},
-    "hats_13": {name: "hats_13", img: "resources/customisation/character_hats/character_hats13.png"},
-    "hats_14": {name: "hats_14", img: "resources/customisation/character_hats/character_hats14.png"},
-    "hats_15": {name: "hats_15", img: "resources/customisation/character_hats/character_hats15.png"},
-    "hats_16": {name: "hats_16", img: "resources/customisation/character_hats/character_hats16.png"},
-    "hats_17": {name: "hats_17", img: "resources/customisation/character_hats/character_hats17.png"},
-    "hats_18": {name: "hats_18", img: "resources/customisation/character_hats/character_hats18.png"},
-    "hats_19": {name: "hats_19", img: "resources/customisation/character_hats/character_hats19.png"},
-    "hats_20": {name: "hats_20", img: "resources/customisation/character_hats/character_hats20.png"},
-    "hats_21": {name: "hats_21", img: "resources/customisation/character_hats/character_hats21.png"},
-    "hats_22": {name: "hats_22", img: "resources/customisation/character_hats/character_hats22.png"},
-    "hats_23": {name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png"},
-    "hats_24": {name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png"},
-    "hats_25": {name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png"},
-    "hats_26": {name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png"},
-    "tinfoil_hat1": {name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png"}
+    hats_1: { name: "hats_1", img: "resources/customisation/character_hats/character_hats1.png" },
+    hats_2: { name: "hats_2", img: "resources/customisation/character_hats/character_hats2.png" },
+    hats_3: { name: "hats_3", img: "resources/customisation/character_hats/character_hats3.png" },
+    hats_4: { name: "hats_4", img: "resources/customisation/character_hats/character_hats4.png" },
+    hats_5: { name: "hats_5", img: "resources/customisation/character_hats/character_hats5.png" },
+    hats_6: { name: "hats_6", img: "resources/customisation/character_hats/character_hats6.png" },
+    hats_7: { name: "hats_7", img: "resources/customisation/character_hats/character_hats7.png" },
+    hats_8: { name: "hats_8", img: "resources/customisation/character_hats/character_hats8.png" },
+    hats_9: { name: "hats_9", img: "resources/customisation/character_hats/character_hats9.png" },
+    hats_10: { name: "hats_10", img: "resources/customisation/character_hats/character_hats10.png" },
+    hats_11: { name: "hats_11", img: "resources/customisation/character_hats/character_hats11.png" },
+    hats_12: { name: "hats_12", img: "resources/customisation/character_hats/character_hats12.png" },
+    hats_13: { name: "hats_13", img: "resources/customisation/character_hats/character_hats13.png" },
+    hats_14: { name: "hats_14", img: "resources/customisation/character_hats/character_hats14.png" },
+    hats_15: { name: "hats_15", img: "resources/customisation/character_hats/character_hats15.png" },
+    hats_16: { name: "hats_16", img: "resources/customisation/character_hats/character_hats16.png" },
+    hats_17: { name: "hats_17", img: "resources/customisation/character_hats/character_hats17.png" },
+    hats_18: { name: "hats_18", img: "resources/customisation/character_hats/character_hats18.png" },
+    hats_19: { name: "hats_19", img: "resources/customisation/character_hats/character_hats19.png" },
+    hats_20: { name: "hats_20", img: "resources/customisation/character_hats/character_hats20.png" },
+    hats_21: { name: "hats_21", img: "resources/customisation/character_hats/character_hats21.png" },
+    hats_22: { name: "hats_22", img: "resources/customisation/character_hats/character_hats22.png" },
+    hats_23: { name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png" },
+    hats_24: { name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png" },
+    hats_25: { name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png" },
+    hats_26: { name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png" },
+    tinfoil_hat1: { name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png" },
 };
 
 export const ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = {
-    "accessory_1": {name: "accessory_1", img: "resources/customisation/character_accessories/character_accessories1.png"},
-    "accessory_2": {name: "accessory_2", img: "resources/customisation/character_accessories/character_accessories2.png"},
-    "accessory_3": {name: "accessory_3", img: "resources/customisation/character_accessories/character_accessories3.png"},
-    "accessory_4": {name: "accessory_4", img: "resources/customisation/character_accessories/character_accessories4.png"},
-    "accessory_5": {name: "accessory_5", img: "resources/customisation/character_accessories/character_accessories5.png"},
-    "accessory_6": {name: "accessory_6", img: "resources/customisation/character_accessories/character_accessories6.png"},
-    "accessory_7": {name: "accessory_7", img: "resources/customisation/character_accessories/character_accessories7.png"},
-    "accessory_8": {name: "accessory_8", img: "resources/customisation/character_accessories/character_accessories8.png"},
-    "accessory_9": {name: "accessory_9", img: "resources/customisation/character_accessories/character_accessories9.png"},
-    "accessory_10": {name: "accessory_10", img: "resources/customisation/character_accessories/character_accessories10.png"},
-    "accessory_11": {name: "accessory_11", img: "resources/customisation/character_accessories/character_accessories11.png"},
-    "accessory_12": {name: "accessory_12", img: "resources/customisation/character_accessories/character_accessories12.png"},
-    "accessory_13": {name: "accessory_13", img: "resources/customisation/character_accessories/character_accessories13.png"},
-    "accessory_14": {name: "accessory_14", img: "resources/customisation/character_accessories/character_accessories14.png"},
-    "accessory_15": {name: "accessory_15", img: "resources/customisation/character_accessories/character_accessories15.png"},
-    "accessory_16": {name: "accessory_16", img: "resources/customisation/character_accessories/character_accessories16.png"},
-    "accessory_17": {name: "accessory_17", img: "resources/customisation/character_accessories/character_accessories17.png"},
-    "accessory_18": {name: "accessory_18", img: "resources/customisation/character_accessories/character_accessories18.png"},
-    "accessory_19": {name: "accessory_19", img: "resources/customisation/character_accessories/character_accessories19.png"},
-    "accessory_20": {name: "accessory_20", img: "resources/customisation/character_accessories/character_accessories20.png"},
-    "accessory_21": {name: "accessory_21", img: "resources/customisation/character_accessories/character_accessories21.png"},
-    "accessory_22": {name: "accessory_22", img: "resources/customisation/character_accessories/character_accessories22.png"},
-    "accessory_23": {name: "accessory_23", img: "resources/customisation/character_accessories/character_accessories23.png"},
-    "accessory_24": {name: "accessory_24", img: "resources/customisation/character_accessories/character_accessories24.png"},
-    "accessory_25": {name: "accessory_25", img: "resources/customisation/character_accessories/character_accessories25.png"},
-    "accessory_26": {name: "accessory_26", img: "resources/customisation/character_accessories/character_accessories26.png"},
-    "accessory_27": {name: "accessory_27", img: "resources/customisation/character_accessories/character_accessories27.png"},
-    "accessory_28": {name: "accessory_28", img: "resources/customisation/character_accessories/character_accessories28.png"},
-    "accessory_29": {name: "accessory_29", img: "resources/customisation/character_accessories/character_accessories29.png"},
-    "accessory_30": {name: "accessory_30", img: "resources/customisation/character_accessories/character_accessories30.png"},
-    "accessory_31": {name: "accessory_31", img: "resources/customisation/character_accessories/character_accessories31.png"},
-    "accessory_32": {name: "accessory_32", img: "resources/customisation/character_accessories/character_accessories32.png"},
-    "accessory_mate_bottle": {name: "accessory_mate_bottle", img: "resources/customisation/character_accessories/mate_bottle1.png"},
-    "accessory_mask": {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"}
+    accessory_1: {
+        name: "accessory_1",
+        img: "resources/customisation/character_accessories/character_accessories1.png",
+    },
+    accessory_2: {
+        name: "accessory_2",
+        img: "resources/customisation/character_accessories/character_accessories2.png",
+    },
+    accessory_3: {
+        name: "accessory_3",
+        img: "resources/customisation/character_accessories/character_accessories3.png",
+    },
+    accessory_4: {
+        name: "accessory_4",
+        img: "resources/customisation/character_accessories/character_accessories4.png",
+    },
+    accessory_5: {
+        name: "accessory_5",
+        img: "resources/customisation/character_accessories/character_accessories5.png",
+    },
+    accessory_6: {
+        name: "accessory_6",
+        img: "resources/customisation/character_accessories/character_accessories6.png",
+    },
+    accessory_7: {
+        name: "accessory_7",
+        img: "resources/customisation/character_accessories/character_accessories7.png",
+    },
+    accessory_8: {
+        name: "accessory_8",
+        img: "resources/customisation/character_accessories/character_accessories8.png",
+    },
+    accessory_9: {
+        name: "accessory_9",
+        img: "resources/customisation/character_accessories/character_accessories9.png",
+    },
+    accessory_10: {
+        name: "accessory_10",
+        img: "resources/customisation/character_accessories/character_accessories10.png",
+    },
+    accessory_11: {
+        name: "accessory_11",
+        img: "resources/customisation/character_accessories/character_accessories11.png",
+    },
+    accessory_12: {
+        name: "accessory_12",
+        img: "resources/customisation/character_accessories/character_accessories12.png",
+    },
+    accessory_13: {
+        name: "accessory_13",
+        img: "resources/customisation/character_accessories/character_accessories13.png",
+    },
+    accessory_14: {
+        name: "accessory_14",
+        img: "resources/customisation/character_accessories/character_accessories14.png",
+    },
+    accessory_15: {
+        name: "accessory_15",
+        img: "resources/customisation/character_accessories/character_accessories15.png",
+    },
+    accessory_16: {
+        name: "accessory_16",
+        img: "resources/customisation/character_accessories/character_accessories16.png",
+    },
+    accessory_17: {
+        name: "accessory_17",
+        img: "resources/customisation/character_accessories/character_accessories17.png",
+    },
+    accessory_18: {
+        name: "accessory_18",
+        img: "resources/customisation/character_accessories/character_accessories18.png",
+    },
+    accessory_19: {
+        name: "accessory_19",
+        img: "resources/customisation/character_accessories/character_accessories19.png",
+    },
+    accessory_20: {
+        name: "accessory_20",
+        img: "resources/customisation/character_accessories/character_accessories20.png",
+    },
+    accessory_21: {
+        name: "accessory_21",
+        img: "resources/customisation/character_accessories/character_accessories21.png",
+    },
+    accessory_22: {
+        name: "accessory_22",
+        img: "resources/customisation/character_accessories/character_accessories22.png",
+    },
+    accessory_23: {
+        name: "accessory_23",
+        img: "resources/customisation/character_accessories/character_accessories23.png",
+    },
+    accessory_24: {
+        name: "accessory_24",
+        img: "resources/customisation/character_accessories/character_accessories24.png",
+    },
+    accessory_25: {
+        name: "accessory_25",
+        img: "resources/customisation/character_accessories/character_accessories25.png",
+    },
+    accessory_26: {
+        name: "accessory_26",
+        img: "resources/customisation/character_accessories/character_accessories26.png",
+    },
+    accessory_27: {
+        name: "accessory_27",
+        img: "resources/customisation/character_accessories/character_accessories27.png",
+    },
+    accessory_28: {
+        name: "accessory_28",
+        img: "resources/customisation/character_accessories/character_accessories28.png",
+    },
+    accessory_29: {
+        name: "accessory_29",
+        img: "resources/customisation/character_accessories/character_accessories29.png",
+    },
+    accessory_30: {
+        name: "accessory_30",
+        img: "resources/customisation/character_accessories/character_accessories30.png",
+    },
+    accessory_31: {
+        name: "accessory_31",
+        img: "resources/customisation/character_accessories/character_accessories31.png",
+    },
+    accessory_32: {
+        name: "accessory_32",
+        img: "resources/customisation/character_accessories/character_accessories32.png",
+    },
+    accessory_mate_bottle: {
+        name: "accessory_mate_bottle",
+        img: "resources/customisation/character_accessories/mate_bottle1.png",
+    },
+    accessory_mask: { name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png" },
 };
 
 export const LAYERS: BodyResourceDescriptionListInterface[] = [
@@ -336,9 +442,9 @@ export const LAYERS: BodyResourceDescriptionListInterface[] = [
     HAIR_RESOURCES,
     CLOTHES_RESOURCES,
     HATS_RESOURCES,
-    ACCESSORIES_RESOURCES
+    ACCESSORIES_RESOURCES,
 ];
 
 export const OBJECTS: BodyResourceDescriptionInterface[] = [
-    {name:'teleportation', img:'resources/objects/teleportation.png'},
-];
\ No newline at end of file
+    { name: "teleportation", img: "resources/objects/teleportation.png" },
+];
diff --git a/front/src/Phaser/Entity/SpeechBubble.ts b/front/src/Phaser/Entity/SpeechBubble.ts
index 17b7ed0e..4ca3d9ee 100644
--- a/front/src/Phaser/Entity/SpeechBubble.ts
+++ b/front/src/Phaser/Entity/SpeechBubble.ts
@@ -1,14 +1,12 @@
 import Scene = Phaser.Scene;
-import type {Character} from "./Character";
+import type { Character } from "./Character";
 
 //todo: improve this WIP
 export class SpeechBubble {
     private bubble: Phaser.GameObjects.Graphics;
     private content: Phaser.GameObjects.Text;
 
-
     constructor(scene: Scene, player: Character, text: string = "") {
-
         const bubbleHeight = 50;
         const bubblePadding = 10;
         const bubbleWidth = bubblePadding * 2 + text.length * 10;
@@ -49,15 +47,24 @@ export class SpeechBubble {
         this.bubble.lineBetween(point2X, point2Y, point3X, point3Y);
         this.bubble.lineBetween(point1X, point1Y, point3X, point3Y);
 
-        this.content = scene.add.text(0, 0, text, { fontFamily: 'Arial', fontSize: '20', color: '#000000', align: 'center', wordWrap: { width: bubbleWidth - (bubblePadding * 2) } });
+        this.content = scene.add.text(0, 0, text, {
+            fontFamily: "Arial",
+            fontSize: "20",
+            color: "#000000",
+            align: "center",
+            wordWrap: { width: bubbleWidth - bubblePadding * 2 },
+        });
         player.add(this.content);
 
         const bounds = this.content.getBounds();
-        this.content.setPosition(this.bubble.x + (bubbleWidth / 2) - (bounds.width / 2), this.bubble.y + (bubbleHeight / 2) - (bounds.height / 2));
+        this.content.setPosition(
+            this.bubble.x + bubbleWidth / 2 - bounds.width / 2,
+            this.bubble.y + bubbleHeight / 2 - bounds.height / 2
+        );
     }
 
     destroy(): void {
-        this.bubble.setVisible(false) //todo find a better way
+        this.bubble.setVisible(false); //todo find a better way
         this.bubble.destroy();
         this.content.destroy();
     }
diff --git a/front/src/Phaser/Entity/Sprite.ts b/front/src/Phaser/Entity/Sprite.ts
index f2abad52..3ef73e7c 100644
--- a/front/src/Phaser/Entity/Sprite.ts
+++ b/front/src/Phaser/Entity/Sprite.ts
@@ -1,8 +1,7 @@
 export class Sprite extends Phaser.GameObjects.Sprite {
-
     constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: number | string) {
         super(scene, x, y, texture, frame);
         scene.sys.updateList.add(this);
         scene.sys.displayList.add(this);
     }
-}
\ No newline at end of file
+}
diff --git a/front/src/Phaser/Game/SoundManager.ts b/front/src/Phaser/Game/SoundManager.ts
index 47614fca..cf1c165a 100644
--- a/front/src/Phaser/Game/SoundManager.ts
+++ b/front/src/Phaser/Game/SoundManager.ts
@@ -4,35 +4,39 @@ import BaseSound = Phaser.Sound.BaseSound;
 import SoundConfig = Phaser.Types.Sound.SoundConfig;
 
 class SoundManager {
-    private soundPromises : Map<string,Promise<BaseSound>> = new Map<string, Promise<Phaser.Sound.BaseSound>>();
-    public  loadSound (loadPlugin: LoaderPlugin, soundManager : BaseSoundManager, soundUrl: string) : Promise<BaseSound> {
-        let soundPromise =  this.soundPromises.get(soundUrl);
+    private soundPromises: Map<string, Promise<BaseSound>> = new Map<string, Promise<Phaser.Sound.BaseSound>>();
+    public loadSound(loadPlugin: LoaderPlugin, soundManager: BaseSoundManager, soundUrl: string): Promise<BaseSound> {
+        let soundPromise = this.soundPromises.get(soundUrl);
         if (soundPromise !== undefined) {
             return soundPromise;
         }
-        soundPromise =  new Promise<BaseSound>((res) => {
-
+        soundPromise = new Promise<BaseSound>((res) => {
             const sound = soundManager.get(soundUrl);
             if (sound !== null) {
                 return res(sound);
             }
             loadPlugin.audio(soundUrl, soundUrl);
-            loadPlugin.once('filecomplete-audio-' + soundUrl, () => {
+            loadPlugin.once("filecomplete-audio-" + soundUrl, () => {
                 res(soundManager.add(soundUrl));
             });
             loadPlugin.start();
         });
-        this.soundPromises.set(soundUrl,soundPromise);
+        this.soundPromises.set(soundUrl, soundPromise);
         return soundPromise;
     }
 
-    public async playSound(loadPlugin: LoaderPlugin, soundManager : BaseSoundManager, soundUrl: string, config: SoundConfig|undefined) : Promise<void> {
-        const sound = await this.loadSound(loadPlugin,soundManager,soundUrl);
+    public async playSound(
+        loadPlugin: LoaderPlugin,
+        soundManager: BaseSoundManager,
+        soundUrl: string,
+        config: SoundConfig | undefined
+    ): Promise<void> {
+        const sound = await this.loadSound(loadPlugin, soundManager, soundUrl);
         if (config === undefined) sound.play();
         else sound.play(config);
     }
 
-    public stopSound(soundManager : BaseSoundManager,soundUrl : string){
+    public stopSound(soundManager: BaseSoundManager, soundUrl: string) {
         soundManager.get(soundUrl).stop();
     }
 }
diff --git a/front/src/Phaser/Items/ActionableItem.ts b/front/src/Phaser/Items/ActionableItem.ts
index 7c7090b0..44b633ed 100644
--- a/front/src/Phaser/Items/ActionableItem.ts
+++ b/front/src/Phaser/Items/ActionableItem.ts
@@ -3,17 +3,23 @@
  * It has coordinates and an "activation radius"
  */
 import Sprite = Phaser.GameObjects.Sprite;
-import type {GameScene} from "../Game/GameScene";
+import type { GameScene } from "../Game/GameScene";
 import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js";
 
 type EventCallback = (state: unknown, parameters: unknown) => void;
 
 export class ActionableItem {
-    private readonly activationRadiusSquared : number;
+    private readonly activationRadiusSquared: number;
     private isSelectable: boolean = false;
     private callbacks: Map<string, Array<EventCallback>> = new Map<string, Array<EventCallback>>();
 
-    public constructor(private id: number, private sprite: Sprite, private eventHandler: GameScene, private activationRadius: number, private onActivateCallback: (item: ActionableItem) => void) {
+    public constructor(
+        private id: number,
+        private sprite: Sprite,
+        private eventHandler: GameScene,
+        private activationRadius: number,
+        private onActivateCallback: (item: ActionableItem) => void
+    ) {
         this.activationRadiusSquared = activationRadius * activationRadius;
     }
 
@@ -25,8 +31,8 @@ export class ActionableItem {
      * Returns the square of the distance to the object center IF we are in item action range
      * OR null if we are out of range.
      */
-    public actionableDistance(x: number, y: number): number|null {
-        const distanceSquared = (x - this.sprite.x)*(x - this.sprite.x) + (y - this.sprite.y)*(y - this.sprite.y);
+    public actionableDistance(x: number, y: number): number | null {
+        const distanceSquared = (x - this.sprite.x) * (x - this.sprite.x) + (y - this.sprite.y) * (y - this.sprite.y);
         if (distanceSquared < this.activationRadiusSquared) {
             return distanceSquared;
         } else {
@@ -45,7 +51,7 @@ export class ActionableItem {
 
         this.getOutlinePlugin()?.add(this.sprite, {
             thickness: 2,
-            outlineColor: 0xffff00
+            outlineColor: 0xffff00,
         });
     }
 
@@ -60,8 +66,8 @@ export class ActionableItem {
         this.getOutlinePlugin()?.remove(this.sprite);
     }
 
-    private getOutlinePlugin(): OutlinePipelinePlugin|undefined {
-        return this.sprite.scene.plugins.get('rexOutlinePipeline') as unknown as OutlinePipelinePlugin|undefined;
+    private getOutlinePlugin(): OutlinePipelinePlugin | undefined {
+        return this.sprite.scene.plugins.get("rexOutlinePipeline") as unknown as OutlinePipelinePlugin | undefined;
     }
 
     /**
@@ -78,7 +84,7 @@ export class ActionableItem {
     }
 
     public on(eventName: string, callback: EventCallback): void {
-        let callbacksArray: Array<EventCallback>|undefined = this.callbacks.get(eventName);
+        let callbacksArray: Array<EventCallback> | undefined = this.callbacks.get(eventName);
         if (callbacksArray === undefined) {
             callbacksArray = new Array<EventCallback>();
             this.callbacks.set(eventName, callbacksArray);
diff --git a/front/src/Phaser/Items/Computer/computer.ts b/front/src/Phaser/Items/Computer/computer.ts
index 8240d904..4665c546 100644
--- a/front/src/Phaser/Items/Computer/computer.ts
+++ b/front/src/Phaser/Items/Computer/computer.ts
@@ -1,86 +1,91 @@
-import * as Phaser from 'phaser';
-import {Scene} from "phaser";
+import * as Phaser from "phaser";
+import { Scene } from "phaser";
 import Sprite = Phaser.GameObjects.Sprite;
-import type {ITiledMapObject} from "../../Map/ITiledMap";
-import type {ItemFactoryInterface} from "../ItemFactoryInterface";
-import type {GameScene} from "../../Game/GameScene";
-import {ActionableItem} from "../ActionableItem";
+import type { ITiledMapObject } from "../../Map/ITiledMap";
+import type { ItemFactoryInterface } from "../ItemFactoryInterface";
+import type { GameScene } from "../../Game/GameScene";
+import { ActionableItem } from "../ActionableItem";
 import * as tg from "generic-type-guard";
 
-const isComputerState =
-    new tg.IsInterface().withProperties({
+const isComputerState = new tg.IsInterface()
+    .withProperties({
         status: tg.isString,
-    }).get();
+    })
+    .get();
 type ComputerState = tg.GuardedType<typeof isComputerState>;
 
 let state: ComputerState = {
-    'status': 'off'
+    status: "off",
 };
 
 export default {
     preload: (loader: Phaser.Loader.LoaderPlugin): void => {
-        loader.atlas('computer', '/resources/items/computer/computer.png', '/resources/items/computer/computer_atlas.json');
+        loader.atlas(
+            "computer",
+            "/resources/items/computer/computer.png",
+            "/resources/items/computer/computer_atlas.json"
+        );
     },
     create: (scene: GameScene): void => {
         scene.anims.create({
-            key: 'computer_off',
+            key: "computer_off",
             frames: [
                 {
-                    key: 'computer',
-                    frame: 'computer_off'
-                }
+                    key: "computer",
+                    frame: "computer_off",
+                },
             ],
             frameRate: 10,
-            repeat: -1
+            repeat: -1,
         });
         scene.anims.create({
-            key: 'computer_run',
+            key: "computer_run",
             frames: [
-                       {
-                           key: 'computer',
-                           frame: 'computer_on1'
-                       },
-                       {
-                           key: 'computer',
-                           frame: 'computer_on2'
-                       }
-                       ],
+                {
+                    key: "computer",
+                    frame: "computer_on1",
+                },
+                {
+                    key: "computer",
+                    frame: "computer_on2",
+                },
+            ],
             frameRate: 5,
-            repeat: -1
+            repeat: -1,
         });
     },
     factory: (scene: GameScene, object: ITiledMapObject, initState: unknown): ActionableItem => {
         if (initState !== undefined) {
             if (!isComputerState(initState)) {
-                throw new Error('Invalid state received for computer object');
+                throw new Error("Invalid state received for computer object");
             }
             state = initState;
         }
 
         // Idée: ESSAYER WebPack? https://paultavares.wordpress.com/2018/07/02/webpack-how-to-generate-an-es-module-bundle/
-        const computer = new Sprite(scene, object.x, object.y, 'computer');
+        const computer = new Sprite(scene, object.x, object.y, "computer");
         scene.add.existing(computer);
-        if (state.status === 'on') {
-            computer.anims.play('computer_run');
+        if (state.status === "on") {
+            computer.anims.play("computer_run");
         }
 
         const item = new ActionableItem(object.id, computer, scene, 32, (item: ActionableItem) => {
-            if (state.status === 'off') {
-                state.status = 'on';
-                item.emit('TURN_ON', state);
+            if (state.status === "off") {
+                state.status = "on";
+                item.emit("TURN_ON", state);
             } else {
-                state.status = 'off';
-                item.emit('TURN_OFF', state);
+                state.status = "off";
+                item.emit("TURN_OFF", state);
             }
         });
-        item.on('TURN_ON', () => {
-            computer.anims.play('computer_run');
+        item.on("TURN_ON", () => {
+            computer.anims.play("computer_run");
         });
-        item.on('TURN_OFF', () => {
-            computer.anims.play('computer_off');
+        item.on("TURN_OFF", () => {
+            computer.anims.play("computer_off");
         });
 
         return item;
         //scene.add.sprite(object.x, object.y, 'computer');
-    }
+    },
 } as ItemFactoryInterface;
diff --git a/front/src/Phaser/Items/ItemFactoryInterface.ts b/front/src/Phaser/Items/ItemFactoryInterface.ts
index deff8fbb..fa7e7459 100644
--- a/front/src/Phaser/Items/ItemFactoryInterface.ts
+++ b/front/src/Phaser/Items/ItemFactoryInterface.ts
@@ -1,6 +1,6 @@
-import type {GameScene} from "../Game/GameScene";
-import type {ITiledMapObject} from "../Map/ITiledMap";
-import type {ActionableItem} from "./ActionableItem";
+import type { GameScene } from "../Game/GameScene";
+import type { ITiledMapObject } from "../Map/ITiledMap";
+import type { ActionableItem } from "./ActionableItem";
 import LoaderPlugin = Phaser.Loader.LoaderPlugin;
 
 export interface ItemFactoryInterface {
diff --git a/front/src/Phaser/Login/AbstractCharacterScene.ts b/front/src/Phaser/Login/AbstractCharacterScene.ts
index 0d3a7c3b..6376498a 100644
--- a/front/src/Phaser/Login/AbstractCharacterScene.ts
+++ b/front/src/Phaser/Login/AbstractCharacterScene.ts
@@ -1,14 +1,13 @@
-import {ResizableScene} from "./ResizableScene";
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
-import {loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager";
-import type {CharacterTexture} from "../../Connexion/LocalUser";
+import { ResizableScene } from "./ResizableScene";
+import { localUserStore } from "../../Connexion/LocalUserStore";
+import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
+import { loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
+import type { CharacterTexture } from "../../Connexion/LocalUser";
 
 export abstract class AbstractCharacterScene extends ResizableScene {
-
-    loadCustomSceneSelectCharacters() : Promise<BodyResourceDescriptionInterface[]> {
+    loadCustomSceneSelectCharacters(): Promise<BodyResourceDescriptionInterface[]> {
         const textures = this.getTextures();
-        const promises : Promise<BodyResourceDescriptionInterface>[] = [];
+        const promises: Promise<BodyResourceDescriptionInterface>[] = [];
         if (textures) {
             for (const texture of textures) {
                 if (texture.level === -1) {
@@ -17,10 +16,10 @@ export abstract class AbstractCharacterScene extends ResizableScene {
                 promises.push(loadCustomTexture(this.load, texture));
             }
         }
-        return Promise.all(promises)
+        return Promise.all(promises);
     }
 
-    loadSelectSceneCharacters() : Promise<BodyResourceDescriptionInterface[]> {
+    loadSelectSceneCharacters(): Promise<BodyResourceDescriptionInterface[]> {
         const textures = this.getTextures();
         const promises: Promise<BodyResourceDescriptionInterface>[] = [];
         if (textures) {
@@ -31,10 +30,10 @@ export abstract class AbstractCharacterScene extends ResizableScene {
                 promises.push(loadCustomTexture(this.load, texture));
             }
         }
-        return Promise.all(promises)
+        return Promise.all(promises);
     }
 
-    private getTextures() : CharacterTexture[]|undefined{
+    private getTextures(): CharacterTexture[] | undefined {
         const localUser = localUserStore.getLocalUser();
         return localUser?.textures;
     }
diff --git a/front/src/Phaser/Login/ResizableScene.ts b/front/src/Phaser/Login/ResizableScene.ts
index d06cb66c..90613744 100644
--- a/front/src/Phaser/Login/ResizableScene.ts
+++ b/front/src/Phaser/Login/ResizableScene.ts
@@ -1,4 +1,4 @@
-import {Scene} from "phaser";
+import { Scene } from "phaser";
 import DOMElement = Phaser.GameObjects.DOMElement;
 
 export abstract class ResizableScene extends Scene {
@@ -11,13 +11,10 @@ export abstract class ResizableScene extends Scene {
      * @param defaultWidth The width of the DOM element. We try to compute it but it may not be available if called from "create".
      */
     public centerXDomElement(object: DOMElement, defaultWidth: number): void {
-        object.x = (this.scale.width / 2) -
-            (
-                object
-                && object.node
-                && object.node.getBoundingClientRect().width > 0
-                    ? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom)
-                    : (defaultWidth / this.scale.zoom)
-            );
+        object.x =
+            this.scale.width / 2 -
+            (object && object.node && object.node.getBoundingClientRect().width > 0
+                ? object.node.getBoundingClientRect().width / 2 / this.scale.zoom
+                : defaultWidth / this.scale.zoom);
     }
 }
diff --git a/front/src/Phaser/Login/SelectCharacterMobileScene.ts b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
index 0d8e49d5..c04d6fb3 100644
--- a/front/src/Phaser/Login/SelectCharacterMobileScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
@@ -1,14 +1,13 @@
 import { SelectCharacterScene } from "./SelectCharacterScene";
 
 export class SelectCharacterMobileScene extends SelectCharacterScene {
-
-    create(){
+    create() {
         super.create();
         this.onResize();
         this.selectedRectangle.destroy();
     }
 
-    protected defineSetupPlayer(num: number){
+    protected defineSetupPlayer(num: number) {
         const deltaX = 30;
         const deltaY = 2;
         let [playerX, playerY] = this.getCharacterPosition();
@@ -16,48 +15,44 @@ export class SelectCharacterMobileScene extends SelectCharacterScene {
         let playerScale = 1.5;
         let playerOpacity = 1;
 
-        if( this.currentSelectUser !== num ){
+        if (this.currentSelectUser !== num) {
             playerVisible = false;
         }
-        if( num === (this.currentSelectUser + 1) ){
+        if (num === this.currentSelectUser + 1) {
             playerY -= deltaY;
             playerX += deltaX;
             playerScale = 0.8;
             playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( num === (this.currentSelectUser + 2) ){
+        if (num === this.currentSelectUser + 2) {
             playerY -= deltaY;
-            playerX += (deltaX * 2);
+            playerX += deltaX * 2;
             playerScale = 0.8;
             playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( num === (this.currentSelectUser - 1) ){
+        if (num === this.currentSelectUser - 1) {
             playerY -= deltaY;
             playerX -= deltaX;
             playerScale = 0.8;
             playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( num === (this.currentSelectUser - 2) ){
+        if (num === this.currentSelectUser - 2) {
             playerY -= deltaY;
-            playerX -= (deltaX * 2);
+            playerX -= deltaX * 2;
             playerScale = 0.8;
             playerOpacity = 0.6;
             playerVisible = true;
         }
-        return {playerX, playerY, playerScale, playerOpacity, playerVisible}
+        return { playerX, playerY, playerScale, playerOpacity, playerVisible };
     }
 
-        /**
+    /**
      * Returns pixel position by on column and row number
      */
-         protected getCharacterPosition(): [number, number] {
-            return [
-                this.game.renderer.width / 2,
-                this.game.renderer.height / 3
-            ];
-        }
-
+    protected getCharacterPosition(): [number, number] {
+        return [this.game.renderer.width / 2, this.game.renderer.height / 3];
+    }
 }
diff --git a/front/src/Phaser/Player/Animation.ts b/front/src/Phaser/Player/Animation.ts
index ea8d2308..cf13e087 100644
--- a/front/src/Phaser/Player/Animation.ts
+++ b/front/src/Phaser/Player/Animation.ts
@@ -1,13 +1,10 @@
-
 export enum PlayerAnimationDirections {
-    Down = 'down',
-    Left = 'left',
-    Up = 'up',
-    Right = 'right',
+    Down = "down",
+    Left = "left",
+    Up = "up",
+    Right = "right",
 }
 export enum PlayerAnimationTypes {
-    Walk = 'walk',
-    Idle = 'idle',
+    Walk = "walk",
+    Idle = "idle",
 }
-
-
diff --git a/front/src/Phaser/Reconnecting/WAError.ts b/front/src/Phaser/Reconnecting/WAError.ts
index cdc433b6..abc71f6c 100644
--- a/front/src/Phaser/Reconnecting/WAError.ts
+++ b/front/src/Phaser/Reconnecting/WAError.ts
@@ -3,13 +3,13 @@ export class WAError extends Error {
     private _subTitle: string;
     private _details: string;
 
-    constructor (title: string, subTitle: string, details: string) {
-        super(title+' - '+subTitle+' - '+details);
+    constructor(title: string, subTitle: string, details: string) {
+        super(title + " - " + subTitle + " - " + details);
         this._title = title;
         this._subTitle = subTitle;
         this._details = details;
         // Set the prototype explicitly.
-        Object.setPrototypeOf (this, WAError.prototype);
+        Object.setPrototypeOf(this, WAError.prototype);
     }
 
     get title(): string {
diff --git a/front/src/Phaser/Services/HdpiManager.ts b/front/src/Phaser/Services/HdpiManager.ts
index 33f7e3a8..116f6816 100644
--- a/front/src/Phaser/Services/HdpiManager.ts
+++ b/front/src/Phaser/Services/HdpiManager.ts
@@ -1,4 +1,3 @@
-
 interface Size {
     width: number;
     height: number;
@@ -23,14 +22,14 @@ export class HdpiManager {
      *
      * @param realPixelScreenSize
      */
-    public getOptimalGameSize(realPixelScreenSize: Size): { game: Size, real: Size } {
+    public getOptimalGameSize(realPixelScreenSize: Size): { game: Size; real: Size } {
         const realPixelNumber = realPixelScreenSize.width * realPixelScreenSize.height;
         // If the screen has not a definition small enough to match the minimum number of pixels we want to display,
         // let's make the canvas the size of the screen (in real pixels)
         if (realPixelNumber <= this.minRecommendedGamePixelsNumber) {
             return {
                 game: realPixelScreenSize,
-                real: realPixelScreenSize
+                real: realPixelScreenSize,
             };
         }
 
@@ -49,8 +48,8 @@ export class HdpiManager {
                 real: {
                     width: realPixelScreenSize.width,
                     height: realPixelScreenSize.height,
-                }
-            }
+                },
+            };
         }
 
         const gameWidth = Math.ceil(realPixelScreenSize.width / optimalZoomLevel / this._zoomModifier);
@@ -58,8 +57,12 @@ export class HdpiManager {
 
         // Let's ensure we display a minimum of pixels, even if crazily zoomed in.
         if (gameWidth * gameHeight < this.absoluteMinPixelNumber) {
-            const minGameHeight = Math.sqrt(this.absoluteMinPixelNumber * realPixelScreenSize.height / realPixelScreenSize.width);
-            const minGameWidth = Math.sqrt(this.absoluteMinPixelNumber * realPixelScreenSize.width / realPixelScreenSize.height);
+            const minGameHeight = Math.sqrt(
+                (this.absoluteMinPixelNumber * realPixelScreenSize.height) / realPixelScreenSize.width
+            );
+            const minGameWidth = Math.sqrt(
+                (this.absoluteMinPixelNumber * realPixelScreenSize.width) / realPixelScreenSize.height
+            );
 
             // Let's reset the zoom modifier (WARNING this is a SIDE EFFECT in a getter)
             this._zoomModifier = realPixelScreenSize.width / minGameWidth / optimalZoomLevel;
@@ -72,9 +75,8 @@ export class HdpiManager {
                 real: {
                     width: realPixelScreenSize.width,
                     height: realPixelScreenSize.height,
-                }
-            }
-
+                },
+            };
         }
 
         return {
@@ -85,8 +87,8 @@ export class HdpiManager {
             real: {
                 width: Math.ceil(realPixelScreenSize.width / optimalZoomLevel) * optimalZoomLevel,
                 height: Math.ceil(realPixelScreenSize.height / optimalZoomLevel) * optimalZoomLevel,
-            }
-        }
+            },
+        };
     }
 
     /**
@@ -95,7 +97,7 @@ export class HdpiManager {
     private getOptimalZoomLevel(realPixelNumber: number): number {
         const result = Math.sqrt(realPixelNumber / this.minRecommendedGamePixelsNumber);
         if (1.5 <= result && result < 2) {
-            return 1.5
+            return 1.5;
         } else {
             return Math.floor(result);
         }
diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index abfd2a8b..5ceaeb71 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -1,10 +1,9 @@
-import {HdpiManager} from "./HdpiManager";
+import { HdpiManager } from "./HdpiManager";
 import ScaleManager = Phaser.Scale.ScaleManager;
-import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
-import type {Game} from "../Game/Game";
-import {ResizableScene} from "../Login/ResizableScene";
-import {HtmlUtils} from "../../WebRtc/HtmlUtils";
-
+import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
+import type { Game } from "../Game/Game";
+import { ResizableScene } from "../Login/ResizableScene";
+import { HtmlUtils } from "../../WebRtc/HtmlUtils";
 
 class WaScaleManager {
     private hdpiManager: HdpiManager;
@@ -23,26 +22,29 @@ class WaScaleManager {
     }
 
     public applyNewSize() {
-        const {width, height} = coWebsiteManager.getGameSize();
+        const { width, height } = coWebsiteManager.getGameSize();
 
         let devicePixelRatio = 1;
         if (window.devicePixelRatio) {
             devicePixelRatio = window.devicePixelRatio;
         }
 
-        const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({width: width * devicePixelRatio, height: height * devicePixelRatio});
+        const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({
+            width: width * devicePixelRatio,
+            height: height * devicePixelRatio,
+        });
 
         this.actualZoom = realSize.width / gameSize.width / devicePixelRatio;
-        this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio)
+        this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio);
         this.scaleManager.resize(gameSize.width, gameSize.height);
 
         // Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves
         const style = this.scaleManager.canvas.style;
-        style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
-        style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px';
+        style.width = Math.ceil(realSize.width / devicePixelRatio) + "px";
+        style.height = Math.ceil(realSize.height / devicePixelRatio) + "px";
 
         // Resize the game element at the same size at the canvas
-        const gameStyle = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('game').style;
+        const gameStyle = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("game").style;
         gameStyle.width = style.width;
         gameStyle.height = style.height;
 
@@ -70,7 +72,7 @@ class WaScaleManager {
         this._saveZoom = this.hdpiManager.zoomModifier;
     }
 
-    public restoreZoom(): void{
+    public restoreZoom(): void {
         this.hdpiManager.zoomModifier = this._saveZoom;
         this.applyNewSize();
     }
@@ -81,7 +83,6 @@ class WaScaleManager {
     public get uiScalingFactor(): number {
         return this.actualZoom > 1 ? 1 : 1.2;
     }
-
 }
 
-export const waScaleManager = new WaScaleManager(640*480, 196*196);
+export const waScaleManager = new WaScaleManager(640 * 480, 196 * 196);
diff --git a/front/src/Phaser/UserInput/PinchManager.ts b/front/src/Phaser/UserInput/PinchManager.ts
index 3174c6ad..47d5716b 100644
--- a/front/src/Phaser/UserInput/PinchManager.ts
+++ b/front/src/Phaser/UserInput/PinchManager.ts
@@ -1,6 +1,6 @@
-import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js";
-import {waScaleManager} from "../Services/WaScaleManager";
-import {GameScene} from "../Game/GameScene";
+import { Pinch } from "phaser3-rex-plugins/plugins/gestures.js";
+import { waScaleManager } from "../Services/WaScaleManager";
+import { GameScene } from "../Game/GameScene";
 
 export class PinchManager {
     private scene: Phaser.Scene;
@@ -15,18 +15,18 @@ export class PinchManager {
         // We are smoothing its value with previous values to prevent the flicking.
         let smoothPinch = 1;
 
-        this.pinch.on('pinchstart', () => {
+        this.pinch.on("pinchstart", () => {
             smoothPinch = 1;
         });
 
-
-        this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line
+        // eslint-disable-next-line
+        this.pinch.on("pinch", (pinch: any) => {
             if (pinch.scaleFactor > 1.2 || pinch.scaleFactor < 0.8) {
                 // Pinch too fast! Probably a bad measure.
                 return;
             }
 
-            smoothPinch = 3/5*smoothPinch + 2/5*pinch.scaleFactor;
+            smoothPinch = (3 / 5) * smoothPinch + (2 / 5) * pinch.scaleFactor;
             if (this.scene instanceof GameScene) {
                 this.scene.zoomByFactor(smoothPinch);
             } else {
diff --git a/front/src/Stores/ConsoleGlobalMessageManagerStore.ts b/front/src/Stores/ConsoleGlobalMessageManagerStore.ts
index 1fa04bfe..01534766 100644
--- a/front/src/Stores/ConsoleGlobalMessageManagerStore.ts
+++ b/front/src/Stores/ConsoleGlobalMessageManagerStore.ts
@@ -2,4 +2,4 @@ import { writable } from "svelte/store";
 
 export const consoleGlobalMessageManagerVisibleStore = writable(false);
 
-export const consoleGlobalMessageManagerFocusStore = writable(false);
\ No newline at end of file
+export const consoleGlobalMessageManagerFocusStore = writable(false);
diff --git a/front/src/Stores/ErrorStore.ts b/front/src/Stores/ErrorStore.ts
index 2f1e3e40..b7fb2e31 100644
--- a/front/src/Stores/ErrorStore.ts
+++ b/front/src/Stores/ErrorStore.ts
@@ -1,4 +1,4 @@
-import {writable} from "svelte/store";
+import { writable } from "svelte/store";
 
 /**
  * A store that contains a list of error messages to be displayed.
@@ -8,7 +8,7 @@ function createErrorStore() {
 
     return {
         subscribe,
-        addErrorMessage: (e: string|Error): void => {
+        addErrorMessage: (e: string | Error): void => {
             update((messages: string[]) => {
                 let message: string;
                 if (e instanceof Error) {
@@ -26,7 +26,7 @@ function createErrorStore() {
         },
         clearMessages: (): void => {
             set([]);
-        }
+        },
     };
 }
 
diff --git a/front/src/Stores/Errors/BrowserTooOldError.ts b/front/src/Stores/Errors/BrowserTooOldError.ts
index bf934443..92409335 100644
--- a/front/src/Stores/Errors/BrowserTooOldError.ts
+++ b/front/src/Stores/Errors/BrowserTooOldError.ts
@@ -1,8 +1,10 @@
 export class BrowserTooOldError extends Error {
-    static NAME = 'BrowserTooOldError';
+    static NAME = "BrowserTooOldError";
 
     constructor() {
-        super('Unable to access your camera or microphone. Your browser is too old. Please consider upgrading your browser or try using a recent version of Chrome.');
+        super(
+            "Unable to access your camera or microphone. Your browser is too old. Please consider upgrading your browser or try using a recent version of Chrome."
+        );
         this.name = BrowserTooOldError.NAME;
     }
 }
diff --git a/front/src/Stores/Errors/WebviewOnOldIOS.ts b/front/src/Stores/Errors/WebviewOnOldIOS.ts
index 06c03f0e..42370237 100644
--- a/front/src/Stores/Errors/WebviewOnOldIOS.ts
+++ b/front/src/Stores/Errors/WebviewOnOldIOS.ts
@@ -1,8 +1,10 @@
 export class WebviewOnOldIOS extends Error {
-    static NAME = 'WebviewOnOldIOS';
+    static NAME = "WebviewOnOldIOS";
 
     constructor() {
-        super('Your iOS version cannot use video/audio in the browser unless you are using Safari. Please switch to Safari or upgrade iOS to 14.3 or above.');
+        super(
+            "Your iOS version cannot use video/audio in the browser unless you are using Safari. Please switch to Safari or upgrade iOS to 14.3 or above."
+        );
         this.name = WebviewOnOldIOS.NAME;
     }
 }
diff --git a/front/src/Stores/SelectCharacterStore.ts b/front/src/Stores/SelectCharacterStore.ts
index 094eaef3..0c84a031 100644
--- a/front/src/Stores/SelectCharacterStore.ts
+++ b/front/src/Stores/SelectCharacterStore.ts
@@ -1,3 +1,3 @@
 import { derived, writable, Writable } from "svelte/store";
 
-export const selectCharacterSceneVisibleStore = writable(false);
\ No newline at end of file
+export const selectCharacterSceneVisibleStore = writable(false);
diff --git a/front/src/Stores/SoundPlayingStore.ts b/front/src/Stores/SoundPlayingStore.ts
index cf1d681c..36fd5d77 100644
--- a/front/src/Stores/SoundPlayingStore.ts
+++ b/front/src/Stores/SoundPlayingStore.ts
@@ -4,7 +4,7 @@ import { writable } from "svelte/store";
  * A store that contains the URL of the sound currently playing
  */
 function createSoundPlayingStore() {
-    const { subscribe, set, update } = writable<string|null>(null);
+    const { subscribe, set, update } = writable<string | null>(null);
 
     return {
         subscribe,
@@ -13,9 +13,7 @@ function createSoundPlayingStore() {
         },
         soundEnded: () => {
             set(null);
-        }
-
-
+        },
     };
 }
 
diff --git a/front/src/Touch/TouchScreenManager.ts b/front/src/Touch/TouchScreenManager.ts
index dcb56ded..ee2a135a 100644
--- a/front/src/Touch/TouchScreenManager.ts
+++ b/front/src/Touch/TouchScreenManager.ts
@@ -1,16 +1,14 @@
-
 class TouchScreenManager {
-    
-    readonly supportTouchScreen:boolean;
-    
+    readonly supportTouchScreen: boolean;
+
     constructor() {
         this.supportTouchScreen = this.detectTouchscreen();
     }
 
     //found here: https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript#4819886
     detectTouchscreen(): boolean {
-        return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
+        return "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
     }
 }
 
-export const touchScreenManager = new TouchScreenManager();
\ No newline at end of file
+export const touchScreenManager = new TouchScreenManager();
diff --git a/front/src/WebRtc/DeviceUtils.ts b/front/src/WebRtc/DeviceUtils.ts
index 91a3dc31..5113fc72 100644
--- a/front/src/WebRtc/DeviceUtils.ts
+++ b/front/src/WebRtc/DeviceUtils.ts
@@ -1,12 +1,9 @@
 export function isIOS(): boolean {
-    return [
-            'iPad Simulator',
-            'iPhone Simulator',
-            'iPod Simulator',
-            'iPad',
-            'iPhone',
-            'iPod'
-        ].includes(navigator.platform)
+    return (
+        ["iPad Simulator", "iPhone Simulator", "iPod Simulator", "iPad", "iPhone", "iPod"].includes(
+            navigator.platform
+        ) ||
         // iPad on iOS 13 detection
-        || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+        (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+    );
 }
diff --git a/front/src/rex-plugins.d.ts b/front/src/rex-plugins.d.ts
index 8c8a9fc1..9884d425 100644
--- a/front/src/rex-plugins.d.ts
+++ b/front/src/rex-plugins.d.ts
@@ -1,16 +1,16 @@
-declare module 'phaser3-rex-plugins/plugins/virtualjoystick.js' {
+declare module "phaser3-rex-plugins/plugins/virtualjoystick.js" {
     const content: any; // eslint-disable-line
     export default content;
 }
-declare module 'phaser3-rex-plugins/plugins/gestures-plugin.js' {
+declare module "phaser3-rex-plugins/plugins/gestures-plugin.js" {
     const content: any; // eslint-disable-line
     export default content;
 }
-declare module 'phaser3-rex-plugins/plugins/webfontloader-plugin.js' {
+declare module "phaser3-rex-plugins/plugins/webfontloader-plugin.js" {
     const content: any; // eslint-disable-line
     export default content;
 }
-declare module 'phaser3-rex-plugins/plugins/outlinepipeline-plugin.js' {
+declare module "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js" {
     import GameObject = Phaser.GameObjects.GameObject;
 
     class OutlinePipelinePlugin {
@@ -21,6 +21,6 @@ declare module 'phaser3-rex-plugins/plugins/outlinepipeline-plugin.js' {
 
     export default OutlinePipelinePlugin;
 }
-declare module 'phaser3-rex-plugins/plugins/gestures.js' {
+declare module "phaser3-rex-plugins/plugins/gestures.js" {
     export const Pinch: any; // eslint-disable-line
 }