Graphic upgrade of the global message console

Fix: error if LoginScene doesn't exist
This commit is contained in:
GRL 2021-07-15 15:09:35 +02:00
parent 5f43aeba85
commit e43ea3aa5e
5 changed files with 132 additions and 98 deletions

View File

@ -1,8 +1,10 @@
<script lang="typescript"> <script lang="typescript">
import { fly } from 'svelte/transition';
import InputTextGlobalMessage from "./InputTextGlobalMessage.svelte"; import InputTextGlobalMessage from "./InputTextGlobalMessage.svelte";
import UploadAudioGlobalMessage from "./UploadAudioGlobalMessage.svelte"; import UploadAudioGlobalMessage from "./UploadAudioGlobalMessage.svelte";
import { gameManager } from "../../Phaser/Game/GameManager"; import { gameManager } from "../../Phaser/Game/GameManager";
import type { Game } from "../../Phaser/Game/Game"; import type { Game } from "../../Phaser/Game/Game";
import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
export let game: Game; export let game: Game;
let inputSendTextActive = true; let inputSendTextActive = true;
@ -20,23 +22,21 @@
</script> </script>
<div class="main-console nes-container is-rounded"> <div class="console-global-message nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
<!-- <div class="console nes-container is-rounded"> <div class="console-global-message-main">
<img class="btn-close" src="resources/logos/send-yellow.svg" alt="Close">
</div>-->
<div class="main-global-message">
<h2> Global Message </h2> <h2> Global Message </h2>
<div class="global-message"> <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="menu"> <div class="console-global-message-content">
<button class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button> <div class="console-global-message-menu">
<button class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button> <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>
<div class="main-input"> <div class="console-global-message-main-input">
{#if inputSendTextActive} {#if inputSendTextActive}
<InputTextGlobalMessage game={game} gameManager={gameManager}></InputTextGlobalMessage> <InputTextGlobalMessage game={game} gameManager={gameManager}/>
{/if} {/if}
{#if uploadMusicActive} {#if uploadMusicActive}
<UploadAudioGlobalMessage game={game} gameManager={gameManager}></UploadAudioGlobalMessage> <UploadAudioGlobalMessage game={game} gameManager={gameManager}/>
{/if} {/if}
</div> </div>
</div> </div>

View File

@ -6,7 +6,6 @@
import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels"; import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels";
import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService"; import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService";
import type {Quill} from "quill"; import type {Quill} from "quill";
import {LoginSceneName} from "../../Phaser/Login/LoginScene";
//toolbar //toolbar
export const toolbarOptions = [ export const toolbarOptions = [
@ -35,7 +34,7 @@
export let game: Game; export let game: Game;
export let gameManager: GameManager; export let gameManager: GameManager;
let gameScene = gameManager.getCurrentGameScene(game.scene.getScene(LoginSceneName)); let gameScene = gameManager.getCurrentGameScene(game.findAnyScene());
let quill: Quill; let quill: Quill;
let INPUT_CONSOLE_MESSAGE: HTMLDivElement; let INPUT_CONSOLE_MESSAGE: HTMLDivElement;
@ -48,6 +47,7 @@
const {default: Quill} = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any const {default: Quill} = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
quill = new Quill(INPUT_CONSOLE_MESSAGE, { quill = new Quill(INPUT_CONSOLE_MESSAGE, {
placeholder: 'Enter your message here...',
theme: 'snow', theme: 'snow',
modules: { modules: {
toolbar: toolbarOptions toolbar: toolbarOptions
@ -88,7 +88,7 @@
<section class="section-input-send-text"> <section class="section-input-send-text">
<div class="input-send-text" bind:this={INPUT_CONSOLE_MESSAGE}></div> <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> <button class="nes-btn is-primary" on:click|preventDefault={SendTextMessage}>Send</button>
</div> </div>
</section> </section>

View File

@ -6,7 +6,6 @@
import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService"; import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService";
import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels"; import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels";
import uploadFile from "../images/music-file.svg"; import uploadFile from "../images/music-file.svg";
import {LoginSceneName} from "../../Phaser/Login/LoginScene";
interface EventTargetFiles extends EventTarget { interface EventTargetFiles extends EventTarget {
files: Array<File>; files: Array<File>;
@ -15,7 +14,7 @@
export let game: Game; export let game: Game;
export let gameManager: GameManager; export let gameManager: GameManager;
let gameScene = gameManager.getCurrentGameScene(game.scene.getScene(LoginSceneName)); let gameScene = gameManager.getCurrentGameScene(game.findAnyScene());
let fileinput: HTMLInputElement; let fileinput: HTMLInputElement;
let filename: string; let filename: string;
let filesize: string; let filesize: string;
@ -85,46 +84,15 @@
<section class="section-input-send-audio"> <section class="section-input-send-audio">
<div class="input-send-audio">
<img src="{uploadFile}" alt="Upload a file" on:click|preventDefault={ () => {fileinput.click();}}> <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> <label for="input-send-audio">{filename} : {filesize}</label>
{/if} {/if}
{#if errorfile} {#if errorfile}
<p class="err">No file selected. You need to upload a file before sending it.</p> <p class="err">No file selected. You need to upload a file before sending it.</p>
{/if} {/if}
<input type="file" id="input-send-audio" bind:this={fileinput} on:change={(e) => {inputAudioFile(e)}}> <input type="file" id="input-send-audio" bind:this={fileinput} on:change={(e) => {inputAudioFile(e)}}>
</div> <div class="footer-btn-action">
<div class="btn-action">
<button class="nes-btn is-primary" on:click|preventDefault={SendAudioMessage}>Send</button> <button class="nes-btn is-primary" on:click|preventDefault={SendAudioMessage}>Send</button>
</div> </div>
</section> </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>

View File

@ -14,10 +14,8 @@ const Events = Phaser.Core.Events;
* It also automatically calls "onResize" on any scenes extending ResizableScene. * It also automatically calls "onResize" on any scenes extending ResizableScene.
*/ */
export class Game extends Phaser.Game { export class Game extends Phaser.Game {
private _isDirty = false; private _isDirty = false;
constructor(GameConfig: Phaser.Types.Core.GameConfig) { constructor(GameConfig: Phaser.Types.Core.GameConfig) {
super(GameConfig); super(GameConfig);
@ -27,7 +25,7 @@ export class Game extends Phaser.Game {
scene.onResize(); scene.onResize();
} }
} }
}) });
/*window.addEventListener('resize', (event) => { /*window.addEventListener('resize', (event) => {
// Let's trigger the onResize method of any active scene that is a ResizableScene // 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 // @ts-ignore
if (this.pendingDestroy) if (this.pendingDestroy) {
{
// @ts-ignore // @ts-ignore
return this.runDestroy(); return this.runDestroy();
} }
@ -100,15 +96,17 @@ export class Game extends Phaser.Game {
} }
// Loop through the scenes in forward order // 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 scene = this.scene.scenes[i];
const sys = scene.sys; 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 // @ts-ignore
if(typeof scene.isDirty === 'function') { if (typeof scene.isDirty === "function") {
// @ts-ignore // @ts-ignore
const isDirty = scene.isDirty() || scene.tweens.getAllTweens().length > 0; const isDirty = scene.isDirty() || scene.tweens.getAllTweens().length > 0;
if (isDirty) { if (isDirty) {
@ -129,4 +127,11 @@ export class Game extends Phaser.Game {
public markDirty(): void { public markDirty(): void {
this._isDirty = true; this._isDirty = true;
} }
/**
* Return the first scene found in the game
*/
public findAnyScene(): Phaser.Scene {
return this.scene.getScenes()[0];
}
} }

View File

@ -1,7 +1,7 @@
//Contains all styles not unique to a svelte component. //Contains all styles not unique to a svelte component.
//ConsoleGlobalMessage //ConsoleGlobalMessage
div.main-console.nes-container { div.console-global-message.nes-container {
pointer-events: auto; pointer-events: auto;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -11,50 +11,111 @@ div.main-console.nes-container {
padding: 0; padding: 0;
background-color: #333333; background-color: #333333;
.btn-action{ .console-global-message-main {
margin: 10px;
text-align: center;
}
.main-global-message {
width: 100%; width: 100%;
max-height: 100%; height: 100%;
}
.main-global-message h2 { h2 {
margin-bottom: 20px;
text-align: center; text-align: center;
color: white; color: white;
} }
div.global-message { .console-global-message-close {
position: absolute;
right: 0;
top: 0;
}
}
div.console-global-message-content {
display: flex; display: flex;
max-height: 100%; flex-flow: row;
height: calc(100% - (36px + 20px));
width: 100%; width: 100%;
} }
div.menu { div.console-global-message-menu {
flex: auto; flex: 0 1 auto;
}
div.menu button { button {
margin: 7px; margin: 7px;
} }
.main-input {
width: 95%;
} }
.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 //InputTextGlobalMessage
.section-input-send-text { .section-input-send-text {
margin: 10px; flex: 1 1 auto;
} display: flex;
flex-flow: column;
height: 100%;
.section-input-send-text .input-send-text .ql-editor{ .ql-toolbar{
color: white; flex: 0 1 auto;
min-height: 200px;
}
.section-input-send-text .ql-toolbar{
background: white; 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;
}
}
}
//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;
}
} }