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

select and center on currently selected item

Browse Source
This commit is contained in:
Piotr 'pwh' Hanusiak 2022-03-30 11:16:58 +02:00
parent 21e84064b9
commit 4c93060f85
2 changed files with 49 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts
View File

@ -1,6 +1,5 @@
import { GridItem } from "@home-based-studio/phaser3-utils";
import { GridItemEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/GridItem";
import { MathUtils } from "../../../Utils/MathUtils";
export interface WokaBodyPartSlotConfig {
color: number;
@ -52,12 +51,12 @@ export class WokaBodyPartSlot extends GridItem {
}
this.bodyImage = this.scene.add
.image(this.config.offsetX, this.config.offsetY, config.bodyImageKey ?? "")
.setVisible(config.imageKey !== undefined);
.image(this.config.offsetX, this.config.offsetY, this.config.bodyImageKey ?? "")
.setVisible(this.config.imageKey !== undefined);
this.image = this.scene.add
.image(this.config.offsetX, this.config.offsetY, config.imageKey ?? "")
.setVisible(config.bodyImageKey !== undefined);
.image(this.config.offsetX, this.config.offsetY, this.config.imageKey ?? "")
.setVisible(this.config.bodyImageKey !== undefined);
this.setSize(WokaBodyPartSlot.SIZE, WokaBodyPartSlot.SIZE);
@ -71,6 +70,10 @@ export class WokaBodyPartSlot extends GridItem {
this.scene.add.existing(this);
}
public getContentData(): { bodyImageKey?: string; key?: string } {
return { bodyImageKey: this.config.bodyImageKey, key: this.config.imageKey };
}
public setTextures(bodyTextureKey?: string, imageTextureKey?: string): void {
this.setBodyTexture(bodyTextureKey);
this.setImageTexture(imageTextureKey);
@ -80,6 +83,7 @@ export class WokaBodyPartSlot extends GridItem {
this.bodyImage.setVisible(textureKey !== undefined && textureKey !== "");
if (textureKey) {
this.bodyImage.setTexture(textureKey, frame);
this.config.bodyImageKey = textureKey;
}
}
@ -87,6 +91,7 @@ export class WokaBodyPartSlot extends GridItem {
this.image.setVisible(textureKey !== undefined && textureKey !== "");
if (textureKey) {
this.image.setTexture(textureKey, frame);
this.config.imageKey = textureKey;
}
}

45
front/src/Phaser/Login/CustomizeScene.ts
View File

@ -45,6 +45,7 @@ export class CustomizeScene extends AbstractCharacterScene {
private selectedLayers: number[] = [0, 0, 0, 0, 0, 0];
private layers: BodyResourceDescriptionInterface[][] = [];
private selectedBodyPartType?: CustomWokaBodyPart;
private selectedItemTextureKey?: string;
protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
@ -98,7 +99,6 @@ export class CustomizeScene extends AbstractCharacterScene {
}
public create(): void {
this.selectedBodyPartType = CustomWokaBodyPart.Body;
this.customWokaPreviewer = new CustomWokaPreviewer(
this,
0,
@ -178,6 +178,10 @@ export class CustomizeScene extends AbstractCharacterScene {
}),
};
this.selectedBodyPartType = CustomWokaBodyPart.Body;
this.selectedItemTextureKey = this.layers[CustomWokaBodyPartOrder.Body][0].id;
this.bodyPartsSlots.Body.select();
this.initializeRandomizeButton();
this.initializeFinishButton();
@ -399,8 +403,10 @@ export class CustomizeScene extends AbstractCharacterScene {
}
this.populateGrid();
this.bodyPartsDraggableGrid.moveContentToBeginning();
void this.bodyPartsDraggableGrid.moveContentTo(0.5, 500);
const selectedGridItem = this.selectGridItem();
if (selectedGridItem) {
this.centerGridOnItem(selectedGridItem);
}
}
private handleRandomizeButtonOnResize(): void {
@ -474,9 +480,19 @@ export class CustomizeScene extends AbstractCharacterScene {
slot.on(WokaBodyPartSlotEvent.Clicked, (selected: boolean) => {
if (!selected) {
this.selectedBodyPartType = bodyPart as CustomWokaBodyPart;
this.selectedItemTextureKey = slot.getContentData().key ?? slot.getContentData().bodyImageKey;
this.deselectAllSlots();
slot.select(true);
this.populateGrid();
if (!this.selectedItemTextureKey) {
return;
}
const selectedGridItem = this.selectGridItem();
if (!selectedGridItem) {
return;
}
this.bodyPartsDraggableGrid.moveContentToBeginning();
this.centerGridOnItem(selectedGridItem);
} else {
this.selectedBodyPartType = undefined;
slot.select(false);
@ -494,6 +510,25 @@ export class CustomizeScene extends AbstractCharacterScene {
});
}
private selectGridItem(): WokaBodyPartSlot | undefined {
const items = this.bodyPartsDraggableGrid.getAllItems() as WokaBodyPartSlot[];
let item: WokaBodyPartSlot | undefined;
if (this.selectedBodyPartType === CustomWokaBodyPart.Body) {
item = items.find((item) => item.getContentData().bodyImageKey === this.selectedItemTextureKey);
} else {
item = items.find((item) => item.getContentData().key === this.selectedItemTextureKey);
}
item?.select();
return item;
}
private centerGridOnItem(item: WokaBodyPartSlot, duration: number = 500): void {
void this.bodyPartsDraggableGrid.centerOnItem(
this.bodyPartsDraggableGrid.getAllItems().indexOf(item),
duration
);
}
private randomizeOutfit(): void {
for (let i = 0; i < 6; i += 1) {
this.selectedLayers[i] = Math.floor(Math.random() * this.layers[i].length);
@ -514,7 +549,7 @@ export class CustomizeScene extends AbstractCharacterScene {
const bodyPartsLayer = this.layers[CustomWokaBodyPartOrder[this.selectedBodyPartType]];
this.bodyPartsDraggableGrid.clearAllItems();
this.clearGrid();
for (let i = 0; i < bodyPartsLayer.length; i += 1) {
const slot = new WokaBodyPartSlot(
this,
@ -538,8 +573,6 @@ export class CustomizeScene extends AbstractCharacterScene {
}
this.bodyPartsDraggableGrid.addItem(slot);
}
this.bodyPartsDraggableGrid.moveContentToBeginning();
void this.bodyPartsDraggableGrid.moveContentTo(0.5, 500);
}
private clearGrid(): void {