From 2a51c6e49f0edfa31deedb84f460f35101b20333 Mon Sep 17 00:00:00 2001
From: Paolo Brasolin <paolo.brasolin@eurac.edu>
Date: Wed, 6 Apr 2022 10:18:16 +0200
Subject: [PATCH] feat: #fe make clue size responsive

---
 frontend/src/js/clue.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/js/clue.ts b/frontend/src/js/clue.ts
index 251e9d5..2705fb5 100644
--- a/frontend/src/js/clue.ts
+++ b/frontend/src/js/clue.ts
@@ -3,8 +3,6 @@ import FightScene from "./fight_scene";
 
 import * as Types from "../../../backend/src/types";
 
-const BASE_HEIGHT = 25;
-
 // const HYPERASCENDERS = /[ÄÖÜ]/;
 const ASCENDERS = /[ABCDEFGHIJKLMNOPQRSTUVWXYZbdfhijklstäöüß]/;
 const DESCENDERS = /[AFHJPQYZÄfghjpqsyzß]/;
@@ -16,6 +14,7 @@ class Clue extends Phaser.GameObjects.Sprite {
   scene: FightScene;
   textureKey: string;
   body: Phaser.Physics.Arcade.Body;
+  baseHeight: number;
 
   constructor(scene: FightScene, word: Types.Word) {
     // TODO: set positions
@@ -27,6 +26,8 @@ class Clue extends Phaser.GameObjects.Sprite {
     this.scene = scene;
     this.word = word;
 
+    this.baseHeight = Math.max(this.scene.cameras.main.width * 0.035, 25); // max(3.5vw,25px)
+
     // TODO: we could be smarter and fully leverage caching, but meh.
     this.textureKey = `${word.id}-${Date.now()}`;
     this.loadTexture();
@@ -53,7 +54,7 @@ class Clue extends Phaser.GameObjects.Sprite {
   applyTexture() {
     this.setTexture(this.textureKey);
     const scale =
-      (this.estimateWordHeight() * BASE_HEIGHT) /
+      (this.estimateWordHeight() * this.baseHeight) /
       this.texture.getSourceImage().height;
     this.setScale(scale);
   }
-- 
GitLab