lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

simplify actionsMenu

Browse source
This commit is contained in:
Hanusiak Piotr 2022-01-26 10:40:13 +01:00
parent 58227a39f8
commit 06d403ebe3
6 changed files with 67 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
front/src/Components/ActionsMenu/ActionsMenu.svelte
View file

@ -1,16 +1,13 @@
<script lang="typescript">
import { fly } from "svelte/transition";
import { ActionsMenuInterface, actionsMenuStore } from '../../Stores/ActionsMenuStore';
import { requestActionsMenuStore, actionsMenuPlayerNameStore, requestVisitCardsStore } from '../../Stores/GameStore';
import { onDestroy, onMount, } from "svelte";
import { ActionsMenuData, actionsMenuStore } from '../../Stores/ActionsMenuStore';
import { onDestroy } from "svelte";
import type { Unsubscriber } from "svelte/store";
let possibleActions: Map<string, ActionsMenuInterface>;
let playerName: string | null;
let actionsMenuData: ActionsMenuData | undefined;
let actionsMenuStoreUnsubscriber: Unsubscriber | null;
let actionsMenuPlayerNameStoreUnsubscriber: Unsubscriber | null;
function onKeyDown(e: KeyboardEvent) {
if (e.key === "Escape") {
@ -19,45 +16,40 @@
}
function closeActionsMenu() {
requestActionsMenuStore.set(false);
actionsMenuStore.clear();
}
actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe(value => {
possibleActions = value;
});
actionsMenuPlayerNameStoreUnsubscriber = actionsMenuPlayerNameStore.subscribe(value => {
playerName = value;
actionsMenuData = value;
});
onDestroy(() => {
if (actionsMenuStoreUnsubscriber) {
actionsMenuStoreUnsubscriber();
}
if (actionsMenuPlayerNameStoreUnsubscriber) {
actionsMenuPlayerNameStoreUnsubscriber();
}
});
</script>
<svelte:window on:keydown={onKeyDown} />
<div class="actions-menu nes-container is-rounded">
<button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>&times</button>
<h2>{playerName}</h2>
<div class="actions">
{#each [...possibleActions] as [key, menuAction]}
<button
type="button"
class="nes-btn"
on:click|preventDefault={() => { menuAction.callback(); }}
>
{menuAction.displayName}
</button>
{/each}
{#if actionsMenuData}
<div class="actions-menu nes-container is-rounded">
<button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>&times</button>
<h2>{actionsMenuData.playerName}</h2>
<div class="actions">
{#each [...actionsMenuData.actions] as { actionName, callback }}
<button
type="button"
class="nes-btn"
on:click|preventDefault={() => { callback(); }}
>
{actionName}
</button>
{/each}
</div>
</div>
</div>
{/if}
<style lang="scss">
.actions-menu {

5
front/src/Components/App.svelte
View file

@ -17,7 +17,7 @@
import { loginSceneVisibleStore } from "../Stores/LoginSceneStore";
import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
import VisitCard from "./VisitCard/VisitCard.svelte";
import { requestVisitCardsStore, requestActionsMenuStore } from "../Stores/GameStore";
import { requestVisitCardsStore } from "../Stores/GameStore";
import type { Game } from "../Phaser/Game/Game";
import { chatVisibilityStore } from "../Stores/ChatStore";
@ -49,6 +49,7 @@
import { peerStore } from "../Stores/PeerStore";
import FollowMenu from "./FollowMenu/FollowMenu.svelte";
import ActionsMenu from './ActionsMenu/ActionsMenu.svelte';
import { actionsMenuStore } from '../Stores/ActionsMenuStore';
export let game: Game;
</script>
@ -153,7 +154,7 @@ import ActionsMenu from './ActionsMenu/ActionsMenu.svelte';
{#if $requestVisitCardsStore}
<VisitCard visitCardUrl={$requestVisitCardsStore} />
{/if}
{#if $requestActionsMenuStore}
{#if $actionsMenuStore}
<ActionsMenu />
{/if}
{#if $errorStore.length > 0}

47
front/src/Phaser/Entity/RemotePlayer.ts
View file

@ -1,6 +1,6 @@
import { requestVisitCardsStore, requestActionsMenuStore, actionsMenuPlayerNameStore } from "../../Stores/GameStore";
import { actionsMenuStore } from '../../Stores/ActionsMenuStore';
import { requestVisitCardsStore } from "../../Stores/GameStore";
import { ActionsMenuData, actionsMenuStore } from '../../Stores/ActionsMenuStore';
import { Character } from "../Entity/Character";
import type { GameScene } from "../Game/GameScene";
import type { PointInterface } from "../../Connexion/ConnexionModels";
@ -14,8 +14,8 @@ export class RemotePlayer extends Character {
userId: number;
private visitCardUrl: string | null;
private actionsMenuRequested: boolean = false;
private actionsMenuRequestedUnsubscriber: Unsubscriber;
private isActionsMenuInitialized: boolean = false;
private actionsMenuStoreUnsubscriber: Unsubscriber;
constructor(
userId: number,
@ -47,43 +47,34 @@ export class RemotePlayer extends Character {
//set data
this.userId = userId;
this.visitCardUrl = visitCardUrl;
this.actionsMenuRequestedUnsubscriber = requestActionsMenuStore.subscribe((value: boolean) => {
this.actionsMenuRequested = value;
this.actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe((value: ActionsMenuData | undefined) => {
this.isActionsMenuInitialized = value ? true : false;
});
this.on("pointerdown", (event: Phaser.Input.Pointer) => {
this.on(Phaser.Input.Events.POINTER_DOWN, (event: Phaser.Input.Pointer) => {
if (event.downElement.nodeName === "CANVAS") {
if (this.actionsMenuRequested) {
actionsMenuPlayerNameStore.set(null);
requestActionsMenuStore.set(false);
if (this.isActionsMenuInitialized) {
actionsMenuStore.clear();
return;
}
actionsMenuStore.addPossibleAction(
"visit-card",
actionsMenuStore.initialize(this.PlayerValue);
actionsMenuStore.addAction(
"Visiting Card", () => {
requestVisitCardsStore.set(this.visitCardUrl);
actionsMenuStore.clearActions();
requestActionsMenuStore.set(false);
actionsMenuStore.clear();
});
actionsMenuStore.addPossibleAction(
"log-hello",
actionsMenuStore.addAction(
"Log Hello", () => {
console.log('HELLO');
// requestActionsMenuStore.set(false);
});
actionsMenuStore.addPossibleAction(
"log-goodbye",
actionsMenuStore.addAction(
"Log Goodbye", () => {
console.log('GOODBYE');
// requestActionsMenuStore.set(false);
});
actionsMenuStore.addPossibleAction(
"clear",
"Clear Actions", () => {
actionsMenuStore.clearActions();
actionsMenuStore.addAction(
"Clear Goodbye Action", () => {
actionsMenuStore.removeAction("Log Goodbye");
});
actionsMenuPlayerNameStore.set(this.PlayerValue);
requestActionsMenuStore.set(true);
}
});
}
@ -101,8 +92,8 @@ export class RemotePlayer extends Character {
}
public destroy(): void {
this.actionsMenuRequestedUnsubscriber();
requestActionsMenuStore.set(false);
this.actionsMenuStoreUnsubscriber();
actionsMenuStore.clear();
super.destroy();
}
}

1
front/src/Phaser/Game/GameScene.ts
View file

@ -1917,7 +1917,6 @@ ${escapedMessage}
}
const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, addPlayerData.characterLayers);
console.log(addPlayerData);
const player = new RemotePlayer(
addPlayerData.userId,
this,

39
front/src/Stores/ActionsMenuStore.ts
View file

@ -1,34 +1,43 @@
import { writable } from "svelte/store";
export interface ActionsMenuInterface {
displayName: string;
callback: Function;
export interface ActionsMenuData {
playerName: string;
actions: {actionName: string, callback: Function }[];
}
function createActionsMenuStore() {
const actions = new Map<string, ActionsMenuInterface>();
const { subscribe, update, set } = writable<Map<string, ActionsMenuInterface>>(actions);
const { subscribe, update, set } = writable<ActionsMenuData | undefined>(undefined);
return {
subscribe,
addPossibleAction: (key: string, displayName: string, callback: Function) => {
update((actions) => {
actions.set(key, { displayName, callback });
return actions;
initialize: (playerName: string) => {
set({
playerName,
actions: [],
});
},
removePossibleAction: (key: string) => {
update((actions) => {
actions.delete(key);
return actions;
addAction: (actionName: string, callback: Function) => {
update((data) => {
data?.actions.push({ actionName, callback });
return data;
});
},
removeAction: (actionName: string) => {
update((data) => {
const actionIndex = data?.actions.findIndex(action => action.actionName === actionName);
console.log(actionIndex);
if (actionIndex !== undefined && actionIndex != -1) {
data?.actions.splice(actionIndex, 1);
}
return data;
});
},
/**
* Hides menu
*/
clearActions: () => {
set(new Map<string, ActionsMenuInterface>());
clear: () => {
set(undefined);
}
};
}

4
front/src/Stores/GameStore.ts
View file

@ -4,10 +4,6 @@ export const userMovingStore = writable(false);
export const requestVisitCardsStore = writable<string | null>(null);
export const requestActionsMenuStore = writable(false);
export const actionsMenuPlayerNameStore = writable<string | null>(null);
export const userIsAdminStore = writable(false);
export const limitMapStore = writable(false);