From 23f7d6f08f93d1f2beb35954831509cc7e0871a0 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Sun, 20 Feb 2022 23:28:27 +0100
Subject: [PATCH] Update CoWebsite Jitsi

 - Change Jitsi meeting icon
 - Add Jitsi meeting information

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>
---
 .../CoWebsiteThumbnailSlot.svelte             | 280 ++++++++++--------
 .../EmbedScreens/CoWebsitesContainer.svelte   |   3 +-
 front/src/Phaser/Entity/Character.ts          |   2 +-
 front/src/Phaser/Game/ActivatablesManager.ts  |   2 +-
 front/src/Phaser/Game/GameScene.ts            |   2 +-
 front/src/Phaser/Items/ActionableItem.ts      |   2 +-
 6 files changed, 163 insertions(+), 128 deletions(-)

diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
index e7345223..4c0c3793 100644
--- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
+++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
@@ -188,137 +188,173 @@
             />
         </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 {
-        position: relative;
-        padding: 0;
-        background-color: rgba(#000000, 0.6);
-        margin: 12px;
-        margin-top: auto;
-        margin-bottom: auto;
+      cursor: url("../../../style/images/cursor_pointer.png"), pointer;
+      position: relative;
+      padding: 0;
+      background-color: rgba(#000000, 0.6);
+      margin: 12px;
+      margin-top: auto;
+      margin-bottom: auto;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 58px;
+        height: 58px;
+        left: -8px;
+        top: -8px;
+
+        margin: 4px;
+
+        border-style: solid;
+        border-width: 4px;
+        border-image-slice: 3;
+        border-image-width: 3;
+        border-image-repeat: stretch;
+        border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
+        border-image-outset: 1;
+      }
+
+      &:not(.vertical) {
+        transition: all 300ms;
+        transform: translateY(0px);
+      }
+
+      &.vertical {
+        margin: 7px;
 
         &::before {
-            content: "";
-            position: absolute;
-            width: 58px;
-            height: 58px;
-            left: -8px;
-            top: -8px;
-
-            margin: 4px;
-
-            border-style: solid;
-            border-width: 4px;
-            border-image-slice: 3;
-            border-image-width: 3;
-            border-image-repeat: stretch;
-            border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
-            border-image-outset: 1;
-        }
-
-        &:not(.vertical) {
-            transition: all 300ms;
-            transform: translateY(0px);
-        }
-
-        &.vertical {
-            margin: 7px;
-
-            &::before {
-                width: 48px;
-                height: 48px;
-            }
-
-            .cowebsite-icon {
-                width: 40px;
-                height: 40px;
-            }
-
-            animation: shake 0.35s ease-in-out;
-        }
-
-        &.displayed {
-            &:not(.vertical) {
-                transform: translateY(-15px);
-            }
-        }
-
-        &.asleep {
-            filter: grayscale(100%);
-            --webkit-filter: grayscale(100%);
-        }
-
-        &.loading {
-            animation: 2500ms ease-in-out 0s infinite alternate backgroundLoading;
-        }
-
-        &.ready {
-            &::before {
-                border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(38, 74, 110)" /></svg>');
-            }
-        }
-
-        @keyframes backgroundLoading {
-            0% {
-                background-color: rgba(#000000, 0.6);
-            }
-
-            100% {
-                background-color: #25598e;
-            }
-        }
-
-        @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);
-            }
+          width: 48px;
+          height: 48px;
         }
 
         .cowebsite-icon {
-            width: 50px;
-            height: 50px;
-            object-fit: cover;
-
-            &.hide {
-                display: none;
-            }
-
-            &.jitsi {
-                filter: invert(100%);
-                -webkit-filter: invert(100%);
-                padding: 7px;
-            }
+          width: 40px;
+          height: 40px;
         }
+
+        .cowebsite-hover {
+          top: -4px;
+          left: 55px;
+        }
+
+        animation: shake 0.35s ease-in-out;
+      }
+
+      &.displayed {
+        &:not(.vertical) {
+          transform: translateY(-15px);
+        }
+      }
+
+      &.asleep {
+        filter: grayscale(100%);
+        --webkit-filter: grayscale(100%);
+      }
+
+      &.loading {
+        animation: 2500ms ease-in-out 0s infinite alternate backgroundLoading;
+      }
+
+      &.ready {
+        &::before {
+          border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(38, 74, 110)" /></svg>');
+        }
+      }
+
+      @keyframes backgroundLoading {
+        0% {
+          background-color: rgba(#000000, 0.6);
+        }
+
+        100% {
+          background-color: #25598e;
+        }
+      }
+
+      @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;
+        object-fit: cover;
+
+        &.hide {
+          display: none;
+        }
+
+        &.jitsi {
+          filter: invert(100%);
+          -webkit-filter: invert(100%);
+          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>
diff --git a/front/src/Components/EmbedScreens/CoWebsitesContainer.svelte b/front/src/Components/EmbedScreens/CoWebsitesContainer.svelte
index 602a1625..dad86ad3 100644
--- a/front/src/Components/EmbedScreens/CoWebsitesContainer.svelte
+++ b/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;
diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index b411eee7..35aa3f09 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/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,
diff --git a/front/src/Phaser/Game/ActivatablesManager.ts b/front/src/Phaser/Game/ActivatablesManager.ts
index 74c637d7..b41c5a72 100644
--- a/front/src/Phaser/Game/ActivatablesManager.ts
+++ b/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) {
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 2d887b2a..2b11a782 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/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();
diff --git a/front/src/Phaser/Items/ActionableItem.ts b/front/src/Phaser/Items/ActionableItem.ts
index ff85e232..fa7a87dc 100644
--- a/front/src/Phaser/Items/ActionableItem.ts
+++ b/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,
         });
     }