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

entirely different approach to layout

Browse Source
This commit is contained in:
Piotr 'pwh' Hanusiak 2022-03-16 13:25:39 +01:00
parent 43bac6c5cf
commit fb020e22c7
4 changed files with 157 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,12 +10,9 @@ export enum CustomWokaBodyPart {
}
export interface CustomWokaPreviewerConfig {
width: number;
height: number;
color: number;
borderThickness: number;
borderColor: number;
bodyPartsScaleModifier: number;
bodyPartsOffsetX: number;
}
@ -28,30 +25,20 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
private config: CustomWokaPreviewerConfig;
public readonly SIZE: number = 50;
constructor(scene: Phaser.Scene, x: number, y: number, config: CustomWokaPreviewerConfig) {
super(scene, x, y);
this.config = config;
this.sprites = {
[CustomWokaBodyPart.Accessory]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Body]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Clothes]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Eyes]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Hair]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Hat]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Accessory]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
[CustomWokaBodyPart.Body]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
[CustomWokaBodyPart.Clothes]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
[CustomWokaBodyPart.Eyes]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
[CustomWokaBodyPart.Hair]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
[CustomWokaBodyPart.Hat]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
};
this.updateSprite("accessory1", CustomWokaBodyPart.Accessory);
@ -61,8 +48,9 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
this.updateSprite("hair3", CustomWokaBodyPart.Hair);
this.updateSprite("hat2", CustomWokaBodyPart.Hat);
this.background = this.createBackground();
this.setSize(this.config.width, this.config.height);
this.background = this.scene.add.graphics();
this.drawBackground();
this.setSize(this.SIZE, this.SIZE);
this.add([
this.background,
@ -86,18 +74,13 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
this.moving = moving;
}
private createBackground(): Phaser.GameObjects.Graphics {
const background = this.scene.add.graphics();
background.fillStyle(0xffffff);
background.lineStyle(this.config.borderThickness, 0xadafbc);
private drawBackground(): void {
this.background.clear();
this.background.fillStyle(0xffffff);
this.background.lineStyle(this.config.borderThickness, 0xadafbc);
const width = this.config.width;
const height = this.config.height;
background.fillRect(-width / 2, -height / 2, width, height);
background.strokeRect(-width / 2, -height / 2, width, height);
return background;
this.background.fillRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE);
this.background.strokeRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE);
}
private animate(): void {

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

@ -2,8 +2,6 @@ import { GridItem } from "@home-based-studio/phaser3-utils";
import { GridItemEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/GridItem";
export interface WokaBodyPartSlotConfig {
width: number;
height: number;
color: number;
borderThickness: number;
borderColor: number;
@ -24,6 +22,8 @@ export class WokaBodyPartSlot extends GridItem {
private selected: boolean;
public readonly SIZE: number = 50;
constructor(scene: Phaser.Scene, x: number, y: number, config: WokaBodyPartSlotConfig) {
super(scene, undefined, { x, y });
@ -34,19 +34,20 @@ export class WokaBodyPartSlot extends GridItem {
this.selected = this.config.selected ?? false;
this.background = this.scene.add
.rectangle(0, 0, this.config.width, this.config.height, this.config.color)
.rectangle(0, 0, this.SIZE, this.SIZE, this.config.color)
.setStrokeStyle(this.config.borderThickness, this.config.borderColor);
this.bodyImage = this.scene.add
.image(offsetX, offsetY, config.bodyImageKey ?? `body${Math.floor(Math.random() * 33) + 1}`)
.setScale(2);
this.bodyImage = this.scene.add.image(
offsetX,
offsetY,
config.bodyImageKey ?? `body${Math.floor(Math.random() * 33) + 1}`
);
this.image = this.scene.add
.image(offsetX, offsetY, config.imageKey ?? "")
.setScale(2)
.setVisible(config.imageKey !== undefined);
this.setSize(this.config.width + this.config.borderThickness, this.config.height + this.config.borderThickness);
this.setSize(this.SIZE + this.config.borderThickness, this.SIZE + this.config.borderThickness);
this.add([this.background, this.bodyImage, this.image]);

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

@ -14,7 +14,11 @@ import { get } from "svelte/store";
import { analyticsClient } from "../../Administration/AnalyticsClient";
import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
import { CustomWokaBodyPart, CustomWokaPreviewer } from "../Components/CustomizeWoka/CustomWokaPreviewer";
import {
CustomWokaBodyPart,
CustomWokaPreviewer,
CustomWokaPreviewerConfig,
} from "../Components/CustomizeWoka/CustomWokaPreviewer";
import { DraggableGrid } from "@home-based-studio/phaser3-utils";
import { WokaBodyPartSlot, WokaBodyPartSlotConfig } from "../Components/CustomizeWoka/WokaBodyPartSlot";
@ -117,15 +121,8 @@ export class CustomizeScene extends AbstractCharacterScene {
this.updateSelectedLayer();
}
this.customWokaPreviewer = new CustomWokaPreviewer(this, 0, 0, {
width: 150,
height: 200,
color: 0xffffff,
borderThickness: 5,
borderColor: 0xadafbc,
bodyPartsScaleModifier: 4,
bodyPartsOffsetX: -2,
});
this.customWokaPreviewer = new CustomWokaPreviewer(this, 0, 0, this.getCustomWokaPreviewerConfig());
this.bodyPartsDraggableGrid = new DraggableGrid(this, {
position: { x: 0, y: 0 },
maskPosition: { x: 0, y: 0 },
@ -139,32 +136,53 @@ export class CustomizeScene extends AbstractCharacterScene {
},
spacing: 5,
debug: {
showDraggableSpace: false,
showDraggableSpace: true,
},
});
const defaultWokaBodyPartSlotConfig: WokaBodyPartSlotConfig = {
width: 72.5,
height: 72.5,
color: 0xffffff,
borderThickness: 2.5,
borderColor: 0xadafbc,
borderSelectedColor: 0x00ffff,
offsetX: -3,
offsetY: -2,
};
for (let i = 0; i < 50; i += 1) {
this.bodyPartsDraggableGrid.addItem(new WokaBodyPartSlot(this, 0, 0, defaultWokaBodyPartSlotConfig));
this.bodyPartsDraggableGrid.addItem(
new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig(isVertical))
);
}
this.bodyPartsSlots = {
[CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(this, 220, 50, defaultWokaBodyPartSlotConfig),
[CustomWokaBodyPart.Body]: new WokaBodyPartSlot(this, 220, 130, defaultWokaBodyPartSlotConfig),
[CustomWokaBodyPart.Accessory]: new WokaBodyPartSlot(this, 220, 210, defaultWokaBodyPartSlotConfig),
[CustomWokaBodyPart.Hat]: new WokaBodyPartSlot(this, 520, 50, defaultWokaBodyPartSlotConfig),
[CustomWokaBodyPart.Clothes]: new WokaBodyPartSlot(this, 520, 130, defaultWokaBodyPartSlotConfig),
[CustomWokaBodyPart.Eyes]: new WokaBodyPartSlot(this, 520, 210, defaultWokaBodyPartSlotConfig),
[CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(
this,
0,
0,
this.getDefaultWokaBodyPartSlotConfig(isVertical)
),
[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.onResize();
@ -201,15 +219,14 @@ export class CustomizeScene extends AbstractCharacterScene {
public onResize(): void {
const isVertical = this.cameras.main.height > this.cameras.main.width;
console.log(`isVertical: ${isVertical}`);
this.moveLayers();
this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
this.repositionCustomWokaPreviewer(isVertical);
this.repositionBodyPartSlots(isVertical);
this.repositionBodyPartsDraggableGrid(isVertical);
this.handleCustomWokaPreviewerOnResize(isVertical);
this.handleBodyPartSlotsOnResize(isVertical);
this.handleBodyPartsDraggableGridOnResize(isVertical);
}
public nextSceneToCamera() {
@ -239,22 +256,47 @@ export class CustomizeScene extends AbstractCharacterScene {
this.scene.run(SelectCharacterSceneName);
}
private repositionCustomWokaPreviewer(isVertical: boolean): void {
private handleCustomWokaPreviewerOnResize(isVertical: boolean): void {
const boxDimension = Math.min(innerWidth * 0.3, innerHeight * 0.3) / waScaleManager.getActualZoom();
const boxScale = boxDimension / this.customWokaPreviewer.SIZE;
this.customWokaPreviewer.setScale(boxScale);
this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
this.customWokaPreviewer.y =
this.cameras.main.worldView.y +
this.customWokaPreviewer.displayHeight * 0.5 +
this.cameras.main.height * 0.1;
this.customWokaPreviewer.y = this.customWokaPreviewer.displayHeight * 0.5 + 10;
}
private repositionBodyPartSlots(isVertical: boolean): void {
const slotWidth = this.bodyPartsSlots.Accessory.displayWidth;
private handleBodyPartSlotsOnResize(isVertical: boolean): void {
const slotDimension = Math.min(innerWidth * 0.15, innerHeight * 0.15) / waScaleManager.getActualZoom();
const slotScale = slotDimension / this.customWokaPreviewer.SIZE;
const left = this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5 - slotWidth;
const right = this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5 + slotWidth;
const top = this.customWokaPreviewer.y - this.customWokaPreviewer.displayHeight * 0.5;
const middle = this.customWokaPreviewer.y;
const bottom = this.customWokaPreviewer.y + this.customWokaPreviewer.displayHeight * 0.5;
for (const part in this.bodyPartsSlots) {
this.bodyPartsSlots[part as CustomWokaBodyPart].setScale(slotScale);
}
const slotSize = this.bodyPartsSlots.Accessory.displayHeight;
if (isVertical) {
const left = this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5;
const right = this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5;
const middle = this.customWokaPreviewer.x;
const top = this.customWokaPreviewer.y + this.customWokaPreviewer.displayHeight * 0.5;
const bottom = top + slotSize;
this.bodyPartsSlots.Hair.setPosition(left, top);
this.bodyPartsSlots.Hat.setPosition(middle, top);
this.bodyPartsSlots.Eyes.setPosition(right, top);
this.bodyPartsSlots.Body.setPosition(left, bottom);
this.bodyPartsSlots.Clothes.setPosition(middle, bottom);
this.bodyPartsSlots.Accessory.setPosition(right, bottom);
return;
}
const left = this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5 - slotSize;
const right = this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5 + slotSize;
const top = 0 + slotSize * 0.5 + 10;
const middle = top + slotSize + 10;
const bottom = middle + slotSize + 10;
this.bodyPartsSlots.Hair.setPosition(left, top);
this.bodyPartsSlots.Body.setPosition(left, middle);
@ -264,16 +306,49 @@ export class CustomizeScene extends AbstractCharacterScene {
this.bodyPartsSlots.Eyes.setPosition(right, bottom);
}
private repositionBodyPartsDraggableGrid(isVertical: boolean): void {
private handleBodyPartsDraggableGridOnResize(isVertical: boolean): void {
const gridHeight = (innerHeight * 0.35) / waScaleManager.getActualZoom();
const gridWidth = (innerWidth * 0.7) / 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 -
this.bodyPartsDraggableGrid.displayHeight * 0.5 -
this.cameras.main.height * 0.02,
y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5 - 10,
};
this.bodyPartsDraggableGrid.changeDraggableSpacePosAndSize(gridPos, { x: 485, y: 165 }, gridPos);
this.bodyPartsDraggableGrid.changeDraggableSpacePosAndSize(gridPos, { x: gridWidth, y: gridHeight }, gridPos);
const slotDimension = Math.min(innerWidth * 0.15, innerHeight * 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)
);
}
}
private getCustomWokaPreviewerConfig(): CustomWokaPreviewerConfig {
return {
color: 0xffffff,
borderThickness: 2.5,
borderColor: 0xadafbc,
bodyPartsOffsetX: -1,
};
}
private getDefaultWokaBodyPartSlotConfig(isVertical: boolean): WokaBodyPartSlotConfig {
return {
color: 0xffffff,
borderThickness: this.countZoom(isVertical ? 4 : 4),
borderColor: 0xadafbc,
borderSelectedColor: 0x00ffff,
offsetX: this.countZoom(isVertical ? -4 : -3),
offsetY: this.countZoom(isVertical ? -3 : -2),
};
}
private countZoom(value: number): number {
return Math.floor(value / waScaleManager.getActualZoom());
}
private bindEventHandlers(): void {

4
front/src/Phaser/Services/WaScaleManager.ts
View File

@ -128,6 +128,10 @@ export class WaScaleManager {
this.applyNewSize();
}
public getActualZoom(): number {
return this.actualZoom;
}
/**
* This is used to scale back the ui components to counter-act the zoom.
*/