Link will now be white and underline + Click on the game to lose focus of input field (#1315)

* Link will now be white and underline
Click on the game to lose focus of input field

* Use bind:this instead of querySelector
Add isClickedInside and isClickedOutside to HtmlUtils to know if the user click inside/outside an element targeted

front/src/Components/Chat/Chat.svelte

@@ -3,9 +3,12 @@
     import { chatMessagesStore, chatVisibilityStore } from "../../Stores/ChatStore";
     import ChatMessageForm from './ChatMessageForm.svelte';
     import ChatElement from './ChatElement.svelte';
-    import { afterUpdate, beforeUpdate } from "svelte";
+    import {afterUpdate, beforeUpdate} from "svelte";
+    import {HtmlUtils} from "../../WebRtc/HtmlUtils";
     
     let listDom: HTMLElement;
+    let chatWindowElement: HTMLElement;
+    let handleFormBlur: { blur():void };
     let autoscroll: boolean;
 
     beforeUpdate(() => {
@@ -16,6 +19,12 @@
         if (autoscroll) listDom.scrollTo(0, listDom.scrollHeight);
     });
 
+    function onClick(event: MouseEvent) {
+        if (HtmlUtils.isClickedOutside(event, chatWindowElement)) {
+            handleFormBlur.blur();
+        }
+    }
+
     function closeChat() {
         chatVisibilityStore.set(false);
     }
@@ -26,10 +35,10 @@
     }
 </script>
 
-<svelte:window on:keydown={onKeyDown}/>
+<svelte:window on:keydown={onKeyDown} on:click={onClick}/>
 
 
-<aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}">
+<aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}" bind:this={chatWindowElement}>
     <p class="close-icon" on:click={closeChat}>&times</p>
     <section class="messagesList" bind:this={listDom}>
         <ul>
@@ -40,7 +49,7 @@
         </ul>
     </section>
     <section class="messageForm">
-        <ChatMessageForm></ChatMessageForm>
+        <ChatMessageForm bind:handleForm={handleFormBlur}></ChatMessageForm>
     </section>
 </aside>
 

front/src/Components/Chat/ChatElement.svelte

@@ -7,13 +7,14 @@
 
     export let message: ChatMessage;
     export let line: number;
+    const chatStyleLink = "color: white; text-decoration: underline;";
     
     $: author = message.author as PlayerInterface;
     $: targets = message.targets || [];
     $: texts = message.text || [];
     
     function urlifyText(text: string): string {
-        return HtmlUtils.urlify(text)
+        return HtmlUtils.urlify(text, chatStyleLink);
     }
     function renderDate(date: Date) {
         return date.toLocaleTimeString(navigator.language, {

front/src/Components/Chat/ChatMessageForm.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
     import {chatMessagesStore, chatInputFocusStore} from "../../Stores/ChatStore";
 
+    export const handleForm = {
+        blur() {
+            inputElement.blur();
+        }
+    }
+    let inputElement: HTMLElement;
     let newMessageText = '';
     
     function onFocus() {
@@ -18,7 +24,7 @@
 </script>
 
 <form on:submit|preventDefault={saveMessage}>
-    <input type="text" bind:value={newMessageText} placeholder="Enter your message..." on:focus={onFocus} on:blur={onBlur} >
+    <input type="text" bind:value={newMessageText} placeholder="Enter your message..." on:focus={onFocus} on:blur={onBlur} bind:this={inputElement}>
     <button type="submit">
         <img src="/static/images/send.png" alt="Send" width="20">
     </button>