added how to play screen for mobile devices (#245)

* ui: added how to play dialog for mobile

* chore: added mobile dialog content test

lib/l10n/arb/app_en.arb

@@ -20,6 +20,26 @@
   "@flipperControls": {
     "description": "Text displayed on the how to play dialog with the flipper controls"
   },
+  "tapAndHold": "Tap & Hold",
+  "@tapAndHold": {
+    "description": "Text displayed on the how to launch on mobile"
+  },
+  "to": "to",
+  "@to": {
+    "description": "Text displayed for the word to"
+  },
+  "launch": "LAUNCH",
+  "@launch": {
+    "description": "Text displayed for the word launch"
+  },
+  "tapLeftRightScreen": "Tap left/right screen",
+  "@tapLeftRightScreen": {
+    "description": "Text displayed on the how to flip on mobile"
+  },
+  "flip": "FLIP",
+  "@flip": {
+    "description": "Text displayed for the word FLIP"
+  },
   "start": "Start",
   "@start": {
     "description": "Text displayed on the character selection page start button"

lib/start_game/widgets/how_to_play_dialog.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: public_member_api_docs
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball/gen/gen.dart';
 import 'package:pinball/l10n/l10n.dart';
@@ -21,42 +22,134 @@ class HowToPlayDialog extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final isMobile = defaultTargetPlatform == TargetPlatform.iOS ||
+        defaultTargetPlatform == TargetPlatform.android;
+    return PinballDialogLayout(
+      header: const _HowToPlayHeader(),
+      body: isMobile ? const _MobileBody() : const _DesktopBody(),
+    );
+  }
+}
+
+class _MobileBody extends StatelessWidget {
+  const _MobileBody({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      children: const [
+        _MobileLaunchControls(),
+        _MobileFlipperControls(),
+      ],
+    );
+  }
+}
+
+class _MobileLaunchControls extends StatelessWidget {
+  const _MobileLaunchControls({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final textStyle = AppTextStyle.headline3.copyWith(
+      color: AppColors.white,
+      fontWeight: FontWeight.bold,
+    );
+    final l10n = context.l10n;
+    return Column(
+      children: [
+        Text(l10n.tapAndHold, style: textStyle),
+        Text.rich(
+          TextSpan(
+            children: [
+              TextSpan(text: '${l10n.to} ', style: textStyle),
+              TextSpan(
+                text: l10n.launch,
+                style: textStyle.copyWith(color: AppColors.blue),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _MobileFlipperControls extends StatelessWidget {
+  const _MobileFlipperControls({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final textStyle = AppTextStyle.headline3.copyWith(
+      color: AppColors.white,
+      fontWeight: FontWeight.bold,
+    );
     final l10n = context.l10n;
+    return Column(
+      children: [
+        Text(l10n.tapLeftRightScreen, style: textStyle),
+        Text.rich(
+          TextSpan(
+            children: [
+              TextSpan(text: '${l10n.to} ', style: textStyle),
+              TextSpan(
+                text: l10n.flip,
+                style: textStyle.copyWith(color: AppColors.orange),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _DesktopBody extends StatelessWidget {
+  const _DesktopBody({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
     const spacing = SizedBox(height: 16);
+    return ListView(
+      children: const [
+        spacing,
+        _DesktopLaunchControls(),
+        spacing,
+        _DesktopFlipperControls(),
+      ],
+    );
+  }
+}
+
+class _HowToPlayHeader extends StatelessWidget {
+  const _HowToPlayHeader({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
     final headerTextStyle = AppTextStyle.headline3.copyWith(
       color: AppColors.darkBlue,
     );
-
-    return PinballDialogLayout(
-      header: FittedBox(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Text(
-              l10n.howToPlay,
-              style: headerTextStyle.copyWith(fontWeight: FontWeight.bold),
-            ),
-            Text(
-              l10n.tipsForFlips,
-              style: headerTextStyle,
-            ),
-          ],
-        ),
-      ),
-      body: ListView(
-        children: const [
-          spacing,
-          _LaunchControls(),
-          spacing,
-          _FlipperControls(),
+    return FittedBox(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Text(
+            l10n.howToPlay,
+            style: headerTextStyle.copyWith(fontWeight: FontWeight.bold),
+          ),
+          Text(
+            l10n.tipsForFlips,
+            style: headerTextStyle,
+          ),
         ],
       ),
     );
   }
 }
 
-class _LaunchControls extends StatelessWidget {
-  const _LaunchControls({Key? key}) : super(key: key);
+class _DesktopLaunchControls extends StatelessWidget {
+  const _DesktopLaunchControls({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -87,8 +180,8 @@ class _LaunchControls extends StatelessWidget {
   }
 }
 
-class _FlipperControls extends StatelessWidget {
-  const _FlipperControls({Key? key}) : super(key: key);
+class _DesktopFlipperControls extends StatelessWidget {
+  const _DesktopFlipperControls({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {

test/start_game/widgets/how_to_play_dialog_test.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: prefer_const_constructors
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:pinball/l10n/l10n.dart';
@@ -15,12 +16,24 @@ void main() {
       l10n = await AppLocalizations.delegate.load(Locale('en'));
     });
 
-    testWidgets('displays content', (tester) async {
+    testWidgets('displays content for desktop', (tester) async {
+      debugDefaultTargetPlatformOverride = TargetPlatform.macOS;
       await tester.pumpApp(HowToPlayDialog());
       expect(find.text(l10n.howToPlay), findsOneWidget);
       expect(find.text(l10n.tipsForFlips), findsOneWidget);
       expect(find.text(l10n.launchControls), findsOneWidget);
       expect(find.text(l10n.flipperControls), findsOneWidget);
+      debugDefaultTargetPlatformOverride = null;
+    });
+
+    testWidgets('displays content for mobile', (tester) async {
+      debugDefaultTargetPlatformOverride = TargetPlatform.iOS;
+      await tester.pumpApp(HowToPlayDialog());
+      expect(find.text(l10n.howToPlay), findsOneWidget);
+      expect(find.text(l10n.tipsForFlips), findsOneWidget);
+      expect(find.text(l10n.tapAndHold), findsOneWidget);
+      expect(find.text(l10n.tapLeftRightScreen), findsOneWidget);
+      debugDefaultTargetPlatformOverride = null;
     });
   });