From 00e0a14a37bf7aa36ec19617f2314247f27b3e06 Mon Sep 17 00:00:00 2001
From: Alban Bruder <alban.bruder@uni-weimar.de>
Date: Fri, 24 Dec 2021 12:15:54 +0100
Subject: [PATCH 1/3] Display multiple admin messages

---
 .../src/Administration/UserMessageManager.ts  | 15 ++++------
 front/src/Components/App.svelte               | 17 +++++------
 .../Components/TypeMessage/BanMessage.svelte  | 18 ++++++++----
 .../TypeMessage/BanMessageContainer.svelte    | 13 +++++++++
 .../Components/TypeMessage/TextMessage.svelte | 19 ++++++++----
 .../TypeMessage/TextMessageContainer.svelte   | 21 ++++++++++++++
 .../TypeMessageStore/BanMessageStore.ts       |  6 ++--
 .../Stores/TypeMessageStore/MessageStore.ts   | 29 +++++++++++++++++++
 .../TypeMessageStore/TextMessageStore.ts      |  6 ++--
 9 files changed, 106 insertions(+), 38 deletions(-)
 create mode 100644 front/src/Components/TypeMessage/BanMessageContainer.svelte
 create mode 100644 front/src/Components/TypeMessage/TextMessageContainer.svelte
 create mode 100644 front/src/Stores/TypeMessageStore/MessageStore.ts

diff --git a/front/src/Administration/UserMessageManager.ts b/front/src/Administration/UserMessageManager.ts
index 42c31083..09e69137 100644
--- a/front/src/Administration/UserMessageManager.ts
+++ b/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);
-                textMessageVisibleStore.set(true);
+                textMessageStore.addMessage(event.text);
             } else if (event.type === AdminMessageEventTypes.audio) {
                 soundPlayingStore.playSound(UPLOADER_URL + event.text);
             } else if (event.type === AdminMessageEventTypes.ban) {
-                banMessageContentStore.set(event.text);
-                banMessageVisibleStore.set(true);
+                banMessageStore.addMessage(event.text);
             } else if (event.type === AdminMessageEventTypes.banned) {
-                banMessageContentStore.set(event.text);
-                banMessageVisibleStore.set(true);
+                banMessageStore.addMessage(event.text);
                 this.receiveBannedMessageListener();
             }
         });
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 4886cc4e..817b22c1 100644
--- a/front/src/Components/App.svelte
+++ b/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 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}
diff --git a/front/src/Components/TypeMessage/BanMessage.svelte b/front/src/Components/TypeMessage/BanMessage.svelte
index faeae923..ce230067 100644
--- a/front/src/Components/TypeMessage/BanMessage.svelte
+++ b/front/src/Components/TypeMessage/BanMessage.svelte
@@ -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
diff --git a/front/src/Components/TypeMessage/BanMessageContainer.svelte b/front/src/Components/TypeMessage/BanMessageContainer.svelte
new file mode 100644
index 00000000..b9edb390
--- /dev/null
+++ b/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>
diff --git a/front/src/Components/TypeMessage/TextMessage.svelte b/front/src/Components/TypeMessage/TextMessage.svelte
index 1541ab6e..7efc3b7c 100644
--- a/front/src/Components/TypeMessage/TextMessage.svelte
+++ b/front/src/Components/TypeMessage/TextMessage.svelte
@@ -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;
diff --git a/front/src/Components/TypeMessage/TextMessageContainer.svelte b/front/src/Components/TypeMessage/TextMessageContainer.svelte
new file mode 100644
index 00000000..8f9b5329
--- /dev/null
+++ b/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>
diff --git a/front/src/Stores/TypeMessageStore/BanMessageStore.ts b/front/src/Stores/TypeMessageStore/BanMessageStore.ts
index b8c042b4..4d9a7448 100644
--- a/front/src/Stores/TypeMessageStore/BanMessageStore.ts
+++ b/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 banMessageContentStore = writable("");
+export const banMessageStore = createMessageStore();
diff --git a/front/src/Stores/TypeMessageStore/MessageStore.ts b/front/src/Stores/TypeMessageStore/MessageStore.ts
new file mode 100644
index 00000000..b6845f34
--- /dev/null
+++ b/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;
+            });
+        },
+    };
+}
diff --git a/front/src/Stores/TypeMessageStore/TextMessageStore.ts b/front/src/Stores/TypeMessageStore/TextMessageStore.ts
index e3969016..bf644125 100644
--- a/front/src/Stores/TypeMessageStore/TextMessageStore.ts
+++ b/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 textMessageContentStore = writable("");
+export const textMessageStore = createMessageStore();

From 9a3bca065976c3981d7552cccf84567818005773 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 24 Dec 2021 14:59:40 +0100
Subject: [PATCH 2/3] Updating Node version to latest minor in Pusher and Back
 for prod images

---
 back/Dockerfile   | 6 +++---
 pusher/Dockerfile | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/back/Dockerfile b/back/Dockerfile
index e95145cd..b63db51c 100644
--- a/back/Dockerfile
+++ b/back/Dockerfile
@@ -1,11 +1,11 @@
 # protobuf build
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
 WORKDIR /usr/src
 COPY messages .
 RUN yarn install && yarn proto
 
 # typescript build
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder2
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
 WORKDIR /usr/src
 COPY back/yarn.lock back/package.json ./
 RUN yarn install
@@ -15,7 +15,7 @@ ENV NODE_ENV=production
 RUN yarn run tsc
 
 # final production image
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
 WORKDIR /usr/src
 COPY back/yarn.lock back/package.json ./
 COPY --from=builder2 /usr/src/dist /usr/src/dist
diff --git a/pusher/Dockerfile b/pusher/Dockerfile
index 3ead0913..5a448ee8 100644
--- a/pusher/Dockerfile
+++ b/pusher/Dockerfile
@@ -1,11 +1,11 @@
 # protobuf build
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
 WORKDIR /usr/src
 COPY messages .
 RUN yarn install && yarn proto
 
 # typescript build
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder2
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
 WORKDIR /usr/src
 COPY pusher/yarn.lock pusher/package.json ./
 RUN yarn install
@@ -16,7 +16,7 @@ ENV NODE_ENV=production
 RUN yarn run tsc
 
 # final production image
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
 WORKDIR /usr/src
 COPY pusher/yarn.lock pusher/package.json ./
 COPY --from=builder2 /usr/src/dist /usr/src/dist

From a4a89735f6874aa02189b6ab1330efda68c9f8b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 24 Dec 2021 15:04:01 +0100
Subject: [PATCH 3/3] Fixing missing builders

---
 back/Dockerfile   | 4 ++--
 pusher/Dockerfile | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/back/Dockerfile b/back/Dockerfile
index b63db51c..a8ce3c1c 100644
--- a/back/Dockerfile
+++ b/back/Dockerfile
@@ -1,11 +1,11 @@
 # protobuf build
-FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder
 WORKDIR /usr/src
 COPY messages .
 RUN yarn install && yarn proto
 
 # typescript build
-FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder2
 WORKDIR /usr/src
 COPY back/yarn.lock back/package.json ./
 RUN yarn install
diff --git a/pusher/Dockerfile b/pusher/Dockerfile
index 5a448ee8..cd5bfc59 100644
--- a/pusher/Dockerfile
+++ b/pusher/Dockerfile
@@ -1,11 +1,11 @@
 # protobuf build
-FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder
 WORKDIR /usr/src
 COPY messages .
 RUN yarn install && yarn proto
 
 # typescript build
-FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder2
 WORKDIR /usr/src
 COPY pusher/yarn.lock pusher/package.json ./
 RUN yarn install