From aa551f9e70bf99bc25126befabc792a608ecdae9 Mon Sep 17 00:00:00 2001
From: jonathandaniels-vgv
 <102978796+jonathandaniels-vgv@users.noreply.github.com>
Date: Wed, 27 Apr 2022 14:42:16 -0700
Subject: [PATCH] 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 +++
 .../widgets/how_to_play_dialog.dart           | 147 ++++++++++++++----
 .../widgets/how_to_play_dialog_test.dart      |  15 +-
 3 files changed, 154 insertions(+), 28 deletions(-)

diff --git a/lib/l10n/arb/app_en.arb b/lib/l10n/arb/app_en.arb
index e161f840..d2a755e2 100644
--- a/lib/l10n/arb/app_en.arb
+++ b/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"
diff --git a/lib/start_game/widgets/how_to_play_dialog.dart b/lib/start_game/widgets/how_to_play_dialog.dart
index 0f03bada..298387c9 100644
--- a/lib/start_game/widgets/how_to_play_dialog.dart
+++ b/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) {
diff --git a/test/start_game/widgets/how_to_play_dialog_test.dart b/test/start_game/widgets/how_to_play_dialog_test.dart
index 8bcca2a7..9e35d603 100644
--- a/test/start_game/widgets/how_to_play_dialog_test.dart
+++ b/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;
     });
   });