added store with actions for actionsMenu

This commit is contained in:
Hanusiak Piotr 2022-01-25 13:42:41 +01:00
parent 69a2379e53
commit 67627637aa
4 changed files with 76 additions and 14 deletions

View file

@ -1,8 +1,12 @@
<script lang="typescript">
import { fly } from "svelte/transition";
import { ActionsMenuInterface, actionsMenuStore } from '../../Stores/ActionsMenuStore';
import { requestActionsMenuStore, requestVisitCardsStore } from '../../Stores/GameStore';
// export parameters here to show more menu options
let possibleActions: Map<string, ActionsMenuInterface>;
const unsubscribe = actionsMenuStore.subscribe(value => {
possibleActions = value;
});
function onKeyDown(e: KeyboardEvent) {
if (e.key === "Escape") {
@ -14,10 +18,6 @@
requestActionsMenuStore.set(false);
}
function showVisitingCard() {
// requestVisitCardsStore.set(true);
}
</script>
<svelte:window on:keydown={onKeyDown} />
@ -26,13 +26,15 @@
<button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>&times</button>
<h2>Actions</h2>
<nav>
<button
type="button"
class="nes-btn"
on:click|preventDefault={() => { console.log('clicked on button'); }}
>
Visiting Card
</button>
{#each [...possibleActions] as [key, menuAction]}
<button
type="button"
class="nes-btn"
on:click|preventDefault={() => { menuAction.callback(); }}
>
{menuAction.displayName}
</button>
{/each}
</nav>
</div>

View file

@ -3,6 +3,7 @@ import type { PointInterface } from "../../Connexion/ConnexionModels";
import { Character } from "../Entity/Character";
import type { PlayerAnimationDirections } from "../Player/Animation";
import { requestVisitCardsStore, requestActionsMenuStore } from "../../Stores/GameStore";
import { actionsMenuStore } from '../../Stores/ActionsMenuStore';
/**
* Class representing the sprite of a remote player (a player that plays on another computer)
@ -44,7 +45,30 @@ export class RemotePlayer extends Character {
this.on("pointerdown", (event: Phaser.Input.Pointer) => {
if (event.downElement.nodeName === "CANVAS") {
// requestVisitCardsStore.set(this.visitCardUrl);
actionsMenuStore.addPossibleAction(
"visit-card",
"Visiting Card", () => {
requestVisitCardsStore.set(this.visitCardUrl);
actionsMenuStore.clearActions();
requestActionsMenuStore.set(false);
});
actionsMenuStore.addPossibleAction(
"log-hello",
"Log Hello", () => {
console.log('HELLO');
// requestActionsMenuStore.set(false);
});
actionsMenuStore.addPossibleAction(
"log-goodbye",
"Log Goodbye", () => {
console.log('GOODBYE');
// requestActionsMenuStore.set(false);
});
actionsMenuStore.addPossibleAction(
"clear",
"Clear Actions", () => {
actionsMenuStore.clearActions();
});
requestActionsMenuStore.set(true);
}
});

View file

@ -0,0 +1,36 @@
import { writable } from "svelte/store";
export interface ActionsMenuInterface {
displayName: string;
callback: Function;
}
function createActionsMenuStore() {
const actions = new Map<string, ActionsMenuInterface>();
const { subscribe, update, set } = writable<Map<string, ActionsMenuInterface>>(actions);
return {
subscribe,
addPossibleAction: (key: string, displayName: string, callback: Function) => {
update((actions) => {
actions.set(key, { displayName, callback });
return actions;
});
},
removePossibleAction: (key: string) => {
update((actions) => {
actions.delete(key);
return actions;
});
},
/**
* Hides menu
*/
clearActions: () => {
set(new Map<string, ActionsMenuInterface>());
}
};
}
export const actionsMenuStore = createActionsMenuStore();

View file

@ -4,7 +4,7 @@ export const userMovingStore = writable(false);
export const requestVisitCardsStore = writable<string | null>(null);
export const requestActionsMenuStore = writable(true);
export const requestActionsMenuStore = writable(false);
export const userIsAdminStore = writable(false);