fix: update GameHud size & position

lib/game/view/pinball_game_page.dart

@@ -140,7 +140,7 @@ class PinballGameLoadedView extends StatelessWidget {
         // TODO(arturplaczek): add Visibility to GameHud based on StartGameBloc
         // status
         Positioned(
-          top: 16,
+          top: 0,
           left: clampedMargin,
           child: const GameHud(),
         ),

lib/game/view/widgets/game_hud.dart

@@ -23,11 +23,12 @@ 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 gameWidgetWidth = MediaQuery.of(context).size.height * 9 / 16;
+    final _width = gameWidgetWidth / 1.6;
 
     return _ScoreViewDecoration(
       child: SizedBox(
@@ -37,17 +38,20 @@ class _GameHudState extends State<GameHud> {
           listenWhen: (previous, current) =>
               previous.bonusHistory.length != current.bonusHistory.length,
           listener: (_, __) => setState(() => showAnimation = true),
-          child: AnimatedSwitcher(
+          child: FittedBox(
-            duration: kThemeAnimationDuration,
+            alignment: Alignment.centerLeft,
-            child: showAnimation && !isGameOver
+            child: AnimatedSwitcher(
-                ? _AnimationView(
+              duration: kThemeAnimationDuration,
-                    onComplete: () {
+              child: showAnimation && !isGameOver
-                      if (mounted) {
+                  ? _AnimationView(
-                        setState(() => showAnimation = false);
+                      onComplete: () {
-                      }
+                        if (mounted) {
-                    },
+                          setState(() => showAnimation = false);
-                  )
+                        }
-                : const ScoreView(),
+                      },
+                    )
+                  : const ScoreView(),
+            ),
           ),
         ),
       ),
@@ -68,30 +72,27 @@ class _ScoreViewDecoration extends StatelessWidget {
     const radius = BorderRadius.all(Radius.circular(12));
     const borderWidth = 5.0;
 
-    return Opacity(
+    return DecoratedBox(
-      opacity: 0.7,
+      decoration: BoxDecoration(
-      child: DecoratedBox(
+        borderRadius: radius,
-        decoration: BoxDecoration(
+        border: Border.all(
-          borderRadius: radius,
+          color: PinballColors.white,
-          border: Border.all(
+          width: borderWidth,
-            color: PinballColors.white,
-            width: borderWidth,
-          ),
-          image: DecorationImage(
-            fit: BoxFit.cover,
-            image: AssetImage(
-              Assets.images.score.miniScoreBackground.path,
-            ),
-          ),
         ),
-        child: Padding(
+        image: DecorationImage(
-          padding: const EdgeInsets.all(borderWidth - 1),
+          fit: BoxFit.cover,
-          child: ClipRRect(
+          image: AssetImage(
-            borderRadius: radius,
+            Assets.images.score.miniScoreBackground.path,
-            child: child,
           ),
         ),
       ),
+      child: Padding(
+        padding: const EdgeInsets.all(borderWidth - 1),
+        child: ClipRRect(
+          borderRadius: radius,
+          child: child,
+        ),
+      ),
     );
   }
 }