Graphic upgrade 2

front/src/Components/Chat/Chat.svelte

@@ -31,13 +31,13 @@
 
 <aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}">
     <section class="chatWindowTitle">
-        <h3>Here is your chat history <span class="float-right" on:click={closeChat}>&times</span></h3>
+        <h1>Your chat history <span class="float-right" on:click={closeChat}>&times</span></h1>
 
     </section>
     <section class="messagesList" bind:this={listDom}>
         <ul>
-        {#each $chatMessagesStore as message}
-            <li><ChatElement message={message}></ChatElement></li>
+        {#each $chatMessagesStore as message, i}
+            <li><ChatElement message={message} line={i}></ChatElement></li>
         {/each} 
         </ul>
     </section>
@@ -47,7 +47,7 @@
 </aside>
 
 <style lang="scss">
-    h3 {
+    h1 {
       font-family: 'Whiteney';
 
       span.float-right {
@@ -55,6 +55,7 @@
         line-height: 25px;
         font-weight: bold;
         float: right;
+        cursor: pointer;
       }
     }
 
@@ -77,11 +78,10 @@
       border-bottom-right-radius: 16px;
       border-top-right-radius: 16px;
       
-      h3 {
+      h1 {
         background-color: #5f5f5f;
         border-radius: 8px;
         padding: 2px;
-        font-size: 100%;
       }
       
       .chatWindowTitle {

front/src/Components/Chat/ChatElement.svelte

@@ -6,6 +6,7 @@
     import type {PlayerInterface} from "../../Phaser/Game/PlayerInterface";
 
     export let message: ChatMessage;
+    export let line: number;
     
     $: author = message.author as PlayerInterface;
     $: targets = message.targets || [];
@@ -20,21 +21,24 @@
             minute:'2-digit'
         });
     }
+    function isLastIteration(index: number) {
+        return targets.length -1 === index;
+    }
 </script>
 
 <div class="chatElement">
     <div class="messagePart">
         {#if message.type === ChatMessageTypes.userIncoming}
-            &gt;&gt; {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} enter ({renderDate(message.date)})
+            &gt;&gt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} enter <span class="date">({renderDate(message.date)})</span>
         {:else if message.type === ChatMessageTypes.userOutcoming}
-            &lt;&lt; {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} left ({renderDate(message.date)})
+            &lt;&lt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} left <span class="date">({renderDate(message.date)})</span>
         {:else if message.type === ChatMessageTypes.me}
-            <h4>Me: ({renderDate(message.date)})</h4>
+            <h4>Me: <span class="date">({renderDate(message.date)})</span></h4>
             {#each texts as text}
                 <div><p class="my-text">{@html urlifyText(text)}</p></div>
             {/each}
         {:else}
-            <h4><ChatPlayerName player={author}></ChatPlayerName>: ({renderDate(message.date)})</h4>
+            <h4><ChatPlayerName player={author} line={line}></ChatPlayerName>: <span class="date">({renderDate(message.date)})</span></h4>
             {#each texts as text}
                 <div><p class="other-text">{@html urlifyText(text)}</p></div>
             {/each}
@@ -54,6 +58,11 @@
         flex-grow:1;
         max-width: 100%;
 
+        span.date {
+          font-size: 80%;
+          color: gray;
+        }
+
         div > p {
           border-radius: 8px;
           margin-bottom: 10px;

front/src/Components/Chat/ChatMessageForm.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <form on:submit|preventDefault={saveMessage}>
-    <input type="text" bind:value={newMessageText} placeholder="Type here" on:focus={onFocus} on:blur={onBlur} >
+    <input type="text" bind:value={newMessageText} placeholder="Enter your message..." on:focus={onFocus} on:blur={onBlur} >
     <button type="submit">
         <img src="/static/images/send.png" alt="Send" width="20">
     </button>

front/src/Components/Chat/ChatPlayerName.svelte

@@ -1,37 +1,50 @@
 <script lang="ts">
     import type {PlayerInterface} from "../../Phaser/Game/PlayerInterface";
-    import {requestVisitCardsStore} from "../../Stores/GameStore";
+    import {chatSubMenuVisbilityStore} from "../../Stores/ChatStore";
+    import {onDestroy, onMount} from "svelte";
+    import type {Unsubscriber} from "svelte/store";
+    import ChatSubMenu from "./ChatSubMenu.svelte";
 
     export let player: PlayerInterface;
-    let showMenu: boolean = false;
+    export let line: number;
+    let isSubMenuOpen: boolean;
+    let chatSubMenuVisivilytUnsubcribe: Unsubscriber;
 
-    function openVisitCard() {
-        if (player.visitCardUrl) {
-            requestVisitCardsStore.set(player.visitCardUrl);
-        }
+    function openSubMenu() {
+        chatSubMenuVisbilityStore.openSubMenu(player.name, line);
     }
+
+    onMount(() => {
+        chatSubMenuVisivilytUnsubcribe = chatSubMenuVisbilityStore.subscribe((newValue) => {
+            isSubMenuOpen = (newValue === player.name + line);
+        })
+    })
+
+    onDestroy(() => {
+        chatSubMenuVisivilytUnsubcribe();
+    })
+
 </script>
 
-<span class="chatPlayerName" style="color: {player.color || 'white'}" on:click={() => showMenu = !showMenu}>
+<span class="subMenu">
+    <span class="chatPlayerName" style="color: {player.color || 'white'}" on:click={openSubMenu}>
     {player.name}
     </span>
-
-{#if showMenu}
-    <ul class="selectMenu">
-        <li><button class="text-btn" disabled={!player.visitCardUrl} on:click={openVisitCard}>Visit card</button></li>
-    </ul>
+    {#if isSubMenuOpen}
+        <ChatSubMenu player={player}/>
     {/if}
+</span>
 
 
 <style lang="scss">
+  span.subMenu {
+    display: inline-block;
+  }
+  span.chatPlayerName {
+    margin-left: 3px;
+  }
   .chatPlayerName:hover {
       text-decoration: underline;
       cursor: pointer;
     }
-  ul.selectMenu {
-    background-color: whitesmoke;
-    position: absolute;
-    right: 0;
-    border-radius: 4px;
-  }
 </style>

front/src/Components/Chat/ChatSubMenu.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type {PlayerInterface} from "../../Phaser/Game/PlayerInterface";
+    import {requestVisitCardsStore} from "../../Stores/GameStore";
+
+    export let player: PlayerInterface;
+
+
+    function openVisitCard() {
+        if (player.visitCardUrl) {
+            requestVisitCardsStore.set(player.visitCardUrl);
+        }
+    }
+</script>
+
+<ul class="selectMenu" style="border-top: {player.color || 'whitesmoke'} 5px solid">
+    <li><button class="text-btn" disabled={!player.visitCardUrl} on:click={openVisitCard}>Visit card</button></li>
+    <li><button class="text-btn" disabled>Add friend</button></li>
+</ul>
+
+
+<style lang="scss">
+  ul.selectMenu {
+    background-color: whitesmoke;
+    position: absolute;
+    padding: 5px;
+    border-radius: 4px;
+    list-style-type: none;
+
+    li {
+      text-align: center;
+    }
+  }
+</style>

front/src/Phaser/Game/GameScene.ts

@@ -92,6 +92,7 @@ import { peerStore, screenSharingPeerStore } from "../../Stores/PeerStore";
 import { videoFocusStore } from "../../Stores/VideoFocusStore";
 import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore";
 import { playersStore } from "../../Stores/PlayersStore";
+import { chatVisibilityStore } from "../../Stores/ChatStore";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
@@ -169,6 +170,7 @@ export class GameScene extends DirtyScene {
     private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;
     private iframeSubscriptionList!: Array<Subscription>;
     private peerStoreUnsubscribe!: () => void;
+    private chatVisibilityUnsubscribe!: () => void;
     private biggestAvailableAreaStoreUnsubscribe!: () => void;
     MapUrlFile: string;
     RoomId: string;
@@ -571,6 +573,10 @@ export class GameScene extends DirtyScene {
             }
             oldPeerNumber = newPeerNumber;
         });
+
+        this.chatVisibilityUnsubscribe = chatVisibilityStore.subscribe((v) => {
+            this.openChatIcon.setVisible(!v);
+        });
     }
 
     /**
@@ -1150,6 +1156,7 @@ ${escapedMessage}
         this.pinchManager?.destroy();
         this.emoteManager.destroy();
         this.peerStoreUnsubscribe();
+        this.chatVisibilityUnsubscribe();
         this.biggestAvailableAreaStoreUnsubscribe();
         iframeListener.unregisterAnswerer("getState");
 

front/src/Stores/ChatStore.ts

@@ -100,3 +100,19 @@ function createChatMessagesStore() {
     };
 }
 export const chatMessagesStore = createChatMessagesStore();
+
+function createChatSubMenuVisibilityStore() {
+    const { subscribe, update } = writable<string>("");
+
+    return {
+        subscribe,
+        openSubMenu(playerName: string, index: number) {
+            const id = playerName + index;
+            update((oldValue) => {
+                return oldValue === id ? "" : id;
+            });
+        },
+    };
+}
+
+export const chatSubMenuVisbilityStore = createChatSubMenuVisibilityStore();