added how to play content

lib/gen/assets.gen.dart

@@ -47,6 +47,10 @@ class $AssetsImagesComponentsGen {
   /// File path: assets/images/components/background.png
   AssetGenImage get background =>
       const AssetGenImage('assets/images/components/background.png');
+
+  /// File path: assets/images/components/key.png
+  AssetGenImage get key =>
+      const AssetGenImage('assets/images/components/key.png');
 }
 
 class $AssetsImagesScoreGen {

lib/l10n/arb/app_en.arb

@@ -8,6 +8,10 @@
   "@howToPlay": {
     "description": "Text displayed on the landing page how to play button"
   },
+  "tipsForFlips": "Tips for flips",
+  "@tipsForFlips": {
+    "description": "Text displayed on the landing page how to play button"
+  },
   "launchControls": "Launch Controls",
   "@launchControls": {
     "description": "Text displayed on the how to play dialog with the launch controls"
@@ -24,6 +28,10 @@
   "@select": {
     "description": "Text displayed on the character selection page select button"
   },
+  "space": "Space",
+  "@space": {
+    "description": "Text displayed on space control button"
+  },
   "characterSelectionTitle": "Choose your character!",
   "@characterSelectionTitle": {
     "description": "Title text displayed on the character selection page"
@@ -80,4 +88,4 @@
   "@rounds": {
     "description": "Text displayed on the scoreboard widget to indicate rounds left"
   }
-}
+}

lib/start_game/widgets/how_to_play_dialog.dart

@@ -1,9 +1,21 @@
 // ignore_for_file: public_member_api_docs
 
 import 'package:flutter/material.dart';
+import 'package:pinball/gen/gen.dart';
 import 'package:pinball/l10n/l10n.dart';
+import 'package:pinball/theme/theme.dart';
 import 'package:pinball_ui/pinball_ui.dart';
 
+enum Control {
+  left,
+  right,
+  down,
+  a,
+  d,
+  s,
+  space,
+}
+
 class HowToPlayDialog extends StatelessWidget {
   const HowToPlayDialog({Key? key}) : super(key: key);
 
@@ -11,9 +23,26 @@ class HowToPlayDialog extends StatelessWidget {
   Widget build(BuildContext context) {
     final l10n = context.l10n;
     const spacing = SizedBox(height: 16);
+    final headerTextStyle = AppTextStyle.headline3.copyWith(
+      color: AppColors.darkBlue,
+    );
 
     return PinballDialogLayout(
-      header: Text(l10n.howToPlay),
+      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,
@@ -36,15 +65,21 @@ class _LaunchControls extends StatelessWidget {
 
     return Column(
       children: [
-        Text(l10n.launchControls),
+        Text(
+          l10n.launchControls,
+          style: AppTextStyle.headline3.copyWith(
+            color: AppColors.white,
+            fontSize: 16,
+          ),
+        ),
         const SizedBox(height: 10),
         Wrap(
           children: const [
-            KeyIndicator.fromIcon(keyIcon: Icons.keyboard_arrow_down),
+            KeyButton(control: Control.down),
             spacing,
-            KeyIndicator.fromKeyName(keyName: 'SPACE'),
+            KeyButton(control: Control.space),
             spacing,
-            KeyIndicator.fromKeyName(keyName: 'S'),
+            KeyButton(control: Control.s),
           ],
         )
       ],
@@ -62,7 +97,13 @@ class _FlipperControls extends StatelessWidget {
 
     return Column(
       children: [
-        Text(l10n.flipperControls),
+        Text(
+          l10n.flipperControls,
+          style: AppTextStyle.headline3.copyWith(
+            color: AppColors.white,
+            fontSize: 16,
+          ),
+        ),
         const SizedBox(height: 10),
         Column(
           children: [
@@ -70,17 +111,17 @@ class _FlipperControls extends StatelessWidget {
               mainAxisSize: MainAxisSize.min,
               mainAxisAlignment: MainAxisAlignment.center,
               children: const [
-                KeyIndicator.fromIcon(keyIcon: Icons.keyboard_arrow_left),
+                KeyButton(control: Control.left),
                 rowSpacing,
-                KeyIndicator.fromIcon(keyIcon: Icons.keyboard_arrow_right),
+                KeyButton(control: Control.right),
               ],
             ),
             const SizedBox(height: 8),
             Wrap(
               children: const [
-                KeyIndicator.fromKeyName(keyName: 'A'),
+                KeyButton(control: Control.a),
                 rowSpacing,
-                KeyIndicator.fromKeyName(keyName: 'D'),
+                KeyButton(control: Control.d),
               ],
             )
           ],
@@ -90,65 +131,69 @@ class _FlipperControls extends StatelessWidget {
   }
 }
 
-// TODO(allisonryan0002): remove visibility when adding final UI.
 @visibleForTesting
-class KeyIndicator extends StatelessWidget {
+class KeyButton extends StatelessWidget {
-  const KeyIndicator._({
+  const KeyButton({
     Key? key,
-    required String keyName,
+    required this.control,
-    required IconData keyIcon,
+  }) : super(key: key);
-    required bool fromIcon,
-  })  : _keyName = keyName,
-        _keyIcon = keyIcon,
-        _fromIcon = fromIcon,
-        super(key: key);
 
-  const KeyIndicator.fromKeyName({Key? key, required String keyName})
+  final Control control;
-      : this._(
-          key: key,
-          keyName: keyName,
-          keyIcon: Icons.keyboard_arrow_down,
-          fromIcon: false,
-        );
-
-  const KeyIndicator.fromIcon({Key? key, required IconData keyIcon})
-      : this._(
-          key: key,
-          keyName: '',
-          keyIcon: keyIcon,
-          fromIcon: true,
-        );
-
-  final String _keyName;
-
-  final IconData _keyIcon;
-
-  final bool _fromIcon;
 
   @override
   Widget build(BuildContext context) {
-    const iconPadding = EdgeInsets.all(15);
+    final textStyle =
-    const textPadding = EdgeInsets.symmetric(vertical: 20, horizontal: 22);
+        control.isArrow ? AppTextStyle.headline1 : AppTextStyle.headline3;
-    final boarderColor = Colors.blue.withOpacity(0.5);
+    const height = 60.0;
-    final color = Colors.blue.withOpacity(0.7);
+    final width = control.isSpace ? height * 2.83 : height;
-
     return DecoratedBox(
       decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(5),
+        image: DecorationImage(
-        border: Border.all(
+          fit: BoxFit.fill,
-          color: boarderColor,
+          image: AssetImage(
-          width: 3,
+            Assets.images.components.key.keyName,
+          ),
         ),
       ),
-      child: _fromIcon
+      child: SizedBox(
-          ? Padding(
+        width: width,
-              padding: iconPadding,
+        height: height,
-              child: Icon(_keyIcon, color: color),
+        child: Center(
-            )
+          child: RotatedBox(
-          : Padding(
+            quarterTurns: control.isDown ? 1 : 0,
-              padding: textPadding,
+            child: Text(
-              child: Text(_keyName, style: TextStyle(color: color)),
+              control.getCharacter(context),
+              style: textStyle.copyWith(color: AppColors.white),
             ),
+          ),
+        ),
+      ),
     );
   }
 }
+
+extension on Control {
+  bool get isArrow => isDown || isRight || isLeft;
+  bool get isDown => this == Control.down;
+  bool get isRight => this == Control.right;
+  bool get isLeft => this == Control.left;
+  bool get isSpace => this == Control.space;
+  String getCharacter(BuildContext context) {
+    switch (this) {
+      case Control.a:
+        return 'A';
+      case Control.d:
+        return 'D';
+      case Control.down:
+        return '>'; // Will be rotated
+      case Control.left:
+        return '<';
+      case Control.right:
+        return '>';
+      case Control.s:
+        return 'S';
+      case Control.space:
+        return context.l10n.space;
+    }
+  }
+}

test/start_game/widgets/how_to_play_dialog_test.dart

@@ -9,34 +9,28 @@ import '../../helpers/helpers.dart';
 
 void main() {
   group('HowToPlayDialog', () {
-    testWidgets('displays content', (tester) async {
+    late AppLocalizations l10n;
-      final l10n = await AppLocalizations.delegate.load(Locale('en'));
 
-      await tester.pumpApp(HowToPlayDialog());
+    setUp(() async {
+      l10n = await AppLocalizations.delegate.load(Locale('en'));
+    });
 
+    testWidgets('displays content', (tester) async {
+      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);
     });
   });
 
-  group('KeyIndicator', () {
+  group('KeyButton', () {
-    testWidgets('fromKeyName renders correctly', (tester) async {
+    testWidgets('renders correctly', (tester) async {
-      const keyName = 'A';
-
-      await tester.pumpApp(
-        KeyIndicator.fromKeyName(keyName: keyName),
-      );
-
-      expect(find.text(keyName), findsOneWidget);
-    });
-
-    testWidgets('fromIcon renders correctly', (tester) async {
-      const keyIcon = Icons.keyboard_arrow_down;
-
       await tester.pumpApp(
-        KeyIndicator.fromIcon(keyIcon: keyIcon),
+        KeyButton(control: Control.a),
       );
 
-      expect(find.byIcon(keyIcon), findsOneWidget);
+      expect(find.text('A'), findsOneWidget);
     });
   });
 }