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

Merge branch 'develop' of github.com:thecodingmachine/workadventure into develop

Browse Source
This commit is contained in:
_Bastler
2022-04-25 14:57:17 +02:00
parent 70888e6baf 1c9caa690a
commit 73ef14bfc0
75 changed files with 1753 additions and 1288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/Phaser/Components/SelectWoka/WokaSlot.ts
+35
View File
@@ -0,0 +1,35 @@
import { GridItem } from "@home-based-studio/phaser3-utils";
export class WokaSlot extends GridItem {
private sprite: Phaser.GameObjects.Sprite;
private selection: Phaser.GameObjects.Rectangle;
private readonly SIZE: number = 50;
constructor(scene: Phaser.Scene, spriteKey: string, id?: string) {
super(scene, id);
this.sprite = this.scene.add.sprite(0, 0, spriteKey);
this.selection = this.scene.add
.rectangle(0, 0, this.SIZE, this.SIZE)
.setStrokeStyle(1, 0xffffff)
.setVisible(false);
this.add([this.selection, this.sprite]);
this.setSize(this.SIZE, this.SIZE);
this.setInteractive({ cursor: "pointer" });
this.scene.input.setDraggable(this);
this.bindEventHandlers();
this.scene.add.existing(this);
}
public getSprite(): Phaser.GameObjects.Sprite {
return this.sprite;
}
public select(select: boolean = true): void {
this.selection.setVisible(select);
}
}
front/src/Phaser/Entity/PlayerTextures.ts
+55 -30
View File
@@ -36,14 +36,16 @@ export enum PlayerTexturesKey {
}
export class PlayerTextures {
private PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {};
private COLOR_RESOURCES: BodyResourceDescriptionListInterface = {};
private EYES_RESOURCES: BodyResourceDescriptionListInterface = {};
private HAIR_RESOURCES: BodyResourceDescriptionListInterface = {};
private CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = {};
private HATS_RESOURCES: BodyResourceDescriptionListInterface = {};
private ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = {};
private LAYERS: BodyResourceDescriptionListInterface[] = [];
private wokaResources: BodyResourceDescriptionListInterface = {};
private colorResources: BodyResourceDescriptionListInterface = {};
private eyesResources: BodyResourceDescriptionListInterface = {};
private hairResources: BodyResourceDescriptionListInterface = {};
private clothesResources: BodyResourceDescriptionListInterface = {};
private hatsResources: BodyResourceDescriptionListInterface = {};
private accessoriesResources: BodyResourceDescriptionListInterface = {};
private layers: BodyResourceDescriptionListInterface[] = [];
private wokaCollections = new Map<string, BodyResourceDescriptionInterface[]>();
public loadPlayerTexturesMetadata(metadata: WokaList): void {
this.mapTexturesMetadataIntoResources(metadata);
@@ -52,43 +54,53 @@ export class PlayerTextures {
public getTexturesResources(key: PlayerTexturesKey): BodyResourceDescriptionListInterface {
switch (key) {
case PlayerTexturesKey.Accessory:
return this.ACCESSORIES_RESOURCES;
return this.accessoriesResources;
case PlayerTexturesKey.Body:
return this.COLOR_RESOURCES;
return this.colorResources;
case PlayerTexturesKey.Clothes:
return this.CLOTHES_RESOURCES;
return this.clothesResources;
case PlayerTexturesKey.Eyes:
return this.EYES_RESOURCES;
return this.eyesResources;
case PlayerTexturesKey.Hair:
return this.HAIR_RESOURCES;
return this.hairResources;
case PlayerTexturesKey.Hat:
return this.HATS_RESOURCES;
return this.hatsResources;
case PlayerTexturesKey.Woka:
return this.PLAYER_RESOURCES;
return this.wokaResources;
}
}
public getLayers(): BodyResourceDescriptionListInterface[] {
return this.LAYERS;
return this.layers;
}
public getCollectionsKeys(): string[] {
return Array.from(this.wokaCollections.keys());
}
public getWokaCollectionTextures(key: string): BodyResourceDescriptionInterface[] {
return this.wokaCollections.get(key) ?? [];
}
private mapTexturesMetadataIntoResources(metadata: WokaList): void {
this.PLAYER_RESOURCES = this.getMappedResources(metadata.woka);
this.COLOR_RESOURCES = this.getMappedResources(metadata.body);
this.EYES_RESOURCES = this.getMappedResources(metadata.eyes);
this.HAIR_RESOURCES = this.getMappedResources(metadata.hair);
this.CLOTHES_RESOURCES = this.getMappedResources(metadata.clothes);
this.HATS_RESOURCES = this.getMappedResources(metadata.hat);
this.ACCESSORIES_RESOURCES = this.getMappedResources(metadata.accessory);
this.wokaResources = this.getMappedResources(metadata.woka);
this.colorResources = this.getMappedResources(metadata.body);
this.eyesResources = this.getMappedResources(metadata.eyes);
this.hairResources = this.getMappedResources(metadata.hair);
this.clothesResources = this.getMappedResources(metadata.clothes);
this.hatsResources = this.getMappedResources(metadata.hat);
this.accessoriesResources = this.getMappedResources(metadata.accessory);
this.LAYERS = [
this.COLOR_RESOURCES,
this.EYES_RESOURCES,
this.HAIR_RESOURCES,
this.CLOTHES_RESOURCES,
this.HATS_RESOURCES,
this.ACCESSORIES_RESOURCES,
this.layers = [
this.colorResources,
this.eyesResources,
this.hairResources,
this.clothesResources,
this.hatsResources,
this.accessoriesResources,
];
this.mapWokaCollections(metadata.woka);
}
private getMappedResources(category: WokaPartType): BodyResourceDescriptionListInterface {
@@ -103,6 +115,19 @@ export class PlayerTextures {
}
return resources;
}
private mapWokaCollections(category: WokaPartType): void {
if (!category) {
return;
}
for (const collection of category.collections) {
const textures: BodyResourceDescriptionInterface[] = [];
for (const texture of collection.textures) {
textures.push({ id: texture.id, img: texture.url });
}
this.wokaCollections.set(collection.name, textures);
}
}
}
export const OBJECTS: BodyResourceDescriptionInterface[] = [
front/src/Phaser/Game/CameraManager.ts
-2
View File
@@ -97,7 +97,6 @@ export class CameraManager extends Phaser.Events.EventEmitter {
});
return;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.camera.pan(setTo.x, setTo.y, duration, Easing.SineEaseOut, true, (camera, progress, x, y) => {
if (this.cameraMode === CameraMode.Positioned) {
this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
@@ -139,7 +138,6 @@ export class CameraManager extends Phaser.Events.EventEmitter {
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
return;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.camera.pan(focusOn.x, focusOn.y, duration, Easing.SineEaseOut, true, (camera, progress, x, y) => {
this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
if (progress === 1) {
front/src/Phaser/Game/GameScene.ts
+1 -8
View File
@@ -177,8 +177,6 @@ export class GameScene extends DirtyScene {
private localVolumeStoreUnsubscriber: Unsubscriber | undefined;
private followUsersColorStoreUnsubscribe!: Unsubscriber;
private currentPlayerGroupIdStoreUnsubscribe!: Unsubscriber;
private privacyShutdownStoreUnsubscribe!: Unsubscriber;
private userIsJitsiDominantSpeakerStoreUnsubscriber!: Unsubscriber;
private jitsiParticipantsCountStoreUnsubscriber!: Unsubscriber;
@@ -1593,7 +1591,6 @@ export class GameScene extends DirtyScene {
this.emoteUnsubscribe();
this.emoteMenuUnsubscribe();
this.followUsersColorStoreUnsubscribe();
this.privacyShutdownStoreUnsubscribe();
this.biggestAvailableAreaStoreUnsubscribe();
this.userIsJitsiDominantSpeakerStoreUnsubscriber();
this.jitsiParticipantsCountStoreUnsubscriber();
@@ -1733,7 +1730,6 @@ export class GameScene extends DirtyScene {
private createCollisionWithPlayer() {
//add collision layer
for (const phaserLayer of this.gameMap.phaserLayers) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.physics.add.collider(this.CurrentPlayer, phaserLayer, (object1: GameObject, object2: GameObject) => {
//this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name)
});
@@ -1784,11 +1780,9 @@ export class GameScene extends DirtyScene {
emoteMenuStore.openEmoteMenu();
}
});
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OVER, (pointer: Phaser.Input.Pointer) => {
this.CurrentPlayer.pointerOverOutline(0x365dff);
});
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OUT, (pointer: Phaser.Input.Pointer) => {
this.CurrentPlayer.pointerOutOutline();
});
@@ -1890,8 +1884,7 @@ export class GameScene extends DirtyScene {
break;
}
default: {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const tmp: never = event;
const _exhaustiveCheck: never = event;
}
}
}
front/src/Phaser/Helpers/TexturesHelper.ts
+1 -1
View File
@@ -28,7 +28,7 @@ export class TexturesHelper {
});
} catch (error) {
rt.destroy();
throw new Error("Could not get the snapshot");
throw new Error("Could not get the snapshot: " + error);
}
}
front/src/Phaser/Login/AbstractCharacterScene.ts
+4
View File
@@ -11,4 +11,8 @@ export abstract class AbstractCharacterScene extends ResizableScene {
this.playerTextures = new PlayerTextures();
this.superLoad = new SuperLoaderPlugin(this);
}
preload() {
this.input.dragDistanceThreshold = 10;
}
}
front/src/Phaser/Login/CustomizeScene.ts
+1 -2
View File
@@ -54,7 +54,7 @@ export class CustomizeScene extends AbstractCharacterScene {
}
public preload(): void {
this.input.dragDistanceThreshold = 10;
super.preload();
this.load.image("iconClothes", "/resources/icons/icon_clothes.png");
this.load.image("iconAccessory", "/resources/icons/icon_accessory.png");
@@ -112,7 +112,6 @@ export class CustomizeScene extends AbstractCharacterScene {
this.onResize();
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
public update(time: number, dt: number): void {
this.customWokaPreviewer.update();
}
front/src/Phaser/Login/EmptyScene.ts
-1
View File
@@ -13,6 +13,5 @@ export class EmptyScene extends Scene {
create() {}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
update(time: number, delta: number): void {}
}
front/src/Phaser/Login/EnableCameraScene.ts
-1
View File
@@ -24,7 +24,6 @@ export class EnableCameraScene extends ResizableScene {
public onResize(): void {}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
update(time: number, delta: number): void {}
public login(): void {
front/src/Phaser/Login/EntryScene.ts
+10 -24
View File
@@ -1,12 +1,12 @@
import { gameManager } from "../Game/GameManager";
import { Scene } from "phaser";
import { ErrorScene } from "../Reconnecting/ErrorScene";
import { WAError } from "../Reconnecting/WAError";
import { waScaleManager } from "../Services/WaScaleManager";
import { ReconnectingTextures } from "../Reconnecting/ReconnectingScene";
import LL from "../../i18n/i18n-svelte";
import { get } from "svelte/store";
import { localeDetector } from "../../i18n/locales";
import { errorScreenStore } from "../../Stores/ErrorScreenStore";
import { isErrorApiData } from "../../Messages/JsonMessages/ErrorApiData";
import { connectionManager } from "../../Connexion/ConnectionManager";
export const EntrySceneName = "EntryScene";
@@ -47,27 +47,13 @@ export class EntryScene extends Scene {
this.scene.start(nextSceneName);
})
.catch((err) => {
const $LL = get(LL);
if (err.response && err.response.status == 404) {
ErrorScene.showError(
new WAError(
$LL.error.accessLink.title(),
$LL.error.accessLink.subTitle(),
$LL.error.accessLink.details()
),
this.scene
);
} else if (err.response && err.response.status == 403) {
ErrorScene.showError(
new WAError(
$LL.error.connectionRejected.title(),
$LL.error.connectionRejected.subTitle({
error: err.response.data ? ". \n\r \n\r" + `${err.response.data}` : "",
}),
$LL.error.connectionRejected.details()
),
this.scene
);
const errorType = isErrorApiData.safeParse(err?.response?.data);
if (errorType.success) {
if (errorType.data.type === "unauthorized") {
void connectionManager.logout();
} else if (errorType.data.type === "redirect") {
window.location.assign(errorType.data.urlToRedirect);
} else errorScreenStore.setError(err?.response?.data);
} else {
ErrorScene.showError(err, this.scene);
}
front/src/Phaser/Login/LoginScene.ts
-1
View File
@@ -49,7 +49,6 @@ export class LoginScene extends ResizableScene {
loginSceneVisibleStore.set(false);
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
update(time: number, delta: number): void {}
public onResize(): void {}
front/src/Phaser/Login/SelectCharacterMobileScene.ts
-58
View File
@@ -1,58 +0,0 @@
import { SelectCharacterScene } from "./SelectCharacterScene";
export class SelectCharacterMobileScene extends SelectCharacterScene {
create() {
super.create();
this.onResize();
this.selectedRectangle.destroy();
}
protected defineSetupPlayer(num: number) {
const deltaX = 30;
const deltaY = 2;
let [playerX, playerY] = this.getCharacterPosition();
let playerVisible = true;
let playerScale = 1.5;
let playerOpacity = 1;
if (this.currentSelectUser !== num) {
playerVisible = false;
}
if (num === this.currentSelectUser + 1) {
playerY -= deltaY;
playerX += deltaX;
playerScale = 0.8;
playerOpacity = 0.6;
playerVisible = true;
}
if (num === this.currentSelectUser + 2) {
playerY -= deltaY;
playerX += deltaX * 2;
playerScale = 0.8;
playerOpacity = 0.6;
playerVisible = true;
}
if (num === this.currentSelectUser - 1) {
playerY -= deltaY;
playerX -= deltaX;
playerScale = 0.8;
playerOpacity = 0.6;
playerVisible = true;
}
if (num === this.currentSelectUser - 2) {
playerY -= deltaY;
playerX -= deltaX * 2;
playerScale = 0.8;
playerOpacity = 0.6;
playerVisible = true;
}
return { playerX, playerY, playerScale, playerOpacity, playerVisible };
}
/**
* Returns pixel position by on column and row number
*/
protected getCharacterPosition(): [number, number] {
return [this.game.renderer.width / 2, this.game.renderer.height / 3];
}
}
front/src/Phaser/Login/SelectCharacterScene.ts
+198 -190
View File
@@ -1,5 +1,4 @@
import { gameManager } from "../Game/GameManager";
import Rectangle = Phaser.GameObjects.Rectangle;
import { EnableCameraSceneName } from "./EnableCameraScene";
import { CustomizeSceneName } from "./CustomizeScene";
import { localUserStore } from "../../Connexion/LocalUserStore";
@@ -13,25 +12,25 @@ import { PinchManager } from "../UserInput/PinchManager";
import { selectCharacterSceneVisibleStore } from "../../Stores/SelectCharacterStore";
import { waScaleManager } from "../Services/WaScaleManager";
import { analyticsClient } from "../../Administration/AnalyticsClient";
import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
import { customizeAvailableStore } from "../../Stores/SelectCharacterSceneStore";
import { customizeAvailableStore, selectedCollection } from "../../Stores/SelectCharacterSceneStore";
import { DraggableGrid } from "@home-based-studio/phaser3-utils";
import { WokaSlot } from "../Components/SelectWoka/WokaSlot";
import { DraggableGridEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/DraggableGrid";
import { wokaList } from "../../Messages/JsonMessages/PlayerTextures";
//todo: put this constants in a dedicated file
export const SelectCharacterSceneName = "SelectCharacterScene";
export class SelectCharacterScene extends AbstractCharacterScene {
protected readonly nbCharactersPerRow = 6;
protected selectedPlayer!: Phaser.Physics.Arcade.Sprite | null; // null if we are selecting the "customize" option
protected players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
protected selectedWoka!: Phaser.GameObjects.Sprite | null; // null if we are selecting the "customize" option
protected playerModels!: BodyResourceDescriptionInterface[];
protected selectedRectangle!: Rectangle;
protected currentSelectUser = 0;
protected pointerClicked: boolean = false;
protected pointerTimer: number = 0;
private charactersDraggableGrid!: DraggableGrid;
private collectionKeys!: string[];
private selectedCollectionIndex!: number;
private selectedGridItemIndex?: number;
private gridRowsCount: number = 1;
protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
private loader: Loader;
@@ -44,7 +43,8 @@ export class SelectCharacterScene extends AbstractCharacterScene {
this.playerTextures = new PlayerTextures();
}
preload() {
public preload() {
super.preload();
const wokaMetadataKey = "woka-list" + gameManager.currentStartedRoom.href;
this.cache.json.remove(wokaMetadataKey);
@@ -67,228 +67,236 @@ export class SelectCharacterScene extends AbstractCharacterScene {
}
)
.catch((e) => console.error(e));
this.playerModels = loadAllDefaultModels(this.load, this.playerTextures);
this.lazyloadingAttempt = false;
//this function must stay at the end of preload function
this.loader.addLoader();
}
create() {
public create() {
waScaleManager.zoomModifier = 1;
this.selectedWoka = null;
this.selectedCollectionIndex = 0;
this.collectionKeys = this.playerTextures.getCollectionsKeys();
selectedCollection.set(this.getSelectedCollectionName());
customizeAvailableStore.set(this.isCustomizationAvailable());
selectCharacterSceneVisibleStore.set(true);
this.events.addListener("wake", () => {
waScaleManager.saveZoom();
waScaleManager.zoomModifier = isMediaBreakpointUp("md") ? 2 : 1;
selectCharacterSceneVisibleStore.set(true);
});
if (touchScreenManager.supportTouchScreen) {
new PinchManager(this);
}
waScaleManager.saveZoom();
waScaleManager.zoomModifier = isMediaBreakpointUp("md") ? 2 : 1;
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xffffff);
this.selectedRectangle.setDepth(2);
/*create user*/
this.createCurrentPlayer();
this.input.keyboard.on("keyup-ENTER", () => {
return this.nextSceneToCameraScene();
this.charactersDraggableGrid = new DraggableGrid(this, {
position: { x: 0, y: 0 },
maskPosition: { x: 0, y: 0 },
dimension: { x: 485, y: 165 },
horizontal: true,
repositionToCenter: true,
itemsInRow: 1,
margin: {
left: ((innerWidth - 200) / waScaleManager.getActualZoom()) * 0.5,
right: ((innerWidth - 200) / waScaleManager.getActualZoom()) * 0.5,
},
spacing: 5,
debug: {
showDraggableSpace: false,
},
});
this.input.keyboard.on("keydown-RIGHT", () => {
this.moveToRight();
});
this.input.keyboard.on("keydown-LEFT", () => {
this.moveToLeft();
});
this.input.keyboard.on("keydown-UP", () => {
this.moveToUp();
});
this.input.keyboard.on("keydown-DOWN", () => {
this.moveToDown();
});
this.bindEventHandlers();
this.onResize();
}
public nextSceneToCameraScene(): void {
if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
if (this.selectedWoka !== null && !areCharacterLayersValid([this.selectedWoka.texture.key])) {
return;
}
if (!this.selectedPlayer) {
if (!this.selectedWoka) {
return;
}
analyticsClient.validationWoka("SelectWoka");
gameManager.setCharacterLayers([this.selectedWoka.texture.key]);
this.selectedWoka = null;
this.scene.stop(SelectCharacterSceneName);
waScaleManager.restoreZoom();
gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
gameManager.tryResumingGame(EnableCameraSceneName);
this.players = [];
selectCharacterSceneVisibleStore.set(false);
this.events.removeListener("wake");
}
public nextSceneToCustomizeScene(): void {
if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
if (this.selectedWoka !== null && !areCharacterLayersValid([this.selectedWoka.texture.key])) {
return;
}
this.selectedWoka = null;
this.scene.sleep(SelectCharacterSceneName);
waScaleManager.restoreZoom();
this.scene.run(CustomizeSceneName);
selectCharacterSceneVisibleStore.set(false);
}
createCurrentPlayer(): void {
for (let i = 0; i < this.playerModels.length; i++) {
const playerResource = this.playerModels[i];
//check already exist texture
if (this.players.find((c) => c.texture.key === playerResource.id)) {
continue;
}
const [middleX, middleY] = this.getCharacterPosition();
const player = this.physics.add.sprite(middleX, middleY, playerResource.id, 0);
this.setUpPlayer(player, i);
this.anims.create({
key: playerResource.id,
frames: this.anims.generateFrameNumbers(playerResource.id, { start: 0, end: 11 }),
frameRate: 8,
repeat: -1,
});
player.setInteractive().on("pointerdown", () => {
if (this.pointerClicked) {
return;
}
if (this.currentSelectUser === i) {
return;
}
//To not trigger two time the pointerdown events :
// We set a boolean to true so that pointerdown events does nothing when the boolean is true
// We set a timer that we decrease in update function to not trigger the pointerdown events twice
this.pointerClicked = true;
this.pointerTimer = 250;
this.currentSelectUser = i;
this.moveUser();
});
this.players.push(player);
}
if (this.currentSelectUser >= this.players.length) {
this.currentSelectUser = 0;
}
this.selectedPlayer = this.players[this.currentSelectUser];
this.selectedPlayer.play(this.playerModels[this.currentSelectUser].id);
}
protected moveUser() {
for (let i = 0; i < this.players.length; i++) {
const player = this.players[i];
this.setUpPlayer(player, i);
}
this.updateSelectedPlayer();
}
public moveToLeft() {
if (this.currentSelectUser === 0) {
return;
}
this.currentSelectUser -= 1;
this.moveUser();
}
public moveToRight() {
if (this.currentSelectUser === this.players.length - 1) {
return;
}
this.currentSelectUser += 1;
this.moveUser();
}
protected moveToUp() {
if (this.currentSelectUser < this.nbCharactersPerRow) {
return;
}
this.currentSelectUser -= this.nbCharactersPerRow;
this.moveUser();
}
protected moveToDown() {
if (this.currentSelectUser + this.nbCharactersPerRow > this.players.length - 1) {
return;
}
this.currentSelectUser += this.nbCharactersPerRow;
this.moveUser();
}
protected defineSetupPlayer(num: number) {
const deltaX = 32;
const deltaY = 32;
let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
playerX = playerX - deltaX * 2.5 + deltaX * (num % this.nbCharactersPerRow); // calcul position on line users
playerY = playerY - deltaY * 2 + deltaY * Math.floor(num / this.nbCharactersPerRow); // calcul position on column users
const playerVisible = true;
const playerScale = 1;
const playerOpacity = 1;
// if selected
if (num === this.currentSelectUser) {
this.selectedRectangle.setX(playerX);
this.selectedRectangle.setY(playerY);
}
return { playerX, playerY, playerScale, playerOpacity, playerVisible };
}
protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number) {
const { playerX, playerY, playerScale, playerOpacity, playerVisible } = this.defineSetupPlayer(num);
player.setBounce(0.2);
player.setCollideWorldBounds(false);
player.setVisible(playerVisible);
player.setScale(playerScale, playerScale);
player.setAlpha(playerOpacity);
player.setX(playerX);
player.setY(playerY);
}
/**
* Returns pixel position by on column and row number
*/
protected getCharacterPosition(): [number, number] {
return [this.game.renderer.width / 2, this.game.renderer.height / 2.5];
}
protected updateSelectedPlayer(): void {
this.selectedPlayer?.anims?.pause(this.selectedPlayer?.anims.currentAnim.frames[0]);
const player = this.players[this.currentSelectUser];
player?.play(this.playerModels[this.currentSelectUser].id);
this.selectedPlayer = player;
localUserStore.setPlayerCharacterIndex(this.currentSelectUser);
}
update(time: number, delta: number): void {
// pointerTimer is set to 250 when pointerdown events is trigger
// After 250ms, pointerClicked is set to false and the pointerdown events can be trigger again
this.pointerTimer -= delta;
if (this.pointerTimer <= 0) {
this.pointerClicked = false;
}
public update(): void {
if (this.lazyloadingAttempt) {
//re-render players list
this.createCurrentPlayer();
this.moveUser();
this.lazyloadingAttempt = false;
}
}
public onResize(): void {
//move position of user
this.moveUser();
this.handleCharactersGridOnResize();
}
public getSelectedCollectionName(): string {
return this.collectionKeys[this.selectedCollectionIndex] ?? "";
}
public getCollectionKeysSize(): number {
return this.playerTextures.getCollectionsKeys().length;
}
public selectPreviousCollection(): void {
this.selectedCollectionIndex = (this.selectedCollectionIndex + 1) % this.collectionKeys.length;
selectedCollection.set(this.getSelectedCollectionName());
this.populateGrid();
}
public selectNextCollection(): void {
if (this.collectionKeys.length === 1) {
return;
}
this.selectedCollectionIndex =
this.selectedCollectionIndex - 1 < 0 ? this.collectionKeys.length - 1 : this.selectedCollectionIndex - 1;
selectedCollection.set(this.getSelectedCollectionName());
this.populateGrid();
}
private handleCharactersGridOnResize(): void {
const ratio = innerHeight / innerWidth;
this.gridRowsCount = ratio > 1 || innerHeight > 900 ? 2 : 1;
const gridHeight = this.gridRowsCount === 2 ? 210 : 105;
const gridWidth = innerWidth / waScaleManager.getActualZoom();
const gridPos = {
x: this.cameras.main.worldView.x + this.cameras.main.width / 2,
y: this.cameras.main.worldView.y + this.cameras.main.height * (ratio > 1 ? 0.5 : 0.575),
};
try {
this.charactersDraggableGrid.changeDraggableSpacePosAndSize(
gridPos,
{ x: gridWidth, y: gridHeight },
gridPos
);
} catch (error) {
console.warn(error);
}
this.charactersDraggableGrid.setItemsInRow(this.gridRowsCount);
this.populateGrid();
}
private populateGrid(): void {
const wokaDimension = 100;
this.selectedWoka = null;
this.charactersDraggableGrid.clearAllItems();
const textures = this.playerTextures.getWokaCollectionTextures(this.getSelectedCollectionName());
for (let i = 0; i < textures.length; i += 1) {
const slot = new WokaSlot(this, textures[i].id).setDisplaySize(wokaDimension, wokaDimension);
this.charactersDraggableGrid.addItem(slot);
}
this.charactersDraggableGrid.moveContentToBeginning();
void this.charactersDraggableGrid.moveContentTo(0.5, textures.length * 50);
}
private bindEventHandlers(): void {
this.bindKeyboardEventHandlers();
this.events.addListener("wake", () => {
selectCharacterSceneVisibleStore.set(true);
});
this.input.keyboard.on("keyup-ENTER", () => {
return this.nextSceneToCameraScene();
});
this.charactersDraggableGrid.on(DraggableGridEvent.ItemClicked, (item: WokaSlot) => {
this.selectGridItem(item);
});
}
private selectGridItem(item: WokaSlot): void {
this.selectedGridItemIndex = this.charactersDraggableGrid.getAllItems().indexOf(item);
if (this.charactersDraggableGrid.getDraggableSpaceWidth() < this.charactersDraggableGrid.getGridSize().x) {
void this.charactersDraggableGrid.centerOnItem(this.selectedGridItemIndex, 500);
}
this.charactersDraggableGrid.getAllItems().forEach((slot) => (slot as WokaSlot).select(false));
this.selectedWoka?.stop()?.setFrame(0);
this.selectedWoka = item.getSprite();
const wokaKey = this.selectedWoka.texture.key;
this.createWokaAnimation(wokaKey);
this.selectedWoka.play(wokaKey);
item.select(true);
}
private bindKeyboardEventHandlers(): void {
this.input.keyboard.on("keyup-SPACE", () => {
this.selectNextCollection();
});
this.input.keyboard.on("keydown-LEFT", () => {
this.selectNextGridItem(true, true);
});
this.input.keyboard.on("keydown-RIGHT", () => {
this.selectNextGridItem(false, true);
});
this.input.keyboard.on("keydown-UP", () => {
this.selectNextGridItem(true, false);
});
this.input.keyboard.on("keydown-DOWN", () => {
this.selectNextGridItem(false, false);
});
this.input.keyboard.on("keydown-W", () => {
this.selectNextGridItem(true, false);
});
this.input.keyboard.on("keydown-S", () => {
this.selectNextGridItem(false, false);
});
this.input.keyboard.on("keydown-A", () => {
this.selectNextGridItem(true, true);
});
this.input.keyboard.on("keydown-D", () => {
this.selectNextGridItem(false, true);
});
}
private selectNextGridItem(previous: boolean = false, horizontally: boolean): void {
if (this.selectedGridItemIndex === undefined) {
this.selectedGridItemIndex = 0;
}
if (
previous
? this.selectedGridItemIndex > 0
: this.selectedGridItemIndex < this.charactersDraggableGrid.getAllItems().length - 1
) {
// NOTE: getItemsInRowCount() not working properly. Fix on lib side needed
const jump = horizontally ? this.gridRowsCount : 1;
const item = this.charactersDraggableGrid.getAllItems()[
this.selectedGridItemIndex + (previous ? -jump : jump)
] as WokaSlot;
if (!item) {
return;
}
this.selectedGridItemIndex += previous ? -1 : 1;
this.selectGridItem(item);
}
}
private createWokaAnimation(key: string): void {
this.anims.create({
key,
frames: this.anims.generateFrameNumbers(key, { start: 0, end: 11 }),
frameRate: 8,
repeat: -1,
});
}
private isCustomizationAvailable(): boolean {
front/src/Phaser/Reconnecting/ErrorScene.ts
-7
View File
@@ -3,7 +3,6 @@ import Image = Phaser.GameObjects.Image;
import Sprite = Phaser.GameObjects.Sprite;
import Text = Phaser.GameObjects.Text;
import ScenePlugin = Phaser.Scenes.ScenePlugin;
import { WAError } from "./WAError";
import Axios from "axios";
export const ErrorSceneName = "ErrorScene";
@@ -88,12 +87,6 @@ export class ErrorScene extends Phaser.Scene {
title: "An error occurred",
subTitle: error,
});
} else if (error instanceof WAError) {
scene.start(ErrorSceneName, {
title: error.title,
subTitle: error.subTitle,
message: error.details,
});
} else if (Axios.isAxiosError(error) && error.response) {
// Axios HTTP error
// client received an error response (5xx, 4xx)
front/src/Phaser/Reconnecting/WAError.ts
+47 -8
View File
@@ -1,26 +1,65 @@
export class WAError extends Error {
private _type: string;
private _code: string;
private _title: string;
private _subTitle: string;
private _subtitle: string;
private _details: string;
private _timeToRetry: number;
private _canRetryManual: boolean;
private _urlToRedirect: string;
private _buttonTitle: string;
constructor(title: string, subTitle: string, details: string) {
super(title + " - " + subTitle + " - " + details);
constructor(
type: string,
code: string,
title: string,
subtitle: string,
details: string,
timeToRetry: number,
canRetryManual: boolean,
urlToRedirect: string,
buttonTitle: string
) {
super(title + " - " + subtitle + " - " + details);
this._type = type;
this._code = code;
this._title = title;
this._subTitle = subTitle;
this._subtitle = subtitle;
this._details = details;
this._timeToRetry = timeToRetry;
this._canRetryManual = canRetryManual;
this._urlToRedirect = urlToRedirect;
this._buttonTitle = buttonTitle;
// Set the prototype explicitly.
Object.setPrototypeOf(this, WAError.prototype);
}
get type(): string {
return this._type;
}
get code(): string {
return this._code;
}
get title(): string {
return this._title;
}
get subTitle(): string {
return this._subTitle;
get subtitle(): string {
return this._subtitle;
}
get details(): string {
return this._details;
}
get timeToRetry(): number {
return this._timeToRetry;
}
get buttonTitle(): string {
return this._buttonTitle;
}
get urlToRedirect(): string {
return this._urlToRedirect;
}
get canRetryManual(): boolean {
return this._canRetryManual;
}
}
front/src/Phaser/UserInput/GameSceneUserInputHandler.ts
+1 -2
View File
@@ -20,7 +20,6 @@ export class GameSceneUserInputHandler implements UserInputHandlerInterface {
gameObjects: Phaser.GameObjects.GameObject[],
deltaX: number,
deltaY: number,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
deltaZ: number
): void {
this.gameScene.zoomByFactor(1 - (deltaY / 53) * 0.1);
@@ -68,7 +67,7 @@ export class GameSceneUserInputHandler implements UserInputHandlerInterface {
this.lastY = pointer.y;
}
public handlePointerDownEvent(pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]): void { }
public handlePointerDownEvent(pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]): void {}
public handleSpaceKeyUpEvent(event: Event): Event {
const activatableManager = this.gameScene.getActivatablesManager();