diff --git a/.gitignore b/.gitignore index 659dab86..70660058 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,7 @@ .vagrant Vagrantfile docker-compose.override.yaml -*.DS_Store \ No newline at end of file +*.DS_Store +maps/yarn.lock +maps/dist/computer.js +maps/dist/computer.js.map \ No newline at end of file diff --git a/back/package.json b/back/package.json index d1e6d847..de2a5419 100644 --- a/back/package.json +++ b/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", diff --git a/back/yarn.lock b/back/yarn.lock index bfb96a54..a543e1aa 100644 --- a/back/yarn.lock +++ b/back/yarn.lock @@ -2723,10 +2723,10 @@ supports-color@^7.1.0: dependencies: has-flag "^4.0.0" -systeminformation@^4.27.11: - version "4.27.11" - resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.27.11.tgz#6dbe96e48091444f80dab6c05ee1901286826b60" - integrity sha512-U7bigXbOnsB8k1vNHS0Y13RCsRz5/UohiUmND+3mMUL6vfzrpbe/h4ZqewowB+B+tJNnmGFDj08Z8xGfYo45dQ== +systeminformation@^4.30.5: + version "4.30.5" + resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.30.5.tgz#2219c305c8be56a2cfa527a5519c45bc81d4916c" + integrity sha512-aYWs8yttl8ePpr6VOQ/Ak8cznuc9L/NQODVhbOKhInX73ZMLvV2BS86Mzr7LLfmUteVFR36CTDNQgiJgRqq+SQ== table@^5.2.3: version "5.4.6" diff --git a/front/dist/resources/customisation/character_accessories/mask.png b/front/dist/resources/customisation/character_accessories/mask.png new file mode 100644 index 00000000..aeca63eb Binary files /dev/null and b/front/dist/resources/customisation/character_accessories/mask.png differ diff --git a/front/dist/resources/customisation/character_accessories/mate_bottle1.png b/front/dist/resources/customisation/character_accessories/mate_bottle1.png new file mode 100644 index 00000000..82227afd Binary files /dev/null and b/front/dist/resources/customisation/character_accessories/mate_bottle1.png differ diff --git a/front/dist/resources/customisation/character_clothes/black_hoodie.png b/front/dist/resources/customisation/character_clothes/black_hoodie.png new file mode 100644 index 00000000..5e9b54d7 Binary files /dev/null and b/front/dist/resources/customisation/character_clothes/black_hoodie.png differ diff --git a/front/dist/resources/customisation/character_clothes/engelbert.png b/front/dist/resources/customisation/character_clothes/engelbert.png new file mode 100644 index 00000000..742e1534 Binary files /dev/null and b/front/dist/resources/customisation/character_clothes/engelbert.png differ diff --git a/front/dist/resources/customisation/character_clothes/pride_shirt.png b/front/dist/resources/customisation/character_clothes/pride_shirt.png new file mode 100644 index 00000000..cc50aa78 Binary files /dev/null and b/front/dist/resources/customisation/character_clothes/pride_shirt.png differ diff --git a/front/dist/resources/customisation/character_clothes/white_hoodie.png b/front/dist/resources/customisation/character_clothes/white_hoodie.png new file mode 100644 index 00000000..a4c2e85a Binary files /dev/null and b/front/dist/resources/customisation/character_clothes/white_hoodie.png differ diff --git a/front/dist/resources/customisation/character_hats/tinfoil_hat1.png b/front/dist/resources/customisation/character_hats/tinfoil_hat1.png new file mode 100644 index 00000000..15b1b960 Binary files /dev/null and b/front/dist/resources/customisation/character_hats/tinfoil_hat1.png differ diff --git a/front/dist/resources/logos/monitor-yellow.svg b/front/dist/resources/logos/monitor-yellow.svg new file mode 100644 index 00000000..f26d30c1 --- /dev/null +++ b/front/dist/resources/logos/monitor-yellow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 10e16cfa..0fa951bc 100644 --- a/front/dist/resources/style/style.css +++ b/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; diff --git a/front/src/Administration/ConsoleGlobalMessageManager.ts b/front/src/Administration/ConsoleGlobalMessageManager.ts index a79ecf75..03929a46 100644 --- a/front/src/Administration/ConsoleGlobalMessageManager.ts +++ b/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){ - this.disabled(); + if(this.activeMessage){ + this.disabledMessageConsole(); }else{ - this.buttonSendMainConsole.classList.add('active'); - this.active(); + this.activeMessageConsole(); } }); - this.buttonMainConsole.appendChild(this.buttonSendMainConsole); - this.buttonSettingsMainConsole.src = 'resources/logos/setting-yellow.svg'; - this.buttonSettingsMainConsole.addEventListener('click', () => { + this.buttonAdminMainConsole.src = 'resources/logos/setting-yellow.svg'; + 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); + + if(this.isAdmin) { + this.buttonMainConsole.appendChild(this.buttonSendMainConsole); + this.buttonMainConsole.appendChild(this.buttonAdminMainConsole); + this.createTextMessagePart(); + this.createUploadAudioPart(); + } + this.buttonMainConsole.appendChild(this.buttonSettingsMainConsole); + this.createSettings(); - this.divMainConsole.className = CLASS_CONSOLE_MESSAGE; this.divMainConsole.appendChild(this.buttonMainConsole); - this.divMainConsole.appendChild(typeConsole); - - this.createTextMessagePart(); - this.createUploadAudioPart(); + this.divMainConsole.appendChild(this.divMessageConsole); + this.divMainConsole.appendChild(this.divSettingConsole); const mainSectionDiv = HtmlUtils.getElementByIdOrFail('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 { - return new Promise((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 { + return new Promise((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}`; } diff --git a/front/src/Phaser/Entity/body_character.ts b/front/src/Phaser/Entity/body_character.ts index fd5fa467..b37b9864 100644 --- a/front/src/Phaser/Entity/body_character.ts +++ b/front/src/Phaser/Entity/body_character.ts @@ -226,6 +226,10 @@ export const CLOTHES_RESOURCES: Array = [ {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 = [ @@ -254,7 +258,8 @@ export const HATS_RESOURCES: Array = [ {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 = [ @@ -289,7 +294,9 @@ export const ACCESSORIES_RESOURCES: Array = [ {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> = [ diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 43d4d899..cf45763b 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -569,11 +569,10 @@ 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.ConsoleGlobalMessageManager = new ConsoleGlobalMessageManager(this.connection, this.userInputManager, this.connection.hasTag('admin')); - this.scene.wake(); + + this.scene.wake(); this.scene.sleep(ReconnectingSceneName); //init user position and play trigger to check layers properties diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 33be1c6a..6c3b6898 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/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 = { - width: { ideal: 1280 }, - height: { ideal: 720 }, - facingMode: "user" +const localValueVideo = localStorage.getItem(VIDEO_QUALITY_SELECT); +let valueVideo = 20; +if(localValueVideo){ + 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; diff --git a/front/src/index.ts b/front/src/index.ts index fe7ceb34..640b04f9 100644 --- a/front/src/index.ts +++ b/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);