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

front/src/Components/VisitCard/VisitCard.svelte

@@ -1,28 +1,64 @@
 <script lang="typescript">
     import { fly } from 'svelte/transition';
     import {requestVisitCardsStore} from "../../Stores/GameStore";
-    
+    import {onMount} from "svelte";
+
     export let visitCardUrl: string;
-    
+    let w = '500px';
+    let h = '250px';
+    let hidden = true;
+    let cvIframe;
+
     function closeCard() {
         requestVisitCardsStore.set(null);
     }
+
+    function handleIframeMessage(message:any) {
+        if (message.data.type === 'cvIframeSize') {
+            w = (message.data.data.w) + 'px';
+            h = (message.data.data.h) + 'px';
+        }
+    }
+
+    onMount(() => {
+        cvIframe.onload = () => hidden = false
+        cvIframe.onerror = () => hidden = false
+    })
 </script>
 
 <style lang="scss">
+
+  .loader {
+    border: 16px solid #f3f3f3; /* Light grey */
+    border-top: 16px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    margin:auto;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
   .visitCard {
     pointer-events: all;
     margin-left: auto;
     margin-right: auto;
-    width: 530px;
     margin-top: 200px;
-    max-width: 100vw;
+    max-width: 80vw;
 
     iframe {
       border: 0;
-      width: 530px;
-      height: 270px;
+      max-width: 80vw;
       overflow: hidden;
+
+      &.hidden {
+        visibility: hidden;
+        position: absolute;
+      }
     }
 
     button {
@@ -32,9 +68,17 @@
 </style>
 
 
-<section class="visitCard" transition:fly="{{ y: -200, duration: 1000 }}">
-    <iframe title="visitCardTitle" src={visitCardUrl}></iframe>
-    <div class="buttonContainer">
-        <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
-    </div>
+<section class="visitCard" transition:fly="{{ y: -200, duration: 1000 }}" style="width: {w}">
+    {#if hidden}
+        <div class="loader"></div>
+    {/if}
+    <iframe title="visitCard" src={visitCardUrl} allow="clipboard-read; clipboard-write self {visitCardUrl}" style="width: {w}; height: {h}" class:hidden={hidden} bind:this={cvIframe}></iframe>
+    {#if !hidden}
+        <div class="buttonContainer">
+            <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
+        </div>
+    {/if}
+
 </section>
+
+<svelte:window on:message={handleIframeMessage}/>

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -124,10 +124,15 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         selectCharacterSceneVisibleStore.set(false);
     }
 
-    createCurrentPlayer(): void {
+    createCurrentPlayer(): void {        
         for (let i = 0; i <this.playerModels.length; i++) {
             const playerResource = this.playerModels[i];
 
+            //check already exist texture
+            if(this.players.find((c) => c.texture.key === playerResource.name)){
+                continue;
+            }
+
             const [middleX, middleY] = this.getCharacterPosition();
             const player = this.physics.add.sprite(middleX, middleY, playerResource.name, 0);
             this.setUpPlayer(player, i);
@@ -258,6 +263,8 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         }
 
         if(this.lazyloadingAttempt){
+            //re-render players list
+            this.createCurrentPlayer();
             this.moveUser();
             this.lazyloadingAttempt = false;
         }