Merge branch 'master' into develop

back/src/Model/GameRoom.ts

@@ -104,6 +104,15 @@ export class GameRoom {
     public getUserById(id: number): User | undefined {
         return this.users.get(id);
     }
+    public getUsersByUuid(uuid: string): User[] {
+        const userList: User[] = [];
+        for (const user of this.users.values()) {
+            if (user.uuid === uuid) {
+                userList.push(user);
+            }
+        }
+        return userList;
+    }
 
     public join(socket: UserSocket, joinRoomMessage: JoinRoomMessage): User {
         const positionMessage = joinRoomMessage.getPositionmessage();

back/src/Services/SocketManager.ts

@@ -701,8 +701,8 @@ export class SocketManager {
             return;
         }
 
-        const recipient = room.getUserByUuid(recipientUuid);
+        const recipients = room.getUsersByUuid(recipientUuid);
-        if (recipient === undefined) {
+        if (recipients.length === 0) {
             console.error(
                 "In sendAdminMessage, could not find user with id '" +
                     recipientUuid +
@@ -711,6 +711,7 @@ export class SocketManager {
             return;
         }
 
+        for (const recipient of recipients) {
             const sendUserMessage = new SendUserMessage();
             sendUserMessage.setMessage(message);
             sendUserMessage.setType("ban"); //todo: is the type correct?
@@ -720,6 +721,7 @@ export class SocketManager {
 
             recipient.socket.write(serverToClientMessage);
         }
+    }
 
     public async banUser(roomId: string, recipientUuid: string, message: string): Promise<void> {
         const room = await this.roomsPromises.get(roomId);
@@ -732,8 +734,8 @@ export class SocketManager {
             return;
         }
 
-        const recipient = room.getUserByUuid(recipientUuid);
+        const recipients = room.getUsersByUuid(recipientUuid);
-        if (recipient === undefined) {
+        if (recipients.length === 0) {
             console.error(
                 "In banUser, could not find user with id '" +
                     recipientUuid +
@@ -742,6 +744,7 @@ export class SocketManager {
             return;
         }
 
+        for (const recipient of recipients) {
             // Let's leave the room now.
             room.leave(recipient);
 
@@ -756,6 +759,7 @@ export class SocketManager {
             recipient.socket.write(serverToClientMessage);
             recipient.socket.end();
         }
+    }
 
     async sendAdminRoomMessage(roomId: string, message: string) {
         const room = await this.roomsPromises.get(roomId);

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>

front/src/Phaser/Login/CustomizeScene.ts

@@ -244,6 +244,7 @@ export class CustomizeScene extends AbstractCharacterScene {
     update(time: number, delta: number): void {
         if (this.lazyloadingAttempt) {
             this.moveLayers();
+            this.doMoveCursorHorizontally(this.moveHorizontally);
             this.lazyloadingAttempt = false;
         }
 

front/src/WebRtc/HtmlUtils.ts

@@ -31,7 +31,7 @@ export class HtmlUtils {
         return p.innerHTML;
     }
 
-    public static urlify(text: string): string {
+    public static urlify(text: string, style: string = ""): string {
         const urlRegex = /(https?:\/\/[^\s]+)/g;
         text = HtmlUtils.escapeHtml(text);
         return text.replace(urlRegex, (url: string) => {
@@ -40,10 +40,19 @@ export class HtmlUtils {
             link.target = "_blank";
             const text = document.createTextNode(url);
             link.appendChild(text);
+            link.setAttribute("style", style);
             return link.outerHTML;
         });
     }
 
+    public static isClickedInside(event: MouseEvent, target: HTMLElement): boolean {
+        return !!event.composedPath().find((et) => et === target);
+    }
+
+    public static isClickedOutside(event: MouseEvent, target: HTMLElement): boolean {
+        return !this.isClickedInside(event, target);
+    }
+
     private static isHtmlElement<T extends HTMLElement>(elem: HTMLElement | null): elem is T {
         return elem !== null;
     }