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

# Conflicts:
#	front/src/Phaser/Game/GameScene.ts

.gitignore

@@ -4,3 +4,6 @@
 Vagrantfile
 docker-compose.override.yaml
 *.DS_Store
+maps/yarn.lock
+maps/dist/computer.js
+maps/dist/computer.js.map

back/package.json

@@ -52,7 +52,7 @@
     "multer": "^1.4.2",
     "prom-client": "^12.0.0",
     "query-string": "^6.13.3",
-    "systeminformation": "^4.27.11",
+    "systeminformation": "^4.30.5",
     "ts-node-dev": "^1.0.0-pre.44",
     "typescript": "^3.8.3",
     "uWebSockets.js": "uNetworking/uWebSockets.js#v18.5.0",

back/yarn.lock

@@ -2723,10 +2723,10 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-systeminformation@^4.27.11:
+systeminformation@^4.30.5:
-  version "4.27.11"
+  version "4.30.5"
-  resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.27.11.tgz#6dbe96e48091444f80dab6c05ee1901286826b60"
+  resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.30.5.tgz#2219c305c8be56a2cfa527a5519c45bc81d4916c"
-  integrity sha512-U7bigXbOnsB8k1vNHS0Y13RCsRz5/UohiUmND+3mMUL6vfzrpbe/h4ZqewowB+B+tJNnmGFDj08Z8xGfYo45dQ==
+  integrity sha512-aYWs8yttl8ePpr6VOQ/Ak8cznuc9L/NQODVhbOKhInX73ZMLvV2BS86Mzr7LLfmUteVFR36CTDNQgiJgRqq+SQ==
 
 table@^5.2.3:
   version "5.4.6"

front/dist/resources/logos/monitor-yellow.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 377.87"><defs><style>.cls-1{fill:#ffda01;}</style></defs><path class="cls-1" d="M494.6,67.07H17.4A17.4,17.4,0,0,0,0,84.46V343.84a17.4,17.4,0,0,0,17.4,17.39H494.6A17.4,17.4,0,0,0,512,343.84V84.46a17.4,17.4,0,0,0-17.4-17.39Z" transform="translate(0 -67.07)"/><path class="cls-1" d="M355.42,414.75H296.35V391.42h-80.7v23.33H156.58a15.1,15.1,0,1,0,0,30.19H355.42a15.1,15.1,0,1,0,0-30.19Z" transform="translate(0 -67.07)"/></svg>

front/dist/resources/style/style.css

@@ -74,6 +74,10 @@ body .message-info.warning{
     height: 100%;
 }
 
+.video-container video:focus{
+    outline: none;
+}
+
 .video-container#div-myCamVideo{
     border: none;
 }
@@ -455,6 +459,8 @@ body {
     flex-grow: 5;
 }
 
+/*CONSOLE*/
+
 .message-container,
 .main-console{
     position: absolute;
@@ -467,6 +473,7 @@ body {
     background: #333333;
     z-index: 200;
     transition: all 0.1s ease-out;
+    border-radius: 0 0 15px 15px;
 }
 
 .message-container{
@@ -499,6 +506,16 @@ body {
     text-align: center;
 }
 
+.main-console div.message,
+.main-console div.setting{
+    display: none;
+}
+
+.main-console div.message.active,
+.main-console div.setting.active{
+    display: block;
+}
+
 .message-container div.clear{
     width: 100px;
     left: calc(50% - 50px);
@@ -648,6 +665,28 @@ body {
     margin-left: 10px;
 }
 
+/* VIDEO QUALITY */
+.main-console div.setting h1{
+    color: white;
+}
+.main-console div.setting select{
+    background: black;
+    color: white;
+    min-width: 280px;
+    text-align: center;
+    min-height: 40px;
+    padding: 10px;
+    border-radius: 15px;
+}
+.main-console div.setting select:focus{
+    border: solid 1px white;
+    outline: none;
+}
+.main-console div.setting.active section{
+    display: block;
+}
+
+
 /*REPORT input*/
 div.modal-report-user{
     position: absolute;

front/src/Administration/ConsoleGlobalMessageManager.ts

@@ -3,11 +3,15 @@ import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
 import {RoomConnection} from "../Connexion/RoomConnection";
 import {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
 import {ADMIN_URL} from "../Enum/EnvironmentVariable";
+import {mediaManager} from "../WebRtc/MediaManager";
 
 export const CLASS_CONSOLE_MESSAGE = 'main-console';
 export const INPUT_CONSOLE_MESSAGE = 'input-send-text';
 export const UPLOAD_CONSOLE_MESSAGE = 'input-upload-music';
 export const INPUT_TYPE_CONSOLE = 'input-type';
+export const GAME_QUALITY_SELECT = 'select-game-quality';
+export const VIDEO_QUALITY_SELECT = 'select-video-quality';
+export const VIDEO_QUALITY_CONSOLE = 'video-quality';
 
 export const AUDIO_TYPE = 'audio';
 export const MESSAGE_TYPE = 'message';
@@ -19,19 +23,30 @@ interface EventTargetFiles extends EventTarget {
 export class ConsoleGlobalMessageManager {
 
     private readonly divMainConsole: HTMLDivElement;
+    private readonly divMessageConsole: HTMLDivElement;
+    private readonly divSettingConsole: HTMLDivElement;
     private readonly buttonMainConsole: HTMLDivElement;
     private readonly buttonSendMainConsole: HTMLImageElement;
+    private readonly buttonAdminMainConsole: HTMLImageElement;
     private readonly buttonSettingsMainConsole: HTMLImageElement;
     private activeConsole: boolean = false;
+    private activeMessage: boolean = false;
+    private activeSetting: boolean = false;
     private userInputManager!: UserInputManager;
     private static cssLoaded: boolean = false;
 
-    constructor(private Connection: RoomConnection, userInputManager : UserInputManager) {
+    constructor(private Connection: RoomConnection, userInputManager : UserInputManager, private isAdmin: Boolean) {
         this.buttonMainConsole = document.createElement('div');
         this.buttonMainConsole.classList.add('console');
         this.divMainConsole = document.createElement('div');
+        this.divMainConsole.className = CLASS_CONSOLE_MESSAGE;
+        this.divMessageConsole = document.createElement('div');
+        this.divMessageConsole.className = 'message';
+        this.divSettingConsole = document.createElement('div');
+        this.divSettingConsole.className = 'setting';
         this.buttonSendMainConsole = document.createElement('img');
         this.buttonSettingsMainConsole = document.createElement('img');
+        this.buttonAdminMainConsole = document.createElement('img');
         this.userInputManager = userInputManager;
         this.initialise();
     }
@@ -78,35 +93,48 @@ export class ConsoleGlobalMessageManager {
         });
         menu.appendChild(textMessage);
         menu.appendChild(textAudio);
-        this.divMainConsole.appendChild(menu);
+        this.divMessageConsole.appendChild(menu);
 
         this.buttonSendMainConsole.src = 'resources/logos/send-yellow.svg';
         this.buttonSendMainConsole.addEventListener('click', () => {
-            if(this.activeConsole){
+            if(this.activeMessage){
-                this.disabled();
+                this.disabledMessageConsole();
             }else{
-                this.buttonSendMainConsole.classList.add('active');
+                this.activeMessageConsole();
-                this.active();
             }
         });
-        this.buttonMainConsole.appendChild(this.buttonSendMainConsole);
 
-        this.buttonSettingsMainConsole.src = 'resources/logos/setting-yellow.svg';
+        this.buttonAdminMainConsole.src = 'resources/logos/setting-yellow.svg';
-        this.buttonSettingsMainConsole.addEventListener('click', () => {
+        this.buttonAdminMainConsole.addEventListener('click', () => {
             window.open(ADMIN_URL, '_blank');
         });
-        this.buttonMainConsole.appendChild(this.buttonSettingsMainConsole);
+
+        this.buttonSettingsMainConsole.src = 'resources/logos/monitor-yellow.svg';
+        this.buttonSettingsMainConsole.addEventListener('click', () => {
+            if(this.activeSetting){
+                this.disabledSettingConsole();
+            }else{
+                this.activeSettingConsole();
+            }
+        });
 
         /*const buttonText = document.createElement('p');
         buttonText.innerText = 'Console';
         this.buttonMainConsole.appendChild(buttonText);*/
+        this.divMessageConsole.appendChild(typeConsole);
 
-        this.divMainConsole.className = CLASS_CONSOLE_MESSAGE;
+        if(this.isAdmin) {
-        this.divMainConsole.appendChild(this.buttonMainConsole);
+            this.buttonMainConsole.appendChild(this.buttonSendMainConsole);
-        this.divMainConsole.appendChild(typeConsole);
+            this.buttonMainConsole.appendChild(this.buttonAdminMainConsole);
-
             this.createTextMessagePart();
             this.createUploadAudioPart();
+        }
+        this.buttonMainConsole.appendChild(this.buttonSettingsMainConsole);
+        this.createSettings();
+
+        this.divMainConsole.appendChild(this.buttonMainConsole);
+        this.divMainConsole.appendChild(this.divMessageConsole);
+        this.divMainConsole.appendChild(this.divSettingConsole);
 
         const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
         mainSectionDiv.appendChild(this.divMainConsole);
@@ -120,7 +148,7 @@ export class ConsoleGlobalMessageManager {
         buttonSend.classList.add('btn');
         buttonSend.addEventListener('click', (event: MouseEvent) => {
             this.sendMessage();
-            this.disabled();
+            this.disabledMessageConsole();
         });
         const buttonDiv = document.createElement('div');
         buttonDiv.classList.add('btn-action');
@@ -131,7 +159,7 @@ export class ConsoleGlobalMessageManager {
         section.classList.add('active');
         section.appendChild(div);
         section.appendChild(buttonDiv);
-        this.divMainConsole.appendChild(section);
+        this.divMessageConsole.appendChild(section);
 
         (async () => {
             // Start loading CSS
@@ -173,27 +201,6 @@ export class ConsoleGlobalMessageManager {
         })();
     }
 
-    private static loadCss(): Promise<void> {
-        return new Promise<void>((resolve, reject) => {
-            if (ConsoleGlobalMessageManager.cssLoaded) {
-                resolve();
-                return;
-            }
-            const fileref = document.createElement("link")
-            fileref.setAttribute("rel", "stylesheet")
-            fileref.setAttribute("type", "text/css")
-            fileref.setAttribute("href", "https://cdn.quilljs.com/1.3.7/quill.snow.css");
-            document.getElementsByTagName("head")[0].appendChild(fileref);
-            ConsoleGlobalMessageManager.cssLoaded = true;
-            fileref.onload = () => {
-                resolve();
-            }
-            fileref.onerror = () => {
-                reject();
-            }
-        });
-    }
-
     createUploadAudioPart(){
         const div = document.createElement('div');
         div.classList.add('upload');
@@ -243,7 +250,7 @@ export class ConsoleGlobalMessageManager {
         buttonSend.classList.add('btn');
         buttonSend.addEventListener('click', (event: MouseEvent) => {
             this.sendMessage();
-            this.disabled();
+            this.disabledMessageConsole();
         });
         const buttonDiv = document.createElement('div');
         buttonDiv.classList.add('btn-action');
@@ -253,7 +260,114 @@ export class ConsoleGlobalMessageManager {
         section.id = this.getSectionId(UPLOAD_CONSOLE_MESSAGE);
         section.appendChild(div);
         section.appendChild(buttonDiv);
-        this.divMainConsole.appendChild(section);
+        this.divMessageConsole.appendChild(section);
+    }
+
+    createSettings(){
+        const labelGame = document.createElement('h1');
+        labelGame.innerText = "Game quality";
+
+        const selectGame = document.createElement('select');
+        selectGame.id = VIDEO_QUALITY_SELECT;
+
+        const option1 : HTMLOptionElement = document.createElement('option');
+        option1.value = '120';
+        option1.innerText = 'High video quality (120 fps)';
+        selectGame.appendChild(option1);
+
+        const option2 : HTMLOptionElement = document.createElement('option');
+        option2.value = '60';
+        option2.innerText = 'Medium video quality (60 fps, recommended)';
+        selectGame.appendChild(option2);
+
+        const option3 : HTMLOptionElement = document.createElement('option');
+        option3.value = '40';
+        option3.innerText = 'Minimum video quality (40 fps)';
+        selectGame.appendChild(option3);
+
+        const option4 : HTMLOptionElement = document.createElement('option');
+        option4.value = '20';
+        option4.innerText = 'Small video quality (20 fps)';
+        selectGame.appendChild(option4);
+
+        const labelVideo = document.createElement('h1');
+        labelVideo.innerText = "Video quality";
+
+        const selectVideo = document.createElement('select');
+        selectVideo.id = GAME_QUALITY_SELECT;
+
+        const optionVideo1 : HTMLOptionElement = document.createElement('option');
+        optionVideo1.value = '30';
+        optionVideo1.innerText = 'High video quality (30 fps)';
+        selectVideo.appendChild(optionVideo1);
+
+        const optionVideo2 : HTMLOptionElement = document.createElement('option');
+        optionVideo2.value = '20';
+        optionVideo2.innerText = 'Medium video quality (20 fps, recommended)';
+        selectVideo.appendChild(optionVideo2);
+
+        const optionVideo3 : HTMLOptionElement = document.createElement('option');
+        optionVideo3.value = '10';
+        optionVideo3.innerText = 'Minimum video quality (10 fps)';
+        selectVideo.appendChild(optionVideo3);
+
+        const optionVideo4 : HTMLOptionElement = document.createElement('option');
+        optionVideo4.value = '5';
+        optionVideo4.innerText = 'Small video quality (5 fps)';
+        selectVideo.appendChild(optionVideo4);
+
+        selectGame.value = '60';
+        const localQualityGame = localStorage.getItem(GAME_QUALITY_SELECT);
+        if(localQualityGame){
+            selectGame.value = localQualityGame;
+        }
+
+        selectVideo.value = '30';
+        const localQualityCam = localStorage.getItem(VIDEO_QUALITY_SELECT);
+        if(localQualityCam){
+            selectVideo.value = localQualityCam;
+        }
+
+        const divButtonAction = document.createElement('div');
+        divButtonAction.className = 'btn-action';
+        const buttonSave = document.createElement('button');
+        buttonSave.innerText = 'Save';
+        buttonSave.classList.add('btn');
+        buttonSave.addEventListener('click', () => {
+            this.saveSetting(selectGame.value, selectVideo.value);
+            this.disabledSettingConsole();
+        });
+        divButtonAction.appendChild(buttonSave);
+
+        const section = document.createElement('section');
+        section.id = this.getSectionId(VIDEO_QUALITY_CONSOLE);
+        section.appendChild(labelGame);
+        section.appendChild(selectGame);
+        section.appendChild(labelVideo);
+        section.appendChild(selectVideo);
+        section.appendChild(divButtonAction);
+        this.divSettingConsole.appendChild(section);
+    }
+
+    private static loadCss(): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
+            if (ConsoleGlobalMessageManager.cssLoaded) {
+                resolve();
+                return;
+            }
+            const fileref = document.createElement("link")
+            fileref.setAttribute("rel", "stylesheet")
+            fileref.setAttribute("type", "text/css")
+            fileref.setAttribute("href", "https://cdn.quilljs.com/1.3.7/quill.snow.css");
+            document.getElementsByTagName("head")[0].appendChild(fileref);
+            ConsoleGlobalMessageManager.cssLoaded = true;
+            fileref.onload = () => {
+                resolve();
+            }
+            fileref.onerror = () => {
+                reject();
+            }
+        });
     }
 
     sendMessage(){
@@ -307,20 +421,65 @@ export class ConsoleGlobalMessageManager {
         this.Connection.emitGlobalMessage(GlobalMessage);
     }
 
+    private saveSetting(valueGame: string, valueVideo: string){
+        const previousGameValue  = localStorage.getItem(GAME_QUALITY_SELECT);
+        if(!previousGameValue || previousGameValue !== valueGame) {
+            localStorage.setItem(GAME_QUALITY_SELECT, valueGame);
+            window.location.reload();
+        }
+        const previousVideoValue  = localStorage.getItem(VIDEO_QUALITY_SELECT);
+        if(!previousVideoValue || previousVideoValue !== valueVideo) {
+            localStorage.setItem(VIDEO_QUALITY_SELECT, valueVideo);
+            mediaManager.updateCameraQuality(parseInt(valueVideo));
+        }
+    }
+
     active(){
         this.userInputManager.clearAllInputKeyboard();
-        this.activeConsole = true;
         this.divMainConsole.style.top = '0';
-        this.buttonSendMainConsole.classList.add('active');
+        this.activeConsole = true;
     }
 
     disabled(){
         this.userInputManager.initKeyBoardEvent();
         this.activeConsole = false;
         this.divMainConsole.style.top = '-80%';
+    }
+
+    activeMessageConsole(){
+        this.activeMessage = true;
+        if(this.activeSetting){
+            this.disabledSettingConsole();
+        }
+        this.active();
+        this.divMessageConsole.classList.add('active');
+        this.buttonSendMainConsole.classList.add('active');
+    }
+
+    disabledMessageConsole(){
+        this.activeMessage = false;
+        this.disabled();
+        this.divMessageConsole.classList.remove('active');
         this.buttonSendMainConsole.classList.remove('active');
     }
 
+    activeSettingConsole(){
+        this.activeSetting = true;
+        if(this.activeMessage){
+            this.disabledMessageConsole();
+        }
+        this.active();
+        this.divSettingConsole.classList.add('active');
+        this.buttonSettingsMainConsole.classList.add('active');
+    }
+
+    disabledSettingConsole(){
+        this.activeSetting = false;
+        this.disabled();
+        this.divSettingConsole.classList.remove('active');
+        this.buttonSettingsMainConsole.classList.remove('active');
+    }
+
     private getSectionId(id: string) : string {
         return `section-${id}`;
     }

front/src/Phaser/Entity/body_character.ts

@@ -226,6 +226,10 @@ export const CLOTHES_RESOURCES: Array<BodyResourceDescriptionInterface> = [
     {name:"clothes_68",img: "resources/customisation/character_clothes/character_clothes67.png"},
     {name:"clothes_69",img: "resources/customisation/character_clothes/character_clothes68.png"},
     {name:"clothes_70",img: "resources/customisation/character_clothes/character_clothes69.png"},
+    {name:"clothes_pride_shirt",img: "resources/customisation/character_clothes/pride_shirt.png"},
+    {name:"clothes_black_hoodie",img: "resources/customisation/character_clothes/black_hoodie.png"},
+    {name:"clothes_white_hoodie",img: "resources/customisation/character_clothes/white_hoodie.png"},
+    {name:"clothes_engelbert",img: "resources/customisation/character_clothes/engelbert.png"}
 ];
 
 export const HATS_RESOURCES: Array<BodyResourceDescriptionInterface> = [
@@ -254,7 +258,8 @@ export const HATS_RESOURCES: Array<BodyResourceDescriptionInterface> = [
     {name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png"},
     {name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png"},
     {name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png"},
-    {name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png"}
+    {name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png"},
+    {name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png"}
 ];
 
 export const ACCESSORIES_RESOURCES: Array<BodyResourceDescriptionInterface> = [
@@ -289,7 +294,9 @@ export const ACCESSORIES_RESOURCES: Array<BodyResourceDescriptionInterface> = [
     {name: "accessory_29", img: "resources/customisation/character_accessories/character_accessories29.png"},
     {name: "accessory_30", img: "resources/customisation/character_accessories/character_accessories30.png"},
     {name: "accessory_31", img: "resources/customisation/character_accessories/character_accessories31.png"},
-    {name: "accessory_32", img: "resources/customisation/character_accessories/character_accessories32.png"}
+    {name: "accessory_32", img: "resources/customisation/character_accessories/character_accessories32.png"},
+    {name: "accessory_mate_bottle", img: "resources/customisation/character_accessories/mate_bottle1.png"},
+    {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"}
 ];
 
 export const LAYERS: Array<Array<BodyResourceDescriptionInterface>> = [

front/src/Phaser/Game/GameScene.ts

@@ -569,9 +569,8 @@ export class GameScene extends ResizableScene implements CenterListener {
             //this.initUsersPosition(roomJoinedMessage.users);
             this.connectionAnswerPromiseResolve(onConnect.room);
             // Analyze tags to find if we are admin. If yes, show console.
-            if (this.connection.hasTag('admin')) {
+            this.ConsoleGlobalMessageManager = new ConsoleGlobalMessageManager(this.connection, this.userInputManager, this.connection.hasTag('admin'));
-                this.ConsoleGlobalMessageManager = new ConsoleGlobalMessageManager(this.connection, this.userInputManager);
+
-            }
 
         this.scene.wake();
             this.scene.sleep(ReconnectingSceneName);

front/src/WebRtc/MediaManager.ts

@@ -2,12 +2,21 @@ import {DivImportance, layoutManager} from "./LayoutManager";
 import {HtmlUtils} from "./HtmlUtils";
 import {DiscussionManager, SendMessageCallback} from "./DiscussionManager";
 import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
+import {VIDEO_QUALITY_SELECT} from "../Administration/ConsoleGlobalMessageManager";
 declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
-const videoConstraint: boolean|MediaTrackConstraints = {
+const localValueVideo = localStorage.getItem(VIDEO_QUALITY_SELECT);
-    width: { ideal: 1280 },
+let valueVideo = 20;
-    height: { ideal: 720 },
+if(localValueVideo){
-    facingMode: "user"
+    valueVideo = parseInt(localValueVideo);
+}
+let videoConstraint: boolean|MediaTrackConstraints = {
+    width: { min: 640, ideal: 1280, max: 1920 },
+    height: { min: 400, ideal: 720 },
+    frameRate: {exact: valueVideo, ideal: valueVideo},
+    facingMode: "user",
+    resizeMode: 'crop-and-scale',
+    aspectRatio: 1.777777778
 };
 
 export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void;
@@ -191,6 +200,17 @@ export class MediaManager {
         buttonCloseFrame.addEventListener('click', functionTrigger);
     }
 
+    public updateCameraQuality(value: number) {
+        this.enableCameraStyle();
+        const newVideoConstraint = JSON.parse(JSON.stringify(videoConstraint));
+        newVideoConstraint.frameRate = {exact: value, ideal: value};
+        videoConstraint = newVideoConstraint;
+        this.constraintsMedia.video = videoConstraint;
+        this.getCamera().then((stream: MediaStream) => {
+            this.triggerUpdatedLocalStreamCallbacks(stream);
+        });
+    }
+
     public enableCamera() {
         this.enableCameraStyle();
         this.constraintsMedia.video = videoConstraint;
@@ -564,7 +584,7 @@ export class MediaManager {
     }
 
     isError(userId: string): void {
-        console.log("isError", `div-${userId}`);
+        console.info("isError", `div-${userId}`);
         const element = document.getElementById(`div-${userId}`);
         if(!element){
             return;

front/src/index.ts

@@ -13,6 +13,7 @@ import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
 import {ResizableScene} from "./Phaser/Login/ResizableScene";
 import {EntryScene} from "./Phaser/Login/EntryScene";
 import {coWebsiteManager} from "./WebRtc/CoWebsiteManager";
+import {GAME_QUALITY_SELECT} from "./Administration/ConsoleGlobalMessageManager";
 
 // Load Jitsi if the environment variable is set.
 if (JITSI_URL) {
@@ -23,17 +24,55 @@ if (JITSI_URL) {
 
 const {width, height} = coWebsiteManager.getGameSize();
 
+let valueGameQuality : number = 60
+const localGameQuality = localStorage.getItem(GAME_QUALITY_SELECT);
+if(localGameQuality){
+    try {
+        valueGameQuality = parseInt(localGameQuality);
+    }catch (err){
+        console.error(err);
+    }
+}
+const fps : Phaser.Types.Core.FPSConfig = {
+    /**
+     * The minimum acceptable rendering rate, in frames per second.
+     */
+    min: valueGameQuality,
+    /**
+     * The optimum rendering rate, in frames per second.
+     */
+    target: valueGameQuality,
+    /**
+     * Use setTimeout instead of requestAnimationFrame to run the game loop.
+     */
+    forceSetTimeOut: true,
+    /**
+     * Calculate the average frame delta from this many consecutive frame intervals.
+     */
+    deltaHistory: 120,
+    /**
+     * The amount of frames the time step counts before we trust the delta values again.
+     */
+    panicMax: 20,
+    /**
+     * Apply delta smoothing during the game update to help avoid spikes?
+     */
+    smoothStep: false
+}
+
 const config: GameConfig = {
+    type: Phaser.AUTO,
     title: "WorkAdventure",
     width: width / RESOLUTION,
     height: height / RESOLUTION,
     parent: "game",
     scene: [EntryScene, LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene, CustomizeScene],
     zoom: RESOLUTION,
+    fps: fps,
     physics: {
         default: "arcade",
         arcade: {
-            debug: DEBUG_MODE
+            debug: DEBUG_MODE,
         }
     },
     callbacks: {
@@ -60,6 +99,7 @@ window.addEventListener('resize', function (event) {
         }
     }
 });
+
 coWebsiteManager.onStateChange(() => {
     const {width, height} = coWebsiteManager.getGameSize();
     game.scale.resize(width / RESOLUTION, height / RESOLUTION);