From 1c48feeb61c9550b2f51edecfbb64b97f791daba Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Wed, 10 Nov 2021 15:20:04 +0100 Subject: [PATCH 1/2] Add iconserver in services --- docker-compose.yaml | 12 ++ front/src/Enum/EnvironmentVariable.ts | 2 + front/src/WebRtc/CoWebsiteManager.ts | 169 +++++++++++++------------- front/webpack.config.ts | 1 + 4 files changed, 99 insertions(+), 85 deletions(-) diff --git a/docker-compose.yaml b/docker-compose.yaml index 4b3904dd..f68ed6a0 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -29,6 +29,7 @@ services: PUSHER_URL: //pusher.workadventure.localhost UPLOADER_URL: //uploader.workadventure.localhost ADMIN_URL: //workadventure.localhost + ICON_URL: //icon.workadventure.localhost STARTUP_COMMAND_1: ./templater.sh STARTUP_COMMAND_2: yarn install STUN_SERVER: "stun:stun.l.google.com:19302" @@ -177,6 +178,17 @@ services: - "traefik.http.routers.redisinsight-ssl.tls=true" - "traefik.http.routers.redisinsight-ssl.service=redisinsight" + icon: + image: matthiasluedtke/iconserver:v3.13.0 + labels: + - "traefik.http.routers.icon.rule=Host(`icon.workadventure.localhost`)" + - "traefik.http.routers.icon.entryPoints=web" + - "traefik.http.services.icon.loadbalancer.server.port=8080" + - "traefik.http.routers.icon-ssl.rule=Host(`icon.workadventure.localhost`)" + - "traefik.http.routers.icon-ssl.entryPoints=websecure" + - "traefik.http.routers.icon-ssl.tls=true" + - "traefik.http.routers.icon-ssl.service=icon" + # coturn: # image: coturn/coturn:4.5.2 # command: diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts index c0c19f1c..cf76a87d 100644 --- a/front/src/Enum/EnvironmentVariable.ts +++ b/front/src/Enum/EnvironmentVariable.ts @@ -4,6 +4,7 @@ const START_ROOM_URL: string = const PUSHER_URL = process.env.PUSHER_URL || "//pusher.workadventure.localhost"; export const ADMIN_URL = process.env.ADMIN_URL || "//workadventu.re"; const UPLOADER_URL = process.env.UPLOADER_URL || "//uploader.workadventure.localhost"; +const ICON_URL = process.env.ICON_URL || "//icon.workadventure.localhost"; const STUN_SERVER: string = process.env.STUN_SERVER || "stun:stun.l.google.com:19302"; const TURN_SERVER: string = process.env.TURN_SERVER || ""; const SKIP_RENDER_OPTIMIZATIONS: boolean = process.env.SKIP_RENDER_OPTIMIZATIONS == "true"; @@ -32,6 +33,7 @@ export { DISABLE_NOTIFICATIONS, PUSHER_URL, UPLOADER_URL, + ICON_URL, POSITION_DELAY, MAX_EXTRAPOLATION_TIME, STUN_SERVER, diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 823e138b..23dd7e2a 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -3,6 +3,7 @@ import { Subject } from "rxjs"; import { iframeListener } from "../Api/IframeListener"; import { touchScreenManager } from "../Touch/TouchScreenManager"; import { waScaleManager } from "../Phaser/Services/WaScaleManager"; +import { ICON_URL } from "../Enum/EnvironmentVariable"; enum iframeStates { closed = 1, @@ -27,16 +28,16 @@ interface TouchMoveCoordinates { y: number; } -export type CoWebsite = { - iframe: HTMLIFrameElement, - icon: HTMLDivElement, - position: number -} +export type CoWebsite = { + iframe: HTMLIFrameElement; + icon: HTMLDivElement; + position: number; +}; type CoWebsiteSlot = { - container: HTMLElement, - position: number -} + container: HTMLElement; + position: number; +}; class CoWebsiteManager { private openedMain: iframeStates = iframeStates.closed; @@ -61,7 +62,7 @@ class CoWebsiteManager { private slots: CoWebsiteSlot[]; - private resizeObserver = new ResizeObserver(entries => { + private resizeObserver = new ResizeObserver((entries) => { this.resizeAllIframes(); }); @@ -108,23 +109,23 @@ class CoWebsiteManager { this.slots = [ { container: this.cowebsiteMainDom, - position: 0 + position: 0, }, { - container: HtmlUtils.getElementByIdOrFail('cowebsite-slot-1'), - position: 1 + container: HtmlUtils.getElementByIdOrFail("cowebsite-slot-1"), + position: 1, }, { - container: HtmlUtils.getElementByIdOrFail('cowebsite-slot-2'), - position: 2 + container: HtmlUtils.getElementByIdOrFail("cowebsite-slot-2"), + position: 2, }, { - container: HtmlUtils.getElementByIdOrFail('cowebsite-slot-3'), - position: 3 + container: HtmlUtils.getElementByIdOrFail("cowebsite-slot-3"), + position: 3, }, { - container: HtmlUtils.getElementByIdOrFail('cowebsite-slot-4'), - position: 4 + container: HtmlUtils.getElementByIdOrFail("cowebsite-slot-4"), + position: 4, }, ]; @@ -163,8 +164,10 @@ class CoWebsiteManager { } private isSmallScreen(): boolean { - return window.matchMedia("(max-aspect-ratio: 1/1)").matches || - window.matchMedia("(max-width:960px) and (max-height:768px)").matches; + return ( + window.matchMedia("(max-aspect-ratio: 1/1)").matches || + window.matchMedia("(max-width:960px) and (max-height:768px)").matches + ); } private initResizeListeners(touchMode: boolean) { @@ -235,12 +238,12 @@ class CoWebsiteManager { private initActionsListeners() { this.slots.forEach((slot: CoWebsiteSlot) => { - const expandButton = slot.container.querySelector('.expand'); - const highlightButton = slot.container.querySelector('.hightlight'); - const closeButton = slot.container.querySelector('.close'); + const expandButton = slot.container.querySelector(".expand"); + const highlightButton = slot.container.querySelector(".hightlight"); + const closeButton = slot.container.querySelector(".close"); if (expandButton) { - expandButton.addEventListener('click', (event) => { + expandButton.addEventListener("click", (event) => { event.preventDefault(); const coWebsite = this.getCoWebsiteByPosition(slot.position); @@ -253,7 +256,7 @@ class CoWebsiteManager { } if (highlightButton) { - highlightButton.addEventListener('click', (event) => { + highlightButton.addEventListener("click", (event) => { event.preventDefault(); const coWebsite = this.getCoWebsiteByPosition(slot.position); @@ -266,7 +269,7 @@ class CoWebsiteManager { } if (closeButton) { - closeButton.addEventListener('click', (event) => { + closeButton.addEventListener("click", (event) => { event.preventDefault(); const coWebsite = this.getCoWebsiteByPosition(slot.position); @@ -284,37 +287,37 @@ class CoWebsiteManager { return this.coWebsites; } - public getCoWebsiteById(coWebsiteId: string): CoWebsite|undefined { + public getCoWebsiteById(coWebsiteId: string): CoWebsite | undefined { return this.coWebsites.find((coWebsite: CoWebsite) => coWebsite.iframe.id === coWebsiteId); } - private getSlotByPosition(position: number): CoWebsiteSlot|undefined { + private getSlotByPosition(position: number): CoWebsiteSlot | undefined { return this.slots.find((slot: CoWebsiteSlot) => slot.position === position); } - private getCoWebsiteByPosition(position: number): CoWebsite|undefined { + private getCoWebsiteByPosition(position: number): CoWebsite | undefined { return this.coWebsites.find((coWebsite: CoWebsite) => coWebsite.position === position); } private setIframeOffset(coWebsite: CoWebsite, slot: CoWebsiteSlot) { const bounding = slot.container.getBoundingClientRect(); - if (coWebsite.iframe.classList.contains('thumbnail')) { - coWebsite.iframe.style.width = ((bounding.right - bounding.left) * 2) + 'px'; - coWebsite.iframe.style.height = ((bounding.bottom - bounding.top) * 2) + 'px'; - coWebsite.iframe.style.top = (bounding.top - (Math.floor(bounding.height * 0.5))) + 'px'; - coWebsite.iframe.style.left = (bounding.left - (Math.floor(bounding.width * 0.5))) + 'px'; + if (coWebsite.iframe.classList.contains("thumbnail")) { + coWebsite.iframe.style.width = (bounding.right - bounding.left) * 2 + "px"; + coWebsite.iframe.style.height = (bounding.bottom - bounding.top) * 2 + "px"; + coWebsite.iframe.style.top = bounding.top - Math.floor(bounding.height * 0.5) + "px"; + coWebsite.iframe.style.left = bounding.left - Math.floor(bounding.width * 0.5) + "px"; } else { - coWebsite.iframe.style.top = bounding.top + 'px'; - coWebsite.iframe.style.left = bounding.left + 'px'; - coWebsite.iframe.style.width = (bounding.right - bounding.left) + 'px'; - coWebsite.iframe.style.height = (bounding.bottom - bounding.top) + 'px'; + coWebsite.iframe.style.top = bounding.top + "px"; + coWebsite.iframe.style.left = bounding.left + "px"; + coWebsite.iframe.style.width = bounding.right - bounding.left + "px"; + coWebsite.iframe.style.height = bounding.bottom - bounding.top + "px"; } } private resizeAllIframes() { this.coWebsites.forEach((coWebsite: CoWebsite) => { - const slot = this.getSlotByPosition(coWebsite.position); + const slot = this.getSlotByPosition(coWebsite.position); if (slot) { this.setIframeOffset(coWebsite, slot); @@ -333,34 +336,34 @@ class CoWebsiteManager { coWebsite.iframe.scrolling = newPosition === 0 || newPosition === 1 ? "yes" : "no"; if (newPosition === 0) { - coWebsite.iframe.classList.add('main'); + coWebsite.iframe.classList.add("main"); coWebsite.icon.style.display = "none"; } else { - coWebsite.iframe.classList.remove('main'); + coWebsite.iframe.classList.remove("main"); coWebsite.icon.style.display = "flex"; } if (newPosition === 1) { - coWebsite.iframe.classList.add('sub-main'); + coWebsite.iframe.classList.add("sub-main"); } else { - coWebsite.iframe.classList.remove('sub-main'); + coWebsite.iframe.classList.remove("sub-main"); } if (newPosition >= 2) { - coWebsite.iframe.classList.add('thumbnail'); + coWebsite.iframe.classList.add("thumbnail"); } else { - coWebsite.iframe.classList.remove('thumbnail'); + coWebsite.iframe.classList.remove("thumbnail"); } coWebsite.position = newPosition; if (oldSlot && !this.getCoWebsiteByPosition(oldSlot.position)) { - oldSlot.container.style.display = 'none'; + oldSlot.container.style.display = "none"; } - newSlot.container.style.display = 'block'; + newSlot.container.style.display = "block"; - coWebsite.iframe.classList.remove('pixel'); + coWebsite.iframe.classList.remove("pixel"); this.resizeAllIframes(); } @@ -384,11 +387,7 @@ class CoWebsiteManager { this.moveCoWebsite(coWebsite, newPosition); - if (newPosition === 4 || - !currentCoWebsite || - currentCoWebsite.iframe.id === coWebsite.iframe.id - ) - { + if (newPosition === 4 || !currentCoWebsite || currentCoWebsite.iframe.id === coWebsite.iframe.id) { return; } @@ -411,12 +410,12 @@ class CoWebsiteManager { if (coWebsite.position > 0) { const slot = this.getSlotByPosition(coWebsite.position); if (slot) { - slot.container.style.display = 'none'; + slot.container.style.display = "none"; } } - const previousCoWebsite = this.coWebsites.find((coWebsiteToCheck: CoWebsite) => - coWebsite.position + 1 === coWebsiteToCheck.position + const previousCoWebsite = this.coWebsites.find( + (coWebsiteToCheck: CoWebsite) => coWebsite.position + 1 === coWebsiteToCheck.position ); if (previousCoWebsite) { @@ -427,10 +426,8 @@ class CoWebsiteManager { coWebsite.iframe.remove(); } - public searchJitsi(): CoWebsite|undefined { - return this.coWebsites.find((coWebsite : CoWebsite) => - coWebsite.iframe.id.toLowerCase().includes('jitsi') - ); + public searchJitsi(): CoWebsite | undefined { + return this.coWebsites.find((coWebsite: CoWebsite) => coWebsite.iframe.id.toLowerCase().includes("jitsi")); } private generateCoWebsiteIcon(iframe: HTMLIFrameElement): HTMLDivElement { @@ -439,7 +436,7 @@ class CoWebsiteManager { icon.style.display = "none"; const iconImage = document.createElement("img"); - iconImage.src = `https://www.google.com/s2/favicons?sz=64&domain_url=${iframe.src}`; + iconImage.src = `${ICON_URL}/icon?url=${iframe.src}&size=16..30..256`; const url = new URL(iframe.src); iconImage.alt = url.hostname; @@ -456,27 +453,30 @@ class CoWebsiteManager { widthPercent?: number, position?: number ): Promise { + return this.addCoWebsite( + (iframeBuffer) => { + const iframe = document.createElement("iframe"); + iframe.src = new URL(url, base).toString(); - return this.addCoWebsite((iframeBuffer) => { - const iframe = document.createElement("iframe"); - iframe.src = new URL(url, base).toString() + if (allowPolicy) { + iframe.allow = allowPolicy; + } - if (allowPolicy) { - iframe.allow = allowPolicy; - } + if (allowApi) { + iframeListener.registerIframe(iframe); + } - if (allowApi) { - iframeListener.registerIframe(iframe); - } + iframeBuffer.appendChild(iframe); - iframeBuffer.appendChild(iframe); - - return iframe; - }, widthPercent, position); + return iframe; + }, + widthPercent, + position + ); } public async addCoWebsite( - callback: (iframeBuffer: HTMLDivElement) => PromiseLike|HTMLIFrameElement, + callback: (iframeBuffer: HTMLDivElement) => PromiseLike | HTMLIFrameElement, widthPercent?: number, position?: number ): Promise { @@ -484,10 +484,10 @@ class CoWebsiteManager { if (this.coWebsites.length < 1) { this.loadMain(); } else if (this.coWebsites.length === 5) { - throw new Error('Too many we') + throw new Error("Too many we"); } - Promise.resolve(callback(this.cowebsiteBufferDom)).then(iframe =>{ + Promise.resolve(callback(this.cowebsiteBufferDom)).then((iframe) => { iframe?.classList.add("pixel"); if (!iframe.id) { @@ -533,14 +533,14 @@ class CoWebsiteManager { setTimeout(() => { this.fire(); - position !== undefined ? - this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position) : - this.moveCoWebsite(coWebsite, coWebsite.position); + position !== undefined + ? this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position) + : this.moveCoWebsite(coWebsite, coWebsite.position); }, animationTime); } else { - position !== undefined ? - this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position) : - this.moveCoWebsite(coWebsite, coWebsite.position); + position !== undefined + ? this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position) + : this.moveCoWebsite(coWebsite, coWebsite.position); } return resolve(coWebsite); @@ -583,8 +583,7 @@ class CoWebsiteManager { } public closeCoWebsites(): Promise { - this.currentOperationPromise = this.currentOperationPromise - .then(() => { + this.currentOperationPromise = this.currentOperationPromise.then(() => { this.coWebsites.forEach((coWebsite: CoWebsite) => { this.closeCoWebsite(coWebsite); }); diff --git a/front/webpack.config.ts b/front/webpack.config.ts index cf414bd2..003db1fc 100644 --- a/front/webpack.config.ts +++ b/front/webpack.config.ts @@ -193,6 +193,7 @@ module.exports = { ADMIN_URL: undefined, CONTACT_URL: null, PROFILE_URL: null, + ICON_URL: null, DEBUG_MODE: null, STUN_SERVER: null, TURN_SERVER: null, From 624593e425cf9ac7ad3cd86bf8041e10569ccd93 Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Tue, 9 Nov 2021 18:10:55 +0100 Subject: [PATCH 2/2] 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();