From 02108ce977a44fac50e05d052fbebc4a9e76a8e1 Mon Sep 17 00:00:00 2001
From: Kharhamel <oognic@gmail.com>
Date: Mon, 4 Oct 2021 11:23:30 +0200
Subject: [PATCH 1/2] FIX: fixes for the emnote menu

---
 front/src/Components/App.svelte                 | 4 ++--
 front/src/Components/EmoteMenu/EmoteMenu.svelte | 9 ++-------
 front/src/Phaser/Entity/Character.ts            | 2 +-
 front/src/Phaser/Game/GameManager.ts            | 4 ----
 front/src/Stores/EmoteStore.ts                  | 1 -
 front/style/style.scss                          | 4 ----
 6 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 1fbcf76a..ab8b6d3f 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import MenuIcon from "./Menu/MenuIcon.svelte";
     import {menuIconVisiblilityStore, menuVisiblilityStore} from "../Stores/MenuStore";
-    import {emoteMenuVisiblilityStore} from "../Stores/EmoteStore";
+    import {emoteMenuStore} from "../Stores/EmoteStore";
     import {enableCameraSceneVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
     import MyCamera from "./MyCamera.svelte";
@@ -113,7 +113,7 @@
             <Menu></Menu>
         </div>
     {/if}
-    {#if $emoteMenuVisiblilityStore}
+    {#if $emoteMenuStore}
         <div>
             <EmoteMenu></EmoteMenu>
         </div>
diff --git a/front/src/Components/EmoteMenu/EmoteMenu.svelte b/front/src/Components/EmoteMenu/EmoteMenu.svelte
index d69eded5..70aeb4cc 100644
--- a/front/src/Components/EmoteMenu/EmoteMenu.svelte
+++ b/front/src/Components/EmoteMenu/EmoteMenu.svelte
@@ -20,6 +20,8 @@
       emojisPerRow: isMobile() ? 6 : 8,
       autoFocusSearch: false
     });
+    //the timeout is here to prevent the menu from flashing
+    setTimeout(() => picker.showPicker(emojiContainer), 100);
 
     picker.on("emoji", (selection) => {
       emoteStore.set(selection.emoji);
@@ -29,13 +31,6 @@
       emoteMenuStore.closeEmoteMenu();
     });
 
-    unsubscriber = emoteMenuStore.subscribe((isEmoteMenuVisible) => {
-      if (isEmoteMenuVisible && !picker.isPickerVisible()) {
-        picker.showPicker(emojiContainer);
-      } else {
-        picker.hidePicker();
-      }
-    })
   })
 
   function onKeyDown(e:KeyboardEvent) {
diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index dd802540..3cdc60dc 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@@ -301,7 +301,7 @@ export abstract class Character extends Container {
         this.cancelPreviousEmote();
         const emoteY = -45;
         this.playerName.setVisible(false);
-        this.emote = new Text(this.scene, -10, 0, emote, { fontFamily: '"Twemoji Mozilla"', fontSize: "20px" });
+        this.emote = new Text(this.scene, -10, 0, emote, { fontSize: "20px" });
         this.emote.setAlpha(0);
         this.add(this.emote);
         this.createStartTransition(emoteY);
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index 2539a368..1bf18d8d 100644
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/front/src/Phaser/Game/GameManager.ts
@@ -9,7 +9,6 @@ import { get } from "svelte/store";
 import { requestedCameraState, requestedMicrophoneState } from "../../Stores/MediaStore";
 import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore";
 import { menuIconVisiblilityStore } from "../../Stores/MenuStore";
-import { emoteMenuVisiblilityStore } from "../../Stores/EmoteStore";
 
 /**
  * This class should be responsible for any scene starting/stopping
@@ -112,7 +111,6 @@ export class GameManager {
     public gameSceneIsCreated(scene: GameScene) {
         this.currentGameSceneName = scene.scene.key;
         menuIconVisiblilityStore.set(true);
-        emoteMenuVisiblilityStore.set(true);
     }
 
     /**
@@ -125,7 +123,6 @@ export class GameManager {
         gameScene.cleanupClosingScene();
         gameScene.createSuccessorGameScene(false, false);
         menuIconVisiblilityStore.set(false);
-        emoteMenuVisiblilityStore.set(false);
         if (!this.scenePlugin.get(targetSceneName)) {
             this.scenePlugin.add(targetSceneName, sceneClass, false);
         }
@@ -139,7 +136,6 @@ export class GameManager {
         if (this.currentGameSceneName) {
             this.scenePlugin.start(this.currentGameSceneName);
             menuIconVisiblilityStore.set(true);
-            emoteMenuVisiblilityStore.set(true);
         } else {
             this.scenePlugin.run(fallbackSceneName);
         }
diff --git a/front/src/Stores/EmoteStore.ts b/front/src/Stores/EmoteStore.ts
index d41e92a8..56b06659 100644
--- a/front/src/Stores/EmoteStore.ts
+++ b/front/src/Stores/EmoteStore.ts
@@ -14,6 +14,5 @@ function createEmoteMenuStore() {
     };
 }
 
-export const emoteMenuVisiblilityStore = writable(false);
 export const emoteStore = writable<string | null>(null);
 export const emoteMenuStore = createEmoteMenuStore();
diff --git a/front/style/style.scss b/front/style/style.scss
index 7584a4b5..553b63c8 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -1103,10 +1103,6 @@ div.is-silent.hide {
     right: 15px;
 }
 
-.emote-menu .emoji-picker .emoji-picker__emoji {
-    font-family: "Twemoji Mozilla" !important;
-}
-
 div.emoji-picker {
     background-color: #333;
     border-radius: 1em;

From 2db446889bf9bdf394e8a43f382be1c21c2a1519 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Mon, 4 Oct 2021 20:39:01 +0200
Subject: [PATCH 2/2] Create emoji test

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>
---
 maps/tests/emoji.json | 82 +++++++++++++++++++++++++++++++++++++++++++
 maps/tests/index.html |  8 +++++
 2 files changed, 90 insertions(+)
 create mode 100644 maps/tests/emoji.json

diff --git a/maps/tests/emoji.json b/maps/tests/emoji.json
new file mode 100644
index 00000000..520c7b26
--- /dev/null
+++ b/maps/tests/emoji.json
@@ -0,0 +1,82 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+         "height":10,
+         "id":1,
+         "name":"floor",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":2,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "height":308.584234177831,
+                 "id":1,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "fontfamily":"Sans Serif",
+                     "pixelsize":13,
+                     "text":"Test:\nClick on tne WOKA name\n\nResult:\nThe tab with all emoji should be displayed\n\nTest:\nChoose on emoji and click on it\n\nResult:\nEmoji will be play at the top of your WOKA",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":315.4375,
+                 "x":1.74700399641053,
+                 "y":1.43404009627554
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":7,
+ "nextobjectid":2,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"1.7.2",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":11,
+         "firstgid":1,
+         "image":"tileset1.png",
+         "imageheight":352,
+         "imagewidth":352,
+         "margin":0,
+         "name":"tileset1",
+         "spacing":0,
+         "tilecount":121,
+         "tileheight":32,
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":"1.6",
+ "width":10
+}
\ No newline at end of file
diff --git a/maps/tests/index.html b/maps/tests/index.html
index 09f6e54a..3c9538d5 100644
--- a/maps/tests/index.html
+++ b/maps/tests/index.html
@@ -79,6 +79,14 @@
                         <a href="#" class="testLink" data-testmap="jitsi_custom_url.json" target="_blank">Testing Jitsi + silent layer</a>
                     </td>
                 </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-emoji"> Success <input type="radio" name="test-emoji"> Failure <input type="radio" name="test-emoji" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="emoji.json" target="_blank">Testing Emoji</a>
+                    </td>
+                </tr>
             </table>
             <h2>Iframe API</h2>
             <table class="table">