Display multiple admin messages

front/src/Administration/UserMessageManager.ts

@@ -1,27 +1,22 @@
 import { AdminMessageEventTypes, adminMessagesService } from "../Connexion/AdminMessagesService";
-import { textMessageContentStore, textMessageVisibleStore } from "../Stores/TypeMessageStore/TextMessageStore";
+import { textMessageStore } from "../Stores/TypeMessageStore/TextMessageStore";
 import { soundPlayingStore } from "../Stores/SoundPlayingStore";
 import { UPLOADER_URL } from "../Enum/EnvironmentVariable";
-import { banMessageContentStore, banMessageVisibleStore } from "../Stores/TypeMessageStore/BanMessageStore";
+import { banMessageStore } from "../Stores/TypeMessageStore/BanMessageStore";
 
 class UserMessageManager {
     receiveBannedMessageListener!: Function;
 
     constructor() {
         adminMessagesService.messageStream.subscribe((event) => {
-            textMessageVisibleStore.set(false);
-            banMessageVisibleStore.set(false);
             if (event.type === AdminMessageEventTypes.admin) {
-                textMessageContentStore.set(event.text);
+                textMessageStore.addMessage(event.text);
-                textMessageVisibleStore.set(true);
             } else if (event.type === AdminMessageEventTypes.audio) {
                 soundPlayingStore.playSound(UPLOADER_URL + event.text);
             } else if (event.type === AdminMessageEventTypes.ban) {
-                banMessageContentStore.set(event.text);
+                banMessageStore.addMessage(event.text);
-                banMessageVisibleStore.set(true);
             } else if (event.type === AdminMessageEventTypes.banned) {
-                banMessageContentStore.set(event.text);
+                banMessageStore.addMessage(event.text);
-                banMessageVisibleStore.set(true);
                 this.receiveBannedMessageListener();
             }
         });

front/src/Components/App.svelte

@@ -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 BanMessageContainer from "./TypeMessage/BanMessageContainer.svelte";
-    import TextMessage from "./TypeMessage/TextMessage.svelte";
+    import TextMessageContainer from "./TypeMessage/TextMessageContainer.svelte";
-    import { banMessageVisibleStore } from "../Stores/TypeMessageStore/BanMessageStore";
+    import { banMessageStore } from "../Stores/TypeMessageStore/BanMessageStore";
-    import { textMessageVisibleStore } from "../Stores/TypeMessageStore/TextMessageStore";
+    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}
+    {:else if $textMessageStore.length > 0}
-    {#if $textMessageVisibleStore}
         <div>
-            <TextMessage />
+            <TextMessageContainer />
         </div>
     {/if}
     {#if $soundPlayingStore}

front/src/Components/TypeMessage/BanMessage.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-    import { fly } from "svelte/transition";
+    import { fly, fade } from "svelte/transition";
-    import { banMessageVisibleStore, banMessageContentStore } from "../../Stores/TypeMessageStore/BanMessageStore";
     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

front/src/Components/TypeMessage/BanMessageContainer.svelte

@@ -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>

front/src/Components/TypeMessage/TextMessage.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
-    import { fly } from "svelte/transition";
+    import { fly, fade } from "svelte/transition";
-    import { textMessageContentStore, textMessageVisibleStore } from "../../Stores/TypeMessageStore/TextMessageStore";
     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;

front/src/Components/TypeMessage/TextMessageContainer.svelte

@@ -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>

front/src/Stores/TypeMessageStore/BanMessageStore.ts

@@ -1,5 +1,3 @@
-import { writable } from "svelte/store";
+import { createMessageStore } from "./MessageStore";
 
-export const banMessageVisibleStore = writable(false);
+export const banMessageStore = createMessageStore();
-
-export const banMessageContentStore = writable("");

front/src/Stores/TypeMessageStore/MessageStore.ts

@@ -0,0 +1,29 @@
+import { writable } from "svelte/store";
+import { v4 as uuidv4 } from "uuid";
+
+export interface Message {
+    id: string;
+    text: string;
+}
+
+/**
+ * A store that contains a list of messages to be displayed.
+ */
+export function createMessageStore() {
+    const { subscribe, update } = writable<Message[]>([]);
+
+    return {
+        subscribe,
+        addMessage: (text: string): void => {
+            update((messages: Message[]) => {
+                return [...messages, { id: uuidv4(), text }];
+            });
+        },
+        clearMessageById: (id: string): void => {
+            update((messages: Message[]) => {
+                messages = messages.filter((message) => message.id !== id);
+                return messages;
+            });
+        },
+    };
+}

front/src/Stores/TypeMessageStore/TextMessageStore.ts

@@ -1,5 +1,3 @@
-import { writable } from "svelte/store";
+import { createMessageStore } from "./MessageStore";
 
-export const textMessageVisibleStore = writable(false);
+export const textMessageStore = createMessageStore();
-
-export const textMessageContentStore = writable("");