little cleanup
This commit is contained in:
parent
9647f93cc2
commit
d6d2448058
@ -57,7 +57,7 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
|
||||
[CustomWokaBodyPart.Hat]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, "").setVisible(false),
|
||||
};
|
||||
|
||||
this.background = this.scene.add.image(0, 0, "floorTexture1");
|
||||
this.background = this.scene.add.image(0, 0, "floorTexture0");
|
||||
this.frame = this.scene.add.graphics();
|
||||
this.turnIcon = this.scene.add
|
||||
.image(this.background.displayWidth * 0.35, this.background.displayHeight * 0.35, "iconTurn")
|
||||
|
@ -59,7 +59,7 @@ export class WokaBodyPartSlot extends GridItem {
|
||||
|
||||
this.selected = this.config.selected ?? false;
|
||||
|
||||
this.background = this.background = this.scene.add.image(0, 0, `floorTexture1`);
|
||||
this.background = this.background = this.scene.add.image(0, 0, `floorTexture0`);
|
||||
this.frame = this.scene.add.graphics();
|
||||
this.drawFrame();
|
||||
this.add([
|
||||
|
@ -18,11 +18,7 @@ import {
|
||||
CustomWokaPreviewerConfig,
|
||||
} from "../Components/CustomizeWoka/CustomWokaPreviewer";
|
||||
import { DraggableGrid } from "@home-based-studio/phaser3-utils";
|
||||
import {
|
||||
WokaBodyPartSlot,
|
||||
WokaBodyPartSlotConfig,
|
||||
WokaBodyPartSlotEvent,
|
||||
} from "../Components/CustomizeWoka/WokaBodyPartSlot";
|
||||
import { WokaBodyPartSlot, WokaBodyPartSlotConfig } from "../Components/CustomizeWoka/WokaBodyPartSlot";
|
||||
import { DraggableGridEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/DraggableGrid";
|
||||
import { Button } from "../Components/Ui/Button";
|
||||
import { wokaList } from "../../Messages/JsonMessages/PlayerTextures";
|
||||
@ -99,74 +95,21 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
}
|
||||
|
||||
public create(): void {
|
||||
TexturesHelper.createFloorRectangleTexture(this, "floorTexture1", 50, 50, "floorTiles", 0);
|
||||
TexturesHelper.createFloorRectangleTexture(this, "floorTexture2", 50, 50, "floorTiles", 1);
|
||||
TexturesHelper.createFloorRectangleTexture(this, "floorTexture3", 50, 50, "floorTiles", 2);
|
||||
TexturesHelper.createFloorRectangleTexture(this, "floorTexture4", 50, 50, "floorTiles", 3);
|
||||
this.customWokaPreviewer = new CustomWokaPreviewer(
|
||||
this,
|
||||
0,
|
||||
0,
|
||||
this.getCustomWokaPreviewerConfig()
|
||||
).setDisplaySize(200, 200);
|
||||
|
||||
this.bodyPartsDraggableGrid = 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 / waScaleManager.getActualZoom() - this.SLOT_DIMENSION) * 0.5,
|
||||
right: (innerWidth / waScaleManager.getActualZoom() - this.SLOT_DIMENSION) * 0.5,
|
||||
},
|
||||
spacing: 5,
|
||||
debug: {
|
||||
showDraggableSpace: false,
|
||||
},
|
||||
});
|
||||
|
||||
this.bodyPartsDraggableGridLeftShadow = this.add
|
||||
.image(0, this.cameras.main.worldView.y + this.cameras.main.height, "gridEdgeShadow")
|
||||
.setAlpha(1, 0, 1, 0)
|
||||
.setOrigin(0, 0.5);
|
||||
|
||||
this.bodyPartsDraggableGridRightShadow = this.add
|
||||
.image(
|
||||
this.cameras.main.worldView.x + this.cameras.main.width,
|
||||
this.cameras.main.worldView.y + this.cameras.main.height,
|
||||
"gridEdgeShadow"
|
||||
)
|
||||
.setAlpha(1, 0, 1, 0)
|
||||
.setFlipX(true)
|
||||
.setOrigin(1, 0.5);
|
||||
|
||||
this.bodyPartsButtons = {
|
||||
[CustomWokaBodyPart.Accessory]: new IconButton(
|
||||
this,
|
||||
0,
|
||||
0,
|
||||
this.getDefaultIconButtonConfig("iconAccessory")
|
||||
),
|
||||
[CustomWokaBodyPart.Body]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconBody")),
|
||||
[CustomWokaBodyPart.Clothes]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconClothes")),
|
||||
[CustomWokaBodyPart.Eyes]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconEyes")),
|
||||
[CustomWokaBodyPart.Hair]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconHair")),
|
||||
[CustomWokaBodyPart.Hat]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconHat")),
|
||||
};
|
||||
this.createSlotBackgroundTextures();
|
||||
this.initializeCustomWokaPreviewer();
|
||||
this.initializeBodyPartsDraggableGrid();
|
||||
this.initializeEdgeShadows();
|
||||
this.initializeBodyPartsButtons();
|
||||
this.initializeRandomizeButton();
|
||||
this.initializeFinishButton();
|
||||
|
||||
this.selectedBodyPartType = CustomWokaBodyPart.Body;
|
||||
this.bodyPartsButtons.Body.select();
|
||||
|
||||
this.initializeRandomizeButton();
|
||||
this.initializeFinishButton();
|
||||
this.bindEventHandlers();
|
||||
|
||||
this.refreshPlayerCurrentOutfit();
|
||||
|
||||
this.onResize();
|
||||
|
||||
this.bindEventHandlers();
|
||||
}
|
||||
|
||||
public update(time: number, dt: number): void {
|
||||
@ -208,6 +151,73 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
this.scene.run(SelectCharacterSceneName);
|
||||
}
|
||||
|
||||
private createSlotBackgroundTextures(): void {
|
||||
for (let i = 0; i < 4; i += 1) {
|
||||
TexturesHelper.createFloorRectangleTexture(this, `floorTexture${i}`, 50, 50, "floorTiles", i);
|
||||
}
|
||||
}
|
||||
|
||||
private initializeCustomWokaPreviewer(): void {
|
||||
this.customWokaPreviewer = new CustomWokaPreviewer(
|
||||
this,
|
||||
0,
|
||||
0,
|
||||
this.getCustomWokaPreviewerConfig()
|
||||
).setDisplaySize(200, 200);
|
||||
}
|
||||
|
||||
private initializeBodyPartsDraggableGrid(): void {
|
||||
this.bodyPartsDraggableGrid = 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 / waScaleManager.getActualZoom() - this.SLOT_DIMENSION) * 0.5,
|
||||
right: (innerWidth / waScaleManager.getActualZoom() - this.SLOT_DIMENSION) * 0.5,
|
||||
},
|
||||
spacing: 5,
|
||||
debug: {
|
||||
showDraggableSpace: false,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private initializeEdgeShadows(): void {
|
||||
this.bodyPartsDraggableGridLeftShadow = this.add
|
||||
.image(0, this.cameras.main.worldView.y + this.cameras.main.height, "gridEdgeShadow")
|
||||
.setAlpha(1, 0, 1, 0)
|
||||
.setOrigin(0, 0.5);
|
||||
|
||||
this.bodyPartsDraggableGridRightShadow = this.add
|
||||
.image(
|
||||
this.cameras.main.worldView.x + this.cameras.main.width,
|
||||
this.cameras.main.worldView.y + this.cameras.main.height,
|
||||
"gridEdgeShadow"
|
||||
)
|
||||
.setAlpha(1, 0, 1, 0)
|
||||
.setFlipX(true)
|
||||
.setOrigin(1, 0.5);
|
||||
}
|
||||
|
||||
private initializeBodyPartsButtons(): void {
|
||||
this.bodyPartsButtons = {
|
||||
[CustomWokaBodyPart.Accessory]: new IconButton(
|
||||
this,
|
||||
0,
|
||||
0,
|
||||
this.getDefaultIconButtonConfig("iconAccessory")
|
||||
),
|
||||
[CustomWokaBodyPart.Body]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconBody")),
|
||||
[CustomWokaBodyPart.Clothes]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconClothes")),
|
||||
[CustomWokaBodyPart.Eyes]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconEyes")),
|
||||
[CustomWokaBodyPart.Hair]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconHair")),
|
||||
[CustomWokaBodyPart.Hat]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconHat")),
|
||||
};
|
||||
}
|
||||
|
||||
private getDefaultIconButtonConfig(iconTextureKey: string): IconButtonConfig {
|
||||
return {
|
||||
iconTextureKey,
|
||||
@ -456,6 +466,7 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
|
||||
private bindEventHandlers(): void {
|
||||
this.bindKeyboardEventHandlers();
|
||||
|
||||
this.events.addListener("wake", () => {
|
||||
waScaleManager.saveZoom();
|
||||
waScaleManager.zoomModifier = isMediaBreakpointUp("md") ? 3 : 1;
|
||||
@ -489,20 +500,6 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
});
|
||||
}
|
||||
|
||||
private selectBodyPartType(bodyPart: CustomWokaBodyPart): void {
|
||||
this.selectedBodyPartType = bodyPart;
|
||||
this.deselectAllButtons();
|
||||
const button = this.bodyPartsButtons[bodyPart];
|
||||
button.select(true);
|
||||
this.populateGrid();
|
||||
const selectedGridItem = this.selectGridItem();
|
||||
if (!selectedGridItem) {
|
||||
return;
|
||||
}
|
||||
this.bodyPartsDraggableGrid.moveContentToBeginning();
|
||||
this.centerGridOnItem(selectedGridItem);
|
||||
}
|
||||
|
||||
private bindKeyboardEventHandlers(): void {
|
||||
this.input.keyboard.on("keyup-ENTER", () => {
|
||||
this.nextSceneToCamera();
|
||||
@ -536,6 +533,20 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
});
|
||||
}
|
||||
|
||||
private selectBodyPartType(bodyPart: CustomWokaBodyPart): void {
|
||||
this.selectedBodyPartType = bodyPart;
|
||||
this.deselectAllButtons();
|
||||
const button = this.bodyPartsButtons[bodyPart];
|
||||
button.select(true);
|
||||
this.populateGrid();
|
||||
const selectedGridItem = this.selectGridItem();
|
||||
if (!selectedGridItem) {
|
||||
return;
|
||||
}
|
||||
this.bodyPartsDraggableGrid.moveContentToBeginning();
|
||||
this.centerGridOnItem(selectedGridItem);
|
||||
}
|
||||
|
||||
private setNewBodyPart(bodyPartIndex: number) {
|
||||
this.changeOutfitPart(bodyPartIndex);
|
||||
this.refreshPlayerCurrentOutfit();
|
||||
@ -611,7 +622,7 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
}
|
||||
|
||||
private randomizeOutfit(): void {
|
||||
for (let i = 0; i < 6; i += 1) {
|
||||
for (let i = 0; i < this.selectedLayers.length; i += 1) {
|
||||
this.selectedLayers[i] = Math.floor(Math.random() * this.layers[i].length);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user