simplify actionsMenu
This commit is contained in:
parent
58227a39f8
commit
06d403ebe3
front/src
Components
Phaser
Stores
@ -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}>×</button>
|
<div class="actions-menu nes-container is-rounded">
|
||||||
<h2>{playerName}</h2>
|
<button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>×</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 {
|
||||||
|
@ -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}
|
||||||
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
|
@ -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,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);
|
||||||
|
Loading…
Reference in New Issue
Block a user