From 8f614fccbb5565acc7ef05a8ce8d78dc73e16592 Mon Sep 17 00:00:00 2001
From: Paolo Brasolin <paolo.brasolin@eurac.edu>
Date: Wed, 6 Apr 2022 15:19:11 +0200
Subject: [PATCH] feat: #fe parametric input padding for hud
---
frontend/src/js/hud.ts | 29 +++++++++++++++++++----------
1 file changed, 19 insertions(+), 10 deletions(-)
diff --git a/frontend/src/js/hud.ts b/frontend/src/js/hud.ts
index b0da2f0..e957366 100644
--- a/frontend/src/js/hud.ts
+++ b/frontend/src/js/hud.ts
@@ -23,8 +23,9 @@ const INPUT_BASE_TEXT_STYLE = {
interface HudOptions {
statsPadding: number;
statsFontSize: string;
- inputPosition: number;
+ inputPadding: number;
inputFontSize: string;
+ inputPosition: number;
}
export default class HUD {
@@ -38,10 +39,11 @@ export default class HUD {
constructor(scene: Phaser.Scene, options?: HudOptions) {
this.scene = scene;
this.options = options || {
- statsPadding: Math.min(this.scene.cameras.main.width * 0.01, 10), // min(1vw,10px)
- statsFontSize: "max(3vw,20px)", // never smaller than 20px
+ statsPadding: 10,
+ statsFontSize: "22px",
+ inputPadding: 4,
+ inputFontSize: "60px",
inputPosition: 0.5,
- inputFontSize: "min(12vw,60px)", // always fit ~12 chars comfortably in width
};
this.input = this.initInput(scene);
this.score = this.initScore(scene);
@@ -55,14 +57,22 @@ export default class HUD {
scene.cameras.main.width / 2,
scene.cameras.main.height * this.options.inputPosition,
"",
- {
- ...INPUT_BASE_TEXT_STYLE,
- fontSize: this.options.inputFontSize,
- },
+ this.inputTextStyle(),
)
.setOrigin(0.5, 0.5);
}
+ inputTextStyle(): Phaser.Types.GameObjects.Text.TextStyle {
+ return {
+ ...INPUT_BASE_TEXT_STYLE,
+ fontSize: this.options.inputFontSize,
+ padding: {
+ x: this.options.inputPadding,
+ y: this.options.inputPadding,
+ },
+ };
+ }
+
statsTextStyle(): Phaser.Types.GameObjects.Text.TextStyle {
return {
...STATS_BASE_TEXT_STYLE,
@@ -127,8 +137,7 @@ export default class HUD {
this.scene.cameras.main.height * this.options.inputPosition,
input,
{
- ...INPUT_BASE_TEXT_STYLE,
- fontSize: this.options.inputFontSize,
+ ...this.inputTextStyle(),
color: color,
},
)
--
GitLab