From 69f6e24fae0904b583fa4314cb01c26e562fba53 Mon Sep 17 00:00:00 2001
From: Jonathan Daniels <jonathan.daniels@verygood.ventures>
Date: Wed, 27 Apr 2022 13:30:35 -0700
Subject: [PATCH] ui: added how to play dialog for mobile

---
 lib/l10n/arb/app_en.arb                       |  20 +++
 .../widgets/how_to_play_dialog.dart           | 147 ++++++++++++++----
 2 files changed, 140 insertions(+), 27 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) {