Skip to content
Snippets Groups Projects
Commit 987a1f1e authored by Paolo.Brasolin's avatar Paolo.Brasolin
Browse files

feat: #fe streamline UI size calculations

parent 8f614fcc
No related branches found
No related tags found
No related merge requests found
...@@ -22,6 +22,18 @@ interface InputStatus { ...@@ -22,6 +22,18 @@ interface InputStatus {
ended_at_gmtm: number; ended_at_gmtm: number;
} }
interface UIDimensions {
kbdHeight: number;
statsPadding: number;
statsFontSize: string;
statsHeight: number;
inputPadding: number;
inputFontSize: string;
inputHeight: number;
inputPosition: number;
cluesBounds: Phaser.Geom.Rectangle;
}
export default class FightScene extends Phaser.Scene { export default class FightScene extends Phaser.Scene {
foes: Array<Foe>; foes: Array<Foe>;
player: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody; player: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody;
...@@ -33,6 +45,7 @@ export default class FightScene extends Phaser.Scene { ...@@ -33,6 +45,7 @@ export default class FightScene extends Phaser.Scene {
health: number; health: number;
hud: HUD; hud: HUD;
gameTime: Phaser.Time.TimerEvent; gameTime: Phaser.Time.TimerEvent;
uiDimensions: UIDimensions;
constructor() { constructor() {
super("fight"); super("fight");
...@@ -77,14 +90,60 @@ export default class FightScene extends Phaser.Scene { ...@@ -77,14 +90,60 @@ export default class FightScene extends Phaser.Scene {
init() { init() {
this.score = 0; this.score = 0;
this.health = 100; this.health = 100;
this.hud = new HUD(this);
this.uiDimensions = this.initUiDimensions();
this.hud = new HUD(this, {
statsPadding: this.uiDimensions.statsPadding,
statsFontSize: this.uiDimensions.statsFontSize,
inputPadding: this.uiDimensions.inputPadding,
inputFontSize: this.uiDimensions.inputFontSize,
inputPosition: this.uiDimensions.inputPosition,
});
this.hud.setHealth(this.health); this.hud.setHealth(this.health);
this.hud.setScore(this.score); this.hud.setScore(this.score);
this.hud.setClock(0); this.hud.setClock(0);
this.events.on("pause", this.concealClues.bind(this)); this.events.on("pause", this.concealClues.bind(this));
this.events.on("resume", this.uncoverClues.bind(this)); this.events.on("resume", this.uncoverClues.bind(this));
} }
initUiDimensions(): UIDimensions {
const ch = this.cameras.main.height;
const cw = this.cameras.main.width;
const vh = ch * 0.01;
const vw = cw * 0.01;
const kbdHeight = Math.min(40 * vh, 48 * vw); // see max-height of .hg-theme-default
const statsPadding = Math.min(1 * vw, 10);
const statsFontSize = "max(3vw,20px)"; // never smaller than 20px for readability
const statsHeight = Math.max(3 * vw, 20) * 1.4 + 2 * statsPadding;
const inputPadding = Math.min(0.5 * vw, 5);
const inputFontSize = "min(12vw,60px)"; // always fit ~12 chars comfortably in width
const inputHeight = Math.min(12 * vw, 60) * 1.4 + 2 * inputPadding;
const inputPosition = (ch - kbdHeight - 0.5 * inputHeight) / ch;
const cluesBounds = new Phaser.Geom.Rectangle(
5,
statsHeight,
cw - 2 * 15,
ch - statsHeight - kbdHeight - inputHeight,
);
return {
kbdHeight,
statsPadding,
statsFontSize,
statsHeight,
inputPadding,
inputFontSize,
inputHeight,
inputPosition,
cluesBounds,
};
}
async create() { async create() {
this.gameTime = this.time.addEvent({ this.gameTime = this.time.addEvent({
delay: Number.MAX_SAFE_INTEGER, delay: Number.MAX_SAFE_INTEGER,
...@@ -246,16 +305,9 @@ export default class FightScene extends Phaser.Scene { ...@@ -246,16 +305,9 @@ export default class FightScene extends Phaser.Scene {
} }
initCluesGroup() { initCluesGroup() {
const pad = 4;
const bounds = new Phaser.Geom.Rectangle(
pad,
pad,
this.cameras.main.width - 2 * pad,
this.cameras.main.height / 2,
);
this.cluesGroup = this.physics.add.group({ this.cluesGroup = this.physics.add.group({
collideWorldBounds: true, collideWorldBounds: true,
customBoundsRectangle: bounds, customBoundsRectangle: this.uiDimensions.cluesBounds,
bounceY: 0.2, bounceY: 0.2,
dragY: 180, dragY: 180,
}); });
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment