From f840034d9cd499430a997ff16707deff3e19bb52 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Thu, 15 Jul 2021 19:12:19 +0200 Subject: [PATCH] FEATURE: chat tweak --- front/src/Components/Chat/Chat.svelte | 46 +++++++++---------- .../Components/Chat/ChatMessageForm.svelte | 6 +-- front/src/Phaser/Menu/MenuScene.ts | 4 ++ front/src/Stores/ChatStore.ts | 1 + front/src/Stores/PlayersStore.ts | 23 ++++++++++ front/src/WebRtc/DiscussionManager.ts | 7 +-- front/src/WebRtc/VideoPeer.ts | 1 - maps/tests/index.html | 2 +- 8 files changed, 58 insertions(+), 32 deletions(-) diff --git a/front/src/Components/Chat/Chat.svelte b/front/src/Components/Chat/Chat.svelte index 0f302126..2eb4f789 100644 --- a/front/src/Components/Chat/Chat.svelte +++ b/front/src/Components/Chat/Chat.svelte @@ -30,12 +30,10 @@ \ No newline at end of file diff --git a/front/src/Components/Chat/ChatMessageForm.svelte b/front/src/Components/Chat/ChatMessageForm.svelte index 01ea6ee3..cd2ea66e 100644 --- a/front/src/Components/Chat/ChatMessageForm.svelte +++ b/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; } } diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts index 4cf18cce..4e9297b6 100644 --- a/front/src/Phaser/Menu/MenuScene.ts +++ b/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 diff --git a/front/src/Stores/ChatStore.ts b/front/src/Stores/ChatStore.ts index df488115..feb1f3ec 100644 --- a/front/src/Stores/ChatStore.ts +++ b/front/src/Stores/ChatStore.ts @@ -96,6 +96,7 @@ function createChatMessagesStore() { } return list; }); + chatVisibilityStore.set(true); }, }; } diff --git a/front/src/Stores/PlayersStore.ts b/front/src/Stores/PlayersStore.ts index 2ea988bb..86ab136f 100644 --- a/front/src/Stores/PlayersStore.ts +++ b/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; + }, }; } diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts index a3c928f4..fcf04ef1 100644 --- a/front/src/WebRtc/DiscussionManager.ts +++ b/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); }); } } diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts index 9fadef8c..aee3f735 100644 --- a/front/src/WebRtc/VideoPeer.ts +++ b/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. diff --git a/maps/tests/index.html b/maps/tests/index.html index 38ee51ef..dba14eec 100644 --- a/maps/tests/index.html +++ b/maps/tests/index.html @@ -188,7 +188,7 @@ - Success Failure Pending + Success Failure Pending Test cowebsite opened by script is allowed to use IFrame API