refactor: improve HowToPlayDialog and reuse existing components (#281)

lib/how_to_play/how_to_play.dart

@@ -0,0 +1 @@
+export 'widgets/widgets.dart';

lib/how_to_play/widgets/how_to_play_dialog.dart

@@ -8,7 +8,6 @@ import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball_ui/pinball_ui.dart';
 import 'package:platform_helper/platform_helper.dart';
 
-@visibleForTesting
 enum Control {
   left,
   right,
@@ -51,18 +50,10 @@ extension on Control {
 }
 
 Future<void> showHowToPlayDialog(BuildContext context) {
-  final height = MediaQuery.of(context).size.height * 0.5;
   return showDialog<void>(
     context: context,
-    builder: (context) {
+    barrierDismissible: false,
-      return Center(
+    builder: (_) => HowToPlayDialog(),
-        child: SizedBox(
-          height: height,
-          width: height * 1.4,
-          child: HowToPlayDialog(),
-        ),
-      );
-    },
   );
 }
 
@@ -100,9 +91,11 @@ class _HowToPlayDialogState extends State<HowToPlayDialog> {
   @override
   Widget build(BuildContext context) {
     final isMobile = widget.platformHelper.isMobile;
-    return PixelatedDecoration(
+    final l10n = context.l10n;
-      header: const _HowToPlayHeader(),
+    return PinballDialog(
-      body: isMobile ? const _MobileBody() : const _DesktopBody(),
+      title: l10n.howToPlay,
+      subtitle: l10n.tipsForFlips,
+      child: isMobile ? const _MobileBody() : const _DesktopBody(),
     );
   }
 }
@@ -137,26 +130,20 @@ class _MobileLaunchControls extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    final textStyle = Theme.of(context)
+    final headline3 = Theme.of(context)
         .textTheme
         .headline3!
         .copyWith(color: PinballColors.white);
     return Column(
       children: [
-        Text(
+        Text(l10n.tapAndHoldRocket, style: headline3),
-          l10n.tapAndHoldRocket,
-          style: textStyle,
-        ),
         Text.rich(
           TextSpan(
             children: [
-              TextSpan(
+              TextSpan(text: '${l10n.to} ', style: headline3),
-                text: '${l10n.to} ',
-                style: textStyle,
-              ),
               TextSpan(
                 text: l10n.launch,
-                style: textStyle.copyWith(color: PinballColors.blue),
+                style: headline3.copyWith(color: PinballColors.blue),
               ),
             ],
           ),
@@ -172,26 +159,20 @@ class _MobileFlipperControls extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    final textStyle = Theme.of(context)
+    final headline3 = Theme.of(context)
         .textTheme
         .headline3!
         .copyWith(color: PinballColors.white);
     return Column(
       children: [
-        Text(
+        Text(l10n.tapLeftRightScreen, style: headline3),
-          l10n.tapLeftRightScreen,
-          style: textStyle,
-        ),
         Text.rich(
           TextSpan(
             children: [
-              TextSpan(
+              TextSpan(text: '${l10n.to} ', style: headline3),
-                text: '${l10n.to} ',
-                style: textStyle,
-              ),
               TextSpan(
                 text: l10n.flip,
-                style: textStyle.copyWith(color: PinballColors.orange),
+                style: headline3.copyWith(color: PinballColors.orange),
               ),
             ],
           ),
@@ -206,55 +187,23 @@ class _DesktopBody extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    const spacing = SizedBox(height: 16);
     return ListView(
       children: const [
-        spacing,
+        SizedBox(height: 16),
         _DesktopLaunchControls(),
-        spacing,
+        SizedBox(height: 16),
         _DesktopFlipperControls(),
       ],
     );
   }
 }
 
-class _HowToPlayHeader extends StatelessWidget {
-  const _HowToPlayHeader({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = context.l10n;
-    final textStyle = Theme.of(context).textTheme.headline3?.copyWith(
-          color: PinballColors.darkBlue,
-        );
-    return FittedBox(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Text(
-            l10n.howToPlay,
-            style: textStyle?.copyWith(
-              fontWeight: FontWeight.bold,
-            ),
-          ),
-          Text(
-            l10n.tipsForFlips,
-            style: textStyle,
-          ),
-        ],
-      ),
-    );
-  }
-}
-
 class _DesktopLaunchControls extends StatelessWidget {
   const _DesktopLaunchControls({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    const spacing = SizedBox(width: 10);
-
     return Column(
       children: [
         Text(
@@ -264,11 +213,11 @@ class _DesktopLaunchControls extends StatelessWidget {
         const SizedBox(height: 10),
         Wrap(
           children: const [
-            KeyButton(control: Control.down),
+            _KeyButton(control: Control.down),
-            spacing,
+            SizedBox(width: 10),
-            KeyButton(control: Control.space),
+            _KeyButton(control: Control.space),
-            spacing,
+            SizedBox(width: 10),
-            KeyButton(control: Control.s),
+            _KeyButton(control: Control.s),
           ],
         )
       ],
@@ -282,8 +231,6 @@ class _DesktopFlipperControls extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    const rowSpacing = SizedBox(width: 20);
-
     return Column(
       children: [
         Text(
@@ -297,17 +244,17 @@ class _DesktopFlipperControls extends StatelessWidget {
               mainAxisSize: MainAxisSize.min,
               mainAxisAlignment: MainAxisAlignment.center,
               children: const [
-                KeyButton(control: Control.left),
+                _KeyButton(control: Control.left),
-                rowSpacing,
+                SizedBox(width: 20),
-                KeyButton(control: Control.right),
+                _KeyButton(control: Control.right),
               ],
             ),
             const SizedBox(height: 8),
             Wrap(
               children: const [
-                KeyButton(control: Control.a),
+                _KeyButton(control: Control.a),
-                rowSpacing,
+                SizedBox(width: 20),
-                KeyButton(control: Control.d),
+                _KeyButton(control: Control.d),
               ],
             )
           ],
@@ -317,29 +264,24 @@ class _DesktopFlipperControls extends StatelessWidget {
   }
 }
 
-@visibleForTesting
+class _KeyButton extends StatelessWidget {
-class KeyButton extends StatelessWidget {
+  const _KeyButton({Key? key, required this.control}) : super(key: key);
-  const KeyButton({
-    Key? key,
-    required Control control,
-  })  : _control = control,
-        super(key: key);
 
-  final Control _control;
+  final Control control;
 
   @override
   Widget build(BuildContext context) {
     final textTheme = Theme.of(context).textTheme;
     final textStyle =
-        _control.isArrow ? textTheme.headline1 : textTheme.headline3;
+        control.isArrow ? textTheme.headline1 : textTheme.headline3;
     const height = 60.0;
-    final width = _control.isSpace ? height * 2.83 : height;
+    final width = control.isSpace ? height * 2.83 : height;
     return DecoratedBox(
       decoration: BoxDecoration(
         image: DecorationImage(
           fit: BoxFit.fill,
           image: AssetImage(
-            _control.isSpace
+            control.isSpace
                 ? Assets.images.components.space.keyName
                 : Assets.images.components.key.keyName,
           ),
@@ -350,9 +292,9 @@ class KeyButton extends StatelessWidget {
         height: height,
         child: Center(
           child: RotatedBox(
-            quarterTurns: _control.isDown ? 1 : 0,
+            quarterTurns: control.isDown ? 1 : 0,
             child: Text(
-              _control.getCharacter(context),
+              control.getCharacter(context),
               style: textStyle?.copyWith(color: PinballColors.white),
             ),
           ),

lib/select_character/view/character_selection_page.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:pinball/how_to_play/how_to_play.dart';
 import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball/select_character/cubit/character_theme_cubit.dart';
 import 'package:pinball/select_character/select_character.dart';
-import 'package:pinball/start_game/start_game.dart';
 import 'package:pinball_theme/pinball_theme.dart';
 import 'package:pinball_ui/pinball_ui.dart';
 

lib/start_game/start_game.dart

@@ -1,2 +1 @@
 export 'bloc/start_game_bloc.dart';
-export 'widgets/widgets.dart';

test/how_to_play/how_to_play_dialog_test.dart

@@ -1,13 +1,11 @@
-// ignore_for_file: prefer_const_constructors
-
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
+import 'package:pinball/how_to_play/how_to_play.dart';
 import 'package:pinball/l10n/l10n.dart';
-import 'package:pinball/start_game/start_game.dart';
 import 'package:platform_helper/platform_helper.dart';
 
-import '../../helpers/helpers.dart';
+import '../helpers/helpers.dart';
 
 class MockPlatformHelper extends Mock implements PlatformHelper {}
 
@@ -17,7 +15,7 @@ void main() {
     late PlatformHelper platformHelper;
 
     setUp(() async {
-      l10n = await AppLocalizations.delegate.load(Locale('en'));
+      l10n = await AppLocalizations.delegate.load(const Locale('en'));
       platformHelper = MockPlatformHelper();
     });
 
@@ -40,7 +38,7 @@ void main() {
       expect(find.text(l10n.tipsForFlips), findsOneWidget);
       expect(find.text(l10n.launchControls), findsOneWidget);
       expect(find.text(l10n.flipperControls), findsOneWidget);
-      expect(find.byType(KeyButton), findsNWidgets(7));
+      expect(find.byType(RotatedBox), findsNWidgets(7)); // controls
     });
 
     testWidgets('displays content for mobile', (tester) async {
@@ -76,11 +74,4 @@ void main() {
       expect(find.byType(HowToPlayDialog), findsNothing);
     });
   });
-
-  group('KeyButton', () {
-    testWidgets('renders correctly', (tester) async {
-      await tester.pumpApp(KeyButton(control: Control.a));
-      expect(find.text('A'), findsOneWidget);
-    });
-  });
 }

test/select_character/view/character_selection_page_test.dart

@@ -2,8 +2,8 @@ import 'package:bloc_test/bloc_test.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
+import 'package:pinball/how_to_play/how_to_play.dart';
 import 'package:pinball/select_character/select_character.dart';
-import 'package:pinball/start_game/start_game.dart';
 import 'package:pinball_theme/pinball_theme.dart';
 import 'package:pinball_ui/pinball_ui.dart';