From 4400c79b93814aa7013fd12001eb88e365a50808 Mon Sep 17 00:00:00 2001
From: Nolway <faizeau.alexis@gmail.com>
Date: Mon, 31 Jan 2022 11:40:16 +0100
Subject: [PATCH 01/12] Fix local streamable toggle highlighted

---
 front/src/Components/Video/LocalStreamMediaBox.svelte   | 2 +-
 front/src/Components/Video/ScreenSharingMediaBox.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/src/Components/Video/LocalStreamMediaBox.svelte b/front/src/Components/Video/LocalStreamMediaBox.svelte
index 494ebfa9..a0b1e3ec 100644
--- a/front/src/Components/Video/LocalStreamMediaBox.svelte
+++ b/front/src/Components/Video/LocalStreamMediaBox.svelte
@@ -15,7 +15,7 @@
     if (stream) {
         embedScreen = {
             type: "streamable",
-            embed: stream as unknown as Streamable,
+            embed: peer as unknown as Streamable,
         };
     }
 </script>
diff --git a/front/src/Components/Video/ScreenSharingMediaBox.svelte b/front/src/Components/Video/ScreenSharingMediaBox.svelte
index 9b27bc8d..d7609421 100644
--- a/front/src/Components/Video/ScreenSharingMediaBox.svelte
+++ b/front/src/Components/Video/ScreenSharingMediaBox.svelte
@@ -31,10 +31,10 @@
         <div class="rtc-error" />
     {/if}
     {#if $streamStore !== null}
-        <!-- svelte-ignore a11y-media-has-caption -->
         <i class="container">
             <span style="background-color: {getColorByString(name)};">{name}</span>
         </i>
+        <!-- svelte-ignore a11y-media-has-caption -->
         <video
             use:srcObject={$streamStore}
             autoplay

From 50b752a205538da01aa8d34a0209a60b43de2d9e Mon Sep 17 00:00:00 2001
From: Nolway <faizeau.alexis@gmail.com>
Date: Mon, 31 Jan 2022 11:41:30 +0100
Subject: [PATCH 02/12] Fix streamable display after left a group

---
 front/src/Stores/StreamableCollectionStore.ts | 7 +++++++
 front/style/style.scss                        | 2 --
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/front/src/Stores/StreamableCollectionStore.ts b/front/src/Stores/StreamableCollectionStore.ts
index d3a02209..4b38d272 100644
--- a/front/src/Stores/StreamableCollectionStore.ts
+++ b/front/src/Stores/StreamableCollectionStore.ts
@@ -2,6 +2,7 @@ import { derived, get, Readable } from "svelte/store";
 import { ScreenSharingLocalMedia, screenSharingLocalMedia } from "./ScreenSharingStore";
 import { peerStore, screenSharingStreamStore } from "./PeerStore";
 import type { RemotePeer } from "../WebRtc/SimplePeer";
+import { highlightedEmbedScreen } from "./EmbedScreensStore";
 
 export type Streamable = RemotePeer | ScreenSharingLocalMedia;
 
@@ -25,6 +26,12 @@ function createStreamableCollectionStore(): Readable<Map<string, Streamable>> {
                 addPeer($screenSharingLocalMedia);
             }
 
+           const $highlightedEmbedScreen = get(highlightedEmbedScreen);
+
+            if ($highlightedEmbedScreen?.type === 'streamable' && !peers.has($highlightedEmbedScreen.embed.uniqueId)) {
+                highlightedEmbedScreen.removeHighlight();
+            }
+
             set(peers);
         }
     );
diff --git a/front/style/style.scss b/front/style/style.scss
index b3a55828..fef4ea7d 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -38,8 +38,6 @@ body .message-info.warning{
 .video-container {
     display: flex;
     transition: all 0.2s ease;
-    background-color: #00000099;
-    border-radius: 15px;
     cursor: url('./images/cursor_pointer.png'), pointer;
     width: 100%;
 

From d2bfa75b376a02b1abcc5f35f6a03bc9306a5c82 Mon Sep 17 00:00:00 2001
From: Nolway <faizeau.alexis@gmail.com>
Date: Mon, 31 Jan 2022 11:48:12 +0100
Subject: [PATCH 03/12] Video peer without stream can be highlighted

---
 front/src/Components/Video/VideoMediaBox.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Components/Video/VideoMediaBox.svelte b/front/src/Components/Video/VideoMediaBox.svelte
index 71d4404b..424a657e 100644
--- a/front/src/Components/Video/VideoMediaBox.svelte
+++ b/front/src/Components/Video/VideoMediaBox.svelte
@@ -50,7 +50,7 @@
     });
 </script>
 
-<div class="video-container" class:no-clikable={!clickable} bind:this={videoContainer}>
+<div class="video-container" class:no-clikable={!clickable} bind:this={videoContainer} on:click={() => (clickable ? highlightedEmbedScreen.toggleHighlight(embedScreen) : null)}>
     {#if $statusStore === "connecting"}
         <div class="connecting-spinner" />
     {/if}

From feeb20fb5dae158b338dc9b3d721e74b7a5bb61e Mon Sep 17 00:00:00 2001
From: Nolway <faizeau.alexis@gmail.com>
Date: Mon, 31 Jan 2022 11:50:07 +0100
Subject: [PATCH 04/12] Prettier fixes into video management

---
 front/src/Components/Video/VideoMediaBox.svelte | 7 ++++++-
 front/src/Stores/StreamableCollectionStore.ts   | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/front/src/Components/Video/VideoMediaBox.svelte b/front/src/Components/Video/VideoMediaBox.svelte
index 424a657e..e5199a37 100644
--- a/front/src/Components/Video/VideoMediaBox.svelte
+++ b/front/src/Components/Video/VideoMediaBox.svelte
@@ -50,7 +50,12 @@
     });
 </script>
 
-<div class="video-container" class:no-clikable={!clickable} bind:this={videoContainer} on:click={() => (clickable ? highlightedEmbedScreen.toggleHighlight(embedScreen) : null)}>
+<div
+    class="video-container"
+    class:no-clikable={!clickable}
+    bind:this={videoContainer}
+    on:click={() => (clickable ? highlightedEmbedScreen.toggleHighlight(embedScreen) : null)}
+>
     {#if $statusStore === "connecting"}
         <div class="connecting-spinner" />
     {/if}
diff --git a/front/src/Stores/StreamableCollectionStore.ts b/front/src/Stores/StreamableCollectionStore.ts
index 4b38d272..e88b1de0 100644
--- a/front/src/Stores/StreamableCollectionStore.ts
+++ b/front/src/Stores/StreamableCollectionStore.ts
@@ -26,9 +26,9 @@ function createStreamableCollectionStore(): Readable<Map<string, Streamable>> {
                 addPeer($screenSharingLocalMedia);
             }
 
-           const $highlightedEmbedScreen = get(highlightedEmbedScreen);
+            const $highlightedEmbedScreen = get(highlightedEmbedScreen);
 
-            if ($highlightedEmbedScreen?.type === 'streamable' && !peers.has($highlightedEmbedScreen.embed.uniqueId)) {
+            if ($highlightedEmbedScreen?.type === "streamable" && !peers.has($highlightedEmbedScreen.embed.uniqueId)) {
                 highlightedEmbedScreen.removeHighlight();
             }
 

From 965725dd719c5667015b5c3d814482c00db4feab Mon Sep 17 00:00:00 2001
From: Nolway <faizeau.alexis@gmail.com>
Date: Mon, 31 Jan 2022 11:58:12 +0100
Subject: [PATCH 05/12] Remove border radius on video elements

---
 front/style/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/style/style.scss b/front/style/style.scss
index fef4ea7d..25ab69aa 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -53,7 +53,6 @@ body .message-info.warning{
         max-width: 100%;
         width: 100%;
         cursor: url('./images/cursor_pointer.png'), pointer;
-        border-radius: 15px;
 
         &.mobile{
             width: 100%;

From 541aa78a1f13683d1ee1b1de23e76ab85fb87f73 Mon Sep 17 00:00:00 2001
From: Nolway <faizeau.alexis@gmail.com>
Date: Mon, 31 Jan 2022 14:28:49 +0100
Subject: [PATCH 06/12] Define max height on streamable

---
 front/src/Components/Video/MediaBox.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Components/Video/MediaBox.svelte b/front/src/Components/Video/MediaBox.svelte
index 2abfa953..ff3c81f5 100644
--- a/front/src/Components/Video/MediaBox.svelte
+++ b/front/src/Components/Video/MediaBox.svelte
@@ -44,7 +44,7 @@
         pointer-events: auto;
 
         padding: 0;
-        max-height: 85%;
+        max-height: 200px;
         max-width: 85%;
 
         &:hover {

From 27b7bb0dcad667bc40e29feda4856b9a68e79ea8 Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Tue, 1 Feb 2022 12:55:29 +0100
Subject: [PATCH 07/12] removed unnecessary wake event unregistering

---
 front/src/Phaser/Login/CustomizeScene.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 838f789d..e95eab60 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -289,7 +289,6 @@ export class CustomizeScene extends AbstractCharacterScene {
         gameManager.setCharacterLayers(layers);
         this.scene.sleep(CustomizeSceneName);
         waScaleManager.restoreZoom();
-        this.events.removeListener("wake");
         gameManager.tryResumingGame(EnableCameraSceneName);
         customCharacterSceneVisibleStore.set(false);
     }

From 1124ed5a5ee2104b7f5026e7ad3ae86149559f50 Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Tue, 1 Feb 2022 11:44:39 +0100
Subject: [PATCH 08/12] Implement cancelable woka resource

---
 front/package.json                            |  1 +
 front/src/Phaser/Entity/Character.ts          | 10 +++++++--
 .../Entity/PlayerTexturesLoadingManager.ts    | 22 +++++++++++++------
 front/src/Phaser/Entity/RemotePlayer.ts       |  3 ++-
 .../Phaser/Login/AbstractCharacterScene.ts    |  5 +++--
 front/src/Phaser/Player/Player.ts             |  3 ++-
 front/yarn.lock                               |  5 +++++
 7 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/front/package.json b/front/package.json
index 9a17f4a0..86308a89 100644
--- a/front/package.json
+++ b/front/package.json
@@ -47,6 +47,7 @@
     "@types/simple-peer": "^9.11.1",
     "@types/socket.io-client": "^1.4.32",
     "axios": "^0.21.2",
+    "cancelable-promise": "^4.2.1",
     "cross-env": "^7.0.3",
     "deep-copy-ts": "^0.5.0",
     "easystarjs": "^0.4.4",
diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index e1fd3a5a..dc984c6d 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@@ -15,6 +15,7 @@ import { TexturesHelper } from "../Helpers/TexturesHelper";
 import type { PictureStore } from "../../Stores/PictureStore";
 import { Unsubscriber, Writable, writable } from "svelte/store";
 import { createColorStore } from "../../Stores/OutlineColorStore";
+import type CancelablePromise from "cancelable-promise";
 
 const playerNameY = -25;
 
@@ -43,12 +44,13 @@ export abstract class Character extends Container {
     private readonly _pictureStore: Writable<string | undefined>;
     private readonly outlineColorStore = createColorStore();
     private readonly outlineColorStoreUnsubscribe: Unsubscriber;
+    private texturePromise: CancelablePromise<string[] | void> | undefined;
 
     constructor(
         scene: GameScene,
         x: number,
         y: number,
-        texturesPromise: Promise<string[]>,
+        texturesPromise: CancelablePromise<string[]>,
         name: string,
         direction: PlayerAnimationDirections,
         moving: boolean,
@@ -66,7 +68,7 @@ export abstract class Character extends Container {
         this._pictureStore = writable(undefined);
 
         //textures are inside a Promise in case they need to be lazyloaded before use.
-        texturesPromise
+        this.texturePromise = texturesPromise
             .then((textures) => {
                 this.addTextures(textures, frame);
                 this.invisible = false;
@@ -81,6 +83,9 @@ export abstract class Character extends Container {
                     this.invisible = false;
                     this.playAnimation(direction, moving);
                 });
+            })
+            .finally(() => {
+                this.texturePromise = undefined;
             });
 
         this.playerName = new Text(scene, 0, playerNameY, name, {
@@ -326,6 +331,7 @@ export abstract class Character extends Container {
                 this.scene.sys.updateList.remove(sprite);
             }
         }
+        this.texturePromise?.cancel();
         this.list.forEach((objectContaining) => objectContaining.destroy());
         this.outlineColorStoreUnsubscribe();
         super.destroy();
diff --git a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
index 58fcf84c..40e68427 100644
--- a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
+++ b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
@@ -1,6 +1,7 @@
 import LoaderPlugin = Phaser.Loader.LoaderPlugin;
 import type { CharacterTexture } from "../../Connexion/LocalUser";
 import { BodyResourceDescriptionInterface, LAYERS, PLAYER_RESOURCES } from "./PlayerTextures";
+import CancelablePromise from "cancelable-promise";
 
 export interface FrameConfig {
     frameWidth: number;
@@ -30,7 +31,7 @@ export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptio
 export const loadCustomTexture = (
     loaderPlugin: LoaderPlugin,
     texture: CharacterTexture
-): Promise<BodyResourceDescriptionInterface> => {
+): CancelablePromise<BodyResourceDescriptionInterface> => {
     const name = "customCharacterTexture" + texture.id;
     const playerResourceDescriptor: BodyResourceDescriptionInterface = { name, img: texture.url, level: texture.level };
     return createLoadingPromise(loaderPlugin, playerResourceDescriptor, {
@@ -42,8 +43,8 @@ export const loadCustomTexture = (
 export const lazyLoadPlayerCharacterTextures = (
     loadPlugin: LoaderPlugin,
     texturekeys: Array<string | BodyResourceDescriptionInterface>
-): Promise<string[]> => {
-    const promisesList: Promise<unknown>[] = [];
+): CancelablePromise<string[]> => {
+    const promisesList: CancelablePromise<unknown>[] = [];
     texturekeys.forEach((textureKey: string | BodyResourceDescriptionInterface) => {
         try {
             //TODO refactor
@@ -60,12 +61,12 @@ export const lazyLoadPlayerCharacterTextures = (
             console.error(err);
         }
     });
-    let returnPromise: Promise<Array<string | BodyResourceDescriptionInterface>>;
+    let returnPromise: CancelablePromise<Array<string | BodyResourceDescriptionInterface>>;
     if (promisesList.length > 0) {
         loadPlugin.start();
-        returnPromise = Promise.all(promisesList).then(() => texturekeys);
+        returnPromise = CancelablePromise.all(promisesList).then(() => texturekeys);
     } else {
-        returnPromise = Promise.resolve(texturekeys);
+        returnPromise = CancelablePromise.resolve(texturekeys);
     }
 
     //If the loading fail, we render the default model instead.
@@ -98,10 +99,17 @@ export const createLoadingPromise = (
     playerResourceDescriptor: BodyResourceDescriptionInterface,
     frameConfig: FrameConfig
 ) => {
-    return new Promise<BodyResourceDescriptionInterface>((res, rej) => {
+    return new CancelablePromise<BodyResourceDescriptionInterface>((res, rej, cancel) => {
         if (loadPlugin.textureManager.exists(playerResourceDescriptor.name)) {
             return res(playerResourceDescriptor);
         }
+
+        cancel(() => {
+            loadPlugin.off("loaderror");
+            loadPlugin.off("filecomplete-spritesheet-" + playerResourceDescriptor.name);
+            return;
+        });
+
         loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, frameConfig);
         const errorCallback = (file: { src: string }) => {
             if (file.src !== playerResourceDescriptor.img) return;
diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts
index 1cd03d12..d8bb5388 100644
--- a/front/src/Phaser/Entity/RemotePlayer.ts
+++ b/front/src/Phaser/Entity/RemotePlayer.ts
@@ -3,6 +3,7 @@ import type { PointInterface } from "../../Connexion/ConnexionModels";
 import { Character } from "../Entity/Character";
 import type { PlayerAnimationDirections } from "../Player/Animation";
 import { requestVisitCardsStore } from "../../Stores/GameStore";
+import type CancelablePromise from "cancelable-promise";
 
 /**
  * Class representing the sprite of a remote player (a player that plays on another computer)
@@ -17,7 +18,7 @@ export class RemotePlayer extends Character {
         x: number,
         y: number,
         name: string,
-        texturesPromise: Promise<string[]>,
+        texturesPromise: CancelablePromise<string[]>,
         direction: PlayerAnimationDirections,
         moving: boolean,
         visitCardUrl: string | null,
diff --git a/front/src/Phaser/Login/AbstractCharacterScene.ts b/front/src/Phaser/Login/AbstractCharacterScene.ts
index 6376498a..67e2ba3d 100644
--- a/front/src/Phaser/Login/AbstractCharacterScene.ts
+++ b/front/src/Phaser/Login/AbstractCharacterScene.ts
@@ -3,11 +3,12 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
 import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
 import { loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
 import type { CharacterTexture } from "../../Connexion/LocalUser";
+import type CancelablePromise from "cancelable-promise";
 
 export abstract class AbstractCharacterScene extends ResizableScene {
     loadCustomSceneSelectCharacters(): Promise<BodyResourceDescriptionInterface[]> {
         const textures = this.getTextures();
-        const promises: Promise<BodyResourceDescriptionInterface>[] = [];
+        const promises: CancelablePromise<BodyResourceDescriptionInterface>[] = [];
         if (textures) {
             for (const texture of textures) {
                 if (texture.level === -1) {
@@ -21,7 +22,7 @@ export abstract class AbstractCharacterScene extends ResizableScene {
 
     loadSelectSceneCharacters(): Promise<BodyResourceDescriptionInterface[]> {
         const textures = this.getTextures();
-        const promises: Promise<BodyResourceDescriptionInterface>[] = [];
+        const promises: CancelablePromise<BodyResourceDescriptionInterface>[] = [];
         if (textures) {
             for (const texture of textures) {
                 if (texture.level !== -1) {
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index c5134f1c..a6fe29a1 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -6,6 +6,7 @@ import { Character } from "../Entity/Character";
 import { get } from "svelte/store";
 import { userMovingStore } from "../../Stores/GameStore";
 import { followStateStore, followRoleStore, followUsersStore } from "../../Stores/FollowStore";
+import type CancelablePromise from "cancelable-promise";
 
 export const hasMovedEventName = "hasMoved";
 export const requestEmoteEventName = "requestEmote";
@@ -20,7 +21,7 @@ export class Player extends Character {
         x: number,
         y: number,
         name: string,
-        texturesPromise: Promise<string[]>,
+        texturesPromise: CancelablePromise<string[]>,
         direction: PlayerAnimationDirections,
         moving: boolean,
         companion: string | null,
diff --git a/front/yarn.lock b/front/yarn.lock
index 329bce4d..3572e44b 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1352,6 +1352,11 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
+cancelable-promise@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/cancelable-promise/-/cancelable-promise-4.2.1.tgz#b02f79c5dde2704acfff1bc1ac2b4090f55541fe"
+  integrity sha512-PJZ/000ocWhPZQBAuNewAOMA2WEkJ8RhXI6AxeGLiGdW8EYDmumzo9wKyNgjDgxc1q/HbXuTdlcI+wXrOe/jMw==
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"

From 43b821a4f2faf92a0a3a4bd5301eb83fe30703b6 Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Tue, 1 Feb 2022 15:49:23 +0100
Subject: [PATCH 09/12] fixed canvasBounds being wrongly calculated due to the
 resize / setZoom execution order

---
 front/src/Phaser/Services/WaScaleManager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index 9334d78a..7958e79d 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -41,8 +41,8 @@ export class WaScaleManager {
             this.actualZoom = realSize.width / gameSize.width / devicePixelRatio;
         }
 
-        this.scaleManager.setZoom(this.actualZoom);
         this.scaleManager.resize(gameSize.width, gameSize.height);
+        this.scaleManager.setZoom(this.actualZoom);
 
         // Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves
         const style = this.scaleManager.canvas.style;

From da381e6e161d5d38fe7a5e7542b6e592d350851e Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Tue, 1 Feb 2022 17:24:56 +0100
Subject: [PATCH 10/12] Fix cowebsite lazy load by API

---
 front/src/Phaser/Game/GameScene.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 23a211a6..19b9791d 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1270,7 +1270,7 @@ ${escapedMessage}
                 openCoWebsite.closable ?? true
             );
 
-            if (openCoWebsite.lazy !== undefined && !openCoWebsite.lazy) {
+            if (openCoWebsite.lazy === undefined || !openCoWebsite.lazy) {
                 await coWebsiteManager.loadCoWebsite(coWebsite);
             }
 

From 7e966a738120fe035d154b51e70a47402ac71393 Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Tue, 1 Feb 2022 17:52:10 +0100
Subject: [PATCH 11/12] Animate cowebsite icons

---
 .../CoWebsiteThumbnailSlot.svelte             | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
index afb1179c..f231cc07 100644
--- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
+++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
@@ -204,6 +204,10 @@
             border-image-outset: 1;
         }
 
+        &:not(.vertical) {
+            animation: bounce 0.35s ease 4 alternate;
+        }
+
         &.vertical {
             margin: 7px;
 
@@ -216,6 +220,8 @@
                 width: 40px;
                 height: 40px;
             }
+
+            animation: shake 0.35s ease-in-out;
         }
 
         &.displayed {
@@ -259,6 +265,41 @@
             }
         }
 
+        @keyframes bounce {
+            from {
+                transform: translateY(0);
+            }
+            to {
+                transform: translateY(-15px);
+            }
+        }
+
+        @keyframes shake {
+            0% {
+                transform: translateX(0);
+            }
+
+            20% {
+                transform: translateX(-10px);
+            }
+
+            40% {
+                transform: translateX(10px);
+            }
+
+            60% {
+                transform: translateX(-10px);
+            }
+
+            80% {
+                transform: translateX(10px);
+            }
+
+            100% {
+                transform: translateX(0);
+            }
+        }
+
         .cowebsite-icon {
             width: 50px;
             height: 50px;

From 33e1a369def3491a51d5f696e5d7527e4f430719 Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Tue, 1 Feb 2022 18:42:07 +0100
Subject: [PATCH 12/12] Add trigger message on cowebsite alt

---
 .../Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte    | 4 ++--
 front/src/Phaser/Game/GameMapPropertiesListener.ts           | 4 ++++
 front/src/WebRtc/CoWebsiteManager.ts                         | 5 ++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
index f231cc07..e5c3c22e 100644
--- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
+++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
@@ -20,7 +20,7 @@
 
     onMount(() => {
         icon.src = `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
-        icon.alt = urlObject.hostname;
+        icon.alt = coWebsite.altMessage ?? urlObject.hostname;
         icon.onload = () => {
             iconLoaded = true;
         };
@@ -205,7 +205,7 @@
         }
 
         &:not(.vertical) {
-            animation: bounce 0.35s ease 4 alternate;
+            animation: bounce 0.35s ease 6 alternate;
         }
 
         &.vertical {
diff --git a/front/src/Phaser/Game/GameMapPropertiesListener.ts b/front/src/Phaser/Game/GameMapPropertiesListener.ts
index fec982d1..caa83cb0 100644
--- a/front/src/Phaser/Game/GameMapPropertiesListener.ts
+++ b/front/src/Phaser/Game/GameMapPropertiesListener.ts
@@ -66,6 +66,7 @@ export class GameMapPropertiesListener {
                     let websitePolicyProperty: string | undefined;
                     let websitePositionProperty: number | undefined;
                     let websiteTriggerProperty: string | undefined;
+                    let websiteTriggerMessageProperty: string | undefined;
 
                     layer.properties.forEach((property) => {
                         switch (property.name) {
@@ -84,6 +85,9 @@ export class GameMapPropertiesListener {
                             case GameMapProperties.OPEN_WEBSITE_TRIGGER:
                                 websiteTriggerProperty = property.value as string | undefined;
                                 break;
+                            case GameMapProperties.OPEN_WEBSITE_TRIGGER_MESSAGE:
+                                websiteTriggerMessageProperty = property.value as string | undefined;
+                                break;
                         }
                     });
 
diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts
index 9ca20545..8e646d9d 100644
--- a/front/src/WebRtc/CoWebsiteManager.ts
+++ b/front/src/WebRtc/CoWebsiteManager.ts
@@ -44,6 +44,7 @@ export type CoWebsite = {
     allowPolicy: string | undefined;
     allowApi: boolean | undefined;
     jitsi?: boolean;
+    altMessage?: string;
 };
 
 class CoWebsiteManager {
@@ -533,7 +534,8 @@ class CoWebsiteManager {
         allowApi?: boolean,
         allowPolicy?: string,
         position?: number,
-        closable?: boolean
+        closable?: boolean,
+        altMessage?: string
     ): CoWebsite {
         const iframe = document.createElement("iframe");
         const fullUrl = new URL(url, base);
@@ -547,6 +549,7 @@ class CoWebsiteManager {
             closable: closable ?? false,
             allowPolicy,
             allowApi,
+            altMessage,
         };
 
         this.initialiseCowebsite(newCoWebsite, position);