diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte index afb1179c..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; }; @@ -204,6 +204,10 @@ border-image-outset: 1; } + &:not(.vertical) { + animation: bounce 0.35s ease 6 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; 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);