Lukas Hass
122 lines
3.5 KiB
Svelte
122 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import { menuInputFocusStore } from "../../Stores/MenuStore";
|
|
import { onDestroy, onMount } from "svelte";
|
|
import { gameManager } from "../../Phaser/Game/GameManager";
|
|
import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
|
|
import Quill from "quill";
|
|
import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
|
|
import LL from "../../i18n/i18n-svelte";
|
|
|
|
//toolbar
|
|
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"], // remove formatting button
|
|
|
|
["link", "image", "video"],
|
|
];
|
|
|
|
const gameScene = gameManager.getCurrentGameScene();
|
|
const MESSAGE_TYPE = AdminMessageEventTypes.admin;
|
|
let quill: Quill;
|
|
let QUILL_EDITOR: HTMLDivElement;
|
|
|
|
export const handleSending = {
|
|
sendTextMessage(broadcastToWorld: boolean) {
|
|
if (gameScene == undefined) {
|
|
return;
|
|
}
|
|
const text = JSON.stringify(quill.getContents(0, quill.getLength()));
|
|
|
|
const textGlobalMessage: PlayGlobalMessageInterface = {
|
|
type: MESSAGE_TYPE,
|
|
content: text,
|
|
broadcastToWorld: broadcastToWorld,
|
|
};
|
|
|
|
quill.deleteText(0, quill.getLength());
|
|
gameScene.connection?.emitGlobalMessage(textGlobalMessage);
|
|
},
|
|
};
|
|
|
|
//Quill
|
|
onMount(() => {
|
|
quill = new Quill(QUILL_EDITOR, {
|
|
placeholder: $LL.menu.globalMessage.enter(),
|
|
theme: "snow",
|
|
modules: {
|
|
toolbar: toolbarOptions,
|
|
},
|
|
});
|
|
menuInputFocusStore.set(true);
|
|
});
|
|
|
|
onDestroy(() => {
|
|
menuInputFocusStore.set(false);
|
|
});
|
|
</script>
|
|
|
|
<section class="section-input-send-text">
|
|
<div class="input-send-text" bind:this={QUILL_EDITOR} />
|
|
</section>
|
|
|
|
<style lang="scss">
|
|
@import "../../../style/breakpoints.scss";
|
|
@import "quill/dist/quill.snow.css";
|
|
|
|
section.section-input-send-text {
|
|
--height-toolbar: 20%;
|
|
height: 100%;
|
|
|
|
:global(.ql-toolbar) {
|
|
max-height: var(--height-toolbar);
|
|
background: whitesmoke;
|
|
}
|
|
|
|
div.input-send-text {
|
|
height: calc(100% - var(--height-toolbar));
|
|
overflow: auto;
|
|
|
|
color: whitesmoke;
|
|
font-size: 1rem;
|
|
|
|
:global(.ql-editor.ql-blank::before) {
|
|
color: whitesmoke;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
:global(.ql-tooltip) {
|
|
top: 40% !important;
|
|
left: 20% !important;
|
|
|
|
color: whitesmoke;
|
|
background-color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
section.section-input-send-text {
|
|
--height-toolbar: 30%;
|
|
|
|
:global(.ql-toolbar) {
|
|
overflow: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|