Merge branch 'develop' of github.com:thecodingmachine/workadventure

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -19,7 +19,11 @@
     const urlObject = new URL(coWebsiteUrl);
 
     onMount(() => {
-        iconLoaded = true;
+        icon.src = `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
+        icon.alt = coWebsite.altMessage ?? urlObject.hostname;
+        icon.onload = () => {
+            iconLoaded = true;
+        };
     });
 
     async function onClick() {
@@ -200,6 +204,10 @@
             border-image-outset: 1;
         }
 
+        &:not(.vertical) {
+            animation: bounce 0.35s ease 6 alternate;
+        }
+
         &.vertical {
             margin: 7px;
 
@@ -212,6 +220,8 @@
                 width: 40px;
                 height: 40px;
             }
+
+            animation: shake 0.35s ease-in-out;
         }
 
         &.displayed {
@@ -255,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;

front/src/Phaser/Game/GameMapProperties.ts

@@ -20,6 +20,7 @@ export enum GameMapProperties {
     OPEN_WEBSITE = "openWebsite",
     OPEN_WEBSITE_ALLOW_API = "openWebsiteAllowApi",
     OPEN_WEBSITE_POLICY = "openWebsitePolicy",
+    OPEN_WEBSITE_WIDTH = "openWebsiteWidth",
     OPEN_WEBSITE_POSITION = "openWebsitePosition",
     OPEN_WEBSITE_TRIGGER = "openWebsiteTrigger",
     OPEN_WEBSITE_TRIGGER_MESSAGE = "openWebsiteTriggerMessage",

front/src/Phaser/Game/GameMapPropertiesListener.ts

@@ -65,8 +65,10 @@ export class GameMapPropertiesListener {
                     let openWebsiteProperty: string | undefined;
                     let allowApiProperty: boolean | undefined;
                     let websitePolicyProperty: string | undefined;
+                    let websiteWidthProperty: number | undefined;
                     let websitePositionProperty: number | undefined;
                     let websiteTriggerProperty: string | undefined;
+                    let websiteTriggerMessageProperty: string | undefined;
 
                     layer.properties.forEach((property) => {
                         switch (property.name) {
@@ -79,12 +81,18 @@ export class GameMapPropertiesListener {
                             case GameMapProperties.OPEN_WEBSITE_POLICY:
                                 websitePolicyProperty = property.value as string | undefined;
                                 break;
+                            case GameMapProperties.OPEN_WEBSITE_WIDTH:
+                                websiteWidthProperty = property.value as number | undefined;
+                                break;
                             case GameMapProperties.OPEN_WEBSITE_POSITION:
                                 websitePositionProperty = property.value as number | undefined;
                                 break;
                             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;
                         }
                     });
 
@@ -104,7 +112,9 @@ export class GameMapPropertiesListener {
                         allowApiProperty,
                         websitePolicyProperty,
                         websitePositionProperty,
-                        false
+                        false,
+                        websiteTriggerMessageProperty,
+                        websiteWidthProperty,
                     );
 
                     this.coWebsitesOpenByLayer.set(layer, {

front/src/Phaser/Game/GameScene.ts

@@ -1301,7 +1301,7 @@ export class GameScene extends DirtyScene {
                 openCoWebsite.closable ?? true
             );
 
-            if (openCoWebsite.lazy !== undefined && !openCoWebsite.lazy) {
+            if (openCoWebsite.lazy === undefined || !openCoWebsite.lazy) {
                 await coWebsiteManager.loadCoWebsite(coWebsite);
             }
 

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);
     }

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;

front/src/WebRtc/CoWebsiteManager.ts

@@ -44,6 +44,8 @@ export type CoWebsite = {
     allowPolicy: string | undefined;
     allowApi: boolean | undefined;
     jitsi?: boolean;
+    altMessage?: string;
+    widthPercent?: number;
 };
 
 class CoWebsiteManager {
@@ -533,7 +535,9 @@ class CoWebsiteManager {
         allowApi?: boolean,
         allowPolicy?: string,
         position?: number,
-        closable?: boolean
+        closable?: boolean,
+        altMessage?: string,
+        widthPercent?: number,
     ): CoWebsite {
         const iframe = document.createElement("iframe");
         const fullUrl = new URL(url, base);
@@ -547,6 +551,8 @@ class CoWebsiteManager {
             closable: closable ?? false,
             allowPolicy,
             allowApi,
+            altMessage,
+            widthPercent,
         };
 
         this.initialiseCowebsite(newCoWebsite, position);
@@ -626,7 +632,9 @@ class CoWebsiteManager {
                 .then(() => {
                     if (mainCoWebsite && mainCoWebsite.iframe.id === coWebsite.iframe.id) {
                         this.openMain();
-
+                        if (coWebsite.widthPercent) {
+                            this.widthPercent = coWebsite.widthPercent;
+                        }
                         setTimeout(() => {
                             this.fire();
                         }, animationTime);