From 232fd33ec8244beda87b915b78e56089b6ab46b5 Mon Sep 17 00:00:00 2001 From: GRL Date: Mon, 21 Jun 2021 17:19:27 +0200 Subject: [PATCH] Migrating ConsoleGlobalMessageManager in svelte --- .../ConsoleGlobalMessageManager.ts | 397 ------------------ .../Administration/GlobalMessageManager.ts | 6 +- front/src/Components/App.svelte | 7 + .../ConsoleGlobalMessageManager.svelte | 44 ++ .../InputTextGlobalMessage.svelte | 97 +++++ .../UploadAudioGlobalMessage.svelte | 93 ++++ front/src/Components/images/music-file.svg | 27 ++ front/src/Phaser/Game/GameScene.ts | 3 - front/src/Phaser/Menu/MenuScene.ts | 10 +- .../src/Phaser/UserInput/UserInputManager.ts | 5 + .../ConsoleGlobalMessageManagerStore.ts | 5 + front/src/Stores/UserInputStore.ts | 10 + front/style/index.scss | 1 + front/style/style.scss | 108 +---- front/style/svelte-style.scss | 82 ++++ 15 files changed, 386 insertions(+), 509 deletions(-) delete mode 100644 front/src/Administration/ConsoleGlobalMessageManager.ts create mode 100644 front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte create mode 100644 front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte create mode 100644 front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte create mode 100644 front/src/Components/images/music-file.svg create mode 100644 front/src/Stores/ConsoleGlobalMessageManagerStore.ts create mode 100644 front/src/Stores/UserInputStore.ts create mode 100644 front/style/svelte-style.scss diff --git a/front/src/Administration/ConsoleGlobalMessageManager.ts b/front/src/Administration/ConsoleGlobalMessageManager.ts deleted file mode 100644 index 0dbfe834..00000000 --- a/front/src/Administration/ConsoleGlobalMessageManager.ts +++ /dev/null @@ -1,397 +0,0 @@ -import {HtmlUtils} from "../WebRtc/HtmlUtils"; -import type {UserInputManager} from "../Phaser/UserInput/UserInputManager"; -import type {RoomConnection} from "../Connexion/RoomConnection"; -import type {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels"; -import {AdminMessageEventTypes} from "../Connexion/AdminMessagesService"; - -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 VIDEO_QUALITY_SELECT = 'select-video-quality'; - -export const AUDIO_TYPE = AdminMessageEventTypes.audio; -export const MESSAGE_TYPE = AdminMessageEventTypes.admin; - -interface EventTargetFiles extends EventTarget { - files: Array; -} - -/** - * @deprecated - */ -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, private isAdmin: Boolean) { - this.buttonMainConsole = document.createElement('div'); - this.buttonMainConsole.classList.add('console'); - this.buttonMainConsole.hidden = true; - 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.buttonSendMainConsole.id = 'btn-send-message'; - //this.buttonSettingsMainConsole = document.createElement('img'); - //this.buttonAdminMainConsole = document.createElement('img'); - this.userInputManager = userInputManager; - this.initialise(); - - } - - initialise() { - for (const elem of document.getElementsByClassName(CLASS_CONSOLE_MESSAGE)) { - elem.remove(); - } - - const typeConsole = document.createElement('input'); - typeConsole.id = INPUT_TYPE_CONSOLE; - typeConsole.value = MESSAGE_TYPE; - typeConsole.type = 'hidden'; - - const menu = document.createElement('div'); - menu.classList.add('menu') - const textMessage = document.createElement('span'); - textMessage.innerText = "Message"; - textMessage.classList.add('active'); - textMessage.addEventListener('click', () => { - textMessage.classList.add('active'); - const messageSection = HtmlUtils.getElementByIdOrFail(this.getSectionId(INPUT_CONSOLE_MESSAGE)); - messageSection.classList.add('active'); - - textAudio.classList.remove('active'); - const audioSection = HtmlUtils.getElementByIdOrFail(this.getSectionId(UPLOAD_CONSOLE_MESSAGE)); - audioSection.classList.remove('active'); - - typeConsole.value = MESSAGE_TYPE; - }); - menu.appendChild(textMessage); - const textAudio = document.createElement('span'); - textAudio.innerText = "Audio"; - textAudio.addEventListener('click', () => { - textAudio.classList.add('active'); - const audioSection = HtmlUtils.getElementByIdOrFail(this.getSectionId(UPLOAD_CONSOLE_MESSAGE)); - audioSection.classList.add('active'); - - textMessage.classList.remove('active'); - const messageSection = HtmlUtils.getElementByIdOrFail(this.getSectionId(INPUT_CONSOLE_MESSAGE)); - messageSection.classList.remove('active'); - - typeConsole.value = AUDIO_TYPE; - }); - menu.appendChild(textMessage); - menu.appendChild(textAudio); - this.divMessageConsole.appendChild(menu); - - this.buttonSendMainConsole.src = 'resources/logos/send-yellow.svg'; - this.buttonSendMainConsole.addEventListener('click', () => { - if(this.activeMessage){ - this.disabledMessageConsole(); - }else{ - this.activeMessageConsole(); - } - }); - - /*this.buttonAdminMainConsole.src = 'resources/logos/setting-yellow.svg'; - this.buttonAdminMainConsole.addEventListener('click', () => { - window.open(ADMIN_URL, '_blank'); - });*/ - - /*this.buttonSettingsMainConsole.src = 'resources/logos/monitor-yellow.svg'; - this.buttonSettingsMainConsole.addEventListener('click', () => { - if(this.activeSetting){ - this.disabledSettingConsole(); - }else{ - this.activeSettingConsole(); - } - });*/ - - 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.divMainConsole.appendChild(this.buttonMainConsole); - this.divMainConsole.appendChild(this.divMessageConsole); - //this.divMainConsole.appendChild(this.divSettingConsole); - - const mainSectionDiv = HtmlUtils.getElementByIdOrFail('main-container'); - mainSectionDiv.appendChild(this.divMainConsole); - } - - createTextMessagePart(){ - const div = document.createElement('div'); - div.id = INPUT_CONSOLE_MESSAGE - const buttonSend = document.createElement('button'); - buttonSend.innerText = 'Send'; - buttonSend.classList.add('btn'); - buttonSend.addEventListener('click', (event: MouseEvent) => { - this.sendMessage(); - this.disabledMessageConsole(); - }); - const buttonDiv = document.createElement('div'); - buttonDiv.classList.add('btn-action'); - buttonDiv.appendChild(buttonSend) - - const section = document.createElement('section'); - section.id = this.getSectionId(INPUT_CONSOLE_MESSAGE); - section.classList.add('active'); - section.appendChild(div); - section.appendChild(buttonDiv); - this.divMessageConsole.appendChild(section); - - (async () => { - try{ - // Start loading CSS - const cssPromise = ConsoleGlobalMessageManager.loadCss(); - // Import quill - const {default: Quill}:any = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any - // Wait for CSS to be loaded - await cssPromise; - - const toolbarOptions = [ - ['bold', 'italic', 'underline', 'strike'], // toggled buttons - ['blockquote', 'code-block'], - - [{'header': 1}, {'header': 2}], // custom button values - [{'list': 'ordered'}, {'list': 'bullet'}], - [{'script': 'sub'}, {'script': 'super'}], // superscript/subscript - [{'indent': '-1'}, {'indent': '+1'}], // outdent/indent - [{'direction': 'rtl'}], // text direction - - [{'size': ['small', false, 'large', 'huge']}], // custom dropdown - [{'header': [1, 2, 3, 4, 5, 6, false]}], - - [{'color': []}, {'background': []}], // dropdown with defaults from theme - [{'font': []}], - [{'align': []}], - - ['clean'], - - ['link', 'image', 'video'] - // remove formatting button - ]; - - new Quill(`#${INPUT_CONSOLE_MESSAGE}`, { - theme: 'snow', - modules: { - toolbar: toolbarOptions - }, - }); - }catch(err){ - console.error(err); - } - })(); - } - - createUploadAudioPart(){ - const div = document.createElement('div'); - div.classList.add('upload'); - - const label = document.createElement('label'); - label.setAttribute('for', UPLOAD_CONSOLE_MESSAGE); - - const img = document.createElement('img'); - img.setAttribute('for', UPLOAD_CONSOLE_MESSAGE); - img.src = 'resources/logos/music-file.svg'; - - const input = document.createElement('input'); - input.type = 'file'; - input.id = UPLOAD_CONSOLE_MESSAGE - input.addEventListener('input', (e: Event) => { - if(!e.target){ - return; - } - const eventTarget : EventTargetFiles = (e.target as EventTargetFiles); - if(!eventTarget || !eventTarget.files || eventTarget.files.length === 0){ - return; - } - const file : File = eventTarget.files[0]; - - if(!file){ - return; - } - - try { - HtmlUtils.removeElementByIdOrFail('audi-message-filename'); - }catch (err) { - console.error(err) - } - - const p = document.createElement('p'); - p.id = 'audi-message-filename'; - p.innerText = `${file.name} : ${this.getFileSize(file.size)}`; - label.appendChild(p); - }); - - label.appendChild(img); - div.appendChild(label); - div.appendChild(input); - - const buttonSend = document.createElement('button'); - buttonSend.innerText = 'Send'; - buttonSend.classList.add('btn'); - buttonSend.addEventListener('click', (event: MouseEvent) => { - this.sendMessage(); - this.disabledMessageConsole(); - }); - const buttonDiv = document.createElement('div'); - buttonDiv.classList.add('btn-action'); - buttonDiv.appendChild(buttonSend) - - const section = document.createElement('section'); - section.id = this.getSectionId(UPLOAD_CONSOLE_MESSAGE); - section.appendChild(div); - section.appendChild(buttonDiv); - this.divMessageConsole.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(){ - const inputType = HtmlUtils.getElementByIdOrFail(INPUT_TYPE_CONSOLE); - if(AUDIO_TYPE !== inputType.value && MESSAGE_TYPE !== inputType.value){ - throw "Error event type"; - } - if(AUDIO_TYPE === inputType.value){ - return this.sendAudioMessage(); - } - return this.sendTextMessage(); - } - - private sendTextMessage(){ - const elements = document.getElementsByClassName('ql-editor'); - const quillEditor = elements.item(0); - if(!quillEditor){ - throw "Error get quill node"; - } - const GlobalMessage : PlayGlobalMessageInterface = { - id: "1", // FIXME: use another ID? - message: quillEditor.innerHTML, - type: MESSAGE_TYPE - }; - quillEditor.innerHTML = ''; - this.Connection.emitGlobalMessage(GlobalMessage); - } - - private async sendAudioMessage(){ - const inputAudio = HtmlUtils.getElementByIdOrFail(UPLOAD_CONSOLE_MESSAGE); - const selectedFile = inputAudio.files ? inputAudio.files[0] : null; - if(!selectedFile){ - throw 'no file selected'; - } - - const fd = new FormData(); - fd.append('file', selectedFile); - const res = await this.Connection.uploadAudio(fd); - - const GlobalMessage : PlayGlobalMessageInterface = { - id: (res as {id: string}).id, - message: (res as {path: string}).path, - type: AUDIO_TYPE - }; - inputAudio.value = ''; - try { - HtmlUtils.removeElementByIdOrFail('audi-message-filename'); - }catch (err) { - console.error(err); - } - this.Connection.emitGlobalMessage(GlobalMessage); - } - - active(){ - this.userInputManager.disableControls(); - this.divMainConsole.style.top = '0'; - this.activeConsole = true; - } - - disabled(){ - this.userInputManager.initKeyBoardEvent(); - this.activeConsole = false; - this.divMainConsole.style.top = '-80%'; - } - - activeMessageConsole(){ - if(!this.isAdmin){ - throw "User is not admin"; - } - if(this.activeMessage){ - this.disabledMessageConsole(); - return; - } - this.activeMessage = true; - this.active(); - this.divMessageConsole.classList.add('active'); - this.buttonMainConsole.hidden = false; - this.buttonSendMainConsole.classList.add('active'); - //if button not - try{ - HtmlUtils.getElementByIdOrFail('btn-send-message'); - }catch (e) { - this.buttonMainConsole.appendChild(this.buttonSendMainConsole); - } - } - - disabledMessageConsole(){ - this.activeMessage = false; - this.disabled(); - this.buttonMainConsole.hidden = true; - this.divMessageConsole.classList.remove('active'); - this.buttonSendMainConsole.classList.remove('active'); - } - - private getSectionId(id: string) : string { - return `section-${id}`; - } - - private getFileSize(number: number) :string { - if (number < 1024) { - return number + 'bytes'; - } else if (number >= 1024 && number < 1048576) { - return (number / 1024).toFixed(1) + 'KB'; - } else if (number >= 1048576) { - return (number / 1048576).toFixed(1) + 'MB'; - }else{ - return ''; - } - } -} diff --git a/front/src/Administration/GlobalMessageManager.ts b/front/src/Administration/GlobalMessageManager.ts index 1500a6ec..aae695fa 100644 --- a/front/src/Administration/GlobalMessageManager.ts +++ b/front/src/Administration/GlobalMessageManager.ts @@ -1,10 +1,10 @@ import {HtmlUtils} from "./../WebRtc/HtmlUtils"; -import {AUDIO_TYPE, MESSAGE_TYPE} from "./ConsoleGlobalMessageManager"; import {PUSHER_URL, UPLOADER_URL} from "../Enum/EnvironmentVariable"; import type {RoomConnection} from "../Connexion/RoomConnection"; import type {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels"; import {soundPlayingStore} from "../Stores/SoundPlayingStore"; import {soundManager} from "../Phaser/Game/SoundManager"; +import {AdminMessageEventTypes} from "../Connexion/AdminMessagesService"; export class GlobalMessageManager { @@ -36,11 +36,11 @@ export class GlobalMessageManager { previousMessage.remove(); } - if(AUDIO_TYPE === message.type){ + if(AdminMessageEventTypes.audio === message.type){ this.playAudioMessage(message.id, message.message); } - if(MESSAGE_TYPE === message.type){ + if(AdminMessageEventTypes.admin === message.type){ this.playTextMessage(message.id, message.message); } } diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte index a39f2dc7..448ac015 100644 --- a/front/src/Components/App.svelte +++ b/front/src/Components/App.svelte @@ -23,6 +23,8 @@ import AudioPlaying from "./UI/AudioPlaying.svelte"; import {soundPlayingStore} from "../Stores/SoundPlayingStore"; import ErrorDialog from "./UI/ErrorDialog.svelte"; + import {ConsoleGlobalMessageManagerVisibleStore} from "../Stores/ConsoleGlobalMessageManagerStore"; + import ConsoleGlobalMessageManager from "./ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte"; export let game: Game; @@ -72,6 +74,11 @@ {/if} + {#if $ConsoleGlobalMessageManagerVisibleStore} +
+ +
+ {/if} {#if $helpCameraSettingsVisibleStore}
diff --git a/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte b/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte new file mode 100644 index 00000000..93385419 --- /dev/null +++ b/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte @@ -0,0 +1,44 @@ + + + +
+ +
+

Global Message

+
+
+ + +
+
+ {#if inputSendTextActive} + + {/if} + {#if uploadMusicActive} + + {/if} +
+
+
+
\ No newline at end of file diff --git a/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte b/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte new file mode 100644 index 00000000..089c3254 --- /dev/null +++ b/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte @@ -0,0 +1,97 @@ + + + +
+
+
+ +
+
+ + + diff --git a/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte b/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte new file mode 100644 index 00000000..459d7273 --- /dev/null +++ b/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte @@ -0,0 +1,93 @@ + + + +
+
+ Upload a file {fileinput.click();}}> + {#if filename != undefined} + + {/if} + {inputAudioFile(e)}}> +
+
+ +
+
\ No newline at end of file diff --git a/front/src/Components/images/music-file.svg b/front/src/Components/images/music-file.svg new file mode 100644 index 00000000..a97656ba --- /dev/null +++ b/front/src/Components/images/music-file.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 72279c61..5913d718 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -58,7 +58,6 @@ import {connectionManager} from "../../Connexion/ConnectionManager"; import type {RoomConnection} from "../../Connexion/RoomConnection"; import {GlobalMessageManager} from "../../Administration/GlobalMessageManager"; import {userMessageManager} from "../../Administration/UserMessageManager"; -import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager"; import {ResizableScene} from "../Login/ResizableScene"; import {Room} from "../../Connexion/Room"; import {jitsiFactory} from "../../WebRtc/JitsiFactory"; @@ -152,7 +151,6 @@ export class GameScene extends DirtyScene implements CenterListener { public connection: RoomConnection|undefined; private simplePeer!: SimplePeer; private GlobalMessageManager!: GlobalMessageManager; - public ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager; private connectionAnswerPromise: Promise; private connectionAnswerPromiseResolve!: (value: RoomJoinedMessageInterface | PromiseLike) => void; // A promise that will resolve when the "create" method is called (signaling loading is ended) @@ -676,7 +674,6 @@ export class GameScene extends DirtyScene implements CenterListener { //this.initUsersPosition(roomJoinedMessage.users); this.connectionAnswerPromiseResolve(onConnect.room); // Analyze tags to find if we are admin. If yes, show console. - this.ConsoleGlobalMessageManager = new ConsoleGlobalMessageManager(this.connection, this.userInputManager, this.connection.isAdmin()); this.scene.wake(); diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts index 54fa395a..2d848467 100644 --- a/front/src/Phaser/Menu/MenuScene.ts +++ b/front/src/Phaser/Menu/MenuScene.ts @@ -11,6 +11,8 @@ import {WarningContainer, warningContainerHtml, warningContainerKey} from "../Co import {worldFullWarningStream} from "../../Connexion/WorldFullWarningStream"; import {menuIconVisible} from "../../Stores/MenuStore"; import {videoConstraintStore} from "../../Stores/MediaStore"; +import {ConsoleGlobalMessageManagerVisibleStore} from "../../Stores/ConsoleGlobalMessageManagerStore"; +import {get} from "svelte/store"; export const MenuSceneName = 'MenuScene'; const gameMenuKey = 'gameMenu'; @@ -159,7 +161,7 @@ export class MenuScene extends Phaser.Scene { this.sideMenuOpened = false; this.closeAll(); this.menuButton.getChildByID('openMenuButton').innerHTML = ``; - gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.disabledMessageConsole(); + ConsoleGlobalMessageManagerVisibleStore.set(false); this.tweens.add({ targets: this.menuElement, x: closedSideMenuX, @@ -304,7 +306,11 @@ export class MenuScene extends Phaser.Scene { this.toggleFullscreen(); break; case 'adminConsoleButton': - gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.activeMessageConsole(); + if (get(ConsoleGlobalMessageManagerVisibleStore)) { + ConsoleGlobalMessageManagerVisibleStore.set(false); + } else { + ConsoleGlobalMessageManagerVisibleStore.set(true); + } break; } } diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index 70bb9b1b..068e84a2 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -2,6 +2,7 @@ import type { Direction } from "../../types"; import type {GameScene} from "../Game/GameScene"; import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {MobileJoystick} from "../Components/MobileJoystick"; +import {enableUserInputsStore} from "../../Stores/UserInputStore"; interface UserInputManagerDatum { keyInstance: Phaser.Input.Keyboard.Key; @@ -58,6 +59,10 @@ export class UserInputManager { if (touchScreenManager.supportTouchScreen) { this.initVirtualJoystick(); } + + enableUserInputsStore.subscribe((enable) => { + enable ? this.restoreControls() : this.disableControls() + }) } initVirtualJoystick() { diff --git a/front/src/Stores/ConsoleGlobalMessageManagerStore.ts b/front/src/Stores/ConsoleGlobalMessageManagerStore.ts new file mode 100644 index 00000000..4c557d71 --- /dev/null +++ b/front/src/Stores/ConsoleGlobalMessageManagerStore.ts @@ -0,0 +1,5 @@ +import { writable } from "svelte/store"; + +export const ConsoleGlobalMessageManagerVisibleStore = writable(false); + +export const ConsoleGlobalMessageManagerFocusStore = writable(false); \ No newline at end of file diff --git a/front/src/Stores/UserInputStore.ts b/front/src/Stores/UserInputStore.ts new file mode 100644 index 00000000..b5b4de30 --- /dev/null +++ b/front/src/Stores/UserInputStore.ts @@ -0,0 +1,10 @@ +import {derived} from "svelte/store"; +import {ConsoleGlobalMessageManagerFocusStore,} from "./ConsoleGlobalMessageManagerStore"; + +//derived from the focus on Menu, ConsoleGlobal, Chat and ... +export const enableUserInputsStore = derived( + ConsoleGlobalMessageManagerFocusStore, + ($ConsoleGlobalMessageManagerFocusStore) => { + return !$ConsoleGlobalMessageManagerFocusStore; + } +); \ No newline at end of file diff --git a/front/style/index.scss b/front/style/index.scss index 7ed141cd..a6afa557 100644 --- a/front/style/index.scss +++ b/front/style/index.scss @@ -3,3 +3,4 @@ @import "style"; @import "mobile-style.scss"; @import "fonts.scss"; +@import "svelte-style.scss"; diff --git a/front/style/style.scss b/front/style/style.scss index beed1db5..5c958309 100644 --- a/front/style/style.scss +++ b/front/style/style.scss @@ -627,17 +627,15 @@ input[type=range]:focus::-ms-fill-upper { grid-template-columns: repeat(4, 1fr); } -/*CONSOLE*/ - -.message-container, -.main-console{ +/*GLOBAL MESSAGE*/ +.message-container { position: absolute; width: 80%; height: 80%; min-height: 200px; max-height: 80%; top: -80%; - /*left: 10%;*/ + //left: 10%; left: 250px; background: #333333; z-index: 200; @@ -660,7 +658,6 @@ input[type=range]:focus::-ms-fill-upper { max-height: 400px; } -.main-console div.console, .message-container div.clear { position: absolute; color: white; @@ -675,22 +672,11 @@ input[type=range]:focus::-ms-fill-upper { 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); } -.main-console div.console img, .message-container div.clear img{ margin-top: 6px; width: 30px; @@ -701,112 +687,26 @@ input[type=range]:focus::-ms-fill-upper { 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: 12px; } -.main-console div.console:hover, .message-container div.clear:hover { cursor: url('./images/cursor_pointer.png'), pointer; top: calc(100% + 5px); transform: scale(1.2) translateY(3px); } -.main-console #input-send-text{ - min-height: 200px; -} - -.main-console #input-send-text .ql-editor{ - color: white; - min-height: 200px; - max-height: 300px; -} - -.main-console .ql-toolbar{ - background: white; -} - -.main-console .btn-action{ - margin: 10px; - text-align: center; -} - -.main-console .btn-action .btn{ - border: 1px solid black; - background-color: #00000000; - color: #ffda01; - border-radius: 15px; - padding: 10px 30px; - transition: all .2s ease; -} -.main-console .btn-action .btn:hover{ - cursor: url('./images/cursor_pointer.png'), pointer; - background-color: #ffda01; - color: black; - border: 1px solid black; - transform: scale(1.1); -} - -.main-console .menu { - padding: 20px; - color: #ffffffa6; - text-align: center; -} - -.main-console .menu span { - margin: 20px; - cursor: url('./images/cursor_pointer.png'), pointer; -} - -.main-console .menu span.active { - color: white; - border-bottom: solid 1px white; -} - -.main-console section{ - text-align: center; - display: none; -} - -.main-console section.active{ - display: block; -} - -.main-console section div.upload{ - text-align: center; - border: solid 1px #ffda01; - height: 150px; - margin: 10px 200px; - padding: 20px; - min-height: 200px; -} - -.main-console section div.upload label{ - color: #ffda01; -} -.main-console section div.upload input{ - display: none; -} -.main-console section div.upload label img{ - height: 150px; - cursor: url('./images/cursor_pointer.png'), pointer; -} -.main-console section div.upload label img{ - cursor: url('./images/cursor_pointer.png'), pointer; -} - /* VIDEO QUALITY */ .main-console div.setting h1{ diff --git a/front/style/svelte-style.scss b/front/style/svelte-style.scss new file mode 100644 index 00000000..bb85fb2b --- /dev/null +++ b/front/style/svelte-style.scss @@ -0,0 +1,82 @@ +//Contains all styles not unique to a svelte component. + +//ConsoleGlobalMessage +div.main-console.nes-container { + pointer-events: auto; + margin-left: auto; + margin-right: auto; + top: 20vh; + width: 50vw; + height: 50vh; + padding: 0; + background-color: #333333; + + .btn-action{ + margin: 10px; + text-align: center; + } + + .main-global-message { + width: 100%; + max-height: 100%; + } + + .main-global-message h2 { + text-align: center; + color: white; + } + + div.global-message { + display: flex; + max-height: 100%; + width: 100%; + } + + div.menu { + flex: auto; + } + + div.menu button { + margin: 7px; + } + + .main-input { + width: 95%; + } + +//InputTextGlobalMessage + .section-input-send-text { + margin: 10px; + } + + .section-input-send-text .input-send-text .ql-editor{ + color: white; + min-height: 200px; + } + + .section-input-send-text .ql-toolbar{ + background: white; + } + +//UploadAudioGlobalMessage + .section-input-send-audio { + margin: 10px; + } + + .section-input-send-audio .input-send-audio { + text-align: center; + } + + .section-input-send-audio #input-send-audio{ + display: none; + } + + .section-input-send-audio div.input-send-audio label{ + color: white; + } + + .section-input-send-audio div.input-send-audio img{ + height: 150px; + cursor: url('./images/cursor_pointer.png'), pointer; + } +}