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

ran prettier

Browse source
This commit is contained in:
Hanusiak Piotr 2022-02-02 13:30:49 +01:00
parent 0eaeaf7cfb
commit 45a7e9331b
13 changed files with 62 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,9 @@
<script lang="typescript"> <script lang="typescript">
import { actionsMenuStore } from '../../Stores/ActionsMenuStore'; import { actionsMenuStore } from "../../Stores/ActionsMenuStore";
import { onDestroy } from "svelte"; import { onDestroy } from "svelte";
import type { Unsubscriber } from "svelte/store"; import type { Unsubscriber } from "svelte/store";
import type { ActionsMenuData } from '../../Stores/ActionsMenuStore'; import type { ActionsMenuData } from "../../Stores/ActionsMenuStore";
let actionsMenuData: ActionsMenuData | undefined; let actionsMenuData: ActionsMenuData | undefined;
@ -19,7 +19,7 @@
actionsMenuStore.clear(); actionsMenuStore.clear();
} }
actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe(value => { actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe((value) => {
actionsMenuData = value; actionsMenuData = value;
}); });
@ -28,7 +28,6 @@
actionsMenuStoreUnsubscriber(); actionsMenuStoreUnsubscriber();
} }
}); });
</script> </script>
<svelte:window on:keydown={onKeyDown} /> <svelte:window on:keydown={onKeyDown} />
@ -42,17 +41,19 @@
<button <button
type="button" type="button"
class="nes-btn" class="nes-btn"
on:click|preventDefault={() => { callback(); }} on:click|preventDefault={() => {
callback();
}}
> >
{actionName} {actionName}
</button> </button>
{/each} {/each}
</div> </div>
</div> </div>
{/if} {/if}
<style lang="scss"> <style lang="scss">
.actions-menu { .actions-menu {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
@ -69,9 +70,9 @@
.actions { .actions {
max-height: calc(100% - 50px); max-height: calc(100% - 50px);
width: 100%; width: 100%;
display:block; display: block;
overflow-x:hidden; overflow-x: hidden;
overflow-y:auto; overflow-y: auto;
button { button {
width: calc(100% - 10px); width: calc(100% - 10px);
@ -95,4 +96,4 @@
right: -20px; right: -20px;
} }
} }
</style> </style>

6
front/src/Components/MainLayout.svelte
View file

@ -36,8 +36,8 @@
import LimitRoomModal from "./Modal/LimitRoomModal.svelte"; import LimitRoomModal from "./Modal/LimitRoomModal.svelte";
import ShareLinkMapModal from "./Modal/ShareLinkMapModal.svelte"; import ShareLinkMapModal from "./Modal/ShareLinkMapModal.svelte";
import { LayoutMode } from "../WebRtc/LayoutManager"; import { LayoutMode } from "../WebRtc/LayoutManager";
import { actionsMenuStore } from '../Stores/ActionsMenuStore'; import { actionsMenuStore } from "../Stores/ActionsMenuStore";
import ActionsMenu from './ActionsMenu/ActionsMenu.svelte'; import ActionsMenu from "./ActionsMenu/ActionsMenu.svelte";
let mainLayout: HTMLDivElement; let mainLayout: HTMLDivElement;
@ -107,7 +107,7 @@ import ActionsMenu from './ActionsMenu/ActionsMenu.svelte';
{#if $followStateStore !== "off" || $peerStore.size > 0} {#if $followStateStore !== "off" || $peerStore.size > 0}
<FollowMenu /> <FollowMenu />
{/if} {/if}
{#if $actionsMenuStore} {#if $actionsMenuStore}
<ActionsMenu /> <ActionsMenu />
{/if} {/if}

4
front/src/Phaser/Entity/Character.ts
View file

@ -15,7 +15,7 @@ import { TexturesHelper } from "../Helpers/TexturesHelper";
import type { PictureStore } from "../../Stores/PictureStore"; import type { PictureStore } from "../../Stores/PictureStore";
import { Unsubscriber, Writable, writable } from "svelte/store"; import { Unsubscriber, Writable, writable } from "svelte/store";
import { createColorStore } from "../../Stores/OutlineColorStore"; import { createColorStore } from "../../Stores/OutlineColorStore";
import type { OutlineableInterface } from '../Game/OutlineableInterface'; import type { OutlineableInterface } from "../Game/OutlineableInterface";
import type CancelablePromise from "cancelable-promise"; import type CancelablePromise from "cancelable-promise";
const playerNameY = -25; const playerNameY = -25;
@ -155,7 +155,7 @@ export abstract class Character extends Container implements OutlineableInterfac
return this.clickable; return this.clickable;
} }
public getPosition(): { x: number, y: number } { public getPosition(): { x: number; y: number } {
return { x: this.x, y: this.y }; return { x: this.x, y: this.y };
} }

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

@ -1,23 +1,21 @@
import { requestVisitCardsStore } from "../../Stores/GameStore"; import { requestVisitCardsStore } from "../../Stores/GameStore";
import { ActionsMenuData, 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";
import type { PlayerAnimationDirections } from "../Player/Animation"; import type { PlayerAnimationDirections } from "../Player/Animation";
import type { Unsubscriber } from 'svelte/store'; import type { Unsubscriber } from "svelte/store";
import type { ActivatableInterface } from '../Game/ActivatableInterface'; import type { ActivatableInterface } from "../Game/ActivatableInterface";
import type CancelablePromise from "cancelable-promise"; import type CancelablePromise from "cancelable-promise";
/** /**
* Class representing the sprite of a remote player (a player that plays on another computer) * Class representing the sprite of a remote player (a player that plays on another computer)
*/ */
export class RemotePlayer extends Character implements ActivatableInterface { export class RemotePlayer extends Character implements ActivatableInterface {
public userId: number; public userId: number;
public readonly activationRadius: number; public readonly activationRadius: number;
private registeredActions: { actionName: string, callback: Function }[]; private registeredActions: { actionName: string; callback: Function }[];
private visitCardUrl: string | null; private visitCardUrl: string | null;
private isActionsMenuInitialized: boolean = false; private isActionsMenuInitialized: boolean = false;
private actionsMenuStoreUnsubscriber: Unsubscriber; private actionsMenuStoreUnsubscriber: Unsubscriber;
@ -34,21 +32,9 @@ export class RemotePlayer extends Character implements ActivatableInterface {
visitCardUrl: string | null, visitCardUrl: string | null,
companion: string | null, companion: string | null,
companionTexturePromise?: Promise<string>, companionTexturePromise?: Promise<string>,
activationRadius?: number, activationRadius?: number
) { ) {
super( super(Scene, x, y, texturesPromise, name, direction, moving, 1, true, companion, companionTexturePromise);
Scene,
x,
y,
texturesPromise,
name,
direction,
moving,
1,
true,
companion,
companionTexturePromise
);
//set data //set data
this.userId = userId; this.userId = userId;
@ -76,13 +62,13 @@ export class RemotePlayer extends Character implements ActivatableInterface {
} }
} }
public registerActionsMenuAction(action: { actionName: string, callback: Function }): void { public registerActionsMenuAction(action: { actionName: string; callback: Function }): void {
this.registeredActions.push(action); this.registeredActions.push(action);
this.updateIsClickable(); this.updateIsClickable();
} }
public unregisterActionsMenuAction(actionName: string) { public unregisterActionsMenuAction(actionName: string) {
const index = this.registeredActions.findIndex(action => action.actionName === actionName); const index = this.registeredActions.findIndex((action) => action.actionName === actionName);
if (index !== -1) { if (index !== -1) {
this.registeredActions.splice(index, 1); this.registeredActions.splice(index, 1);
} }
@ -125,7 +111,7 @@ export class RemotePlayer extends Character implements ActivatableInterface {
callback: () => { callback: () => {
requestVisitCardsStore.set(this.visitCardUrl); requestVisitCardsStore.set(this.visitCardUrl);
actionsMenuStore.clear(); actionsMenuStore.clear();
} },
}); });
} }
} }

3
front/src/Phaser/Game/ActivatableInterface.ts
View file

@ -1,7 +1,6 @@
export interface ActivatableInterface { export interface ActivatableInterface {
readonly activationRadius: number; readonly activationRadius: number;
isActivatable: () => boolean; isActivatable: () => boolean;
activate: () => void; activate: () => void;
getPosition: () => { x: number, y: number }; getPosition: () => { x: number; y: number };
} }

15
front/src/Phaser/Game/ActivatablesManager.ts
View file

@ -1,17 +1,16 @@
import { isOutlineable } from '../../Utils/CustomTypeGuards'; import { isOutlineable } from "../../Utils/CustomTypeGuards";
import { MathUtils } from '../../Utils/MathUtils'; import { MathUtils } from "../../Utils/MathUtils";
import type { Player } from '../Player/Player'; import type { Player } from "../Player/Player";
import type { ActivatableInterface } from './ActivatableInterface'; import type { ActivatableInterface } from "./ActivatableInterface";
export class ActivatablesManager { export class ActivatablesManager {
// The item that can be selected by pressing the space key. // The item that can be selected by pressing the space key.
private selectedActivatableObjectByDistance?: ActivatableInterface; private selectedActivatableObjectByDistance?: ActivatableInterface;
private selectedActivatableObjectByPointer?: ActivatableInterface; private selectedActivatableObjectByPointer?: ActivatableInterface;
private activatableObjectsDistances: Map<ActivatableInterface, number> = new Map<ActivatableInterface, number>(); private activatableObjectsDistances: Map<ActivatableInterface, number> = new Map<ActivatableInterface, number>();
private currentPlayer: Player; private currentPlayer: Player;
constructor(currentPlayer: Player) { constructor(currentPlayer: Player) {
this.currentPlayer = currentPlayer; this.currentPlayer = currentPlayer;
} }
@ -54,7 +53,7 @@ export class ActivatablesManager {
// update value but do not change the outline // update value but do not change the outline
if (this.selectedActivatableObjectByPointer) { if (this.selectedActivatableObjectByPointer) {
this.selectedActivatableObjectByDistance = newNearestObject; this.selectedActivatableObjectByDistance = newNearestObject;
return; return;
} }
if (isOutlineable(this.selectedActivatableObjectByDistance)) { if (isOutlineable(this.selectedActivatableObjectByDistance)) {
this.selectedActivatableObjectByDistance?.characterFarAwayOutline(); this.selectedActivatableObjectByDistance?.characterFarAwayOutline();
@ -88,7 +87,7 @@ export class ActivatablesManager {
public updateDistanceForSingleActivatableObject(object: ActivatableInterface): void { public updateDistanceForSingleActivatableObject(object: ActivatableInterface): void {
this.activatableObjectsDistances.set( this.activatableObjectsDistances.set(
object, object,
MathUtils.distanceBetween(this.currentPlayer.getPosition(), object.getPosition()), MathUtils.distanceBetween(this.currentPlayer.getPosition(), object.getPosition())
); );
} }
} }

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

@ -49,7 +49,7 @@ import { GameMapPropertiesListener } from "./GameMapPropertiesListener";
import { analyticsClient } from "../../Administration/AnalyticsClient"; import { analyticsClient } from "../../Administration/AnalyticsClient";
import { GameMapProperties } from "./GameMapProperties"; import { GameMapProperties } from "./GameMapProperties";
import { PathfindingManager } from "../../Utils/PathfindingManager"; import { PathfindingManager } from "../../Utils/PathfindingManager";
import { ActivatablesManager } from './ActivatablesManager'; import { ActivatablesManager } from "./ActivatablesManager";
import type { import type {
GroupCreatedUpdatedMessageInterface, GroupCreatedUpdatedMessageInterface,
MessageUserMovedInterface, MessageUserMovedInterface,
@ -805,10 +805,9 @@ export class GameScene extends DirtyScene {
this.simplePeer = new SimplePeer(this.connection); this.simplePeer = new SimplePeer(this.connection);
userMessageManager.setReceiveBanListener(this.bannedUser.bind(this)); userMessageManager.setReceiveBanListener(this.bannedUser.bind(this));
this.CurrentPlayer.on( this.CurrentPlayer.on(hasMovedEventName, (event: HasPlayerMovedEvent) => {
hasMovedEventName, this.handleCurrentPlayerHasMovedEvent(event);
(event: HasPlayerMovedEvent) => { this.handleCurrentPlayerHasMovedEvent(event); }, });
);
// Set up variables manager // Set up variables manager
this.sharedVariablesManager = new SharedVariablesManager( this.sharedVariablesManager = new SharedVariablesManager(
@ -1685,7 +1684,10 @@ ${escapedMessage}
//listen event to share position of user //listen event to share position of user
this.pushPlayerPosition(event); this.pushPlayerPosition(event);
this.gameMap.setPosition(event.x, event.y); this.gameMap.setPosition(event.x, event.y);
this.activatablesManager.updateActivatableObjectsDistances([...Array.from(this.MapPlayersByKey.values()), ...this.actionableItems.values()]); this.activatablesManager.updateActivatableObjectsDistances([
...Array.from(this.MapPlayersByKey.values()),
...this.actionableItems.values(),
]);
this.activatablesManager.deduceSelectedActivatableObjectByDistance(); this.activatablesManager.deduceSelectedActivatableObjectByDistance();
} }

17
front/src/Phaser/Game/OutlineableInterface.ts
View file

@ -1,11 +1,10 @@
export interface OutlineableInterface { export interface OutlineableInterface {
setFollowOutlineColor(color: number): void setFollowOutlineColor(color: number): void;
removeFollowOutlineColor(): void removeFollowOutlineColor(): void;
setApiOutlineColor(color: number): void setApiOutlineColor(color: number): void;
removeApiOutlineColor(): void removeApiOutlineColor(): void;
pointerOverOutline(): void pointerOverOutline(): void;
pointerOutOutline(): void pointerOutOutline(): void;
characterCloseByOutline(): void characterCloseByOutline(): void;
characterFarAwayOutline(): void characterFarAwayOutline(): void;
} }

6
front/src/Phaser/Items/ActionableItem.ts
View file

@ -5,11 +5,11 @@
import Sprite = Phaser.GameObjects.Sprite; import Sprite = Phaser.GameObjects.Sprite;
import type { GameScene } from "../Game/GameScene"; import type { GameScene } from "../Game/GameScene";
import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js"; import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js";
import type { ActivatableInterface } from '../Game/ActivatableInterface'; import type { ActivatableInterface } from "../Game/ActivatableInterface";
type EventCallback = (state: unknown, parameters: unknown) => void; type EventCallback = (state: unknown, parameters: unknown) => void;
export class ActionableItem implements ActivatableInterface{ export class ActionableItem implements ActivatableInterface {
private readonly activationRadiusSquared: number; private readonly activationRadiusSquared: number;
private isSelectable: boolean = false; private isSelectable: boolean = false;
private callbacks: Map<string, Array<EventCallback>> = new Map<string, Array<EventCallback>>(); private callbacks: Map<string, Array<EventCallback>> = new Map<string, Array<EventCallback>>();
@ -41,7 +41,7 @@ export class ActionableItem implements ActivatableInterface{
} }
} }
public getPosition(): { x: number, y: number } { public getPosition(): { x: number; y: number } {
return { x: this.sprite.x, y: this.sprite.y }; return { x: this.sprite.x, y: this.sprite.y };
} }

6
front/src/Phaser/UserInput/GameSceneUserInputHandler.ts
View file

@ -1,5 +1,5 @@
import { Player } from '../Player/Player'; import { Player } from "../Player/Player";
import { RemotePlayer } from '../Entity/RemotePlayer'; import { RemotePlayer } from "../Entity/RemotePlayer";
import type { UserInputHandlerInterface } from "../../Interfaces/UserInputHandlerInterface"; import type { UserInputHandlerInterface } from "../../Interfaces/UserInputHandlerInterface";
import type { GameScene } from "../Game/GameScene"; import type { GameScene } from "../Game/GameScene";
@ -55,7 +55,7 @@ export class GameSceneUserInputHandler implements UserInputHandlerInterface {
public handleSpaceKeyUpEvent(event: Event): Event { public handleSpaceKeyUpEvent(event: Event): Event {
const activatable = this.gameScene.getActivatablesManager().getSelectedActivatableObject(); const activatable = this.gameScene.getActivatablesManager().getSelectedActivatableObject();
if (activatable && activatable.isActivatable()) { if (activatable && activatable.isActivatable()) {
activatable.activate(); activatable.activate();
} }
return event; return event;
} }

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

@ -2,11 +2,10 @@ import { writable } from "svelte/store";
export interface ActionsMenuData { export interface ActionsMenuData {
playerName: string; playerName: string;
actions: {actionName: string, callback: Function }[]; actions: { actionName: string; callback: Function }[];
} }
function createActionsMenuStore() { function createActionsMenuStore() {
const { subscribe, update, set } = writable<ActionsMenuData | undefined>(undefined); const { subscribe, update, set } = writable<ActionsMenuData | undefined>(undefined);
return { return {
@ -25,7 +24,7 @@ function createActionsMenuStore() {
}, },
removeAction: (actionName: string) => { removeAction: (actionName: string) => {
update((data) => { update((data) => {
const actionIndex = data?.actions.findIndex(action => action.actionName === actionName); const actionIndex = data?.actions.findIndex((action) => action.actionName === actionName);
if (actionIndex !== undefined && actionIndex != -1) { if (actionIndex !== undefined && actionIndex != -1) {
data?.actions.splice(actionIndex, 1); data?.actions.splice(actionIndex, 1);
} }
@ -37,7 +36,7 @@ function createActionsMenuStore() {
*/ */
clear: () => { clear: () => {
set(undefined); set(undefined);
} },
}; };
} }

2
front/src/Stores/OutlineColorStore.ts
View file

@ -5,7 +5,7 @@ export function createColorStore() {
let followColor: number | undefined = undefined; let followColor: number | undefined = undefined;
let apiColor: number | undefined = undefined; let apiColor: number | undefined = undefined;
let pointedByPointer: boolean = false; let pointedByPointer: boolean = false;
let pointedByCharacter: boolean = false; let pointedByCharacter: boolean = false;

2
front/src/Utils/CustomTypeGuards.ts
View file

@ -1,4 +1,4 @@
import type { OutlineableInterface } from '../Phaser/Game/OutlineableInterface'; import type { OutlineableInterface } from "../Phaser/Game/OutlineableInterface";
export function isOutlineable(object: unknown): object is OutlineableInterface { export function isOutlineable(object: unknown): object is OutlineableInterface {
return (object as OutlineableInterface)?.pointerOverOutline !== undefined; return (object as OutlineableInterface)?.pointerOverOutline !== undefined;