Merge pull request #1291 from thecodingmachine/chatTweak

FEATURE: chat tweak

front/src/Components/Chat/Chat.svelte

@@ -30,12 +30,10 @@
 
 
 <aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}">
-    <section class="chatWindowTitle">
-        <h1>Your chat history <span class="float-right" on:click={closeChat}>&times</span></h1>
-
-    </section>
+    <i class="close-icon" on:click={closeChat}>&times</i>
     <section class="messagesList" bind:this={listDom}>
         <ul>
+            <li><p class="system-text">Here is your chat history: </p></li>
         {#each $chatMessagesStore as message, i}
             <li><ChatElement message={message} line={i}></ChatElement></li>
         {/each} 
@@ -47,16 +45,24 @@
 </aside>
 
 <style lang="scss">
-    h1 {
-      font-family: Lato;
-
-      span.float-right {
-        font-size: 30px;
-        line-height: 25px;
-        font-weight: bold;
-        float: right;
-        cursor: pointer;
-      }
+    i.close-icon {
+      position: absolute;
+      padding: 4px;
+      right: 12px;
+      font-size: 30px;
+      line-height: 25px;
+      font-weight: bold;
+      cursor: pointer;
+    }
+    
+    p.system-text {
+      border-radius: 8px;
+      margin-bottom: 10px;
+      padding:6px;
+      overflow-wrap: break-word;
+      max-width: 100%;
+      background: gray;
+      display: inline-block;
     }
 
     aside.chatWindow {
@@ -78,16 +84,8 @@
       border-bottom-right-radius: 16px;
       border-top-right-radius: 16px;
       
-      h1 {
-        background-color: #5f5f5f;
-        border-radius: 8px;
-        padding: 2px;
-      }
-      
-      .chatWindowTitle {
-        flex: 0 100px;
-      }
       .messagesList {
+        margin-top: 35px;
         overflow-y: auto;
         flex: auto;
 
@@ -98,7 +96,7 @@
       }
       .messageForm {
         flex: 0 70px;
-        padding-top: 20px;
+        padding-top: 15px;
       }
     }
 </style>

front/src/Components/Chat/ChatMessageForm.svelte

@@ -32,7 +32,7 @@
       
         input {
           flex: auto;
-          background-color: #42464d;
+          background-color: #254560;
           color: white;
           border-bottom-left-radius: 4px;
           border-top-left-radius: 4px;
@@ -45,11 +45,11 @@
         }
         
         button {
-          background-color: #42464d;
+          background-color: #254560;
           border-bottom-right-radius: 4px;
           border-top-right-radius: 4px;
           border: none;
-          border-left: solid black 1px;
+          border-left: solid white 1px;
           font-size: 16px;
         }
     }

front/src/Phaser/Menu/MenuScene.ts

@@ -20,6 +20,7 @@ import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlo
 import { get } from "svelte/store";
 import { playersStore } from "../../Stores/PlayersStore";
 import { mediaManager } from "../../WebRtc/MediaManager";
+import { chatVisibilityStore } from "../../Stores/ChatStore";
 
 export const MenuSceneName = "MenuScene";
 const gameMenuKey = "gameMenu";
@@ -147,6 +148,9 @@ export class MenuScene extends Phaser.Scene {
         this.menuElement.on("click", this.onMenuClick.bind(this));
 
         worldFullWarningStream.stream.subscribe(() => this.showWorldCapacityWarning());
+        chatVisibilityStore.subscribe((v) => {
+            this.menuButton.setVisible(!v);
+        });
     }
 
     //todo put this method in a parent menuElement class

front/src/Stores/ChatStore.ts

@@ -96,6 +96,7 @@ function createChatMessagesStore() {
                 }
                 return list;
             });
+            chatVisibilityStore.set(true);
         },
     };
 }

front/src/Stores/PlayersStore.ts

@@ -3,6 +3,8 @@ import type { PlayerInterface } from "../Phaser/Game/PlayerInterface";
 import type { RoomConnection } from "../Connexion/RoomConnection";
 import { getRandomColor } from "../WebRtc/ColorGenerator";
 
+let idCount = 0;
+
 /**
  * A store that contains the list of players currently known.
  */
@@ -40,6 +42,27 @@ function createPlayersStore() {
         getPlayerById(userId: number): PlayerInterface | undefined {
             return players.get(userId);
         },
+        addFacticePlayer(name: string): number {
+            let userId: number | null = null;
+            players.forEach((p) => {
+                if (p.name === name) userId = p.userId;
+            });
+            if (userId) return userId;
+            const newUserId = idCount--;
+            update((users) => {
+                users.set(newUserId, {
+                    userId: newUserId,
+                    name,
+                    characterLayers: [],
+                    visitCardUrl: null,
+                    companion: null,
+                    userUuid: "dummy",
+                    color: getRandomColor(),
+                });
+                return users;
+            });
+            return newUserId;
+        },
     };
 }
 

front/src/WebRtc/DiscussionManager.ts

@@ -1,11 +1,12 @@
 import { iframeListener } from "../Api/IframeListener";
-import { chatMessagesStore, chatVisibilityStore } from "../Stores/ChatStore";
+import { chatMessagesStore } from "../Stores/ChatStore";
+import { playersStore } from "../Stores/PlayersStore";
 
 export class DiscussionManager {
     constructor() {
         iframeListener.chatStream.subscribe((chatEvent) => {
-            chatMessagesStore.addExternalMessage(parseInt(chatEvent.author), chatEvent.message);
-            chatVisibilityStore.set(true);
+            const userId = playersStore.addFacticePlayer(chatEvent.author);
+            chatMessagesStore.addExternalMessage(userId, chatEvent.message);
         });
     }
 }

front/src/WebRtc/VideoPeer.ts

@@ -170,7 +170,6 @@ export class VideoPeer extends Peer {
             } else if (message.type === MESSAGE_TYPE_MESSAGE) {
                 if (!blackListManager.isBlackListed(this.userUuid)) {
                     chatMessagesStore.addExternalMessage(this.userId, message.message);
-                    chatVisibilityStore.set(true);
                 }
             } else if (message.type === MESSAGE_TYPE_BLOCKED) {
                 //FIXME when A blacklists B, the output stream from A is muted in B's js client. This is insecure since B can manipulate the code to unmute A stream.

maps/tests/index.html

@@ -188,7 +188,7 @@
             </tr>
             <tr>
                 <td>
-                    <input type="radio" name="test-cowebsite-allowAPI"> Success <input type="radio" name="test-cowebsite-allowAPI"> Failure <input type="radio" name="test-cowebsite-allowAPI" checked> Pending
+                    <input type="radio" name="test-cowebsite-allowAPI2"> Success <input type="radio" name="test-cowebsite-allowAPI2"> Failure <input type="radio" name="test-cowebsite-allowAPI2" checked> Pending
                 </td>
                 <td>
                     <a href="#" class="testLink" data-testmap="Metadata/cowebsiteAllowApi.json" target="_blank">Test cowebsite opened by script is allowed to use IFrame API</a>