Update CoWebsite Jitsi

- Change Jitsi meeting icon
 - Add Jitsi meeting information

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -188,10 +188,19 @@
             />
         </rect>
     </svg>
+
+    <!-- TODO use trigger message property -->
+    <div class="cowebsite-hover"
+         class:hide={!isJitsi}
+         style="width: max-content;">
+        <label>Open / Close Jitsi meeting!</label>
+    </div>
+    
 </div>
 
 <style lang="scss">
     .cowebsite-thumbnail {
+      cursor: url("../../../style/images/cursor_pointer.png"), pointer;
       position: relative;
       padding: 0;
       background-color: rgba(#000000, 0.6);
@@ -236,6 +245,11 @@
           height: 40px;
         }
 
+        .cowebsite-hover {
+          top: -4px;
+          left: 55px;
+        }
+
         animation: shake 0.35s ease-in-out;
       }
 
@@ -320,5 +334,27 @@
           padding: 7px;
         }
       }
+
+      &:hover {
+        .cowebsite-hover {
+          display: block;
+          width: max-content !important;
+        }
+      }
+
+      .cowebsite-hover {
+        display: none;
+        position: absolute;
+        background-color: rgba(0, 0, 0, 0.6);
+        top: -30px;
+        left: -4px;
+        width: 0!important;
+        min-height: 20px;
+        transition: all 0.2s ease;
+        overflow: hidden;
+        color: white;
+        padding: 2px;
+        border-radius: 4px;
+      }
     }
 </style>

front/src/Components/EmbedScreens/CoWebsitesContainer.svelte

@@ -24,6 +24,7 @@
         left: 2%;
         overflow-x: auto;
         overflow-y: hidden;
+        overflow: visible;
 
         &.vertical {
             height: auto !important;
@@ -31,8 +32,6 @@
             bottom: auto !important;
             left: auto !important;
             position: relative;
-            overflow-x: hidden;
-            overflow-y: auto;
             flex-direction: column;
             align-items: center;
             padding-top: 4px;

front/src/Phaser/Entity/Character.ts

@@ -95,7 +95,7 @@ export abstract class Character extends Container implements OutlineableInterfac
             fontFamily: '"Press Start 2P"',
             fontSize: "8px",
             strokeThickness: 2,
-            stroke: "gray",
+            stroke: "black",
             metrics: {
                 ascent: 20,
                 descent: 10,

front/src/Phaser/Game/ActivatablesManager.ts

@@ -13,7 +13,7 @@ export class ActivatablesManager {
 
     private canSelectByDistance: boolean = true;
 
-    private readonly outlineColor = 0xffff00;
+    private readonly outlineColor = 0xf9e81e;
     private readonly directionalActivationPositionShift = 50;
 
     constructor(currentPlayer: Player) {

front/src/Phaser/Game/GameScene.ts

@@ -1687,7 +1687,7 @@ ${escapedMessage}
                 }
             });
             this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OVER, (pointer: Phaser.Input.Pointer) => {
-                this.CurrentPlayer.pointerOverOutline(0x00ffff);
+                this.CurrentPlayer.pointerOverOutline(0x365dff);
             });
             this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OUT, (pointer: Phaser.Input.Pointer) => {
                 this.CurrentPlayer.pointerOutOutline();

front/src/Phaser/Items/ActionableItem.ts

@@ -56,7 +56,7 @@ export class ActionableItem implements ActivatableInterface {
 
         this.getOutlinePlugin()?.add(this.sprite, {
             thickness: 2,
-            outlineColor: 0xffff00,
+            outlineColor: 0xf9e81e,
         });
     }