From b9a2433283766e2ff61a1f753d956a41abf37b86 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 12 Jul 2021 11:59:05 +0200
Subject: [PATCH] Upgrade graphic of the chat

---
 front/src/Components/Chat/Chat.svelte            | 12 ++++++++++--
 front/src/Components/Chat/ChatElement.svelte     |  4 ++--
 front/src/Components/Chat/ChatMessageForm.svelte |  2 ++
 front/src/WebRtc/ColorGenerator.ts               |  6 +++++-
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/front/src/Components/Chat/Chat.svelte b/front/src/Components/Chat/Chat.svelte
index c4f9075d..093d01a5 100644
--- a/front/src/Components/Chat/Chat.svelte
+++ b/front/src/Components/Chat/Chat.svelte
@@ -32,7 +32,7 @@
 
 <aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}">
     <section class="chatWindowTitle">
-        <h3>Here is your chat history <button on:click={closeChat}>❌</button></h3>
+        <h3>Here is your chat history <span class="float-right" on:click={closeChat}>&times</span></h3>
 
     </section>
     <section class="messagesList">
@@ -50,7 +50,15 @@
 <style lang="scss">
     h3 {
       font-family: 'Whiteney';
+
+      span.float-right {
+        font-size: 30px;
+        line-height: 25px;
+        font-weight: bold;
+        float: right;
+      }
     }
+
     aside.chatWindow {
       z-index:100;
       pointer-events: auto;
@@ -60,7 +68,7 @@
       height: 100vh;
       width:30vw;
       min-width: 350px;
-      background: #051f33;
+      background: rgb(5, 31, 51, 0.9);
       color: whitesmoke;
       display: flex;
       flex-direction: column;
diff --git a/front/src/Components/Chat/ChatElement.svelte b/front/src/Components/Chat/ChatElement.svelte
index 95a050eb..89963c61 100644
--- a/front/src/Components/Chat/ChatElement.svelte
+++ b/front/src/Components/Chat/ChatElement.svelte
@@ -25,9 +25,9 @@
 <div class="chatElement">
     <div class="messagePart">
         {#if message.type === ChatMessageTypes.userIncoming}
-            ➡️: {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} ({renderDate(message.date)})
+            &gt;&gt; {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} enter ({renderDate(message.date)})
         {:else if message.type === ChatMessageTypes.userOutcoming}
-            ⬅️: {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} ({renderDate(message.date)})
+            &lt;&lt; {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} left ({renderDate(message.date)})
         {:else if message.type === ChatMessageTypes.me}
             <h4>Me: ({renderDate(message.date)})</h4>
             {#each texts as text}
diff --git a/front/src/Components/Chat/ChatMessageForm.svelte b/front/src/Components/Chat/ChatMessageForm.svelte
index acfd68ae..2f640db4 100644
--- a/front/src/Components/Chat/ChatMessageForm.svelte
+++ b/front/src/Components/Chat/ChatMessageForm.svelte
@@ -39,6 +39,8 @@
           border: none;
           font-size: 22px;
           font-family: Whiteney;
+          min-width: 0; //Needed so that the input doesn't overflow the container in firefox
+          outline: none;
         }
         
         button {
diff --git a/front/src/WebRtc/ColorGenerator.ts b/front/src/WebRtc/ColorGenerator.ts
index a42aee85..be192f9f 100644
--- a/front/src/WebRtc/ColorGenerator.ts
+++ b/front/src/WebRtc/ColorGenerator.ts
@@ -1,5 +1,9 @@
 export function getRandomColor(): string {
-    return hsv_to_rgb(Math.random(), 0.5, 0.95);
+    const golden_ratio_conjugate = 0.618033988749895;
+    let hue = Math.random();
+    hue += golden_ratio_conjugate;
+    hue %= 1;
+    return hsv_to_rgb(hue, 0.5, 0.95);
 }
 
 //todo: test this.