fix: changed `GameHud` position and size (#289)

* fix: clamp game hud margin

* feat: add opacity to game hud

* fix: update GameHud size & position

* fix: calculate game hud size

lib/game/view/pinball_game_page.dart

@@ -110,6 +110,7 @@ class PinballGameLoadedView extends StatelessWidget {
     final gameWidgetWidth = MediaQuery.of(context).size.height * 9 / 16;
     final screenWidth = MediaQuery.of(context).size.width;
     final leftMargin = (screenWidth / 2) - (gameWidgetWidth / 1.8);
+    final clampedMargin = leftMargin > 0 ? leftMargin : 0.0;
 
     return StartGameListener(
       game: game,
@@ -132,8 +133,8 @@ class PinballGameLoadedView extends StatelessWidget {
             ),
           ),
           Positioned(
-            top: 16,
+            top: 0,
-            left: leftMargin,
+            left: clampedMargin,
             child: Visibility(
               visible: isPlaying,
               child: const GameHud(),

lib/game/view/widgets/game_hud.dart

@@ -23,16 +23,17 @@ class _GameHudState extends State<GameHud> {
 
   /// Ratio from sprite frame (width 500, height 144) w / h = ratio
   static const _ratio = 3.47;
-  static const _width = 265.0;
 
   @override
   Widget build(BuildContext context) {
     final isGameOver = context.select((GameBloc bloc) => bloc.state.isGameOver);
 
+    final height = _calculateHeight(context);
+
     return _ScoreViewDecoration(
       child: SizedBox(
-        height: _width / _ratio,
+        height: height,
-        width: _width,
+        width: height * _ratio,
         child: BlocListener<GameBloc, GameState>(
           listenWhen: (previous, current) =>
               previous.bonusHistory.length != current.bonusHistory.length,
@@ -53,6 +54,17 @@ class _GameHudState extends State<GameHud> {
       ),
     );
   }
+
+  double _calculateHeight(BuildContext context) {
+    final height = MediaQuery.of(context).size.height * 0.09;
+    if (height > 90) {
+      return 90;
+    } else if (height < 60) {
+      return 60;
+    } else {
+      return height;
+    }
+  }
 }
 
 class _ScoreViewDecoration extends StatelessWidget {

lib/game/view/widgets/score_view.dart

@@ -18,7 +18,7 @@ class ScoreView extends StatelessWidget {
     return Padding(
       padding: const EdgeInsets.symmetric(
         horizontal: 16,
-        vertical: 8,
+        vertical: 2,
       ),
       child: AnimatedSwitcher(
         duration: kThemeAnimationDuration,
@@ -71,9 +71,11 @@ class _ScoreText extends StatelessWidget {
   Widget build(BuildContext context) {
     final score = context.select((GameBloc bloc) => bloc.state.displayScore);
 
-    return Text(
+    return FittedBox(
-      score.formatScore(),
+      child: Text(
-      style: Theme.of(context).textTheme.headline1,
+        score.formatScore(),
+        style: Theme.of(context).textTheme.headline2,
+      ),
     );
   }
 }