Twemoji Svelte
This commit is contained in:
parent
5497253e38
commit
bb3b58d8bf
@ -26,6 +26,7 @@
|
|||||||
import {soundPlayingStore} from "../Stores/SoundPlayingStore";
|
import {soundPlayingStore} from "../Stores/SoundPlayingStore";
|
||||||
import ErrorDialog from "./UI/ErrorDialog.svelte";
|
import ErrorDialog from "./UI/ErrorDialog.svelte";
|
||||||
import Menu from "./Menu/Menu.svelte";
|
import Menu from "./Menu/Menu.svelte";
|
||||||
|
import EmoteMenu from "./EmoteMenu/EmoteMenu.svelte";
|
||||||
import VideoOverlay from "./Video/VideoOverlay.svelte";
|
import VideoOverlay from "./Video/VideoOverlay.svelte";
|
||||||
import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility";
|
import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility";
|
||||||
import AdminMessage from "./TypeMessage/BanMessage.svelte";
|
import AdminMessage from "./TypeMessage/BanMessage.svelte";
|
||||||
@ -111,6 +112,9 @@
|
|||||||
<Menu></Menu>
|
<Menu></Menu>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
{#if $gameOverlayVisibilityStore}
|
||||||
|
<EmoteMenu></EmoteMenu>
|
||||||
|
{/if}
|
||||||
{#if $gameOverlayVisibilityStore}
|
{#if $gameOverlayVisibilityStore}
|
||||||
<div>
|
<div>
|
||||||
<VideoOverlay></VideoOverlay>
|
<VideoOverlay></VideoOverlay>
|
||||||
|
65
front/src/Components/EmoteMenu/EmoteMenu.svelte
Normal file
65
front/src/Components/EmoteMenu/EmoteMenu.svelte
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<script lang="typescript">
|
||||||
|
|
||||||
|
import { get } from "svelte/store";
|
||||||
|
import type { Unsubscriber } from "svelte/store";
|
||||||
|
import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
|
||||||
|
import { onDestroy, onMount } from "svelte";
|
||||||
|
import { EmojiButton } from '@joeattardi/emoji-button';
|
||||||
|
|
||||||
|
let emojiContainer: HTMLElement;
|
||||||
|
let picker: EmojiButton;
|
||||||
|
|
||||||
|
let unsubscriber: Unsubscriber | null = null;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
picker = new EmojiButton({
|
||||||
|
rootElement: emojiContainer,
|
||||||
|
style : 'twemoji',
|
||||||
|
styleProperties: {
|
||||||
|
'--font': 'Press Start 2P'
|
||||||
|
},
|
||||||
|
showSearch : false
|
||||||
|
});
|
||||||
|
|
||||||
|
picker.on("emoji", (selection) => {
|
||||||
|
emoteStore.set(selection.emoji);
|
||||||
|
});
|
||||||
|
|
||||||
|
picker.on("hidden", () => {
|
||||||
|
emoteMenuStore.set(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
unsubscriber = emoteMenuStore.subscribe(() => {
|
||||||
|
if (get(emoteMenuStore)) {
|
||||||
|
picker.showPicker(emojiContainer);
|
||||||
|
} else {
|
||||||
|
picker.hidePicker();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
if (unsubscriber) {
|
||||||
|
unsubscriber();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="emote-menu-container">
|
||||||
|
<div class="emote-menu" bind:this={emojiContainer}></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.emote-menu-container {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emote-menu {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,68 +0,0 @@
|
|||||||
import DOMElement = Phaser.GameObjects.DOMElement;
|
|
||||||
import { DEPTH_UI_INDEX } from "../Game/DepthIndexes";
|
|
||||||
import { waScaleManager } from "../Services/WaScaleManager";
|
|
||||||
import type { UserInputManager } from "../UserInput/UserInputManager";
|
|
||||||
import { EmojiButton } from '@joeattardi/emoji-button';
|
|
||||||
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
|
|
||||||
|
|
||||||
export const EmoteMenuClickEvent = "emoteClick";
|
|
||||||
|
|
||||||
export class EmoteMenu extends Phaser.GameObjects.Container {
|
|
||||||
private resizeCallback: OmitThisParameter<() => void>;
|
|
||||||
private container: DOMElement;
|
|
||||||
private picker: EmojiButton;
|
|
||||||
|
|
||||||
constructor(scene: Phaser.Scene, x: number, y: number, private userInputManager: UserInputManager) {
|
|
||||||
super(scene, x, y);
|
|
||||||
this.setDepth(DEPTH_UI_INDEX);
|
|
||||||
this.scene.add.existing(this);
|
|
||||||
this.container = new DOMElement(this.scene, 0, 0, "div", "", "");
|
|
||||||
this.container.setClassName("emoji-container");
|
|
||||||
const scalingFactor = waScaleManager.uiScalingFactor * 0.5;
|
|
||||||
this.container.setScale(scalingFactor);
|
|
||||||
this.add(this.container);
|
|
||||||
const emojiContainer = HtmlUtils.querySelectorOrFail(".emoji-container");
|
|
||||||
|
|
||||||
this.picker = new EmojiButton({
|
|
||||||
rootElement: emojiContainer,
|
|
||||||
styleProperties: {
|
|
||||||
'--font': 'Press Start 2P'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.picker.on("emoji", (selection) => {
|
|
||||||
this.emit(EmoteMenuClickEvent, selection.emoji);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.picker.on("hidden", () => {
|
|
||||||
this.userInputManager.restoreControls();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.resize();
|
|
||||||
this.resizeCallback = this.resize.bind(this);
|
|
||||||
this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
|
|
||||||
}
|
|
||||||
|
|
||||||
public isOpen(): boolean {
|
|
||||||
return this.picker.isPickerVisible();
|
|
||||||
}
|
|
||||||
|
|
||||||
public openPicker() {
|
|
||||||
this.userInputManager.disableControls();
|
|
||||||
const emojiContainer = HtmlUtils.querySelectorOrFail(".emoji-container");
|
|
||||||
this.picker.showPicker(emojiContainer);
|
|
||||||
}
|
|
||||||
|
|
||||||
public closePicker() {
|
|
||||||
this.picker.hidePicker();
|
|
||||||
}
|
|
||||||
|
|
||||||
private resize() {
|
|
||||||
this.setScale(waScaleManager.uiScalingFactor);
|
|
||||||
}
|
|
||||||
|
|
||||||
public destroy() {
|
|
||||||
this.scene.scale.removeListener(Phaser.Scale.Events.RESIZE, this.resizeCallback);
|
|
||||||
super.destroy();
|
|
||||||
}
|
|
||||||
}
|
|
@ -291,39 +291,38 @@ export abstract class Character extends Container {
|
|||||||
|
|
||||||
playEmote(emote: string) {
|
playEmote(emote: string) {
|
||||||
this.cancelPreviousEmote();
|
this.cancelPreviousEmote();
|
||||||
|
const emoteY = -45;
|
||||||
const scalingFactor = waScaleManager.uiScalingFactor;
|
|
||||||
const emoteY = -60;
|
|
||||||
|
|
||||||
this.playerName.setVisible(false);
|
this.playerName.setVisible(false);
|
||||||
this.emote = new Text(this.scene, -12, 0, emote, { fontFamily: '"twemoji"', fontSize: '24px' });
|
this.emote = new Text(this.scene, -10, 0, emote, { fontFamily: '"twemoji"', fontSize: '20px' });
|
||||||
this.emote.setAlpha(0);
|
this.emote.setAlpha(0);
|
||||||
this.add(this.emote);
|
this.add(this.emote);
|
||||||
this.createStartTransition(scalingFactor, emoteY);
|
this.createStartTransition(emoteY);
|
||||||
}
|
}
|
||||||
|
|
||||||
private createStartTransition(scalingFactor: number, emoteY: number) {
|
private createStartTransition(emoteY: number) {
|
||||||
|
if (this.emote) {
|
||||||
this.emoteTween = this.scene?.tweens.add({
|
this.emoteTween = this.scene?.tweens.add({
|
||||||
targets: this.emote,
|
targets: this.emote,
|
||||||
props: {
|
props: {
|
||||||
scale: scalingFactor,
|
|
||||||
alpha: 1,
|
alpha: 1,
|
||||||
y: emoteY,
|
y: emoteY,
|
||||||
},
|
},
|
||||||
ease: "Power2",
|
ease: "Power2",
|
||||||
duration: 500,
|
duration: 500,
|
||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
this.startPulseTransition(emoteY, scalingFactor);
|
this.startPulseTransition(emoteY);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private startPulseTransition(emoteY: number, scalingFactor: number) {
|
private startPulseTransition(emoteY: number) {
|
||||||
|
if (this.emote) {
|
||||||
this.emoteTween = this.scene?.tweens.add({
|
this.emoteTween = this.scene?.tweens.add({
|
||||||
targets: this.emote,
|
targets: this.emote,
|
||||||
props: {
|
props: {
|
||||||
y: emoteY * 1.3,
|
y: emoteY * 1.3,
|
||||||
scale: scalingFactor * 1.1,
|
scale: this.emote.scale * 1.1,
|
||||||
},
|
},
|
||||||
duration: 250,
|
duration: 250,
|
||||||
yoyo: true,
|
yoyo: true,
|
||||||
@ -334,6 +333,7 @@ export abstract class Character extends Container {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private startExitTransition(emoteY: number) {
|
private startExitTransition(emoteY: number) {
|
||||||
this.emoteTween = this.scene?.tweens.add({
|
this.emoteTween = this.scene?.tweens.add({
|
||||||
|
@ -82,6 +82,7 @@ import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStor
|
|||||||
import { SharedVariablesManager } from "./SharedVariablesManager";
|
import { SharedVariablesManager } from "./SharedVariablesManager";
|
||||||
import { playersStore } from "../../Stores/PlayersStore";
|
import { playersStore } from "../../Stores/PlayersStore";
|
||||||
import { chatVisibilityStore } from "../../Stores/ChatStore";
|
import { chatVisibilityStore } from "../../Stores/ChatStore";
|
||||||
|
import { emoteStore } from "../../Stores/EmoteStore";
|
||||||
import {
|
import {
|
||||||
audioManagerFileStore,
|
audioManagerFileStore,
|
||||||
audioManagerVisibilityStore,
|
audioManagerVisibilityStore,
|
||||||
@ -94,6 +95,7 @@ import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
|
|||||||
import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
|
import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
|
||||||
import { GameMapPropertiesListener } from "./GameMapPropertiesListener";
|
import { GameMapPropertiesListener } from "./GameMapPropertiesListener";
|
||||||
import type { RadialMenuItem } from "../Components/RadialMenu";
|
import type { RadialMenuItem } from "../Components/RadialMenu";
|
||||||
|
import { get } from "svelte/store";
|
||||||
|
|
||||||
export interface GameSceneInitInterface {
|
export interface GameSceneInitInterface {
|
||||||
initPosition: PointInterface | null;
|
initPosition: PointInterface | null;
|
||||||
@ -171,6 +173,7 @@ export class GameScene extends DirtyScene {
|
|||||||
private iframeSubscriptionList!: Array<Subscription>;
|
private iframeSubscriptionList!: Array<Subscription>;
|
||||||
private peerStoreUnsubscribe!: () => void;
|
private peerStoreUnsubscribe!: () => void;
|
||||||
private chatVisibilityUnsubscribe!: () => void;
|
private chatVisibilityUnsubscribe!: () => void;
|
||||||
|
private emoteUnsubscribe!: () => void;
|
||||||
private biggestAvailableAreaStoreUnsubscribe!: () => void;
|
private biggestAvailableAreaStoreUnsubscribe!: () => void;
|
||||||
MapUrlFile: string;
|
MapUrlFile: string;
|
||||||
roomUrl: string;
|
roomUrl: string;
|
||||||
@ -614,6 +617,15 @@ export class GameScene extends DirtyScene {
|
|||||||
this.openChatIcon.setVisible(!v);
|
this.openChatIcon.setVisible(!v);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.emoteUnsubscribe = emoteStore.subscribe(() => {
|
||||||
|
const emoteKey = get(emoteStore);
|
||||||
|
if (emoteKey) {
|
||||||
|
this.CurrentPlayer?.playEmote(emoteKey)
|
||||||
|
this.connection?.emitEmoteEvent(emoteKey);
|
||||||
|
emoteStore.set(null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
Promise.all([ this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises ]).then(() => {
|
Promise.all([ this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises ]).then(() => {
|
||||||
this.scene.wake();
|
this.scene.wake();
|
||||||
});
|
});
|
||||||
@ -1338,6 +1350,7 @@ export class GameScene extends DirtyScene {
|
|||||||
this.emoteManager.destroy();
|
this.emoteManager.destroy();
|
||||||
this.peerStoreUnsubscribe();
|
this.peerStoreUnsubscribe();
|
||||||
this.chatVisibilityUnsubscribe();
|
this.chatVisibilityUnsubscribe();
|
||||||
|
this.emoteUnsubscribe();
|
||||||
this.biggestAvailableAreaStoreUnsubscribe();
|
this.biggestAvailableAreaStoreUnsubscribe();
|
||||||
iframeListener.unregisterAnswerer("getState");
|
iframeListener.unregisterAnswerer("getState");
|
||||||
iframeListener.unregisterAnswerer("loadTileset");
|
iframeListener.unregisterAnswerer("loadTileset");
|
||||||
|
@ -3,7 +3,8 @@ import type { GameScene } from "../Game/GameScene";
|
|||||||
import { UserInputEvent, UserInputManager } from "../UserInput/UserInputManager";
|
import { UserInputEvent, UserInputManager } from "../UserInput/UserInputManager";
|
||||||
import { Character } from "../Entity/Character";
|
import { Character } from "../Entity/Character";
|
||||||
import { userMovingStore } from "../../Stores/GameStore";
|
import { userMovingStore } from "../../Stores/GameStore";
|
||||||
import { EmoteMenu, EmoteMenuClickEvent } from "../Components/EmoteMenu";
|
import { get } from "svelte/store";
|
||||||
|
import { emoteMenuStore } from "../../Stores/EmoteStore";
|
||||||
|
|
||||||
export const hasMovedEventName = "hasMoved";
|
export const hasMovedEventName = "hasMoved";
|
||||||
export const requestEmoteEventName = "requestEmote";
|
export const requestEmoteEventName = "requestEmote";
|
||||||
@ -11,8 +12,6 @@ export const requestEmoteEventName = "requestEmote";
|
|||||||
export class Player extends Character {
|
export class Player extends Character {
|
||||||
private previousDirection: string = PlayerAnimationDirections.Down;
|
private previousDirection: string = PlayerAnimationDirections.Down;
|
||||||
private wasMoving: boolean = false;
|
private wasMoving: boolean = false;
|
||||||
private emoteMenu: EmoteMenu | null = null;
|
|
||||||
private updateListener: () => void;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
Scene: GameScene,
|
Scene: GameScene,
|
||||||
@ -30,14 +29,6 @@ export class Player extends Character {
|
|||||||
|
|
||||||
//the current player model should be push away by other players to prevent conflict
|
//the current player model should be push away by other players to prevent conflict
|
||||||
this.getBody().setImmovable(false);
|
this.getBody().setImmovable(false);
|
||||||
|
|
||||||
this.updateListener = () => {
|
|
||||||
if (this.emoteMenu) {
|
|
||||||
this.emoteMenu.x = this.x;
|
|
||||||
this.emoteMenu.y = this.y;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
this.scene.events.addListener("postupdate", this.updateListener);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
moveUser(delta: number): void {
|
moveUser(delta: number): void {
|
||||||
@ -94,43 +85,16 @@ export class Player extends Character {
|
|||||||
return this.wasMoving;
|
return this.wasMoving;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
playEmote(emote: string) {
|
||||||
|
super.playEmote(emote);
|
||||||
|
emoteMenuStore.set(false);
|
||||||
|
}
|
||||||
|
|
||||||
openOrCloseEmoteMenu() {
|
openOrCloseEmoteMenu() {
|
||||||
if (!this.emoteMenu) {
|
if (get(emoteMenuStore)) {
|
||||||
this.emoteMenu = new EmoteMenu(this.scene, this.x, this.y, this.userInputManager)
|
emoteMenuStore.set(false);
|
||||||
}
|
|
||||||
|
|
||||||
if (this.emoteMenu.isOpen()) {
|
|
||||||
this.closeEmoteMenu();
|
|
||||||
} else {
|
} else {
|
||||||
this.openEmoteMenu();
|
emoteMenuStore.set(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
openEmoteMenu(): void {
|
|
||||||
this.cancelPreviousEmote();
|
|
||||||
if (!this.emoteMenu) return;
|
|
||||||
this.emoteMenu.openPicker();
|
|
||||||
this.emoteMenu.on(EmoteMenuClickEvent, (emote: string) => {
|
|
||||||
this.closeEmoteMenu();
|
|
||||||
this.emit(requestEmoteEventName, emote);
|
|
||||||
this.playEmote(emote);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
isSilent() {
|
|
||||||
super.isSilent();
|
|
||||||
}
|
|
||||||
noSilent() {
|
|
||||||
super.noSilent();
|
|
||||||
}
|
|
||||||
|
|
||||||
closeEmoteMenu(): void {
|
|
||||||
if (!this.emoteMenu) return;
|
|
||||||
this.emoteMenu.closePicker();
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
this.scene.events.removeListener("postupdate", this.updateListener);
|
|
||||||
super.destroy();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
4
front/src/Stores/EmoteStore.ts
Normal file
4
front/src/Stores/EmoteStore.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import { writable } from "svelte/store";
|
||||||
|
|
||||||
|
export const emoteStore = writable<string | null>(null);
|
||||||
|
export const emoteMenuStore = writable(false);
|
Loading…
Reference in New Issue
Block a user