diff --git a/front/dist/resources/logos/send-bkack.svg b/front/dist/resources/logos/send-bkack.svg new file mode 100644 index 00000000..b4e44d9a --- /dev/null +++ b/front/dist/resources/logos/send-bkack.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/dist/resources/logos/send-white.svg b/front/dist/resources/logos/send-white.svg new file mode 100644 index 00000000..8c45e8fe --- /dev/null +++ b/front/dist/resources/logos/send-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/dist/resources/logos/send-yellow.svg b/front/dist/resources/logos/send-yellow.svg new file mode 100644 index 00000000..8fb4f2ec --- /dev/null +++ b/front/dist/resources/logos/send-yellow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/dist/resources/logos/setting-black.svg b/front/dist/resources/logos/setting-black.svg new file mode 100644 index 00000000..a3098e19 --- /dev/null +++ b/front/dist/resources/logos/setting-black.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/front/dist/resources/logos/setting-white.svg b/front/dist/resources/logos/setting-white.svg new file mode 100644 index 00000000..64ffba6d --- /dev/null +++ b/front/dist/resources/logos/setting-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/dist/resources/logos/setting-yellow.svg b/front/dist/resources/logos/setting-yellow.svg new file mode 100644 index 00000000..1fd29378 --- /dev/null +++ b/front/dist/resources/logos/setting-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 23a4bba6..5f5d37f2 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -445,23 +445,51 @@ body { color: white; z-index: 200; transition: all 0.1s ease-out; - top: 100%; - width: 100px; + top: calc(100% + 2px); + width: 200px; height: 40px; - background-color: black; - left: calc(50% - 50px); - border-radius: 0 0 10px 10px; + background-color: #2d2d2dba; + left: calc(50% - 100px); + border-radius: 15px 15px 15px 15px; text-align: center; } +.message-container div.clear{ + width: 100px; + left: calc(50% - 50px); +} + +.main-console div.console img, +.message-container div.clear img{ + margin-top: 6px; + width: 30px; + height: 30px; + cursor: pointer; + padding: 0 5px; + transition: all .5s ease; + transform: rotateY(0); + opacity: 0.5; +} +.main-console div.console img:hover, +.message-container div.clear img:hover{ + opacity: 1; +} + +.main-console div.console img.active, +.message-container div.clear img{ + transform: rotateY(3.142rad); + opacity: 1; +} + .main-console div.console p, .message-container div.clear p{ - margin-top: 6px; + margin-top: 12px; } .main-console div.console:hover, .message-container div.clear:hover { cursor: pointer; + top: calc(100% + 5px); transform: scale(1.2) translateY(3px); } diff --git a/front/src/Administration/ConsoleGlobalMessageManager.ts b/front/src/Administration/ConsoleGlobalMessageManager.ts index 8258d0ed..a79ecf75 100644 --- a/front/src/Administration/ConsoleGlobalMessageManager.ts +++ b/front/src/Administration/ConsoleGlobalMessageManager.ts @@ -2,6 +2,7 @@ import {HtmlUtils} from "../WebRtc/HtmlUtils"; import {UserInputManager} from "../Phaser/UserInput/UserInputManager"; import {RoomConnection} from "../Connexion/RoomConnection"; import {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels"; +import {ADMIN_URL} from "../Enum/EnvironmentVariable"; export const CLASS_CONSOLE_MESSAGE = 'main-console'; export const INPUT_CONSOLE_MESSAGE = 'input-send-text'; @@ -17,8 +18,10 @@ interface EventTargetFiles extends EventTarget { export class ConsoleGlobalMessageManager { - private divMainConsole: HTMLDivElement; - private buttonMainConsole: HTMLDivElement; + private readonly divMainConsole: HTMLDivElement; + private readonly buttonMainConsole: HTMLDivElement; + private readonly buttonSendMainConsole: HTMLImageElement; + private readonly buttonSettingsMainConsole: HTMLImageElement; private activeConsole: boolean = false; private userInputManager!: UserInputManager; private static cssLoaded: boolean = false; @@ -27,6 +30,8 @@ export class ConsoleGlobalMessageManager { this.buttonMainConsole = document.createElement('div'); this.buttonMainConsole.classList.add('console'); this.divMainConsole = document.createElement('div'); + this.buttonSendMainConsole = document.createElement('img'); + this.buttonSettingsMainConsole = document.createElement('img'); this.userInputManager = userInputManager; this.initialise(); } @@ -75,17 +80,26 @@ export class ConsoleGlobalMessageManager { menu.appendChild(textAudio); this.divMainConsole.appendChild(menu); - const buttonText = document.createElement('p'); - buttonText.innerText = 'Console'; - - this.buttonMainConsole.appendChild(buttonText); - this.buttonMainConsole.addEventListener('click', () => { + this.buttonSendMainConsole.src = 'resources/logos/send-yellow.svg'; + this.buttonSendMainConsole.addEventListener('click', () => { if(this.activeConsole){ this.disabled(); }else{ + this.buttonSendMainConsole.classList.add('active'); this.active(); } }); + this.buttonMainConsole.appendChild(this.buttonSendMainConsole); + + this.buttonSettingsMainConsole.src = 'resources/logos/setting-yellow.svg'; + this.buttonSettingsMainConsole.addEventListener('click', () => { + window.open(ADMIN_URL, '_blank'); + }); + this.buttonMainConsole.appendChild(this.buttonSettingsMainConsole); + + /*const buttonText = document.createElement('p'); + buttonText.innerText = 'Console'; + this.buttonMainConsole.appendChild(buttonText);*/ this.divMainConsole.className = CLASS_CONSOLE_MESSAGE; this.divMainConsole.appendChild(this.buttonMainConsole); @@ -293,17 +307,18 @@ export class ConsoleGlobalMessageManager { this.Connection.emitGlobalMessage(GlobalMessage); } - active(){ this.userInputManager.clearAllInputKeyboard(); this.activeConsole = true; this.divMainConsole.style.top = '0'; + this.buttonSendMainConsole.classList.add('active'); } disabled(){ this.userInputManager.initKeyBoardEvent(); this.activeConsole = false; this.divMainConsole.style.top = '-80%'; + this.buttonSendMainConsole.classList.remove('active'); } private getSectionId(id: string) : string { diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts index 2e963e5e..60f9cd3b 100644 --- a/front/src/Enum/EnvironmentVariable.ts +++ b/front/src/Enum/EnvironmentVariable.ts @@ -1,5 +1,6 @@ const DEBUG_MODE: boolean = process.env.DEBUG_MODE == "true"; const API_URL = (process.env.API_PROTOCOL || (typeof(window) !== 'undefined' ? window.location.protocol : 'http:')) + '//' + (process.env.API_URL || "api.workadventure.localhost"); +const ADMIN_URL = API_URL.replace('api', 'admin'); const TURN_SERVER: string = process.env.TURN_SERVER || "turn:numb.viagenie.ca"; const TURN_USER: string = process.env.TURN_USER || 'g.parant@thecodingmachine.com'; const TURN_PASSWORD: string = process.env.TURN_PASSWORD || 'itcugcOHxle9Acqi$'; @@ -13,6 +14,7 @@ const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new export { DEBUG_MODE, API_URL, + ADMIN_URL, RESOLUTION, ZOOM_LEVEL, POSITION_DELAY,