_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ran pretty on the front

Browse Source
This commit is contained in:
kharhamel 2021-09-06 14:27:54 +02:00
parent 7743bda3eb
commit 4160235b92
54 changed files with 808 additions and 694 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/Api/Events/ButtonClickedEvent.ts
View File

@ -1,10 +1,11 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isButtonClickedEvent = export const isButtonClickedEvent = new tg.IsInterface()
new tg.IsInterface().withProperties({ .withProperties({
popupId: tg.isNumber, popupId: tg.isNumber,
buttonId: tg.isNumber, buttonId: tg.isNumber,
}).get(); })
.get();
/** /**
* A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property. * A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property.
*/ */

7
front/src/Api/Events/ChatEvent.ts
View File

@ -1,10 +1,11 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isChatEvent = export const isChatEvent = new tg.IsInterface()
new tg.IsInterface().withProperties({ .withProperties({
message: tg.isString, message: tg.isString,
author: tg.isString, author: tg.isString,
}).get(); })
.get();
/** /**
* A message sent from the iFrame to the game to add a message in the chat. * A message sent from the iFrame to the game to add a message in the chat.
*/ */

7
front/src/Api/Events/ClosePopupEvent.ts
View File

@ -1,9 +1,10 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isClosePopupEvent = export const isClosePopupEvent = new tg.IsInterface()
new tg.IsInterface().withProperties({ .withProperties({
popupId: tg.isNumber, popupId: tg.isNumber,
}).get(); })
.get();
/** /**
* A message sent from the iFrame to the game to add a message in the chat. * A message sent from the iFrame to the game to add a message in the chat.

7
front/src/Api/Events/EnterLeaveEvent.ts
View File

@ -1,9 +1,10 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isEnterLeaveEvent = export const isEnterLeaveEvent = new tg.IsInterface()
new tg.IsInterface().withProperties({ .withProperties({
name: tg.isString, name: tg.isString,
}).get(); })
.get();
/** /**
* A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property. * A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property.
*/ */

9
front/src/Api/Events/GoToPageEvent.ts
View File

@ -1,11 +1,10 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isGoToPageEvent = new tg.IsInterface()
.withProperties({
export const isGoToPageEvent =
new tg.IsInterface().withProperties({
url: tg.isString, url: tg.isString,
}).get(); })
.get();
/** /**
* A message sent from the iFrame to the game to add a message in the chat. * A message sent from the iFrame to the game to add a message in the chat.

7
front/src/Api/Events/LoadSoundEvent.ts
View File

@ -1,9 +1,10 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isLoadSoundEvent = export const isLoadSoundEvent = new tg.IsInterface()
new tg.IsInterface().withProperties({ .withProperties({
url: tg.isString, url: tg.isString,
}).get(); })
.get();
/** /**
* A message sent from the iFrame to the game to add a message in the chat. * A message sent from the iFrame to the game to add a message in the chat.

18
front/src/Api/Events/OpenPopupEvent.ts
View File

@ -1,18 +1,20 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
const isButtonDescriptor = const isButtonDescriptor = new tg.IsInterface()
new tg.IsInterface().withProperties({ .withProperties({
label: tg.isString, label: tg.isString,
className: tg.isOptional(tg.isString) className: tg.isOptional(tg.isString),
}).get(); })
.get();
export const isOpenPopupEvent = export const isOpenPopupEvent = new tg.IsInterface()
new tg.IsInterface().withProperties({ .withProperties({
popupId: tg.isNumber, popupId: tg.isNumber,
targetObject: tg.isString, targetObject: tg.isString,
message: tg.isString, message: tg.isString,
buttons: tg.isArray(isButtonDescriptor) buttons: tg.isArray(isButtonDescriptor),
}).get(); })
.get();
/** /**
* A message sent from the iFrame to the game to add a message in the chat. * A message sent from the iFrame to the game to add a message in the chat.

9
front/src/Api/Events/OpenTabEvent.ts
View File

@ -1,11 +1,10 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isOpenTabEvent = new tg.IsInterface()
.withProperties({
export const isOpenTabEvent =
new tg.IsInterface().withProperties({
url: tg.isString, url: tg.isString,
}).get(); })
.get();
/** /**
* A message sent from the iFrame to the game to add a message in the chat. * A message sent from the iFrame to the game to add a message in the chat.

19
front/src/Api/Events/PlaySoundEvent.ts
View File

@ -1,22 +1,23 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
const isSoundConfig = new tg.IsInterface()
const isSoundConfig = .withProperties({
new tg.IsInterface().withProperties({
volume: tg.isOptional(tg.isNumber), volume: tg.isOptional(tg.isNumber),
loop: tg.isOptional(tg.isBoolean), loop: tg.isOptional(tg.isBoolean),
mute: tg.isOptional(tg.isBoolean), mute: tg.isOptional(tg.isBoolean),
rate: tg.isOptional(tg.isNumber), rate: tg.isOptional(tg.isNumber),
detune: tg.isOptional(tg.isNumber), detune: tg.isOptional(tg.isNumber),
seek: tg.isOptional(tg.isNumber), seek: tg.isOptional(tg.isNumber),
delay: tg.isOptional(tg.isNumber) delay: tg.isOptional(tg.isNumber),
}).get(); })
.get();
export const isPlaySoundEvent = export const isPlaySoundEvent = new tg.IsInterface()
new tg.IsInterface().withProperties({ .withProperties({
url: tg.isString, url: tg.isString,
config : tg.isOptional(isSoundConfig), config: tg.isOptional(isSoundConfig),
}).get(); })
.get();
/** /**
* A message sent from the iFrame to the game to add a message in the chat. * A message sent from the iFrame to the game to add a message in the chat.

7
front/src/Api/Events/StopSoundEvent.ts
View File

@ -1,9 +1,10 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isStopSoundEvent = export const isStopSoundEvent = new tg.IsInterface()
new tg.IsInterface().withProperties({ .withProperties({
url: tg.isString, url: tg.isString,
}).get(); })
.get();
/** /**
* A message sent from the iFrame to the game to add a message in the chat. * A message sent from the iFrame to the game to add a message in the chat.

7
front/src/Api/Events/UserInputChatEvent.ts
View File

@ -1,9 +1,10 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isUserInputChatEvent = export const isUserInputChatEvent = new tg.IsInterface()
new tg.IsInterface().withProperties({ .withProperties({
message: tg.isString, message: tg.isString,
}).get(); })
.get();
/** /**
* A message sent from the game to the iFrame when a user types a message in the chat. * A message sent from the game to the iFrame when a user types a message in the chat.
*/ */

8
front/src/Api/iframe/Ui/ButtonDescriptor.ts
View File

@ -1,4 +1,4 @@
import type {Popup} from "./Popup"; import type { Popup } from "./Popup";
export type ButtonClickedCallback = (popup: Popup) => void; export type ButtonClickedCallback = (popup: Popup) => void;
@ -6,13 +6,13 @@ export interface ButtonDescriptor {
/** /**
* The label of the button * The label of the button
*/ */
label: string, label: string;
/** /**
* The type of the button. Can be one of "normal", "primary", "success", "warning", "error", "disabled" * The type of the button. Can be one of "normal", "primary", "success", "warning", "error", "disabled"
*/ */
className?: "normal" | "primary" | "success" | "warning" | "error" | "disabled", className?: "normal" | "primary" | "success" | "warning" | "error" | "disabled";
/** /**
* Callback called if the button is pressed * Callback called if the button is pressed
*/ */
callback: ButtonClickedCallback, callback: ButtonClickedCallback;
} }

15
front/src/Api/iframe/Ui/Popup.ts
View File

@ -1,19 +1,18 @@
import {sendToWorkadventure} from "../IframeApiContribution"; import { sendToWorkadventure } from "../IframeApiContribution";
import type {ClosePopupEvent} from "../../Events/ClosePopupEvent"; import type { ClosePopupEvent } from "../../Events/ClosePopupEvent";
export class Popup { export class Popup {
constructor(private id: number) { constructor(private id: number) {}
}
/** /**
* Closes the popup * Closes the popup
*/ */
public close(): void { public close(): void {
sendToWorkadventure({ sendToWorkadventure({
'type': 'closePopup', type: "closePopup",
'data': { data: {
'popupId': this.id, popupId: this.id,
} as ClosePopupEvent } as ClosePopupEvent,
}); });
} }
} }

16
front/src/Api/iframe/registeredCallbacks.ts
View File

@ -1,16 +1,18 @@
import type {IframeResponseEventMap} from "../../Api/Events/IframeEvent"; import type { IframeResponseEventMap } from "../../Api/Events/IframeEvent";
import type {IframeCallback} from "../../Api/iframe/IframeApiContribution"; import type { IframeCallback } from "../../Api/iframe/IframeApiContribution";
import type {IframeCallbackContribution} from "../../Api/iframe/IframeApiContribution"; import type { IframeCallbackContribution } from "../../Api/iframe/IframeApiContribution";
export const registeredCallbacks: { [K in keyof IframeResponseEventMap]?: IframeCallback<K> } = {} export const registeredCallbacks: { [K in keyof IframeResponseEventMap]?: IframeCallback<K> } = {};
export function apiCallback<T extends keyof IframeResponseEventMap>(callbackData: IframeCallbackContribution<T>): IframeCallbackContribution<keyof IframeResponseEventMap> { export function apiCallback<T extends keyof IframeResponseEventMap>(
callbackData: IframeCallbackContribution<T>
): IframeCallbackContribution<keyof IframeResponseEventMap> {
const iframeCallback = { const iframeCallback = {
typeChecker: callbackData.typeChecker, typeChecker: callbackData.typeChecker,
callback: callbackData.callback callback: callbackData.callback,
} as IframeCallback<T>; } as IframeCallback<T>;
const newCallback = { [callbackData.type]: iframeCallback }; const newCallback = { [callbackData.type]: iframeCallback };
Object.assign(registeredCallbacks, newCallback) Object.assign(registeredCallbacks, newCallback);
return callbackData as unknown as IframeCallbackContribution<keyof IframeResponseEventMap>; return callbackData as unknown as IframeCallbackContribution<keyof IframeResponseEventMap>;
} }

20
front/src/Connexion/AdminMessagesService.ts
View File

@ -1,15 +1,15 @@
import {Subject} from "rxjs"; import { Subject } from "rxjs";
import type {BanUserMessage, SendUserMessage} from "../Messages/generated/messages_pb"; import type { BanUserMessage, SendUserMessage } from "../Messages/generated/messages_pb";
export enum AdminMessageEventTypes { export enum AdminMessageEventTypes {
admin = 'message', admin = "message",
audio = 'audio', audio = "audio",
ban = 'ban', ban = "ban",
banned = 'banned', banned = "banned",
} }
interface AdminMessageEvent { interface AdminMessageEvent {
type: AdminMessageEventTypes, type: AdminMessageEventTypes;
text: string; text: string;
//todo add optional properties for other event types //todo add optional properties for other event types
} }
@ -21,14 +21,14 @@ class AdminMessagesService {
public messageStream = this._messageStream.asObservable(); public messageStream = this._messageStream.asObservable();
constructor() { constructor() {
this.messageStream.subscribe((event) => console.log('message', event)) this.messageStream.subscribe((event) => console.log("message", event));
} }
onSendusermessage(message: SendUserMessage|BanUserMessage) { onSendusermessage(message: SendUserMessage | BanUserMessage) {
this._messageStream.next({ this._messageStream.next({
type: message.getType() as unknown as AdminMessageEventTypes, type: message.getType() as unknown as AdminMessageEventTypes,
text: message.getMessage(), text: message.getMessage(),
}) });
} }
} }

14
front/src/Connexion/EmoteEventStream.ts
View File

@ -1,18 +1,16 @@
import {Subject} from "rxjs"; import { Subject } from "rxjs";
interface EmoteEvent { interface EmoteEvent {
userId: number, userId: number;
emoteName: string, emoteName: string;
} }
class EmoteEventStream { class EmoteEventStream {
private _stream: Subject<EmoteEvent> = new Subject();
private _stream:Subject<EmoteEvent> = new Subject();
public stream = this._stream.asObservable(); public stream = this._stream.asObservable();
fire(userId: number, emoteName: string) {
fire(userId: number, emoteName:string) { this._stream.next({ userId, emoteName });
this._stream.next({userId, emoteName});
} }
} }

8
front/src/Connexion/WorldFullMessageStream.ts
View File

@ -1,12 +1,10 @@
import {Subject} from "rxjs"; import { Subject } from "rxjs";
class WorldFullMessageStream { class WorldFullMessageStream {
private _stream: Subject<string | null> = new Subject<string | null>();
private _stream:Subject<string|null> = new Subject<string|null>();
public stream = this._stream.asObservable(); public stream = this._stream.asObservable();
onMessage(message?: string) {
onMessage(message? :string) {
this._stream.next(message); this._stream.next(message);
} }
} }

2
front/src/Exception/TextureError.ts
View File

@ -1 +1 @@
export class TextureError extends Error{} export class TextureError extends Error {}

16
front/src/Logger/MessageUI.ts
View File

@ -1,19 +1,21 @@
export class MessageUI { export class MessageUI {
static warningMessage(text: string) {
static warningMessage(text: string){
this.removeMessage(); this.removeMessage();
const body = document.getElementById("body"); const body = document.getElementById("body");
body?.insertAdjacentHTML('afterbegin', ` body?.insertAdjacentHTML(
"afterbegin",
`
<div id="message-reconnect" class="message-info warning"> <div id="message-reconnect" class="message-info warning">
${text} ${text}
</div> </div>
`); `
);
} }
static removeMessage(id : string|null = null) { static removeMessage(id: string | null = null) {
if(!id){ if (!id) {
const messages = document.getElementsByClassName("message-info"); const messages = document.getElementsByClassName("message-info");
for (let i = 0; i < messages.length; i++){ for (let i = 0; i < messages.length; i++) {
messages.item(i)?.remove(); messages.item(i)?.remove();
} }
return; return;

13
front/src/Network/ProtobufClientUtils.ts
View File

@ -1,23 +1,22 @@
import {PositionMessage} from "../Messages/generated/messages_pb"; import { PositionMessage } from "../Messages/generated/messages_pb";
import Direction = PositionMessage.Direction; import Direction = PositionMessage.Direction;
import type {PointInterface} from "../Connexion/ConnexionModels"; import type { PointInterface } from "../Connexion/ConnexionModels";
export class ProtobufClientUtils { export class ProtobufClientUtils {
public static toPointInterface(position: PositionMessage): PointInterface { public static toPointInterface(position: PositionMessage): PointInterface {
let direction: string; let direction: string;
switch (position.getDirection()) { switch (position.getDirection()) {
case Direction.UP: case Direction.UP:
direction = 'up'; direction = "up";
break; break;
case Direction.DOWN: case Direction.DOWN:
direction = 'down'; direction = "down";
break; break;
case Direction.LEFT: case Direction.LEFT:
direction = 'left'; direction = "left";
break; break;
case Direction.RIGHT: case Direction.RIGHT:
direction = 'right'; direction = "right";
break; break;
default: default:
throw new Error("Unexpected direction"); throw new Error("Unexpected direction");

61
front/src/Phaser/Companion/Companion.ts
View File

@ -16,7 +16,7 @@ export class Companion extends Container {
private delta: number; private delta: number;
private invisible: boolean; private invisible: boolean;
private updateListener: Function; private updateListener: Function;
private target: { x: number, y: number, direction: PlayerAnimationDirections }; private target: { x: number; y: number; direction: PlayerAnimationDirections };
private companionName: string; private companionName: string;
private direction: PlayerAnimationDirections; private direction: PlayerAnimationDirections;
@ -36,10 +36,10 @@ export class Companion extends Container {
this.companionName = name; this.companionName = name;
texturePromise.then(resource => { texturePromise.then((resource) => {
this.addResource(resource); this.addResource(resource);
this.invisible = false; this.invisible = false;
}) });
this.scene.physics.world.enableBody(this); this.scene.physics.world.enableBody(this);
@ -52,7 +52,7 @@ export class Companion extends Container {
this.setDepth(-1); this.setDepth(-1);
this.updateListener = this.step.bind(this); this.updateListener = this.step.bind(this);
this.scene.events.addListener('update', this.updateListener); this.scene.events.addListener("update", this.updateListener);
this.scene.add.existing(this); this.scene.add.existing(this);
} }
@ -62,7 +62,7 @@ export class Companion extends Container {
} }
public step(time: number, delta: number) { public step(time: number, delta: number) {
if (typeof this.target === 'undefined') return; if (typeof this.target === "undefined") return;
this.delta += delta; this.delta += delta;
if (this.delta < 128) { if (this.delta < 128) {
@ -87,7 +87,10 @@ export class Companion extends Container {
const yDir = yDist / Math.max(Math.abs(yDist), 1); const yDir = yDist / Math.max(Math.abs(yDist), 1);
const speed = 256; const speed = 256;
this.getBody().setVelocity(Math.min(Math.abs(xDist * 2.5), speed) * xDir, Math.min(Math.abs(yDist * 2.5), speed) * yDir); this.getBody().setVelocity(
Math.min(Math.abs(xDist * 2.5), speed) * xDir,
Math.min(Math.abs(yDist * 2.5), speed) * yDir
);
if (Math.abs(xDist) > Math.abs(yDist)) { if (Math.abs(xDist) > Math.abs(yDist)) {
if (xDist < 0) { if (xDist < 0) {
@ -116,8 +119,8 @@ export class Companion extends Container {
y, y,
direction, direction,
moving: animationType === PlayerAnimationTypes.Walk, moving: animationType === PlayerAnimationTypes.Walk,
name: companionName name: companionName,
} };
} }
private playAnimation(direction: PlayerAnimationDirections, type: PlayerAnimationTypes): void { private playAnimation(direction: PlayerAnimationDirections, type: PlayerAnimationTypes): void {
@ -133,7 +136,7 @@ export class Companion extends Container {
this.add(sprite); this.add(sprite);
this.getAnimations(resource).forEach(animation => { this.getAnimations(resource).forEach((animation) => {
this.scene.anims.create(animation); this.scene.anims.create(animation);
}); });
@ -145,60 +148,60 @@ export class Companion extends Container {
return [ return [
{ {
key: `${resource}-${PlayerAnimationDirections.Down}-${PlayerAnimationTypes.Idle}`, key: `${resource}-${PlayerAnimationDirections.Down}-${PlayerAnimationTypes.Idle}`,
frames: this.scene.anims.generateFrameNumbers(resource, {frames: [1]}), frames: this.scene.anims.generateFrameNumbers(resource, { frames: [1] }),
frameRate: 10, frameRate: 10,
repeat: 1 repeat: 1,
}, },
{ {
key: `${resource}-${PlayerAnimationDirections.Left}-${PlayerAnimationTypes.Idle}`, key: `${resource}-${PlayerAnimationDirections.Left}-${PlayerAnimationTypes.Idle}`,
frames: this.scene.anims.generateFrameNumbers(resource, {frames: [4]}), frames: this.scene.anims.generateFrameNumbers(resource, { frames: [4] }),
frameRate: 10, frameRate: 10,
repeat: 1 repeat: 1,
}, },
{ {
key: `${resource}-${PlayerAnimationDirections.Right}-${PlayerAnimationTypes.Idle}`, key: `${resource}-${PlayerAnimationDirections.Right}-${PlayerAnimationTypes.Idle}`,
frames: this.scene.anims.generateFrameNumbers(resource, {frames: [7]}), frames: this.scene.anims.generateFrameNumbers(resource, { frames: [7] }),
frameRate: 10, frameRate: 10,
repeat: 1 repeat: 1,
}, },
{ {
key: `${resource}-${PlayerAnimationDirections.Up}-${PlayerAnimationTypes.Idle}`, key: `${resource}-${PlayerAnimationDirections.Up}-${PlayerAnimationTypes.Idle}`,
frames: this.scene.anims.generateFrameNumbers(resource, {frames: [10]}), frames: this.scene.anims.generateFrameNumbers(resource, { frames: [10] }),
frameRate: 10, frameRate: 10,
repeat: 1 repeat: 1,
}, },
{ {
key: `${resource}-${PlayerAnimationDirections.Down}-${PlayerAnimationTypes.Walk}`, key: `${resource}-${PlayerAnimationDirections.Down}-${PlayerAnimationTypes.Walk}`,
frames: this.scene.anims.generateFrameNumbers(resource, {frames: [0, 1, 2]}), frames: this.scene.anims.generateFrameNumbers(resource, { frames: [0, 1, 2] }),
frameRate: 15, frameRate: 15,
repeat: -1 repeat: -1,
}, },
{ {
key: `${resource}-${PlayerAnimationDirections.Left}-${PlayerAnimationTypes.Walk}`, key: `${resource}-${PlayerAnimationDirections.Left}-${PlayerAnimationTypes.Walk}`,
frames: this.scene.anims.generateFrameNumbers(resource, {frames: [3, 4, 5]}), frames: this.scene.anims.generateFrameNumbers(resource, { frames: [3, 4, 5] }),
frameRate: 15, frameRate: 15,
repeat: -1 repeat: -1,
}, },
{ {
key: `${resource}-${PlayerAnimationDirections.Right}-${PlayerAnimationTypes.Walk}`, key: `${resource}-${PlayerAnimationDirections.Right}-${PlayerAnimationTypes.Walk}`,
frames: this.scene.anims.generateFrameNumbers(resource, {frames: [6, 7, 8]}), frames: this.scene.anims.generateFrameNumbers(resource, { frames: [6, 7, 8] }),
frameRate: 15, frameRate: 15,
repeat: -1 repeat: -1,
}, },
{ {
key: `${resource}-${PlayerAnimationDirections.Up}-${PlayerAnimationTypes.Walk}`, key: `${resource}-${PlayerAnimationDirections.Up}-${PlayerAnimationTypes.Walk}`,
frames: this.scene.anims.generateFrameNumbers(resource, {frames: [9, 10, 11]}), frames: this.scene.anims.generateFrameNumbers(resource, { frames: [9, 10, 11] }),
frameRate: 15, frameRate: 15,
repeat: -1 repeat: -1,
} },
] ];
} }
private getBody(): Phaser.Physics.Arcade.Body { private getBody(): Phaser.Physics.Arcade.Body {
const body = this.body; const body = this.body;
if (!(body instanceof Phaser.Physics.Arcade.Body)) { if (!(body instanceof Phaser.Physics.Arcade.Body)) {
throw new Error('Container does not have arcade body'); throw new Error("Container does not have arcade body");
} }
return body; return body;
@ -212,7 +215,7 @@ export class Companion extends Container {
} }
if (this.scene) { if (this.scene) {
this.scene.events.removeListener('update', this.updateListener); this.scene.events.removeListener("update", this.updateListener);
} }
super.destroy(); super.destroy();

8
front/src/Phaser/Companion/CompanionTextures.ts
View File

@ -1,7 +1,7 @@
export interface CompanionResourceDescriptionInterface { export interface CompanionResourceDescriptionInterface {
name: string, name: string;
img: string, img: string;
behaviour: "dog" | "cat" behaviour: "dog" | "cat";
} }
export const COMPANION_RESOURCES: CompanionResourceDescriptionInterface[] = [ export const COMPANION_RESOURCES: CompanionResourceDescriptionInterface[] = [
@ -11,4 +11,4 @@ export const COMPANION_RESOURCES: CompanionResourceDescriptionInterface[] = [
{ name: "cat1", img: "resources/characters/pipoya/Cat 01-1.png", behaviour: "cat" }, { name: "cat1", img: "resources/characters/pipoya/Cat 01-1.png", behaviour: "cat" },
{ name: "cat2", img: "resources/characters/pipoya/Cat 01-2.png", behaviour: "cat" }, { name: "cat2", img: "resources/characters/pipoya/Cat 01-2.png", behaviour: "cat" },
{ name: "cat3", img: "resources/characters/pipoya/Cat 01-3.png", behaviour: "cat" }, { name: "cat3", img: "resources/characters/pipoya/Cat 01-3.png", behaviour: "cat" },
] ];

8
front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts
View File

@ -7,13 +7,13 @@ export const getAllCompanionResources = (loader: LoaderPlugin): CompanionResourc
}); });
return COMPANION_RESOURCES; return COMPANION_RESOURCES;
} };
export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): Promise<string> => { export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): Promise<string> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const resource = COMPANION_RESOURCES.find(item => item.name === name); const resource = COMPANION_RESOURCES.find((item) => item.name === name);
if (typeof resource === 'undefined') { if (typeof resource === "undefined") {
return reject(`Texture '${name}' not found!`); return reject(`Texture '${name}' not found!`);
} }
@ -26,4 +26,4 @@ export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): P
loader.start(); // It's only automatically started during the Scene preload. loader.start(); // It's only automatically started during the Scene preload.
}); });
} };

2
front/src/Phaser/Components/ChatModeIcon.ts
View File

@ -2,7 +2,7 @@ import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
export class ChatModeIcon extends Phaser.GameObjects.Sprite { export class ChatModeIcon extends Phaser.GameObjects.Sprite {
constructor(scene: Phaser.Scene, x: number, y: number) { constructor(scene: Phaser.Scene, x: number, y: number) {
super(scene, x, y, 'layout_modes', 3); super(scene, x, y, "layout_modes", 3);
scene.add.existing(this); scene.add.existing(this);
this.setScrollFactor(0, 0); this.setScrollFactor(0, 0);
this.setOrigin(0, 1); this.setOrigin(0, 1);

5
front/src/Phaser/Components/ClickButton.ts
View File

@ -1,11 +1,8 @@
export class ClickButton extends Phaser.GameObjects.Image {
export class ClickButton extends Phaser.GameObjects.Image{
constructor(scene: Phaser.Scene, x: number, y: number, textureName: string, callback: Function) { constructor(scene: Phaser.Scene, x: number, y: number, textureName: string, callback: Function) {
super(scene, x, y, textureName); super(scene, x, y, textureName);
this.scene.add.existing(this); this.scene.add.existing(this);
this.setInteractive(); this.setInteractive();
this.on("pointerup", callback); this.on("pointerup", callback);
} }
} }

4
front/src/Phaser/Components/PresentationModeIcon.ts
View File

@ -1,8 +1,8 @@
import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes"; import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
export class PresentationModeIcon extends Phaser.GameObjects.Sprite { export class PresentationModeIcon extends Phaser.GameObjects.Sprite {
constructor(scene: Phaser.Scene, x: number, y: number) { constructor(scene: Phaser.Scene, x: number, y: number) {
super(scene, x, y, 'layout_modes', 0); super(scene, x, y, "layout_modes", 0);
scene.add.existing(this); scene.add.existing(this);
this.setScrollFactor(0, 0); this.setScrollFactor(0, 0);
this.setOrigin(0, 1); this.setOrigin(0, 1);

34
front/src/Phaser/Components/RadialMenu.ts
View File

@ -1,20 +1,20 @@
import Sprite = Phaser.GameObjects.Sprite; import Sprite = Phaser.GameObjects.Sprite;
import {DEPTH_UI_INDEX} from "../Game/DepthIndexes"; import { DEPTH_UI_INDEX } from "../Game/DepthIndexes";
import {waScaleManager} from "../Services/WaScaleManager"; import { waScaleManager } from "../Services/WaScaleManager";
export interface RadialMenuItem { export interface RadialMenuItem {
image: string, image: string;
name: string, name: string;
} }
export const RadialMenuClickEvent = 'radialClick'; export const RadialMenuClickEvent = "radialClick";
export class RadialMenu extends Phaser.GameObjects.Container { export class RadialMenu extends Phaser.GameObjects.Container {
private resizeCallback: OmitThisParameter<() => void>; private resizeCallback: OmitThisParameter<() => void>;
constructor(scene: Phaser.Scene, x: number, y: number, private items: RadialMenuItem[]) { constructor(scene: Phaser.Scene, x: number, y: number, private items: RadialMenuItem[]) {
super(scene, x, y); super(scene, x, y);
this.setDepth(DEPTH_UI_INDEX) this.setDepth(DEPTH_UI_INDEX);
this.scene.add.existing(this); this.scene.add.existing(this);
this.initItems(); this.initItems();
@ -26,7 +26,7 @@ export class RadialMenu extends Phaser.GameObjects.Container {
private initItems() { private initItems() {
const itemsNumber = this.items.length; const itemsNumber = this.items.length;
const menuRadius = 70 + (waScaleManager.uiScalingFactor - 1) * 20; const menuRadius = 70 + (waScaleManager.uiScalingFactor - 1) * 20;
this.items.forEach((item, index) => this.createRadialElement(item, index, itemsNumber, menuRadius)) this.items.forEach((item, index) => this.createRadialElement(item, index, itemsNumber, menuRadius));
} }
private createRadialElement(item: RadialMenuItem, index: number, itemsNumber: number, menuRadius: number) { private createRadialElement(item: RadialMenuItem, index: number, itemsNumber: number, menuRadius: number) {
@ -34,33 +34,33 @@ export class RadialMenu extends Phaser.GameObjects.Container {
this.add(image); this.add(image);
this.scene.sys.updateList.add(image); this.scene.sys.updateList.add(image);
const scalingFactor = waScaleManager.uiScalingFactor * 0.075; const scalingFactor = waScaleManager.uiScalingFactor * 0.075;
image.setScale(scalingFactor) image.setScale(scalingFactor);
image.setInteractive({ image.setInteractive({
useHandCursor: true, useHandCursor: true,
}); });
image.on('pointerdown', () => this.emit(RadialMenuClickEvent, item)); image.on("pointerdown", () => this.emit(RadialMenuClickEvent, item));
image.on('pointerover', () => { image.on("pointerover", () => {
this.scene.tweens.add({ this.scene.tweens.add({
targets: image, targets: image,
props: { props: {
scale: 2 * scalingFactor, scale: 2 * scalingFactor,
}, },
duration: 500, duration: 500,
ease: 'Power3', ease: "Power3",
})
}); });
image.on('pointerout', () => { });
image.on("pointerout", () => {
this.scene.tweens.add({ this.scene.tweens.add({
targets: image, targets: image,
props: { props: {
scale: scalingFactor, scale: scalingFactor,
}, },
duration: 500, duration: 500,
ease: 'Power3', ease: "Power3",
})
}); });
const angle = 2 * Math.PI * index / itemsNumber; });
Phaser.Actions.RotateAroundDistance([image], {x: 0, y: 0}, angle, menuRadius); const angle = (2 * Math.PI * index) / itemsNumber;
Phaser.Actions.RotateAroundDistance([image], { x: 0, y: 0 }, angle, menuRadius);
} }
private resize() { private resize() {

18
front/src/Phaser/Components/SoundMeter.ts
View File

@ -1,4 +1,4 @@
import type {IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode} from 'standardized-audio-context'; import type { IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "standardized-audio-context";
/** /**
* Class to measure the sound volume of a media stream * Class to measure the sound volume of a media stream
@ -7,10 +7,10 @@ export class SoundMeter {
private instant: number; private instant: number;
private clip: number; private clip: number;
//private script: ScriptProcessorNode; //private script: ScriptProcessorNode;
private analyser: IAnalyserNode<IAudioContext>|undefined; private analyser: IAnalyserNode<IAudioContext> | undefined;
private dataArray: Uint8Array|undefined; private dataArray: Uint8Array | undefined;
private context: IAudioContext|undefined; private context: IAudioContext | undefined;
private source: IMediaStreamAudioSourceNode<IAudioContext>|undefined; private source: IMediaStreamAudioSourceNode<IAudioContext> | undefined;
constructor() { constructor() {
this.instant = 0.0; this.instant = 0.0;
@ -27,8 +27,7 @@ export class SoundMeter {
this.dataArray = new Uint8Array(bufferLength); this.dataArray = new Uint8Array(bufferLength);
} }
public connectToSource(stream: MediaStream, context: IAudioContext): void public connectToSource(stream: MediaStream, context: IAudioContext): void {
{
if (this.source !== undefined) { if (this.source !== undefined) {
this.stop(); this.stop();
} }
@ -42,8 +41,6 @@ export class SoundMeter {
//analyser.connect(distortion); //analyser.connect(distortion);
//distortion.connect(this.context.destination); //distortion.connect(this.context.destination);
//this.analyser.connect(this.context.destination); //this.analyser.connect(this.context.destination);
} }
public getVolume(): number { public getVolume(): number {
@ -52,7 +49,6 @@ export class SoundMeter {
} }
this.analyser.getByteFrequencyData(this.dataArray); this.analyser.getByteFrequencyData(this.dataArray);
const input = this.dataArray; const input = this.dataArray;
let i; let i;
let sum = 0.0; let sum = 0.0;
@ -84,6 +80,4 @@ export class SoundMeter {
this.dataArray = undefined; this.dataArray = undefined;
this.source = undefined; this.source = undefined;
} }
} }

5
front/src/Phaser/Components/TextField.ts
View File

@ -1,10 +1,9 @@
export class TextField extends Phaser.GameObjects.BitmapText { export class TextField extends Phaser.GameObjects.BitmapText {
constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[], center: boolean = true) { constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[], center: boolean = true) {
super(scene, x, y, 'main_font', text, 8); super(scene, x, y, "main_font", text, 8);
this.scene.add.existing(this); this.scene.add.existing(this);
if (center) { if (center) {
this.setOrigin(0.5).setCenterAlign() this.setOrigin(0.5).setCenterAlign();
} }
} }
} }

2
front/src/Phaser/Entity/CustomizedCharacter.ts
View File

@ -1,5 +1,5 @@
import Container = Phaser.GameObjects.Container; import Container = Phaser.GameObjects.Container;
import type {Scene} from "phaser"; import type { Scene } from "phaser";
import Sprite = Phaser.GameObjects.Sprite; import Sprite = Phaser.GameObjects.Sprite;
/** /**

714
front/src/Phaser/Entity/PlayerTextures.ts
View File

@ -1,333 +1,439 @@
//The list of all the player textures, both the default models and the partial textures used for customization //The list of all the player textures, both the default models and the partial textures used for customization
export interface BodyResourceDescriptionListInterface { export interface BodyResourceDescriptionListInterface {
[key: string]: BodyResourceDescriptionInterface [key: string]: BodyResourceDescriptionInterface;
} }
export interface BodyResourceDescriptionInterface { export interface BodyResourceDescriptionInterface {
name: string, name: string;
img: string, img: string;
level?: number level?: number;
} }
export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = { export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {
"male1": {name: "male1", img: "resources/characters/pipoya/Male 01-1.png"}, male1: { name: "male1", img: "resources/characters/pipoya/Male 01-1.png" },
"male2": {name: "male2", img: "resources/characters/pipoya/Male 02-2.png"}, male2: { name: "male2", img: "resources/characters/pipoya/Male 02-2.png" },
"male3": {name: "male3", img: "resources/characters/pipoya/Male 03-4.png"}, male3: { name: "male3", img: "resources/characters/pipoya/Male 03-4.png" },
"male4": {name: "male4", img: "resources/characters/pipoya/Male 09-1.png"}, male4: { name: "male4", img: "resources/characters/pipoya/Male 09-1.png" },
"male5": {name: "male5", img: "resources/characters/pipoya/Male 10-3.png"}, male5: { name: "male5", img: "resources/characters/pipoya/Male 10-3.png" },
"male6": {name: "male6", img: "resources/characters/pipoya/Male 17-2.png"}, male6: { name: "male6", img: "resources/characters/pipoya/Male 17-2.png" },
"male7": {name: "male7", img: "resources/characters/pipoya/Male 18-1.png"}, male7: { name: "male7", img: "resources/characters/pipoya/Male 18-1.png" },
"male8": {name: "male8", img: "resources/characters/pipoya/Male 16-4.png"}, male8: { name: "male8", img: "resources/characters/pipoya/Male 16-4.png" },
"male9": {name: "male9", img: "resources/characters/pipoya/Male 07-2.png"}, male9: { name: "male9", img: "resources/characters/pipoya/Male 07-2.png" },
"male10": {name: "male10", img: "resources/characters/pipoya/Male 05-3.png"}, male10: { name: "male10", img: "resources/characters/pipoya/Male 05-3.png" },
"male11": {name: "male11", img: "resources/characters/pipoya/Teacher male 02.png"}, male11: { name: "male11", img: "resources/characters/pipoya/Teacher male 02.png" },
"male12": {name: "male12", img: "resources/characters/pipoya/su4 Student male 12.png"}, male12: { name: "male12", img: "resources/characters/pipoya/su4 Student male 12.png" },
"Female1": {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png"}, Female1: { name: "Female1", img: "resources/characters/pipoya/Female 01-1.png" },
"Female2": {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png"}, Female2: { name: "Female2", img: "resources/characters/pipoya/Female 02-2.png" },
"Female3": {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png"}, Female3: { name: "Female3", img: "resources/characters/pipoya/Female 03-4.png" },
"Female4": {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png"}, Female4: { name: "Female4", img: "resources/characters/pipoya/Female 09-1.png" },
"Female5": {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png"}, Female5: { name: "Female5", img: "resources/characters/pipoya/Female 10-3.png" },
"Female6": {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png"}, Female6: { name: "Female6", img: "resources/characters/pipoya/Female 17-2.png" },
"Female7": {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png"}, Female7: { name: "Female7", img: "resources/characters/pipoya/Female 18-1.png" },
"Female8": {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"}, Female8: { name: "Female8", img: "resources/characters/pipoya/Female 16-4.png" },
"Female9": {name: "Female9", img: "resources/characters/pipoya/Female 07-2.png"}, Female9: { name: "Female9", img: "resources/characters/pipoya/Female 07-2.png" },
"Female10": {name: "Female10", img: "resources/characters/pipoya/Female 05-3.png"}, Female10: { name: "Female10", img: "resources/characters/pipoya/Female 05-3.png" },
"Female11": {name: "Female11", img: "resources/characters/pipoya/Teacher fmale 02.png"}, Female11: { name: "Female11", img: "resources/characters/pipoya/Teacher fmale 02.png" },
"Female12": {name: "Female12", img: "resources/characters/pipoya/su4 Student fmale 12.png"}, Female12: { name: "Female12", img: "resources/characters/pipoya/su4 Student fmale 12.png" },
}; };
export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = { export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = {
"color_1": {name: "color_1", img: "resources/customisation/character_color/character_color0.png"}, color_1: { name: "color_1", img: "resources/customisation/character_color/character_color0.png" },
"color_2": {name: "color_2", img: "resources/customisation/character_color/character_color1.png"}, color_2: { name: "color_2", img: "resources/customisation/character_color/character_color1.png" },
"color_3": {name: "color_3", img: "resources/customisation/character_color/character_color2.png"}, color_3: { name: "color_3", img: "resources/customisation/character_color/character_color2.png" },
"color_4": {name: "color_4", img: "resources/customisation/character_color/character_color3.png"}, color_4: { name: "color_4", img: "resources/customisation/character_color/character_color3.png" },
"color_5": {name: "color_5", img: "resources/customisation/character_color/character_color4.png"}, color_5: { name: "color_5", img: "resources/customisation/character_color/character_color4.png" },
"color_6": {name: "color_6", img: "resources/customisation/character_color/character_color5.png"}, color_6: { name: "color_6", img: "resources/customisation/character_color/character_color5.png" },
"color_7": {name: "color_7", img: "resources/customisation/character_color/character_color6.png"}, color_7: { name: "color_7", img: "resources/customisation/character_color/character_color6.png" },
"color_8": {name: "color_8", img: "resources/customisation/character_color/character_color7.png"}, color_8: { name: "color_8", img: "resources/customisation/character_color/character_color7.png" },
"color_9": {name: "color_9", img: "resources/customisation/character_color/character_color8.png"}, color_9: { name: "color_9", img: "resources/customisation/character_color/character_color8.png" },
"color_10": {name: "color_10", img: "resources/customisation/character_color/character_color9.png"}, color_10: { name: "color_10", img: "resources/customisation/character_color/character_color9.png" },
"color_11": {name: "color_11", img: "resources/customisation/character_color/character_color10.png"}, color_11: { name: "color_11", img: "resources/customisation/character_color/character_color10.png" },
"color_12": {name: "color_12", img: "resources/customisation/character_color/character_color11.png"}, color_12: { name: "color_12", img: "resources/customisation/character_color/character_color11.png" },
"color_13": {name: "color_13", img: "resources/customisation/character_color/character_color12.png"}, color_13: { name: "color_13", img: "resources/customisation/character_color/character_color12.png" },
"color_14": {name: "color_14", img: "resources/customisation/character_color/character_color13.png"}, color_14: { name: "color_14", img: "resources/customisation/character_color/character_color13.png" },
"color_15": {name: "color_15", img: "resources/customisation/character_color/character_color14.png"}, color_15: { name: "color_15", img: "resources/customisation/character_color/character_color14.png" },
"color_16": {name: "color_16", img: "resources/customisation/character_color/character_color15.png"}, color_16: { name: "color_16", img: "resources/customisation/character_color/character_color15.png" },
"color_17": {name: "color_17", img: "resources/customisation/character_color/character_color16.png"}, color_17: { name: "color_17", img: "resources/customisation/character_color/character_color16.png" },
"color_18": {name: "color_18", img: "resources/customisation/character_color/character_color17.png"}, color_18: { name: "color_18", img: "resources/customisation/character_color/character_color17.png" },
"color_19": {name: "color_19", img: "resources/customisation/character_color/character_color18.png"}, color_19: { name: "color_19", img: "resources/customisation/character_color/character_color18.png" },
"color_20": {name: "color_20", img: "resources/customisation/character_color/character_color19.png"}, color_20: { name: "color_20", img: "resources/customisation/character_color/character_color19.png" },
"color_21": {name: "color_21", img: "resources/customisation/character_color/character_color20.png"}, color_21: { name: "color_21", img: "resources/customisation/character_color/character_color20.png" },
"color_22": {name: "color_22", img: "resources/customisation/character_color/character_color21.png"}, color_22: { name: "color_22", img: "resources/customisation/character_color/character_color21.png" },
"color_23": {name: "color_23", img: "resources/customisation/character_color/character_color22.png"}, color_23: { name: "color_23", img: "resources/customisation/character_color/character_color22.png" },
"color_24": {name: "color_24", img: "resources/customisation/character_color/character_color23.png"}, color_24: { name: "color_24", img: "resources/customisation/character_color/character_color23.png" },
"color_25": {name: "color_25", img: "resources/customisation/character_color/character_color24.png"}, color_25: { name: "color_25", img: "resources/customisation/character_color/character_color24.png" },
"color_26": {name: "color_26", img: "resources/customisation/character_color/character_color25.png"}, color_26: { name: "color_26", img: "resources/customisation/character_color/character_color25.png" },
"color_27": {name: "color_27", img: "resources/customisation/character_color/character_color26.png"}, color_27: { name: "color_27", img: "resources/customisation/character_color/character_color26.png" },
"color_28": {name: "color_28", img: "resources/customisation/character_color/character_color27.png"}, color_28: { name: "color_28", img: "resources/customisation/character_color/character_color27.png" },
"color_29": {name: "color_29", img: "resources/customisation/character_color/character_color28.png"}, color_29: { name: "color_29", img: "resources/customisation/character_color/character_color28.png" },
"color_30": {name: "color_30", img: "resources/customisation/character_color/character_color29.png"}, color_30: { name: "color_30", img: "resources/customisation/character_color/character_color29.png" },
"color_31": {name: "color_31", img: "resources/customisation/character_color/character_color30.png"}, color_31: { name: "color_31", img: "resources/customisation/character_color/character_color30.png" },
"color_32": {name: "color_32", img: "resources/customisation/character_color/character_color31.png"}, color_32: { name: "color_32", img: "resources/customisation/character_color/character_color31.png" },
"color_33": {name: "color_33", img: "resources/customisation/character_color/character_color32.png"} color_33: { name: "color_33", img: "resources/customisation/character_color/character_color32.png" },
}; };
export const EYES_RESOURCES: BodyResourceDescriptionListInterface = { export const EYES_RESOURCES: BodyResourceDescriptionListInterface = {
"eyes_1": {name: "eyes_1", img: "resources/customisation/character_eyes/character_eyes1.png"}, eyes_1: { name: "eyes_1", img: "resources/customisation/character_eyes/character_eyes1.png" },
"eyes_2": {name: "eyes_2", img: "resources/customisation/character_eyes/character_eyes2.png"}, eyes_2: { name: "eyes_2", img: "resources/customisation/character_eyes/character_eyes2.png" },
"eyes_3": {name: "eyes_3", img: "resources/customisation/character_eyes/character_eyes3.png"}, eyes_3: { name: "eyes_3", img: "resources/customisation/character_eyes/character_eyes3.png" },
"eyes_4": {name: "eyes_4", img: "resources/customisation/character_eyes/character_eyes4.png"}, eyes_4: { name: "eyes_4", img: "resources/customisation/character_eyes/character_eyes4.png" },
"eyes_5": {name: "eyes_5", img: "resources/customisation/character_eyes/character_eyes5.png"}, eyes_5: { name: "eyes_5", img: "resources/customisation/character_eyes/character_eyes5.png" },
"eyes_6": {name: "eyes_6", img: "resources/customisation/character_eyes/character_eyes6.png"}, eyes_6: { name: "eyes_6", img: "resources/customisation/character_eyes/character_eyes6.png" },
"eyes_7": {name: "eyes_7", img: "resources/customisation/character_eyes/character_eyes7.png"}, eyes_7: { name: "eyes_7", img: "resources/customisation/character_eyes/character_eyes7.png" },
"eyes_8": {name: "eyes_8", img: "resources/customisation/character_eyes/character_eyes8.png"}, eyes_8: { name: "eyes_8", img: "resources/customisation/character_eyes/character_eyes8.png" },
"eyes_9": {name: "eyes_9", img: "resources/customisation/character_eyes/character_eyes9.png"}, eyes_9: { name: "eyes_9", img: "resources/customisation/character_eyes/character_eyes9.png" },
"eyes_10": {name: "eyes_10", img: "resources/customisation/character_eyes/character_eyes10.png"}, eyes_10: { name: "eyes_10", img: "resources/customisation/character_eyes/character_eyes10.png" },
"eyes_11": {name: "eyes_11", img: "resources/customisation/character_eyes/character_eyes11.png"}, eyes_11: { name: "eyes_11", img: "resources/customisation/character_eyes/character_eyes11.png" },
"eyes_12": {name: "eyes_12", img: "resources/customisation/character_eyes/character_eyes12.png"}, eyes_12: { name: "eyes_12", img: "resources/customisation/character_eyes/character_eyes12.png" },
"eyes_13": {name: "eyes_13", img: "resources/customisation/character_eyes/character_eyes13.png"}, eyes_13: { name: "eyes_13", img: "resources/customisation/character_eyes/character_eyes13.png" },
"eyes_14": {name: "eyes_14", img: "resources/customisation/character_eyes/character_eyes14.png"}, eyes_14: { name: "eyes_14", img: "resources/customisation/character_eyes/character_eyes14.png" },
"eyes_15": {name: "eyes_15", img: "resources/customisation/character_eyes/character_eyes15.png"}, eyes_15: { name: "eyes_15", img: "resources/customisation/character_eyes/character_eyes15.png" },
"eyes_16": {name: "eyes_16", img: "resources/customisation/character_eyes/character_eyes16.png"}, eyes_16: { name: "eyes_16", img: "resources/customisation/character_eyes/character_eyes16.png" },
"eyes_17": {name: "eyes_17", img: "resources/customisation/character_eyes/character_eyes17.png"}, eyes_17: { name: "eyes_17", img: "resources/customisation/character_eyes/character_eyes17.png" },
"eyes_18": {name: "eyes_18", img: "resources/customisation/character_eyes/character_eyes18.png"}, eyes_18: { name: "eyes_18", img: "resources/customisation/character_eyes/character_eyes18.png" },
"eyes_19": {name: "eyes_19", img: "resources/customisation/character_eyes/character_eyes19.png"}, eyes_19: { name: "eyes_19", img: "resources/customisation/character_eyes/character_eyes19.png" },
"eyes_20": {name: "eyes_20", img: "resources/customisation/character_eyes/character_eyes20.png"}, eyes_20: { name: "eyes_20", img: "resources/customisation/character_eyes/character_eyes20.png" },
"eyes_21": {name: "eyes_21", img: "resources/customisation/character_eyes/character_eyes21.png"}, eyes_21: { name: "eyes_21", img: "resources/customisation/character_eyes/character_eyes21.png" },
"eyes_22": {name: "eyes_22", img: "resources/customisation/character_eyes/character_eyes22.png"}, eyes_22: { name: "eyes_22", img: "resources/customisation/character_eyes/character_eyes22.png" },
"eyes_23": {name: "eyes_23", img: "resources/customisation/character_eyes/character_eyes23.png"}, eyes_23: { name: "eyes_23", img: "resources/customisation/character_eyes/character_eyes23.png" },
"eyes_24": {name: "eyes_24", img: "resources/customisation/character_eyes/character_eyes24.png"}, eyes_24: { name: "eyes_24", img: "resources/customisation/character_eyes/character_eyes24.png" },
"eyes_25": {name: "eyes_25", img: "resources/customisation/character_eyes/character_eyes25.png"}, eyes_25: { name: "eyes_25", img: "resources/customisation/character_eyes/character_eyes25.png" },
"eyes_26": {name: "eyes_26", img: "resources/customisation/character_eyes/character_eyes26.png"}, eyes_26: { name: "eyes_26", img: "resources/customisation/character_eyes/character_eyes26.png" },
"eyes_27": {name: "eyes_27", img: "resources/customisation/character_eyes/character_eyes27.png"}, eyes_27: { name: "eyes_27", img: "resources/customisation/character_eyes/character_eyes27.png" },
"eyes_28": {name: "eyes_28", img: "resources/customisation/character_eyes/character_eyes28.png"}, eyes_28: { name: "eyes_28", img: "resources/customisation/character_eyes/character_eyes28.png" },
"eyes_29": {name: "eyes_29", img: "resources/customisation/character_eyes/character_eyes29.png"}, eyes_29: { name: "eyes_29", img: "resources/customisation/character_eyes/character_eyes29.png" },
"eyes_30": {name: "eyes_30", img: "resources/customisation/character_eyes/character_eyes30.png"} eyes_30: { name: "eyes_30", img: "resources/customisation/character_eyes/character_eyes30.png" },
}; };
export const HAIR_RESOURCES: BodyResourceDescriptionListInterface = { export const HAIR_RESOURCES: BodyResourceDescriptionListInterface = {
"hair_1": {name:"hair_1", img: "resources/customisation/character_hairs/character_hairs0.png"}, hair_1: { name: "hair_1", img: "resources/customisation/character_hairs/character_hairs0.png" },
"hair_2": {name:"hair_2", img: "resources/customisation/character_hairs/character_hairs1.png"}, hair_2: { name: "hair_2", img: "resources/customisation/character_hairs/character_hairs1.png" },
"hair_3": {name:"hair_3", img: "resources/customisation/character_hairs/character_hairs2.png"}, hair_3: { name: "hair_3", img: "resources/customisation/character_hairs/character_hairs2.png" },
"hair_4": {name:"hair_4", img: "resources/customisation/character_hairs/character_hairs3.png"}, hair_4: { name: "hair_4", img: "resources/customisation/character_hairs/character_hairs3.png" },
"hair_5": {name:"hair_5", img: "resources/customisation/character_hairs/character_hairs4.png"}, hair_5: { name: "hair_5", img: "resources/customisation/character_hairs/character_hairs4.png" },
"hair_6": {name:"hair_6", img: "resources/customisation/character_hairs/character_hairs5.png"}, hair_6: { name: "hair_6", img: "resources/customisation/character_hairs/character_hairs5.png" },
"hair_7": {name:"hair_7", img: "resources/customisation/character_hairs/character_hairs6.png"}, hair_7: { name: "hair_7", img: "resources/customisation/character_hairs/character_hairs6.png" },
"hair_8": {name:"hair_8", img: "resources/customisation/character_hairs/character_hairs7.png"}, hair_8: { name: "hair_8", img: "resources/customisation/character_hairs/character_hairs7.png" },
"hair_9": {name:"hair_9", img: "resources/customisation/character_hairs/character_hairs8.png"}, hair_9: { name: "hair_9", img: "resources/customisation/character_hairs/character_hairs8.png" },
"hair_10": {name:"hair_10",img: "resources/customisation/character_hairs/character_hairs9.png"}, hair_10: { name: "hair_10", img: "resources/customisation/character_hairs/character_hairs9.png" },
"hair_11": {name:"hair_11",img: "resources/customisation/character_hairs/character_hairs10.png"}, hair_11: { name: "hair_11", img: "resources/customisation/character_hairs/character_hairs10.png" },
"hair_12": {name:"hair_12",img: "resources/customisation/character_hairs/character_hairs11.png"}, hair_12: { name: "hair_12", img: "resources/customisation/character_hairs/character_hairs11.png" },
"hair_13": {name:"hair_13",img: "resources/customisation/character_hairs/character_hairs12.png"}, hair_13: { name: "hair_13", img: "resources/customisation/character_hairs/character_hairs12.png" },
"hair_14": {name:"hair_14",img: "resources/customisation/character_hairs/character_hairs13.png"}, hair_14: { name: "hair_14", img: "resources/customisation/character_hairs/character_hairs13.png" },
"hair_15": {name:"hair_15",img: "resources/customisation/character_hairs/character_hairs14.png"}, hair_15: { name: "hair_15", img: "resources/customisation/character_hairs/character_hairs14.png" },
"hair_16": {name:"hair_16",img: "resources/customisation/character_hairs/character_hairs15.png"}, hair_16: { name: "hair_16", img: "resources/customisation/character_hairs/character_hairs15.png" },
"hair_17": {name:"hair_17",img: "resources/customisation/character_hairs/character_hairs16.png"}, hair_17: { name: "hair_17", img: "resources/customisation/character_hairs/character_hairs16.png" },
"hair_18": {name:"hair_18",img: "resources/customisation/character_hairs/character_hairs17.png"}, hair_18: { name: "hair_18", img: "resources/customisation/character_hairs/character_hairs17.png" },
"hair_19": {name:"hair_19",img: "resources/customisation/character_hairs/character_hairs18.png"}, hair_19: { name: "hair_19", img: "resources/customisation/character_hairs/character_hairs18.png" },
"hair_20": {name:"hair_20",img: "resources/customisation/character_hairs/character_hairs19.png"}, hair_20: { name: "hair_20", img: "resources/customisation/character_hairs/character_hairs19.png" },
"hair_21": {name:"hair_21",img: "resources/customisation/character_hairs/character_hairs20.png"}, hair_21: { name: "hair_21", img: "resources/customisation/character_hairs/character_hairs20.png" },
"hair_22": {name:"hair_22",img: "resources/customisation/character_hairs/character_hairs21.png"}, hair_22: { name: "hair_22", img: "resources/customisation/character_hairs/character_hairs21.png" },
"hair_23": {name:"hair_23",img: "resources/customisation/character_hairs/character_hairs22.png"}, hair_23: { name: "hair_23", img: "resources/customisation/character_hairs/character_hairs22.png" },
"hair_24": {name:"hair_24",img: "resources/customisation/character_hairs/character_hairs23.png"}, hair_24: { name: "hair_24", img: "resources/customisation/character_hairs/character_hairs23.png" },
"hair_25": {name:"hair_25",img: "resources/customisation/character_hairs/character_hairs24.png"}, hair_25: { name: "hair_25", img: "resources/customisation/character_hairs/character_hairs24.png" },
"hair_26": {name:"hair_26",img: "resources/customisation/character_hairs/character_hairs25.png"}, hair_26: { name: "hair_26", img: "resources/customisation/character_hairs/character_hairs25.png" },
"hair_27": {name:"hair_27",img: "resources/customisation/character_hairs/character_hairs26.png"}, hair_27: { name: "hair_27", img: "resources/customisation/character_hairs/character_hairs26.png" },
"hair_28": {name:"hair_28",img: "resources/customisation/character_hairs/character_hairs27.png"}, hair_28: { name: "hair_28", img: "resources/customisation/character_hairs/character_hairs27.png" },
"hair_29": {name:"hair_29",img: "resources/customisation/character_hairs/character_hairs28.png"}, hair_29: { name: "hair_29", img: "resources/customisation/character_hairs/character_hairs28.png" },
"hair_30": {name:"hair_30",img: "resources/customisation/character_hairs/character_hairs29.png"}, hair_30: { name: "hair_30", img: "resources/customisation/character_hairs/character_hairs29.png" },
"hair_31": {name:"hair_31",img: "resources/customisation/character_hairs/character_hairs30.png"}, hair_31: { name: "hair_31", img: "resources/customisation/character_hairs/character_hairs30.png" },
"hair_32": {name:"hair_32",img: "resources/customisation/character_hairs/character_hairs31.png"}, hair_32: { name: "hair_32", img: "resources/customisation/character_hairs/character_hairs31.png" },
"hair_33": {name:"hair_33",img: "resources/customisation/character_hairs/character_hairs32.png"}, hair_33: { name: "hair_33", img: "resources/customisation/character_hairs/character_hairs32.png" },
"hair_34": {name:"hair_34",img: "resources/customisation/character_hairs/character_hairs33.png"}, hair_34: { name: "hair_34", img: "resources/customisation/character_hairs/character_hairs33.png" },
"hair_35": {name:"hair_35",img: "resources/customisation/character_hairs/character_hairs34.png"}, hair_35: { name: "hair_35", img: "resources/customisation/character_hairs/character_hairs34.png" },
"hair_36": {name:"hair_36",img: "resources/customisation/character_hairs/character_hairs35.png"}, hair_36: { name: "hair_36", img: "resources/customisation/character_hairs/character_hairs35.png" },
"hair_37": {name:"hair_37",img: "resources/customisation/character_hairs/character_hairs36.png"}, hair_37: { name: "hair_37", img: "resources/customisation/character_hairs/character_hairs36.png" },
"hair_38": {name:"hair_38",img: "resources/customisation/character_hairs/character_hairs37.png"}, hair_38: { name: "hair_38", img: "resources/customisation/character_hairs/character_hairs37.png" },
"hair_39": {name:"hair_39",img: "resources/customisation/character_hairs/character_hairs38.png"}, hair_39: { name: "hair_39", img: "resources/customisation/character_hairs/character_hairs38.png" },
"hair_40": {name:"hair_40",img: "resources/customisation/character_hairs/character_hairs39.png"}, hair_40: { name: "hair_40", img: "resources/customisation/character_hairs/character_hairs39.png" },
"hair_41": {name:"hair_41",img: "resources/customisation/character_hairs/character_hairs40.png"}, hair_41: { name: "hair_41", img: "resources/customisation/character_hairs/character_hairs40.png" },
"hair_42": {name:"hair_42",img: "resources/customisation/character_hairs/character_hairs41.png"}, hair_42: { name: "hair_42", img: "resources/customisation/character_hairs/character_hairs41.png" },
"hair_43": {name:"hair_43",img: "resources/customisation/character_hairs/character_hairs42.png"}, hair_43: { name: "hair_43", img: "resources/customisation/character_hairs/character_hairs42.png" },
"hair_44": {name:"hair_44",img: "resources/customisation/character_hairs/character_hairs43.png"}, hair_44: { name: "hair_44", img: "resources/customisation/character_hairs/character_hairs43.png" },
"hair_45": {name:"hair_45",img: "resources/customisation/character_hairs/character_hairs44.png"}, hair_45: { name: "hair_45", img: "resources/customisation/character_hairs/character_hairs44.png" },
"hair_46": {name:"hair_46",img: "resources/customisation/character_hairs/character_hairs45.png"}, hair_46: { name: "hair_46", img: "resources/customisation/character_hairs/character_hairs45.png" },
"hair_47": {name:"hair_47",img: "resources/customisation/character_hairs/character_hairs46.png"}, hair_47: { name: "hair_47", img: "resources/customisation/character_hairs/character_hairs46.png" },
"hair_48": {name:"hair_48",img: "resources/customisation/character_hairs/character_hairs47.png"}, hair_48: { name: "hair_48", img: "resources/customisation/character_hairs/character_hairs47.png" },
"hair_49": {name:"hair_49",img: "resources/customisation/character_hairs/character_hairs48.png"}, hair_49: { name: "hair_49", img: "resources/customisation/character_hairs/character_hairs48.png" },
"hair_50": {name:"hair_50",img: "resources/customisation/character_hairs/character_hairs49.png"}, hair_50: { name: "hair_50", img: "resources/customisation/character_hairs/character_hairs49.png" },
"hair_51": {name:"hair_51",img: "resources/customisation/character_hairs/character_hairs50.png"}, hair_51: { name: "hair_51", img: "resources/customisation/character_hairs/character_hairs50.png" },
"hair_52": {name:"hair_52",img: "resources/customisation/character_hairs/character_hairs51.png"}, hair_52: { name: "hair_52", img: "resources/customisation/character_hairs/character_hairs51.png" },
"hair_53": {name:"hair_53",img: "resources/customisation/character_hairs/character_hairs52.png"}, hair_53: { name: "hair_53", img: "resources/customisation/character_hairs/character_hairs52.png" },
"hair_54": {name:"hair_54",img: "resources/customisation/character_hairs/character_hairs53.png"}, hair_54: { name: "hair_54", img: "resources/customisation/character_hairs/character_hairs53.png" },
"hair_55": {name:"hair_55",img: "resources/customisation/character_hairs/character_hairs54.png"}, hair_55: { name: "hair_55", img: "resources/customisation/character_hairs/character_hairs54.png" },
"hair_56": {name:"hair_56",img: "resources/customisation/character_hairs/character_hairs55.png"}, hair_56: { name: "hair_56", img: "resources/customisation/character_hairs/character_hairs55.png" },
"hair_57": {name:"hair_57",img: "resources/customisation/character_hairs/character_hairs56.png"}, hair_57: { name: "hair_57", img: "resources/customisation/character_hairs/character_hairs56.png" },
"hair_58": {name:"hair_58",img: "resources/customisation/character_hairs/character_hairs57.png"}, hair_58: { name: "hair_58", img: "resources/customisation/character_hairs/character_hairs57.png" },
"hair_59": {name:"hair_59",img: "resources/customisation/character_hairs/character_hairs58.png"}, hair_59: { name: "hair_59", img: "resources/customisation/character_hairs/character_hairs58.png" },
"hair_60": {name:"hair_60",img: "resources/customisation/character_hairs/character_hairs59.png"}, hair_60: { name: "hair_60", img: "resources/customisation/character_hairs/character_hairs59.png" },
"hair_61": {name:"hair_61",img: "resources/customisation/character_hairs/character_hairs60.png"}, hair_61: { name: "hair_61", img: "resources/customisation/character_hairs/character_hairs60.png" },
"hair_62": {name:"hair_62",img: "resources/customisation/character_hairs/character_hairs61.png"}, hair_62: { name: "hair_62", img: "resources/customisation/character_hairs/character_hairs61.png" },
"hair_63": {name:"hair_63",img: "resources/customisation/character_hairs/character_hairs62.png"}, hair_63: { name: "hair_63", img: "resources/customisation/character_hairs/character_hairs62.png" },
"hair_64": {name:"hair_64",img: "resources/customisation/character_hairs/character_hairs63.png"}, hair_64: { name: "hair_64", img: "resources/customisation/character_hairs/character_hairs63.png" },
"hair_65": {name:"hair_65",img: "resources/customisation/character_hairs/character_hairs64.png"}, hair_65: { name: "hair_65", img: "resources/customisation/character_hairs/character_hairs64.png" },
"hair_66": {name:"hair_66",img: "resources/customisation/character_hairs/character_hairs65.png"}, hair_66: { name: "hair_66", img: "resources/customisation/character_hairs/character_hairs65.png" },
"hair_67": {name:"hair_67",img: "resources/customisation/character_hairs/character_hairs66.png"}, hair_67: { name: "hair_67", img: "resources/customisation/character_hairs/character_hairs66.png" },
"hair_68": {name:"hair_68",img: "resources/customisation/character_hairs/character_hairs67.png"}, hair_68: { name: "hair_68", img: "resources/customisation/character_hairs/character_hairs67.png" },
"hair_69": {name:"hair_69",img: "resources/customisation/character_hairs/character_hairs68.png"}, hair_69: { name: "hair_69", img: "resources/customisation/character_hairs/character_hairs68.png" },
"hair_70": {name:"hair_70",img: "resources/customisation/character_hairs/character_hairs69.png"}, hair_70: { name: "hair_70", img: "resources/customisation/character_hairs/character_hairs69.png" },
"hair_71": {name:"hair_71",img: "resources/customisation/character_hairs/character_hairs70.png"}, hair_71: { name: "hair_71", img: "resources/customisation/character_hairs/character_hairs70.png" },
"hair_72": {name:"hair_72",img: "resources/customisation/character_hairs/character_hairs71.png"}, hair_72: { name: "hair_72", img: "resources/customisation/character_hairs/character_hairs71.png" },
"hair_73": {name:"hair_73",img: "resources/customisation/character_hairs/character_hairs72.png"}, hair_73: { name: "hair_73", img: "resources/customisation/character_hairs/character_hairs72.png" },
"hair_74": {name:"hair_74",img: "resources/customisation/character_hairs/character_hairs73.png"} hair_74: { name: "hair_74", img: "resources/customisation/character_hairs/character_hairs73.png" },
}; };
export const CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = { export const CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = {
"clothes_1": {name:"clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png"}, clothes_1: { name: "clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png" },
"clothes_2": {name:"clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png"}, clothes_2: { name: "clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png" },
"clothes_3": {name:"clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png"}, clothes_3: { name: "clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png" },
"clothes_4": {name:"clothes_4", img: "resources/customisation/character_clothes/character_clothes3.png"}, clothes_4: { name: "clothes_4", img: "resources/customisation/character_clothes/character_clothes3.png" },
"clothes_5": {name:"clothes_5", img: "resources/customisation/character_clothes/character_clothes4.png"}, clothes_5: { name: "clothes_5", img: "resources/customisation/character_clothes/character_clothes4.png" },
"clothes_6": {name:"clothes_6", img: "resources/customisation/character_clothes/character_clothes5.png"}, clothes_6: { name: "clothes_6", img: "resources/customisation/character_clothes/character_clothes5.png" },
"clothes_7": {name:"clothes_7", img: "resources/customisation/character_clothes/character_clothes6.png"}, clothes_7: { name: "clothes_7", img: "resources/customisation/character_clothes/character_clothes6.png" },
"clothes_8": {name:"clothes_8", img: "resources/customisation/character_clothes/character_clothes7.png"}, clothes_8: { name: "clothes_8", img: "resources/customisation/character_clothes/character_clothes7.png" },
"clothes_9": {name:"clothes_9", img: "resources/customisation/character_clothes/character_clothes8.png"}, clothes_9: { name: "clothes_9", img: "resources/customisation/character_clothes/character_clothes8.png" },
"clothes_10": {name:"clothes_10",img: "resources/customisation/character_clothes/character_clothes9.png"}, clothes_10: { name: "clothes_10", img: "resources/customisation/character_clothes/character_clothes9.png" },
"clothes_11": {name:"clothes_11",img: "resources/customisation/character_clothes/character_clothes10.png"}, clothes_11: { name: "clothes_11", img: "resources/customisation/character_clothes/character_clothes10.png" },
"clothes_12": {name:"clothes_12",img: "resources/customisation/character_clothes/character_clothes11.png"}, clothes_12: { name: "clothes_12", img: "resources/customisation/character_clothes/character_clothes11.png" },
"clothes_13": {name:"clothes_13",img: "resources/customisation/character_clothes/character_clothes12.png"}, clothes_13: { name: "clothes_13", img: "resources/customisation/character_clothes/character_clothes12.png" },
"clothes_14": {name:"clothes_14",img: "resources/customisation/character_clothes/character_clothes13.png"}, clothes_14: { name: "clothes_14", img: "resources/customisation/character_clothes/character_clothes13.png" },
"clothes_15": {name:"clothes_15",img: "resources/customisation/character_clothes/character_clothes14.png"}, clothes_15: { name: "clothes_15", img: "resources/customisation/character_clothes/character_clothes14.png" },
"clothes_16": {name:"clothes_16",img: "resources/customisation/character_clothes/character_clothes15.png"}, clothes_16: { name: "clothes_16", img: "resources/customisation/character_clothes/character_clothes15.png" },
"clothes_17": {name:"clothes_17",img: "resources/customisation/character_clothes/character_clothes16.png"}, clothes_17: { name: "clothes_17", img: "resources/customisation/character_clothes/character_clothes16.png" },
"clothes_18": {name:"clothes_18",img: "resources/customisation/character_clothes/character_clothes17.png"}, clothes_18: { name: "clothes_18", img: "resources/customisation/character_clothes/character_clothes17.png" },
"clothes_19": {name:"clothes_19",img: "resources/customisation/character_clothes/character_clothes18.png"}, clothes_19: { name: "clothes_19", img: "resources/customisation/character_clothes/character_clothes18.png" },
"clothes_20": {name:"clothes_20",img: "resources/customisation/character_clothes/character_clothes19.png"}, clothes_20: { name: "clothes_20", img: "resources/customisation/character_clothes/character_clothes19.png" },
"clothes_21": {name:"clothes_21",img: "resources/customisation/character_clothes/character_clothes20.png"}, clothes_21: { name: "clothes_21", img: "resources/customisation/character_clothes/character_clothes20.png" },
"clothes_22": {name:"clothes_22",img: "resources/customisation/character_clothes/character_clothes21.png"}, clothes_22: { name: "clothes_22", img: "resources/customisation/character_clothes/character_clothes21.png" },
"clothes_23": {name:"clothes_23",img: "resources/customisation/character_clothes/character_clothes22.png"}, clothes_23: { name: "clothes_23", img: "resources/customisation/character_clothes/character_clothes22.png" },
"clothes_24": {name:"clothes_24",img: "resources/customisation/character_clothes/character_clothes23.png"}, clothes_24: { name: "clothes_24", img: "resources/customisation/character_clothes/character_clothes23.png" },
"clothes_25": {name:"clothes_25",img: "resources/customisation/character_clothes/character_clothes24.png"}, clothes_25: { name: "clothes_25", img: "resources/customisation/character_clothes/character_clothes24.png" },
"clothes_26": {name:"clothes_26",img: "resources/customisation/character_clothes/character_clothes25.png"}, clothes_26: { name: "clothes_26", img: "resources/customisation/character_clothes/character_clothes25.png" },
"clothes_27": {name:"clothes_27",img: "resources/customisation/character_clothes/character_clothes26.png"}, clothes_27: { name: "clothes_27", img: "resources/customisation/character_clothes/character_clothes26.png" },
"clothes_28": {name:"clothes_28",img: "resources/customisation/character_clothes/character_clothes27.png"}, clothes_28: { name: "clothes_28", img: "resources/customisation/character_clothes/character_clothes27.png" },
"clothes_29": {name:"clothes_29",img: "resources/customisation/character_clothes/character_clothes28.png"}, clothes_29: { name: "clothes_29", img: "resources/customisation/character_clothes/character_clothes28.png" },
"clothes_30": {name:"clothes_30",img: "resources/customisation/character_clothes/character_clothes29.png"}, clothes_30: { name: "clothes_30", img: "resources/customisation/character_clothes/character_clothes29.png" },
"clothes_31": {name:"clothes_31",img: "resources/customisation/character_clothes/character_clothes30.png"}, clothes_31: { name: "clothes_31", img: "resources/customisation/character_clothes/character_clothes30.png" },
"clothes_32": {name:"clothes_32",img: "resources/customisation/character_clothes/character_clothes31.png"}, clothes_32: { name: "clothes_32", img: "resources/customisation/character_clothes/character_clothes31.png" },
"clothes_33": {name:"clothes_33",img: "resources/customisation/character_clothes/character_clothes32.png"}, clothes_33: { name: "clothes_33", img: "resources/customisation/character_clothes/character_clothes32.png" },
"clothes_34": {name:"clothes_34",img: "resources/customisation/character_clothes/character_clothes33.png"}, clothes_34: { name: "clothes_34", img: "resources/customisation/character_clothes/character_clothes33.png" },
"clothes_35": {name:"clothes_35",img: "resources/customisation/character_clothes/character_clothes34.png"}, clothes_35: { name: "clothes_35", img: "resources/customisation/character_clothes/character_clothes34.png" },
"clothes_36": {name:"clothes_36",img: "resources/customisation/character_clothes/character_clothes35.png"}, clothes_36: { name: "clothes_36", img: "resources/customisation/character_clothes/character_clothes35.png" },
"clothes_37": {name:"clothes_37",img: "resources/customisation/character_clothes/character_clothes36.png"}, clothes_37: { name: "clothes_37", img: "resources/customisation/character_clothes/character_clothes36.png" },
"clothes_38": {name:"clothes_38",img: "resources/customisation/character_clothes/character_clothes37.png"}, clothes_38: { name: "clothes_38", img: "resources/customisation/character_clothes/character_clothes37.png" },
"clothes_39": {name:"clothes_39",img: "resources/customisation/character_clothes/character_clothes38.png"}, clothes_39: { name: "clothes_39", img: "resources/customisation/character_clothes/character_clothes38.png" },
"clothes_40": {name:"clothes_40",img: "resources/customisation/character_clothes/character_clothes39.png"}, clothes_40: { name: "clothes_40", img: "resources/customisation/character_clothes/character_clothes39.png" },
"clothes_41": {name:"clothes_41",img: "resources/customisation/character_clothes/character_clothes40.png"}, clothes_41: { name: "clothes_41", img: "resources/customisation/character_clothes/character_clothes40.png" },
"clothes_42": {name:"clothes_42",img: "resources/customisation/character_clothes/character_clothes41.png"}, clothes_42: { name: "clothes_42", img: "resources/customisation/character_clothes/character_clothes41.png" },
"clothes_43": {name:"clothes_43",img: "resources/customisation/character_clothes/character_clothes42.png"}, clothes_43: { name: "clothes_43", img: "resources/customisation/character_clothes/character_clothes42.png" },
"clothes_44": {name:"clothes_44",img: "resources/customisation/character_clothes/character_clothes43.png"}, clothes_44: { name: "clothes_44", img: "resources/customisation/character_clothes/character_clothes43.png" },
"clothes_45": {name:"clothes_45",img: "resources/customisation/character_clothes/character_clothes44.png"}, clothes_45: { name: "clothes_45", img: "resources/customisation/character_clothes/character_clothes44.png" },
"clothes_46": {name:"clothes_46",img: "resources/customisation/character_clothes/character_clothes45.png"}, clothes_46: { name: "clothes_46", img: "resources/customisation/character_clothes/character_clothes45.png" },
"clothes_47": {name:"clothes_47",img: "resources/customisation/character_clothes/character_clothes46.png"}, clothes_47: { name: "clothes_47", img: "resources/customisation/character_clothes/character_clothes46.png" },
"clothes_48": {name:"clothes_48",img: "resources/customisation/character_clothes/character_clothes47.png"}, clothes_48: { name: "clothes_48", img: "resources/customisation/character_clothes/character_clothes47.png" },
"clothes_49": {name:"clothes_49",img: "resources/customisation/character_clothes/character_clothes48.png"}, clothes_49: { name: "clothes_49", img: "resources/customisation/character_clothes/character_clothes48.png" },
"clothes_50": {name:"clothes_50",img: "resources/customisation/character_clothes/character_clothes49.png"}, clothes_50: { name: "clothes_50", img: "resources/customisation/character_clothes/character_clothes49.png" },
"clothes_51": {name:"clothes_51",img: "resources/customisation/character_clothes/character_clothes50.png"}, clothes_51: { name: "clothes_51", img: "resources/customisation/character_clothes/character_clothes50.png" },
"clothes_52": {name:"clothes_52",img: "resources/customisation/character_clothes/character_clothes51.png"}, clothes_52: { name: "clothes_52", img: "resources/customisation/character_clothes/character_clothes51.png" },
"clothes_53": {name:"clothes_53",img: "resources/customisation/character_clothes/character_clothes52.png"}, clothes_53: { name: "clothes_53", img: "resources/customisation/character_clothes/character_clothes52.png" },
"clothes_54": {name:"clothes_54",img: "resources/customisation/character_clothes/character_clothes53.png"}, clothes_54: { name: "clothes_54", img: "resources/customisation/character_clothes/character_clothes53.png" },
"clothes_55": {name:"clothes_55",img: "resources/customisation/character_clothes/character_clothes54.png"}, clothes_55: { name: "clothes_55", img: "resources/customisation/character_clothes/character_clothes54.png" },
"clothes_56": {name:"clothes_56",img: "resources/customisation/character_clothes/character_clothes55.png"}, clothes_56: { name: "clothes_56", img: "resources/customisation/character_clothes/character_clothes55.png" },
"clothes_57": {name:"clothes_57",img: "resources/customisation/character_clothes/character_clothes56.png"}, clothes_57: { name: "clothes_57", img: "resources/customisation/character_clothes/character_clothes56.png" },
"clothes_58": {name:"clothes_58",img: "resources/customisation/character_clothes/character_clothes57.png"}, clothes_58: { name: "clothes_58", img: "resources/customisation/character_clothes/character_clothes57.png" },
"clothes_59": {name:"clothes_59",img: "resources/customisation/character_clothes/character_clothes58.png"}, clothes_59: { name: "clothes_59", img: "resources/customisation/character_clothes/character_clothes58.png" },
"clothes_60": {name:"clothes_60",img: "resources/customisation/character_clothes/character_clothes59.png"}, clothes_60: { name: "clothes_60", img: "resources/customisation/character_clothes/character_clothes59.png" },
"clothes_61": {name:"clothes_61",img: "resources/customisation/character_clothes/character_clothes60.png"}, clothes_61: { name: "clothes_61", img: "resources/customisation/character_clothes/character_clothes60.png" },
"clothes_62": {name:"clothes_62",img: "resources/customisation/character_clothes/character_clothes61.png"}, clothes_62: { name: "clothes_62", img: "resources/customisation/character_clothes/character_clothes61.png" },
"clothes_63": {name:"clothes_63",img: "resources/customisation/character_clothes/character_clothes62.png"}, clothes_63: { name: "clothes_63", img: "resources/customisation/character_clothes/character_clothes62.png" },
"clothes_64": {name:"clothes_64",img: "resources/customisation/character_clothes/character_clothes63.png"}, clothes_64: { name: "clothes_64", img: "resources/customisation/character_clothes/character_clothes63.png" },
"clothes_65": {name:"clothes_65",img: "resources/customisation/character_clothes/character_clothes64.png"}, clothes_65: { name: "clothes_65", img: "resources/customisation/character_clothes/character_clothes64.png" },
"clothes_66": {name:"clothes_66",img: "resources/customisation/character_clothes/character_clothes65.png"}, clothes_66: { name: "clothes_66", img: "resources/customisation/character_clothes/character_clothes65.png" },
"clothes_67": {name:"clothes_67",img: "resources/customisation/character_clothes/character_clothes66.png"}, clothes_67: { name: "clothes_67", img: "resources/customisation/character_clothes/character_clothes66.png" },
"clothes_68": {name:"clothes_68",img: "resources/customisation/character_clothes/character_clothes67.png"}, clothes_68: { name: "clothes_68", img: "resources/customisation/character_clothes/character_clothes67.png" },
"clothes_69": {name:"clothes_69",img: "resources/customisation/character_clothes/character_clothes68.png"}, clothes_69: { name: "clothes_69", img: "resources/customisation/character_clothes/character_clothes68.png" },
"clothes_70": {name:"clothes_70",img: "resources/customisation/character_clothes/character_clothes69.png"}, clothes_70: { name: "clothes_70", img: "resources/customisation/character_clothes/character_clothes69.png" },
"clothes_pride_shirt": {name:"clothes_pride_shirt",img: "resources/customisation/character_clothes/pride_shirt.png"}, clothes_pride_shirt: {
"clothes_black_hoodie": {name:"clothes_black_hoodie",img: "resources/customisation/character_clothes/black_hoodie.png"}, name: "clothes_pride_shirt",
"clothes_white_hoodie": {name:"clothes_white_hoodie",img: "resources/customisation/character_clothes/white_hoodie.png"}, img: "resources/customisation/character_clothes/pride_shirt.png",
"clothes_engelbert": {name:"clothes_engelbert",img: "resources/customisation/character_clothes/engelbert.png"} },
clothes_black_hoodie: {
name: "clothes_black_hoodie",
img: "resources/customisation/character_clothes/black_hoodie.png",
},
clothes_white_hoodie: {
name: "clothes_white_hoodie",
img: "resources/customisation/character_clothes/white_hoodie.png",
},
clothes_engelbert: { name: "clothes_engelbert", img: "resources/customisation/character_clothes/engelbert.png" },
}; };
export const HATS_RESOURCES: BodyResourceDescriptionListInterface = { export const HATS_RESOURCES: BodyResourceDescriptionListInterface = {
"hats_1": {name: "hats_1", img: "resources/customisation/character_hats/character_hats1.png"}, hats_1: { name: "hats_1", img: "resources/customisation/character_hats/character_hats1.png" },
"hats_2": {name: "hats_2", img: "resources/customisation/character_hats/character_hats2.png"}, hats_2: { name: "hats_2", img: "resources/customisation/character_hats/character_hats2.png" },
"hats_3": {name: "hats_3", img: "resources/customisation/character_hats/character_hats3.png"}, hats_3: { name: "hats_3", img: "resources/customisation/character_hats/character_hats3.png" },
"hats_4": {name: "hats_4", img: "resources/customisation/character_hats/character_hats4.png"}, hats_4: { name: "hats_4", img: "resources/customisation/character_hats/character_hats4.png" },
"hats_5": {name: "hats_5", img: "resources/customisation/character_hats/character_hats5.png"}, hats_5: { name: "hats_5", img: "resources/customisation/character_hats/character_hats5.png" },
"hats_6": {name: "hats_6", img: "resources/customisation/character_hats/character_hats6.png"}, hats_6: { name: "hats_6", img: "resources/customisation/character_hats/character_hats6.png" },
"hats_7": {name: "hats_7", img: "resources/customisation/character_hats/character_hats7.png"}, hats_7: { name: "hats_7", img: "resources/customisation/character_hats/character_hats7.png" },
"hats_8": {name: "hats_8", img: "resources/customisation/character_hats/character_hats8.png"}, hats_8: { name: "hats_8", img: "resources/customisation/character_hats/character_hats8.png" },
"hats_9": {name: "hats_9", img: "resources/customisation/character_hats/character_hats9.png"}, hats_9: { name: "hats_9", img: "resources/customisation/character_hats/character_hats9.png" },
"hats_10": {name: "hats_10", img: "resources/customisation/character_hats/character_hats10.png"}, hats_10: { name: "hats_10", img: "resources/customisation/character_hats/character_hats10.png" },
"hats_11": {name: "hats_11", img: "resources/customisation/character_hats/character_hats11.png"}, hats_11: { name: "hats_11", img: "resources/customisation/character_hats/character_hats11.png" },
"hats_12": {name: "hats_12", img: "resources/customisation/character_hats/character_hats12.png"}, hats_12: { name: "hats_12", img: "resources/customisation/character_hats/character_hats12.png" },
"hats_13": {name: "hats_13", img: "resources/customisation/character_hats/character_hats13.png"}, hats_13: { name: "hats_13", img: "resources/customisation/character_hats/character_hats13.png" },
"hats_14": {name: "hats_14", img: "resources/customisation/character_hats/character_hats14.png"}, hats_14: { name: "hats_14", img: "resources/customisation/character_hats/character_hats14.png" },
"hats_15": {name: "hats_15", img: "resources/customisation/character_hats/character_hats15.png"}, hats_15: { name: "hats_15", img: "resources/customisation/character_hats/character_hats15.png" },
"hats_16": {name: "hats_16", img: "resources/customisation/character_hats/character_hats16.png"}, hats_16: { name: "hats_16", img: "resources/customisation/character_hats/character_hats16.png" },
"hats_17": {name: "hats_17", img: "resources/customisation/character_hats/character_hats17.png"}, hats_17: { name: "hats_17", img: "resources/customisation/character_hats/character_hats17.png" },
"hats_18": {name: "hats_18", img: "resources/customisation/character_hats/character_hats18.png"}, hats_18: { name: "hats_18", img: "resources/customisation/character_hats/character_hats18.png" },
"hats_19": {name: "hats_19", img: "resources/customisation/character_hats/character_hats19.png"}, hats_19: { name: "hats_19", img: "resources/customisation/character_hats/character_hats19.png" },
"hats_20": {name: "hats_20", img: "resources/customisation/character_hats/character_hats20.png"}, hats_20: { name: "hats_20", img: "resources/customisation/character_hats/character_hats20.png" },
"hats_21": {name: "hats_21", img: "resources/customisation/character_hats/character_hats21.png"}, hats_21: { name: "hats_21", img: "resources/customisation/character_hats/character_hats21.png" },
"hats_22": {name: "hats_22", img: "resources/customisation/character_hats/character_hats22.png"}, hats_22: { name: "hats_22", img: "resources/customisation/character_hats/character_hats22.png" },
"hats_23": {name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png"}, hats_23: { name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png" },
"hats_24": {name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png"}, hats_24: { name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png" },
"hats_25": {name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png"}, hats_25: { name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png" },
"hats_26": {name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png"}, hats_26: { name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png" },
"tinfoil_hat1": {name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png"} tinfoil_hat1: { name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png" },
}; };
export const ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = { export const ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = {
"accessory_1": {name: "accessory_1", img: "resources/customisation/character_accessories/character_accessories1.png"}, accessory_1: {
"accessory_2": {name: "accessory_2", img: "resources/customisation/character_accessories/character_accessories2.png"}, name: "accessory_1",
"accessory_3": {name: "accessory_3", img: "resources/customisation/character_accessories/character_accessories3.png"}, img: "resources/customisation/character_accessories/character_accessories1.png",
"accessory_4": {name: "accessory_4", img: "resources/customisation/character_accessories/character_accessories4.png"}, },
"accessory_5": {name: "accessory_5", img: "resources/customisation/character_accessories/character_accessories5.png"}, accessory_2: {
"accessory_6": {name: "accessory_6", img: "resources/customisation/character_accessories/character_accessories6.png"}, name: "accessory_2",
"accessory_7": {name: "accessory_7", img: "resources/customisation/character_accessories/character_accessories7.png"}, img: "resources/customisation/character_accessories/character_accessories2.png",
"accessory_8": {name: "accessory_8", img: "resources/customisation/character_accessories/character_accessories8.png"}, },
"accessory_9": {name: "accessory_9", img: "resources/customisation/character_accessories/character_accessories9.png"}, accessory_3: {
"accessory_10": {name: "accessory_10", img: "resources/customisation/character_accessories/character_accessories10.png"}, name: "accessory_3",
"accessory_11": {name: "accessory_11", img: "resources/customisation/character_accessories/character_accessories11.png"}, img: "resources/customisation/character_accessories/character_accessories3.png",
"accessory_12": {name: "accessory_12", img: "resources/customisation/character_accessories/character_accessories12.png"}, },
"accessory_13": {name: "accessory_13", img: "resources/customisation/character_accessories/character_accessories13.png"}, accessory_4: {
"accessory_14": {name: "accessory_14", img: "resources/customisation/character_accessories/character_accessories14.png"}, name: "accessory_4",
"accessory_15": {name: "accessory_15", img: "resources/customisation/character_accessories/character_accessories15.png"}, img: "resources/customisation/character_accessories/character_accessories4.png",
"accessory_16": {name: "accessory_16", img: "resources/customisation/character_accessories/character_accessories16.png"}, },
"accessory_17": {name: "accessory_17", img: "resources/customisation/character_accessories/character_accessories17.png"}, accessory_5: {
"accessory_18": {name: "accessory_18", img: "resources/customisation/character_accessories/character_accessories18.png"}, name: "accessory_5",
"accessory_19": {name: "accessory_19", img: "resources/customisation/character_accessories/character_accessories19.png"}, img: "resources/customisation/character_accessories/character_accessories5.png",
"accessory_20": {name: "accessory_20", img: "resources/customisation/character_accessories/character_accessories20.png"}, },
"accessory_21": {name: "accessory_21", img: "resources/customisation/character_accessories/character_accessories21.png"}, accessory_6: {
"accessory_22": {name: "accessory_22", img: "resources/customisation/character_accessories/character_accessories22.png"}, name: "accessory_6",
"accessory_23": {name: "accessory_23", img: "resources/customisation/character_accessories/character_accessories23.png"}, img: "resources/customisation/character_accessories/character_accessories6.png",
"accessory_24": {name: "accessory_24", img: "resources/customisation/character_accessories/character_accessories24.png"}, },
"accessory_25": {name: "accessory_25", img: "resources/customisation/character_accessories/character_accessories25.png"}, accessory_7: {
"accessory_26": {name: "accessory_26", img: "resources/customisation/character_accessories/character_accessories26.png"}, name: "accessory_7",
"accessory_27": {name: "accessory_27", img: "resources/customisation/character_accessories/character_accessories27.png"}, img: "resources/customisation/character_accessories/character_accessories7.png",
"accessory_28": {name: "accessory_28", img: "resources/customisation/character_accessories/character_accessories28.png"}, },
"accessory_29": {name: "accessory_29", img: "resources/customisation/character_accessories/character_accessories29.png"}, accessory_8: {
"accessory_30": {name: "accessory_30", img: "resources/customisation/character_accessories/character_accessories30.png"}, name: "accessory_8",
"accessory_31": {name: "accessory_31", img: "resources/customisation/character_accessories/character_accessories31.png"}, img: "resources/customisation/character_accessories/character_accessories8.png",
"accessory_32": {name: "accessory_32", img: "resources/customisation/character_accessories/character_accessories32.png"}, },
"accessory_mate_bottle": {name: "accessory_mate_bottle", img: "resources/customisation/character_accessories/mate_bottle1.png"}, accessory_9: {
"accessory_mask": {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"} name: "accessory_9",
img: "resources/customisation/character_accessories/character_accessories9.png",
},
accessory_10: {
name: "accessory_10",
img: "resources/customisation/character_accessories/character_accessories10.png",
},
accessory_11: {
name: "accessory_11",
img: "resources/customisation/character_accessories/character_accessories11.png",
},
accessory_12: {
name: "accessory_12",
img: "resources/customisation/character_accessories/character_accessories12.png",
},
accessory_13: {
name: "accessory_13",
img: "resources/customisation/character_accessories/character_accessories13.png",
},
accessory_14: {
name: "accessory_14",
img: "resources/customisation/character_accessories/character_accessories14.png",
},
accessory_15: {
name: "accessory_15",
img: "resources/customisation/character_accessories/character_accessories15.png",
},
accessory_16: {
name: "accessory_16",
img: "resources/customisation/character_accessories/character_accessories16.png",
},
accessory_17: {
name: "accessory_17",
img: "resources/customisation/character_accessories/character_accessories17.png",
},
accessory_18: {
name: "accessory_18",
img: "resources/customisation/character_accessories/character_accessories18.png",
},
accessory_19: {
name: "accessory_19",
img: "resources/customisation/character_accessories/character_accessories19.png",
},
accessory_20: {
name: "accessory_20",
img: "resources/customisation/character_accessories/character_accessories20.png",
},
accessory_21: {
name: "accessory_21",
img: "resources/customisation/character_accessories/character_accessories21.png",
},
accessory_22: {
name: "accessory_22",
img: "resources/customisation/character_accessories/character_accessories22.png",
},
accessory_23: {
name: "accessory_23",
img: "resources/customisation/character_accessories/character_accessories23.png",
},
accessory_24: {
name: "accessory_24",
img: "resources/customisation/character_accessories/character_accessories24.png",
},
accessory_25: {
name: "accessory_25",
img: "resources/customisation/character_accessories/character_accessories25.png",
},
accessory_26: {
name: "accessory_26",
img: "resources/customisation/character_accessories/character_accessories26.png",
},
accessory_27: {
name: "accessory_27",
img: "resources/customisation/character_accessories/character_accessories27.png",
},
accessory_28: {
name: "accessory_28",
img: "resources/customisation/character_accessories/character_accessories28.png",
},
accessory_29: {
name: "accessory_29",
img: "resources/customisation/character_accessories/character_accessories29.png",
},
accessory_30: {
name: "accessory_30",
img: "resources/customisation/character_accessories/character_accessories30.png",
},
accessory_31: {
name: "accessory_31",
img: "resources/customisation/character_accessories/character_accessories31.png",
},
accessory_32: {
name: "accessory_32",
img: "resources/customisation/character_accessories/character_accessories32.png",
},
accessory_mate_bottle: {
name: "accessory_mate_bottle",
img: "resources/customisation/character_accessories/mate_bottle1.png",
},
accessory_mask: { name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png" },
}; };
export const LAYERS: BodyResourceDescriptionListInterface[] = [ export const LAYERS: BodyResourceDescriptionListInterface[] = [
@ -336,9 +442,9 @@ export const LAYERS: BodyResourceDescriptionListInterface[] = [
HAIR_RESOURCES, HAIR_RESOURCES,
CLOTHES_RESOURCES, CLOTHES_RESOURCES,
HATS_RESOURCES, HATS_RESOURCES,
ACCESSORIES_RESOURCES ACCESSORIES_RESOURCES,
]; ];
export const OBJECTS: BodyResourceDescriptionInterface[] = [ export const OBJECTS: BodyResourceDescriptionInterface[] = [
{name:'teleportation', img:'resources/objects/teleportation.png'}, { name: "teleportation", img: "resources/objects/teleportation.png" },
]; ];

19
front/src/Phaser/Entity/SpeechBubble.ts
View File

@ -1,14 +1,12 @@
import Scene = Phaser.Scene; import Scene = Phaser.Scene;
import type {Character} from "./Character"; import type { Character } from "./Character";
//todo: improve this WIP //todo: improve this WIP
export class SpeechBubble { export class SpeechBubble {
private bubble: Phaser.GameObjects.Graphics; private bubble: Phaser.GameObjects.Graphics;
private content: Phaser.GameObjects.Text; private content: Phaser.GameObjects.Text;
constructor(scene: Scene, player: Character, text: string = "") { constructor(scene: Scene, player: Character, text: string = "") {
const bubbleHeight = 50; const bubbleHeight = 50;
const bubblePadding = 10; const bubblePadding = 10;
const bubbleWidth = bubblePadding * 2 + text.length * 10; const bubbleWidth = bubblePadding * 2 + text.length * 10;
@ -49,15 +47,24 @@ export class SpeechBubble {
this.bubble.lineBetween(point2X, point2Y, point3X, point3Y); this.bubble.lineBetween(point2X, point2Y, point3X, point3Y);
this.bubble.lineBetween(point1X, point1Y, point3X, point3Y); this.bubble.lineBetween(point1X, point1Y, point3X, point3Y);
this.content = scene.add.text(0, 0, text, { fontFamily: 'Arial', fontSize: '20', color: '#000000', align: 'center', wordWrap: { width: bubbleWidth - (bubblePadding * 2) } }); this.content = scene.add.text(0, 0, text, {
fontFamily: "Arial",
fontSize: "20",
color: "#000000",
align: "center",
wordWrap: { width: bubbleWidth - bubblePadding * 2 },
});
player.add(this.content); player.add(this.content);
const bounds = this.content.getBounds(); const bounds = this.content.getBounds();
this.content.setPosition(this.bubble.x + (bubbleWidth / 2) - (bounds.width / 2), this.bubble.y + (bubbleHeight / 2) - (bounds.height / 2)); this.content.setPosition(
this.bubble.x + bubbleWidth / 2 - bounds.width / 2,
this.bubble.y + bubbleHeight / 2 - bounds.height / 2
);
} }
destroy(): void { destroy(): void {
this.bubble.setVisible(false) //todo find a better way this.bubble.setVisible(false); //todo find a better way
this.bubble.destroy(); this.bubble.destroy();
this.content.destroy(); this.content.destroy();
} }

1
front/src/Phaser/Entity/Sprite.ts
View File

@ -1,5 +1,4 @@
export class Sprite extends Phaser.GameObjects.Sprite { export class Sprite extends Phaser.GameObjects.Sprite {
constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: number | string) { constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: number | string) {
super(scene, x, y, texture, frame); super(scene, x, y, texture, frame);
scene.sys.updateList.add(this); scene.sys.updateList.add(this);

20
front/src/Phaser/Game/SoundManager.ts
View File

@ -4,35 +4,39 @@ import BaseSound = Phaser.Sound.BaseSound;
import SoundConfig = Phaser.Types.Sound.SoundConfig; import SoundConfig = Phaser.Types.Sound.SoundConfig;
class SoundManager { class SoundManager {
private soundPromises : Map<string,Promise<BaseSound>> = new Map<string, Promise<Phaser.Sound.BaseSound>>(); private soundPromises: Map<string, Promise<BaseSound>> = new Map<string, Promise<Phaser.Sound.BaseSound>>();
public loadSound (loadPlugin: LoaderPlugin, soundManager : BaseSoundManager, soundUrl: string) : Promise<BaseSound> { public loadSound(loadPlugin: LoaderPlugin, soundManager: BaseSoundManager, soundUrl: string): Promise<BaseSound> {
let soundPromise = this.soundPromises.get(soundUrl); let soundPromise = this.soundPromises.get(soundUrl);
if (soundPromise !== undefined) { if (soundPromise !== undefined) {
return soundPromise; return soundPromise;
} }
soundPromise = new Promise<BaseSound>((res) => { soundPromise = new Promise<BaseSound>((res) => {
const sound = soundManager.get(soundUrl); const sound = soundManager.get(soundUrl);
if (sound !== null) { if (sound !== null) {
return res(sound); return res(sound);
} }
loadPlugin.audio(soundUrl, soundUrl); loadPlugin.audio(soundUrl, soundUrl);
loadPlugin.once('filecomplete-audio-' + soundUrl, () => { loadPlugin.once("filecomplete-audio-" + soundUrl, () => {
res(soundManager.add(soundUrl)); res(soundManager.add(soundUrl));
}); });
loadPlugin.start(); loadPlugin.start();
}); });
this.soundPromises.set(soundUrl,soundPromise); this.soundPromises.set(soundUrl, soundPromise);
return soundPromise; return soundPromise;
} }
public async playSound(loadPlugin: LoaderPlugin, soundManager : BaseSoundManager, soundUrl: string, config: SoundConfig|undefined) : Promise<void> { public async playSound(
const sound = await this.loadSound(loadPlugin,soundManager,soundUrl); loadPlugin: LoaderPlugin,
soundManager: BaseSoundManager,
soundUrl: string,
config: SoundConfig | undefined
): Promise<void> {
const sound = await this.loadSound(loadPlugin, soundManager, soundUrl);
if (config === undefined) sound.play(); if (config === undefined) sound.play();
else sound.play(config); else sound.play(config);
} }
public stopSound(soundManager : BaseSoundManager,soundUrl : string){ public stopSound(soundManager: BaseSoundManager, soundUrl: string) {
soundManager.get(soundUrl).stop(); soundManager.get(soundUrl).stop();
} }
} }

24
front/src/Phaser/Items/ActionableItem.ts
View File

@ -3,17 +3,23 @@
* It has coordinates and an "activation radius" * It has coordinates and an "activation radius"
*/ */
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";
type EventCallback = (state: unknown, parameters: unknown) => void; type EventCallback = (state: unknown, parameters: unknown) => void;
export class ActionableItem { export class ActionableItem {
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>>();
public constructor(private id: number, private sprite: Sprite, private eventHandler: GameScene, private activationRadius: number, private onActivateCallback: (item: ActionableItem) => void) { public constructor(
private id: number,
private sprite: Sprite,
private eventHandler: GameScene,
private activationRadius: number,
private onActivateCallback: (item: ActionableItem) => void
) {
this.activationRadiusSquared = activationRadius * activationRadius; this.activationRadiusSquared = activationRadius * activationRadius;
} }
@ -25,8 +31,8 @@ export class ActionableItem {
* Returns the square of the distance to the object center IF we are in item action range * Returns the square of the distance to the object center IF we are in item action range
* OR null if we are out of range. * OR null if we are out of range.
*/ */
public actionableDistance(x: number, y: number): number|null { public actionableDistance(x: number, y: number): number | null {
const distanceSquared = (x - this.sprite.x)*(x - this.sprite.x) + (y - this.sprite.y)*(y - this.sprite.y); const distanceSquared = (x - this.sprite.x) * (x - this.sprite.x) + (y - this.sprite.y) * (y - this.sprite.y);
if (distanceSquared < this.activationRadiusSquared) { if (distanceSquared < this.activationRadiusSquared) {
return distanceSquared; return distanceSquared;
} else { } else {
@ -45,7 +51,7 @@ export class ActionableItem {
this.getOutlinePlugin()?.add(this.sprite, { this.getOutlinePlugin()?.add(this.sprite, {
thickness: 2, thickness: 2,
outlineColor: 0xffff00 outlineColor: 0xffff00,
}); });
} }
@ -60,8 +66,8 @@ export class ActionableItem {
this.getOutlinePlugin()?.remove(this.sprite); this.getOutlinePlugin()?.remove(this.sprite);
} }
private getOutlinePlugin(): OutlinePipelinePlugin|undefined { private getOutlinePlugin(): OutlinePipelinePlugin | undefined {
return this.sprite.scene.plugins.get('rexOutlinePipeline') as unknown as OutlinePipelinePlugin|undefined; return this.sprite.scene.plugins.get("rexOutlinePipeline") as unknown as OutlinePipelinePlugin | undefined;
} }
/** /**
@ -78,7 +84,7 @@ export class ActionableItem {
} }
public on(eventName: string, callback: EventCallback): void { public on(eventName: string, callback: EventCallback): void {
let callbacksArray: Array<EventCallback>|undefined = this.callbacks.get(eventName); let callbacksArray: Array<EventCallback> | undefined = this.callbacks.get(eventName);
if (callbacksArray === undefined) { if (callbacksArray === undefined) {
callbacksArray = new Array<EventCallback>(); callbacksArray = new Array<EventCallback>();
this.callbacks.set(eventName, callbacksArray); this.callbacks.set(eventName, callbacksArray);

79
front/src/Phaser/Items/Computer/computer.ts
View File

@ -1,86 +1,91 @@
import * as Phaser from 'phaser'; import * as Phaser from "phaser";
import {Scene} from "phaser"; import { Scene } from "phaser";
import Sprite = Phaser.GameObjects.Sprite; import Sprite = Phaser.GameObjects.Sprite;
import type {ITiledMapObject} from "../../Map/ITiledMap"; import type { ITiledMapObject } from "../../Map/ITiledMap";
import type {ItemFactoryInterface} from "../ItemFactoryInterface"; import type { ItemFactoryInterface } from "../ItemFactoryInterface";
import type {GameScene} from "../../Game/GameScene"; import type { GameScene } from "../../Game/GameScene";
import {ActionableItem} from "../ActionableItem"; import { ActionableItem } from "../ActionableItem";
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
const isComputerState = const isComputerState = new tg.IsInterface()
new tg.IsInterface().withProperties({ .withProperties({
status: tg.isString, status: tg.isString,
}).get(); })
.get();
type ComputerState = tg.GuardedType<typeof isComputerState>; type ComputerState = tg.GuardedType<typeof isComputerState>;
let state: ComputerState = { let state: ComputerState = {
'status': 'off' status: "off",
}; };
export default { export default {
preload: (loader: Phaser.Loader.LoaderPlugin): void => { preload: (loader: Phaser.Loader.LoaderPlugin): void => {
loader.atlas('computer', '/resources/items/computer/computer.png', '/resources/items/computer/computer_atlas.json'); loader.atlas(
"computer",
"/resources/items/computer/computer.png",
"/resources/items/computer/computer_atlas.json"
);
}, },
create: (scene: GameScene): void => { create: (scene: GameScene): void => {
scene.anims.create({ scene.anims.create({
key: 'computer_off', key: "computer_off",
frames: [ frames: [
{ {
key: 'computer', key: "computer",
frame: 'computer_off' frame: "computer_off",
} },
], ],
frameRate: 10, frameRate: 10,
repeat: -1 repeat: -1,
}); });
scene.anims.create({ scene.anims.create({
key: 'computer_run', key: "computer_run",
frames: [ frames: [
{ {
key: 'computer', key: "computer",
frame: 'computer_on1' frame: "computer_on1",
}, },
{ {
key: 'computer', key: "computer",
frame: 'computer_on2' frame: "computer_on2",
} },
], ],
frameRate: 5, frameRate: 5,
repeat: -1 repeat: -1,
}); });
}, },
factory: (scene: GameScene, object: ITiledMapObject, initState: unknown): ActionableItem => { factory: (scene: GameScene, object: ITiledMapObject, initState: unknown): ActionableItem => {
if (initState !== undefined) { if (initState !== undefined) {
if (!isComputerState(initState)) { if (!isComputerState(initState)) {
throw new Error('Invalid state received for computer object'); throw new Error("Invalid state received for computer object");
} }
state = initState; state = initState;
} }
// Idée: ESSAYER WebPack? https://paultavares.wordpress.com/2018/07/02/webpack-how-to-generate-an-es-module-bundle/ // Idée: ESSAYER WebPack? https://paultavares.wordpress.com/2018/07/02/webpack-how-to-generate-an-es-module-bundle/
const computer = new Sprite(scene, object.x, object.y, 'computer'); const computer = new Sprite(scene, object.x, object.y, "computer");
scene.add.existing(computer); scene.add.existing(computer);
if (state.status === 'on') { if (state.status === "on") {
computer.anims.play('computer_run'); computer.anims.play("computer_run");
} }
const item = new ActionableItem(object.id, computer, scene, 32, (item: ActionableItem) => { const item = new ActionableItem(object.id, computer, scene, 32, (item: ActionableItem) => {
if (state.status === 'off') { if (state.status === "off") {
state.status = 'on'; state.status = "on";
item.emit('TURN_ON', state); item.emit("TURN_ON", state);
} else { } else {
state.status = 'off'; state.status = "off";
item.emit('TURN_OFF', state); item.emit("TURN_OFF", state);
} }
}); });
item.on('TURN_ON', () => { item.on("TURN_ON", () => {
computer.anims.play('computer_run'); computer.anims.play("computer_run");
}); });
item.on('TURN_OFF', () => { item.on("TURN_OFF", () => {
computer.anims.play('computer_off'); computer.anims.play("computer_off");
}); });
return item; return item;
//scene.add.sprite(object.x, object.y, 'computer'); //scene.add.sprite(object.x, object.y, 'computer');
} },
} as ItemFactoryInterface; } as ItemFactoryInterface;

6
front/src/Phaser/Items/ItemFactoryInterface.ts
View File

@ -1,6 +1,6 @@
import type {GameScene} from "../Game/GameScene"; import type { GameScene } from "../Game/GameScene";
import type {ITiledMapObject} from "../Map/ITiledMap"; import type { ITiledMapObject } from "../Map/ITiledMap";
import type {ActionableItem} from "./ActionableItem"; import type { ActionableItem } from "./ActionableItem";
import LoaderPlugin = Phaser.Loader.LoaderPlugin; import LoaderPlugin = Phaser.Loader.LoaderPlugin;
export interface ItemFactoryInterface { export interface ItemFactoryInterface {

23
front/src/Phaser/Login/AbstractCharacterScene.ts
View File

@ -1,14 +1,13 @@
import {ResizableScene} from "./ResizableScene"; import { ResizableScene } from "./ResizableScene";
import {localUserStore} from "../../Connexion/LocalUserStore"; import { localUserStore } from "../../Connexion/LocalUserStore";
import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
import {loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager"; import { loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
import type {CharacterTexture} from "../../Connexion/LocalUser"; import type { CharacterTexture } from "../../Connexion/LocalUser";
export abstract class AbstractCharacterScene extends ResizableScene { export abstract class AbstractCharacterScene extends ResizableScene {
loadCustomSceneSelectCharacters(): Promise<BodyResourceDescriptionInterface[]> {
loadCustomSceneSelectCharacters() : Promise<BodyResourceDescriptionInterface[]> {
const textures = this.getTextures(); const textures = this.getTextures();
const promises : Promise<BodyResourceDescriptionInterface>[] = []; const promises: Promise<BodyResourceDescriptionInterface>[] = [];
if (textures) { if (textures) {
for (const texture of textures) { for (const texture of textures) {
if (texture.level === -1) { if (texture.level === -1) {
@ -17,10 +16,10 @@ export abstract class AbstractCharacterScene extends ResizableScene {
promises.push(loadCustomTexture(this.load, texture)); promises.push(loadCustomTexture(this.load, texture));
} }
} }
return Promise.all(promises) return Promise.all(promises);
} }
loadSelectSceneCharacters() : Promise<BodyResourceDescriptionInterface[]> { loadSelectSceneCharacters(): Promise<BodyResourceDescriptionInterface[]> {
const textures = this.getTextures(); const textures = this.getTextures();
const promises: Promise<BodyResourceDescriptionInterface>[] = []; const promises: Promise<BodyResourceDescriptionInterface>[] = [];
if (textures) { if (textures) {
@ -31,10 +30,10 @@ export abstract class AbstractCharacterScene extends ResizableScene {
promises.push(loadCustomTexture(this.load, texture)); promises.push(loadCustomTexture(this.load, texture));
} }
} }
return Promise.all(promises) return Promise.all(promises);
} }
private getTextures() : CharacterTexture[]|undefined{ private getTextures(): CharacterTexture[] | undefined {
const localUser = localUserStore.getLocalUser(); const localUser = localUserStore.getLocalUser();
return localUser?.textures; return localUser?.textures;
} }

15
front/src/Phaser/Login/ResizableScene.ts
View File

@ -1,4 +1,4 @@
import {Scene} from "phaser"; import { Scene } from "phaser";
import DOMElement = Phaser.GameObjects.DOMElement; import DOMElement = Phaser.GameObjects.DOMElement;
export abstract class ResizableScene extends Scene { export abstract class ResizableScene extends Scene {
@ -11,13 +11,10 @@ export abstract class ResizableScene extends Scene {
* @param defaultWidth The width of the DOM element. We try to compute it but it may not be available if called from "create". * @param defaultWidth The width of the DOM element. We try to compute it but it may not be available if called from "create".
*/ */
public centerXDomElement(object: DOMElement, defaultWidth: number): void { public centerXDomElement(object: DOMElement, defaultWidth: number): void {
object.x = (this.scale.width / 2) - object.x =
( this.scale.width / 2 -
object (object && object.node && object.node.getBoundingClientRect().width > 0
&& object.node ? object.node.getBoundingClientRect().width / 2 / this.scale.zoom
&& object.node.getBoundingClientRect().width > 0 : defaultWidth / this.scale.zoom);
? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom)
: (defaultWidth / this.scale.zoom)
);
} }
} }

27
front/src/Phaser/Login/SelectCharacterMobileScene.ts
View File

@ -1,14 +1,13 @@
import { SelectCharacterScene } from "./SelectCharacterScene"; import { SelectCharacterScene } from "./SelectCharacterScene";
export class SelectCharacterMobileScene extends SelectCharacterScene { export class SelectCharacterMobileScene extends SelectCharacterScene {
create() {
create(){
super.create(); super.create();
this.onResize(); this.onResize();
this.selectedRectangle.destroy(); this.selectedRectangle.destroy();
} }
protected defineSetupPlayer(num: number){ protected defineSetupPlayer(num: number) {
const deltaX = 30; const deltaX = 30;
const deltaY = 2; const deltaY = 2;
let [playerX, playerY] = this.getCharacterPosition(); let [playerX, playerY] = this.getCharacterPosition();
@ -16,48 +15,44 @@ export class SelectCharacterMobileScene extends SelectCharacterScene {
let playerScale = 1.5; let playerScale = 1.5;
let playerOpacity = 1; let playerOpacity = 1;
if( this.currentSelectUser !== num ){ if (this.currentSelectUser !== num) {
playerVisible = false; playerVisible = false;
} }
if( num === (this.currentSelectUser + 1) ){ if (num === this.currentSelectUser + 1) {
playerY -= deltaY; playerY -= deltaY;
playerX += deltaX; playerX += deltaX;
playerScale = 0.8; playerScale = 0.8;
playerOpacity = 0.6; playerOpacity = 0.6;
playerVisible = true; playerVisible = true;
} }
if( num === (this.currentSelectUser + 2) ){ if (num === this.currentSelectUser + 2) {
playerY -= deltaY; playerY -= deltaY;
playerX += (deltaX * 2); playerX += deltaX * 2;
playerScale = 0.8; playerScale = 0.8;
playerOpacity = 0.6; playerOpacity = 0.6;
playerVisible = true; playerVisible = true;
} }
if( num === (this.currentSelectUser - 1) ){ if (num === this.currentSelectUser - 1) {
playerY -= deltaY; playerY -= deltaY;
playerX -= deltaX; playerX -= deltaX;
playerScale = 0.8; playerScale = 0.8;
playerOpacity = 0.6; playerOpacity = 0.6;
playerVisible = true; playerVisible = true;
} }
if( num === (this.currentSelectUser - 2) ){ if (num === this.currentSelectUser - 2) {
playerY -= deltaY; playerY -= deltaY;
playerX -= (deltaX * 2); playerX -= deltaX * 2;
playerScale = 0.8; playerScale = 0.8;
playerOpacity = 0.6; playerOpacity = 0.6;
playerVisible = true; playerVisible = true;
} }
return {playerX, playerY, playerScale, playerOpacity, playerVisible} return { playerX, playerY, playerScale, playerOpacity, playerVisible };
} }
/** /**
* Returns pixel position by on column and row number * Returns pixel position by on column and row number
*/ */
protected getCharacterPosition(): [number, number] { protected getCharacterPosition(): [number, number] {
return [ return [this.game.renderer.width / 2, this.game.renderer.height / 3];
this.game.renderer.width / 2,
this.game.renderer.height / 3
];
} }
} }

15
front/src/Phaser/Player/Animation.ts
View File

@ -1,13 +1,10 @@
export enum PlayerAnimationDirections { export enum PlayerAnimationDirections {
Down = 'down', Down = "down",
Left = 'left', Left = "left",
Up = 'up', Up = "up",
Right = 'right', Right = "right",
} }
export enum PlayerAnimationTypes { export enum PlayerAnimationTypes {
Walk = 'walk', Walk = "walk",
Idle = 'idle', Idle = "idle",
} }

6
front/src/Phaser/Reconnecting/WAError.ts
View File

@ -3,13 +3,13 @@ export class WAError extends Error {
private _subTitle: string; private _subTitle: string;
private _details: string; private _details: string;
constructor (title: string, subTitle: string, details: string) { constructor(title: string, subTitle: string, details: string) {
super(title+' - '+subTitle+' - '+details); super(title + " - " + subTitle + " - " + details);
this._title = title; this._title = title;
this._subTitle = subTitle; this._subTitle = subTitle;
this._details = details; this._details = details;
// Set the prototype explicitly. // Set the prototype explicitly.
Object.setPrototypeOf (this, WAError.prototype); Object.setPrototypeOf(this, WAError.prototype);
} }
get title(): string { get title(): string {

28
front/src/Phaser/Services/HdpiManager.ts
View File

@ -1,4 +1,3 @@
interface Size { interface Size {
width: number; width: number;
height: number; height: number;
@ -23,14 +22,14 @@ export class HdpiManager {
* *
* @param realPixelScreenSize * @param realPixelScreenSize
*/ */
public getOptimalGameSize(realPixelScreenSize: Size): { game: Size, real: Size } { public getOptimalGameSize(realPixelScreenSize: Size): { game: Size; real: Size } {
const realPixelNumber = realPixelScreenSize.width * realPixelScreenSize.height; const realPixelNumber = realPixelScreenSize.width * realPixelScreenSize.height;
// If the screen has not a definition small enough to match the minimum number of pixels we want to display, // If the screen has not a definition small enough to match the minimum number of pixels we want to display,
// let's make the canvas the size of the screen (in real pixels) // let's make the canvas the size of the screen (in real pixels)
if (realPixelNumber <= this.minRecommendedGamePixelsNumber) { if (realPixelNumber <= this.minRecommendedGamePixelsNumber) {
return { return {
game: realPixelScreenSize, game: realPixelScreenSize,
real: realPixelScreenSize real: realPixelScreenSize,
}; };
} }
@ -49,8 +48,8 @@ export class HdpiManager {
real: { real: {
width: realPixelScreenSize.width, width: realPixelScreenSize.width,
height: realPixelScreenSize.height, height: realPixelScreenSize.height,
} },
} };
} }
const gameWidth = Math.ceil(realPixelScreenSize.width / optimalZoomLevel / this._zoomModifier); const gameWidth = Math.ceil(realPixelScreenSize.width / optimalZoomLevel / this._zoomModifier);
@ -58,8 +57,12 @@ export class HdpiManager {
// Let's ensure we display a minimum of pixels, even if crazily zoomed in. // Let's ensure we display a minimum of pixels, even if crazily zoomed in.
if (gameWidth * gameHeight < this.absoluteMinPixelNumber) { if (gameWidth * gameHeight < this.absoluteMinPixelNumber) {
const minGameHeight = Math.sqrt(this.absoluteMinPixelNumber * realPixelScreenSize.height / realPixelScreenSize.width); const minGameHeight = Math.sqrt(
const minGameWidth = Math.sqrt(this.absoluteMinPixelNumber * realPixelScreenSize.width / realPixelScreenSize.height); (this.absoluteMinPixelNumber * realPixelScreenSize.height) / realPixelScreenSize.width
);
const minGameWidth = Math.sqrt(
(this.absoluteMinPixelNumber * realPixelScreenSize.width) / realPixelScreenSize.height
);
// Let's reset the zoom modifier (WARNING this is a SIDE EFFECT in a getter) // Let's reset the zoom modifier (WARNING this is a SIDE EFFECT in a getter)
this._zoomModifier = realPixelScreenSize.width / minGameWidth / optimalZoomLevel; this._zoomModifier = realPixelScreenSize.width / minGameWidth / optimalZoomLevel;
@ -72,9 +75,8 @@ export class HdpiManager {
real: { real: {
width: realPixelScreenSize.width, width: realPixelScreenSize.width,
height: realPixelScreenSize.height, height: realPixelScreenSize.height,
} },
} };
} }
return { return {
@ -85,8 +87,8 @@ export class HdpiManager {
real: { real: {
width: Math.ceil(realPixelScreenSize.width / optimalZoomLevel) * optimalZoomLevel, width: Math.ceil(realPixelScreenSize.width / optimalZoomLevel) * optimalZoomLevel,
height: Math.ceil(realPixelScreenSize.height / optimalZoomLevel) * optimalZoomLevel, height: Math.ceil(realPixelScreenSize.height / optimalZoomLevel) * optimalZoomLevel,
} },
} };
} }
/** /**
@ -95,7 +97,7 @@ export class HdpiManager {
private getOptimalZoomLevel(realPixelNumber: number): number { private getOptimalZoomLevel(realPixelNumber: number): number {
const result = Math.sqrt(realPixelNumber / this.minRecommendedGamePixelsNumber); const result = Math.sqrt(realPixelNumber / this.minRecommendedGamePixelsNumber);
if (1.5 <= result && result < 2) { if (1.5 <= result && result < 2) {
return 1.5 return 1.5;
} else { } else {
return Math.floor(result); return Math.floor(result);
} }

31
front/src/Phaser/Services/WaScaleManager.ts
View File

@ -1,10 +1,9 @@
import {HdpiManager} from "./HdpiManager"; import { HdpiManager } from "./HdpiManager";
import ScaleManager = Phaser.Scale.ScaleManager; import ScaleManager = Phaser.Scale.ScaleManager;
import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager"; import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
import type {Game} from "../Game/Game"; import type { Game } from "../Game/Game";
import {ResizableScene} from "../Login/ResizableScene"; import { ResizableScene } from "../Login/ResizableScene";
import {HtmlUtils} from "../../WebRtc/HtmlUtils"; import { HtmlUtils } from "../../WebRtc/HtmlUtils";
class WaScaleManager { class WaScaleManager {
private hdpiManager: HdpiManager; private hdpiManager: HdpiManager;
@ -23,26 +22,29 @@ class WaScaleManager {
} }
public applyNewSize() { public applyNewSize() {
const {width, height} = coWebsiteManager.getGameSize(); const { width, height } = coWebsiteManager.getGameSize();
let devicePixelRatio = 1; let devicePixelRatio = 1;
if (window.devicePixelRatio) { if (window.devicePixelRatio) {
devicePixelRatio = window.devicePixelRatio; devicePixelRatio = window.devicePixelRatio;
} }
const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({width: width * devicePixelRatio, height: height * devicePixelRatio}); const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({
width: width * devicePixelRatio,
height: height * devicePixelRatio,
});
this.actualZoom = realSize.width / gameSize.width / devicePixelRatio; this.actualZoom = realSize.width / gameSize.width / devicePixelRatio;
this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio) this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio);
this.scaleManager.resize(gameSize.width, gameSize.height); this.scaleManager.resize(gameSize.width, gameSize.height);
// Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves // Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves
const style = this.scaleManager.canvas.style; const style = this.scaleManager.canvas.style;
style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px'; style.width = Math.ceil(realSize.width / devicePixelRatio) + "px";
style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px'; style.height = Math.ceil(realSize.height / devicePixelRatio) + "px";
// Resize the game element at the same size at the canvas // Resize the game element at the same size at the canvas
const gameStyle = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('game').style; const gameStyle = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("game").style;
gameStyle.width = style.width; gameStyle.width = style.width;
gameStyle.height = style.height; gameStyle.height = style.height;
@ -70,7 +72,7 @@ class WaScaleManager {
this._saveZoom = this.hdpiManager.zoomModifier; this._saveZoom = this.hdpiManager.zoomModifier;
} }
public restoreZoom(): void{ public restoreZoom(): void {
this.hdpiManager.zoomModifier = this._saveZoom; this.hdpiManager.zoomModifier = this._saveZoom;
this.applyNewSize(); this.applyNewSize();
} }
@ -81,7 +83,6 @@ class WaScaleManager {
public get uiScalingFactor(): number { public get uiScalingFactor(): number {
return this.actualZoom > 1 ? 1 : 1.2; return this.actualZoom > 1 ? 1 : 1.2;
} }
} }
export const waScaleManager = new WaScaleManager(640*480, 196*196); export const waScaleManager = new WaScaleManager(640 * 480, 196 * 196);

14
front/src/Phaser/UserInput/PinchManager.ts
View File

@ -1,6 +1,6 @@
import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js"; import { Pinch } from "phaser3-rex-plugins/plugins/gestures.js";
import {waScaleManager} from "../Services/WaScaleManager"; import { waScaleManager } from "../Services/WaScaleManager";
import {GameScene} from "../Game/GameScene"; import { GameScene } from "../Game/GameScene";
export class PinchManager { export class PinchManager {
private scene: Phaser.Scene; private scene: Phaser.Scene;
@ -15,18 +15,18 @@ export class PinchManager {
// We are smoothing its value with previous values to prevent the flicking. // We are smoothing its value with previous values to prevent the flicking.
let smoothPinch = 1; let smoothPinch = 1;
this.pinch.on('pinchstart', () => { this.pinch.on("pinchstart", () => {
smoothPinch = 1; smoothPinch = 1;
}); });
// eslint-disable-next-line
this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line this.pinch.on("pinch", (pinch: any) => {
if (pinch.scaleFactor > 1.2 || pinch.scaleFactor < 0.8) { if (pinch.scaleFactor > 1.2 || pinch.scaleFactor < 0.8) {
// Pinch too fast! Probably a bad measure. // Pinch too fast! Probably a bad measure.
return; return;
} }
smoothPinch = 3/5*smoothPinch + 2/5*pinch.scaleFactor; smoothPinch = (3 / 5) * smoothPinch + (2 / 5) * pinch.scaleFactor;
if (this.scene instanceof GameScene) { if (this.scene instanceof GameScene) {
this.scene.zoomByFactor(smoothPinch); this.scene.zoomByFactor(smoothPinch);
} else { } else {

6
front/src/Stores/ErrorStore.ts
View File

@ -1,4 +1,4 @@
import {writable} from "svelte/store"; import { writable } from "svelte/store";
/** /**
* A store that contains a list of error messages to be displayed. * A store that contains a list of error messages to be displayed.
@ -8,7 +8,7 @@ function createErrorStore() {
return { return {
subscribe, subscribe,
addErrorMessage: (e: string|Error): void => { addErrorMessage: (e: string | Error): void => {
update((messages: string[]) => { update((messages: string[]) => {
let message: string; let message: string;
if (e instanceof Error) { if (e instanceof Error) {
@ -26,7 +26,7 @@ function createErrorStore() {
}, },
clearMessages: (): void => { clearMessages: (): void => {
set([]); set([]);
} },
}; };
} }

6
front/src/Stores/Errors/BrowserTooOldError.ts
View File

@ -1,8 +1,10 @@
export class BrowserTooOldError extends Error { export class BrowserTooOldError extends Error {
static NAME = 'BrowserTooOldError'; static NAME = "BrowserTooOldError";
constructor() { constructor() {
super('Unable to access your camera or microphone. Your browser is too old. Please consider upgrading your browser or try using a recent version of Chrome.'); super(
"Unable to access your camera or microphone. Your browser is too old. Please consider upgrading your browser or try using a recent version of Chrome."
);
this.name = BrowserTooOldError.NAME; this.name = BrowserTooOldError.NAME;
} }
} }

6
front/src/Stores/Errors/WebviewOnOldIOS.ts
View File

@ -1,8 +1,10 @@
export class WebviewOnOldIOS extends Error { export class WebviewOnOldIOS extends Error {
static NAME = 'WebviewOnOldIOS'; static NAME = "WebviewOnOldIOS";
constructor() { constructor() {
super('Your iOS version cannot use video/audio in the browser unless you are using Safari. Please switch to Safari or upgrade iOS to 14.3 or above.'); super(
"Your iOS version cannot use video/audio in the browser unless you are using Safari. Please switch to Safari or upgrade iOS to 14.3 or above."
);
this.name = WebviewOnOldIOS.NAME; this.name = WebviewOnOldIOS.NAME;
} }
} }

6
front/src/Stores/SoundPlayingStore.ts
View File

@ -4,7 +4,7 @@ import { writable } from "svelte/store";
* A store that contains the URL of the sound currently playing * A store that contains the URL of the sound currently playing
*/ */
function createSoundPlayingStore() { function createSoundPlayingStore() {
const { subscribe, set, update } = writable<string|null>(null); const { subscribe, set, update } = writable<string | null>(null);
return { return {
subscribe, subscribe,
@ -13,9 +13,7 @@ function createSoundPlayingStore() {
}, },
soundEnded: () => { soundEnded: () => {
set(null); set(null);
} },
}; };
} }

6
front/src/Touch/TouchScreenManager.ts
View File

@ -1,7 +1,5 @@
class TouchScreenManager { class TouchScreenManager {
readonly supportTouchScreen: boolean;
readonly supportTouchScreen:boolean;
constructor() { constructor() {
this.supportTouchScreen = this.detectTouchscreen(); this.supportTouchScreen = this.detectTouchscreen();
@ -9,7 +7,7 @@ class TouchScreenManager {
//found here: https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript#4819886 //found here: https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript#4819886
detectTouchscreen(): boolean { detectTouchscreen(): boolean {
return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); return "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
} }
} }

15
front/src/WebRtc/DeviceUtils.ts
View File

@ -1,12 +1,9 @@
export function isIOS(): boolean { export function isIOS(): boolean {
return [ return (
'iPad Simulator', ["iPad Simulator", "iPhone Simulator", "iPod Simulator", "iPad", "iPhone", "iPod"].includes(
'iPhone Simulator', navigator.platform
'iPod Simulator', ) ||
'iPad',
'iPhone',
'iPod'
].includes(navigator.platform)
// iPad on iOS 13 detection // iPad on iOS 13 detection
|| (navigator.userAgent.includes("Mac") && "ontouchend" in document) (navigator.userAgent.includes("Mac") && "ontouchend" in document)
);
} }

10
front/src/rex-plugins.d.ts vendored
View File

@ -1,16 +1,16 @@
declare module 'phaser3-rex-plugins/plugins/virtualjoystick.js' { declare module "phaser3-rex-plugins/plugins/virtualjoystick.js" {
const content: any; // eslint-disable-line const content: any; // eslint-disable-line
export default content; export default content;
} }
declare module 'phaser3-rex-plugins/plugins/gestures-plugin.js' { declare module "phaser3-rex-plugins/plugins/gestures-plugin.js" {
const content: any; // eslint-disable-line const content: any; // eslint-disable-line
export default content; export default content;
} }
declare module 'phaser3-rex-plugins/plugins/webfontloader-plugin.js' { declare module "phaser3-rex-plugins/plugins/webfontloader-plugin.js" {
const content: any; // eslint-disable-line const content: any; // eslint-disable-line
export default content; export default content;
} }
declare module 'phaser3-rex-plugins/plugins/outlinepipeline-plugin.js' { declare module "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js" {
import GameObject = Phaser.GameObjects.GameObject; import GameObject = Phaser.GameObjects.GameObject;
class OutlinePipelinePlugin { class OutlinePipelinePlugin {
@ -21,6 +21,6 @@ declare module 'phaser3-rex-plugins/plugins/outlinepipeline-plugin.js' {
export default OutlinePipelinePlugin; export default OutlinePipelinePlugin;
} }
declare module 'phaser3-rex-plugins/plugins/gestures.js' { declare module "phaser3-rex-plugins/plugins/gestures.js" {
export const Pinch: any; // eslint-disable-line export const Pinch: any; // eslint-disable-line
} }