Merge branch 'main' into refactor/backboard-asset-and-sizing

.github/workflows/deploy.yaml

@@ -10,13 +10,21 @@ jobs:
     runs-on: ubuntu-latest
     name: Deploy Development
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout Repo 
-      - uses: subosito/flutter-action@v2
+        uses: actions/checkout@v2
+
+      - name: Setup Flutter
+        uses: subosito/flutter-action@v2
         with:
           channel: stable
-      - run: flutter packages get
+
-      - run: flutter build web --target lib/main_development.dart --web-renderer canvaskit --release
+      - name: Build Flutter App
-      - uses: FirebaseExtended/action-hosting-deploy@v0
+        run: |
+          flutter packages get
+          flutter build web --target lib/main_development.dart --web-renderer canvaskit --release
+      
+      - name: Deploy to Firebase
+        uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"
           firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_PINBALL_DEV }}"

lib/app/app.dart

@@ -1,8 +1 @@
-// Copyright (c) 2021, Very Good Ventures
-// https://verygood.ventures
-//
-// Use of this source code is governed by an MIT-style
-// license that can be found in the LICENSE file or at
-// https://opensource.org/licenses/MIT.
-
 export 'view/app.dart';

lib/app/view/app.dart

@@ -1,10 +1,3 @@
-// Copyright (c) 2021, Very Good Ventures
-// https://verygood.ventures
-//
-// Use of this source code is governed by an MIT-style
-// license that can be found in the LICENSE file or at
-// https://opensource.org/licenses/MIT.
-
 // ignore_for_file: public_member_api_docs
 
 import 'package:authentication_repository/authentication_repository.dart';

lib/assets_manager/assets_manager.dart

@@ -0,0 +1,2 @@
+export 'cubit/assets_manager_cubit.dart';
+export 'views/views.dart';

lib/assets_manager/views/assets_loading_page.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:pinball/assets_manager/assets_manager.dart';
+import 'package:pinball/l10n/l10n.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+
+/// {@template assets_loading_page}
+/// Widget used to indicate the loading progress of the different assets used
+/// in the game
+/// {@endtemplate}
+class AssetsLoadingPage extends StatelessWidget {
+  /// {@macro assets_loading_page}
+  const AssetsLoadingPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    final headline1 = Theme.of(context).textTheme.headline1;
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            l10n.ioPinball,
+            style: headline1!.copyWith(fontSize: 80),
+            textAlign: TextAlign.center,
+          ),
+          const SizedBox(height: 40),
+          AnimatedEllipsisText(
+            l10n.loading,
+            style: headline1,
+          ),
+          const SizedBox(height: 40),
+          FractionallySizedBox(
+            widthFactor: 0.8,
+            child: BlocBuilder<AssetsManagerCubit, AssetsManagerState>(
+              builder: (context, state) {
+                return PinballLoadingIndicator(value: state.progress);
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/assets_manager/views/views.dart

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

lib/bootstrap.dart

@@ -1,10 +1,3 @@
-// Copyright (c) 2021, Very Good Ventures
-// https://verygood.ventures
-//
-// Use of this source code is governed by an MIT-style
-// license that can be found in the LICENSE file or at
-// https://opensource.org/licenses/MIT.
-
 // ignore_for_file: public_member_api_docs
 
 import 'dart:async';

lib/game/components/android_acres/android_acres.dart

@@ -1,39 +1,50 @@
 // ignore_for_file: avoid_renaming_method_parameters
 
-import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball/game/components/android_acres/behaviors/behaviors.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template android_acres}
 /// Area positioned on the left side of the board containing the
 /// [AndroidSpaceship], [SpaceshipRamp], [SpaceshipRail], and [AndroidBumper]s.
 /// {@endtemplate}
-class AndroidAcres extends Blueprint {
+class AndroidAcres extends Component {
   /// {@macro android_acres}
   AndroidAcres()
       : super(
-          components: [
+          children: [
+            SpaceshipRamp(),
+            SpaceshipRail(),
+            AndroidSpaceship(position: Vector2(-26.5, -28.5)),
+            AndroidAnimatronic(
+              children: [
+                ScoringBehavior(points: Points.twoHundredThousand),
+              ],
+            )..initialPosition = Vector2(-26, -28.25),
             AndroidBumper.a(
               children: [
-                ScoringBehavior(points: 20000),
+                ScoringBehavior(points: Points.twentyThousand),
               ],
             )..initialPosition = Vector2(-25, 1.3),
             AndroidBumper.b(
               children: [
-                ScoringBehavior(points: 20000),
+                ScoringBehavior(points: Points.twentyThousand),
               ],
             )..initialPosition = Vector2(-32.8, -9.2),
             AndroidBumper.cow(
               children: [
-                ScoringBehavior(points: 20),
+                ScoringBehavior(points: Points.twentyThousand),
               ],
             )..initialPosition = Vector2(-20.5, -13.8),
-          ],
+            AndroidSpaceshipBonusBehavior(),
-          blueprints: [
-            SpaceshipRamp(),
-            AndroidSpaceship(position: Vector2(-26.5, -28.5)),
-            SpaceshipRail(),
           ],
         );
+
+  /// Creates [AndroidAcres] without any children.
+  ///
+  /// This can be used for testing [AndroidAcres]'s behaviors in isolation.
+  @visibleForTesting
+  AndroidAcres.test();
 }

lib/game/components/android_acres/behaviors/android_spaceship_bonus_behavior.dart

@@ -0,0 +1,27 @@
+import 'package:flame/components.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+/// Adds a [GameBonus.androidSpaceship] when [AndroidSpaceship] has a bonus.
+class AndroidSpaceshipBonusBehavior extends Component
+    with HasGameRef<PinballGame>, ParentIsA<AndroidAcres> {
+  @override
+  void onMount() {
+    super.onMount();
+    final androidSpaceship = parent.firstChild<AndroidSpaceship>()!;
+
+    // TODO(alestiago): Refactor subscription management once the following is
+    // merged:
+    // https://github.com/flame-engine/flame/pull/1538
+    androidSpaceship.bloc.stream.listen((state) {
+      final listenWhen = state == AndroidSpaceshipState.withBonus;
+      if (!listenWhen) return;
+
+      gameRef
+          .read<GameBloc>()
+          .add(const BonusActivated(GameBonus.androidSpaceship));
+      androidSpaceship.bloc.onBonusAwarded();
+    });
+  }
+}

lib/game/components/android_acres/behaviors/behaviors.dart

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

lib/game/components/backbox/backbox.dart

@@ -3,21 +3,23 @@ import 'dart:async';
 import 'package:flame/components.dart';
 import 'package:pinball/game/components/backbox/displays/displays.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template backbox}
 /// The [Backbox] of the pinball machine.
 /// {@endtemplate}
-class Backbox extends PositionComponent with HasGameRef {
+class Backbox extends PositionComponent with HasGameRef, ZIndex {
   /// {@macro backbox}
   Backbox()
       : super(
           position: Vector2(0, -87),
           anchor: Anchor.bottomCenter,
-          priority: RenderPriority.backboardMarquee,
           children: [
             _BackboxSpriteComponent(),
           ],
-        );
+        ) {
+    zIndex = ZIndexes.backboardMarquee;
+  }
 
   /// Puts [InitialsInputDisplay] on the [Backbox].
   Future<void> initialsInput({

lib/game/components/bottom_group.dart

@@ -1,6 +1,7 @@
 import 'package:flame/components.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template bottom_group}
 /// Grouping of the board's symmetrical bottom [Component]s.
@@ -8,7 +9,7 @@ import 'package:pinball_components/pinball_components.dart';
 /// The [BottomGroup] consists of [Flipper]s, [Baseboard]s and [Kicker]s.
 /// {@endtemplate}
 // TODO(allisonryan0002): Consider renaming.
-class BottomGroup extends Component {
+class BottomGroup extends Component with ZIndex {
   /// {@macro bottom_group}
   BottomGroup()
       : super(
@@ -16,8 +17,9 @@ class BottomGroup extends Component {
             _BottomGroupSide(side: BoardSide.right),
             _BottomGroupSide(side: BoardSide.left),
           ],
-          priority: RenderPriority.bottomGroup,
+        ) {
-        );
+    zIndex = ZIndexes.bottomGroup;
+  }
 }
 
 /// {@template bottom_group_side}
@@ -36,7 +38,7 @@ class _BottomGroupSide extends Component {
   @override
   Future<void> onLoad() async {
     final direction = _side.direction;
-    final centerXAdjustment = _side.isLeft ? 0 : -6.5;
+    final centerXAdjustment = _side.isLeft ? 0 : -6.66;
 
     final flipper = ControlledFlipper(
       side: _side,
@@ -44,16 +46,16 @@ class _BottomGroupSide extends Component {
     final baseboard = Baseboard(side: _side)
       ..initialPosition = Vector2(
         (25.58 * direction) + centerXAdjustment,
-        28.69,
+        28.71,
       );
     final kicker = Kicker(
       side: _side,
       children: [
-        ScoringBehavior(points: 5000),
+        ScoringBehavior(points: Points.fiveThousand)..applyTo(['bouncy_edge']),
       ],
     )..initialPosition = Vector2(
-        (22.4 * direction) + centerXAdjustment,
+        (22.64 * direction) + centerXAdjustment,
-        25,
+        25.1,
       );
 
     await addAll([flipper, baseboard, kicker]);

lib/game/components/components.dart

@@ -1,16 +1,17 @@
-export 'android_acres.dart';
+export 'android_acres/android_acres.dart';
 export 'backbox/backbox.dart';
 export 'bottom_group.dart';
 export 'camera_controller.dart';
 export 'controlled_ball.dart';
 export 'controlled_flipper.dart';
 export 'controlled_plunger.dart';
-export 'dino_desert.dart';
+export 'dino_desert/dino_desert.dart';
 export 'drain.dart';
 export 'flutter_forest/flutter_forest.dart';
 export 'game_flow_controller.dart';
 export 'google_word/google_word.dart';
 export 'launcher.dart';
+export 'multiballs/multiballs.dart';
 export 'multipliers/multipliers.dart';
 export 'scoring_behavior.dart';
-export 'sparky_fire_zone.dart';
+export 'sparky_scorch.dart';

lib/game/components/controlled_ball.dart

@@ -19,8 +19,8 @@ class ControlledBall extends Ball with Controls<BallController> {
     required CharacterTheme characterTheme,
   }) : super(baseColor: characterTheme.ballColor) {
     controller = BallController(this);
-    priority = RenderPriority.ballOnLaunchRamp;
     layer = Layer.launcher;
+    zIndex = ZIndexes.ballOnLaunchRamp;
   }
 
   /// {@template bonus_ball}
@@ -30,13 +30,13 @@ class ControlledBall extends Ball with Controls<BallController> {
     required CharacterTheme characterTheme,
   }) : super(baseColor: characterTheme.ballColor) {
     controller = BallController(this);
-    priority = RenderPriority.ballOnBoard;
+    zIndex = ZIndexes.ballOnBoard;
   }
 
   /// [Ball] used in [DebugPinballGame].
   ControlledBall.debug() : super(baseColor: const Color(0xFFFF0000)) {
     controller = BallController(this);
-    priority = RenderPriority.ballOnBoard;
+    zIndex = ZIndexes.ballOnBoard;
   }
 }
 

lib/game/components/dino_desert.dart

@@ -1,23 +0,0 @@
-import 'package:flame/components.dart';
-import 'package:pinball/game/game.dart';
-import 'package:pinball_components/pinball_components.dart';
-import 'package:pinball_flame/pinball_flame.dart';
-
-/// {@template dino_desert}
-/// Area located next to the [Launcher] containing the [ChromeDino] and
-/// [DinoWalls].
-/// {@endtemplate}
-// TODO(allisonryan0002): use a controller to initiate dino bonus when dino is
-// fully implemented.
-class DinoDesert extends Blueprint {
-  /// {@macro dino_desert}
-  DinoDesert()
-      : super(
-          components: [
-            ChromeDino()..initialPosition = Vector2(12.3, -6.9),
-          ],
-          blueprints: [
-            DinoWalls(),
-          ],
-        );
-}

lib/game/components/dino_desert/behaviors/behaviors.dart

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

lib/game/components/dino_desert/behaviors/chrome_dino_bonus_behavior.dart

@@ -0,0 +1,24 @@
+import 'package:flame/components.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+/// Adds a [GameBonus.dinoChomp] when a [Ball] is chomped by the [ChromeDino].
+class ChromeDinoBonusBehavior extends Component
+    with HasGameRef<PinballGame>, ParentIsA<DinoDesert> {
+  @override
+  void onMount() {
+    super.onMount();
+    final chromeDino = parent.firstChild<ChromeDino>()!;
+
+    // TODO(alestiago): Refactor subscription management once the following is
+    // merged:
+    // https://github.com/flame-engine/flame/pull/1538
+    chromeDino.bloc.stream.listen((state) {
+      final listenWhen = state.status == ChromeDinoStatus.chomping;
+      if (!listenWhen) return;
+
+      gameRef.read<GameBloc>().add(const BonusActivated(GameBonus.dinoChomp));
+    });
+  }
+}

lib/game/components/dino_desert/dino_desert.dart

@@ -0,0 +1,48 @@
+import 'package:flame/components.dart';
+import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball/game/components/dino_desert/behaviors/behaviors.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+
+/// {@template dino_desert}
+/// Area located next to the [Launcher] containing the [ChromeDino],
+/// [DinoWalls], and the [Slingshots].
+/// {@endtemplate}
+class DinoDesert extends Component {
+  /// {@macro dino_desert}
+  DinoDesert()
+      : super(
+          children: [
+            ChromeDino(
+              children: [
+                ScoringBehavior(points: Points.twoHundredThousand)
+                  ..applyTo(['inside_mouth']),
+              ],
+            )..initialPosition = Vector2(12.6, -6.9),
+            _BarrierBehindDino(),
+            DinoWalls(),
+            Slingshots(),
+            ChromeDinoBonusBehavior(),
+          ],
+        );
+
+  /// Creates [DinoDesert] without any children.
+  ///
+  /// This can be used for testing [DinoDesert]'s behaviors in isolation.
+  @visibleForTesting
+  DinoDesert.test();
+}
+
+class _BarrierBehindDino extends BodyComponent {
+  @override
+  Body createBody() {
+    final shape = EdgeShape()
+      ..set(
+        Vector2(25, -14.2),
+        Vector2(25, -7.7),
+      );
+
+    return world.createBody(BodyDef())..createFixtureFromShape(shape);
+  }
+}

lib/game/components/flutter_forest/behaviors/flutter_forest_bonus_behavior.dart

@@ -3,7 +3,10 @@ import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 
-/// When all [DashNestBumper]s are hit at least once, the [GameBonus.dashNest]
+/// Bonus obtained at the [FlutterForest].
+///
+/// When all [DashNestBumper]s are hit at least once three times, the [Signpost]
+/// progresses. When the [Signpost] fully progresses, the [GameBonus.dashNest]
 /// is awarded, and the [DashNestBumper.main] releases a new [Ball].
 class FlutterForestBonusBehavior extends Component
     with ParentIsA<FlutterForest>, HasGameRef<PinballGame> {
@@ -12,27 +15,35 @@ class FlutterForestBonusBehavior extends Component
     super.onMount();
 
     final bumpers = parent.children.whereType<DashNestBumper>();
+    final signpost = parent.firstChild<Signpost>()!;
+    final animatronic = parent.firstChild<DashAnimatronic>()!;
+    final canvas = gameRef.firstChild<ZCanvasComponent>()!;
+
     for (final bumper in bumpers) {
       // TODO(alestiago): Refactor subscription management once the following is
       // merged:
       // https://github.com/flame-engine/flame/pull/1538
       bumper.bloc.stream.listen((state) {
-        final achievedBonus = bumpers.every(
+        final activatedAllBumpers = bumpers.every(
           (bumper) => bumper.bloc.state == DashNestBumperState.active,
         );
 
-        if (achievedBonus) {
+        if (activatedAllBumpers) {
+          signpost.bloc.onProgressed();
+          for (final bumper in bumpers) {
+            bumper.bloc.onReset();
+          }
+
+          if (signpost.bloc.isFullyProgressed()) {
             gameRef
                 .read<GameBloc>()
                 .add(const BonusActivated(GameBonus.dashNest));
-          gameRef.add(
+            canvas.add(
               ControlledBall.bonus(characterTheme: gameRef.characterTheme)
-              ..initialPosition = Vector2(17.2, -52.7),
+                ..initialPosition = Vector2(29.5, -24.5),
             );
-          parent.firstChild<DashAnimatronic>()?.playing = true;
+            animatronic.playing = true;
-
+            signpost.bloc.onProgressed();
-          for (final bumper in bumpers) {
-            bumper.bloc.onReset();
           }
         }
       });

lib/game/components/flutter_forest/flutter_forest.dart

@@ -5,41 +5,43 @@ import 'package:flutter/material.dart';
 import 'package:pinball/game/components/flutter_forest/behaviors/behaviors.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template flutter_forest}
 /// Area positioned at the top right of the board where the [Ball] can bounce
 /// off [DashNestBumper]s.
 /// {@endtemplate}
-class FlutterForest extends Component {
+class FlutterForest extends Component with ZIndex {
   /// {@macro flutter_forest}
   FlutterForest()
       : super(
-          priority: RenderPriority.flutterForest,
           children: [
             Signpost(
               children: [
-                ScoringBehavior(points: 20),
+                ScoringBehavior(points: Points.fiveThousand),
               ],
             )..initialPosition = Vector2(8.35, -58.3),
             DashNestBumper.main(
               children: [
-                ScoringBehavior(points: 200000),
+                ScoringBehavior(points: Points.twoHundredThousand),
               ],
             )..initialPosition = Vector2(18.55, -59.35),
             DashNestBumper.a(
               children: [
-                ScoringBehavior(points: 20000),
+                ScoringBehavior(points: Points.twentyThousand),
               ],
             )..initialPosition = Vector2(8.95, -51.95),
             DashNestBumper.b(
               children: [
-                ScoringBehavior(points: 20000),
+                ScoringBehavior(points: Points.twentyThousand),
               ],
-            )..initialPosition = Vector2(23.3, -46.75),
+            )..initialPosition = Vector2(22.3, -46.75),
             DashAnimatronic()..position = Vector2(20, -66),
             FlutterForestBonusBehavior(),
           ],
-        );
+        ) {
+    zIndex = ZIndexes.flutterForest;
+  }
 
   /// Creates a [FlutterForest] without any children.
   ///

lib/game/components/game_flow_controller.dart

@@ -38,6 +38,7 @@ class GameFlowController extends ComponentController<PinballGame>
 
   /// Puts the game in the playing state.
   void start() {
+    component.audio.backgroundMusic();
     component.firstChild<CameraController>()?.focusOnGame();
     component.overlays.remove(PinballGame.playButtonOverlay);
   }

lib/game/components/google_word/behaviors/google_word_bonus_behavior.dart

@@ -17,7 +17,7 @@ class GoogleWordBonusBehavior extends Component
       // https://github.com/flame-engine/flame/pull/1538
       letter.bloc.stream.listen((_) {
         final achievedBonus = googleLetters
-            .every((letter) => letter.bloc.state == GoogleLetterState.active);
+            .every((letter) => letter.bloc.state == GoogleLetterState.lit);
 
         if (achievedBonus) {
           gameRef.audio.googleBonus();

lib/game/components/google_word/google_word.dart

@@ -3,11 +3,12 @@ import 'package:flutter/material.dart';
 import 'package:pinball/game/components/google_word/behaviors/behaviors.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template google_word}
 /// Loads all [GoogleLetter]s to compose a [GoogleWord].
 /// {@endtemplate}
-class GoogleWord extends Component {
+class GoogleWord extends Component with ZIndex {
   /// {@macro google_word}
   GoogleWord({
     required Vector2 position,
@@ -15,31 +16,33 @@ class GoogleWord extends Component {
           children: [
             GoogleLetter(
               0,
-              children: [ScoringBehavior(points: 5000)],
+              children: [ScoringBehavior(points: Points.fiveThousand)],
-            )..initialPosition = position + Vector2(-12.92, 1.82),
+            )..initialPosition = position + Vector2(-13.1, 1.72),
             GoogleLetter(
               1,
-              children: [ScoringBehavior(points: 5000)],
+              children: [ScoringBehavior(points: Points.fiveThousand)],
-            )..initialPosition = position + Vector2(-8.33, -0.65),
+            )..initialPosition = position + Vector2(-8.33, -0.75),
             GoogleLetter(
               2,
-              children: [ScoringBehavior(points: 5000)],
+              children: [ScoringBehavior(points: Points.fiveThousand)],
-            )..initialPosition = position + Vector2(-2.88, -1.75),
+            )..initialPosition = position + Vector2(-2.88, -1.85),
             GoogleLetter(
               3,
-              children: [ScoringBehavior(points: 5000)],
+              children: [ScoringBehavior(points: Points.fiveThousand)],
-            )..initialPosition = position + Vector2(2.88, -1.75),
+            )..initialPosition = position + Vector2(2.88, -1.85),
             GoogleLetter(
               4,
-              children: [ScoringBehavior(points: 5000)],
+              children: [ScoringBehavior(points: Points.fiveThousand)],
-            )..initialPosition = position + Vector2(8.33, -0.65),
+            )..initialPosition = position + Vector2(8.33, -0.75),
             GoogleLetter(
               5,
-              children: [ScoringBehavior(points: 5000)],
+              children: [ScoringBehavior(points: Points.fiveThousand)],
-            )..initialPosition = position + Vector2(12.92, 1.82),
+            )..initialPosition = position + Vector2(13.1, 1.72),
             GoogleWordBonusBehavior(),
           ],
-        );
+        ) {
+    zIndex = ZIndexes.decal;
+  }
 
   /// Creates a [GoogleWord] without any children.
   ///

lib/game/components/launcher.dart

@@ -1,21 +1,20 @@
-import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:flame/components.dart';
 import 'package:pinball/game/components/components.dart';
 import 'package:pinball_components/pinball_components.dart' hide Assets;
-import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template launcher}
-/// A [Blueprint] which creates the [Plunger], [RocketSpriteComponent] and
+/// Channel on the right side of the board containing the [LaunchRamp],
-/// [LaunchRamp].
+/// [Plunger], and [RocketSpriteComponent].
 /// {@endtemplate}
-class Launcher extends Blueprint {
+class Launcher extends Component {
   /// {@macro launcher}
   Launcher()
       : super(
-          components: [
+          children: [
-            ControlledPlunger(compressionDistance: 10.5)
+            LaunchRamp(),
-              ..initialPosition = Vector2(41.1, 43),
+            ControlledPlunger(compressionDistance: 9.2)
+              ..initialPosition = Vector2(41.2, 43.7),
             RocketSpriteComponent()..position = Vector2(43, 62.3),
           ],
-          blueprints: [LaunchRamp()],
         );
 }

lib/game/components/multiballs/behaviors/behaviors.dart

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

lib/game/components/multiballs/behaviors/multiballs_behavior.dart

@@ -0,0 +1,28 @@
+import 'package:flame/components.dart';
+import 'package:flame_bloc/flame_bloc.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+/// Toggle each [Multiball] when there is a bonus ball.
+class MultiballsBehavior extends Component
+    with
+        HasGameRef<PinballGame>,
+        ParentIsA<Multiballs>,
+        BlocComponent<GameBloc, GameState> {
+  @override
+  bool listenWhen(GameState? previousState, GameState newState) {
+    final hasChanged = previousState?.bonusHistory != newState.bonusHistory;
+    final lastBonusIsMultiball = newState.bonusHistory.isNotEmpty &&
+        newState.bonusHistory.last == GameBonus.dashNest;
+
+    return hasChanged && lastBonusIsMultiball;
+  }
+
+  @override
+  void onNewState(GameState state) {
+    parent.children.whereType<Multiball>().forEach((multiball) {
+      multiball.bloc.onAnimate();
+    });
+  }
+}

lib/game/components/multiballs/multiballs.dart

@@ -0,0 +1,30 @@
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball/game/components/multiballs/behaviors/behaviors.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+/// {@template multiballs_component}
+/// A [SpriteGroupComponent] for the multiball over the board.
+/// {@endtemplate}
+class Multiballs extends Component with ZIndex {
+  /// {@macro multiballs_component}
+  Multiballs()
+      : super(
+          children: [
+            Multiball.a(),
+            Multiball.b(),
+            Multiball.c(),
+            Multiball.d(),
+            MultiballsBehavior(),
+          ],
+        ) {
+    zIndex = ZIndexes.decal;
+  }
+
+  /// Creates a [Multiballs] without any children.
+  ///
+  /// This can be used for testing [Multiballs]'s behaviors in isolation.
+  @visibleForTesting
+  Multiballs.test();
+}

lib/game/components/multipliers/multipliers.dart

@@ -3,11 +3,12 @@ import 'package:flame/components.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball/game/components/multipliers/behaviors/behaviors.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template multipliers}
 /// A group for the multipliers on the board.
 /// {@endtemplate}
-class Multipliers extends Component {
+class Multipliers extends Component with ZIndex {
   /// {@macro multipliers}
   Multipliers()
       : super(
@@ -34,7 +35,9 @@ class Multipliers extends Component {
             ),
             MultipliersBehavior(),
           ],
-        );
+        ) {
+    zIndex = ZIndexes.decal;
+  }
 
   /// Creates [Multipliers] without any children.
   ///

lib/game/components/scoring_behavior.dart

@@ -12,21 +12,21 @@ import 'package:pinball_flame/pinball_flame.dart';
 class ScoringBehavior extends ContactBehavior with HasGameRef<PinballGame> {
   /// {@macro scoring_behavior}
   ScoringBehavior({
-    required int points,
+    required Points points,
   }) : _points = points;
 
-  final int _points;
+  final Points _points;
 
   @override
   void beginContact(Object other, Contact contact) {
     super.beginContact(other, contact);
     if (other is! Ball) return;
 
-    gameRef.read<GameBloc>().add(Scored(points: _points));
+    gameRef.read<GameBloc>().add(Scored(points: _points.value));
     gameRef.audio.score();
-    gameRef.add(
+    gameRef.firstChild<ZCanvasComponent>()!.add(
-      ScoreText(
+          ScoreComponent(
-        text: _points.toString(),
+            points: _points,
             position: other.body.position,
           ),
         );

lib/game/components/sparky_scorch.dart

@@ -1,40 +1,36 @@
 // ignore_for_file: avoid_renaming_method_parameters
 
+import 'package:flame/components.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:pinball_flame/pinball_flame.dart';
 
-/// {@template sparky_fire_zone}
+/// {@template sparky_scorch}
-/// Area positioned at the top left of the board where the [Ball]
+/// Area positioned at the top left of the board containing the
-/// can bounce off [SparkyBumper]s.
+/// [SparkyComputer], [SparkyAnimatronic], and [SparkyBumper]s.
-///
-/// When a [Ball] hits [SparkyBumper]s, the bumper animates.
 /// {@endtemplate}
-class SparkyFireZone extends Blueprint {
+class SparkyScorch extends Component {
-  /// {@macro sparky_fire_zone}
+  /// {@macro sparky_scorch}
-  SparkyFireZone()
+  SparkyScorch()
       : super(
-          components: [
+          children: [
             SparkyBumper.a(
               children: [
-                ScoringBehavior(points: 20000),
+                ScoringBehavior(points: Points.twentyThousand),
               ],
             )..initialPosition = Vector2(-22.9, -41.65),
             SparkyBumper.b(
               children: [
-                ScoringBehavior(points: 20000),
+                ScoringBehavior(points: Points.twentyThousand),
               ],
             )..initialPosition = Vector2(-21.25, -57.9),
             SparkyBumper.c(
               children: [
-                ScoringBehavior(points: 20000),
+                ScoringBehavior(points: Points.twentyThousand),
               ],
             )..initialPosition = Vector2(-3.3, -52.55),
-            SparkyComputerSensor()..initialPosition = Vector2(-13, -49.8),
+            SparkyComputerSensor()..initialPosition = Vector2(-13, -49.9),
             SparkyAnimatronic()..position = Vector2(-13.8, -58.2),
-          ],
-          blueprints: [
             SparkyComputer(),
           ],
         );
@@ -51,13 +47,19 @@ class SparkyComputerSensor extends BodyComponent
       : super(
           renderBody: false,
           children: [
-            ScoringBehavior(points: 200000),
+            ScoringBehavior(points: Points.twentyThousand),
           ],
         );
 
   @override
   Body createBody() {
-    final shape = CircleShape()..radius = 0.1;
+    final shape = PolygonShape()
+      ..setAsBox(
+        1,
+        0.1,
+        Vector2.zero(),
+        -0.18,
+      );
     final fixtureDef = FixtureDef(shape, isSensor: true);
     final bodyDef = BodyDef(
       position: initialPosition,

lib/game/game.dart

@@ -1,4 +1,3 @@
-export 'assets_manager/cubit/assets_manager_cubit.dart';
 export 'bloc/game_bloc.dart';
 export 'components/components.dart';
 export 'game_assets.dart';

lib/game/game_assets.dart

@@ -1,5 +1,4 @@
 import 'package:pinball/game/game.dart';
-import 'package:pinball/gen/assets.gen.dart';
 import 'package:pinball_components/pinball_components.dart' as components;
 import 'package:pinball_theme/pinball_theme.dart' hide Assets;
 
@@ -24,8 +23,10 @@ extension PinballGameAssetsX on PinballGame {
       images.load(components.Assets.images.flipper.right.keyName),
       images.load(components.Assets.images.baseboard.left.keyName),
       images.load(components.Assets.images.baseboard.right.keyName),
-      images.load(components.Assets.images.kicker.left.keyName),
+      images.load(components.Assets.images.kicker.left.lit.keyName),
-      images.load(components.Assets.images.kicker.right.keyName),
+      images.load(components.Assets.images.kicker.left.dimmed.keyName),
+      images.load(components.Assets.images.kicker.right.lit.keyName),
+      images.load(components.Assets.images.kicker.right.dimmed.keyName),
       images.load(components.Assets.images.slingshot.upper.keyName),
       images.load(components.Assets.images.slingshot.lower.keyName),
       images.load(components.Assets.images.launchRamp.ramp.keyName),
@@ -37,6 +38,7 @@ extension PinballGameAssetsX on PinballGame {
       ),
       images.load(components.Assets.images.dino.bottomWall.keyName),
       images.load(components.Assets.images.dino.topWall.keyName),
+      images.load(components.Assets.images.dino.topWallTunnel.keyName),
       images.load(components.Assets.images.dino.animatronic.head.keyName),
       images.load(components.Assets.images.dino.animatronic.mouth.keyName),
       images.load(components.Assets.images.dash.animatronic.keyName),
@@ -89,21 +91,30 @@ extension PinballGameAssetsX on PinballGame {
       images.load(components.Assets.images.android.bumper.cow.dimmed.keyName),
       images.load(components.Assets.images.sparky.computer.top.keyName),
       images.load(components.Assets.images.sparky.computer.base.keyName),
+      images.load(components.Assets.images.sparky.computer.glow.keyName),
       images.load(components.Assets.images.sparky.animatronic.keyName),
-      images.load(components.Assets.images.sparky.bumper.a.inactive.keyName),
+      images.load(components.Assets.images.sparky.bumper.a.lit.keyName),
-      images.load(components.Assets.images.sparky.bumper.a.active.keyName),
+      images.load(components.Assets.images.sparky.bumper.a.dimmed.keyName),
-      images.load(components.Assets.images.sparky.bumper.b.active.keyName),
+      images.load(components.Assets.images.sparky.bumper.b.lit.keyName),
-      images.load(components.Assets.images.sparky.bumper.b.inactive.keyName),
+      images.load(components.Assets.images.sparky.bumper.b.dimmed.keyName),
-      images.load(components.Assets.images.sparky.bumper.c.active.keyName),
+      images.load(components.Assets.images.sparky.bumper.c.lit.keyName),
-      images.load(components.Assets.images.sparky.bumper.c.inactive.keyName),
+      images.load(components.Assets.images.sparky.bumper.c.dimmed.keyName),
       images.load(components.Assets.images.backbox.marquee.keyName),
       images.load(components.Assets.images.backbox.displayDivider.keyName),
-      images.load(components.Assets.images.googleWord.letter1.keyName),
+      images.load(components.Assets.images.googleWord.letter1.lit.keyName),
-      images.load(components.Assets.images.googleWord.letter2.keyName),
+      images.load(components.Assets.images.googleWord.letter1.dimmed.keyName),
-      images.load(components.Assets.images.googleWord.letter3.keyName),
+      images.load(components.Assets.images.googleWord.letter2.lit.keyName),
-      images.load(components.Assets.images.googleWord.letter4.keyName),
+      images.load(components.Assets.images.googleWord.letter2.dimmed.keyName),
-      images.load(components.Assets.images.googleWord.letter5.keyName),
+      images.load(components.Assets.images.googleWord.letter3.lit.keyName),
-      images.load(components.Assets.images.googleWord.letter6.keyName),
+      images.load(components.Assets.images.googleWord.letter3.dimmed.keyName),
+      images.load(components.Assets.images.googleWord.letter4.lit.keyName),
+      images.load(components.Assets.images.googleWord.letter4.dimmed.keyName),
+      images.load(components.Assets.images.googleWord.letter5.lit.keyName),
+      images.load(components.Assets.images.googleWord.letter5.dimmed.keyName),
+      images.load(components.Assets.images.googleWord.letter6.lit.keyName),
+      images.load(components.Assets.images.googleWord.letter6.dimmed.keyName),
+      images.load(components.Assets.images.multiball.lit.keyName),
+      images.load(components.Assets.images.multiball.dimmed.keyName),
       images.load(components.Assets.images.multiplier.x2.lit.keyName),
       images.load(components.Assets.images.multiplier.x2.dimmed.keyName),
       images.load(components.Assets.images.multiplier.x3.lit.keyName),
@@ -114,11 +125,14 @@ extension PinballGameAssetsX on PinballGame {
       images.load(components.Assets.images.multiplier.x5.dimmed.keyName),
       images.load(components.Assets.images.multiplier.x6.lit.keyName),
       images.load(components.Assets.images.multiplier.x6.dimmed.keyName),
+      images.load(components.Assets.images.score.fiveThousand.keyName),
+      images.load(components.Assets.images.score.twentyThousand.keyName),
+      images.load(components.Assets.images.score.twoHundredThousand.keyName),
+      images.load(components.Assets.images.score.oneMillion.keyName),
       images.load(dashTheme.leaderboardIcon.keyName),
       images.load(sparkyTheme.leaderboardIcon.keyName),
       images.load(androidTheme.leaderboardIcon.keyName),
       images.load(dinoTheme.leaderboardIcon.keyName),
-      images.load(Assets.images.components.background.path),
     ];
   }
 }

lib/game/pinball_game.dart

@@ -25,7 +25,7 @@ class PinballGame extends Forge2DGame
     required this.characterTheme,
     required this.audio,
     required this.l10n,
-  }) {
+  }) : super(gravity: Vector2(0, 30)) {
     images.prefix = '';
     controller = _GameBallsController(this);
   }
@@ -46,32 +46,39 @@ class PinballGame extends Forge2DGame
 
   @override
   Future<void> onLoad() async {
-    unawaited(add(gameFlowController = GameFlowController(this)));
+    await add(gameFlowController = GameFlowController(this));
-    unawaited(add(CameraController(this)));
+    await add(CameraController(this));
-    await add(Backbox());
+
-    await add(BoardBackgroundSpriteComponent());
+    final machine = [
-    await add(Drain());
+      BoardBackgroundSpriteComponent(),
-    await add(BottomGroup());
+      Boundaries(),
-    unawaited(addFromBlueprint(Boundaries()));
+      Backbox(),
-
+    ];
-    final launcher = Launcher();
+    final decals = [
-    unawaited(addFromBlueprint(launcher));
+      GoogleWord(position: Vector2(-4.25, 1.8)),
-    await add(Multipliers());
+      Multipliers(),
-    await add(FlutterForest());
+      Multiballs(),
-    await addFromBlueprint(SparkyFireZone());
+    ];
-    await addFromBlueprint(AndroidAcres());
+    final characterAreas = [
-    await addFromBlueprint(DinoDesert());
+      AndroidAcres(),
-    unawaited(addFromBlueprint(Slingshots()));
+      DinoDesert(),
+      FlutterForest(),
+      SparkyScorch(),
+    ];
+
     await add(
-      GoogleWord(
+      ZCanvasComponent(
-        position: Vector2(
+        children: [
-          BoardDimensions.bounds.center.dx - 4.1,
+          ...machine,
-          BoardDimensions.bounds.center.dy + 1.8,
+          ...decals,
-        ),
+          ...characterAreas,
+          Drain(),
+          BottomGroup(),
+          Launcher(),
+        ],
       ),
     );
 
-    controller.attachTo(launcher.components.whereType<Plunger>().single);
     await super.onLoad();
   }
 
@@ -80,12 +87,12 @@ class PinballGame extends Forge2DGame
   @override
   void onTapDown(TapDownInfo info) {
     if (info.raw.kind == PointerDeviceKind.touch) {
-      final rocket = children.whereType<RocketSpriteComponent>().first;
+      final rocket = descendants().whereType<RocketSpriteComponent>().first;
       final bounds = rocket.topLeftPosition & rocket.size;
 
       // NOTE(wolfen): As long as Flame does not have https://github.com/flame-engine/flame/issues/1586 we need to check it at the highest level manually.
       if (bounds.contains(info.eventPosition.game.toOffset())) {
-        children.whereType<Plunger>().first.pull();
+        descendants().whereType<Plunger>().single.pullFor(2);
       } else {
         final leftSide = info.eventPosition.widget.x < canvasSize.x / 2;
         focusedBoardSide = leftSide ? BoardSide.left : BoardSide.right;
@@ -101,21 +108,12 @@ class PinballGame extends Forge2DGame
 
   @override
   void onTapUp(TapUpInfo info) {
-    final rocket = descendants().whereType<RocketSpriteComponent>().first;
-    final bounds = rocket.topLeftPosition & rocket.size;
-
-    if (bounds.contains(info.eventPosition.game.toOffset())) {
-      children.whereType<Plunger>().first.release();
-    } else {
     _moveFlippersDown();
-    }
     super.onTapUp(info);
   }
 
   @override
   void onTapCancel() {
-    children.whereType<Plunger>().first.release();
-
     _moveFlippersDown();
     super.onTapCancel();
   }
@@ -135,8 +133,6 @@ class _GameBallsController extends ComponentController<PinballGame>
     with BlocComponent<GameBloc, GameState> {
   _GameBallsController(PinballGame game) : super(game);
 
-  late final Plunger _plunger;
-
   @override
   bool listenWhen(GameState? previousState, GameState newState) {
     final noBallsLeft = component.descendants().whereType<Ball>().isEmpty;
@@ -148,30 +144,27 @@ class _GameBallsController extends ComponentController<PinballGame>
   @override
   void onNewState(GameState state) {
     super.onNewState(state);
-    _spawnBall();
+    spawnBall();
   }
 
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-    _spawnBall();
+    spawnBall();
   }
 
-  void _spawnBall() {
+  void spawnBall() {
+    // TODO(alestiago): Refactor with behavioural pattern.
+    component.ready().whenComplete(() {
+      final plunger = parent!.descendants().whereType<Plunger>().single;
       final ball = ControlledBall.launch(
         characterTheme: component.characterTheme,
       )..initialPosition = Vector2(
-        _plunger.body.position.x,
+          plunger.body.position.x,
-        _plunger.body.position.y - Ball.size.y,
+          plunger.body.position.y - Ball.size.y,
         );
-    component.add(ball);
+      component.firstChild<ZCanvasComponent>()?.add(ball);
-  }
+    });
-
-  /// Attaches the controller to the plunger.
-  // TODO(alestiago): Remove this method and use onLoad instead.
-  // ignore: use_setters_to_change_properties
-  void attachTo(Plunger plunger) {
-    _plunger = plunger;
   }
 }
 
@@ -185,7 +178,7 @@ class DebugPinballGame extends PinballGame with FPSCounter {
           audio: audio,
           l10n: l10n,
         ) {
-    controller = _DebugGameBallsController(this);
+    controller = _GameBallsController(this);
   }
 
   @override
@@ -194,42 +187,21 @@ class DebugPinballGame extends PinballGame with FPSCounter {
     await add(_DebugInformation());
   }
 
-  // TODO(allisonryan0002): Remove after google letters have been correctly
-  // placed.
-  // Future<void> _loadBackground() async {
-  //   final sprite = await loadSprite(
-  //     Assets.images.components.background.path,
-  //   );
-  //   final spriteComponent = SpriteComponent(
-  //     sprite: sprite,
-  //     size: Vector2(120, 160),
-  //     anchor: Anchor.center,
-  //   )
-  //     ..position = Vector2(0, -7.8)
-  //     ..priority = RenderPriority.boardBackground;
-
-  //   await add(spriteComponent);
-  // }
-
   @override
   void onTapUp(TapUpInfo info) {
     super.onTapUp(info);
 
     if (info.raw.kind == PointerDeviceKind.mouse) {
-      add(ControlledBall.debug()..initialPosition = info.eventPosition.game);
+      final ball = ControlledBall.debug()
-    }
+        ..initialPosition = info.eventPosition.game;
+      firstChild<ZCanvasComponent>()?.add(ball);
     }
   }
-
-class _DebugGameBallsController extends _GameBallsController {
-  _DebugGameBallsController(PinballGame game) : super(game);
 }
 
 // TODO(wolfenrain): investigate this CI failure.
 // coverage:ignore-start
 class _DebugInformation extends Component with HasGameRef<DebugPinballGame> {
-  _DebugInformation() : super(priority: RenderPriority.debugInfo);
-
   @override
   PositionType get positionType => PositionType.widget;
 

lib/game/view/pinball_game_page.dart

@@ -4,11 +4,13 @@ import 'package:flame/game.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:pinball/assets_manager/assets_manager.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball/select_character/select_character.dart';
 import 'package:pinball/start_game/start_game.dart';
 import 'package:pinball_audio/pinball_audio.dart';
+import 'package:pinball_ui/pinball_ui.dart';
 
 class PinballGamePage extends StatelessWidget {
   const PinballGamePage({
@@ -53,15 +55,14 @@ class PinballGamePage extends StatelessWidget {
       ...game.preLoadAssets(),
       pinballAudio.load(),
       ...BonusAnimation.loadAssets(),
+      ...SelectedCharacter.loadAssets(),
     ];
 
     return MultiBlocProvider(
       providers: [
         BlocProvider(create: (_) => StartGameBloc(game: game)),
         BlocProvider(create: (_) => GameBloc()),
-        BlocProvider(
+        BlocProvider(create: (_) => AssetsManagerCubit(loadables)..load()),
-          create: (_) => AssetsManagerCubit(loadables)..load(),
-        ),
       ],
       child: PinballGameView(game: game),
     );
@@ -81,32 +82,13 @@ class PinballGameView extends StatelessWidget {
     final isLoading = context.select(
       (AssetsManagerCubit bloc) => bloc.state.progress != 1,
     );
-
+    return Container(
-    return Scaffold(
+      decoration: const CrtBackground(),
-      backgroundColor: Colors.blue,
+      child: Scaffold(
+        backgroundColor: PinballColors.transparent,
         body: isLoading
-          ? const _PinballGameLoadingView()
+            ? const AssetsLoadingPage()
             : 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,
-        ),
       ),
     );
   }

lib/game/view/widgets/bonus_animation.dart

@@ -126,7 +126,7 @@ class _BonusAnimationState extends State<BonusAnimation>
     );
     animation = spriteSheet.createAnimation(
       row: 0,
-      stepTime: 1 / 24,
+      stepTime: 1 / 12,
       to: spriteSheet.rows * spriteSheet.columns,
       loop: false,
     );

lib/game/view/widgets/play_button_overlay.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:pinball/game/pinball_game.dart';
 import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball/select_character/select_character.dart';
+import 'package:pinball_ui/pinball_ui.dart';
 
 /// {@template play_button_overlay}
 /// [Widget] that renders the button responsible to starting the game
@@ -20,29 +21,12 @@ class PlayButtonOverlay extends StatelessWidget {
   Widget build(BuildContext context) {
     final l10n = context.l10n;
 
-    return Center(
+    return PinballButton(
-      child: ElevatedButton(
+      text: l10n.play,
-        onPressed: () {
+      onTap: () async {
         _game.gameFlowController.start();
-          showDialog<void>(
+        await showCharacterSelectionDialog(context);
-            context: context,
-            barrierDismissible: false,
-            builder: (_) {
-              // TODO(arturplaczek): remove after merge StarBlocListener
-              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/gen/assets.gen.dart

@@ -44,10 +44,6 @@ class $AssetsImagesBonusAnimationGen {
 class $AssetsImagesComponentsGen {
   const $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');

lib/how_to_play/how_to_play.dart

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

lib/how_to_play/widgets/how_to_play_dialog.dart

@@ -3,12 +3,13 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:pinball/gen/gen.dart';
 import 'package:pinball/l10n/l10n.dart';
+import 'package:pinball_audio/pinball_audio.dart';
 import 'package:pinball_ui/pinball_ui.dart';
 import 'package:platform_helper/platform_helper.dart';
 
-@visibleForTesting
 enum Control {
   left,
   right,
@@ -50,6 +51,16 @@ extension on Control {
   }
 }
 
+Future<void> showHowToPlayDialog(BuildContext context) {
+  final audio = context.read<PinballAudio>();
+  return showDialog<void>(
+    context: context,
+    builder: (_) => HowToPlayDialog(),
+  ).then((_) {
+    audio.ioPinballVoiceOver();
+  });
+}
+
 class HowToPlayDialog extends StatefulWidget {
   HowToPlayDialog({
     Key? key,
@@ -70,7 +81,7 @@ class _HowToPlayDialogState extends State<HowToPlayDialog> {
     super.initState();
     closeTimer = Timer(const Duration(seconds: 3), () {
       if (mounted) {
-        Navigator.of(context).maybePop();
+        Navigator.of(context).pop();
       }
     });
   }
@@ -84,9 +95,11 @@ class _HowToPlayDialogState extends State<HowToPlayDialog> {
   @override
   Widget build(BuildContext context) {
     final isMobile = widget.platformHelper.isMobile;
-    return PixelatedDecoration(
+    final l10n = context.l10n;
-      header: const _HowToPlayHeader(),
+    return PinballDialog(
-      body: isMobile ? const _MobileBody() : const _DesktopBody(),
+      title: l10n.howToPlay,
+      subtitle: l10n.tipsForFlips,
+      child: isMobile ? const _MobileBody() : const _DesktopBody(),
     );
   }
 }
@@ -121,23 +134,20 @@ class _MobileLaunchControls extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    final textStyle = Theme.of(context).textTheme.headline3;
+    final headline3 = Theme.of(context)
+        .textTheme
+        .headline3!
+        .copyWith(color: PinballColors.white);
     return Column(
       children: [
-        Text(
+        Text(l10n.tapAndHoldRocket, style: headline3),
-          l10n.tapAndHoldRocket,
-          style: textStyle,
-        ),
         Text.rich(
           TextSpan(
             children: [
-              TextSpan(
+              TextSpan(text: '${l10n.to} ', style: headline3),
-                text: '${l10n.to} ',
-                style: textStyle,
-              ),
               TextSpan(
                 text: l10n.launch,
-                style: textStyle?.copyWith(color: PinballColors.blue),
+                style: headline3.copyWith(color: PinballColors.blue),
               ),
             ],
           ),
@@ -153,23 +163,20 @@ class _MobileFlipperControls extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    final textStyle = Theme.of(context).textTheme.headline3;
+    final headline3 = Theme.of(context)
+        .textTheme
+        .headline3!
+        .copyWith(color: PinballColors.white);
     return Column(
       children: [
-        Text(
+        Text(l10n.tapLeftRightScreen, style: headline3),
-          l10n.tapLeftRightScreen,
-          style: textStyle,
-        ),
         Text.rich(
           TextSpan(
             children: [
-              TextSpan(
+              TextSpan(text: '${l10n.to} ', style: headline3),
-                text: '${l10n.to} ',
-                style: textStyle,
-              ),
               TextSpan(
                 text: l10n.flip,
-                style: textStyle?.copyWith(color: PinballColors.orange),
+                style: headline3.copyWith(color: PinballColors.orange),
               ),
             ],
           ),
@@ -184,55 +191,23 @@ class _DesktopBody extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    const spacing = SizedBox(height: 16);
     return ListView(
       children: const [
-        spacing,
+        SizedBox(height: 16),
         _DesktopLaunchControls(),
-        spacing,
+        SizedBox(height: 16),
         _DesktopFlipperControls(),
       ],
     );
   }
 }
 
-class _HowToPlayHeader extends StatelessWidget {
-  const _HowToPlayHeader({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = context.l10n;
-    final textStyle = Theme.of(context).textTheme.headline3?.copyWith(
-          color: PinballColors.darkBlue,
-        );
-    return FittedBox(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Text(
-            l10n.howToPlay,
-            style: textStyle?.copyWith(
-              fontWeight: FontWeight.bold,
-            ),
-          ),
-          Text(
-            l10n.tipsForFlips,
-            style: textStyle,
-          ),
-        ],
-      ),
-    );
-  }
-}
-
 class _DesktopLaunchControls extends StatelessWidget {
   const _DesktopLaunchControls({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    const spacing = SizedBox(width: 10);
-
     return Column(
       children: [
         Text(
@@ -242,11 +217,11 @@ class _DesktopLaunchControls extends StatelessWidget {
         const SizedBox(height: 10),
         Wrap(
           children: const [
-            KeyButton(control: Control.down),
+            _KeyButton(control: Control.down),
-            spacing,
+            SizedBox(width: 10),
-            KeyButton(control: Control.space),
+            _KeyButton(control: Control.space),
-            spacing,
+            SizedBox(width: 10),
-            KeyButton(control: Control.s),
+            _KeyButton(control: Control.s),
           ],
         )
       ],
@@ -260,8 +235,6 @@ class _DesktopFlipperControls extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    const rowSpacing = SizedBox(width: 20);
-
     return Column(
       children: [
         Text(
@@ -275,17 +248,17 @@ class _DesktopFlipperControls extends StatelessWidget {
               mainAxisSize: MainAxisSize.min,
               mainAxisAlignment: MainAxisAlignment.center,
               children: const [
-                KeyButton(control: Control.left),
+                _KeyButton(control: Control.left),
-                rowSpacing,
+                SizedBox(width: 20),
-                KeyButton(control: Control.right),
+                _KeyButton(control: Control.right),
               ],
             ),
             const SizedBox(height: 8),
             Wrap(
               children: const [
-                KeyButton(control: Control.a),
+                _KeyButton(control: Control.a),
-                rowSpacing,
+                SizedBox(width: 20),
-                KeyButton(control: Control.d),
+                _KeyButton(control: Control.d),
               ],
             )
           ],
@@ -295,29 +268,24 @@ class _DesktopFlipperControls extends StatelessWidget {
   }
 }
 
-@visibleForTesting
+class _KeyButton extends StatelessWidget {
-class KeyButton extends StatelessWidget {
+  const _KeyButton({Key? key, required this.control}) : super(key: key);
-  const KeyButton({
-    Key? key,
-    required Control control,
-  })  : _control = control,
-        super(key: key);
 
-  final Control _control;
+  final Control control;
 
   @override
   Widget build(BuildContext context) {
     final textTheme = Theme.of(context).textTheme;
     final textStyle =
-        _control.isArrow ? textTheme.headline1 : textTheme.headline3;
+        control.isArrow ? textTheme.headline1 : textTheme.headline3;
     const height = 60.0;
-    final width = _control.isSpace ? height * 2.83 : height;
+    final width = control.isSpace ? height * 2.83 : height;
     return DecoratedBox(
       decoration: BoxDecoration(
         image: DecorationImage(
           fit: BoxFit.fill,
           image: AssetImage(
-            _control.isSpace
+            control.isSpace
                 ? Assets.images.components.space.keyName
                 : Assets.images.components.key.keyName,
           ),
@@ -328,9 +296,9 @@ class KeyButton extends StatelessWidget {
         height: height,
         child: Center(
           child: RotatedBox(
-            quarterTurns: _control.isDown ? 1 : 0,
+            quarterTurns: control.isDown ? 1 : 0,
             child: Text(
-              _control.getCharacter(context),
+              control.getCharacter(context),
               style: textStyle?.copyWith(color: PinballColors.white),
             ),
           ),

lib/l10n/arb/app_en.arb

@@ -20,7 +20,7 @@
   "@flipperControls": {
     "description": "Text displayed on the how to play dialog with the flipper controls"
   },
-  "tapAndHoldRocket": "Tap & Hold Rocket",
+  "tapAndHoldRocket": "Tap Rocket",
   "@tapAndHoldRocket": {
     "description": "Text displayed on the how to launch on mobile"
   },
@@ -46,19 +46,19 @@
   },
   "select": "Select",
   "@select": {
-    "description": "Text displayed on the character selection page select button"
+    "description": "Text displayed on the character selection dialog - select button"
   },
   "space": "Space",
   "@space": {
     "description": "Text displayed on space control button"
   },
-  "characterSelectionTitle": "Choose your character!",
+  "characterSelectionTitle": "Select a Character",
   "@characterSelectionTitle": {
-    "description": "Title text displayed on the character selection page"
+    "description": "Title text displayed on the character selection dialog"
   },
-  "characterSelectionSubtitle": "There’s no wrong answer",
+  "characterSelectionSubtitle": "There’s no wrong choice!",
   "@characterSelectionSubtitle": {
-    "description": "Text displayed on the selecting character dialog at game beginning"
+    "description": "Subtitle text displayed on the character selection dialog"
   },
   "gameOver": "Game Over",
   "@gameOver": {
@@ -119,5 +119,13 @@
   "footerGoogleIOText": "Google I/O",
   "@footerGoogleIOText": {
     "description": "Text shown on the footer which mentions Google I/O"
+  },
+  "loading": "Loading",
+  "@loading": {
+    "description": "Text shown to indicate loading times"
+  },
+  "ioPinball": "I/O Pinball",
+  "@ioPinball": {
+    "description": "I/O Pinball - Name of the game"
   }
 }

lib/l10n/l10n.dart

@@ -1,10 +1,3 @@
-// Copyright (c) 2021, Very Good Ventures
-// https://verygood.ventures
-//
-// Use of this source code is governed by an MIT-style
-// license that can be found in the LICENSE file or at
-// https://opensource.org/licenses/MIT.
-
 // ignore_for_file: public_member_api_docs
 
 import 'package:flutter/widgets.dart';

lib/main_development.dart

@@ -1,10 +1,3 @@
-// Copyright (c) 2021, Very Good Ventures
-// https://verygood.ventures
-//
-// Use of this source code is governed by an MIT-style
-// license that can be found in the LICENSE file or at
-// https://opensource.org/licenses/MIT.
-
 import 'dart:async';
 
 import 'package:authentication_repository/authentication_repository.dart';

lib/main_production.dart

@@ -1,10 +1,3 @@
-// Copyright (c) 2021, Very Good Ventures
-// https://verygood.ventures
-//
-// Use of this source code is governed by an MIT-style
-// license that can be found in the LICENSE file or at
-// https://opensource.org/licenses/MIT.
-
 import 'dart:async';
 
 import 'package:authentication_repository/authentication_repository.dart';

lib/main_staging.dart

@@ -1,10 +1,3 @@
-// Copyright (c) 2021, Very Good Ventures
-// https://verygood.ventures
-//
-// Use of this source code is governed by an MIT-style
-// license that can be found in the LICENSE file or at
-// https://opensource.org/licenses/MIT.
-
 import 'dart:async';
 
 import 'package:authentication_repository/authentication_repository.dart';

lib/select_character/cubit/character_theme_state.dart

@@ -10,6 +10,14 @@ class CharacterThemeState extends Equatable {
 
   final CharacterTheme characterTheme;
 
+  bool get isSparkySelected => characterTheme == const SparkyTheme();
+
+  bool get isDashSelected => characterTheme == const DashTheme();
+
+  bool get isAndroidSelected => characterTheme == const AndroidTheme();
+
+  bool get isDinoSelected => characterTheme == const DinoTheme();
+
   @override
   List<Object> get props => [characterTheme];
 }

lib/select_character/view/character_selection_page.dart

@@ -1,67 +1,48 @@
-// ignore_for_file: public_member_api_docs
-
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:pinball/how_to_play/how_to_play.dart';
 import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball/select_character/select_character.dart';
-import 'package:pinball/start_game/start_game.dart';
 import 'package:pinball_theme/pinball_theme.dart';
 import 'package:pinball_ui/pinball_ui.dart';
 
-class CharacterSelectionDialog extends StatelessWidget {
+/// Inflates [CharacterSelectionDialog] using [showDialog].
-  const CharacterSelectionDialog({Key? key}) : super(key: key);
+Future<void> showCharacterSelectionDialog(BuildContext context) {
-
+  return showDialog<void>(
-  static Route route() {
+    context: context,
-    return MaterialPageRoute<void>(
+    barrierDismissible: false,
     builder: (_) => const CharacterSelectionDialog(),
   );
 }
 
-  @override
+/// {@template character_selection_dialog}
-  Widget build(BuildContext context) {
+/// Dialog used to select the playing character of the game.
-    return BlocProvider(
+/// {@endtemplate character_selection_dialog}
-      create: (_) => CharacterThemeCubit(),
+class CharacterSelectionDialog extends StatelessWidget {
-      child: const CharacterSelectionView(),
+  /// {@macro character_selection_dialog}
-    );
+  const CharacterSelectionDialog({Key? key}) : super(key: key);
-  }
-}
-
-class CharacterSelectionView extends StatelessWidget {
-  const CharacterSelectionView({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-
+    return PinballDialog(
-    return PixelatedDecoration(
+      title: l10n.characterSelectionTitle,
-      header: Text(
+      subtitle: l10n.characterSelectionSubtitle,
-        l10n.characterSelectionTitle,
+      child: Padding(
-        style: Theme.of(context).textTheme.headline3,
+        padding: const EdgeInsets.all(12),
-      ),
-      body: SingleChildScrollView(
         child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            const _CharacterSelectionGridView(),
+            Expanded(
-            const SizedBox(height: 20),
+              child: Row(
-            TextButton(
+                children: [
-              onPressed: () {
+                  Expanded(child: _CharacterPreview()),
-                Navigator.of(context).pop();
+                  Expanded(child: _CharacterGrid()),
-                // TODO(arturplaczek): remove after merge StarBlocListener
+                ],
-                final height = MediaQuery.of(context).size.height * 0.5;
-                showDialog<void>(
-                  context: context,
-                  builder: (_) => Center(
-                    child: SizedBox(
-                      height: height,
-                      width: height * 1.4,
-                      child: HowToPlayDialog(),
-                    ),
               ),
-                );
-              },
-              child: Text(l10n.start),
             ),
+            const SizedBox(height: 8),
+            const _SelectCharacterButton(),
           ],
         ),
       ),
@@ -69,71 +50,98 @@ class CharacterSelectionView extends StatelessWidget {
   }
 }
 
-class _CharacterSelectionGridView extends StatelessWidget {
+class _SelectCharacterButton extends StatelessWidget {
-  const _CharacterSelectionGridView({Key? key}) : super(key: key);
+  const _SelectCharacterButton({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    final l10n = context.l10n;
-      padding: const EdgeInsets.all(20),
+    return PinballButton(
-      child: GridView.count(
+      onTap: () async {
-        shrinkWrap: true,
+        Navigator.of(context).pop();
-        crossAxisCount: 2,
+        await showHowToPlayDialog(context);
-        mainAxisSpacing: 20,
+      },
-        crossAxisSpacing: 20,
+      text: l10n.select,
-        children: const [
+    );
-          CharacterImageButton(
+  }
-            DashTheme(),
+}
-            key: Key('characterSelectionPage_dashButton'),
+
+class _CharacterGrid extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<CharacterThemeCubit, CharacterThemeState>(
+      builder: (context, state) {
+        return Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Column(
+              children: [
+                _Character(
+                  key: const Key('sparky_character_selection'),
+                  character: const SparkyTheme(),
+                  isSelected: state.isSparkySelected,
+                ),
+                const SizedBox(height: 6),
+                _Character(
+                  key: const Key('android_character_selection'),
+                  character: const AndroidTheme(),
+                  isSelected: state.isAndroidSelected,
                 ),
-          CharacterImageButton(
+              ],
-            SparkyTheme(),
-            key: Key('characterSelectionPage_sparkyButton'),
             ),
-          CharacterImageButton(
+            const SizedBox(width: 6),
-            AndroidTheme(),
+            Column(
-            key: Key('characterSelectionPage_androidButton'),
+              children: [
+                _Character(
+                  key: const Key('dash_character_selection'),
+                  character: const DashTheme(),
+                  isSelected: state.isDashSelected,
                 ),
-          CharacterImageButton(
+                const SizedBox(height: 6),
-            DinoTheme(),
+                _Character(
-            key: Key('characterSelectionPage_dinoButton'),
+                  key: const Key('dino_character_selection'),
+                  character: const DinoTheme(),
+                  isSelected: state.isDinoSelected,
                 ),
               ],
             ),
+          ],
+        );
+      },
     );
   }
 }
 
-// TODO(allisonryan0002): remove visibility when adding final UI.
+class _CharacterPreview extends StatelessWidget {
-@visibleForTesting
+  @override
-class CharacterImageButton extends StatelessWidget {
+  Widget build(BuildContext context) {
-  const CharacterImageButton(
+    return BlocBuilder<CharacterThemeCubit, CharacterThemeState>(
-    this.characterTheme, {
+      builder: (context, state) {
+        return SelectedCharacter(currentCharacter: state.characterTheme);
+      },
+    );
+  }
+}
+
+class _Character extends StatelessWidget {
+  const _Character({
     Key? key,
+    required this.character,
+    required this.isSelected,
   }) : super(key: key);
 
-  final CharacterTheme characterTheme;
+  final CharacterTheme character;
+  final bool isSelected;
 
   @override
   Widget build(BuildContext context) {
-    final currentCharacterTheme =
+    return Expanded(
-        context.select<CharacterThemeCubit, CharacterTheme>(
+      child: Opacity(
-      (cubit) => cubit.state.characterTheme,
+        opacity: isSelected ? 1 : 0.3,
-    );
+        child: TextButton(
-
+          onPressed: () =>
-    return GestureDetector(
+              context.read<CharacterThemeCubit>().characterSelected(character),
-      onTap: () =>
+          child: character.icon.image(fit: BoxFit.contain),
-          context.read<CharacterThemeCubit>().characterSelected(characterTheme),
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          color: (currentCharacterTheme == characterTheme)
-              ? Colors.blue.withOpacity(0.5)
-              : null,
-          borderRadius: BorderRadius.circular(6),
-        ),
-        child: Padding(
-          padding: const EdgeInsets.all(8),
-          child: characterTheme.icon.image(),
         ),
       ),
     );

lib/select_character/view/selected_character.dart

@@ -0,0 +1,102 @@
+import 'package:flame/components.dart';
+import 'package:flame/flame.dart';
+import 'package:flame/sprite.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+import 'package:pinball_theme/pinball_theme.dart';
+
+/// {@template selected_character}
+/// Shows an animated version of the character currently selected.
+/// {@endtemplate}
+class SelectedCharacter extends StatefulWidget {
+  /// {@macro selected_character}
+  const SelectedCharacter({
+    Key? key,
+    required this.currentCharacter,
+  }) : super(key: key);
+
+  /// The character that is selected at the moment.
+  final CharacterTheme currentCharacter;
+
+  @override
+  State<SelectedCharacter> createState() => _SelectedCharacterState();
+
+  /// Returns a list of assets to be loaded.
+  static List<Future> loadAssets() {
+    return [
+      Flame.images.load(const DashTheme().animation.keyName),
+      Flame.images.load(const AndroidTheme().animation.keyName),
+      Flame.images.load(const DinoTheme().animation.keyName),
+      Flame.images.load(const SparkyTheme().animation.keyName),
+    ];
+  }
+}
+
+class _SelectedCharacterState extends State<SelectedCharacter>
+    with TickerProviderStateMixin {
+  SpriteAnimationController? _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _setupCharacterAnimation();
+  }
+
+  @override
+  void didUpdateWidget(covariant SelectedCharacter oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _setupCharacterAnimation();
+  }
+
+  @override
+  void dispose() {
+    _controller?.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Text(
+          widget.currentCharacter.name,
+          style: Theme.of(context).textTheme.headline2,
+          overflow: TextOverflow.ellipsis,
+          textAlign: TextAlign.center,
+        ),
+        const SizedBox(height: 10),
+        Expanded(
+          child: LayoutBuilder(
+            builder: (context, constraints) {
+              return SizedBox(
+                width: constraints.maxWidth,
+                height: constraints.maxHeight,
+                child: SpriteAnimationWidget(
+                  controller: _controller!,
+                  anchor: Anchor.center,
+                ),
+              );
+            },
+          ),
+        ),
+      ],
+    );
+  }
+
+  void _setupCharacterAnimation() {
+    final spriteSheet = SpriteSheet.fromColumnsAndRows(
+      image: Flame.images.fromCache(widget.currentCharacter.animation.keyName),
+      columns: 12,
+      rows: 6,
+    );
+    final animation = spriteSheet.createAnimation(
+      row: 0,
+      stepTime: 1 / 24,
+      to: spriteSheet.rows * spriteSheet.columns,
+    );
+    if (_controller != null) _controller?.dispose();
+    _controller = SpriteAnimationController(vsync: this, animation: animation)
+      ..forward()
+      ..repeat();
+  }
+}

lib/select_character/view/view.dart

@@ -1 +1,2 @@
 export 'character_selection_page.dart';
+export 'selected_character.dart';

lib/start_game/start_game.dart

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

packages/authentication_repository/test/src/authentication_repository_test.dart

@@ -3,9 +3,9 @@ import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
 
-class MockFirebaseAuth extends Mock implements FirebaseAuth {}
+class _MockFirebaseAuth extends Mock implements FirebaseAuth {}
 
-class MockUserCredential extends Mock implements UserCredential {}
+class _MockUserCredential extends Mock implements UserCredential {}
 
 void main() {
   late FirebaseAuth firebaseAuth;
@@ -14,8 +14,8 @@ void main() {
 
   group('AuthenticationRepository', () {
     setUp(() {
-      firebaseAuth = MockFirebaseAuth();
+      firebaseAuth = _MockFirebaseAuth();
-      userCredential = MockUserCredential();
+      userCredential = _MockUserCredential();
       authenticationRepository = AuthenticationRepository(firebaseAuth);
     });
 

packages/leaderboard_repository/test/src/leaderboard_repository_test.dart

@@ -5,23 +5,23 @@ import 'package:leaderboard_repository/leaderboard_repository.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:test/test.dart';
 
-class MockFirebaseFirestore extends Mock implements FirebaseFirestore {}
+class _MockFirebaseFirestore extends Mock implements FirebaseFirestore {}
 
-class MockCollectionReference extends Mock
+class _MockCollectionReference extends Mock
     implements CollectionReference<Map<String, dynamic>> {}
 
-class MockQuery extends Mock implements Query<Map<String, dynamic>> {}
+class _MockQuery extends Mock implements Query<Map<String, dynamic>> {}
 
-class MockQuerySnapshot extends Mock
+class _MockQuerySnapshot extends Mock
     implements QuerySnapshot<Map<String, dynamic>> {}
 
-class MockQueryDocumentSnapshot extends Mock
+class _MockQueryDocumentSnapshot extends Mock
     implements QueryDocumentSnapshot<Map<String, dynamic>> {}
 
-class MockDocumentReference extends Mock
+class _MockDocumentReference extends Mock
     implements DocumentReference<Map<String, dynamic>> {}
 
-class MockDocumentSnapshot extends Mock
+class _MockDocumentSnapshot extends Mock
     implements DocumentSnapshot<Map<String, dynamic>> {}
 
 void main() {
@@ -29,7 +29,7 @@ void main() {
     late FirebaseFirestore firestore;
 
     setUp(() {
-      firestore = MockFirebaseFirestore();
+      firestore = _MockFirebaseFirestore();
     });
 
     test('can be instantiated', () {
@@ -70,11 +70,11 @@ void main() {
 
       setUp(() {
         leaderboardRepository = LeaderboardRepository(firestore);
-        collectionReference = MockCollectionReference();
+        collectionReference = _MockCollectionReference();
-        query = MockQuery();
+        query = _MockQuery();
-        querySnapshot = MockQuerySnapshot();
+        querySnapshot = _MockQuerySnapshot();
         queryDocumentSnapshots = top10Scores.map((score) {
-          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          final queryDocumentSnapshot = _MockQueryDocumentSnapshot();
           when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
             'character': 'dash',
             'playerInitials': 'user$score',
@@ -119,7 +119,7 @@ void main() {
           'playerInitials': 'ABC',
           'score': 1500,
         };
-        final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+        final queryDocumentSnapshot = _MockQueryDocumentSnapshot();
         when(() => querySnapshot.docs).thenReturn([queryDocumentSnapshot]);
         when(queryDocumentSnapshot.data)
             .thenReturn(top10LeaderboardDataMalformed);
@@ -156,12 +156,12 @@ void main() {
 
       setUp(() {
         leaderboardRepository = LeaderboardRepository(firestore);
-        collectionReference = MockCollectionReference();
+        collectionReference = _MockCollectionReference();
-        documentReference = MockDocumentReference();
+        documentReference = _MockDocumentReference();
-        query = MockQuery();
+        query = _MockQuery();
-        querySnapshot = MockQuerySnapshot();
+        querySnapshot = _MockQuerySnapshot();
         queryDocumentSnapshots = leaderboardScores.map((score) {
-          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          final queryDocumentSnapshot = _MockQueryDocumentSnapshot();
           when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
             'character': 'dash',
             'playerInitials': 'AAA',
@@ -228,7 +228,7 @@ void main() {
           5000
         ];
         final queryDocumentSnapshots = leaderboardScores.map((score) {
-          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          final queryDocumentSnapshot = _MockQueryDocumentSnapshot();
           when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
             'character': 'dash',
             'playerInitials': 'AAA',
@@ -248,8 +248,8 @@ void main() {
       test(
           'throws DeleteLeaderboardException '
           'when deleting scores outside the top 10 fails', () async {
-        final deleteQuery = MockQuery();
+        final deleteQuery = _MockQuery();
-        final deleteQuerySnapshot = MockQuerySnapshot();
+        final deleteQuerySnapshot = _MockQuerySnapshot();
         final newScore = LeaderboardEntryData(
           playerInitials: 'ABC',
           score: 15000,
@@ -269,7 +269,7 @@ void main() {
           5000,
         ];
         final deleteDocumentSnapshots = [5500, 5000].map((score) {
-          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          final queryDocumentSnapshot = _MockQueryDocumentSnapshot();
           when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
             'character': 'dash',
             'playerInitials': 'AAA',
@@ -284,7 +284,7 @@ void main() {
         when(() => deleteQuerySnapshot.docs)
             .thenReturn(deleteDocumentSnapshots);
         final queryDocumentSnapshots = leaderboardScores.map((score) {
-          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          final queryDocumentSnapshot = _MockQueryDocumentSnapshot();
           when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
             'character': 'dash',
             'playerInitials': 'AAA',
@@ -310,8 +310,8 @@ void main() {
           'saves the new score when there are more than 10 scores in the '
           'leaderboard and the new score is higher than the lowest top 10, and '
           'deletes the scores that are not in the top 10 anymore', () async {
-        final deleteQuery = MockQuery();
+        final deleteQuery = _MockQuery();
-        final deleteQuerySnapshot = MockQuerySnapshot();
+        final deleteQuerySnapshot = _MockQuerySnapshot();
         final newScore = LeaderboardEntryData(
           playerInitials: 'ABC',
           score: 15000,
@@ -331,7 +331,7 @@ void main() {
           5000,
         ];
         final deleteDocumentSnapshots = [5500, 5000].map((score) {
-          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          final queryDocumentSnapshot = _MockQueryDocumentSnapshot();
           when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
             'character': 'dash',
             'playerInitials': 'AAA',
@@ -346,7 +346,7 @@ void main() {
         when(() => deleteQuerySnapshot.docs)
             .thenReturn(deleteDocumentSnapshots);
         final queryDocumentSnapshots = leaderboardScores.map((score) {
-          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          final queryDocumentSnapshot = _MockQueryDocumentSnapshot();
           when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
             'character': 'dash',
             'playerInitials': 'AAA',
@@ -376,9 +376,9 @@ void main() {
       late DocumentSnapshot<Map<String, dynamic>> documentSnapshot;
 
       setUp(() async {
-        collectionReference = MockCollectionReference();
+        collectionReference = _MockCollectionReference();
-        documentReference = MockDocumentReference();
+        documentReference = _MockDocumentReference();
-        documentSnapshot = MockDocumentSnapshot();
+        documentSnapshot = _MockDocumentSnapshot();
         leaderboardRepository = LeaderboardRepository(firestore);
 
         when(() => firestore.collection('prohibitedInitials'))

packages/pinball_audio/lib/gen/assets.gen.dart

@@ -5,16 +5,24 @@
 
 import 'package:flutter/widgets.dart';
 
+class $AssetsMusicGen {
+  const $AssetsMusicGen();
+
+  String get background => 'assets/music/background.mp3';
+}
+
 class $AssetsSfxGen {
   const $AssetsSfxGen();
 
-  String get google => 'assets/sfx/google.ogg';
+  String get google => 'assets/sfx/google.mp3';
-  String get plim => 'assets/sfx/plim.ogg';
+  String get ioPinballVoiceOver => 'assets/sfx/io_pinball_voice_over.mp3';
+  String get plim => 'assets/sfx/plim.mp3';
 }
 
 class Assets {
   Assets._();
 
+  static const $AssetsMusicGen music = $AssetsMusicGen();
   static const $AssetsSfxGen sfx = $AssetsSfxGen();
 }
 

packages/pinball_audio/lib/src/pinball_audio.dart

@@ -17,6 +17,14 @@ typedef CreateAudioPool = Future<AudioPool> Function(
 /// audio
 typedef PlaySingleAudio = Future<void> Function(String);
 
+/// Function that defines the contract for looping a single
+/// audio
+typedef LoopSingleAudio = Future<void> Function(String);
+
+/// Function that defines the contract for pre fetching an
+/// audio
+typedef PreCacheSingleAudio = Future<void> Function(String);
+
 /// Function that defines the contract for configuring
 /// an [AudioCache] instance
 typedef ConfigureAudioCache = void Function(AudioCache);
@@ -29,9 +37,14 @@ class PinballAudio {
   PinballAudio({
     CreateAudioPool? createAudioPool,
     PlaySingleAudio? playSingleAudio,
+    LoopSingleAudio? loopSingleAudio,
+    PreCacheSingleAudio? preCacheSingleAudio,
     ConfigureAudioCache? configureAudioCache,
   })  : _createAudioPool = createAudioPool ?? AudioPool.create,
         _playSingleAudio = playSingleAudio ?? FlameAudio.audioCache.play,
+        _loopSingleAudio = loopSingleAudio ?? FlameAudio.audioCache.loop,
+        _preCacheSingleAudio =
+            preCacheSingleAudio ?? FlameAudio.audioCache.load,
         _configureAudioCache = configureAudioCache ??
             ((AudioCache a) {
               a.prefix = '';
@@ -41,6 +54,10 @@ class PinballAudio {
 
   final PlaySingleAudio _playSingleAudio;
 
+  final LoopSingleAudio _loopSingleAudio;
+
+  final PreCacheSingleAudio _preCacheSingleAudio;
+
   final ConfigureAudioCache _configureAudioCache;
 
   late AudioPool _scorePool;
@@ -48,11 +65,18 @@ class PinballAudio {
   /// Loads the sounds effects into the memory
   Future<void> load() async {
     _configureAudioCache(FlameAudio.audioCache);
+
     _scorePool = await _createAudioPool(
       _prefixFile(Assets.sfx.plim),
       maxPlayers: 4,
       prefix: '',
     );
+
+    await Future.wait([
+      _preCacheSingleAudio(_prefixFile(Assets.sfx.google)),
+      _preCacheSingleAudio(_prefixFile(Assets.sfx.ioPinballVoiceOver)),
+      _preCacheSingleAudio(_prefixFile(Assets.music.background)),
+    ]);
   }
 
   /// Plays the basic score sound
@@ -65,6 +89,16 @@ class PinballAudio {
     _playSingleAudio(_prefixFile(Assets.sfx.google));
   }
 
+  /// Plays the I/O Pinball voice over audio.
+  void ioPinballVoiceOver() {
+    _playSingleAudio(_prefixFile(Assets.sfx.ioPinballVoiceOver));
+  }
+
+  /// Plays the background music
+  void backgroundMusic() {
+    _loopSingleAudio(_prefixFile(Assets.music.background));
+  }
+
   String _prefixFile(String file) {
     return 'packages/pinball_audio/$file';
   }

packages/pinball_audio/pubspec.yaml

@@ -26,3 +26,4 @@ flutter_gen:
 flutter:
   assets:
     - assets/sfx/
+    - assets/music/

packages/pinball_audio/test/helpers/helpers.dart

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

packages/pinball_audio/test/helpers/mocks.dart

@@ -1,34 +0,0 @@
-// ignore_for_file: one_member_abstracts
-
-import 'package:audioplayers/audioplayers.dart';
-import 'package:flame_audio/audio_pool.dart';
-import 'package:mocktail/mocktail.dart';
-
-abstract class _CreateAudioPoolStub {
-  Future<AudioPool> onCall(
-    String sound, {
-    bool? repeating,
-    int? maxPlayers,
-    int? minPlayers,
-    String? prefix,
-  });
-}
-
-class CreateAudioPoolStub extends Mock implements _CreateAudioPoolStub {}
-
-abstract class _ConfigureAudioCacheStub {
-  void onCall(AudioCache cache);
-}
-
-class ConfigureAudioCacheStub extends Mock implements _ConfigureAudioCacheStub {
-}
-
-abstract class _PlaySingleAudioStub {
-  Future<void> onCall(String url);
-}
-
-class PlaySingleAudioStub extends Mock implements _PlaySingleAudioStub {}
-
-class MockAudioPool extends Mock implements AudioPool {}
-
-class MockAudioCache extends Mock implements AudioCache {}

packages/pinball_audio/test/src/pinball_audio_test.dart

@@ -1,50 +1,92 @@
-// ignore_for_file: prefer_const_constructors
+// ignore_for_file: prefer_const_constructors, one_member_abstracts
+import 'package:audioplayers/audioplayers.dart';
+import 'package:flame_audio/audio_pool.dart';
 import 'package:flame_audio/flame_audio.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:pinball_audio/gen/assets.gen.dart';
 import 'package:pinball_audio/pinball_audio.dart';
 
-import '../helpers/helpers.dart';
+class _MockAudioPool extends Mock implements AudioPool {}
 
-void main() {
+class _MockAudioCache extends Mock implements AudioCache {}
-  group('PinballAudio', () {
+
-    test('can be instantiated', () {
+class _MockCreateAudioPool extends Mock {
-      expect(PinballAudio(), isNotNull);
+  Future<AudioPool> onCall(
+    String sound, {
+    bool? repeating,
+    int? maxPlayers,
+    int? minPlayers,
+    String? prefix,
   });
+}
+
+class _MockConfigureAudioCache extends Mock {
+  void onCall(AudioCache cache);
+}
+
+class _MockPlaySingleAudio extends Mock {
+  Future<void> onCall(String url);
+}
+
+class _MockLoopSingleAudio extends Mock {
+  Future<void> onCall(String url);
+}
+
+abstract class _PreCacheSingleAudio {
+  Future<void> onCall(String url);
+}
+
+class _MockPreCacheSingleAudio extends Mock implements _PreCacheSingleAudio {}
 
-    late CreateAudioPoolStub createAudioPool;
+void main() {
-    late ConfigureAudioCacheStub configureAudioCache;
+  group('PinballAudio', () {
-    late PlaySingleAudioStub playSingleAudio;
+    late _MockCreateAudioPool createAudioPool;
+    late _MockConfigureAudioCache configureAudioCache;
+    late _MockPlaySingleAudio playSingleAudio;
+    late _MockLoopSingleAudio loopSingleAudio;
+    late _PreCacheSingleAudio preCacheSingleAudio;
     late PinballAudio audio;
 
     setUpAll(() {
-      registerFallbackValue(MockAudioCache());
+      registerFallbackValue(_MockAudioCache());
     });
 
     setUp(() {
-      createAudioPool = CreateAudioPoolStub();
+      createAudioPool = _MockCreateAudioPool();
       when(
         () => createAudioPool.onCall(
           any(),
           maxPlayers: any(named: 'maxPlayers'),
           prefix: any(named: 'prefix'),
         ),
-      ).thenAnswer((_) async => MockAudioPool());
+      ).thenAnswer((_) async => _MockAudioPool());
 
-      configureAudioCache = ConfigureAudioCacheStub();
+      configureAudioCache = _MockConfigureAudioCache();
       when(() => configureAudioCache.onCall(any())).thenAnswer((_) {});
 
-      playSingleAudio = PlaySingleAudioStub();
+      playSingleAudio = _MockPlaySingleAudio();
       when(() => playSingleAudio.onCall(any())).thenAnswer((_) async {});
 
+      loopSingleAudio = _MockLoopSingleAudio();
+      when(() => loopSingleAudio.onCall(any())).thenAnswer((_) async {});
+
+      preCacheSingleAudio = _MockPreCacheSingleAudio();
+      when(() => preCacheSingleAudio.onCall(any())).thenAnswer((_) async {});
+
       audio = PinballAudio(
         configureAudioCache: configureAudioCache.onCall,
         createAudioPool: createAudioPool.onCall,
         playSingleAudio: playSingleAudio.onCall,
+        loopSingleAudio: loopSingleAudio.onCall,
+        preCacheSingleAudio: preCacheSingleAudio.onCall,
       );
     });
 
+    test('can be instantiated', () {
+      expect(PinballAudio(), isNotNull);
+    });
+
     group('load', () {
       test('creates the score pool', () async {
         await audio.load();
@@ -69,16 +111,35 @@ void main() {
         audio = PinballAudio(
           createAudioPool: createAudioPool.onCall,
           playSingleAudio: playSingleAudio.onCall,
+          preCacheSingleAudio: preCacheSingleAudio.onCall,
         );
         await audio.load();
 
         expect(FlameAudio.audioCache.prefix, equals(''));
       });
+
+      test('pre cache the assets', () async {
+        await audio.load();
+
+        verify(
+          () => preCacheSingleAudio
+              .onCall('packages/pinball_audio/assets/sfx/google.mp3'),
+        ).called(1);
+        verify(
+          () => preCacheSingleAudio.onCall(
+            'packages/pinball_audio/assets/sfx/io_pinball_voice_over.mp3',
+          ),
+        ).called(1);
+        verify(
+          () => preCacheSingleAudio
+              .onCall('packages/pinball_audio/assets/music/background.mp3'),
+        ).called(1);
+      });
     });
 
     group('score', () {
       test('plays the score sound pool', () async {
-        final audioPool = MockAudioPool();
+        final audioPool = _MockAudioPool();
         when(audioPool.start).thenAnswer((_) async => () {});
         when(
           () => createAudioPool.onCall(
@@ -106,5 +167,30 @@ void main() {
         ).called(1);
       });
     });
+
+    group('ioPinballVoiceOver', () {
+      test('plays the correct file', () async {
+        await audio.load();
+        audio.ioPinballVoiceOver();
+
+        verify(
+          () => playSingleAudio.onCall(
+            'packages/pinball_audio/${Assets.sfx.ioPinballVoiceOver}',
+          ),
+        ).called(1);
+      });
+    });
+
+    group('backgroundMusic', () {
+      test('plays the correct file', () async {
+        await audio.load();
+        audio.backgroundMusic();
+
+        verify(
+          () => loopSingleAudio
+              .onCall('packages/pinball_audio/${Assets.music.background}'),
+        ).called(1);
+      });
+    });
   });
 }