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

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

@ -17,7 +17,7 @@
import { loginSceneVisibleStore } from "../Stores/LoginSceneStore"; import { loginSceneVisibleStore } from "../Stores/LoginSceneStore";
import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte"; import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
import VisitCard from "./VisitCard/VisitCard.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 type { Game } from "../Phaser/Game/Game";
import { chatVisibilityStore } from "../Stores/ChatStore"; import { chatVisibilityStore } from "../Stores/ChatStore";
@ -49,6 +49,7 @@
import { peerStore } from "../Stores/PeerStore"; import { peerStore } from "../Stores/PeerStore";
import FollowMenu from "./FollowMenu/FollowMenu.svelte"; import FollowMenu from "./FollowMenu/FollowMenu.svelte";
import ActionsMenu from './ActionsMenu/ActionsMenu.svelte'; import ActionsMenu from './ActionsMenu/ActionsMenu.svelte';
import { actionsMenuStore } from '../Stores/ActionsMenuStore';
export let game: Game; export let game: Game;
</script> </script>
@ -153,7 +154,7 @@ import ActionsMenu from './ActionsMenu/ActionsMenu.svelte';
{#if $requestVisitCardsStore} {#if $requestVisitCardsStore}
<VisitCard visitCardUrl={$requestVisitCardsStore} /> <VisitCard visitCardUrl={$requestVisitCardsStore} />
{/if} {/if}
{#if $requestActionsMenuStore} {#if $actionsMenuStore}
<ActionsMenu /> <ActionsMenu />
{/if} {/if}
{#if $errorStore.length > 0} {#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 { requestVisitCardsStore } from "../../Stores/GameStore";
import { actionsMenuStore } from '../../Stores/ActionsMenuStore'; import { ActionsMenuData, actionsMenuStore } from '../../Stores/ActionsMenuStore';
import { Character } from "../Entity/Character"; import { Character } from "../Entity/Character";
import type { GameScene } from "../Game/GameScene"; import type { GameScene } from "../Game/GameScene";
import type { PointInterface } from "../../Connexion/ConnexionModels"; import type { PointInterface } from "../../Connexion/ConnexionModels";
@ -14,8 +14,8 @@ export class RemotePlayer extends Character {
userId: number; userId: number;
private visitCardUrl: string | null; private visitCardUrl: string | null;
private actionsMenuRequested: boolean = false; private isActionsMenuInitialized: boolean = false;
private actionsMenuRequestedUnsubscriber: Unsubscriber; private actionsMenuStoreUnsubscriber: Unsubscriber;
constructor( constructor(
userId: number, userId: number,
@ -47,43 +47,34 @@ export class RemotePlayer extends Character {
//set data //set data
this.userId = userId; this.userId = userId;
this.visitCardUrl = visitCardUrl; this.visitCardUrl = visitCardUrl;
this.actionsMenuRequestedUnsubscriber = requestActionsMenuStore.subscribe((value: boolean) => { this.actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe((value: ActionsMenuData | undefined) => {
this.actionsMenuRequested = value; 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 (event.downElement.nodeName === "CANVAS") {
if (this.actionsMenuRequested) { if (this.isActionsMenuInitialized) {
actionsMenuPlayerNameStore.set(null); actionsMenuStore.clear();
requestActionsMenuStore.set(false);
return; return;
} }
actionsMenuStore.addPossibleAction( actionsMenuStore.initialize(this.PlayerValue);
"visit-card", actionsMenuStore.addAction(
"Visiting Card", () => { "Visiting Card", () => {
requestVisitCardsStore.set(this.visitCardUrl); requestVisitCardsStore.set(this.visitCardUrl);
actionsMenuStore.clearActions(); actionsMenuStore.clear();
requestActionsMenuStore.set(false);
}); });
actionsMenuStore.addPossibleAction( actionsMenuStore.addAction(
"log-hello",
"Log Hello", () => { "Log Hello", () => {
console.log('HELLO'); console.log('HELLO');
// requestActionsMenuStore.set(false);
}); });
actionsMenuStore.addPossibleAction( actionsMenuStore.addAction(
"log-goodbye",
"Log Goodbye", () => { "Log Goodbye", () => {
console.log('GOODBYE'); console.log('GOODBYE');
// requestActionsMenuStore.set(false);
}); });
actionsMenuStore.addPossibleAction( actionsMenuStore.addAction(
"clear", "Clear Goodbye Action", () => {
"Clear Actions", () => { actionsMenuStore.removeAction("Log Goodbye");
actionsMenuStore.clearActions();
}); });
actionsMenuPlayerNameStore.set(this.PlayerValue);
requestActionsMenuStore.set(true);
} }
}); });
} }
@ -101,8 +92,8 @@ export class RemotePlayer extends Character {
} }
public destroy(): void { public destroy(): void {
this.actionsMenuRequestedUnsubscriber(); this.actionsMenuStoreUnsubscriber();
requestActionsMenuStore.set(false); actionsMenuStore.clear();
super.destroy(); super.destroy();
} }
} }

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

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

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

@ -1,34 +1,43 @@
import { writable } from "svelte/store"; import { writable } from "svelte/store";
export interface ActionsMenuInterface { export interface ActionsMenuData {
displayName: string; playerName: string;
callback: Function; actions: {actionName: string, callback: Function }[];
} }
function createActionsMenuStore() { function createActionsMenuStore() {
const actions = new Map<string, ActionsMenuInterface>(); const { subscribe, update, set } = writable<ActionsMenuData | undefined>(undefined);
const { subscribe, update, set } = writable<Map<string, ActionsMenuInterface>>(actions);
return { return {
subscribe, subscribe,
addPossibleAction: (key: string, displayName: string, callback: Function) => { initialize: (playerName: string) => {
update((actions) => { set({
actions.set(key, { displayName, callback }); playerName,
return actions; actions: [],
}); });
}, },
removePossibleAction: (key: string) => { addAction: (actionName: string, callback: Function) => {
update((actions) => { update((data) => {
actions.delete(key); data?.actions.push({ actionName, callback });
return actions; 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 * Hides menu
*/ */
clearActions: () => { clear: () => {
set(new Map<string, ActionsMenuInterface>()); 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 requestVisitCardsStore = writable<string | null>(null);
export const requestActionsMenuStore = writable(false);
export const actionsMenuPlayerNameStore = writable<string | null>(null);
export const userIsAdminStore = writable(false); export const userIsAdminStore = writable(false);
export const limitMapStore = writable(false); export const limitMapStore = writable(false);