Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display multiple admin messages

Browse source
This commit is contained in:
Alban Bruder 2021-12-24 12:15:54 +01:00
parent e220bf56db
commit 00e0a14a37
9 changed files with 106 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

17
front/src/Components/App.svelte
View file

@ -30,10 +30,10 @@
import EmoteMenu from "./EmoteMenu/EmoteMenu.svelte";
import VideoOverlay from "./Video/VideoOverlay.svelte";
import { gameOverlayVisibilityStore } from "../Stores/GameOverlayStoreVisibility";
import AdminMessage from "./TypeMessage/BanMessage.svelte";
import TextMessage from "./TypeMessage/TextMessage.svelte";
import { banMessageVisibleStore } from "../Stores/TypeMessageStore/BanMessageStore";
import { textMessageVisibleStore } from "../Stores/TypeMessageStore/TextMessageStore";
import BanMessageContainer from "./TypeMessage/BanMessageContainer.svelte";
import TextMessageContainer from "./TypeMessage/TextMessageContainer.svelte";
import { banMessageStore } from "../Stores/TypeMessageStore/BanMessageStore";
import { textMessageStore } from "../Stores/TypeMessageStore/TextMessageStore";
import { warningContainerStore } from "../Stores/MenuStore";
import WarningContainer from "./WarningContainer/WarningContainer.svelte";
import { layoutManagerVisibilityStore } from "../Stores/LayoutManagerStore";
@ -72,14 +72,13 @@
<EnableCameraScene {game} />
</div>
{/if}
{#if $banMessageVisibleStore}
{#if $banMessageStore.length > 0}
<div>
<AdminMessage />
<BanMessageContainer />
</div>
{/if}
{#if $textMessageVisibleStore}
{:else if $textMessageStore.length > 0}
<div>
<TextMessage />
<TextMessageContainer />
</div>
{/if}
{#if $soundPlayingStore}

18
front/src/Components/TypeMessage/BanMessage.svelte
View file

@ -1,9 +1,11 @@
<script lang="ts">
import { fly } from "svelte/transition";
import { banMessageVisibleStore, banMessageContentStore } from "../../Stores/TypeMessageStore/BanMessageStore";
import { fly, fade } from "svelte/transition";
import { onMount } from "svelte";
import type { Message } from "../../Stores/TypeMessageStore/MessageStore";
import { banMessageStore } from "../../Stores/TypeMessageStore/BanMessageStore";
export let message: Message;
const text = $banMessageContentStore;
const NAME_BUTTON = "Ok";
let nbSeconds = 10;
let nameButton = "";
@ -25,17 +27,21 @@
}
function closeBanMessage() {
banMessageVisibleStore.set(false);
banMessageStore.clearMessageById(message.id);
}
</script>
<div class="main-ban-message nes-container is-rounded" transition:fly={{ y: -1000, duration: 500 }}>
<div
class="main-ban-message nes-container is-rounded"
in:fly={{ y: -1000, duration: 500, delay: 250 }}
out:fade={{ duration: 200 }}
>
<h2 class="title-ban-message">
<img src="resources/logos/report.svg" alt="***" /> Important message
<img src="resources/logos/report.svg" alt="***" />
</h2>
<div class="content-ban-message">
<p>{text}</p>
<p>{message.text}</p>
</div>
<div class="footer-ban-message">
<button

13
front/src/Components/TypeMessage/BanMessageContainer.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import { flip } from "svelte/animate";
import { banMessageStore } from "../../Stores/TypeMessageStore/BanMessageStore";
import BanMessage from "./BanMessage.svelte";
</script>
<div class="main-ban-message-container">
{#each $banMessageStore.slice(0, 1) as message (message.id)}
<div animate:flip={{ duration: 250 }}>
<BanMessage {message} />
</div>
{/each}
</div>

19
front/src/Components/TypeMessage/TextMessage.svelte
View file

@ -1,14 +1,17 @@
<script lang="ts">
import { fly } from "svelte/transition";
import { textMessageContentStore, textMessageVisibleStore } from "../../Stores/TypeMessageStore/TextMessageStore";
import { fly, fade } from "svelte/transition";
import { QuillDeltaToHtmlConverter } from "quill-delta-to-html";
import type { Message } from "../../Stores/TypeMessageStore/MessageStore";
import { textMessageStore } from "../../Stores/TypeMessageStore/TextMessageStore";
const content = JSON.parse($textMessageContentStore);
export let message: Message;
const content = JSON.parse(message.text);
const converter = new QuillDeltaToHtmlConverter(content.ops, { inlineStyles: true });
const NAME_BUTTON = "Ok";
function closeTextMessage() {
textMessageVisibleStore.set(false);
textMessageStore.clearMessageById(message.id);
}
function onKeyDown(e: KeyboardEvent) {
@ -20,7 +23,11 @@
<svelte:window on:keydown={onKeyDown} />
<div class="main-text-message nes-container is-rounded" transition:fly={{ x: -1000, duration: 500 }}>
<div
class="main-text-message nes-container is-rounded"
in:fly={{ x: -1000, duration: 500, delay: 250 }}
out:fade={{ duration: 250 }}
>
<div class="content-text-message">
{@html converter.convert()}
</div>
@ -40,6 +47,8 @@
width: 80vw;
margin-right: auto;
margin-left: auto;
margin-bottom: 16px;
margin-top: 0;
padding-bottom: 0;
pointer-events: auto;

21
front/src/Components/TypeMessage/TextMessageContainer.svelte Normal file
View file

@ -0,0 +1,21 @@
<script lang="ts">
import { flip } from "svelte/animate";
import TextMessage from "./TextMessage.svelte";
import { textMessageStore } from "../../Stores/TypeMessageStore/TextMessageStore";
const MAX_MESSAGES = 3;
</script>
<div class="main-text-message-container">
{#each $textMessageStore.slice(0, MAX_MESSAGES) as message (message.id)}
<div animate:flip={{ duration: 250 }}>
<TextMessage {message} />
</div>
{/each}
</div>
<style lang="scss">
div.main-text-message-container {
padding-top: 16px;
}
</style>