Merge branch 'main' of github.com:VGVentures/pinball into fix/plunger-on-mobile

.github/workflows/authentication_repository.yaml

@@ -0,0 +1,22 @@
+name: authentication_repository
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+on:
+  push:
+    paths:
+      - "packages/authentication_repository/**"
+      - ".github/workflows/authentication_repository.yaml"
+
+  pull_request:
+    paths:
+      - "packages/authentication_repository/**"
+      - ".github/workflows/authentication_repository.yaml"
+
+jobs:
+  build:
+    uses: VeryGoodOpenSource/very_good_workflows/.github/workflows/flutter_package.yml@v1
+    with:
+      working_directory: packages/authentication_repository

.github/workflows/deploy.yaml

@@ -0,0 +1,25 @@
+name: deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy-dev:
+    runs-on: ubuntu-latest
+    name: Deploy Development
+    steps:
+      - uses: actions/checkout@v2
+      - 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
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_PINBALL_DEV }}"
+          channelId: live
+          projectId: pinball-dev
+          target: ashehwkdkdjruejdnensjsjdne

.github/workflows/platform_helper.yaml

@@ -0,0 +1,23 @@
+name: platform_helper
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+on:
+  push:
+    paths:
+      - "packages/platform_helper/**"
+      - ".github/workflows/platform_helper.yaml"
+
+  pull_request:
+    paths:
+      - "packages/platform_helper/**"
+      - ".github/workflows/platform_helper.yaml"
+
+jobs:
+  build:
+    uses: VeryGoodOpenSource/very_good_workflows/.github/workflows/flutter_package.yml@v1
+    with:
+      working_directory: packages/platform_helper
+      coverage_excludes: "lib/gen/*.dart"

lib/app/view/app.dart

@@ -7,6 +7,7 @@
 
 // ignore_for_file: public_member_api_docs
 
+import 'package:authentication_repository/authentication_repository.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
@@ -15,16 +16,20 @@ import 'package:pinball/game/game.dart';
 import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball/select_character/select_character.dart';
 import 'package:pinball_audio/pinball_audio.dart';
+import 'package:pinball_ui/pinball_ui.dart';
 
 class App extends StatelessWidget {
   const App({
     Key? key,
+    required AuthenticationRepository authenticationRepository,
     required LeaderboardRepository leaderboardRepository,
     required PinballAudio pinballAudio,
-  })  : _leaderboardRepository = leaderboardRepository,
+  })  : _authenticationRepository = authenticationRepository,
+        _leaderboardRepository = leaderboardRepository,
         _pinballAudio = pinballAudio,
         super(key: key);
 
+  final AuthenticationRepository _authenticationRepository;
   final LeaderboardRepository _leaderboardRepository;
   final PinballAudio _pinballAudio;
 
@@ -32,19 +37,21 @@ class App extends StatelessWidget {
   Widget build(BuildContext context) {
     return MultiRepositoryProvider(
       providers: [
+        RepositoryProvider.value(value: _authenticationRepository),
         RepositoryProvider.value(value: _leaderboardRepository),
         RepositoryProvider.value(value: _pinballAudio),
       ],
       child: BlocProvider(
         create: (context) => CharacterThemeCubit(),
-        child: const MaterialApp(
+        child: MaterialApp(
           title: 'I/O Pinball',
-          localizationsDelegates: [
+          theme: PinballTheme.standard,
+          localizationsDelegates: const [
             AppLocalizations.delegate,
             GlobalMaterialLocalizations.delegate,
           ],
           supportedLocales: AppLocalizations.supportedLocales,
-          home: PinballGamePage(),
+          home: const PinballGamePage(),
         ),
       ),
     );

lib/bootstrap.dart

@@ -12,6 +12,7 @@ import 'dart:developer';
 
 import 'package:bloc/bloc.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
+import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter/widgets.dart';
 
 class AppBlocObserver extends BlocObserver {
@@ -28,9 +29,12 @@ class AppBlocObserver extends BlocObserver {
   }
 }
 
-Future<void> bootstrap(
+typedef BootstrapBuilder = Future<Widget> Function(
-  Future<Widget> Function(FirebaseFirestore firestore) builder,
+  FirebaseFirestore firestore,
-) async {
+  FirebaseAuth firebaseAuth,
+);
+
+Future<void> bootstrap(BootstrapBuilder builder) async {
   WidgetsFlutterBinding.ensureInitialized();
   FlutterError.onError = (details) {
     log(details.exceptionAsString(), stackTrace: details.stack);
@@ -39,7 +43,12 @@ Future<void> bootstrap(
   await runZonedGuarded(
     () async {
       await BlocOverrides.runZoned(
-        () async => runApp(await builder(FirebaseFirestore.instance)),
+        () async => runApp(
+          await builder(
+            FirebaseFirestore.instance,
+            FirebaseAuth.instance,
+          ),
+        ),
         blocObserver: AppBlocObserver(),
       );
     },

lib/footer/footer.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball/l10n/l10n.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+
+/// {@template footer}
+/// Footer widget with links to the main tech stack.
+/// {@endtemplate}
+class Footer extends StatelessWidget {
+  /// {@macro footer}
+  const Footer({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(50, 0, 50, 32),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: const [
+          _MadeWithFlutterAndFirebase(),
+          _GoogleIO(),
+        ],
+      ),
+    );
+  }
+}
+
+class _GoogleIO extends StatelessWidget {
+  const _GoogleIO({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    final theme = Theme.of(context);
+    return Text(
+      l10n.footerGoogleIOText,
+      style: theme.textTheme.bodyText1!.copyWith(color: PinballColors.white),
+    );
+  }
+}
+
+class _MadeWithFlutterAndFirebase extends StatelessWidget {
+  const _MadeWithFlutterAndFirebase({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    final theme = Theme.of(context);
+    return RichText(
+      textAlign: TextAlign.center,
+      text: TextSpan(
+        text: l10n.footerMadeWithText,
+        style: theme.textTheme.bodyText1!.copyWith(color: PinballColors.white),
+        children: <TextSpan>[
+          TextSpan(
+            text: l10n.footerFlutterLinkText,
+            recognizer: TapGestureRecognizer()
+              ..onTap = () => openLink('https://flutter.dev'),
+            style: const TextStyle(
+              decoration: TextDecoration.underline,
+            ),
+          ),
+          const TextSpan(text: ' & '),
+          TextSpan(
+            text: l10n.footerFirebaseLinkText,
+            recognizer: TapGestureRecognizer()
+              ..onTap = () => openLink('https://firebase.google.com'),
+            style: const TextStyle(
+              decoration: TextDecoration.underline,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/game/components/android_acres.dart

@@ -6,8 +6,8 @@ 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 [Spaceship],
+/// Area positioned on the left side of the board containing the
-/// [SpaceshipRamp], [SpaceshipRail], and [AndroidBumper]s.
+/// [AndroidSpaceship], [SpaceshipRamp], [SpaceshipRail], and [AndroidBumper]s.
 /// {@endtemplate}
 class AndroidAcres extends Blueprint {
   /// {@macro android_acres}
@@ -16,18 +16,23 @@ class AndroidAcres extends Blueprint {
           components: [
             AndroidBumper.a(
               children: [
-                ScoringBehavior(points: 20),
+                ScoringBehavior(points: 20000),
               ],
-            )..initialPosition = Vector2(-32.52, -9.1),
+            )..initialPosition = Vector2(-25, 1.3),
             AndroidBumper.b(
+              children: [
+                ScoringBehavior(points: 20000),
+              ],
+            )..initialPosition = Vector2(-32.8, -9.2),
+            AndroidBumper.cow(
               children: [
                 ScoringBehavior(points: 20),
               ],
-            )..initialPosition = Vector2(-22.89, -17.35),
+            )..initialPosition = Vector2(-20.5, -13.8),
           ],
           blueprints: [
             SpaceshipRamp(),
-            Spaceship(position: Vector2(-26.5, -28.5)),
+            AndroidSpaceship(position: Vector2(-26.5, -28.5)),
             SpaceshipRail(),
           ],
         );

lib/game/components/bottom_group.dart

@@ -16,6 +16,7 @@ class BottomGroup extends Component {
             _BottomGroupSide(side: BoardSide.right),
             _BottomGroupSide(side: BoardSide.left),
           ],
+          priority: RenderPriority.bottomGroup,
         );
 }
 
@@ -28,8 +29,7 @@ class _BottomGroupSide extends Component {
   /// {@macro bottom_group_side}
   _BottomGroupSide({
     required BoardSide side,
-  })  : _side = side,
+  }) : _side = side;
-        super(priority: RenderPriority.bottomGroup);
 
   final BoardSide _side;
 
@@ -48,6 +48,9 @@ class _BottomGroupSide extends Component {
       );
     final kicker = Kicker(
       side: _side,
+      children: [
+        ScoringBehavior(points: 5000),
+      ],
     )..initialPosition = Vector2(
         (22.4 * direction) + centerXAdjustment,
         25,

lib/game/components/components.dart

@@ -10,5 +10,6 @@ export 'flutter_forest/flutter_forest.dart';
 export 'game_flow_controller.dart';
 export 'google_word/google_word.dart';
 export 'launcher.dart';
+export 'multipliers/multipliers.dart';
 export 'scoring_behavior.dart';
 export 'sparky_fire_zone.dart';

lib/game/components/flutter_forest/flutter_forest.dart

@@ -23,17 +23,17 @@ class FlutterForest extends Component {
             )..initialPosition = Vector2(8.35, -58.3),
             DashNestBumper.main(
               children: [
-                ScoringBehavior(points: 20),
+                ScoringBehavior(points: 200000),
               ],
             )..initialPosition = Vector2(18.55, -59.35),
             DashNestBumper.a(
               children: [
-                ScoringBehavior(points: 20),
+                ScoringBehavior(points: 20000),
               ],
             )..initialPosition = Vector2(8.95, -51.95),
             DashNestBumper.b(
               children: [
-                ScoringBehavior(points: 20),
+                ScoringBehavior(points: 20000),
               ],
             )..initialPosition = Vector2(23.3, -46.75),
             DashAnimatronic()..position = Vector2(20, -66),

lib/game/components/google_word/google_word.dart

@@ -1,6 +1,7 @@
 import 'package:flame/components.dart';
 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';
 
 /// {@template google_word}
@@ -12,12 +13,30 @@ class GoogleWord extends Component {
     required Vector2 position,
   }) : super(
           children: [
-            GoogleLetter(0)..initialPosition = position + Vector2(-12.92, 1.82),
+            GoogleLetter(
-            GoogleLetter(1)..initialPosition = position + Vector2(-8.33, -0.65),
+              0,
-            GoogleLetter(2)..initialPosition = position + Vector2(-2.88, -1.75),
+              children: [ScoringBehavior(points: 5000)],
-            GoogleLetter(3)..initialPosition = position + Vector2(2.88, -1.75),
+            )..initialPosition = position + Vector2(-12.92, 1.82),
-            GoogleLetter(4)..initialPosition = position + Vector2(8.33, -0.65),
+            GoogleLetter(
-            GoogleLetter(5)..initialPosition = position + Vector2(12.92, 1.82),
+              1,
+              children: [ScoringBehavior(points: 5000)],
+            )..initialPosition = position + Vector2(-8.33, -0.65),
+            GoogleLetter(
+              2,
+              children: [ScoringBehavior(points: 5000)],
+            )..initialPosition = position + Vector2(-2.88, -1.75),
+            GoogleLetter(
+              3,
+              children: [ScoringBehavior(points: 5000)],
+            )..initialPosition = position + Vector2(2.88, -1.75),
+            GoogleLetter(
+              4,
+              children: [ScoringBehavior(points: 5000)],
+            )..initialPosition = position + Vector2(8.33, -0.65),
+            GoogleLetter(
+              5,
+              children: [ScoringBehavior(points: 5000)],
+            )..initialPosition = position + Vector2(12.92, 1.82),
             GoogleWordBonusBehavior(),
           ],
         );

lib/game/components/launcher.dart

@@ -12,9 +12,9 @@ class Launcher extends Blueprint {
   Launcher()
       : super(
           components: [
-            ControlledPlunger(compressionDistance: 14)
+            ControlledPlunger(compressionDistance: 10.5)
-              ..initialPosition = Vector2(40.7, 38),
+              ..initialPosition = Vector2(41.1, 43),
-            RocketSpriteComponent()..position = Vector2(43, 62),
+            RocketSpriteComponent()..position = Vector2(43, 62.3),
           ],
           blueprints: [LaunchRamp()],
         );

lib/game/components/multipliers/behaviors/behaviors.dart

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

lib/game/components/multipliers/behaviors/multipliers_behavior.dart

@@ -0,0 +1,25 @@
+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 [Multiplier] when GameState.multiplier changes.
+class MultipliersBehavior extends Component
+    with
+        HasGameRef<PinballGame>,
+        ParentIsA<Multipliers>,
+        BlocComponent<GameBloc, GameState> {
+  @override
+  bool listenWhen(GameState? previousState, GameState newState) {
+    return previousState?.multiplier != newState.multiplier;
+  }
+
+  @override
+  void onNewState(GameState state) {
+    final multipliers = parent.children.whereType<Multiplier>();
+    for (final multiplier in multipliers) {
+      multiplier.bloc.next(state.multiplier);
+    }
+  }
+}

lib/game/components/multipliers/multipliers.dart

@@ -0,0 +1,44 @@
+import 'dart:math' as math;
+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';
+
+/// {@template multipliers}
+/// A group for the multipliers on the board.
+/// {@endtemplate}
+class Multipliers extends Component {
+  /// {@macro multipliers}
+  Multipliers()
+      : super(
+          children: [
+            Multiplier.x2(
+              position: Vector2(-19.5, -2),
+              angle: -15 * math.pi / 180,
+            ),
+            Multiplier.x3(
+              position: Vector2(13, -9.4),
+              angle: 15 * math.pi / 180,
+            ),
+            Multiplier.x4(
+              position: Vector2(0, -21.2),
+              angle: 0,
+            ),
+            Multiplier.x5(
+              position: Vector2(-8.5, -28),
+              angle: -3 * math.pi / 180,
+            ),
+            Multiplier.x6(
+              position: Vector2(10, -30.7),
+              angle: 8 * math.pi / 180,
+            ),
+            MultipliersBehavior(),
+          ],
+        );
+
+  /// Creates [Multipliers] without any children.
+  ///
+  /// This can be used for testing [Multipliers]'s behaviors in isolation.
+  @visibleForTesting
+  Multipliers.test();
+}

lib/game/components/sparky_fire_zone.dart

@@ -18,17 +18,17 @@ class SparkyFireZone extends Blueprint {
           components: [
             SparkyBumper.a(
               children: [
-                ScoringBehavior(points: 20),
+                ScoringBehavior(points: 20000),
               ],
             )..initialPosition = Vector2(-22.9, -41.65),
             SparkyBumper.b(
               children: [
-                ScoringBehavior(points: 20),
+                ScoringBehavior(points: 20000),
               ],
             )..initialPosition = Vector2(-21.25, -57.9),
             SparkyBumper.c(
               children: [
-                ScoringBehavior(points: 20),
+                ScoringBehavior(points: 20000),
               ],
             )..initialPosition = Vector2(-3.3, -52.55),
             SparkyComputerSensor()..initialPosition = Vector2(-13, -49.8),
@@ -47,7 +47,13 @@ class SparkyFireZone extends Blueprint {
 class SparkyComputerSensor extends BodyComponent
     with InitialPosition, ContactCallbacks {
   /// {@macro sparky_computer_sensor}
-  SparkyComputerSensor() : super(renderBody: false);
+  SparkyComputerSensor()
+      : super(
+          renderBody: false,
+          children: [
+            ScoringBehavior(points: 200000),
+          ],
+        );
 
   @override
   Body createBody() {

lib/game/game_assets.dart

@@ -13,6 +13,7 @@ extension PinballGameAssetsX on PinballGame {
     const dinoTheme = DinoTheme();
 
     return [
+      images.load(components.Assets.images.boardBackground.keyName),
       images.load(components.Assets.images.ball.ball.keyName),
       images.load(components.Assets.images.ball.flameEffect.keyName),
       images.load(components.Assets.images.signpost.inactive.keyName),
@@ -50,39 +51,42 @@ extension PinballGameAssetsX on PinballGame {
       images.load(components.Assets.images.boundary.bottom.keyName),
       images.load(components.Assets.images.boundary.outer.keyName),
       images.load(components.Assets.images.boundary.outerBottom.keyName),
-      images.load(components.Assets.images.spaceship.saucer.keyName),
+      images.load(components.Assets.images.android.spaceship.saucer.keyName),
-      images.load(components.Assets.images.spaceship.bridge.keyName),
+      images
-      images.load(components.Assets.images.spaceship.ramp.boardOpening.keyName),
+          .load(components.Assets.images.android.spaceship.animatronic.keyName),
+      images.load(components.Assets.images.android.spaceship.lightBeam.keyName),
+      images.load(components.Assets.images.android.ramp.boardOpening.keyName),
       images.load(
-        components.Assets.images.spaceship.ramp.railingForeground.keyName,
+        components.Assets.images.android.ramp.railingForeground.keyName,
       ),
       images.load(
-        components.Assets.images.spaceship.ramp.railingBackground.keyName,
+        components.Assets.images.android.ramp.railingBackground.keyName,
       ),
-      images.load(components.Assets.images.spaceship.ramp.main.keyName),
+      images.load(components.Assets.images.android.ramp.main.keyName),
-      images
+      images.load(components.Assets.images.android.ramp.arrow.inactive.keyName),
-          .load(components.Assets.images.spaceship.ramp.arrow.inactive.keyName),
       images.load(
-        components.Assets.images.spaceship.ramp.arrow.active1.keyName,
+        components.Assets.images.android.ramp.arrow.active1.keyName,
       ),
       images.load(
-        components.Assets.images.spaceship.ramp.arrow.active2.keyName,
+        components.Assets.images.android.ramp.arrow.active2.keyName,
       ),
       images.load(
-        components.Assets.images.spaceship.ramp.arrow.active3.keyName,
+        components.Assets.images.android.ramp.arrow.active3.keyName,
       ),
       images.load(
-        components.Assets.images.spaceship.ramp.arrow.active4.keyName,
+        components.Assets.images.android.ramp.arrow.active4.keyName,
       ),
       images.load(
-        components.Assets.images.spaceship.ramp.arrow.active5.keyName,
+        components.Assets.images.android.ramp.arrow.active5.keyName,
       ),
-      images.load(components.Assets.images.spaceship.rail.main.keyName),
+      images.load(components.Assets.images.android.rail.main.keyName),
-      images.load(components.Assets.images.spaceship.rail.exit.keyName),
+      images.load(components.Assets.images.android.rail.exit.keyName),
-      images.load(components.Assets.images.androidBumper.a.lit.keyName),
+      images.load(components.Assets.images.android.bumper.a.lit.keyName),
-      images.load(components.Assets.images.androidBumper.a.dimmed.keyName),
+      images.load(components.Assets.images.android.bumper.a.dimmed.keyName),
-      images.load(components.Assets.images.androidBumper.b.lit.keyName),
+      images.load(components.Assets.images.android.bumper.b.lit.keyName),
-      images.load(components.Assets.images.androidBumper.b.dimmed.keyName),
+      images.load(components.Assets.images.android.bumper.b.dimmed.keyName),
+      images.load(components.Assets.images.android.bumper.cow.lit.keyName),
+      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.animatronic.keyName),
@@ -101,6 +105,16 @@ extension PinballGameAssetsX on PinballGame {
       images.load(components.Assets.images.googleWord.letter5.keyName),
       images.load(components.Assets.images.googleWord.letter6.keyName),
       images.load(components.Assets.images.backboard.display.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),
+      images.load(components.Assets.images.multiplier.x3.dimmed.keyName),
+      images.load(components.Assets.images.multiplier.x4.lit.keyName),
+      images.load(components.Assets.images.multiplier.x4.dimmed.keyName),
+      images.load(components.Assets.images.multiplier.x5.lit.keyName),
+      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(dashTheme.leaderboardIcon.keyName),
       images.load(sparkyTheme.leaderboardIcon.keyName),
       images.load(androidTheme.leaderboardIcon.keyName),

lib/game/pinball_game.dart

@@ -9,11 +9,10 @@ import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/gestures.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';
-import 'package:pinball_components/pinball_components.dart' hide Assets;
+import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
-import 'package:pinball_theme/pinball_theme.dart' hide Assets;
+import 'package:pinball_theme/pinball_theme.dart';
 
 class PinballGame extends Forge2DGame
     with
@@ -46,13 +45,14 @@ class PinballGame extends Forge2DGame
     unawaited(add(gameFlowController = GameFlowController(this)));
     unawaited(add(CameraController(this)));
     unawaited(add(Backboard.waiting(position: Vector2(0, -88))));
+    await add(BoardBackgroundSpriteComponent());
     await add(Drain());
     await add(BottomGroup());
     unawaited(addFromBlueprint(Boundaries()));
-    unawaited(addFromBlueprint(LaunchRamp()));
 
     final launcher = Launcher();
     unawaited(addFromBlueprint(launcher));
+    await add(Multipliers());
     await add(FlutterForest());
     await addFromBlueprint(SparkyFireZone());
     await addFromBlueprint(AndroidAcres());
@@ -67,7 +67,7 @@ class PinballGame extends Forge2DGame
       ),
     );
 
-    controller.attachTo(launcher.components.whereType<Plunger>().first);
+    controller.attachTo(launcher.components.whereType<Plunger>().single);
     await super.onLoad();
   }
 
@@ -176,26 +176,25 @@ class DebugPinballGame extends PinballGame with FPSCounter {
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-    await _loadBackground();
     await add(_DebugInformation());
   }
 
-  // TODO(alestiago): Move to PinballGame once we have the real background
+  // TODO(allisonryan0002): Remove after google letters have been correctly
-  // component.
+  // placed.
-  Future<void> _loadBackground() async {
+  // Future<void> _loadBackground() async {
-    final sprite = await loadSprite(
+  //   final sprite = await loadSprite(
-      Assets.images.components.background.path,
+  //     Assets.images.components.background.path,
-    );
+  //   );
-    final spriteComponent = SpriteComponent(
+  //   final spriteComponent = SpriteComponent(
-      sprite: sprite,
+  //     sprite: sprite,
-      size: Vector2(120, 160),
+  //     size: Vector2(120, 160),
-      anchor: Anchor.center,
+  //     anchor: Anchor.center,
-    )
+  //   )
-      ..position = Vector2(0, -7.8)
+  //     ..position = Vector2(0, -7.8)
-      ..priority = RenderPriority.background;
+  //     ..priority = RenderPriority.boardBackground;
-
+
-    await add(spriteComponent);
+  //   await add(spriteComponent);
-  }
+  // }
 
   @override
   void onTapUp(TapUpInfo info) {

lib/game/view/widgets/game_hud.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball/gen/gen.dart';
-import 'package:pinball/theme/app_colors.dart';
+import 'package:pinball_ui/pinball_ui.dart';
 
 /// {@template game_hud}
 /// Overlay on the [PinballGame].
@@ -72,7 +72,7 @@ class _ScoreViewDecoration extends StatelessWidget {
       decoration: BoxDecoration(
         borderRadius: radius,
         border: Border.all(
-          color: AppColors.white,
+          color: PinballColors.white,
           width: borderWidth,
         ),
         image: DecorationImage(

lib/game/view/widgets/round_count_display.dart

@@ -2,7 +2,7 @@ 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/theme/theme.dart';
+import 'package:pinball_ui/pinball_ui.dart';
 
 /// {@template round_count_display}
 /// Colored square indicating if a round is available.
@@ -20,9 +20,7 @@ class RoundCountDisplay extends StatelessWidget {
       children: [
         Text(
           l10n.rounds,
-          style: AppTextStyle.subtitle1.copyWith(
+          style: Theme.of(context).textTheme.subtitle1,
-            color: AppColors.orange,
-          ),
         ),
         const SizedBox(width: 8),
         Row(
@@ -53,9 +51,9 @@ class RoundIndicator extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final color = isActive ? AppColors.orange : AppColors.orange.withAlpha(128);
+    final color =
+        isActive ? PinballColors.yellow : PinballColors.yellow.withAlpha(128);
     const size = 8.0;
-
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 8),
       child: Container(

lib/game/view/widgets/score_view.dart

@@ -2,7 +2,6 @@ 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/theme/theme.dart';
 import 'package:pinball_components/pinball_components.dart';
 
 /// {@template score_view}
@@ -38,9 +37,7 @@ class _GameOver extends StatelessWidget {
 
     return Text(
       l10n.gameOver,
-      style: AppTextStyle.headline1.copyWith(
+      style: Theme.of(context).textTheme.headline1,
-        color: AppColors.white,
-      ),
     );
   }
 }
@@ -58,9 +55,7 @@ class _ScoreDisplay extends StatelessWidget {
       children: [
         Text(
           l10n.score.toLowerCase(),
-          style: AppTextStyle.subtitle1.copyWith(
+          style: Theme.of(context).textTheme.subtitle1,
-            color: AppColors.orange,
-          ),
         ),
         const _ScoreText(),
         const RoundCountDisplay(),
@@ -78,9 +73,7 @@ class _ScoreText extends StatelessWidget {
 
     return Text(
       score.formatScore(),
-      style: AppTextStyle.headline1.copyWith(
+      style: Theme.of(context).textTheme.headline1,
-        color: AppColors.white,
-      ),
     );
   }
 }

lib/gen/assets.gen.dart

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

lib/l10n/arb/app_en.arb

@@ -8,6 +8,10 @@
   "@howToPlay": {
     "description": "Text displayed on the landing page how to play button"
   },
+  "tipsForFlips": "Tips for flips",
+  "@tipsForFlips": {
+    "description": "Text displayed on the landing page how to play button"
+  },
   "launchControls": "Launch Controls",
   "@launchControls": {
     "description": "Text displayed on the how to play dialog with the launch controls"
@@ -16,6 +20,26 @@
   "@flipperControls": {
     "description": "Text displayed on the how to play dialog with the flipper controls"
   },
+  "tapAndHoldRocket": "Tap & Hold Rocket",
+  "@tapAndHoldRocket": {
+    "description": "Text displayed on the how to launch on mobile"
+  },
+  "to": "to",
+  "@to": {
+    "description": "Text displayed for the word to"
+  },
+  "launch": "LAUNCH",
+  "@launch": {
+    "description": "Text displayed for the word launch"
+  },
+  "tapLeftRightScreen": "Tap left/right screen",
+  "@tapLeftRightScreen": {
+    "description": "Text displayed on the how to flip on mobile"
+  },
+  "flip": "FLIP",
+  "@flip": {
+    "description": "Text displayed for the word FLIP"
+  },
   "start": "Start",
   "@start": {
     "description": "Text displayed on the character selection page start button"
@@ -24,6 +48,10 @@
   "@select": {
     "description": "Text displayed on the character selection page select button"
   },
+  "space": "Space",
+  "@space": {
+    "description": "Text displayed on space control button"
+  },
   "characterSelectionTitle": "Choose your character!",
   "@characterSelectionTitle": {
     "description": "Title text displayed on the character selection page"
@@ -79,5 +107,21 @@
   "rounds": "Ball Ct:",
   "@rounds": {
     "description": "Text displayed on the scoreboard widget to indicate rounds left"
+  },
+  "footerMadeWithText": "Made with ",
+  "@footerMadeWithText": {
+    "description": "Text shown on the footer which mentions technologies used to build the app."
+  },
+  "footerFlutterLinkText": "Flutter",
+  "@footerFlutterLinkText": {
+    "description": "Text on the link shown on the footer which navigates to the Flutter page"
+  },
+  "footerFirebaseLinkText": "Firebase",
+  "@footerFirebaseLinkText": {
+    "description": "Text on the link shown on the footer which navigates to the Firebase page"
+  },
+  "footerGoogleIOText": "Google I/O",
+  "@footerGoogleIOText": {
+    "description": "Text shown on the footer which mentions Google I/O"
   }
-}
+}

lib/l10n/arb/app_es.arb

@@ -1,15 +0,0 @@
-{
-    "@@locale": "es",
-    "play": "Jugar",
-    "@play": {
-        "description": "Text displayed on the landing page play button"
-    },
-    "start": "Comienzo",
-    "@start": {
-        "description": "Text displayed on the character selection page start button"
-    },
-    "characterSelectionTitle": "¡Elige a tu personaje!",
-    "@characterSelectionTitle": {
-        "description": "Title text displayed on the character selection page"
-    }
-}

lib/leaderboard/bloc/leaderboard_bloc.dart

@@ -1,71 +0,0 @@
-import 'dart:async';
-
-import 'package:bloc/bloc.dart';
-import 'package:equatable/equatable.dart';
-import 'package:leaderboard_repository/leaderboard_repository.dart';
-import 'package:pinball/leaderboard/leaderboard.dart';
-
-part 'leaderboard_event.dart';
-part 'leaderboard_state.dart';
-
-/// {@template leaderboard_bloc}
-/// Manages leaderboard events.
-///
-/// Uses a [LeaderboardRepository] to request and update players participations.
-/// {@endtemplate}
-class LeaderboardBloc extends Bloc<LeaderboardEvent, LeaderboardState> {
-  /// {@macro leaderboard_bloc}
-  LeaderboardBloc(this._leaderboardRepository)
-      : super(const LeaderboardState.initial()) {
-    on<Top10Fetched>(_onTop10Fetched);
-    on<LeaderboardEntryAdded>(_onLeaderboardEntryAdded);
-  }
-
-  final LeaderboardRepository _leaderboardRepository;
-
-  Future<void> _onTop10Fetched(
-    Top10Fetched event,
-    Emitter<LeaderboardState> emit,
-  ) async {
-    emit(state.copyWith(status: LeaderboardStatus.loading));
-    try {
-      final top10Leaderboard =
-          await _leaderboardRepository.fetchTop10Leaderboard();
-
-      final leaderboardEntries = <LeaderboardEntry>[];
-      top10Leaderboard.asMap().forEach(
-            (index, value) => leaderboardEntries.add(value.toEntry(index + 1)),
-          );
-
-      emit(
-        state.copyWith(
-          status: LeaderboardStatus.success,
-          leaderboard: leaderboardEntries,
-        ),
-      );
-    } catch (error) {
-      emit(state.copyWith(status: LeaderboardStatus.error));
-      addError(error);
-    }
-  }
-
-  Future<void> _onLeaderboardEntryAdded(
-    LeaderboardEntryAdded event,
-    Emitter<LeaderboardState> emit,
-  ) async {
-    emit(state.copyWith(status: LeaderboardStatus.loading));
-    try {
-      final ranking =
-          await _leaderboardRepository.addLeaderboardEntry(event.entry);
-      emit(
-        state.copyWith(
-          status: LeaderboardStatus.success,
-          ranking: ranking,
-        ),
-      );
-    } catch (error) {
-      emit(state.copyWith(status: LeaderboardStatus.error));
-      addError(error);
-    }
-  }
-}

lib/leaderboard/bloc/leaderboard_event.dart

@@ -1,36 +0,0 @@
-part of 'leaderboard_bloc.dart';
-
-/// {@template leaderboard_event}
-/// Represents the events available for [LeaderboardBloc].
-/// {endtemplate}
-abstract class LeaderboardEvent extends Equatable {
-  /// {@macro leaderboard_event}
-  const LeaderboardEvent();
-}
-
-/// {@template top_10_fetched}
-/// Request the top 10 [LeaderboardEntryData]s.
-/// {endtemplate}
-class Top10Fetched extends LeaderboardEvent {
-  /// {@macro top_10_fetched}
-  const Top10Fetched();
-
-  @override
-  List<Object?> get props => [];
-}
-
-/// {@template leaderboard_entry_added}
-/// Writes a new [LeaderboardEntryData].
-///
-/// Should be added when a player finishes a game.
-/// {endtemplate}
-class LeaderboardEntryAdded extends LeaderboardEvent {
-  /// {@macro leaderboard_entry_added}
-  const LeaderboardEntryAdded({required this.entry});
-
-  /// [LeaderboardEntryData] to be written to the remote storage.
-  final LeaderboardEntryData entry;
-
-  @override
-  List<Object?> get props => [entry];
-}

lib/leaderboard/bloc/leaderboard_state.dart

@@ -1,59 +0,0 @@
-// ignore_for_file: public_member_api_docs
-
-part of 'leaderboard_bloc.dart';
-
-/// Defines the request status.
-enum LeaderboardStatus {
-  /// Request is being loaded.
-  loading,
-
-  /// Request was processed successfully and received a valid response.
-  success,
-
-  /// Request was processed unsuccessfully and received an error.
-  error,
-}
-
-/// {@template leaderboard_state}
-/// Represents the state of the leaderboard.
-/// {@endtemplate}
-class LeaderboardState extends Equatable {
-  /// {@macro leaderboard_state}
-  const LeaderboardState({
-    required this.status,
-    required this.ranking,
-    required this.leaderboard,
-  });
-
-  const LeaderboardState.initial()
-      : status = LeaderboardStatus.loading,
-        ranking = const LeaderboardRanking(
-          ranking: 0,
-          outOf: 0,
-        ),
-        leaderboard = const [];
-
-  /// The current [LeaderboardStatus] of the state.
-  final LeaderboardStatus status;
-
-  /// Rank of the current player.
-  final LeaderboardRanking ranking;
-
-  /// List of top-ranked players.
-  final List<LeaderboardEntry> leaderboard;
-
-  @override
-  List<Object> get props => [status, ranking, leaderboard];
-
-  LeaderboardState copyWith({
-    LeaderboardStatus? status,
-    LeaderboardRanking? ranking,
-    List<LeaderboardEntry>? leaderboard,
-  }) {
-    return LeaderboardState(
-      status: status ?? this.status,
-      ranking: ranking ?? this.ranking,
-      leaderboard: leaderboard ?? this.leaderboard,
-    );
-  }
-}

lib/leaderboard/leaderboard.dart

@@ -1,3 +0,0 @@
-export 'bloc/leaderboard_bloc.dart';
-export 'models/leader_board_entry.dart';
-export 'view/leaderboard_page.dart';

lib/leaderboard/view/leaderboard_page.dart

@@ -1,306 +0,0 @@
-// ignore_for_file: public_member_api_docs
-
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:leaderboard_repository/leaderboard_repository.dart';
-import 'package:pinball/l10n/l10n.dart';
-import 'package:pinball/leaderboard/leaderboard.dart';
-import 'package:pinball/select_character/select_character.dart';
-import 'package:pinball_theme/pinball_theme.dart';
-
-class LeaderboardPage extends StatelessWidget {
-  const LeaderboardPage({Key? key, required this.theme}) : super(key: key);
-
-  final CharacterTheme theme;
-
-  static Route route({required CharacterTheme theme}) {
-    return MaterialPageRoute<void>(
-      builder: (_) => LeaderboardPage(theme: theme),
-    );
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return BlocProvider(
-      create: (context) => LeaderboardBloc(
-        context.read<LeaderboardRepository>(),
-      )..add(const Top10Fetched()),
-      child: LeaderboardView(theme: theme),
-    );
-  }
-}
-
-class LeaderboardView extends StatelessWidget {
-  const LeaderboardView({Key? key, required this.theme}) : super(key: key);
-
-  final CharacterTheme theme;
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = context.l10n;
-
-    return Scaffold(
-      body: Center(
-        child: SingleChildScrollView(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              const SizedBox(height: 80),
-              Text(
-                l10n.leaderboard,
-                style: Theme.of(context).textTheme.headline3,
-              ),
-              const SizedBox(height: 80),
-              BlocBuilder<LeaderboardBloc, LeaderboardState>(
-                builder: (context, state) {
-                  switch (state.status) {
-                    case LeaderboardStatus.loading:
-                      return _LeaderboardLoading(theme: theme);
-                    case LeaderboardStatus.success:
-                      return _LeaderboardRanking(
-                        ranking: state.leaderboard,
-                        theme: theme,
-                      );
-                    case LeaderboardStatus.error:
-                      return _LeaderboardError(theme: theme);
-                  }
-                },
-              ),
-              const SizedBox(height: 20),
-              TextButton(
-                onPressed: () => Navigator.of(context).push<void>(
-                  CharacterSelectionDialog.route(),
-                ),
-                child: Text(l10n.retry),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-class _LeaderboardLoading extends StatelessWidget {
-  const _LeaderboardLoading({Key? key, required this.theme}) : super(key: key);
-
-  final CharacterTheme theme;
-
-  @override
-  Widget build(BuildContext context) {
-    return const Center(
-      child: CircularProgressIndicator(),
-    );
-  }
-}
-
-class _LeaderboardError extends StatelessWidget {
-  const _LeaderboardError({Key? key, required this.theme}) : super(key: key);
-
-  final CharacterTheme theme;
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(20),
-      child: Text(
-        'There was en error loading data!',
-        style:
-            Theme.of(context).textTheme.headline6?.copyWith(color: Colors.red),
-      ),
-    );
-  }
-}
-
-class _LeaderboardRanking extends StatelessWidget {
-  const _LeaderboardRanking({
-    Key? key,
-    required this.ranking,
-    required this.theme,
-  }) : super(key: key);
-
-  final List<LeaderboardEntry> ranking;
-  final CharacterTheme theme;
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(20),
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          _LeaderboardHeaders(theme: theme),
-          _LeaderboardList(
-            ranking: ranking,
-            theme: theme,
-          ),
-        ],
-      ),
-    );
-  }
-}
-
-class _LeaderboardHeaders extends StatelessWidget {
-  const _LeaderboardHeaders({Key? key, required this.theme}) : super(key: key);
-
-  final CharacterTheme theme;
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = context.l10n;
-
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        _LeaderboardHeaderItem(title: l10n.rank, theme: theme),
-        _LeaderboardHeaderItem(title: l10n.character, theme: theme),
-        _LeaderboardHeaderItem(title: l10n.username, theme: theme),
-        _LeaderboardHeaderItem(title: l10n.score, theme: theme),
-      ],
-    );
-  }
-}
-
-class _LeaderboardHeaderItem extends StatelessWidget {
-  const _LeaderboardHeaderItem({
-    Key? key,
-    required this.title,
-    required this.theme,
-  }) : super(key: key);
-
-  final CharacterTheme theme;
-  final String title;
-
-  @override
-  Widget build(BuildContext context) {
-    return Expanded(
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          color: theme.ballColor,
-        ),
-        child: Text(
-          title,
-          style: Theme.of(context).textTheme.headline5,
-        ),
-      ),
-    );
-  }
-}
-
-class _LeaderboardList extends StatelessWidget {
-  const _LeaderboardList({
-    Key? key,
-    required this.ranking,
-    required this.theme,
-  }) : super(key: key);
-
-  final List<LeaderboardEntry> ranking;
-  final CharacterTheme theme;
-
-  @override
-  Widget build(BuildContext context) {
-    return ListView.builder(
-      shrinkWrap: true,
-      itemBuilder: (_, index) => _LeaderBoardCompetitor(
-        entry: ranking[index],
-        theme: theme,
-      ),
-      itemCount: ranking.length,
-    );
-  }
-}
-
-class _LeaderBoardCompetitor extends StatelessWidget {
-  const _LeaderBoardCompetitor({
-    Key? key,
-    required this.entry,
-    required this.theme,
-  }) : super(key: key);
-
-  final CharacterTheme theme;
-
-  final LeaderboardEntry entry;
-
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        _LeaderboardCompetitorField(
-          text: entry.rank,
-          theme: theme,
-        ),
-        _LeaderboardCompetitorCharacter(
-          characterAsset: entry.character,
-          theme: theme,
-        ),
-        _LeaderboardCompetitorField(
-          text: entry.playerInitials,
-          theme: theme,
-        ),
-        _LeaderboardCompetitorField(
-          text: entry.score.toString(),
-          theme: theme,
-        ),
-      ],
-    );
-  }
-}
-
-class _LeaderboardCompetitorField extends StatelessWidget {
-  const _LeaderboardCompetitorField({
-    Key? key,
-    required this.text,
-    required this.theme,
-  }) : super(key: key);
-
-  final CharacterTheme theme;
-  final String text;
-
-  @override
-  Widget build(BuildContext context) {
-    return Expanded(
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          border: Border.all(
-            color: theme.ballColor,
-            width: 2,
-          ),
-        ),
-        child: Padding(
-          padding: const EdgeInsets.all(8),
-          child: Text(text),
-        ),
-      ),
-    );
-  }
-}
-
-class _LeaderboardCompetitorCharacter extends StatelessWidget {
-  const _LeaderboardCompetitorCharacter({
-    Key? key,
-    required this.characterAsset,
-    required this.theme,
-  }) : super(key: key);
-
-  final CharacterTheme theme;
-  final AssetGenImage characterAsset;
-
-  @override
-  Widget build(BuildContext context) {
-    return Expanded(
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          border: Border.all(
-            color: theme.ballColor,
-            width: 2,
-          ),
-        ),
-        child: SizedBox(
-          height: 30,
-          child: characterAsset.image(),
-        ),
-      ),
-    );
-  }
-}

lib/main_development.dart

@@ -5,16 +5,27 @@
 // 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';
+import 'package:firebase_core/firebase_core.dart';
 import 'package:leaderboard_repository/leaderboard_repository.dart';
 import 'package:pinball/app/app.dart';
 import 'package:pinball/bootstrap.dart';
 import 'package:pinball_audio/pinball_audio.dart';
 
 void main() {
-  bootstrap((firestore) async {
+  bootstrap((firestore, firebaseAuth) async {
     final leaderboardRepository = LeaderboardRepository(firestore);
+    final authenticationRepository = AuthenticationRepository(firebaseAuth);
     final pinballAudio = PinballAudio();
+    unawaited(
+      Firebase.initializeApp().then(
+        (_) => authenticationRepository.authenticateAnonymously(),
+      ),
+    );
     return App(
+      authenticationRepository: authenticationRepository,
       leaderboardRepository: leaderboardRepository,
       pinballAudio: pinballAudio,
     );

lib/main_production.dart

@@ -5,16 +5,27 @@
 // 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';
+import 'package:firebase_core/firebase_core.dart';
 import 'package:leaderboard_repository/leaderboard_repository.dart';
 import 'package:pinball/app/app.dart';
 import 'package:pinball/bootstrap.dart';
 import 'package:pinball_audio/pinball_audio.dart';
 
 void main() {
-  bootstrap((firestore) async {
+  bootstrap((firestore, firebaseAuth) async {
     final leaderboardRepository = LeaderboardRepository(firestore);
+    final authenticationRepository = AuthenticationRepository(firebaseAuth);
     final pinballAudio = PinballAudio();
+    unawaited(
+      Firebase.initializeApp().then(
+        (_) => authenticationRepository.authenticateAnonymously(),
+      ),
+    );
     return App(
+      authenticationRepository: authenticationRepository,
       leaderboardRepository: leaderboardRepository,
       pinballAudio: pinballAudio,
     );

lib/main_staging.dart

@@ -5,16 +5,27 @@
 // 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';
+import 'package:firebase_core/firebase_core.dart';
 import 'package:leaderboard_repository/leaderboard_repository.dart';
 import 'package:pinball/app/app.dart';
 import 'package:pinball/bootstrap.dart';
 import 'package:pinball_audio/pinball_audio.dart';
 
 void main() {
-  bootstrap((firestore) async {
+  bootstrap((firestore, firebaseAuth) async {
     final leaderboardRepository = LeaderboardRepository(firestore);
+    final authenticationRepository = AuthenticationRepository(firebaseAuth);
     final pinballAudio = PinballAudio();
+    unawaited(
+      Firebase.initializeApp().then(
+        (_) => authenticationRepository.authenticateAnonymously(),
+      ),
+    );
     return App(
+      authenticationRepository: authenticationRepository,
       leaderboardRepository: leaderboardRepository,
       pinballAudio: pinballAudio,
     );

lib/select_character/view/character_selection_page.dart

@@ -49,14 +49,13 @@ class CharacterSelectionView extends StatelessWidget {
                 Navigator.of(context).pop();
                 // 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: const HowToPlayDialog(),
+                      child: HowToPlayDialog(),
                     ),
                   ),
                 );

lib/start_game/widgets/how_to_play_dialog.dart

@@ -1,33 +1,232 @@
 // ignore_for_file: public_member_api_docs
 
+import 'dart:async';
+
 import 'package:flutter/material.dart';
+import 'package:pinball/gen/gen.dart';
 import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball_ui/pinball_ui.dart';
+import 'package:platform_helper/platform_helper.dart';
+
+@visibleForTesting
+enum Control {
+  left,
+  right,
+  down,
+  a,
+  d,
+  s,
+  space,
+}
+
+extension on Control {
+  bool get isArrow => isDown || isRight || isLeft;
+
+  bool get isDown => this == Control.down;
+
+  bool get isRight => this == Control.right;
+
+  bool get isLeft => this == Control.left;
+
+  bool get isSpace => this == Control.space;
+
+  String getCharacter(BuildContext context) {
+    switch (this) {
+      case Control.a:
+        return 'A';
+      case Control.d:
+        return 'D';
+      case Control.down:
+        return '>'; // Will be rotated
+      case Control.left:
+        return '<';
+      case Control.right:
+        return '>';
+      case Control.s:
+        return 'S';
+      case Control.space:
+        return context.l10n.space;
+    }
+  }
+}
+
+class HowToPlayDialog extends StatefulWidget {
+  HowToPlayDialog({
+    Key? key,
+    @visibleForTesting PlatformHelper? platformHelper,
+  })  : platformHelper = platformHelper ?? PlatformHelper(),
+        super(key: key);
+
+  final PlatformHelper platformHelper;
+
+  @override
+  State<HowToPlayDialog> createState() => _HowToPlayDialogState();
+}
+
+class _HowToPlayDialogState extends State<HowToPlayDialog> {
+  late Timer closeTimer;
+  @override
+  void initState() {
+    super.initState();
+    closeTimer = Timer(const Duration(seconds: 3), () {
+      if (mounted) {
+        Navigator.of(context).maybePop();
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    closeTimer.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isMobile = widget.platformHelper.isMobile;
+    return PixelatedDecoration(
+      header: const _HowToPlayHeader(),
+      body: isMobile ? const _MobileBody() : const _DesktopBody(),
+    );
+  }
+}
+
+class _MobileBody extends StatelessWidget {
+  const _MobileBody({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final paddingWidth = MediaQuery.of(context).size.width * 0.15;
+    final paddingHeight = MediaQuery.of(context).size.height * 0.075;
+    return FittedBox(
+      child: Padding(
+        padding: EdgeInsets.symmetric(
+          horizontal: paddingWidth,
+        ),
+        child: Column(
+          children: [
+            const _MobileLaunchControls(),
+            SizedBox(height: paddingHeight),
+            const _MobileFlipperControls(),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _MobileLaunchControls extends StatelessWidget {
+  const _MobileLaunchControls({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    final textStyle = Theme.of(context).textTheme.headline3;
+    return Column(
+      children: [
+        Text(
+          l10n.tapAndHoldRocket,
+          style: textStyle,
+        ),
+        Text.rich(
+          TextSpan(
+            children: [
+              TextSpan(
+                text: '${l10n.to} ',
+                style: textStyle,
+              ),
+              TextSpan(
+                text: l10n.launch,
+                style: textStyle?.copyWith(color: PinballColors.blue),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
 
-class HowToPlayDialog extends StatelessWidget {
+class _MobileFlipperControls extends StatelessWidget {
-  const HowToPlayDialog({Key? key}) : super(key: key);
+  const _MobileFlipperControls({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
+    final textStyle = Theme.of(context).textTheme.headline3;
+    return Column(
+      children: [
+        Text(
+          l10n.tapLeftRightScreen,
+          style: textStyle,
+        ),
+        Text.rich(
+          TextSpan(
+            children: [
+              TextSpan(
+                text: '${l10n.to} ',
+                style: textStyle,
+              ),
+              TextSpan(
+                text: l10n.flip,
+                style: textStyle?.copyWith(color: PinballColors.orange),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _DesktopBody extends StatelessWidget {
+  const _DesktopBody({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
     const spacing = SizedBox(height: 16);
+    return ListView(
+      children: const [
+        spacing,
+        _DesktopLaunchControls(),
+        spacing,
+        _DesktopFlipperControls(),
+      ],
+    );
+  }
+}
 
-    return PixelatedDecoration(
+class _HowToPlayHeader extends StatelessWidget {
-      header: Text(l10n.howToPlay),
+  const _HowToPlayHeader({Key? key}) : super(key: key);
-      body: ListView(
+
-        children: const [
+  @override
-          spacing,
+  Widget build(BuildContext context) {
-          _LaunchControls(),
+    final l10n = context.l10n;
-          spacing,
+    final textStyle = Theme.of(context).textTheme.headline3?.copyWith(
-          _FlipperControls(),
+          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 _LaunchControls extends StatelessWidget {
+class _DesktopLaunchControls extends StatelessWidget {
-  const _LaunchControls({Key? key}) : super(key: key);
+  const _DesktopLaunchControls({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -36,15 +235,18 @@ class _LaunchControls extends StatelessWidget {
 
     return Column(
       children: [
-        Text(l10n.launchControls),
+        Text(
+          l10n.launchControls,
+          style: Theme.of(context).textTheme.headline4,
+        ),
         const SizedBox(height: 10),
         Wrap(
           children: const [
-            KeyIndicator.fromIcon(keyIcon: Icons.keyboard_arrow_down),
+            KeyButton(control: Control.down),
             spacing,
-            KeyIndicator.fromKeyName(keyName: 'SPACE'),
+            KeyButton(control: Control.space),
             spacing,
-            KeyIndicator.fromKeyName(keyName: 'S'),
+            KeyButton(control: Control.s),
           ],
         )
       ],
@@ -52,8 +254,8 @@ class _LaunchControls extends StatelessWidget {
   }
 }
 
-class _FlipperControls extends StatelessWidget {
+class _DesktopFlipperControls extends StatelessWidget {
-  const _FlipperControls({Key? key}) : super(key: key);
+  const _DesktopFlipperControls({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -62,7 +264,10 @@ class _FlipperControls extends StatelessWidget {
 
     return Column(
       children: [
-        Text(l10n.flipperControls),
+        Text(
+          l10n.flipperControls,
+          style: Theme.of(context).textTheme.subtitle2,
+        ),
         const SizedBox(height: 10),
         Column(
           children: [
@@ -70,17 +275,17 @@ class _FlipperControls extends StatelessWidget {
               mainAxisSize: MainAxisSize.min,
               mainAxisAlignment: MainAxisAlignment.center,
               children: const [
-                KeyIndicator.fromIcon(keyIcon: Icons.keyboard_arrow_left),
+                KeyButton(control: Control.left),
                 rowSpacing,
-                KeyIndicator.fromIcon(keyIcon: Icons.keyboard_arrow_right),
+                KeyButton(control: Control.right),
               ],
             ),
             const SizedBox(height: 8),
             Wrap(
               children: const [
-                KeyIndicator.fromKeyName(keyName: 'A'),
+                KeyButton(control: Control.a),
                 rowSpacing,
-                KeyIndicator.fromKeyName(keyName: 'D'),
+                KeyButton(control: Control.d),
               ],
             )
           ],
@@ -90,65 +295,47 @@ class _FlipperControls extends StatelessWidget {
   }
 }
 
-// TODO(allisonryan0002): remove visibility when adding final UI.
 @visibleForTesting
-class KeyIndicator extends StatelessWidget {
+class KeyButton extends StatelessWidget {
-  const KeyIndicator._({
+  const KeyButton({
     Key? key,
-    required String keyName,
+    required Control control,
-    required IconData keyIcon,
+  })  : _control = control,
-    required bool fromIcon,
-  })  : _keyName = keyName,
-        _keyIcon = keyIcon,
-        _fromIcon = fromIcon,
         super(key: key);
 
-  const KeyIndicator.fromKeyName({Key? key, required String keyName})
+  final Control _control;
-      : this._(
-          key: key,
-          keyName: keyName,
-          keyIcon: Icons.keyboard_arrow_down,
-          fromIcon: false,
-        );
-
-  const KeyIndicator.fromIcon({Key? key, required IconData keyIcon})
-      : this._(
-          key: key,
-          keyName: '',
-          keyIcon: keyIcon,
-          fromIcon: true,
-        );
-
-  final String _keyName;
-
-  final IconData _keyIcon;
-
-  final bool _fromIcon;
 
   @override
   Widget build(BuildContext context) {
-    const iconPadding = EdgeInsets.all(15);
+    final textTheme = Theme.of(context).textTheme;
-    const textPadding = EdgeInsets.symmetric(vertical: 20, horizontal: 22);
+    final textStyle =
-    final boarderColor = Colors.blue.withOpacity(0.5);
+        _control.isArrow ? textTheme.headline1 : textTheme.headline3;
-    final color = Colors.blue.withOpacity(0.7);
+    const height = 60.0;
-
+    final width = _control.isSpace ? height * 2.83 : height;
     return DecoratedBox(
       decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(5),
+        image: DecorationImage(
-        border: Border.all(
+          fit: BoxFit.fill,
-          color: boarderColor,
+          image: AssetImage(
-          width: 3,
+            _control.isSpace
+                ? Assets.images.components.space.keyName
+                : Assets.images.components.key.keyName,
+          ),
         ),
       ),
-      child: _fromIcon
+      child: SizedBox(
-          ? Padding(
+        width: width,
-              padding: iconPadding,
+        height: height,
-              child: Icon(_keyIcon, color: color),
+        child: Center(
-            )
+          child: RotatedBox(
-          : Padding(
+            quarterTurns: _control.isDown ? 1 : 0,
-              padding: textPadding,
+            child: Text(
-              child: Text(_keyName, style: TextStyle(color: color)),
+              _control.getCharacter(context),
+              style: textStyle?.copyWith(color: PinballColors.white),
             ),
+          ),
+        ),
+      ),
     );
   }
 }

lib/theme/theme.dart

@@ -1,2 +0,0 @@
-export 'app_colors.dart';
-export 'app_text_style.dart';

packages/authentication_repository/.gitignore

@@ -0,0 +1,39 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# VSCode related
+.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+/build/
+
+# Web related
+lib/generated_plugin_registrant.dart
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json

packages/authentication_repository/README.md

@@ -0,0 +1,11 @@
+# authentication_repository
+
+[![style: very good analysis][very_good_analysis_badge]][very_good_analysis_link]
+[![License: MIT][license_badge]][license_link]
+
+Repository to manage user authentication.
+
+[license_badge]: https://img.shields.io/badge/license-MIT-blue.svg
+[license_link]: https://opensource.org/licenses/MIT
+[very_good_analysis_badge]: https://img.shields.io/badge/style-very_good_analysis-B22C89.svg
+[very_good_analysis_link]: https://pub.dev/packages/very_good_analysis

packages/authentication_repository/analysis_options.yaml

@@ -0,0 +1 @@
+include: package:very_good_analysis/analysis_options.2.4.0.yaml

packages/authentication_repository/lib/authentication_repository.dart

@@ -0,0 +1,3 @@
+library authentication_repository;
+
+export 'src/authentication_repository.dart';

packages/authentication_repository/lib/src/authentication_repository.dart

@@ -0,0 +1,36 @@
+import 'package:firebase_auth/firebase_auth.dart';
+
+/// {@template authentication_exception}
+/// Exception for authentication repository failures.
+/// {@endtemplate}
+class AuthenticationException implements Exception {
+  /// {@macro authentication_exception}
+  const AuthenticationException(this.error, this.stackTrace);
+
+  /// The error that was caught.
+  final Object error;
+
+  /// The Stacktrace associated with the [error].
+  final StackTrace stackTrace;
+}
+
+/// {@template authentication_repository}
+/// Repository to manage user authentication.
+/// {@endtemplate}
+class AuthenticationRepository {
+  /// {@macro authentication_repository}
+  AuthenticationRepository(this._firebaseAuth);
+
+  final FirebaseAuth _firebaseAuth;
+
+  /// Sign in the existing user anonymously using [FirebaseAuth]. If the
+  /// authentication process can't be completed, it will throw an
+  /// [AuthenticationException].
+  Future<void> authenticateAnonymously() async {
+    try {
+      await _firebaseAuth.signInAnonymously();
+    } on Exception catch (error, stackTrace) {
+      throw AuthenticationException(error, stackTrace);
+    }
+  }
+}

packages/authentication_repository/pubspec.yaml

@@ -0,0 +1,18 @@
+name: authentication_repository
+description: Repository to manage user authentication.
+version: 1.0.0+1
+publish_to: none
+
+environment:
+  sdk: ">=2.16.0 <3.0.0"
+
+dependencies:
+  firebase_auth: ^3.3.16
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  mocktail: ^0.2.0
+  very_good_analysis: ^2.4.0

packages/authentication_repository/test/src/authentication_repository_test.dart

@@ -0,0 +1,40 @@
+import 'package:authentication_repository/authentication_repository.dart';
+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 MockUserCredential extends Mock implements UserCredential {}
+
+void main() {
+  late FirebaseAuth firebaseAuth;
+  late UserCredential userCredential;
+  late AuthenticationRepository authenticationRepository;
+
+  group('AuthenticationRepository', () {
+    setUp(() {
+      firebaseAuth = MockFirebaseAuth();
+      userCredential = MockUserCredential();
+      authenticationRepository = AuthenticationRepository(firebaseAuth);
+    });
+
+    group('authenticateAnonymously', () {
+      test('completes if no exception is thrown', () async {
+        when(() => firebaseAuth.signInAnonymously())
+            .thenAnswer((_) async => userCredential);
+        await authenticationRepository.authenticateAnonymously();
+        verify(() => firebaseAuth.signInAnonymously()).called(1);
+      });
+
+      test('throws AuthenticationException when firebase auth fails', () async {
+        when(() => firebaseAuth.signInAnonymously())
+            .thenThrow(Exception('oops'));
+        expect(
+          () => authenticationRepository.authenticateAnonymously(),
+          throwsA(isA<AuthenticationException>()),
+        );
+      });
+    });
+  });
+}

packages/leaderboard_repository/lib/src/leaderboard_repository.dart

@@ -1,91 +1,6 @@
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:leaderboard_repository/leaderboard_repository.dart';
 
-/// {@template leaderboard_exception}
-/// Base exception for leaderboard repository failures.
-/// {@endtemplate}
-abstract class LeaderboardException implements Exception {
-  /// {@macro leaderboard_exception}
-  const LeaderboardException(this.error, this.stackTrace);
-
-  /// The error that was caught.
-  final Object error;
-
-  /// The Stacktrace associated with the [error].
-  final StackTrace stackTrace;
-}
-
-/// {@template leaderboard_deserialization_exception}
-/// Exception thrown when leaderboard data cannot be deserialized in the
-/// expected way.
-/// {@endtemplate}
-class LeaderboardDeserializationException extends LeaderboardException {
-  /// {@macro leaderboard_deserialization_exception}
-  const LeaderboardDeserializationException(
-    Object error,
-    StackTrace stackTrace,
-  ) : super(
-          error,
-          stackTrace,
-        );
-}
-
-/// {@template fetch_top_10_leaderboard_exception}
-/// Exception thrown when failure occurs while fetching top 10 leaderboard.
-/// {@endtemplate}
-class FetchTop10LeaderboardException extends LeaderboardException {
-  /// {@macro fetch_top_10_leaderboard_exception}
-  const FetchTop10LeaderboardException(
-    Object error,
-    StackTrace stackTrace,
-  ) : super(
-          error,
-          stackTrace,
-        );
-}
-
-/// {@template add_leaderboard_entry_exception}
-/// Exception thrown when failure occurs while adding entry to leaderboard.
-/// {@endtemplate}
-class AddLeaderboardEntryException extends LeaderboardException {
-  /// {@macro add_leaderboard_entry_exception}
-  const AddLeaderboardEntryException(
-    Object error,
-    StackTrace stackTrace,
-  ) : super(
-          error,
-          stackTrace,
-        );
-}
-
-/// {@template fetch_player_ranking_exception}
-/// Exception thrown when failure occurs while fetching player ranking.
-/// {@endtemplate}
-class FetchPlayerRankingException extends LeaderboardException {
-  /// {@macro fetch_player_ranking_exception}
-  const FetchPlayerRankingException(
-    Object error,
-    StackTrace stackTrace,
-  ) : super(
-          error,
-          stackTrace,
-        );
-}
-
-/// {@template fetch_prohibited_initials_exception}
-/// Exception thrown when failure occurs while fetching prohibited initials.
-/// {@endtemplate}
-class FetchProhibitedInitialsException extends LeaderboardException {
-  /// {@macro fetch_prohibited_initials_exception}
-  const FetchProhibitedInitialsException(
-    Object error,
-    StackTrace stackTrace,
-  ) : super(
-          error,
-          stackTrace,
-        );
-}
-
 /// {@template leaderboard_repository}
 /// Repository to access leaderboard data in Firebase Cloud Firestore.
 /// {@endtemplate}
@@ -97,73 +12,40 @@ class LeaderboardRepository {
 
   final FirebaseFirestore _firebaseFirestore;
 
+  static const _leaderboardLimit = 10;
+  static const _leaderboardCollectionName = 'leaderboard';
+  static const _scoreFieldName = 'score';
+
   /// Acquires top 10 [LeaderboardEntryData]s.
   Future<List<LeaderboardEntryData>> fetchTop10Leaderboard() async {
-    final leaderboardEntries = <LeaderboardEntryData>[];
-    late List<QueryDocumentSnapshot> documents;
-
     try {
       final querySnapshot = await _firebaseFirestore
-          .collection('leaderboard')
+          .collection(_leaderboardCollectionName)
-          .orderBy('score', descending: true)
+          .orderBy(_scoreFieldName, descending: true)
-          .limit(10)
+          .limit(_leaderboardLimit)
           .get();
-      documents = querySnapshot.docs;
+      final documents = querySnapshot.docs;
+      return documents.toLeaderboard();
+    } on LeaderboardDeserializationException {
+      rethrow;
     } on Exception catch (error, stackTrace) {
       throw FetchTop10LeaderboardException(error, stackTrace);
     }
-
-    for (final document in documents) {
-      final data = document.data() as Map<String, dynamic>?;
-      if (data != null) {
-        try {
-          leaderboardEntries.add(LeaderboardEntryData.fromJson(data));
-        } catch (error, stackTrace) {
-          throw LeaderboardDeserializationException(error, stackTrace);
-        }
-      }
-    }
-
-    return leaderboardEntries;
   }
 
-  /// Adds player's score entry to the leaderboard and gets their
+  /// Adds player's score entry to the leaderboard if it is within the top-10
-  /// [LeaderboardRanking].
+  Future<void> addLeaderboardEntry(
-  Future<LeaderboardRanking> addLeaderboardEntry(
     LeaderboardEntryData entry,
   ) async {
-    late DocumentReference entryReference;
+    final leaderboard = await _fetchLeaderboardSortedByScore();
-    try {
+    if (leaderboard.length < 10) {
-      entryReference = await _firebaseFirestore
+      await _saveScore(entry);
-          .collection('leaderboard')
+    } else {
-          .add(entry.toJson());
+      final tenthPositionScore = leaderboard[9].score;
-    } on Exception catch (error, stackTrace) {
+      if (entry.score > tenthPositionScore) {
-      throw AddLeaderboardEntryException(error, stackTrace);
+        await _saveScore(entry);
-    }
+        await _deleteScoresUnder(tenthPositionScore);
-
-    try {
-      final querySnapshot = await _firebaseFirestore
-          .collection('leaderboard')
-          .orderBy('score', descending: true)
-          .get();
-
-      // TODO(allisonryan0002): see if we can find a more performant solution.
-      final documents = querySnapshot.docs;
-      final ranking = documents.indexWhere(
-            (document) => document.id == entryReference.id,
-          ) +
-          1;
-
-      if (ranking > 0) {
-        return LeaderboardRanking(ranking: ranking, outOf: documents.length);
-      } else {
-        throw FetchPlayerRankingException(
-          'Player score could not be found and ranking cannot be provided.',
-          StackTrace.current,
-        );
       }
-    } on Exception catch (error, stackTrace) {
-      throw FetchPlayerRankingException(error, stackTrace);
     }
   }
 
@@ -174,7 +56,6 @@ class LeaderboardRepository {
     if (!initialsRegex.hasMatch(initials)) {
       return false;
     }
-
     try {
       final document = await _firebaseFirestore
           .collection('prohibitedInitials')
@@ -187,4 +68,61 @@ class LeaderboardRepository {
       throw FetchProhibitedInitialsException(error, stackTrace);
     }
   }
+
+  Future<List<LeaderboardEntryData>> _fetchLeaderboardSortedByScore() async {
+    try {
+      final querySnapshot = await _firebaseFirestore
+          .collection(_leaderboardCollectionName)
+          .orderBy(_scoreFieldName, descending: true)
+          .get();
+      final documents = querySnapshot.docs;
+      return documents.toLeaderboard();
+    } on Exception catch (error, stackTrace) {
+      throw FetchLeaderboardException(error, stackTrace);
+    }
+  }
+
+  Future<void> _saveScore(LeaderboardEntryData entry) {
+    try {
+      return _firebaseFirestore
+          .collection(_leaderboardCollectionName)
+          .add(entry.toJson());
+    } on Exception catch (error, stackTrace) {
+      throw AddLeaderboardEntryException(error, stackTrace);
+    }
+  }
+
+  Future<void> _deleteScoresUnder(int score) async {
+    try {
+      final querySnapshot = await _firebaseFirestore
+          .collection(_leaderboardCollectionName)
+          .where(_scoreFieldName, isLessThanOrEqualTo: score)
+          .get();
+      final documents = querySnapshot.docs;
+      for (final document in documents) {
+        await document.reference.delete();
+      }
+    } on LeaderboardDeserializationException {
+      rethrow;
+    } on Exception catch (error, stackTrace) {
+      throw DeleteLeaderboardException(error, stackTrace);
+    }
+  }
+}
+
+extension on List<QueryDocumentSnapshot> {
+  List<LeaderboardEntryData> toLeaderboard() {
+    final leaderboardEntries = <LeaderboardEntryData>[];
+    for (final document in this) {
+      final data = document.data() as Map<String, dynamic>?;
+      if (data != null) {
+        try {
+          leaderboardEntries.add(LeaderboardEntryData.fromJson(data));
+        } catch (error, stackTrace) {
+          throw LeaderboardDeserializationException(error, stackTrace);
+        }
+      }
+    }
+    return leaderboardEntries;
+  }
 }

packages/leaderboard_repository/lib/src/models/exceptions.dart

@@ -0,0 +1,69 @@
+/// {@template leaderboard_exception}
+/// Base exception for leaderboard repository failures.
+/// {@endtemplate}
+abstract class LeaderboardException implements Exception {
+  /// {@macro leaderboard_exception}
+  const LeaderboardException(this.error, this.stackTrace);
+
+  /// The error that was caught.
+  final Object error;
+
+  /// The Stacktrace associated with the [error].
+  final StackTrace stackTrace;
+}
+
+/// {@template leaderboard_deserialization_exception}
+/// Exception thrown when leaderboard data cannot be deserialized in the
+/// expected way.
+/// {@endtemplate}
+class LeaderboardDeserializationException extends LeaderboardException {
+  /// {@macro leaderboard_deserialization_exception}
+  const LeaderboardDeserializationException(Object error, StackTrace stackTrace)
+      : super(error, stackTrace);
+}
+
+/// {@template fetch_top_10_leaderboard_exception}
+/// Exception thrown when failure occurs while fetching top 10 leaderboard.
+/// {@endtemplate}
+class FetchTop10LeaderboardException extends LeaderboardException {
+  /// {@macro fetch_top_10_leaderboard_exception}
+  const FetchTop10LeaderboardException(Object error, StackTrace stackTrace)
+      : super(error, stackTrace);
+}
+
+/// {@template fetch_leaderboard_exception}
+/// Exception thrown when failure occurs while fetching the leaderboard.
+/// {@endtemplate}
+class FetchLeaderboardException extends LeaderboardException {
+  /// {@macro fetch_top_10_leaderboard_exception}
+  const FetchLeaderboardException(Object error, StackTrace stackTrace)
+      : super(error, stackTrace);
+}
+
+/// {@template delete_leaderboard_exception}
+/// Exception thrown when failure occurs while deleting the leaderboard under
+/// the tenth position.
+/// {@endtemplate}
+class DeleteLeaderboardException extends LeaderboardException {
+  /// {@macro fetch_top_10_leaderboard_exception}
+  const DeleteLeaderboardException(Object error, StackTrace stackTrace)
+      : super(error, stackTrace);
+}
+
+/// {@template add_leaderboard_entry_exception}
+/// Exception thrown when failure occurs while adding entry to leaderboard.
+/// {@endtemplate}
+class AddLeaderboardEntryException extends LeaderboardException {
+  /// {@macro add_leaderboard_entry_exception}
+  const AddLeaderboardEntryException(Object error, StackTrace stackTrace)
+      : super(error, stackTrace);
+}
+
+/// {@template fetch_prohibited_initials_exception}
+/// Exception thrown when failure occurs while fetching prohibited initials.
+/// {@endtemplate}
+class FetchProhibitedInitialsException extends LeaderboardException {
+  /// {@macro fetch_prohibited_initials_exception}
+  const FetchProhibitedInitialsException(Object error, StackTrace stackTrace)
+      : super(error, stackTrace);
+}

packages/leaderboard_repository/lib/src/models/leaderboard_ranking.dart

@@ -1,20 +0,0 @@
-import 'package:equatable/equatable.dart';
-import 'package:leaderboard_repository/leaderboard_repository.dart';
-
-/// {@template leaderboard_ranking}
-/// Contains [ranking] for a single [LeaderboardEntryData] and the number of
-/// players the [ranking] is [outOf].
-/// {@endtemplate}
-class LeaderboardRanking extends Equatable {
-  /// {@macro leaderboard_ranking}
-  const LeaderboardRanking({required this.ranking, required this.outOf});
-
-  /// Place ranking by score for a [LeaderboardEntryData].
-  final int ranking;
-
-  /// Number of [LeaderboardEntryData]s at the time of score entry.
-  final int outOf;
-
-  @override
-  List<Object> get props => [ranking, outOf];
-}

packages/leaderboard_repository/lib/src/models/models.dart

@@ -1,2 +1,2 @@
+export 'exceptions.dart';
 export 'leaderboard_entry_data.dart';
-export 'leaderboard_ranking.dart';

packages/leaderboard_repository/test/src/leaderboard_repository_test.dart

@@ -153,7 +153,6 @@ void main() {
         character: CharacterType.dash,
       );
       const entryDocumentId = 'id$entryScore';
-      final ranking = LeaderboardRanking(ranking: 3, outOf: 4);
 
       setUp(() {
         leaderboardRepository = LeaderboardRepository(firestore);
@@ -165,13 +164,12 @@ void main() {
           final queryDocumentSnapshot = MockQueryDocumentSnapshot();
           when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
             'character': 'dash',
-            'username': 'user$score',
+            'playerInitials': 'AAA',
             'score': score
           });
           when(() => queryDocumentSnapshot.id).thenReturn('id$score');
           return queryDocumentSnapshot;
         }).toList();
-
         when(() => firestore.collection('leaderboard'))
             .thenAnswer((_) => collectionReference);
         when(() => collectionReference.add(any()))
@@ -184,19 +182,29 @@ void main() {
       });
 
       test(
-          'adds leaderboard entry and returns player ranking when '
+          'throws FetchLeaderboardException '
-          'firestore operations succeed', () async {
+          'when querying the leaderboard fails', () {
-        final rankingResult =
+        when(() => firestore.collection('leaderboard')).thenThrow(Exception());
-            await leaderboardRepository.addLeaderboardEntry(leaderboardEntry);
+        expect(
-
+          () => leaderboardRepository.addLeaderboardEntry(leaderboardEntry),
-        expect(rankingResult, equals(ranking));
+          throwsA(isA<FetchLeaderboardException>()),
+        );
       });
 
       test(
-          'throws AddLeaderboardEntryException when Exception occurs '
+          'saves the new score if the existing leaderboard '
-          'when trying to add entry to firestore', () async {
+          'has less than 10 scores', () async {
-        when(() => firestore.collection('leaderboard')).thenThrow(Exception());
+        await leaderboardRepository.addLeaderboardEntry(leaderboardEntry);
+        verify(
+          () => collectionReference.add(leaderboardEntry.toJson()),
+        ).called(1);
+      });
 
+      test(
+          'throws AddLeaderboardEntryException '
+          'when adding a new entry fails', () async {
+        when(() => collectionReference.add(leaderboardEntry.toJson()))
+            .thenThrow(Exception('oops'));
         expect(
           () => leaderboardRepository.addLeaderboardEntry(leaderboardEntry),
           throwsA(isA<AddLeaderboardEntryException>()),
@@ -204,26 +212,160 @@ void main() {
       });
 
       test(
-          'throws FetchPlayerRankingException when Exception occurs '
+          'does nothing if there are more than 10 scores in the leaderboard '
-          'when trying to retrieve information from firestore', () async {
+          'and the new score is smaller than the top 10', () async {
-        when(() => collectionReference.orderBy('score', descending: true))
+        final leaderboardScores = [
-            .thenThrow(Exception());
+          10000,
+          9500,
+          9000,
+          8500,
+          8000,
+          7500,
+          7000,
+          6500,
+          6000,
+          5500,
+          5000
+        ];
+        final queryDocumentSnapshots = leaderboardScores.map((score) {
+          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
+            'character': 'dash',
+            'playerInitials': 'AAA',
+            'score': score
+          });
+          when(() => queryDocumentSnapshot.id).thenReturn('id$score');
+          return queryDocumentSnapshot;
+        }).toList();
+        when(() => querySnapshot.docs).thenReturn(queryDocumentSnapshots);
 
-        expect(
+        await leaderboardRepository.addLeaderboardEntry(leaderboardEntry);
-          () => leaderboardRepository.addLeaderboardEntry(leaderboardEntry),
+        verifyNever(
-          throwsA(isA<FetchPlayerRankingException>()),
+          () => collectionReference.add(leaderboardEntry.toJson()),
         );
       });
 
       test(
-          'throws FetchPlayerRankingException when score cannot be found '
+          'throws DeleteLeaderboardException '
-          'in firestore leaderboard data', () async {
+          'when deleting scores outside the top 10 fails', () async {
-        when(() => documentReference.id).thenReturn('nonexistentDocumentId');
+        final deleteQuery = MockQuery();
-
+        final deleteQuerySnapshot = MockQuerySnapshot();
+        final newScore = LeaderboardEntryData(
+          playerInitials: 'ABC',
+          score: 15000,
+          character: CharacterType.android,
+        );
+        final leaderboardScores = [
+          10000,
+          9500,
+          9000,
+          8500,
+          8000,
+          7500,
+          7000,
+          6500,
+          6000,
+          5500,
+          5000,
+        ];
+        final deleteDocumentSnapshots = [5500, 5000].map((score) {
+          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
+            'character': 'dash',
+            'playerInitials': 'AAA',
+            'score': score
+          });
+          when(() => queryDocumentSnapshot.id).thenReturn('id$score');
+          when(() => queryDocumentSnapshot.reference)
+              .thenReturn(documentReference);
+          return queryDocumentSnapshot;
+        }).toList();
+        when(deleteQuery.get).thenAnswer((_) async => deleteQuerySnapshot);
+        when(() => deleteQuerySnapshot.docs)
+            .thenReturn(deleteDocumentSnapshots);
+        final queryDocumentSnapshots = leaderboardScores.map((score) {
+          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
+            'character': 'dash',
+            'playerInitials': 'AAA',
+            'score': score
+          });
+          when(() => queryDocumentSnapshot.id).thenReturn('id$score');
+          when(() => queryDocumentSnapshot.reference)
+              .thenReturn(documentReference);
+          return queryDocumentSnapshot;
+        }).toList();
+        when(
+          () => collectionReference.where('score', isLessThanOrEqualTo: 5500),
+        ).thenAnswer((_) => deleteQuery);
+        when(() => documentReference.delete()).thenThrow(Exception('oops'));
+        when(() => querySnapshot.docs).thenReturn(queryDocumentSnapshots);
         expect(
-          () => leaderboardRepository.addLeaderboardEntry(leaderboardEntry),
+          () => leaderboardRepository.addLeaderboardEntry(newScore),
-          throwsA(isA<FetchPlayerRankingException>()),
+          throwsA(isA<DeleteLeaderboardException>()),
+        );
+      });
+
+      test(
+          '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 deleteQuerySnapshot = MockQuerySnapshot();
+        final newScore = LeaderboardEntryData(
+          playerInitials: 'ABC',
+          score: 15000,
+          character: CharacterType.android,
         );
+        final leaderboardScores = [
+          10000,
+          9500,
+          9000,
+          8500,
+          8000,
+          7500,
+          7000,
+          6500,
+          6000,
+          5500,
+          5000,
+        ];
+        final deleteDocumentSnapshots = [5500, 5000].map((score) {
+          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
+            'character': 'dash',
+            'playerInitials': 'AAA',
+            'score': score
+          });
+          when(() => queryDocumentSnapshot.id).thenReturn('id$score');
+          when(() => queryDocumentSnapshot.reference)
+              .thenReturn(documentReference);
+          return queryDocumentSnapshot;
+        }).toList();
+        when(deleteQuery.get).thenAnswer((_) async => deleteQuerySnapshot);
+        when(() => deleteQuerySnapshot.docs)
+            .thenReturn(deleteDocumentSnapshots);
+        final queryDocumentSnapshots = leaderboardScores.map((score) {
+          final queryDocumentSnapshot = MockQueryDocumentSnapshot();
+          when(queryDocumentSnapshot.data).thenReturn(<String, dynamic>{
+            'character': 'dash',
+            'playerInitials': 'AAA',
+            'score': score
+          });
+          when(() => queryDocumentSnapshot.id).thenReturn('id$score');
+          when(() => queryDocumentSnapshot.reference)
+              .thenReturn(documentReference);
+          return queryDocumentSnapshot;
+        }).toList();
+        when(
+          () => collectionReference.where('score', isLessThanOrEqualTo: 5500),
+        ).thenAnswer((_) => deleteQuery);
+        when(() => documentReference.delete())
+            .thenAnswer((_) async => Future.value());
+        when(() => querySnapshot.docs).thenReturn(queryDocumentSnapshots);
+        await leaderboardRepository.addLeaderboardEntry(newScore);
+        verify(() => collectionReference.add(newScore.toJson())).called(1);
+        verify(() => documentReference.delete()).called(2);
       });
     });
 

packages/leaderboard_repository/test/src/models/leaderboard_ranking_test.dart

@@ -1,19 +0,0 @@
-import 'package:leaderboard_repository/leaderboard_repository.dart';
-import 'package:test/test.dart';
-
-void main() {
-  group('LeaderboardRanking', () {
-    test('can be instantiated', () {
-      const leaderboardRanking = LeaderboardRanking(ranking: 1, outOf: 1);
-
-      expect(leaderboardRanking, isNotNull);
-    });
-
-    test('supports value equality.', () {
-      const leaderboardRanking = LeaderboardRanking(ranking: 1, outOf: 1);
-      const leaderboardRanking2 = LeaderboardRanking(ranking: 1, outOf: 1);
-
-      expect(leaderboardRanking, equals(leaderboardRanking2));
-    });
-  });
-}

packages/pinball_components/lib/gen/assets.gen.dart

@@ -10,11 +10,14 @@ import 'package:flutter/widgets.dart';
 class $AssetsImagesGen {
   const $AssetsImagesGen();
 
-  $AssetsImagesAndroidBumperGen get androidBumper =>
+  $AssetsImagesAndroidGen get android => const $AssetsImagesAndroidGen();
-      const $AssetsImagesAndroidBumperGen();
   $AssetsImagesBackboardGen get backboard => const $AssetsImagesBackboardGen();
   $AssetsImagesBallGen get ball => const $AssetsImagesBallGen();
   $AssetsImagesBaseboardGen get baseboard => const $AssetsImagesBaseboardGen();
+
+  /// File path: assets/images/board-background.png
+  AssetGenImage get boardBackground =>
+      const AssetGenImage('assets/images/board-background.png');
   $AssetsImagesBoundaryGen get boundary => const $AssetsImagesBoundaryGen();
   $AssetsImagesDashGen get dash => const $AssetsImagesDashGen();
   $AssetsImagesDinoGen get dino => const $AssetsImagesDinoGen();
@@ -24,20 +27,23 @@ class $AssetsImagesGen {
   $AssetsImagesKickerGen get kicker => const $AssetsImagesKickerGen();
   $AssetsImagesLaunchRampGen get launchRamp =>
       const $AssetsImagesLaunchRampGen();
+  $AssetsImagesMultiplierGen get multiplier =>
+      const $AssetsImagesMultiplierGen();
   $AssetsImagesPlungerGen get plunger => const $AssetsImagesPlungerGen();
   $AssetsImagesSignpostGen get signpost => const $AssetsImagesSignpostGen();
   $AssetsImagesSlingshotGen get slingshot => const $AssetsImagesSlingshotGen();
-  $AssetsImagesSpaceshipGen get spaceship => const $AssetsImagesSpaceshipGen();
   $AssetsImagesSparkyGen get sparky => const $AssetsImagesSparkyGen();
 }
 
-class $AssetsImagesAndroidBumperGen {
+class $AssetsImagesAndroidGen {
-  const $AssetsImagesAndroidBumperGen();
+  const $AssetsImagesAndroidGen();
 
-  $AssetsImagesAndroidBumperAGen get a =>
+  $AssetsImagesAndroidBumperGen get bumper =>
-      const $AssetsImagesAndroidBumperAGen();
+      const $AssetsImagesAndroidBumperGen();
-  $AssetsImagesAndroidBumperBGen get b =>
+  $AssetsImagesAndroidRailGen get rail => const $AssetsImagesAndroidRailGen();
-      const $AssetsImagesAndroidBumperBGen();
+  $AssetsImagesAndroidRampGen get ramp => const $AssetsImagesAndroidRampGen();
+  $AssetsImagesAndroidSpaceshipGen get spaceship =>
+      const $AssetsImagesAndroidSpaceshipGen();
 }
 
 class $AssetsImagesBackboardGen {
@@ -188,6 +194,16 @@ class $AssetsImagesLaunchRampGen {
       const AssetGenImage('assets/images/launch_ramp/ramp.png');
 }
 
+class $AssetsImagesMultiplierGen {
+  const $AssetsImagesMultiplierGen();
+
+  $AssetsImagesMultiplierX2Gen get x2 => const $AssetsImagesMultiplierX2Gen();
+  $AssetsImagesMultiplierX3Gen get x3 => const $AssetsImagesMultiplierX3Gen();
+  $AssetsImagesMultiplierX4Gen get x4 => const $AssetsImagesMultiplierX4Gen();
+  $AssetsImagesMultiplierX5Gen get x5 => const $AssetsImagesMultiplierX5Gen();
+  $AssetsImagesMultiplierX6Gen get x6 => const $AssetsImagesMultiplierX6Gen();
+}
+
 class $AssetsImagesPlungerGen {
   const $AssetsImagesPlungerGen();
 
@@ -232,56 +248,79 @@ class $AssetsImagesSlingshotGen {
       const AssetGenImage('assets/images/slingshot/upper.png');
 }
 
-class $AssetsImagesSpaceshipGen {
-  const $AssetsImagesSpaceshipGen();
-
-  /// File path: assets/images/spaceship/bridge.png
-  AssetGenImage get bridge =>
-      const AssetGenImage('assets/images/spaceship/bridge.png');
-
-  $AssetsImagesSpaceshipRailGen get rail =>
-      const $AssetsImagesSpaceshipRailGen();
-  $AssetsImagesSpaceshipRampGen get ramp =>
-      const $AssetsImagesSpaceshipRampGen();
-
-  /// File path: assets/images/spaceship/saucer.png
-  AssetGenImage get saucer =>
-      const AssetGenImage('assets/images/spaceship/saucer.png');
-}
-
 class $AssetsImagesSparkyGen {
   const $AssetsImagesSparkyGen();
 
+  /// File path: assets/images/sparky/animatronic.png
   AssetGenImage get animatronic =>
       const AssetGenImage('assets/images/sparky/animatronic.png');
+
   $AssetsImagesSparkyBumperGen get bumper =>
       const $AssetsImagesSparkyBumperGen();
   $AssetsImagesSparkyComputerGen get computer =>
       const $AssetsImagesSparkyComputerGen();
 }
 
-class $AssetsImagesAndroidBumperAGen {
+class $AssetsImagesAndroidBumperGen {
-  const $AssetsImagesAndroidBumperAGen();
+  const $AssetsImagesAndroidBumperGen();
 
-  /// File path: assets/images/android_bumper/a/dimmed.png
+  $AssetsImagesAndroidBumperAGen get a =>
-  AssetGenImage get dimmed =>
+      const $AssetsImagesAndroidBumperAGen();
-      const AssetGenImage('assets/images/android_bumper/a/dimmed.png');
+  $AssetsImagesAndroidBumperBGen get b =>
+      const $AssetsImagesAndroidBumperBGen();
+  $AssetsImagesAndroidBumperCowGen get cow =>
+      const $AssetsImagesAndroidBumperCowGen();
+}
 
-  /// File path: assets/images/android_bumper/a/lit.png
+class $AssetsImagesAndroidRailGen {
-  AssetGenImage get lit =>
+  const $AssetsImagesAndroidRailGen();
-      const AssetGenImage('assets/images/android_bumper/a/lit.png');
+
+  /// File path: assets/images/android/rail/exit.png
+  AssetGenImage get exit =>
+      const AssetGenImage('assets/images/android/rail/exit.png');
+
+  /// File path: assets/images/android/rail/main.png
+  AssetGenImage get main =>
+      const AssetGenImage('assets/images/android/rail/main.png');
 }
 
-class $AssetsImagesAndroidBumperBGen {
+class $AssetsImagesAndroidRampGen {
-  const $AssetsImagesAndroidBumperBGen();
+  const $AssetsImagesAndroidRampGen();
 
-  /// File path: assets/images/android_bumper/b/dimmed.png
+  $AssetsImagesAndroidRampArrowGen get arrow =>
-  AssetGenImage get dimmed =>
+      const $AssetsImagesAndroidRampArrowGen();
-      const AssetGenImage('assets/images/android_bumper/b/dimmed.png');
 
-  /// File path: assets/images/android_bumper/b/lit.png
+  /// File path: assets/images/android/ramp/board-opening.png
-  AssetGenImage get lit =>
+  AssetGenImage get boardOpening =>
-      const AssetGenImage('assets/images/android_bumper/b/lit.png');
+      const AssetGenImage('assets/images/android/ramp/board-opening.png');
+
+  /// File path: assets/images/android/ramp/main.png
+  AssetGenImage get main =>
+      const AssetGenImage('assets/images/android/ramp/main.png');
+
+  /// File path: assets/images/android/ramp/railing-background.png
+  AssetGenImage get railingBackground =>
+      const AssetGenImage('assets/images/android/ramp/railing-background.png');
+
+  /// File path: assets/images/android/ramp/railing-foreground.png
+  AssetGenImage get railingForeground =>
+      const AssetGenImage('assets/images/android/ramp/railing-foreground.png');
+}
+
+class $AssetsImagesAndroidSpaceshipGen {
+  const $AssetsImagesAndroidSpaceshipGen();
+
+  /// File path: assets/images/android/spaceship/animatronic.png
+  AssetGenImage get animatronic =>
+      const AssetGenImage('assets/images/android/spaceship/animatronic.png');
+
+  /// File path: assets/images/android/spaceship/light-beam.png
+  AssetGenImage get lightBeam =>
+      const AssetGenImage('assets/images/android/spaceship/light-beam.png');
+
+  /// File path: assets/images/android/spaceship/saucer.png
+  AssetGenImage get saucer =>
+      const AssetGenImage('assets/images/android/spaceship/saucer.png');
 }
 
 class $AssetsImagesDashBumperGen {
@@ -305,39 +344,64 @@ class $AssetsImagesDinoAnimatronicGen {
       const AssetGenImage('assets/images/dino/animatronic/mouth.png');
 }
 
-class $AssetsImagesSpaceshipRailGen {
+class $AssetsImagesMultiplierX2Gen {
-  const $AssetsImagesSpaceshipRailGen();
+  const $AssetsImagesMultiplierX2Gen();
 
-  /// File path: assets/images/spaceship/rail/exit.png
+  /// File path: assets/images/multiplier/x2/dimmed.png
-  AssetGenImage get exit =>
+  AssetGenImage get dimmed =>
-      const AssetGenImage('assets/images/spaceship/rail/exit.png');
+      const AssetGenImage('assets/images/multiplier/x2/dimmed.png');
 
-  /// File path: assets/images/spaceship/rail/main.png
+  /// File path: assets/images/multiplier/x2/lit.png
-  AssetGenImage get main =>
+  AssetGenImage get lit =>
-      const AssetGenImage('assets/images/spaceship/rail/main.png');
+      const AssetGenImage('assets/images/multiplier/x2/lit.png');
 }
 
-class $AssetsImagesSpaceshipRampGen {
+class $AssetsImagesMultiplierX3Gen {
-  const $AssetsImagesSpaceshipRampGen();
+  const $AssetsImagesMultiplierX3Gen();
 
-  $AssetsImagesSpaceshipRampArrowGen get arrow =>
+  /// File path: assets/images/multiplier/x3/dimmed.png
-      const $AssetsImagesSpaceshipRampArrowGen();
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/multiplier/x3/dimmed.png');
 
-  /// File path: assets/images/spaceship/ramp/board-opening.png
+  /// File path: assets/images/multiplier/x3/lit.png
-  AssetGenImage get boardOpening =>
+  AssetGenImage get lit =>
-      const AssetGenImage('assets/images/spaceship/ramp/board-opening.png');
+      const AssetGenImage('assets/images/multiplier/x3/lit.png');
+}
 
-  /// File path: assets/images/spaceship/ramp/main.png
+class $AssetsImagesMultiplierX4Gen {
-  AssetGenImage get main =>
+  const $AssetsImagesMultiplierX4Gen();
-      const AssetGenImage('assets/images/spaceship/ramp/main.png');
 
-  /// File path: assets/images/spaceship/ramp/railing-background.png
+  /// File path: assets/images/multiplier/x4/dimmed.png
-  AssetGenImage get railingBackground => const AssetGenImage(
+  AssetGenImage get dimmed =>
-      'assets/images/spaceship/ramp/railing-background.png');
+      const AssetGenImage('assets/images/multiplier/x4/dimmed.png');
 
-  /// File path: assets/images/spaceship/ramp/railing-foreground.png
+  /// File path: assets/images/multiplier/x4/lit.png
-  AssetGenImage get railingForeground => const AssetGenImage(
+  AssetGenImage get lit =>
-      'assets/images/spaceship/ramp/railing-foreground.png');
+      const AssetGenImage('assets/images/multiplier/x4/lit.png');
+}
+
+class $AssetsImagesMultiplierX5Gen {
+  const $AssetsImagesMultiplierX5Gen();
+
+  /// File path: assets/images/multiplier/x5/dimmed.png
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/multiplier/x5/dimmed.png');
+
+  /// File path: assets/images/multiplier/x5/lit.png
+  AssetGenImage get lit =>
+      const AssetGenImage('assets/images/multiplier/x5/lit.png');
+}
+
+class $AssetsImagesMultiplierX6Gen {
+  const $AssetsImagesMultiplierX6Gen();
+
+  /// File path: assets/images/multiplier/x6/dimmed.png
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/multiplier/x6/dimmed.png');
+
+  /// File path: assets/images/multiplier/x6/lit.png
+  AssetGenImage get lit =>
+      const AssetGenImage('assets/images/multiplier/x6/lit.png');
 }
 
 class $AssetsImagesSparkyBumperGen {
@@ -360,6 +424,70 @@ class $AssetsImagesSparkyComputerGen {
       const AssetGenImage('assets/images/sparky/computer/top.png');
 }
 
+class $AssetsImagesAndroidBumperAGen {
+  const $AssetsImagesAndroidBumperAGen();
+
+  /// File path: assets/images/android/bumper/a/dimmed.png
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/android/bumper/a/dimmed.png');
+
+  /// File path: assets/images/android/bumper/a/lit.png
+  AssetGenImage get lit =>
+      const AssetGenImage('assets/images/android/bumper/a/lit.png');
+}
+
+class $AssetsImagesAndroidBumperBGen {
+  const $AssetsImagesAndroidBumperBGen();
+
+  /// File path: assets/images/android/bumper/b/dimmed.png
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/android/bumper/b/dimmed.png');
+
+  /// File path: assets/images/android/bumper/b/lit.png
+  AssetGenImage get lit =>
+      const AssetGenImage('assets/images/android/bumper/b/lit.png');
+}
+
+class $AssetsImagesAndroidBumperCowGen {
+  const $AssetsImagesAndroidBumperCowGen();
+
+  /// File path: assets/images/android/bumper/cow/dimmed.png
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/android/bumper/cow/dimmed.png');
+
+  /// File path: assets/images/android/bumper/cow/lit.png
+  AssetGenImage get lit =>
+      const AssetGenImage('assets/images/android/bumper/cow/lit.png');
+}
+
+class $AssetsImagesAndroidRampArrowGen {
+  const $AssetsImagesAndroidRampArrowGen();
+
+  /// File path: assets/images/android/ramp/arrow/active1.png
+  AssetGenImage get active1 =>
+      const AssetGenImage('assets/images/android/ramp/arrow/active1.png');
+
+  /// File path: assets/images/android/ramp/arrow/active2.png
+  AssetGenImage get active2 =>
+      const AssetGenImage('assets/images/android/ramp/arrow/active2.png');
+
+  /// File path: assets/images/android/ramp/arrow/active3.png
+  AssetGenImage get active3 =>
+      const AssetGenImage('assets/images/android/ramp/arrow/active3.png');
+
+  /// File path: assets/images/android/ramp/arrow/active4.png
+  AssetGenImage get active4 =>
+      const AssetGenImage('assets/images/android/ramp/arrow/active4.png');
+
+  /// File path: assets/images/android/ramp/arrow/active5.png
+  AssetGenImage get active5 =>
+      const AssetGenImage('assets/images/android/ramp/arrow/active5.png');
+
+  /// File path: assets/images/android/ramp/arrow/inactive.png
+  AssetGenImage get inactive =>
+      const AssetGenImage('assets/images/android/ramp/arrow/inactive.png');
+}
+
 class $AssetsImagesDashBumperAGen {
   const $AssetsImagesDashBumperAGen();
 
@@ -396,34 +524,6 @@ class $AssetsImagesDashBumperMainGen {
       const AssetGenImage('assets/images/dash/bumper/main/inactive.png');
 }
 
-class $AssetsImagesSpaceshipRampArrowGen {
-  const $AssetsImagesSpaceshipRampArrowGen();
-
-  /// File path: assets/images/spaceship/ramp/arrow/active1.png
-  AssetGenImage get active1 =>
-      const AssetGenImage('assets/images/spaceship/ramp/arrow/active1.png');
-
-  /// File path: assets/images/spaceship/ramp/arrow/active2.png
-  AssetGenImage get active2 =>
-      const AssetGenImage('assets/images/spaceship/ramp/arrow/active2.png');
-
-  /// File path: assets/images/spaceship/ramp/arrow/active3.png
-  AssetGenImage get active3 =>
-      const AssetGenImage('assets/images/spaceship/ramp/arrow/active3.png');
-
-  /// File path: assets/images/spaceship/ramp/arrow/active4.png
-  AssetGenImage get active4 =>
-      const AssetGenImage('assets/images/spaceship/ramp/arrow/active4.png');
-
-  /// File path: assets/images/spaceship/ramp/arrow/active5.png
-  AssetGenImage get active5 =>
-      const AssetGenImage('assets/images/spaceship/ramp/arrow/active5.png');
-
-  /// File path: assets/images/spaceship/ramp/arrow/inactive.png
-  AssetGenImage get inactive =>
-      const AssetGenImage('assets/images/spaceship/ramp/arrow/inactive.png');
-}
-
 class $AssetsImagesSparkyBumperAGen {
   const $AssetsImagesSparkyBumperAGen();
 

packages/pinball_components/lib/src/components/android_bumper/android_bumper.dart

@@ -10,7 +10,7 @@ import 'package:pinball_flame/pinball_flame.dart';
 export 'cubit/android_bumper_cubit.dart';
 
 /// {@template android_bumper}
-/// Bumper for area under the [Spaceship].
+/// Bumper for area under the [AndroidSpaceship].
 /// {@endtemplate}
 class AndroidBumper extends BodyComponent with InitialPosition {
   /// {@macro android_bumper}
@@ -19,6 +19,7 @@ class AndroidBumper extends BodyComponent with InitialPosition {
     required double minorRadius,
     required String litAssetPath,
     required String dimmedAssetPath,
+    required Vector2 spritePosition,
     Iterable<Component>? children,
     required this.bloc,
   })  : _majorRadius = majorRadius,
@@ -32,6 +33,7 @@ class AndroidBumper extends BodyComponent with InitialPosition {
             _AndroidBumperSpriteGroupComponent(
               dimmedAssetPath: dimmedAssetPath,
               litAssetPath: litAssetPath,
+              position: spritePosition,
               state: bloc.state,
             ),
             ...?children,
@@ -44,8 +46,9 @@ class AndroidBumper extends BodyComponent with InitialPosition {
   }) : this._(
           majorRadius: 3.52,
           minorRadius: 2.97,
-          litAssetPath: Assets.images.androidBumper.a.lit.keyName,
+          litAssetPath: Assets.images.android.bumper.a.lit.keyName,
-          dimmedAssetPath: Assets.images.androidBumper.a.dimmed.keyName,
+          dimmedAssetPath: Assets.images.android.bumper.a.dimmed.keyName,
+          spritePosition: Vector2(0, -0.1),
           bloc: AndroidBumperCubit(),
           children: children,
         );
@@ -56,8 +59,22 @@ class AndroidBumper extends BodyComponent with InitialPosition {
   }) : this._(
           majorRadius: 3.19,
           minorRadius: 2.79,
-          litAssetPath: Assets.images.androidBumper.b.lit.keyName,
+          litAssetPath: Assets.images.android.bumper.b.lit.keyName,
-          dimmedAssetPath: Assets.images.androidBumper.b.dimmed.keyName,
+          dimmedAssetPath: Assets.images.android.bumper.b.dimmed.keyName,
+          spritePosition: Vector2(0, -0.1),
+          bloc: AndroidBumperCubit(),
+          children: children,
+        );
+
+  /// {@macro android_bumper}
+  AndroidBumper.cow({
+    Iterable<Component>? children,
+  }) : this._(
+          majorRadius: 3.4,
+          minorRadius: 2.9,
+          litAssetPath: Assets.images.android.bumper.cow.lit.keyName,
+          dimmedAssetPath: Assets.images.android.bumper.cow.dimmed.keyName,
+          spritePosition: Vector2(0, -0.68),
           bloc: AndroidBumperCubit(),
           children: children,
         );
@@ -113,12 +130,13 @@ class _AndroidBumperSpriteGroupComponent
   _AndroidBumperSpriteGroupComponent({
     required String litAssetPath,
     required String dimmedAssetPath,
+    required Vector2 position,
     required AndroidBumperState state,
   })  : _litAssetPath = litAssetPath,
         _dimmedAssetPath = dimmedAssetPath,
         super(
           anchor: Anchor.center,
-          position: Vector2(0, -0.1),
+          position: position,
           current: state,
         );
 

packages/pinball_components/lib/src/components/android_bumper/cubit/android_bumper_cubit.dart

@@ -5,7 +5,7 @@ import 'package:bloc/bloc.dart';
 part 'android_bumper_state.dart';
 
 class AndroidBumperCubit extends Cubit<AndroidBumperState> {
-  AndroidBumperCubit() : super(AndroidBumperState.dimmed);
+  AndroidBumperCubit() : super(AndroidBumperState.lit);
 
   void onBallContacted() {
     emit(AndroidBumperState.dimmed);

packages/pinball_components/lib/src/components/android_spaceship.dart

@@ -0,0 +1,209 @@
+// ignore_for_file: public_member_api_docs
+
+import 'dart:async';
+import 'dart:math' as math;
+
+import 'package:flame/components.dart';
+import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:pinball_components/gen/assets.gen.dart';
+import 'package:pinball_components/pinball_components.dart' hide Assets;
+import 'package:pinball_flame/pinball_flame.dart';
+
+class AndroidSpaceship extends Blueprint {
+  AndroidSpaceship({required Vector2 position})
+      : super(
+          components: [
+            _SpaceshipSaucer()..initialPosition = position,
+            _SpaceshipSaucerSpriteAnimationComponent()..position = position,
+            _LightBeamSpriteComponent()..position = position + Vector2(2.5, 5),
+            _AndroidHead()..initialPosition = position + Vector2(0.5, 0.25),
+            _SpaceshipHole(
+              outsideLayer: Layer.spaceshipExitRail,
+              outsidePriority: RenderPriority.ballOnSpaceshipRail,
+            )..initialPosition = position - Vector2(5.3, -5.4),
+            _SpaceshipHole(
+              outsideLayer: Layer.board,
+              outsidePriority: RenderPriority.ballOnBoard,
+            )..initialPosition = position - Vector2(-7.5, -1.1),
+          ],
+        );
+}
+
+class _SpaceshipSaucer extends BodyComponent with InitialPosition, Layered {
+  _SpaceshipSaucer() : super(renderBody: false) {
+    layer = Layer.spaceship;
+  }
+
+  @override
+  Body createBody() {
+    final shape = _SpaceshipSaucerShape();
+    final bodyDef = BodyDef(
+      position: initialPosition,
+      userData: this,
+      angle: -1.7,
+    );
+
+    return world.createBody(bodyDef)..createFixtureFromShape(shape);
+  }
+}
+
+class _SpaceshipSaucerShape extends ChainShape {
+  _SpaceshipSaucerShape() {
+    const minorRadius = 9.75;
+    const majorRadius = 11.9;
+
+    createChain(
+      [
+        for (var angle = 0.2618; angle <= 6.0214; angle += math.pi / 180)
+          Vector2(
+            minorRadius * math.cos(angle),
+            majorRadius * math.sin(angle),
+          ),
+      ],
+    );
+  }
+}
+
+class _SpaceshipSaucerSpriteAnimationComponent extends SpriteAnimationComponent
+    with HasGameRef {
+  _SpaceshipSaucerSpriteAnimationComponent()
+      : super(
+          anchor: Anchor.center,
+          priority: RenderPriority.spaceshipSaucer,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    final spriteSheet = gameRef.images.fromCache(
+      Assets.images.android.spaceship.saucer.keyName,
+    );
+
+    const amountPerRow = 5;
+    const amountPerColumn = 3;
+    final textureSize = Vector2(
+      spriteSheet.width / amountPerRow,
+      spriteSheet.height / amountPerColumn,
+    );
+    size = textureSize / 10;
+
+    animation = SpriteAnimation.fromFrameData(
+      spriteSheet,
+      SpriteAnimationData.sequenced(
+        amount: amountPerRow * amountPerColumn,
+        amountPerRow: amountPerRow,
+        stepTime: 1 / 24,
+        textureSize: textureSize,
+      ),
+    );
+  }
+}
+
+// TODO(allisonryan0002): add pulsing behavior.
+class _LightBeamSpriteComponent extends SpriteComponent with HasGameRef {
+  _LightBeamSpriteComponent()
+      : super(
+          anchor: Anchor.center,
+          priority: RenderPriority.spaceshipLightBeam,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    final sprite = Sprite(
+      gameRef.images.fromCache(
+        Assets.images.android.spaceship.lightBeam.keyName,
+      ),
+    );
+    this.sprite = sprite;
+    size = sprite.originalSize / 10;
+  }
+}
+
+class _AndroidHead extends BodyComponent with InitialPosition, Layered {
+  _AndroidHead()
+      : super(
+          priority: RenderPriority.androidHead,
+          children: [_AndroidHeadSpriteAnimationComponent()],
+          renderBody: false,
+        ) {
+    layer = Layer.spaceship;
+  }
+
+  @override
+  Body createBody() {
+    final shape = EllipseShape(
+      center: Vector2.zero(),
+      majorRadius: 3.1,
+      minorRadius: 2,
+    )..rotate(1.4);
+    // TODO(allisonryan0002): use bumping behavior.
+    final fixtureDef = FixtureDef(
+      shape,
+      restitution: 0.1,
+    );
+    final bodyDef = BodyDef(position: initialPosition);
+
+    return world.createBody(bodyDef)..createFixture(fixtureDef);
+  }
+}
+
+class _AndroidHeadSpriteAnimationComponent extends SpriteAnimationComponent
+    with HasGameRef {
+  _AndroidHeadSpriteAnimationComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(-0.24, -2.6),
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    final spriteSheet = gameRef.images.fromCache(
+      Assets.images.android.spaceship.animatronic.keyName,
+    );
+
+    const amountPerRow = 18;
+    const amountPerColumn = 4;
+    final textureSize = Vector2(
+      spriteSheet.width / amountPerRow,
+      spriteSheet.height / amountPerColumn,
+    );
+    size = textureSize / 10;
+
+    animation = SpriteAnimation.fromFrameData(
+      spriteSheet,
+      SpriteAnimationData.sequenced(
+        amount: amountPerRow * amountPerColumn,
+        amountPerRow: amountPerRow,
+        stepTime: 1 / 24,
+        textureSize: textureSize,
+      ),
+    );
+  }
+}
+
+class _SpaceshipHole extends LayerSensor {
+  _SpaceshipHole({required Layer outsideLayer, required int outsidePriority})
+      : super(
+          insideLayer: Layer.spaceship,
+          outsideLayer: outsideLayer,
+          orientation: LayerEntranceOrientation.down,
+          insidePriority: RenderPriority.ballOnSpaceship,
+          outsidePriority: outsidePriority,
+        ) {
+    layer = Layer.spaceship;
+  }
+
+  @override
+  Shape get shape {
+    return ArcShape(
+      center: Vector2(0, -3.2),
+      arcRadius: 5,
+      angle: 1,
+      rotation: -2,
+    );
+  }
+}

packages/pinball_components/lib/src/components/board_background_sprite_component.dart

@@ -0,0 +1,26 @@
+// ignore_for_file: public_member_api_docs
+
+import 'package:flame/components.dart';
+import 'package:pinball_components/pinball_components.dart';
+
+class BoardBackgroundSpriteComponent extends SpriteComponent with HasGameRef {
+  BoardBackgroundSpriteComponent()
+      : super(
+          anchor: Anchor.center,
+          priority: RenderPriority.boardBackground,
+          position: Vector2(0, -1),
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    final sprite = Sprite(
+      gameRef.images.fromCache(
+        Assets.images.boardBackground.keyName,
+      ),
+    );
+    this.sprite = sprite;
+    size = sprite.originalSize / 10;
+  }
+}

packages/pinball_components/lib/src/components/bumping_behavior.dart

@@ -1,4 +1,5 @@
 import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:flutter/material.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template bumping_behavior}
@@ -11,15 +12,22 @@ class BumpingBehavior extends ContactBehavior {
   /// Determines how strong the bump is.
   final double _strength;
 
+  /// This is used to recoginze the current state of a contact manifold in world
+  /// coordinates.
+  @visibleForTesting
+  final WorldManifold worldManifold = WorldManifold();
+
   @override
   void postSolve(Object other, Contact contact, ContactImpulse impulse) {
     super.postSolve(other, contact, impulse);
     if (other is! BodyComponent) return;
 
+    contact.getWorldManifold(worldManifold);
     other.body.applyLinearImpulse(
-      contact.manifold.localPoint
+      worldManifold.normal
-        ..normalize()
+        ..multiply(
-        ..multiply(Vector2.all(other.body.mass * _strength)),
+          Vector2.all(other.body.mass * _strength),
+        ),
     );
   }
 }

packages/pinball_components/lib/src/components/components.dart

@@ -1,7 +1,9 @@
 export 'android_bumper/android_bumper.dart';
+export 'android_spaceship.dart';
 export 'backboard/backboard.dart';
 export 'ball.dart';
 export 'baseboard.dart';
+export 'board_background_sprite_component.dart';
 export 'board_dimensions.dart';
 export 'board_side.dart';
 export 'boundaries.dart';
@@ -19,6 +21,7 @@ export 'kicker.dart';
 export 'launch_ramp.dart';
 export 'layer.dart';
 export 'layer_sensor.dart';
+export 'multiplier/multiplier.dart';
 export 'plunger.dart';
 export 'render_priority.dart';
 export 'rocket.dart';
@@ -26,7 +29,6 @@ export 'score_text.dart';
 export 'shapes/shapes.dart';
 export 'signpost.dart';
 export 'slingshot.dart';
-export 'spaceship.dart';
 export 'spaceship_rail.dart';
 export 'spaceship_ramp.dart';
 export 'sparky_animatronic.dart';

packages/pinball_components/lib/src/components/google_letter/google_letter.dart

@@ -13,12 +13,14 @@ export 'cubit/google_letter_cubit.dart';
 class GoogleLetter extends BodyComponent with InitialPosition {
   /// {@macro google_letter}
   GoogleLetter(
-    int index,
+    int index, {
-  )   : bloc = GoogleLetterCubit(),
+    Iterable<Component>? children,
+  })  : bloc = GoogleLetterCubit(),
         super(
           children: [
             GoogleLetterBallContactBehavior(),
-            _GoogleLetterSprite(_GoogleLetterSprite.spritePaths[index])
+            _GoogleLetterSprite(_GoogleLetterSprite.spritePaths[index]),
+            ...?children,
           ],
         );
 

packages/pinball_components/lib/src/components/kicker.dart

@@ -16,9 +16,13 @@ class Kicker extends BodyComponent with InitialPosition {
   /// {@macro kicker}
   Kicker({
     required BoardSide side,
+    Iterable<Component>? children,
   })  : _side = side,
         super(
-          children: [_KickerSpriteComponent(side: side)],
+          children: [
+            _KickerSpriteComponent(side: side),
+            ...?children,
+          ],
           renderBody: false,
         );
 

packages/pinball_components/lib/src/components/multiplier/cubit/multiplier_cubit.dart

@@ -0,0 +1,25 @@
+// ignore_for_file: public_member_api_docs
+
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:pinball_components/pinball_components.dart';
+
+part 'multiplier_state.dart';
+
+class MultiplierCubit extends Cubit<MultiplierState> {
+  MultiplierCubit(MultiplierValue multiplierValue)
+      : super(MultiplierState.initial(multiplierValue));
+
+  /// Event added when the game's current multiplier changes.
+  void next(int multiplier) {
+    if (state.value.equals(multiplier)) {
+      if (state.spriteState == MultiplierSpriteState.dimmed) {
+        emit(state.copyWith(spriteState: MultiplierSpriteState.lit));
+      }
+    } else {
+      if (state.spriteState == MultiplierSpriteState.lit) {
+        emit(state.copyWith(spriteState: MultiplierSpriteState.dimmed));
+      }
+    }
+  }
+}

packages/pinball_components/lib/src/components/multiplier/cubit/multiplier_state.dart

@@ -0,0 +1,56 @@
+// ignore_for_file: public_member_api_docs
+
+part of 'multiplier_cubit.dart';
+
+enum MultiplierSpriteState {
+  lit,
+  dimmed,
+}
+
+class MultiplierState extends Equatable {
+  const MultiplierState({
+    required this.value,
+    required this.spriteState,
+  });
+
+  const MultiplierState.initial(MultiplierValue multiplierValue)
+      : this(
+          value: multiplierValue,
+          spriteState: MultiplierSpriteState.dimmed,
+        );
+
+  /// Current value for the [Multiplier]
+  final MultiplierValue value;
+
+  /// The [MultiplierSpriteGroupComponent] current sprite state
+  final MultiplierSpriteState spriteState;
+
+  MultiplierState copyWith({
+    MultiplierSpriteState? spriteState,
+  }) {
+    return MultiplierState(
+      value: value,
+      spriteState: spriteState ?? this.spriteState,
+    );
+  }
+
+  @override
+  List<Object> get props => [value, spriteState];
+}
+
+extension MultiplierValueX on MultiplierValue {
+  bool equals(int value) {
+    switch (this) {
+      case MultiplierValue.x2:
+        return value == 2;
+      case MultiplierValue.x3:
+        return value == 3;
+      case MultiplierValue.x4:
+        return value == 4;
+      case MultiplierValue.x5:
+        return value == 5;
+      case MultiplierValue.x6:
+        return value == 6;
+    }
+  }
+}

packages/pinball_components/lib/src/components/multiplier/multiplier.dart

@@ -0,0 +1,204 @@
+// ignore_for_file: public_member_api_docs
+
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball_components/gen/assets.gen.dart';
+import 'package:pinball_components/src/components/multiplier/cubit/multiplier_cubit.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+export 'cubit/multiplier_cubit.dart';
+
+/// {@template multiplier}
+/// Backlit multiplier decal displayed on the board.
+/// {@endtemplate}
+class Multiplier extends Component {
+  /// {@macro multiplier}
+  Multiplier._({
+    required MultiplierValue value,
+    required Vector2 position,
+    required double angle,
+    required this.bloc,
+  })  : _value = value,
+        _position = position,
+        _angle = angle,
+        super();
+
+  /// {@macro multiplier}
+  Multiplier.x2({
+    required Vector2 position,
+    required double angle,
+  }) : this._(
+          value: MultiplierValue.x2,
+          position: position,
+          angle: angle,
+          bloc: MultiplierCubit(MultiplierValue.x2),
+        );
+
+  /// {@macro multiplier}
+  Multiplier.x3({
+    required Vector2 position,
+    required double angle,
+  }) : this._(
+          value: MultiplierValue.x3,
+          position: position,
+          angle: angle,
+          bloc: MultiplierCubit(MultiplierValue.x3),
+        );
+
+  /// {@macro multiplier}
+  Multiplier.x4({
+    required Vector2 position,
+    required double angle,
+  }) : this._(
+          value: MultiplierValue.x4,
+          position: position,
+          angle: angle,
+          bloc: MultiplierCubit(MultiplierValue.x4),
+        );
+
+  /// {@macro multiplier}
+  Multiplier.x5({
+    required Vector2 position,
+    required double angle,
+  }) : this._(
+          value: MultiplierValue.x5,
+          position: position,
+          angle: angle,
+          bloc: MultiplierCubit(MultiplierValue.x5),
+        );
+
+  /// {@macro multiplier}
+  Multiplier.x6({
+    required Vector2 position,
+    required double angle,
+  }) : this._(
+          value: MultiplierValue.x6,
+          position: position,
+          angle: angle,
+          bloc: MultiplierCubit(MultiplierValue.x6),
+        );
+
+  /// Creates a [Multiplier] without any children.
+  ///
+  /// This can be used for testing [Multiplier]'s behaviors in isolation.
+  // TODO(alestiago): Refactor injecting bloc once the following is merged:
+  // https://github.com/flame-engine/flame/pull/1538
+  @visibleForTesting
+  Multiplier.test({
+    required MultiplierValue value,
+    required this.bloc,
+  })  : _value = value,
+        _position = Vector2.zero(),
+        _angle = 0;
+
+// TODO(ruimiguel): Consider refactoring once the following is merged:
+  // https://github.com/flame-engine/flame/pull/1538
+  final MultiplierCubit bloc;
+
+  final MultiplierValue _value;
+  final Vector2 _position;
+  final double _angle;
+  late final MultiplierSpriteGroupComponent _sprite;
+
+  @override
+  void onRemove() {
+    bloc.close();
+    super.onRemove();
+  }
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    _sprite = MultiplierSpriteGroupComponent(
+      position: _position,
+      litAssetPath: _value.litAssetPath,
+      dimmedAssetPath: _value.dimmedAssetPath,
+      angle: _angle,
+      current: bloc.state,
+    );
+    await add(_sprite);
+  }
+}
+
+/// Available multiplier values.
+enum MultiplierValue {
+  x2,
+  x3,
+  x4,
+  x5,
+  x6,
+}
+
+extension on MultiplierValue {
+  String get litAssetPath {
+    switch (this) {
+      case MultiplierValue.x2:
+        return Assets.images.multiplier.x2.lit.keyName;
+      case MultiplierValue.x3:
+        return Assets.images.multiplier.x3.lit.keyName;
+      case MultiplierValue.x4:
+        return Assets.images.multiplier.x4.lit.keyName;
+      case MultiplierValue.x5:
+        return Assets.images.multiplier.x5.lit.keyName;
+      case MultiplierValue.x6:
+        return Assets.images.multiplier.x6.lit.keyName;
+    }
+  }
+
+  String get dimmedAssetPath {
+    switch (this) {
+      case MultiplierValue.x2:
+        return Assets.images.multiplier.x2.dimmed.keyName;
+      case MultiplierValue.x3:
+        return Assets.images.multiplier.x3.dimmed.keyName;
+      case MultiplierValue.x4:
+        return Assets.images.multiplier.x4.dimmed.keyName;
+      case MultiplierValue.x5:
+        return Assets.images.multiplier.x5.dimmed.keyName;
+      case MultiplierValue.x6:
+        return Assets.images.multiplier.x6.dimmed.keyName;
+    }
+  }
+}
+
+/// {@template multiplier_sprite_group_component}
+/// A [SpriteGroupComponent] for a [Multiplier] with lit and dimmed states.
+/// {@endtemplate}
+@visibleForTesting
+class MultiplierSpriteGroupComponent
+    extends SpriteGroupComponent<MultiplierSpriteState>
+    with HasGameRef, ParentIsA<Multiplier> {
+  /// {@macro multiplier_sprite_group_component}
+  MultiplierSpriteGroupComponent({
+    required Vector2 position,
+    required String litAssetPath,
+    required String dimmedAssetPath,
+    required double angle,
+    required MultiplierState current,
+  })  : _litAssetPath = litAssetPath,
+        _dimmedAssetPath = dimmedAssetPath,
+        super(
+          anchor: Anchor.center,
+          position: position,
+          angle: angle,
+          current: current.spriteState,
+        );
+
+  final String _litAssetPath;
+  final String _dimmedAssetPath;
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    parent.bloc.stream.listen((state) => current = state.spriteState);
+
+    final sprites = {
+      MultiplierSpriteState.lit:
+          Sprite(gameRef.images.fromCache(_litAssetPath)),
+      MultiplierSpriteState.dimmed:
+          Sprite(gameRef.images.fromCache(_dimmedAssetPath)),
+    };
+    this.sprites = sprites;
+    size = sprites[current]!.originalSize / 10;
+  }
+}

packages/pinball_components/lib/src/components/plunger.dart

@@ -241,7 +241,7 @@ class PlungerAnchorPrismaticJointDef extends PrismaticJointDef {
       plunger.body,
       anchor.body,
       plunger.body.position + anchor.body.position,
-      Vector2(18.6, BoardDimensions.bounds.height),
+      Vector2(16, BoardDimensions.bounds.height),
     );
     enableLimit = true;
     lowerTranslation = double.negativeInfinity;

packages/pinball_components/lib/src/components/render_priority.dart

@@ -20,7 +20,7 @@ abstract class RenderPriority {
   static const int ballOnSpaceshipRamp =
       _above + spaceshipRampBackgroundRailing;
 
-  /// Render priority for the [Ball] while it's on the [Spaceship].
+  /// Render priority for the [Ball] while it's on the [AndroidSpaceship].
   static const int ballOnSpaceship = _above + spaceshipSaucer;
 
   /// Render priority for the [Ball] while it's on the [SpaceshipRail].
@@ -33,13 +33,13 @@ abstract class RenderPriority {
 
   // TODO(allisonryan0002): fix this magic priority. Could bump all priorities
   // so there are no negatives.
-  static const int background = 3 * _below + _base;
+  static const int boardBackground = 3 * _below + _base;
 
   // Boundaries
 
   static const int bottomBoundary = _above + dinoBottomWall;
 
-  static const int outerBoundary = _above + background;
+  static const int outerBoundary = _above + boardBackground;
 
   static const int outerBottomBoundary = _above + rocket;
 
@@ -55,7 +55,7 @@ abstract class RenderPriority {
 
   static const int plunger = _above + launchRamp;
 
-  static const int rocket = _above + bottomBoundary;
+  static const int rocket = _below + bottomBoundary;
 
   // Dino Land
 
@@ -91,7 +91,7 @@ abstract class RenderPriority {
 
   static const int spaceshipSaucer = _above + ballOnSpaceshipRail;
 
-  static const int spaceshipSaucerWall = _above + spaceshipSaucer;
+  static const int spaceshipLightBeam = _below + spaceshipSaucer;
 
   static const int androidHead = _above + spaceshipSaucer;
 

packages/pinball_components/lib/src/components/rocket.dart

@@ -6,19 +6,22 @@ import 'package:pinball_components/pinball_components.dart' hide Assets;
 /// A [SpriteComponent] for the rocket over [Plunger].
 /// {@endtemplate}
 class RocketSpriteComponent extends SpriteComponent with HasGameRef {
-  // TODO(ruimiguel): change this priority to be over launcher ramp and bottom
-  // wall.
   /// {@macro rocket_sprite_component}
-  RocketSpriteComponent() : super(priority: RenderPriority.rocket);
+  RocketSpriteComponent()
+      : super(
+          priority: RenderPriority.rocket,
+          anchor: Anchor.center,
+        );
 
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-    final sprite = await gameRef.loadSprite(
+    final sprite = Sprite(
-      Assets.images.plunger.rocket.keyName,
+      gameRef.images.fromCache(
+        Assets.images.plunger.rocket.keyName,
+      ),
     );
     this.sprite = sprite;
     size = sprite.originalSize / 10;
-    anchor = Anchor.center;
   }
 }