select and center on currently selected item
This commit is contained in:
parent
21e84064b9
commit
4c93060f85
@ -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,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 {
|
||||
|
Loading…
Reference in New Issue
Block a user