From 624593e425cf9ac7ad3cd86bf8041e10569ccd93 Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Tue, 9 Nov 2021 18:10:55 +0100 Subject: [PATCH] Implement twemoji on emote --- .../src/Components/EmoteMenu/EmoteMenu.svelte | 9 ++++-- front/src/Components/Menu/MenuIcon.svelte | 8 +---- front/src/Phaser/Entity/Character.ts | 8 +++-- front/src/Phaser/Game/GameScene.ts | 29 ++++++++++--------- front/src/Phaser/Player/Player.ts | 20 ++++++++++--- front/src/Stores/EmoteStore.ts | 8 ++++- 6 files changed, 51 insertions(+), 31 deletions(-) diff --git a/front/src/Components/EmoteMenu/EmoteMenu.svelte b/front/src/Components/EmoteMenu/EmoteMenu.svelte index 70aeb4cc..b4c24f39 100644 --- a/front/src/Components/EmoteMenu/EmoteMenu.svelte +++ b/front/src/Components/EmoteMenu/EmoteMenu.svelte @@ -18,13 +18,18 @@ '--font': 'Press Start 2P' }, emojisPerRow: isMobile() ? 6 : 8, - autoFocusSearch: false + autoFocusSearch: false, + style: 'twemoji', }); //the timeout is here to prevent the menu from flashing setTimeout(() => picker.showPicker(emojiContainer), 100); picker.on("emoji", (selection) => { - emoteStore.set(selection.emoji); + emoteStore.set({ + unicode: selection.emoji, + url: selection.url, + name: selection.name + }); }); picker.on("hidden", () => { diff --git a/front/src/Components/Menu/MenuIcon.svelte b/front/src/Components/Menu/MenuIcon.svelte index fa177c88..4b37238f 100644 --- a/front/src/Components/Menu/MenuIcon.svelte +++ b/front/src/Components/Menu/MenuIcon.svelte @@ -11,15 +11,9 @@ function showChat(){ chatVisibilityStore.set(true); } - - function onKeyDown(e: KeyboardEvent) { - if (e.key === "Tab") { - showMenu(); - } - } - +
open menu diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index 3606159f..7df18fcd 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -3,6 +3,7 @@ import { SpeechBubble } from "./SpeechBubble"; import Text = Phaser.GameObjects.Text; import Container = Phaser.GameObjects.Container; import Sprite = Phaser.GameObjects.Sprite; +import DOMElement = Phaser.GameObjects.DOMElement; import { TextureError } from "../../Exception/TextureError"; import { Companion } from "../Companion/Companion"; import type { GameScene } from "../Game/GameScene"; @@ -33,7 +34,7 @@ export abstract class Character extends Container { //private teleportation: Sprite; private invisible: boolean; public companion?: Companion; - private emote: Phaser.GameObjects.Text | null = null; + private emote: Phaser.GameObjects.DOMElement | null = null; private emoteTween: Phaser.Tweens.Tween | null = null; scene: GameScene; @@ -300,8 +301,9 @@ export abstract class Character extends Container { playEmote(emote: string) { this.cancelPreviousEmote(); const emoteY = -45; - this.playerName.setVisible(false); - this.emote = new Text(this.scene, -10, 0, emote, { fontSize: "20px" }); + const image = new Image(16, 16); + image.src = emote; + this.emote = new DOMElement(this.scene, -1, 0, image, "z-index:10;"); this.emote.setAlpha(0); this.add(this.emote); this.createStartTransition(emoteY); diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 6091f4cc..4812c142 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -15,10 +15,7 @@ import type { import { DEBUG_MODE, JITSI_PRIVATE_MODE, MAX_PER_GROUP, POSITION_DELAY } from "../../Enum/EnvironmentVariable"; import { Queue } from "queue-typescript"; -import { - Box, - ON_ACTION_TRIGGER_BUTTON, -} from "../../WebRtc/LayoutManager"; +import { Box, ON_ACTION_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager"; import { CoWebsite, coWebsiteManager } from "../../WebRtc/CoWebsiteManager"; import type { UserMovedMessage } from "../../Messages/generated/messages_pb"; import { ProtobufClientUtils } from "../../Network/ProtobufClientUtils"; @@ -497,7 +494,10 @@ export class GameScene extends DirtyScene { object.properties, 'in the "' + object.name + '" object of type "website"' ); - const allowApi = PropertyUtils.findBooleanProperty(GameMapProperties.ALLOW_API, object.properties); + const allowApi = PropertyUtils.findBooleanProperty( + GameMapProperties.ALLOW_API, + object.properties + ); // TODO: add a "allow" property to iframe this.embeddedWebsiteManager.createEmbeddedWebsite( @@ -614,10 +614,10 @@ export class GameScene extends DirtyScene { oldPeerNumber = newPeerNumber; }); - this.emoteUnsubscribe = emoteStore.subscribe((emoteKey) => { - if (emoteKey) { - this.CurrentPlayer?.playEmote(emoteKey); - this.connection?.emitEmoteEvent(emoteKey); + this.emoteUnsubscribe = emoteStore.subscribe((emote) => { + if (emote) { + this.CurrentPlayer?.playEmote(emote.url); + this.connection?.emitEmoteEvent(emote.url); emoteStore.set(null); } }); @@ -763,14 +763,14 @@ export class GameScene extends DirtyScene { this.gameMap.setPosition(this.CurrentPlayer.x, this.CurrentPlayer.y); // Init layer change listener - this.gameMap.onEnterLayer(layers => { - layers.forEach(layer => { + this.gameMap.onEnterLayer((layers) => { + layers.forEach((layer) => { iframeListener.sendEnterLayerEvent(layer.name); }); }); - this.gameMap.onLeaveLayer(layers => { - layers.forEach(layer => { + this.gameMap.onLeaveLayer((layers) => { + layers.forEach((layer) => { iframeListener.sendLeaveLayerEvent(layer.name); }); }); @@ -1868,7 +1868,8 @@ ${escapedMessage} public startJitsi(roomName: string, jwt?: string): void { const allProps = this.gameMap.getCurrentProperties(); const jitsiConfig = this.safeParseJSONstring( - allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined, GameMapProperties.JITSI_CONFIG + allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined, + GameMapProperties.JITSI_CONFIG ); const jitsiInterfaceConfig = this.safeParseJSONstring( allProps.get(GameMapProperties.JITSI_INTERFACE_CONFIG) as string | undefined, diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index 28a1d3bd..a1924457 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -3,8 +3,6 @@ import type { GameScene } from "../Game/GameScene"; import { UserInputEvent, UserInputManager } from "../UserInput/UserInputManager"; import { Character } from "../Entity/Character"; import { userMovingStore } from "../../Stores/GameStore"; -import { get } from "svelte/store"; -import { emoteMenuStore } from "../../Stores/EmoteStore"; export const hasMovedEventName = "hasMoved"; export const requestEmoteEventName = "requestEmote"; @@ -68,10 +66,24 @@ export class Player extends Character { } else if (this.wasMoving && moving) { // slow joystick movement this.move(0, 0); - this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y, oldX: x, oldY: y }); + this.emit(hasMovedEventName, { + moving, + direction: this.previousDirection, + x: this.x, + y: this.y, + oldX: x, + oldY: y, + }); } else if (this.wasMoving && !moving) { this.stop(); - this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y, oldX: x, oldY: y }); + this.emit(hasMovedEventName, { + moving, + direction: this.previousDirection, + x: this.x, + y: this.y, + oldX: x, + oldY: y, + }); } if (direction !== null) { diff --git a/front/src/Stores/EmoteStore.ts b/front/src/Stores/EmoteStore.ts index 56b06659..3f6c3cf5 100644 --- a/front/src/Stores/EmoteStore.ts +++ b/front/src/Stores/EmoteStore.ts @@ -1,5 +1,11 @@ import { writable } from "svelte/store"; +export interface Emoji { + unicode: string; + url: string; + name: string; +} + function createEmoteMenuStore() { const { subscribe, set } = writable(false); @@ -14,5 +20,5 @@ function createEmoteMenuStore() { }; } -export const emoteStore = writable(null); +export const emoteStore = writable(null); export const emoteMenuStore = createEmoteMenuStore();