Graphic upgrade of the global message console
Fix: error if LoginScene doesn't exist
This commit is contained in:
GRL
parent
5f43aeba85
commit
e43ea3aa5e
@ -1,8 +1,10 @@
|
||||
<script lang="typescript">
|
||||
import { fly } from 'svelte/transition';
|
||||
import InputTextGlobalMessage from "./InputTextGlobalMessage.svelte";
|
||||
import UploadAudioGlobalMessage from "./UploadAudioGlobalMessage.svelte";
|
||||
import {gameManager} from "../../Phaser/Game/GameManager";
|
||||
import type {Game} from "../../Phaser/Game/Game";
|
||||
import { gameManager } from "../../Phaser/Game/GameManager";
|
||||
import type { Game } from "../../Phaser/Game/Game";
|
||||
import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
|
||||
|
||||
export let game: Game;
|
||||
let inputSendTextActive = true;
|
||||
@ -20,23 +22,21 @@
|
||||
</script>
|
||||
|
||||
|
||||
<div class="main-console nes-container is-rounded">
|
||||
<!-- <div class="console nes-container is-rounded">
|
||||
<img class="btn-close" src="resources/logos/send-yellow.svg" alt="Close">
|
||||
</div>-->
|
||||
<div class="main-global-message">
|
||||
<div class="console-global-message nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
|
||||
<div class="console-global-message-main">
|
||||
<h2> Global Message </h2>
|
||||
<div class="global-message">
|
||||
<div class="menu">
|
||||
<button class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button>
|
||||
<button class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button>
|
||||
<button type="button" class="console-global-message-close nes-btn is-error" on:click|preventDefault={() => consoleGlobalMessageManagerVisibleStore.set(false)}><i class="nes-icon close is-small"></i></button>
|
||||
<div class="console-global-message-content">
|
||||
<div class="console-global-message-menu">
|
||||
<button type="button" class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button>
|
||||
<button type="button" class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button>
|
||||
</div>
|
||||
<div class="main-input">
|
||||
<div class="console-global-message-main-input">
|
||||
{#if inputSendTextActive}
|
||||
<InputTextGlobalMessage game={game} gameManager={gameManager}></InputTextGlobalMessage>
|
||||
<InputTextGlobalMessage game={game} gameManager={gameManager}/>
|
||||
{/if}
|
||||
{#if uploadMusicActive}
|
||||
<UploadAudioGlobalMessage game={game} gameManager={gameManager}></UploadAudioGlobalMessage>
|
||||
<UploadAudioGlobalMessage game={game} gameManager={gameManager}/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels";
|
||||
import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService";
|
||||
import type {Quill} from "quill";
|
||||
import {LoginSceneName} from "../../Phaser/Login/LoginScene";
|
||||
|
||||
//toolbar
|
||||
export const toolbarOptions = [
|
||||
@ -35,7 +34,7 @@
|
||||
export let game: Game;
|
||||
export let gameManager: GameManager;
|
||||
|
||||
let gameScene = gameManager.getCurrentGameScene(game.scene.getScene(LoginSceneName));
|
||||
let gameScene = gameManager.getCurrentGameScene(game.findAnyScene());
|
||||
let quill: Quill;
|
||||
let INPUT_CONSOLE_MESSAGE: HTMLDivElement;
|
||||
|
||||
@ -48,6 +47,7 @@
|
||||
const {default: Quill} = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
|
||||
|
||||
quill = new Quill(INPUT_CONSOLE_MESSAGE, {
|
||||
placeholder: 'Enter your message here...',
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: toolbarOptions
|
||||
@ -88,7 +88,7 @@
|
||||
|
||||
<section class="section-input-send-text">
|
||||
<div class="input-send-text" bind:this={INPUT_CONSOLE_MESSAGE}></div>
|
||||
<div class="btn-action">
|
||||
<div class="footer-btn-action">
|
||||
<button class="nes-btn is-primary" on:click|preventDefault={SendTextMessage}>Send</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService";
|
||||
import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels";
|
||||
import uploadFile from "../images/music-file.svg";
|
||||
import {LoginSceneName} from "../../Phaser/Login/LoginScene";
|
||||
|
||||
interface EventTargetFiles extends EventTarget {
|
||||
files: Array<File>;
|
||||
@ -15,7 +14,7 @@
|
||||
export let game: Game;
|
||||
export let gameManager: GameManager;
|
||||
|
||||
let gameScene = gameManager.getCurrentGameScene(game.scene.getScene(LoginSceneName));
|
||||
let gameScene = gameManager.getCurrentGameScene(game.findAnyScene());
|
||||
let fileinput: HTMLInputElement;
|
||||
let filename: string;
|
||||
let filesize: string;
|
||||
@ -85,46 +84,15 @@
|
||||
|
||||
|
||||
<section class="section-input-send-audio">
|
||||
<div class="input-send-audio">
|
||||
<img src="{uploadFile}" alt="Upload a file" on:click|preventDefault={ () => {fileinput.click();}}>
|
||||
{#if filename != undefined}
|
||||
{#if filename !== undefined}
|
||||
<label for="input-send-audio">{filename} : {filesize}</label>
|
||||
{/if}
|
||||
{#if errorfile}
|
||||
<p class="err">No file selected. You need to upload a file before sending it.</p>
|
||||
{/if}
|
||||
<input type="file" id="input-send-audio" bind:this={fileinput} on:change={(e) => {inputAudioFile(e)}}>
|
||||
</div>
|
||||
<div class="btn-action">
|
||||
<div class="footer-btn-action">
|
||||
<button class="nes-btn is-primary" on:click|preventDefault={SendAudioMessage}>Send</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
//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 p.err {
|
||||
color: #ce372b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-input-send-audio div.input-send-audio img{
|
||||
height: 150px;
|
||||
cursor: url('../../../style/images/cursor_pointer.png'), pointer;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
import {SKIP_RENDER_OPTIMIZATIONS} from "../../Enum/EnvironmentVariable";
|
||||
import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
|
||||
import {waScaleManager} from "../Services/WaScaleManager";
|
||||
import {ResizableScene} from "../Login/ResizableScene";
|
||||
import { SKIP_RENDER_OPTIMIZATIONS } from "../../Enum/EnvironmentVariable";
|
||||
import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
|
||||
import { waScaleManager } from "../Services/WaScaleManager";
|
||||
import { ResizableScene } from "../Login/ResizableScene";
|
||||
|
||||
const Events = Phaser.Core.Events;
|
||||
|
||||
@ -14,10 +14,8 @@ const Events = Phaser.Core.Events;
|
||||
* It also automatically calls "onResize" on any scenes extending ResizableScene.
|
||||
*/
|
||||
export class Game extends Phaser.Game {
|
||||
|
||||
private _isDirty = false;
|
||||
|
||||
|
||||
constructor(GameConfig: Phaser.Types.Core.GameConfig) {
|
||||
super(GameConfig);
|
||||
|
||||
@ -27,7 +25,7 @@ export class Game extends Phaser.Game {
|
||||
scene.onResize();
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
/*window.addEventListener('resize', (event) => {
|
||||
// Let's trigger the onResize method of any active scene that is a ResizableScene
|
||||
@ -39,11 +37,9 @@ export class Game extends Phaser.Game {
|
||||
});*/
|
||||
}
|
||||
|
||||
public step(time: number, delta: number)
|
||||
{
|
||||
public step(time: number, delta: number) {
|
||||
// @ts-ignore
|
||||
if (this.pendingDestroy)
|
||||
{
|
||||
if (this.pendingDestroy) {
|
||||
// @ts-ignore
|
||||
return this.runDestroy();
|
||||
}
|
||||
@ -100,15 +96,17 @@ export class Game extends Phaser.Game {
|
||||
}
|
||||
|
||||
// Loop through the scenes in forward order
|
||||
for (let i = 0; i < this.scene.scenes.length; i++)
|
||||
{
|
||||
for (let i = 0; i < this.scene.scenes.length; i++) {
|
||||
const scene = this.scene.scenes[i];
|
||||
const sys = scene.sys;
|
||||
|
||||
if (sys.settings.visible && sys.settings.status >= Phaser.Scenes.LOADING && sys.settings.status < Phaser.Scenes.SLEEPING)
|
||||
{
|
||||
if (
|
||||
sys.settings.visible &&
|
||||
sys.settings.status >= Phaser.Scenes.LOADING &&
|
||||
sys.settings.status < Phaser.Scenes.SLEEPING
|
||||
) {
|
||||
// @ts-ignore
|
||||
if(typeof scene.isDirty === 'function') {
|
||||
if (typeof scene.isDirty === "function") {
|
||||
// @ts-ignore
|
||||
const isDirty = scene.isDirty() || scene.tweens.getAllTweens().length > 0;
|
||||
if (isDirty) {
|
||||
@ -129,4 +127,11 @@ export class Game extends Phaser.Game {
|
||||
public markDirty(): void {
|
||||
this._isDirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the first scene found in the game
|
||||
*/
|
||||
public findAnyScene(): Phaser.Scene {
|
||||
return this.scene.getScenes()[0];
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
//Contains all styles not unique to a svelte component.
|
||||
|
||||
//ConsoleGlobalMessage
|
||||
div.main-console.nes-container {
|
||||
div.console-global-message.nes-container {
|
||||
pointer-events: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@ -11,50 +11,111 @@ div.main-console.nes-container {
|
||||
padding: 0;
|
||||
background-color: #333333;
|
||||
|
||||
.btn-action{
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-global-message {
|
||||
.console-global-message-main {
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.console-global-message-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-global-message h2 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.global-message {
|
||||
div.console-global-message-content {
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
flex-flow: row;
|
||||
height: calc(100% - (36px + 20px));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.menu {
|
||||
flex: auto;
|
||||
div.console-global-message-menu {
|
||||
flex: 0 1 auto;
|
||||
|
||||
button {
|
||||
margin: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
div.menu button {
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
.main-input {
|
||||
.console-global-message-main-input {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 95%;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
.footer-btn-action {
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//InputTextGlobalMessage
|
||||
.section-input-send-text {
|
||||
margin: 10px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
|
||||
.ql-toolbar{
|
||||
flex: 0 1 auto;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.input-send-text{
|
||||
flex: 1 1 auto;
|
||||
max-height: calc(100% - 55px);
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
|
||||
.ql-editor.ql-blank::before {
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
flex: 1 1 auto;
|
||||
height: 60%;
|
||||
margin-bottom: 10px;
|
||||
cursor: url('images/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
label {
|
||||
flex: 0 1 auto;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p.err {
|
||||
flex: 0 1 auto;
|
||||
color: #ce372b;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#input-send-audio {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user