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

populating grid

Browse Source
This commit is contained in:
Piotr 'pwh' Hanusiak 2022-03-17 13:58:54 +01:00
parent 701c5f65cd
commit a3fcf2dc3f
3 changed files with 85 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts
View File

@ -52,13 +52,6 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
[CustomWokaBodyPart.Hat]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, "").setVisible(false), [CustomWokaBodyPart.Hat]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, "").setVisible(false),
}; };
// this.updateSprite("accessory1", CustomWokaBodyPart.Accessory);
// this.updateSprite("body1", CustomWokaBodyPart.Body);
// this.updateSprite("clothes4", CustomWokaBodyPart.Clothes);
// this.updateSprite("eyes5", CustomWokaBodyPart.Eyes);
// this.updateSprite("hair3", CustomWokaBodyPart.Hair);
// this.updateSprite("hat2", CustomWokaBodyPart.Hat);
this.background = this.scene.add.graphics(); this.background = this.scene.add.graphics();
this.drawBackground(); this.drawBackground();
this.setSize(this.SIZE, this.SIZE); this.setSize(this.SIZE, this.SIZE);

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

@ -13,6 +13,10 @@ export interface WokaBodyPartSlotConfig {
selected?: boolean; selected?: boolean;
} }
export enum WokaBodyPartSlotEvent {
Clicked = "WokaBodyPartSlotEvent:Clicked",
}
export class WokaBodyPartSlot extends GridItem { export class WokaBodyPartSlot extends GridItem {
private background: Phaser.GameObjects.Rectangle; private background: Phaser.GameObjects.Rectangle;
private bodyImage: Phaser.GameObjects.Image; private bodyImage: Phaser.GameObjects.Image;
@ -92,8 +96,7 @@ export class WokaBodyPartSlot extends GridItem {
super.bindEventHandlers(); super.bindEventHandlers();
this.on(GridItemEvent.Clicked, () => { this.on(GridItemEvent.Clicked, () => {
this.select(!this.selected); this.emit(WokaBodyPartSlotEvent.Clicked, this.selected);
// this.emit(CategoryGridItemEvent.Selected, this.categoryName);
}); });
} }

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

@ -19,7 +19,11 @@ import {
CustomWokaPreviewerConfig, CustomWokaPreviewerConfig,
} from "../Components/CustomizeWoka/CustomWokaPreviewer"; } from "../Components/CustomizeWoka/CustomWokaPreviewer";
import { DraggableGrid } from "@home-based-studio/phaser3-utils"; import { DraggableGrid } from "@home-based-studio/phaser3-utils";
import { WokaBodyPartSlot, WokaBodyPartSlotConfig } from "../Components/CustomizeWoka/WokaBodyPartSlot"; import {
WokaBodyPartSlot,
WokaBodyPartSlotConfig,
WokaBodyPartSlotEvent,
} from "../Components/CustomizeWoka/WokaBodyPartSlot";
export const CustomizeSceneName = "CustomizeScene"; export const CustomizeSceneName = "CustomizeScene";
@ -36,6 +40,8 @@ export class CustomizeScene extends AbstractCharacterScene {
protected lazyloadingAttempt = true; //permit to update texture loaded after renderer protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
private isVertical: boolean = false;
private loader: Loader; private loader: Loader;
constructor() { constructor() {
@ -89,10 +95,9 @@ export class CustomizeScene extends AbstractCharacterScene {
} }
public create(): void { public create(): void {
this.isVertical = this.cameras.main.width / this.cameras.main.height < 0.75;
console.log(this.layers); console.log(this.layers);
const isVertical = isMediaBreakpointUp("md");
this.customWokaPreviewer = new CustomWokaPreviewer(this, 0, 0, this.getCustomWokaPreviewerConfig()); this.customWokaPreviewer = new CustomWokaPreviewer(this, 0, 0, this.getCustomWokaPreviewerConfig());
this.bodyPartsDraggableGridBackground = this.add.rectangle(0, 0, 485, 165, 0xf9f9f9); this.bodyPartsDraggableGridBackground = this.add.rectangle(0, 0, 485, 165, 0xf9f9f9);
@ -115,42 +120,12 @@ export class CustomizeScene extends AbstractCharacterScene {
this.bodyPartsDraggableGridForeground = this.add.rectangle(0, 0, 485, 165, 0xffffff, 0); this.bodyPartsDraggableGridForeground = this.add.rectangle(0, 0, 485, 165, 0xffffff, 0);
this.bodyPartsSlots = { this.bodyPartsSlots = {
[CustomWokaBodyPart.Hair]: new WokaBodyPartSlot( [CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig()),
this, [CustomWokaBodyPart.Body]: new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig()),
0, [CustomWokaBodyPart.Accessory]: new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig()),
0, [CustomWokaBodyPart.Hat]: new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig()),
this.getDefaultWokaBodyPartSlotConfig(isVertical) [CustomWokaBodyPart.Clothes]: new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig()),
), [CustomWokaBodyPart.Eyes]: new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig()),
[CustomWokaBodyPart.Body]: new WokaBodyPartSlot(
this,
0,
0,
this.getDefaultWokaBodyPartSlotConfig(isVertical)
),
[CustomWokaBodyPart.Accessory]: new WokaBodyPartSlot(
this,
0,
0,
this.getDefaultWokaBodyPartSlotConfig(isVertical)
),
[CustomWokaBodyPart.Hat]: new WokaBodyPartSlot(
this,
0,
0,
this.getDefaultWokaBodyPartSlotConfig(isVertical)
),
[CustomWokaBodyPart.Clothes]: new WokaBodyPartSlot(
this,
0,
0,
this.getDefaultWokaBodyPartSlotConfig(isVertical)
),
[CustomWokaBodyPart.Eyes]: new WokaBodyPartSlot(
this,
0,
0,
this.getDefaultWokaBodyPartSlotConfig(isVertical)
),
}; };
this.setPlayerCurrentOutfit(); this.setPlayerCurrentOutfit();
@ -165,11 +140,11 @@ export class CustomizeScene extends AbstractCharacterScene {
} }
public onResize(): void { public onResize(): void {
const isVertical = this.cameras.main.width / this.cameras.main.height < 0.75; this.isVertical = this.cameras.main.width / this.cameras.main.height < 0.75;
this.handleCustomWokaPreviewerOnResize(isVertical); this.handleCustomWokaPreviewerOnResize();
this.handleBodyPartSlotsOnResize(isVertical); this.handleBodyPartSlotsOnResize();
this.handleBodyPartsDraggableGridOnResize(isVertical); this.handleBodyPartsDraggableGridOnResize();
} }
public nextSceneToCamera() { public nextSceneToCamera() {
@ -212,25 +187,25 @@ export class CustomizeScene extends AbstractCharacterScene {
} }
} }
private handleCustomWokaPreviewerOnResize(isVertical: boolean): void { private handleCustomWokaPreviewerOnResize(): void {
const slotDimension = const slotDimension =
Math.min(innerWidth * (isVertical ? 0.2 : 0.15), innerHeight * (isVertical ? 0.2 : 0.15)) / Math.min(innerWidth * (this.isVertical ? 0.2 : 0.15), innerHeight * (this.isVertical ? 0.2 : 0.15)) /
waScaleManager.getActualZoom(); waScaleManager.getActualZoom();
const boxDimension = const boxDimension =
Math.min(innerWidth * (isVertical ? 0.4 : 0.3), innerHeight * (isVertical ? 0.4 : 0.3)) / Math.min(innerWidth * (this.isVertical ? 0.4 : 0.3), innerHeight * (this.isVertical ? 0.4 : 0.3)) /
waScaleManager.getActualZoom(); waScaleManager.getActualZoom();
this.customWokaPreviewer.setDisplaySize(boxDimension, boxDimension); this.customWokaPreviewer.setDisplaySize(boxDimension, boxDimension);
this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2; this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
this.customWokaPreviewer.y = isVertical this.customWokaPreviewer.y = this.isVertical
? this.customWokaPreviewer.displayHeight * 0.5 + 20 ? this.customWokaPreviewer.displayHeight * 0.5 + 20
: slotDimension * 1.5 + 20; : slotDimension * 1.5 + 20;
} }
private handleBodyPartSlotsOnResize(isVertical: boolean): void { private handleBodyPartSlotsOnResize(): void {
const slotDimension = const slotDimension =
Math.min(innerWidth * (isVertical ? 0.2 : 0.15), innerHeight * (isVertical ? 0.2 : 0.15)) / Math.min(innerWidth * (this.isVertical ? 0.2 : 0.15), innerHeight * (this.isVertical ? 0.2 : 0.15)) /
waScaleManager.getActualZoom(); waScaleManager.getActualZoom();
for (const part in this.bodyPartsSlots) { for (const part in this.bodyPartsSlots) {
@ -239,7 +214,7 @@ export class CustomizeScene extends AbstractCharacterScene {
const slotSize = this.bodyPartsSlots.Accessory.displayHeight; const slotSize = this.bodyPartsSlots.Accessory.displayHeight;
if (isVertical) { if (this.isVertical) {
const middle = this.customWokaPreviewer.x; const middle = this.customWokaPreviewer.x;
const left = middle - slotSize - 10; const left = middle - slotSize - 10;
const right = middle + slotSize + 10; const right = middle + slotSize + 10;
@ -270,9 +245,9 @@ export class CustomizeScene extends AbstractCharacterScene {
this.bodyPartsSlots.Eyes.setPosition(right, bottom); this.bodyPartsSlots.Eyes.setPosition(right, bottom);
} }
private handleBodyPartsDraggableGridOnResize(isVertical: boolean): void { private handleBodyPartsDraggableGridOnResize(): void {
const gridHeight = (innerHeight * (isVertical ? 0.3 : 0.35)) / waScaleManager.getActualZoom(); const gridHeight = (innerHeight * (this.isVertical ? 0.3 : 0.35)) / waScaleManager.getActualZoom();
const gridWidth = (innerWidth * (isVertical ? 1 : 0.8)) / waScaleManager.getActualZoom(); const gridWidth = (innerWidth * (this.isVertical ? 1 : 0.8)) / waScaleManager.getActualZoom();
const gridPos = { const gridPos = {
x: this.cameras.main.worldView.x + this.cameras.main.width / 2, x: this.cameras.main.worldView.x + this.cameras.main.width / 2,
y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5, y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5,
@ -285,15 +260,6 @@ export class CustomizeScene extends AbstractCharacterScene {
.setStrokeStyle(4, 0xaaaaaa); .setStrokeStyle(4, 0xaaaaaa);
this.bodyPartsDraggableGrid.changeDraggableSpacePosAndSize(gridPos, { x: gridWidth, y: gridHeight }, gridPos); this.bodyPartsDraggableGrid.changeDraggableSpacePosAndSize(gridPos, { x: gridWidth, y: gridHeight }, gridPos);
const slotDimension = (innerHeight * (isVertical ? 0.125 : 0.15)) / waScaleManager.getActualZoom();
const slotScale = slotDimension / this.customWokaPreviewer.SIZE;
// this.bodyPartsDraggableGrid.clearAllItems();
// for (let i = 0; i < 50; i += 1) {
// this.bodyPartsDraggableGrid.addItem(
// new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig(isVertical)).setScale(slotScale)
// );
// }
this.bodyPartsDraggableGrid.moveContentToBeginning(); this.bodyPartsDraggableGrid.moveContentToBeginning();
} }
@ -306,14 +272,14 @@ export class CustomizeScene extends AbstractCharacterScene {
}; };
} }
private getDefaultWokaBodyPartSlotConfig(isVertical: boolean): WokaBodyPartSlotConfig { private getDefaultWokaBodyPartSlotConfig(): WokaBodyPartSlotConfig {
return { return {
color: 0xffffff, color: 0xffffff,
borderThickness: this.countZoom(isVertical ? 4 : 4), borderThickness: this.countZoom(this.isVertical ? 4 : 4),
borderColor: 0xadafbc, borderColor: 0xadafbc,
borderSelectedColor: 0x00ffff, borderSelectedColor: 0x00ffff,
offsetX: this.countZoom(isVertical ? -4 : -3), offsetX: this.countZoom(this.isVertical ? -4 : -3),
offsetY: this.countZoom(isVertical ? -3 : -2), offsetY: this.countZoom(this.isVertical ? -3 : -2),
}; };
} }
@ -336,17 +302,61 @@ export class CustomizeScene extends AbstractCharacterScene {
this.input.keyboard.on("keydown-R", () => { this.input.keyboard.on("keydown-R", () => {
this.randomizeOutfit(); this.randomizeOutfit();
this.clearGrid();
this.deselectAllSlots();
this.setPlayerCurrentOutfit(); this.setPlayerCurrentOutfit();
}); });
for (const bodyPart in CustomWokaBodyPart) {
const slot = this.bodyPartsSlots[bodyPart as CustomWokaBodyPart];
slot.on(WokaBodyPartSlotEvent.Clicked, (selected: boolean) => {
if (!selected) {
this.deselectAllSlots();
slot.select(true);
this.populateGrid(bodyPart as CustomWokaBodyPart);
} else {
slot.select(false);
this.clearGrid();
}
});
}
} }
private randomizeOutfit(): void { private randomizeOutfit(): void {
for (let i = 0; i < 6; i += 1) { for (let i = 0; i < 6; i += 1) {
this.selectedLayers[i] = Math.floor(Math.random() * this.layers[i].length); this.selectedLayers[i] = Math.floor(Math.random() * this.layers[i].length);
this.customWokaPreviewer.updateSprite( }
this.layers[i][Math.floor(Math.random() * this.layers[i].length)].id, }
CustomWokaBodyPart[CustomWokaBodyPartOrder[i] as CustomWokaBodyPart]
); private populateGrid(bodyParts: CustomWokaBodyPart): void {
const slotDimension = (innerHeight * (this.isVertical ? 0.125 : 0.15)) / waScaleManager.getActualZoom();
const slotScale = slotDimension / this.customWokaPreviewer.SIZE;
const bodyPartsLayer = this.layers[CustomWokaBodyPartOrder[bodyParts]];
this.bodyPartsDraggableGrid.clearAllItems();
for (let i = 0; i < bodyPartsLayer.length; i += 1) {
const slot = new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig()).setScale(slotScale);
if (bodyParts === CustomWokaBodyPart.Body) {
slot.setBodyTexture(bodyPartsLayer[i].id);
slot.setImageTexture();
} else {
slot.setBodyTexture(
this.layers[CustomWokaBodyPartOrder.Body][this.selectedLayers[CustomWokaBodyPartOrder.Body]].id
);
slot.setImageTexture(bodyPartsLayer[i].id);
}
this.bodyPartsDraggableGrid.addItem(slot);
}
}
private clearGrid(): void {
this.bodyPartsDraggableGrid.clearAllItems();
}
private deselectAllSlots(): void {
for (const bodyPart in CustomWokaBodyPart) {
this.bodyPartsSlots[bodyPart as CustomWokaBodyPart].select(false);
} }
} }
} }