Merge branch 'develop' into vite

front/src/Components/ActionsMenu/ActionsMenu.svelte

@@ -0,0 +1,99 @@
+<script lang="typescript">
+    import { actionsMenuStore } from "../../Stores/ActionsMenuStore";
+    import { onDestroy } from "svelte";
+
+    import type { Unsubscriber } from "svelte/store";
+    import type { ActionsMenuData } from "../../Stores/ActionsMenuStore";
+
+    let actionsMenuData: ActionsMenuData | undefined;
+
+    let actionsMenuStoreUnsubscriber: Unsubscriber | null;
+
+    function onKeyDown(e: KeyboardEvent) {
+        if (e.key === "Escape") {
+            closeActionsMenu();
+        }
+    }
+
+    function closeActionsMenu() {
+        actionsMenuStore.clear();
+    }
+
+    actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe((value) => {
+        actionsMenuData = value;
+    });
+
+    onDestroy(() => {
+        if (actionsMenuStoreUnsubscriber) {
+            actionsMenuStoreUnsubscriber();
+        }
+    });
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+{#if actionsMenuData}
+    <div class="actions-menu nes-container is-rounded">
+        <button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>&times</button>
+        <h2>{actionsMenuData.playerName}</h2>
+        <div class="actions">
+            {#each [...actionsMenuData.actions] as { actionName, callback }}
+                <button
+                    type="button"
+                    class="nes-btn"
+                    on:click|preventDefault={() => {
+                        callback();
+                    }}
+                >
+                    {actionName}
+                </button>
+            {/each}
+        </div>
+    </div>
+{/if}
+
+<style lang="scss">
+    .actions-menu {
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%, 0);
+        width: 260px !important;
+        height: max-content !important;
+        max-height: 40vh;
+        margin-top: 200px;
+
+        pointer-events: auto;
+        font-family: "Press Start 2P";
+        background-color: #333333;
+        color: whitesmoke;
+
+        .actions {
+            max-height: calc(100% - 50px);
+            width: 100%;
+            display: block;
+            overflow-x: hidden;
+            overflow-y: auto;
+
+            button {
+                width: calc(100% - 10px);
+                margin-bottom: 10px;
+            }
+        }
+
+        .actions::-webkit-scrollbar {
+            display: none;
+        }
+
+        h2 {
+            text-align: center;
+            margin-bottom: 20px;
+            font-family: "Press Start 2P";
+        }
+
+        .nes-btn.is-error.close {
+            position: absolute;
+            top: -20px;
+            right: -20px;
+        }
+    }
+</style>

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;

front/src/Components/FollowMenu/FollowMenu.svelte

@@ -7,7 +7,7 @@
 
     function name(userId: number): string {
         const user = gameScene.MapPlayersByKey.get(userId);
-        return user ? user.PlayerValue : "";
+        return user ? user.playerName : "";
     }
 
     function acceptFollowRequest() {

front/src/Components/MainLayout.svelte

@@ -36,6 +36,8 @@
     import LimitRoomModal from "./Modal/LimitRoomModal.svelte";
     import ShareLinkMapModal from "./Modal/ShareLinkMapModal.svelte";
     import { LayoutMode } from "../WebRtc/LayoutManager";
+    import { actionsMenuStore } from "../Stores/ActionsMenuStore";
+    import ActionsMenu from "./ActionsMenu/ActionsMenu.svelte";
 
     let mainLayout: HTMLDivElement;
 
@@ -106,6 +108,10 @@
             <FollowMenu />
         {/if}
 
+        {#if $actionsMenuStore}
+            <ActionsMenu />
+        {/if}
+
         {#if $requestVisitCardsStore}
             <VisitCard visitCardUrl={$requestVisitCardsStore} />
         {/if}