FEATURE: clicking on another player show a contact card when possible

front/src/Components/App.svelte

@@ -13,6 +13,8 @@
     import LoginScene from "./Login/LoginScene.svelte";
     import {loginSceneVisibleStore} from "../Stores/LoginSceneStore";
     import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
+    import VisitCard from "./VisitCard/VisitCard.svelte";
+    import {requestVisitCardsStore} from "../Stores/GameStore";
 
     import {Game} from "../Phaser/Game/Game";
     import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
@@ -73,4 +75,7 @@
             <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
         </div>
     {/if}
+    {#if $requestVisitCardsStore}
+        <VisitCard visitCardUrl={$requestVisitCardsStore}></VisitCard>
+    {/if}
 </div>

front/src/Components/VisitCard/VisitCard.svelte

@@ -0,0 +1,64 @@
+<script lang="typescript">
+    import { fly } from 'svelte/transition';
+    import {requestVisitCardsStore} from "../../Stores/GameStore";
+    
+    export let visitCardUrl: string;
+    
+    function closeCard() {
+        requestVisitCardsStore.set(null);
+    }
+</script>
+
+<style lang="scss">
+  .visitCard {
+    pointer-events: all;
+    margin-left: auto;
+    margin-right: auto;
+    width: 515px;
+    margin-top: 200px;
+    
+    .defaultCard {
+      border-radius: 5px;
+      border: 2px black solid;
+      background-color: whitesmoke;
+      width: 500px;
+      
+      header {
+        padding: 5px;
+      }
+    }
+
+    iframe {
+      border: 0;
+      width: 515px;
+      height: 270px;
+      overflow: hidden;
+    }
+
+    button {
+      float: right;
+    }
+  }
+</style>
+
+
+<section class="visitCard" transition:fly="{{ y: -200, duration: 1000 }}">
+    {#if visitCardUrl === 'INVALID'}
+        <div class="defaultCard">
+            <header>
+                <h2>Sorry</h2>
+                <p style="font-style: italic;">This user doesn't have a contact card.</p>
+            </header>
+
+            <main style="padding: 5px; background-color: gray">
+                <p>Maybe he is offline, or this feature is deactivated.</p>
+            </main>
+        </div>
+    {:else}
+        <iframe title="visitCardTitle" src={visitCardUrl}></iframe>
+    {/if}
+    <div class="buttonContainer">
+        <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
+    </div>
+        
+</section>

front/src/Connexion/RoomConnection.ts

@@ -30,7 +30,7 @@ import {
     EmoteEventMessage,
     EmotePromptMessage,
     SendUserMessage,
-    BanUserMessage
+    BanUserMessage, RequestVisitCardMessage
 } from "../Messages/generated/messages_pb"
 
 import type {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
@@ -50,6 +50,7 @@ import {worldFullMessageStream} from "./WorldFullMessageStream";
 import {worldFullWarningStream} from "./WorldFullWarningStream";
 import {connectionManager} from "./ConnectionManager";
 import {emoteEventStream} from "./EmoteEventStream";
+import {requestVisitCardsStore} from "../Stores/GameStore";
 
 const manualPingDelay = 20000;
 
@@ -203,6 +204,8 @@ export class RoomConnection implements RoomConnection {
                 adminMessagesService.onSendusermessage(message.getBanusermessage() as BanUserMessage);
             } else if (message.hasWorldfullwarningmessage()) {
                 worldFullWarningStream.onMessage();
+            } else if (message.hasVisitcardmessage()) {
+                requestVisitCardsStore.set(message?.getVisitcardmessage()?.getUrl() as unknown as string);
             } else if (message.hasRefreshroommessage()) {
                 //todo: implement a way to notify the user the room was refreshed.
             } else {
@@ -617,4 +620,14 @@ export class RoomConnection implements RoomConnection {
 
         this.socket.send(clientToServerMessage.serializeBinary().buffer);
     }
+    
+    public requestVisitCardUrl(targetUserId: number): void {
+        const message = new RequestVisitCardMessage();
+        message.setTargetuserid(targetUserId);
+
+        const clientToServerMessage = new ClientToServerMessage();
+        clientToServerMessage.setRequestvisitcardmessage(message);
+
+        this.socket.send(clientToServerMessage.serializeBinary().buffer);
+    }
 }

front/src/Phaser/Entity/RemotePlayer.ts

@@ -3,6 +3,8 @@ import type {PointInterface} from "../../Connexion/ConnexionModels";
 import {Character} from "../Entity/Character";
 import type {PlayerAnimationDirections} from "../Player/Animation";
 
+export const playerClickedEvent = 'playerClickedEvent';
+
 /**
  * Class representing the sprite of a remote player (a player that plays on another computer)
  */
@@ -25,6 +27,10 @@ export class RemotePlayer extends Character {
         
         //set data
         this.userId = userId;
+        
+        this.on('pointerdown', () => {
+            this.emit(playerClickedEvent, this.userId);
+        })
     }
 
     updatePosition(position: PointInterface): void {
@@ -40,6 +46,6 @@ export class RemotePlayer extends Character {
     }
 
     isClickable(): boolean {
-        return false; //todo: make remote players clickable if they are logged in.
+        return true; //todo: make remote players clickable if they are logged in.
     }
 }

front/src/Phaser/Game/GameScene.ts

@@ -29,7 +29,7 @@ import type {AddPlayerInterface} from "./AddPlayerInterface";
 import {PlayerAnimationDirections} from "../Player/Animation";
 import {PlayerMovement} from "./PlayerMovement";
 import {PlayersPositionInterpolator} from "./PlayersPositionInterpolator";
-import {RemotePlayer} from "../Entity/RemotePlayer";
+import {playerClickedEvent, RemotePlayer} from "../Entity/RemotePlayer";
 import {Queue} from 'queue-typescript';
 import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
 import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
@@ -1379,6 +1379,9 @@ ${escapedMessage}
             addPlayerData.companion,
             addPlayerData.companion !== null ? lazyLoadCompanionResource(this.load, addPlayerData.companion) : undefined
         );
+        player.on(playerClickedEvent, (userID:number) => {
+            this.connection?.requestVisitCardUrl(userID);
+        })
         this.MapPlayers.add(player);
         this.MapPlayersByKey.set(player.userId, player);
         player.updatePosition(addPlayerData.position);

front/src/Stores/GameStore.ts

@@ -1,3 +1,5 @@
-import { derived, writable, Writable } from "svelte/store";
+import { writable } from "svelte/store";
 
 export const userMovingStore = writable(false);
+
+export const requestVisitCardsStore = writable<string|null>(null);