From 642d3bb301223368dd0a2db0c9b538edbeadce90 Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Tue, 30 Nov 2021 19:10:35 +0100 Subject: [PATCH] Changed the way WOKA's are stored --- front/src/Components/Menu/MenuIcon.svelte | 20 ++++------- .../src/Components/Video/VideoMediaBox.svelte | 29 ++++----------- front/src/Components/Woka/Woka.svelte | 31 ++++++++++++++++ front/src/Phaser/Entity/Character.ts | 1 - front/src/Phaser/Game/GameScene.ts | 17 ++++++--- front/src/Stores/UserWokaPictureStore.ts | 36 +++---------------- 6 files changed, 61 insertions(+), 73 deletions(-) create mode 100644 front/src/Components/Woka/Woka.svelte diff --git a/front/src/Components/Menu/MenuIcon.svelte b/front/src/Components/Menu/MenuIcon.svelte index f8986968..87d71476 100644 --- a/front/src/Components/Menu/MenuIcon.svelte +++ b/front/src/Components/Menu/MenuIcon.svelte @@ -1,11 +1,9 @@
- open menu +
open menu
@@ -49,6 +37,10 @@ .menuIcon img:hover{ transform: scale(1.2); } + + .menuIcon .woka:hover{ + transform: scale(1.2); + } @media only screen and (max-width: 800px), only screen and (max-height: 800px) { .menuIcon { margin: 3px; diff --git a/front/src/Components/Video/VideoMediaBox.svelte b/front/src/Components/Video/VideoMediaBox.svelte index 0156f101..3f64b0c1 100644 --- a/front/src/Components/Video/VideoMediaBox.svelte +++ b/front/src/Components/Video/VideoMediaBox.svelte @@ -6,9 +6,9 @@ import blockSignImg from "./images/blockSign.svg"; import { videoFocusStore } from "../../Stores/VideoFocusStore"; import { showReportScreenStore } from "../../Stores/ShowReportScreenStore"; - import { userWokaPictureStore } from "../../Stores/UserWokaPictureStore"; import { getColorByString, srcObject } from "./utils"; - import { onDestroy } from "svelte"; + + import Woka from '../Woka/Woka.svelte'; export let peer: VideoPeer; let streamStore = peer.streamStore; @@ -16,18 +16,9 @@ let statusStore = peer.statusStore; let constraintStore = peer.constraintsStore; - let userWokaPictureSrc: string | undefined = undefined; - - const unsubscribeFromUserWokaPictureStore = userWokaPictureStore.subscribe((playersAvatars) => { - userWokaPictureSrc = playersAvatars.get(peer.userId); - console.log(userWokaPictureSrc); - }); - function openReport(peer: VideoPeer): void { showReportScreenStore.set({ userId: peer.userId, userName: peer.userName }); } - - onDestroy(unsubscribeFromUserWokaPictureStore);
@@ -39,11 +30,7 @@ {/if} {#if !$constraintStore || $constraintStore.video === false} - {#if !userWokaPictureSrc} - {name} - {:else} - player avatar - {/if} + {/if} {#if $constraintStore && $constraintStore.audio === false} @@ -61,12 +48,10 @@
\ No newline at end of file diff --git a/front/src/Components/Woka/Woka.svelte b/front/src/Components/Woka/Woka.svelte new file mode 100644 index 00000000..badf48bf --- /dev/null +++ b/front/src/Components/Woka/Woka.svelte @@ -0,0 +1,31 @@ + + +woka + + \ No newline at end of file diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index 01122975..1f7b80ed 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -8,7 +8,6 @@ import { TextureError } from "../../Exception/TextureError"; import { Companion } from "../Companion/Companion"; import type { GameScene } from "../Game/GameScene"; import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes"; -import { waScaleManager } from "../Services/WaScaleManager"; import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js"; import { isSilentStore } from "../../Stores/MediaStore"; import { lazyLoadPlayerCharacterTextures } from "./PlayerTexturesLoadingManager"; diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 01b8544c..95604c2c 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -72,11 +72,11 @@ import { peerStore } from "../../Stores/PeerStore"; import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore"; import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore"; import { playersStore } from "../../Stores/PlayersStore"; -import { userWokaPictureStore } from "../../Stores/UserWokaPictureStore"; import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore"; import { userIsAdminStore } from "../../Stores/GameStore"; import { contactPageStore } from "../../Stores/MenuStore"; import { audioManagerFileStore, audioManagerVisibilityStore } from "../../Stores/AudioManagerStore"; +import { UserWokaPictureStore } from "../../Stores/UserWokaPictureStore"; import EVENT_TYPE = Phaser.Scenes.Events; import Texture = Phaser.Textures.Texture; @@ -201,6 +201,7 @@ export class GameScene extends DirtyScene { private objectsByType = new Map(); private embeddedWebsiteManager!: EmbeddedWebsiteManager; private loader: Loader; + private userWokaPictureStores: Map = new Map(); constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) { super({ @@ -333,6 +334,15 @@ export class GameScene extends DirtyScene { this.loader.addLoader(); } + public getUserWokaPictureStore(userId: number) { + let store = this.userWokaPictureStores.get(userId); + if (!store) { + store = new UserWokaPictureStore(); + this.userWokaPictureStores.set(userId, store); + } + return store; + } + // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving. // eslint-disable-next-line @typescript-eslint/no-explicit-any private async onMapLoad(data: any): Promise { @@ -662,8 +672,6 @@ export class GameScene extends DirtyScene { this.connection = onConnect.connection; playersStore.connectToRoomConnection(this.connection); - userWokaPictureStore.connectToRoomConnection(this.connection); - userIsAdminStore.set(this.connection.hasTag("admin")); this.connection.onUserJoins((message: MessageUserJoined) => { @@ -1497,7 +1505,6 @@ ${escapedMessage} this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined ); this.CurrentPlayer.once("textures-loaded", () => { - // TODO: How to be sure we always get hero id? this.savePlayerWokaPicture(this.CurrentPlayer, -1); }); this.CurrentPlayer.on("pointerdown", (pointer: Phaser.Input.Pointer) => { @@ -1529,7 +1536,7 @@ ${escapedMessage} private async savePlayerWokaPicture(character: Character, userId: number): Promise { const htmlImageElement = await character.getSnapshot(); - userWokaPictureStore.setWokaPicture(userId, htmlImageElement.src); + this.getUserWokaPictureStore(userId).picture.set(htmlImageElement); } pushPlayerPosition(event: HasPlayerMovedEvent) { diff --git a/front/src/Stores/UserWokaPictureStore.ts b/front/src/Stores/UserWokaPictureStore.ts index 30863e44..8f5cb64f 100644 --- a/front/src/Stores/UserWokaPictureStore.ts +++ b/front/src/Stores/UserWokaPictureStore.ts @@ -1,34 +1,8 @@ -import { writable } from "svelte/store"; -import type { RoomConnection } from "../Connexion/RoomConnection"; +import { writable, Writable } from "svelte/store"; /** - * A store that contains the players avatars pictures + * A store that contains the player avatar picture */ -function createUserWokaPictureStore() { - const players = new Map(); - - const { subscribe, update } = writable(players); - - return { - subscribe, - connectToRoomConnection: (roomConnection: RoomConnection) => { - roomConnection.onUserLeft((userId) => { - update((users) => { - users.delete(userId); - return users; - }); - }); - }, - setWokaPicture(userId: number, url: string) { - update((users) => { - users.set(userId, url); - return users; - }); - }, - getWokaPictureById(userId: number): string | undefined { - return players.get(userId); - }, - }; -} - -export const userWokaPictureStore = createUserWokaPictureStore(); +export class UserWokaPictureStore { + constructor(public picture: Writable = writable(undefined)) {} +} \ No newline at end of file