fix: apply self review

lib/start_game/widgets/how_to_play_dialog.dart

@@ -18,18 +18,13 @@ class HowToPlayDialog extends StatelessWidget {
 
     return WillPopScope(
       onWillPop: () {
-        Future.delayed(
-          kThemeAnimationDuration,
-          onDismissCallback.call,
-        );
-
+        onDismissCallback.call();
         return Future.value(true);
       },
       child: Dialog(
         child: Padding(
           padding: const EdgeInsets.all(20),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
+          child: ListView(
             children: [
               Text(l10n.howToPlay),
               spacing,
@@ -56,9 +51,7 @@ class _LaunchControls extends StatelessWidget {
       children: [
         Text(l10n.launchControls),
         const SizedBox(height: 10),
-        Row(
-          mainAxisSize: MainAxisSize.min,
-          mainAxisAlignment: MainAxisAlignment.center,
+        Wrap(
           children: const [
             KeyIndicator.fromIcon(keyIcon: Icons.keyboard_arrow_down),
             spacing,
@@ -86,9 +79,7 @@ class _FlipperControls extends StatelessWidget {
         const SizedBox(height: 10),
         Column(
           children: [
-            Row(
-              mainAxisSize: MainAxisSize.min,
-              mainAxisAlignment: MainAxisAlignment.center,
+            Wrap(
               children: const [
                 KeyIndicator.fromIcon(keyIcon: Icons.keyboard_arrow_left),
                 rowSpacing,
@@ -96,9 +87,7 @@ class _FlipperControls extends StatelessWidget {
               ],
             ),
             const SizedBox(height: 8),
-            Row(
-              mainAxisSize: MainAxisSize.min,
-              mainAxisAlignment: MainAxisAlignment.center,
+            Wrap(
               children: const [
                 KeyIndicator.fromKeyName(keyName: 'A'),
                 rowSpacing,

lib/start_game/widgets/start_game_listener.dart

@@ -28,7 +28,7 @@ class StartGameListener extends StatelessWidget {
             _onSelectCharacter(context);
             break;
           case StartGameStatus.howToPlay:
-            _handleHowToPlay(context);
+            _onHowToPlay(context);
             break;
           case StartGameStatus.play:
             _game.gameFlowController.start();
@@ -41,43 +41,48 @@ class StartGameListener extends StatelessWidget {
     );
   }
 
-  void _onSelectCharacter(
-    BuildContext context,
-  ) {
-    showDialog<void>(
+  void _onSelectCharacter(BuildContext context) {
+    _showPinballDialog(
       context: context,
-      builder: (_) {
-        // TODO(arturplaczek): remove that when PR with PinballLayout will be
-        // merged
-        final height = MediaQuery.of(context).size.height * 0.5;
-
-        return Center(
-          child: SizedBox(
-            height: height,
-            width: height * 1.2,
-            child: const CharacterSelectionDialog(),
-          ),
-        );
-      },
+      child: const CharacterSelectionDialog(),
       barrierDismissible: false,
     );
   }
 }
 
-Future<void> _handleHowToPlay(
-  BuildContext context,
-) async {
-  final startGameBloc = context.read<StartGameBloc>();
+Future<void> _onHowToPlay(BuildContext context) async {
+  _showPinballDialog(
+    context: context,
+    child: HowToPlayDialog(
+      onDismissCallback: () {
+        // We need to add a delay between closing the dialog and starting the
+        // game.
+        Future.delayed(
+          kThemeAnimationDuration,
+          () => context.read<StartGameBloc>().add(const HowToPlayFinished()),
+        );
+      },
+    ),
+  );
+}
+
+void _showPinballDialog({
+  required BuildContext context,
+  required Widget child,
+  bool barrierDismissible = true,
+}) {
+  final gameWidgetWidth = MediaQuery.of(context).size.height * 9 / 16;
 
-  await showDialog<void>(
+  showDialog<void>(
     context: context,
     barrierColor: AppColors.transparent,
+    barrierDismissible: barrierDismissible,
     builder: (_) {
       return Center(
-        child: HowToPlayDialog(
-          onDismissCallback: () {
-            startGameBloc.add(const HowToPlayFinished());
-          },
+        child: SizedBox(
+          height: gameWidgetWidth,
+          width: gameWidgetWidth,
+          child: child,
         ),
       );
     },

test/game/view/pinball_game_page_test.dart

@@ -198,12 +198,11 @@ void main() {
         find.byWidgetPredicate((w) => w is GameWidget<PinballGame>),
         findsOneWidget,
       );
-      // TODO(arturplaczek): add Visibility to GameHud based on StartGameBloc
-      // status
-      // expect(
-      //   find.byType(GameHud),
-      //   findsNothing,
-      // );
+
+      expect(
+        find.byType(GameHud),
+        findsNothing,
+      );
     });
 
     testWidgets('renders a hud on play state', (tester) async {

test/start_game/widgets/start_game_listener_test.dart

@@ -137,7 +137,7 @@ void main() {
     );
 
     testWidgets(
-      'calls HowToPlayFinished event after HowToPlayDialog is closed',
+      'adds HowToPlayFinished event after closing HowToPlayDialog',
       (tester) async {
         whenListen(
           startGameBloc,