fix: apply code review

lib/game/view/pinball_game_page.dart

@@ -114,10 +114,12 @@ class PinballGameLoadedView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final leftMargin = MediaQuery.of(context).size.width * 0.3;
     final isPlaying = context.select(
       (StartGameBloc bloc) => bloc.state.status == StartGameStatus.play,
     );
+    final widthInRatio = MediaQuery.of(context).size.height * 9 / 16;
+    final screenWidth = MediaQuery.of(context).size.width;
+    final leftMargin = (screenWidth / 2) - (widthInRatio / 1.8);
 
     return Stack(
       children: [

lib/game/view/widgets/bonus_animation.dart

@@ -5,7 +5,7 @@ import 'package:pinball/gen/assets.gen.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template bonus_animation}
-/// [Widget] that displays the animation.
+/// [Widget] that displays bonus animations.
 /// {@endtemplate}
 class BonusAnimation extends StatefulWidget {
   /// {@macro bonus_animation}
@@ -42,7 +42,7 @@ class BonusAnimation extends StatefulWidget {
     Key? key,
     VoidCallback? onCompleted,
   }) : this._(
-          Assets.images.bonusAnimation.dino.keyName,
+          Assets.images.bonusAnimation.dinoChomp.keyName,
           onCompleted: onCompleted,
           key: key,
         );
@@ -52,7 +52,7 @@ class BonusAnimation extends StatefulWidget {
     Key? key,
     VoidCallback? onCompleted,
   }) : this._(
-          Assets.images.bonusAnimation.android.keyName,
+          Assets.images.bonusAnimation.androidSpaceship.keyName,
           onCompleted: onCompleted,
           key: key,
         );
@@ -62,7 +62,7 @@ class BonusAnimation extends StatefulWidget {
     Key? key,
     VoidCallback? onCompleted,
   }) : this._(
-          Assets.images.bonusAnimation.google.keyName,
+          Assets.images.bonusAnimation.googleWord.keyName,
           onCompleted: onCompleted,
           key: key,
         );
@@ -77,9 +77,9 @@ class BonusAnimation extends StatefulWidget {
     return [
       Flame.images.load(Assets.images.bonusAnimation.dashNest.keyName),
       Flame.images.load(Assets.images.bonusAnimation.sparkyTurboCharge.keyName),
-      Flame.images.load(Assets.images.bonusAnimation.dino.keyName),
+      Flame.images.load(Assets.images.bonusAnimation.dinoChomp.keyName),
-      Flame.images.load(Assets.images.bonusAnimation.android.keyName),
+      Flame.images.load(Assets.images.bonusAnimation.androidSpaceship.keyName),
-      Flame.images.load(Assets.images.bonusAnimation.google.keyName),
+      Flame.images.load(Assets.images.bonusAnimation.googleWord.keyName),
     ];
   }
 

lib/game/view/widgets/game_hud.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball/gen/gen.dart';
+import 'package:pinball/theme/app_colors.dart';
 
 /// {@template game_hud}
 /// Overlay on the [PinballGame].
@@ -64,18 +65,29 @@ class _ScoreViewDecoration extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ClipRRect(
+    const radius = BorderRadius.all(Radius.circular(12));
-      borderRadius: const BorderRadius.all(Radius.circular(12)),
+    const boardWidth = 5.0;
-      child: DecoratedBox(
+
-        decoration: BoxDecoration(
+    return DecoratedBox(
-          image: DecorationImage(
+      decoration: BoxDecoration(
-            fit: BoxFit.cover,
+        borderRadius: radius,
-            image: AssetImage(
+        border: Border.all(
-              Assets.images.score.miniScoreBackground.path,
+          color: AppColors.white,
-            ),
+          width: boardWidth,
+        ),
+        image: DecorationImage(
+          fit: BoxFit.cover,
+          image: AssetImage(
+            Assets.images.score.miniScoreBackground.path,
           ),
         ),
-        child: child,
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(boardWidth - 1),
+        child: ClipRRect(
+          borderRadius: radius,
+          child: child,
+        ),
       ),
     );
   }

lib/game/view/widgets/round_count_display.dart

@@ -5,7 +5,7 @@ import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball/theme/theme.dart';
 
 /// {@template round_count_display}
-/// [Widget] that displays the count of rounds.
+/// Colored square indicating if a round is available.
 /// {@endtemplate}
 class RoundCountDisplay extends StatelessWidget {
   /// {@macro round_count_display}
@@ -14,6 +14,8 @@ class RoundCountDisplay extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
+    // TODO(arturplaczek): refactor when GameState handle balls and rounds and
+    // select state.rounds property instead of state.ball
     final balls = context.select((GameBloc bloc) => bloc.state.balls);
 
     return Row(

lib/gen/assets.gen.dart

@@ -20,21 +20,21 @@ class $AssetsImagesGen {
 class $AssetsImagesBonusAnimationGen {
   const $AssetsImagesBonusAnimationGen();
 
-  /// File path: assets/images/bonus_animation/android.png
+  /// File path: assets/images/bonus_animation/android_spaceship.png
-  AssetGenImage get android =>
+  AssetGenImage get androidSpaceship => const AssetGenImage(
-      const AssetGenImage('assets/images/bonus_animation/android.png');
+      'assets/images/bonus_animation/android_spaceship.png');
 
   /// File path: assets/images/bonus_animation/dash_nest.png
   AssetGenImage get dashNest =>
       const AssetGenImage('assets/images/bonus_animation/dash_nest.png');
 
-  /// File path: assets/images/bonus_animation/dino.png
+  /// File path: assets/images/bonus_animation/dino_chomp.png
-  AssetGenImage get dino =>
+  AssetGenImage get dinoChomp =>
-      const AssetGenImage('assets/images/bonus_animation/dino.png');
+      const AssetGenImage('assets/images/bonus_animation/dino_chomp.png');
 
-  /// File path: assets/images/bonus_animation/google.png
+  /// File path: assets/images/bonus_animation/google_word.png
-  AssetGenImage get google =>
+  AssetGenImage get googleWord =>
-      const AssetGenImage('assets/images/bonus_animation/google.png');
+      const AssetGenImage('assets/images/bonus_animation/google_word.png');
 
   /// File path: assets/images/bonus_animation/sparky_turbo_charge.png
   AssetGenImage get sparkyTurboCharge => const AssetGenImage(

test/game/view/widgets/round_count_display_test.dart

@@ -25,7 +25,7 @@ void main() {
       );
     });
 
-    testWidgets('three active balls', (tester) async {
+    testWidgets('three active round indicator', (tester) async {
       await tester.pumpApp(
         const RoundCountDisplay(),
         gameBloc: gameBloc,
@@ -35,7 +35,7 @@ void main() {
       expect(find.byType(RoundIndicator), findsNWidgets(3));
     });
 
-    testWidgets('two active balls', (tester) async {
+    testWidgets('two active round indicator', (tester) async {
       final state = initialState.copyWith(
         balls: 2,
       );
@@ -66,7 +66,7 @@ void main() {
       );
     });
 
-    testWidgets('one active ball', (tester) async {
+    testWidgets('one active round indicator', (tester) async {
       final state = initialState.copyWith(
         balls: 1,
       );
@@ -98,7 +98,7 @@ void main() {
     });
   });
 
-  testWidgets('active score ball is displaying with proper color',
+  testWidgets('active round indicator is displaying with proper color',
       (tester) async {
     await tester.pumpApp(
       const RoundIndicator(isActive: true),
@@ -113,7 +113,7 @@ void main() {
     );
   });
 
-  testWidgets('inactive score ball is displaying with proper color',
+  testWidgets('inactive round indicator is displaying with proper color',
       (tester) async {
     await tester.pumpApp(
       const RoundIndicator(isActive: false),