feat: change screens flow (#195)

lib/app/view/app.dart

@@ -11,8 +11,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:leaderboard_repository/leaderboard_repository.dart';
+import 'package:pinball/game/game.dart';
 import 'package:pinball/l10n/l10n.dart';
-import 'package:pinball/landing/landing.dart';
+import 'package:pinball/theme/theme.dart';
 import 'package:pinball_audio/pinball_audio.dart';
 
 class App extends StatelessWidget {
@@ -34,20 +35,17 @@ class App extends StatelessWidget {
         RepositoryProvider.value(value: _leaderboardRepository),
         RepositoryProvider.value(value: _pinballAudio),
       ],
-      child: MaterialApp(
+      child: BlocProvider(
+        create: (context) => ThemeCubit(),
+        child: const MaterialApp(
           title: 'I/O Pinball',
-        theme: ThemeData(
+          localizationsDelegates: [
-          appBarTheme: const AppBarTheme(color: Color(0xFF13B9FF)),
-          colorScheme: ColorScheme.fromSwatch(
-            accentColor: const Color(0xFF13B9FF),
-          ),
-        ),
-        localizationsDelegates: const [
             AppLocalizations.delegate,
             GlobalMaterialLocalizations.delegate,
           ],
           supportedLocales: AppLocalizations.supportedLocales,
-        home: const LandingPage(),
+          home: PinballGamePage(),
+        ),
       ),
     );
   }

lib/game/pinball_game.dart

@@ -5,6 +5,7 @@ import 'package:flame/components.dart';
 import 'package:flame/input.dart';
 import 'package:flame_bloc/flame_bloc.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:flutter/material.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball/gen/assets.gen.dart';
 import 'package:pinball_audio/pinball_audio.dart';
@@ -28,6 +29,9 @@ class PinballGame extends Forge2DGame
   /// Identifier of the play button overlay
   static const playButtonOverlay = 'play_button';
 
+  @override
+  Color backgroundColor() => Colors.transparent;
+
   final PinballTheme theme;
 
   final PinballAudio audio;

lib/game/view/pinball_game_page.dart

@@ -5,32 +5,40 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:pinball/game/game.dart';
+import 'package:pinball/start_game/start_game.dart';
+import 'package:pinball/theme/theme.dart';
 import 'package:pinball_audio/pinball_audio.dart';
-import 'package:pinball_theme/pinball_theme.dart';
 
 class PinballGamePage extends StatelessWidget {
   const PinballGamePage({
     Key? key,
-    required this.theme,
+    this.isDebugMode = kDebugMode,
-    required this.game,
   }) : super(key: key);
 
-  final PinballTheme theme;
+  final bool isDebugMode;
-  final PinballGame game;
 
   static Route route({
-    required PinballTheme theme,
     bool isDebugMode = kDebugMode,
   }) {
     return MaterialPageRoute<void>(
       builder: (context) {
+        return PinballGamePage(
+          isDebugMode: isDebugMode,
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = context.read<ThemeCubit>().state.theme;
     final audio = context.read<PinballAudio>();
+    final pinballAudio = context.read<PinballAudio>();
 
     final game = isDebugMode
         ? DebugPinballGame(theme: theme, audio: audio)
         : PinballGame(theme: theme, audio: audio);
 
-        final pinballAudio = context.read<PinballAudio>();
     final loadables = [
       ...game.preLoadAssets(),
       pinballAudio.load(),
@@ -38,21 +46,15 @@ class PinballGamePage extends StatelessWidget {
 
     return MultiBlocProvider(
       providers: [
+        BlocProvider(create: (_) => StartGameBloc(game: game)),
         BlocProvider(create: (_) => GameBloc()),
         BlocProvider(
           create: (_) => AssetsManagerCubit(loadables)..load(),
         ),
       ],
-          child: PinballGamePage(theme: theme, game: game),
+      child: PinballGameView(game: game),
-        );
-      },
     );
   }
-
-  @override
-  Widget build(BuildContext context) {
-    return PinballGameView(game: game);
-  }
 }
 
 class PinballGameView extends StatelessWidget {
@@ -65,18 +67,51 @@ class PinballGameView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final loadingProgress = context.watch<AssetsManagerCubit>().state.progress;
+    final isLoading = context.select(
+      (AssetsManagerCubit bloc) => bloc.state.progress != 1,
+    );
 
-    if (loadingProgress != 1) {
     return Scaffold(
-        body: Center(
+      backgroundColor: Colors.blue,
-          child: Text(
+      body: isLoading
-            loadingProgress.toString(),
+          ? const _PinballGameLoadingView()
+          : PinballGameLoadedView(game: game),
+    );
+  }
+}
+
+class _PinballGameLoadingView extends StatelessWidget {
+  const _PinballGameLoadingView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final loadingProgress = context.select(
+      (AssetsManagerCubit bloc) => bloc.state.progress,
+    );
+
+    return Padding(
+      padding: const EdgeInsets.all(24),
+      child: Center(
+        child: LinearProgressIndicator(
+          color: Colors.white,
+          value: loadingProgress,
         ),
       ),
     );
   }
+}
+
+@visibleForTesting
+class PinballGameLoadedView extends StatelessWidget {
+  const PinballGameLoadedView({
+    Key? key,
+    required this.game,
+  }) : super(key: key);
 
+  final PinballGame game;
+
+  @override
+  Widget build(BuildContext context) {
     return Stack(
       children: [
         Positioned.fill(

lib/game/view/widgets/play_button_overlay.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:pinball/game/pinball_game.dart';
 import 'package:pinball/l10n/l10n.dart';
+import 'package:pinball/theme/theme.dart';
 
 /// {@template play_button_overlay}
 /// [Widget] that renders the button responsible to starting the game
@@ -18,9 +19,27 @@ class PlayButtonOverlay extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
+
     return Center(
       child: ElevatedButton(
-        onPressed: _game.gameFlowController.start,
+        onPressed: () {
+          _game.gameFlowController.start();
+          showDialog<void>(
+            context: context,
+            barrierDismissible: false,
+            builder: (_) {
+              final height = MediaQuery.of(context).size.height * 0.5;
+
+              return Center(
+                child: SizedBox(
+                  height: height,
+                  width: height * 1.4,
+                  child: const CharacterSelectionDialog(),
+                ),
+              );
+            },
+          );
+        },
         child: Text(l10n.play),
       ),
     );

lib/landing/landing.dart

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

lib/leaderboard/view/leaderboard_page.dart

@@ -69,7 +69,7 @@ class LeaderboardView extends StatelessWidget {
               const SizedBox(height: 20),
               TextButton(
                 onPressed: () => Navigator.of(context).push<void>(
-                  CharacterSelectionPage.route(),
+                  CharacterSelectionDialog.route(),
                 ),
                 child: Text(l10n.retry),
               ),

lib/start_game/start_game.dart

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

lib/start_game/widgets/how_to_play_dialog.dart

@@ -2,42 +2,9 @@
 
 import 'package:flutter/material.dart';
 import 'package:pinball/l10n/l10n.dart';
-import 'package:pinball/theme/theme.dart';
 
-class LandingPage extends StatelessWidget {
+class HowToPlayDialog extends StatelessWidget {
-  const LandingPage({Key? key}) : super(key: key);
+  const HowToPlayDialog({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = context.l10n;
-
-    return Scaffold(
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            TextButton(
-              onPressed: () => Navigator.of(context).push<void>(
-                CharacterSelectionPage.route(),
-              ),
-              child: Text(l10n.play),
-            ),
-            TextButton(
-              onPressed: () => showDialog<void>(
-                context: context,
-                builder: (_) => const _HowToPlayDialog(),
-              ),
-              child: Text(l10n.howToPlay),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-class _HowToPlayDialog extends StatelessWidget {
-  const _HowToPlayDialog({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {

lib/start_game/widgets/widgets.dart

@@ -0,0 +1 @@
+export 'how_to_play_dialog.dart';

lib/theme/view/character_selection_page.dart

@@ -2,17 +2,17 @@
 
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:pinball/game/game.dart';
 import 'package:pinball/l10n/l10n.dart';
+import 'package:pinball/start_game/start_game.dart';
 import 'package:pinball/theme/theme.dart';
 import 'package:pinball_theme/pinball_theme.dart';
 
-class CharacterSelectionPage extends StatelessWidget {
+class CharacterSelectionDialog extends StatelessWidget {
-  const CharacterSelectionPage({Key? key}) : super(key: key);
+  const CharacterSelectionDialog({Key? key}) : super(key: key);
 
   static Route route() {
     return MaterialPageRoute<void>(
-      builder: (_) => const CharacterSelectionPage(),
+      builder: (_) => const CharacterSelectionDialog(),
     );
   }
 
@@ -46,11 +46,13 @@ class CharacterSelectionView extends StatelessWidget {
             const _CharacterSelectionGridView(),
             const SizedBox(height: 20),
             TextButton(
-              onPressed: () => Navigator.of(context).push<void>(
+              onPressed: () {
-                PinballGamePage.route(
+                Navigator.of(context).pop();
-                  theme: context.read<ThemeCubit>().state.theme,
+                showDialog<void>(
-                ),
+                  context: context,
-              ),
+                  builder: (_) => const HowToPlayDialog(),
+                );
+              },
               child: Text(l10n.start),
             ),
           ],

test/app/view/app_test.dart

@@ -7,8 +7,9 @@
 
 import 'package:flutter_test/flutter_test.dart';
 import 'package:leaderboard_repository/leaderboard_repository.dart';
+import 'package:mocktail/mocktail.dart';
 import 'package:pinball/app/app.dart';
-import 'package:pinball/landing/landing.dart';
+import 'package:pinball/game/game.dart';
 import 'package:pinball_audio/pinball_audio.dart';
 
 import '../../helpers/mocks.dart';
@@ -21,16 +22,18 @@ void main() {
     setUp(() {
       leaderboardRepository = MockLeaderboardRepository();
       pinballAudio = MockPinballAudio();
+
+      when(pinballAudio.load).thenAnswer((_) => Future.value());
     });
 
-    testWidgets('renders LandingPage', (tester) async {
+    testWidgets('renders PinballGamePage', (tester) async {
       await tester.pumpWidget(
         App(
           leaderboardRepository: leaderboardRepository,
           pinballAudio: pinballAudio,
         ),
       );
-      expect(find.byType(LandingPage), findsOneWidget);
+      expect(find.byType(PinballGamePage), findsOneWidget);
     });
   });
 }

test/game/view/pinball_game_page_test.dart

@@ -5,40 +5,46 @@ import 'package:flame/game.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:pinball/game/game.dart';
-import 'package:pinball_theme/pinball_theme.dart';
+import 'package:pinball/theme/theme.dart';
 
 import '../../helpers/helpers.dart';
 
 void main() {
-  const theme = PinballTheme(characterTheme: DashTheme());
   final game = PinballTestGame();
 
   group('PinballGamePage', () {
-    testWidgets('renders PinballGameView', (tester) async {
+    late ThemeCubit themeCubit;
-      final gameBloc = MockGameBloc();
+    late GameBloc gameBloc;
+
+    setUp(() {
+      themeCubit = MockThemeCubit();
+      gameBloc = MockGameBloc();
+
+      whenListen(
+        themeCubit,
+        const Stream<ThemeState>.empty(),
+        initialState: const ThemeState.initial(),
+      );
+
       whenListen(
         gameBloc,
         Stream.value(const GameState.initial()),
         initialState: const GameState.initial(),
       );
+    });
 
+    testWidgets('renders PinballGameView', (tester) async {
       await tester.pumpApp(
-        PinballGamePage(theme: theme, game: game),
+        PinballGamePage(),
-        gameBloc: gameBloc,
+        themeCubit: themeCubit,
       );
+
       expect(find.byType(PinballGameView), findsOneWidget);
     });
 
     testWidgets(
       'renders the loading indicator while the assets load',
       (tester) async {
-        final gameBloc = MockGameBloc();
-        whenListen(
-          gameBloc,
-          Stream.value(const GameState.initial()),
-          initialState: const GameState.initial(),
-        );
-
         final assetsManagerCubit = MockAssetsManagerCubit();
         final initialAssetsState = AssetsManagerState(
           loadables: [Future<void>.value()],
@@ -51,11 +57,27 @@ void main() {
         );
 
         await tester.pumpApp(
-          PinballGamePage(theme: theme, game: game),
+          PinballGameView(
-          gameBloc: gameBloc,
+            game: game,
+          ),
           assetsManagerCubit: assetsManagerCubit,
+          themeCubit: themeCubit,
         );
-        expect(find.text('0.0'), findsOneWidget);
+
+        expect(
+          find.byWidgetPredicate(
+            (widget) =>
+                widget is LinearProgressIndicator && widget.value == 0.0,
+          ),
+          findsOneWidget,
+        );
+      },
+    );
+
+    testWidgets(
+        'renders PinballGameLoadedView after resources have been loaded',
+        (tester) async {
+      final assetsManagerCubit = MockAssetsManagerCubit();
 
       final loadedAssetsState = AssetsManagerState(
         loadables: [Future<void>.value()],
@@ -67,11 +89,20 @@ void main() {
         initialState: loadedAssetsState,
       );
 
-        await tester.pump();
+      await tester.pumpApp(
-        expect(find.byType(PinballGameView), findsOneWidget);
+        PinballGameView(
-      },
+          game: game,
+        ),
+        assetsManagerCubit: assetsManagerCubit,
+        themeCubit: themeCubit,
+        gameBloc: gameBloc,
       );
 
+      await tester.pump();
+
+      expect(find.byType(PinballGameLoadedView), findsOneWidget);
+    });
+
     group('route', () {
       Future<void> pumpRoute({
         required WidgetTester tester,
@@ -85,7 +116,6 @@ void main() {
                   onPressed: () {
                     Navigator.of(context).push<void>(
                       PinballGamePage.route(
-                        theme: theme,
                         isDebugMode: isDebugMode,
                       ),
                     );
@@ -95,6 +125,7 @@ void main() {
               },
             ),
           ),
+          themeCubit: themeCubit,
         );
 
         await tester.tap(find.text('Tap me'));

test/game/view/widgets/play_button_overlay_test.dart

@@ -1,8 +1,9 @@
 import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:pinball/game/game.dart';
+import 'package:pinball/theme/theme.dart';
 
-import '../../helpers/helpers.dart';
+import '../../../helpers/helpers.dart';
 
 void main() {
   group('PlayButtonOverlay', () {
@@ -31,5 +32,15 @@ void main() {
 
       verify(gameFlowController.start).called(1);
     });
+
+    testWidgets('displays CharacterSelectionDialog when tapped',
+        (tester) async {
+      await tester.pumpApp(PlayButtonOverlay(game: game));
+
+      await tester.tap(find.text('Play'));
+      await tester.pump();
+
+      expect(find.byType(CharacterSelectionDialog), findsOneWidget);
+    });
   });
 }

test/landing/view/landing_page_test.dart

@@ -1,71 +0,0 @@
-// ignore_for_file: prefer_const_constructors
-
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-import 'package:mockingjay/mockingjay.dart';
-import 'package:pinball/l10n/l10n.dart';
-import 'package:pinball/landing/landing.dart';
-
-import '../../helpers/helpers.dart';
-
-void main() {
-  group('LandingPage', () {
-    testWidgets('renders correctly', (tester) async {
-      final l10n = await AppLocalizations.delegate.load(Locale('en'));
-      await tester.pumpApp(LandingPage());
-
-      expect(find.byType(TextButton), findsNWidgets(2));
-      expect(find.text(l10n.play), findsOneWidget);
-      expect(find.text(l10n.howToPlay), findsOneWidget);
-    });
-
-    testWidgets('tapping on play button navigates to CharacterSelectionPage',
-        (tester) async {
-      final l10n = await AppLocalizations.delegate.load(Locale('en'));
-      final navigator = MockNavigator();
-      when(() => navigator.push<void>(any())).thenAnswer((_) async {});
-
-      await tester.pumpApp(
-        LandingPage(),
-        navigator: navigator,
-      );
-
-      await tester.tap(find.widgetWithText(TextButton, l10n.play));
-
-      verify(() => navigator.push<void>(any())).called(1);
-    });
-
-    testWidgets('tapping on how to play button displays dialog with controls',
-        (tester) async {
-      final l10n = await AppLocalizations.delegate.load(Locale('en'));
-      await tester.pumpApp(LandingPage());
-
-      await tester.tap(find.widgetWithText(TextButton, l10n.howToPlay));
-      await tester.pump();
-
-      expect(find.byType(Dialog), findsOneWidget);
-    });
-  });
-
-  group('KeyIndicator', () {
-    testWidgets('fromKeyName 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),
-      );
-
-      expect(find.byIcon(keyIcon), findsOneWidget);
-    });
-  });
-}

test/start_game/widgets/how_to_play_dialog_test.dart

@@ -0,0 +1,39 @@
+// ignore_for_file: prefer_const_constructors
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:pinball/start_game/start_game.dart';
+
+import '../../helpers/helpers.dart';
+
+void main() {
+  group('HowToPlayDialog', () {
+    testWidgets('displays dialog', (tester) async {
+      await tester.pumpApp(HowToPlayDialog());
+
+      expect(find.byType(Dialog), findsOneWidget);
+    });
+  });
+
+  group('KeyIndicator', () {
+    testWidgets('fromKeyName 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),
+      );
+
+      expect(find.byIcon(keyIcon), findsOneWidget);
+    });
+  });
+}

test/theme/view/character_selection_page_test.dart

@@ -4,6 +4,7 @@ import 'package:bloc_test/bloc_test.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:mockingjay/mockingjay.dart';
+import 'package:pinball/start_game/start_game.dart';
 import 'package:pinball/theme/theme.dart';
 import 'package:pinball_theme/pinball_theme.dart';
 
@@ -24,7 +25,7 @@ void main() {
   group('CharacterSelectionPage', () {
     testWidgets('renders CharacterSelectionView', (tester) async {
       await tester.pumpApp(
-        CharacterSelectionPage(),
+        CharacterSelectionDialog(),
         themeCubit: themeCubit,
       );
       expect(find.byType(CharacterSelectionView), findsOneWidget);
@@ -38,7 +39,7 @@ void main() {
               return ElevatedButton(
                 onPressed: () {
                   Navigator.of(context)
-                      .push<void>(CharacterSelectionPage.route());
+                      .push<void>(CharacterSelectionDialog.route());
                 },
                 child: Text('Tap me'),
               );
@@ -51,7 +52,7 @@ void main() {
       await tester.tap(find.text('Tap me'));
       await tester.pumpAndSettle();
 
-      expect(find.byType(CharacterSelectionPage), findsOneWidget);
+      expect(find.byType(CharacterSelectionDialog), findsOneWidget);
     });
   });
 
@@ -82,20 +83,17 @@ void main() {
       verify(() => themeCubit.characterSelected(SparkyTheme())).called(1);
     });
 
-    testWidgets('navigates to PinballGamePage when start is tapped',
+    testWidgets('displays how to play dialog when start is tapped',
         (tester) async {
-      final navigator = MockNavigator();
-      when(() => navigator.push<void>(any())).thenAnswer((_) async {});
-
       await tester.pumpApp(
         CharacterSelectionView(),
         themeCubit: themeCubit,
-        navigator: navigator,
       );
       await tester.ensureVisible(find.byType(TextButton));
       await tester.tap(find.byType(TextButton));
+      await tester.pumpAndSettle();
 
-      verify(() => navigator.push<void>(any())).called(1);
+      expect(find.byType(HowToPlayDialog), findsOneWidget);
     });
   });