Merge branch 'main' into release

# Conflicts:
#	firebase.json

.github/workflows/main.yaml

@@ -13,3 +13,4 @@ jobs:
       flutter_channel: stable
       flutter_version: 2.10.0
       coverage_excludes: "lib/gen/*.dart"
+      test_optimization: false

firebase.json

@@ -1,7 +1,33 @@
 {
+  "firestore": {
+    "rules": "firestore.rules"
+  },
   "hosting": {
     "public": "build/web",
     "site": "io-pinball",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "headers": [
+      {
+        "source": "**/*.@(jpg|jpeg|gif|png)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=3600"
+          }
+        ]
+      },
+      {
+        "source": "**",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache, no-store, must-revalidate"
+          }
+        ]
+      }
+    ]
+  },
+  "storage": {
+    "rules": "storage.rules"
   }
 }

firestore.rules

@@ -0,0 +1,29 @@
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {    
+    match /leaderboard/{userId} {
+
+      function prohibited(initials) {
+        let prohibitedInitials = get(/databases/$(database)/documents/prohibitedInitials/list).data.prohibitedInitials;
+        return initials in prohibitedInitials;
+      }
+      
+      function inCharLimit(initials) {
+        return initials.size() < 4;
+      }
+      
+      function isAuthedUser(auth) {
+      	return request.auth.uid != null && auth.token.firebase.sign_in_provider == "anonymous"
+      }
+   
+      // Leaderboard can be read if it doesn't contain any prohibited initials
+      allow read: if !prohibited(resource.data.playerInitials);
+      
+      // A leaderboard entry can be created if the user is authenticated,
+      // it's 3 characters long, and not a prohibited combination.
+      allow create: if isAuthedUser(request.auth) &&
+                       inCharLimit(request.resource.data.playerInitials) && 
+                       !prohibited(request.resource.data.playerInitials);
+    }
+  }
+}

lib/app/view/app.dart

@@ -8,6 +8,7 @@ import 'package:leaderboard_repository/leaderboard_repository.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball/select_character/select_character.dart';
+import 'package:pinball/start_game/start_game.dart';
 import 'package:pinball_audio/pinball_audio.dart';
 import 'package:pinball_ui/pinball_ui.dart';
 
@@ -16,15 +17,15 @@ class App extends StatelessWidget {
     Key? key,
     required AuthenticationRepository authenticationRepository,
     required LeaderboardRepository leaderboardRepository,
-    required PinballAudio pinballAudio,
+    required PinballPlayer pinballPlayer,
   })  : _authenticationRepository = authenticationRepository,
         _leaderboardRepository = leaderboardRepository,
-        _pinballAudio = pinballAudio,
+        _pinballPlayer = pinballPlayer,
         super(key: key);
 
   final AuthenticationRepository _authenticationRepository;
   final LeaderboardRepository _leaderboardRepository;
-  final PinballAudio _pinballAudio;
+  final PinballPlayer _pinballPlayer;
 
   @override
   Widget build(BuildContext context) {
@@ -32,10 +33,13 @@ class App extends StatelessWidget {
       providers: [
         RepositoryProvider.value(value: _authenticationRepository),
         RepositoryProvider.value(value: _leaderboardRepository),
-        RepositoryProvider.value(value: _pinballAudio),
+        RepositoryProvider.value(value: _pinballPlayer),
       ],
-      child: BlocProvider(
-        create: (context) => CharacterThemeCubit(),
+      child: MultiBlocProvider(
+        providers: [
+          BlocProvider(create: (_) => CharacterThemeCubit()),
+          BlocProvider(create: (_) => StartGameBloc()),
+        ],
         child: MaterialApp(
           title: 'I/O Pinball',
           theme: PinballTheme.standard,

lib/game/behaviors/behaviors.dart

@@ -0,0 +1,2 @@
+export 'bumper_noisy_behavior.dart';
+export 'scoring_behavior.dart';

lib/game/behaviors/bumper_noisy_behavior.dart

@@ -0,0 +1,15 @@
+// ignore_for_file: public_member_api_docs
+
+import 'package:flame/components.dart';
+import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:pinball/game/pinball_game.dart';
+import 'package:pinball_audio/pinball_audio.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+class BumperNoisyBehavior extends ContactBehavior with HasGameRef<PinballGame> {
+  @override
+  void beginContact(Object other, Contact contact) {
+    super.beginContact(other, contact);
+    gameRef.player.play(PinballAudio.bumper);
+  }
+}

lib/game/behaviors/scoring_behavior.dart

@@ -0,0 +1,78 @@
+// ignore_for_file: avoid_renaming_method_parameters
+
+import 'package:flame/components.dart';
+import 'package:flame/effects.dart';
+import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+/// {@template scoring_behavior}
+/// Adds [_points] to the score and shows a text effect.
+///
+/// The behavior removes itself after the duration.
+/// {@endtemplate}
+class ScoringBehavior extends Component with HasGameRef<PinballGame> {
+  /// {@macto scoring_behavior}
+  ScoringBehavior({
+    required Points points,
+    required Vector2 position,
+    double duration = 1,
+  })  : _points = points,
+        _position = position,
+        _effectController = EffectController(
+          duration: duration,
+        );
+
+  final Points _points;
+  final Vector2 _position;
+
+  final EffectController _effectController;
+
+  @override
+  void update(double dt) {
+    super.update(dt);
+    if (_effectController.completed) {
+      removeFromParent();
+    }
+  }
+
+  @override
+  Future<void> onLoad() async {
+    gameRef.read<GameBloc>().add(Scored(points: _points.value));
+    final canvas = gameRef.descendants().whereType<ZCanvasComponent>().single;
+    await canvas.add(
+      ScoreComponent(
+        points: _points,
+        position: _position,
+        effectController: _effectController,
+      ),
+    );
+  }
+}
+
+/// {@template scoring_contact_behavior}
+/// Adds points to the score when the [Ball] contacts the [parent].
+/// {@endtemplate}
+class ScoringContactBehavior extends ContactBehavior
+    with HasGameRef<PinballGame> {
+  /// {@macro scoring_contact_behavior}
+  ScoringContactBehavior({
+    required Points points,
+  }) : _points = points;
+
+  final Points _points;
+
+  @override
+  void beginContact(Object other, Contact contact) {
+    super.beginContact(other, contact);
+    if (other is! Ball) return;
+
+    parent.add(
+      ScoringBehavior(
+        points: _points,
+        position: other.body.position,
+      ),
+    );
+  }
+}

lib/game/bloc/game_bloc.dart

@@ -14,31 +14,43 @@ class GameBloc extends Bloc<GameEvent, GameState> {
     on<MultiplierIncreased>(_onIncreasedMultiplier);
     on<BonusActivated>(_onBonusActivated);
     on<SparkyTurboChargeActivated>(_onSparkyTurboChargeActivated);
+    on<GameOver>(_onGameOver);
+    on<GameStarted>(_onGameStarted);
+  }
+
+  void _onGameStarted(GameStarted _, Emitter emit) {
+    emit(state.copyWith(status: GameStatus.playing));
+  }
+
+  void _onGameOver(GameOver _, Emitter emit) {
+    emit(state.copyWith(status: GameStatus.gameOver));
   }
 
   void _onRoundLost(RoundLost event, Emitter emit) {
-    final score = state.score * state.multiplier;
+    final score = state.totalScore + state.roundScore * state.multiplier;
     final roundsLeft = math.max(state.rounds - 1, 0);
 
     emit(
       state.copyWith(
-        score: score,
+        totalScore: score,
+        roundScore: 0,
         multiplier: 1,
         rounds: roundsLeft,
+        status: roundsLeft == 0 ? GameStatus.gameOver : state.status,
       ),
     );
   }
 
   void _onScored(Scored event, Emitter emit) {
-    if (!state.isGameOver) {
+    if (state.status.isPlaying) {
       emit(
-        state.copyWith(score: state.score + event.points),
+        state.copyWith(roundScore: state.roundScore + event.points),
       );
     }
   }
 
   void _onIncreasedMultiplier(MultiplierIncreased event, Emitter emit) {
-    if (!state.isGameOver) {
+    if (state.status.isPlaying) {
       emit(
         state.copyWith(
           multiplier: math.min(state.multiplier + 1, 6),

lib/game/bloc/game_event.dart

@@ -59,3 +59,17 @@ class MultiplierIncreased extends GameEvent {
   @override
   List<Object?> get props => [];
 }
+
+class GameStarted extends GameEvent {
+  const GameStarted();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class GameOver extends GameEvent {
+  const GameOver();
+
+  @override
+  List<Object?> get props => [];
+}

lib/game/bloc/game_state.dart

@@ -20,28 +20,51 @@ enum GameBonus {
   androidSpaceship,
 }
 
+enum GameStatus {
+  waiting,
+  playing,
+  gameOver,
+}
+
+extension GameStatusX on GameStatus {
+  bool get isPlaying => this == GameStatus.playing;
+  bool get isGameOver => this == GameStatus.gameOver;
+}
+
 /// {@template game_state}
 /// Represents the state of the pinball game.
 /// {@endtemplate}
 class GameState extends Equatable {
   /// {@macro game_state}
   const GameState({
-    required this.score,
+    required this.totalScore,
+    required this.roundScore,
     required this.multiplier,
     required this.rounds,
     required this.bonusHistory,
-  })  : assert(score >= 0, "Score can't be negative"),
+    required this.status,
+  })  : assert(totalScore >= 0, "TotalScore can't be negative"),
+        assert(roundScore >= 0, "Round score can't be negative"),
         assert(multiplier > 0, 'Multiplier must be greater than zero'),
         assert(rounds >= 0, "Number of rounds can't be negative");
 
   const GameState.initial()
-      : score = 0,
+      : status = GameStatus.waiting,
+        totalScore = 0,
+        roundScore = 0,
         multiplier = 1,
         rounds = 3,
         bonusHistory = const [];
 
-  /// The current score of the game.
-  final int score;
+  /// The score for the current round of the game.
+  ///
+  /// Multipliers are only applied to the score for the current round once is
+  /// lost. Then the [roundScore] is added to the [totalScore] and reset to 0
+  /// for the next round.
+  final int roundScore;
+
+  /// The total score of the game.
+  final int totalScore;
 
   /// The current multiplier for the score.
   final int multiplier;
@@ -55,34 +78,42 @@ class GameState extends Equatable {
   /// PinballGame.
   final List<GameBonus> bonusHistory;
 
-  /// Determines when the game is over.
-  bool get isGameOver => rounds == 0;
+  final GameStatus status;
+
+  /// The score displayed at the game.
+  int get displayScore => roundScore + totalScore;
 
   GameState copyWith({
-    int? score,
+    int? totalScore,
+    int? roundScore,
     int? multiplier,
     int? balls,
     int? rounds,
     List<GameBonus>? bonusHistory,
+    GameStatus? status,
   }) {
     assert(
-      score == null || score >= this.score,
-      "Score can't be decreased",
+      totalScore == null || totalScore >= this.totalScore,
+      "Total score can't be decreased",
     );
 
     return GameState(
-      score: score ?? this.score,
+      totalScore: totalScore ?? this.totalScore,
+      roundScore: roundScore ?? this.roundScore,
       multiplier: multiplier ?? this.multiplier,
       rounds: rounds ?? this.rounds,
       bonusHistory: bonusHistory ?? this.bonusHistory,
+      status: status ?? this.status,
     );
   }
 
   @override
   List<Object?> get props => [
-        score,
+        totalScore,
+        roundScore,
         multiplier,
         rounds,
         bonusHistory,
+        status,
       ];
 }

lib/game/components/android_acres/android_acres.dart

@@ -2,8 +2,8 @@
 
 import 'package:flame/components.dart';
 import 'package:flutter/material.dart';
+import 'package:pinball/game/behaviors/behaviors.dart';
 import 'package:pinball/game/components/android_acres/behaviors/behaviors.dart';
-import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
 
 /// {@template android_acres}
@@ -15,27 +15,39 @@ class AndroidAcres extends Component {
   AndroidAcres()
       : super(
           children: [
-            SpaceshipRamp(),
+            SpaceshipRamp(
+              children: [
+                RampShotBehavior(
+                  points: Points.fiveThousand,
+                ),
+                RampBonusBehavior(
+                  points: Points.oneMillion,
+                ),
+              ],
+            ),
             SpaceshipRail(),
             AndroidSpaceship(position: Vector2(-26.5, -28.5)),
             AndroidAnimatronic(
               children: [
-                ScoringBehavior(points: Points.twoHundredThousand),
+                ScoringContactBehavior(points: Points.twoHundredThousand),
               ],
             )..initialPosition = Vector2(-26, -28.25),
             AndroidBumper.a(
               children: [
-                ScoringBehavior(points: Points.twentyThousand),
+                ScoringContactBehavior(points: Points.twentyThousand),
+                BumperNoisyBehavior(),
               ],
             )..initialPosition = Vector2(-25, 1.3),
             AndroidBumper.b(
               children: [
-                ScoringBehavior(points: Points.twentyThousand),
+                ScoringContactBehavior(points: Points.twentyThousand),
+                BumperNoisyBehavior(),
               ],
             )..initialPosition = Vector2(-32.8, -9.2),
             AndroidBumper.cow(
               children: [
-                ScoringBehavior(points: Points.twentyThousand),
+                ScoringContactBehavior(points: Points.twentyThousand),
+                BumperNoisyBehavior(),
               ],
             )..initialPosition = Vector2(-20.5, -13.8),
             AndroidSpaceshipBonusBehavior(),

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

@@ -1 +1,3 @@
 export 'android_spaceship_bonus_behavior.dart';
+export 'ramp_bonus_behavior.dart';
+export 'ramp_shot_behavior.dart';

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

@@ -0,0 +1,62 @@
+import 'dart:async';
+
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball/game/behaviors/behaviors.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+/// {@template ramp_bonus_behavior}
+/// Increases the score when a [Ball] is shot 10 times into the [SpaceshipRamp].
+/// {@endtemplate}
+class RampBonusBehavior extends Component
+    with ParentIsA<SpaceshipRamp>, HasGameRef<PinballGame> {
+  /// {@macro ramp_bonus_behavior}
+  RampBonusBehavior({
+    required Points points,
+  })  : _points = points,
+        super();
+
+  /// Creates a [RampBonusBehavior].
+  ///
+  /// This can be used for testing [RampBonusBehavior] in isolation.
+  @visibleForTesting
+  RampBonusBehavior.test({
+    required Points points,
+    required this.subscription,
+  })  : _points = points,
+        super();
+
+  final Points _points;
+
+  /// Subscription to [SpaceshipRampState] at [SpaceshipRamp].
+  @visibleForTesting
+  StreamSubscription? subscription;
+
+  @override
+  void onMount() {
+    super.onMount();
+
+    subscription = subscription ??
+        parent.bloc.stream.listen((state) {
+          final achievedOneMillionPoints = state.hits % 10 == 0;
+
+          if (achievedOneMillionPoints) {
+            parent.add(
+              ScoringBehavior(
+                points: _points,
+                position: Vector2(0, -60),
+                duration: 2,
+              ),
+            );
+          }
+        });
+  }
+
+  @override
+  void onRemove() {
+    subscription?.cancel();
+    super.onRemove();
+  }
+}

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

@@ -0,0 +1,63 @@
+import 'dart:async';
+
+import 'package:flame/components.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:pinball/game/behaviors/behaviors.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+/// {@template ramp_shot_behavior}
+/// Increases the score when a [Ball] is shot into the [SpaceshipRamp].
+/// {@endtemplate}
+class RampShotBehavior extends Component
+    with ParentIsA<SpaceshipRamp>, HasGameRef<PinballGame> {
+  /// {@macro ramp_shot_behavior}
+  RampShotBehavior({
+    required Points points,
+  })  : _points = points,
+        super();
+
+  /// Creates a [RampShotBehavior].
+  ///
+  /// This can be used for testing [RampShotBehavior] in isolation.
+  @visibleForTesting
+  RampShotBehavior.test({
+    required Points points,
+    required this.subscription,
+  })  : _points = points,
+        super();
+
+  final Points _points;
+
+  /// Subscription to [SpaceshipRampState] at [SpaceshipRamp].
+  @visibleForTesting
+  StreamSubscription? subscription;
+
+  @override
+  void onMount() {
+    super.onMount();
+
+    subscription = subscription ??
+        parent.bloc.stream.listen((state) {
+          final achievedOneMillionPoints = state.hits % 10 == 0;
+
+          if (!achievedOneMillionPoints) {
+            gameRef.read<GameBloc>().add(const MultiplierIncreased());
+
+            parent.add(
+              ScoringBehavior(
+                points: _points,
+                position: Vector2(0, -45),
+              ),
+            );
+          }
+        });
+  }
+
+  @override
+  void onRemove() {
+    subscription?.cancel();
+    super.onRemove();
+  }
+}

lib/game/components/backbox/backbox.dart

@@ -0,0 +1,108 @@
+import 'dart:async';
+
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:leaderboard_repository/leaderboard_repository.dart';
+import 'package:pinball/game/components/backbox/bloc/backbox_bloc.dart';
+import 'package:pinball/game/components/backbox/displays/displays.dart';
+import 'package:pinball/game/pinball_game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+import 'package:pinball_theme/pinball_theme.dart' hide Assets;
+
+/// {@template backbox}
+/// The [Backbox] of the pinball machine.
+/// {@endtemplate}
+class Backbox extends PositionComponent with HasGameRef<PinballGame>, ZIndex {
+  /// {@macro backbox}
+  Backbox({
+    required LeaderboardRepository leaderboardRepository,
+  }) : _bloc = BackboxBloc(leaderboardRepository: leaderboardRepository);
+
+  /// {@macro backbox}
+  @visibleForTesting
+  Backbox.test({
+    required BackboxBloc bloc,
+  }) : _bloc = bloc;
+
+  late final Component _display;
+  final BackboxBloc _bloc;
+  late StreamSubscription<BackboxState> _subscription;
+
+  @override
+  Future<void> onLoad() async {
+    position = Vector2(0, -87);
+    anchor = Anchor.bottomCenter;
+    zIndex = ZIndexes.backbox;
+
+    await add(_BackboxSpriteComponent());
+    await add(_display = Component());
+
+    _subscription = _bloc.stream.listen((state) {
+      _display.children.removeWhere((_) => true);
+      _build(state);
+    });
+  }
+
+  @override
+  void onRemove() {
+    super.onRemove();
+    _subscription.cancel();
+  }
+
+  void _build(BackboxState state) {
+    if (state is LoadingState) {
+      _display.add(LoadingDisplay());
+    } else if (state is InitialsFormState) {
+      _display.add(
+        InitialsInputDisplay(
+          score: state.score,
+          characterIconPath: state.character.leaderboardIcon.keyName,
+          onSubmit: (initials) {
+            _bloc.add(
+              PlayerInitialsSubmitted(
+                score: state.score,
+                initials: initials,
+                character: state.character,
+              ),
+            );
+          },
+        ),
+      );
+    } else if (state is InitialsSuccessState) {
+      _display.add(InitialsSubmissionSuccessDisplay());
+    } else if (state is InitialsFailureState) {
+      _display.add(InitialsSubmissionFailureDisplay());
+    }
+  }
+
+  /// Puts [InitialsInputDisplay] on the [Backbox].
+  void requestInitials({
+    required int score,
+    required CharacterTheme character,
+  }) {
+    _bloc.add(
+      PlayerInitialsRequested(
+        score: score,
+        character: character,
+      ),
+    );
+  }
+}
+
+class _BackboxSpriteComponent extends SpriteComponent with HasGameRef {
+  _BackboxSpriteComponent() : super(anchor: Anchor.bottomCenter);
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    final sprite = Sprite(
+      gameRef.images.fromCache(
+        Assets.images.backbox.marquee.keyName,
+      ),
+    );
+    this.sprite = sprite;
+    size = sprite.originalSize / 20;
+  }
+}

lib/game/components/backbox/bloc/backbox_bloc.dart

@@ -0,0 +1,56 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:leaderboard_repository/leaderboard_repository.dart';
+import 'package:pinball/leaderboard/models/leader_board_entry.dart';
+import 'package:pinball_theme/pinball_theme.dart';
+
+part 'backbox_event.dart';
+part 'backbox_state.dart';
+
+/// {@template backbox_bloc}
+/// Bloc which manages the Backbox display.
+/// {@endtemplate}
+class BackboxBloc extends Bloc<BackboxEvent, BackboxState> {
+  /// {@macro backbox_bloc}
+  BackboxBloc({
+    required LeaderboardRepository leaderboardRepository,
+  })  : _leaderboardRepository = leaderboardRepository,
+        super(LoadingState()) {
+    on<PlayerInitialsRequested>(_onPlayerInitialsRequested);
+    on<PlayerInitialsSubmitted>(_onPlayerInitialsSubmitted);
+  }
+
+  final LeaderboardRepository _leaderboardRepository;
+
+  void _onPlayerInitialsRequested(
+    PlayerInitialsRequested event,
+    Emitter<BackboxState> emit,
+  ) {
+    emit(
+      InitialsFormState(
+        score: event.score,
+        character: event.character,
+      ),
+    );
+  }
+
+  Future<void> _onPlayerInitialsSubmitted(
+    PlayerInitialsSubmitted event,
+    Emitter<BackboxState> emit,
+  ) async {
+    try {
+      emit(LoadingState());
+      await _leaderboardRepository.addLeaderboardEntry(
+        LeaderboardEntryData(
+          playerInitials: event.initials,
+          score: event.score,
+          character: event.character.toType,
+        ),
+      );
+      emit(InitialsSuccessState());
+    } catch (error, stackTrace) {
+      addError(error, stackTrace);
+      emit(InitialsFailureState());
+    }
+  }
+}

lib/game/components/backbox/bloc/backbox_event.dart

@@ -0,0 +1,53 @@
+part of 'backbox_bloc.dart';
+
+/// {@template backbox_event}
+/// Base class for backbox events.
+/// {@endtemplate}
+abstract class BackboxEvent extends Equatable {
+  /// {@macro backbox_event}
+  const BackboxEvent();
+}
+
+/// {@template player_initials_requested}
+/// Event that triggers the user initials display.
+/// {@endtemplate}
+class PlayerInitialsRequested extends BackboxEvent {
+  /// {@macro player_initials_requested}
+  const PlayerInitialsRequested({
+    required this.score,
+    required this.character,
+  });
+
+  /// Player's score.
+  final int score;
+
+  /// Player's character.
+  final CharacterTheme character;
+
+  @override
+  List<Object?> get props => [score, character];
+}
+
+/// {@template player_initials_submitted}
+/// Event that submits the user score and initials.
+/// {@endtemplate}
+class PlayerInitialsSubmitted extends BackboxEvent {
+  /// {@macro player_initials_submitted}
+  const PlayerInitialsSubmitted({
+    required this.score,
+    required this.initials,
+    required this.character,
+  });
+
+  /// Player's score.
+  final int score;
+
+  /// Player's initials.
+  final String initials;
+
+  /// Player's character.
+  final CharacterTheme character;
+
+  @override
+  List<Object?> get props => [score, initials, character];
+}

lib/game/components/backbox/bloc/backbox_state.dart

@@ -0,0 +1,59 @@
+part of 'backbox_bloc.dart';
+
+/// {@template backbox_state}
+/// The base state for all [BackboxState].
+/// {@endtemplate backbox_state}
+abstract class BackboxState extends Equatable {
+  /// {@macro backbox_state}
+  const BackboxState();
+}
+
+/// Loading state for the backbox.
+class LoadingState extends BackboxState {
+  @override
+  List<Object?> get props => [];
+}
+
+/// State when the leaderboard was successfully loaded.
+class LeaderboardSuccessState extends BackboxState {
+  @override
+  List<Object?> get props => [];
+}
+
+/// State when the leaderboard failed to load.
+class LeaderboardFailureState extends BackboxState {
+  @override
+  List<Object?> get props => [];
+}
+
+/// {@template initials_form_state}
+/// State when the user is inputting their initials.
+/// {@endtemplate}
+class InitialsFormState extends BackboxState {
+  /// {@macro initials_form_state}
+  const InitialsFormState({
+    required this.score,
+    required this.character,
+  }) : super();
+
+  /// Player's score.
+  final int score;
+
+  /// Player's character.
+  final CharacterTheme character;
+
+  @override
+  List<Object?> get props => [score, character];
+}
+
+/// State when the leaderboard was successfully loaded.
+class InitialsSuccessState extends BackboxState {
+  @override
+  List<Object?> get props => [];
+}
+
+/// State when the initials submission failed.
+class InitialsFailureState extends BackboxState {
+  @override
+  List<Object?> get props => [];
+}

lib/game/components/backbox/displays/displays.dart

@@ -0,0 +1,4 @@
+export 'initials_input_display.dart';
+export 'initials_submission_failure_display.dart';
+export 'initials_submission_success_display.dart';
+export 'loading_display.dart';

lib/game/components/backbox/displays/initials_input_display.dart

@@ -0,0 +1,387 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+
+/// Signature for the callback called when the used has
+/// submitted their initials on the [InitialsInputDisplay].
+typedef InitialsOnSubmit = void Function(String);
+
+final _bodyTextPaint = TextPaint(
+  style: const TextStyle(
+    fontSize: 3,
+    color: PinballColors.white,
+    fontFamily: PinballFonts.pixeloidSans,
+  ),
+);
+
+final _subtitleTextPaint = TextPaint(
+  style: const TextStyle(
+    fontSize: 1.8,
+    color: PinballColors.white,
+    fontFamily: PinballFonts.pixeloidSans,
+  ),
+);
+
+/// {@template initials_input_display}
+/// Display that handles the user input on the game over view.
+/// {@endtemplate}
+// TODO(allisonryan0002): add mobile input buttons.
+class InitialsInputDisplay extends Component with HasGameRef {
+  /// {@macro initials_input_display}
+  InitialsInputDisplay({
+    required int score,
+    required String characterIconPath,
+    InitialsOnSubmit? onSubmit,
+  })  : _onSubmit = onSubmit,
+        super(
+          children: [
+            _ScoreLabelTextComponent(),
+            _ScoreTextComponent(score.formatScore()),
+            _NameLabelTextComponent(),
+            _CharacterIconSpriteComponent(characterIconPath),
+            _DividerSpriteComponent(),
+            _InstructionsComponent(),
+          ],
+        );
+
+  final InitialsOnSubmit? _onSubmit;
+
+  @override
+  Future<void> onLoad() async {
+    for (var i = 0; i < 3; i++) {
+      await add(
+        InitialsLetterPrompt(
+          position: Vector2(
+            11.4 + (2.3 * i),
+            -20,
+          ),
+          hasFocus: i == 0,
+        ),
+      );
+    }
+
+    await add(
+      KeyboardInputController(
+        keyUp: {
+          LogicalKeyboardKey.arrowLeft: () => _movePrompt(true),
+          LogicalKeyboardKey.arrowRight: () => _movePrompt(false),
+          LogicalKeyboardKey.enter: _submit,
+        },
+      ),
+    );
+  }
+
+  /// Returns the current inputed initials
+  String get initials => children
+      .whereType<InitialsLetterPrompt>()
+      .map((prompt) => prompt.char)
+      .join();
+
+  bool _submit() {
+    _onSubmit?.call(initials);
+    return true;
+  }
+
+  bool _movePrompt(bool left) {
+    final prompts = children.whereType<InitialsLetterPrompt>().toList();
+
+    final current = prompts.firstWhere((prompt) => prompt.hasFocus)
+      ..hasFocus = false;
+    var index = prompts.indexOf(current) + (left ? -1 : 1);
+    index = min(max(0, index), prompts.length - 1);
+
+    prompts[index].hasFocus = true;
+
+    return false;
+  }
+}
+
+class _ScoreLabelTextComponent extends TextComponent
+    with HasGameRef<PinballGame> {
+  _ScoreLabelTextComponent()
+      : super(
+          anchor: Anchor.centerLeft,
+          position: Vector2(-16.9, -24),
+          textRenderer: _bodyTextPaint.copyWith(
+            (style) => style.copyWith(
+              color: PinballColors.red,
+            ),
+          ),
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = gameRef.l10n.score;
+  }
+}
+
+class _ScoreTextComponent extends TextComponent {
+  _ScoreTextComponent(String score)
+      : super(
+          text: score,
+          anchor: Anchor.centerLeft,
+          position: Vector2(-16.9, -20),
+          textRenderer: _bodyTextPaint,
+        );
+}
+
+class _NameLabelTextComponent extends TextComponent
+    with HasGameRef<PinballGame> {
+  _NameLabelTextComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(11.4, -24),
+          textRenderer: _bodyTextPaint.copyWith(
+            (style) => style.copyWith(
+              color: PinballColors.red,
+            ),
+          ),
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = gameRef.l10n.name;
+  }
+}
+
+class _CharacterIconSpriteComponent extends SpriteComponent with HasGameRef {
+  _CharacterIconSpriteComponent(String characterIconPath)
+      : _characterIconPath = characterIconPath,
+        super(
+          anchor: Anchor.center,
+          position: Vector2(8.4, -20),
+        );
+
+  final String _characterIconPath;
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    final sprite = Sprite(gameRef.images.fromCache(_characterIconPath));
+    this.sprite = sprite;
+    size = sprite.originalSize / 20;
+  }
+}
+
+/// {@template initials_input_display}
+/// Display that handles the user input on the game over view.
+/// {@endtemplate}
+@visibleForTesting
+class InitialsLetterPrompt extends PositionComponent {
+  /// {@macro initials_input_display}
+  InitialsLetterPrompt({
+    required Vector2 position,
+    bool hasFocus = false,
+  })  : _hasFocus = hasFocus,
+        super(
+          position: position,
+        );
+
+  static const _alphabetCode = 65;
+  static const _alphabetLength = 25;
+  var _charIndex = 0;
+
+  bool _hasFocus;
+
+  late RectangleComponent _underscore;
+  late TextComponent _input;
+  late TimerComponent _underscoreBlinker;
+
+  @override
+  Future<void> onLoad() async {
+    _underscore = RectangleComponent(
+      size: Vector2(1.9, 0.4),
+      anchor: Anchor.center,
+      position: Vector2(-0.1, 1.8),
+    );
+
+    await add(_underscore);
+
+    _input = TextComponent(
+      text: 'A',
+      textRenderer: _bodyTextPaint,
+      anchor: Anchor.center,
+    );
+    await add(_input);
+
+    _underscoreBlinker = TimerComponent(
+      period: 0.6,
+      repeat: true,
+      autoStart: _hasFocus,
+      onTick: () {
+        _underscore.paint.color = (_underscore.paint.color == Colors.white)
+            ? Colors.transparent
+            : Colors.white;
+      },
+    );
+
+    await add(_underscoreBlinker);
+
+    await add(
+      KeyboardInputController(
+        keyUp: {
+          LogicalKeyboardKey.arrowUp: () => _cycle(true),
+          LogicalKeyboardKey.arrowDown: () => _cycle(false),
+        },
+      ),
+    );
+  }
+
+  /// Returns the current selected character
+  String get char => String.fromCharCode(_alphabetCode + _charIndex);
+
+  bool _cycle(bool up) {
+    if (_hasFocus) {
+      final newCharCode =
+          min(max(_charIndex + (up ? 1 : -1), 0), _alphabetLength);
+      _input.text = String.fromCharCode(_alphabetCode + newCharCode);
+      _charIndex = newCharCode;
+
+      return false;
+    }
+    return true;
+  }
+
+  /// Returns if this prompt has focus on it
+  bool get hasFocus => _hasFocus;
+
+  /// Updates this prompt focus
+  set hasFocus(bool hasFocus) {
+    if (hasFocus) {
+      _underscoreBlinker.timer.resume();
+    } else {
+      _underscoreBlinker.timer.pause();
+    }
+    _underscore.paint.color = Colors.white;
+    _hasFocus = hasFocus;
+  }
+}
+
+class _DividerSpriteComponent extends SpriteComponent with HasGameRef {
+  _DividerSpriteComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(0, -17),
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    final sprite = Sprite(
+      gameRef.images.fromCache(Assets.images.backbox.displayDivider.keyName),
+    );
+    this.sprite = sprite;
+    size = sprite.originalSize / 20;
+  }
+}
+
+class _InstructionsComponent extends PositionComponent with HasGameRef {
+  _InstructionsComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(0, -12.3),
+          children: [
+            _EnterInitialsTextComponent(),
+            _ArrowsTextComponent(),
+            _AndPressTextComponent(),
+            _EnterReturnTextComponent(),
+            _ToSubmitTextComponent(),
+          ],
+        );
+}
+
+class _EnterInitialsTextComponent extends TextComponent
+    with HasGameRef<PinballGame> {
+  _EnterInitialsTextComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(0, -2.4),
+          textRenderer: _subtitleTextPaint,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = gameRef.l10n.enterInitials;
+  }
+}
+
+class _ArrowsTextComponent extends TextComponent with HasGameRef<PinballGame> {
+  _ArrowsTextComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(-13.2, 0),
+          textRenderer: _subtitleTextPaint.copyWith(
+            (style) => style.copyWith(
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = gameRef.l10n.arrows;
+  }
+}
+
+class _AndPressTextComponent extends TextComponent
+    with HasGameRef<PinballGame> {
+  _AndPressTextComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(-3.7, 0),
+          textRenderer: _subtitleTextPaint,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = gameRef.l10n.andPress;
+  }
+}
+
+class _EnterReturnTextComponent extends TextComponent
+    with HasGameRef<PinballGame> {
+  _EnterReturnTextComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(10, 0),
+          textRenderer: _subtitleTextPaint.copyWith(
+            (style) => style.copyWith(
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = gameRef.l10n.enterReturn;
+  }
+}
+
+class _ToSubmitTextComponent extends TextComponent
+    with HasGameRef<PinballGame> {
+  _ToSubmitTextComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(0, 2.4),
+          textRenderer: _subtitleTextPaint,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = gameRef.l10n.toSubmit;
+  }
+}

lib/game/components/backbox/displays/initials_submission_failure_display.dart

@@ -0,0 +1,28 @@
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+
+final _bodyTextPaint = TextPaint(
+  style: const TextStyle(
+    fontSize: 3,
+    color: PinballColors.white,
+    fontFamily: PinballFonts.pixeloidSans,
+  ),
+);
+
+/// {@template initials_submission_failure_display}
+/// [Backbox] display for when a failure occurs during initials submission.
+/// {@endtemplate}
+class InitialsSubmissionFailureDisplay extends TextComponent
+    with HasGameRef<PinballGame> {
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    position = Vector2(0, -10);
+    anchor = Anchor.center;
+    text = 'Failure!';
+    textRenderer = _bodyTextPaint;
+  }
+}

lib/game/components/backbox/displays/initials_submission_success_display.dart

@@ -0,0 +1,28 @@
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+
+final _bodyTextPaint = TextPaint(
+  style: const TextStyle(
+    fontSize: 3,
+    color: PinballColors.white,
+    fontFamily: PinballFonts.pixeloidSans,
+  ),
+);
+
+/// {@template initials_submission_success_display}
+/// [Backbox] display for initials successfully submitted.
+/// {@endtemplate}
+class InitialsSubmissionSuccessDisplay extends TextComponent
+    with HasGameRef<PinballGame> {
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    position = Vector2(0, -10);
+    anchor = Anchor.center;
+    text = 'Success!';
+    textRenderer = _bodyTextPaint;
+  }
+}

lib/game/components/backbox/displays/loading_display.dart

@@ -0,0 +1,48 @@
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+
+final _bodyTextPaint = TextPaint(
+  style: const TextStyle(
+    fontSize: 3,
+    color: PinballColors.white,
+    fontFamily: PinballFonts.pixeloidSans,
+  ),
+);
+
+/// {@template loading_display}
+/// Display used to show the loading animation.
+/// {@endtemplate}
+class LoadingDisplay extends TextComponent with HasGameRef<PinballGame> {
+  /// {@template loading_display}
+  LoadingDisplay();
+
+  late final String _label;
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    position = Vector2(0, -10);
+    anchor = Anchor.center;
+    text = _label = gameRef.l10n.loading;
+    textRenderer = _bodyTextPaint;
+
+    await add(
+      TimerComponent(
+        period: 1,
+        repeat: true,
+        onTick: () {
+          final index = text.indexOf('.');
+          if (index != -1 && text.substring(index).length == 3) {
+            text = _label;
+          } else {
+            text = '$text.';
+          }
+        },
+      ),
+    );
+  }
+}

lib/game/components/bottom_group.dart

@@ -1,4 +1,5 @@
 import 'package:flame/components.dart';
+import 'package:pinball/game/behaviors/behaviors.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
@@ -51,7 +52,8 @@ class _BottomGroupSide extends Component {
     final kicker = Kicker(
       side: _side,
       children: [
-        ScoringBehavior(points: Points.fiveThousand)..applyTo(['bouncy_edge']),
+        ScoringContactBehavior(points: Points.fiveThousand)
+          ..applyTo(['bouncy_edge']),
       ],
     )..initialPosition = Vector2(
         (22.64 * direction) + centerXAdjustment,

lib/game/components/camera_controller.dart

@@ -3,15 +3,15 @@ import 'package:flame/game.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 
-/// Adds helpers methods to Flame's [Camera]
+/// Adds helpers methods to Flame's [Camera].
 extension CameraX on Camera {
-  /// Instantly apply the point of focus to the [Camera]
+  /// Instantly apply the point of focus to the [Camera].
   void snapToFocus(FocusData data) {
     followVector2(data.position);
     zoom = data.zoom;
   }
 
-  /// Returns a [CameraZoom] that can be added to a [FlameGame]
+  /// Returns a [CameraZoom] that can be added to a [FlameGame].
   CameraZoom focusToCameraZoom(FocusData data) {
     final zoom = CameraZoom(value: data.zoom);
     zoom.completed.then((_) {
@@ -22,7 +22,7 @@ extension CameraX on Camera {
 }
 
 /// {@template focus_data}
-/// Model class that defines a focus point of the camera
+/// Model class that defines a focus point of the camera.
 /// {@endtemplate}
 class FocusData {
   /// {@template focus_data}
@@ -31,50 +31,63 @@ class FocusData {
     required this.position,
   });
 
-  /// The amount of zoom
+  /// The amount of zoom.
   final double zoom;
 
-  /// The position of the camera
+  /// The position of the camera.
   final Vector2 position;
 }
 
 /// {@template camera_controller}
-/// A [Component] that controls its game camera focus
+/// A [Component] that controls its game camera focus.
 /// {@endtemplate}
 class CameraController extends ComponentController<FlameGame> {
   /// {@macro camera_controller}
   CameraController(FlameGame component) : super(component) {
     final gameZoom = component.size.y / 16;
-    final backboardZoom = component.size.y / 18;
+    final waitingBackboxZoom = component.size.y / 18;
+    final gameOverBackboxZoom = component.size.y / 10;
 
     gameFocus = FocusData(
       zoom: gameZoom,
       position: Vector2(0, -7.8),
     );
-    backboardFocus = FocusData(
-      zoom: backboardZoom,
-      position: Vector2(0, -100.8),
+    waitingBackboxFocus = FocusData(
+      zoom: waitingBackboxZoom,
+      position: Vector2(0, -112),
+    );
+    gameOverBackboxFocus = FocusData(
+      zoom: gameOverBackboxZoom,
+      position: Vector2(0, -111),
     );
 
-    // Game starts with the camera focused on the panel
+    // Game starts with the camera focused on the [Backbox].
     component.camera
       ..speed = 100
-      ..snapToFocus(backboardFocus);
+      ..snapToFocus(waitingBackboxFocus);
   }
 
-  /// Holds the data for the game focus point
+  /// Holds the data for the game focus point.
   late final FocusData gameFocus;
 
-  /// Holds the data for the backboard focus point
-  late final FocusData backboardFocus;
+  /// Holds the data for the waiting backbox focus point.
+  late final FocusData waitingBackboxFocus;
+
+  /// Holds the data for the game over backbox focus point.
+  late final FocusData gameOverBackboxFocus;
 
-  /// Move the camera focus to the game board
+  /// Move the camera focus to the game board.
   void focusOnGame() {
     component.add(component.camera.focusToCameraZoom(gameFocus));
   }
 
-  /// Move the camera focus to the backboard
-  void focusOnBackboard() {
-    component.add(component.camera.focusToCameraZoom(backboardFocus));
+  /// Move the camera focus to the waiting backbox.
+  void focusOnWaitingBackbox() {
+    component.add(component.camera.focusToCameraZoom(waitingBackboxFocus));
+  }
+
+  /// Move the camera focus to the game over backbox.
+  void focusOnGameOverBackbox() {
+    component.add(component.camera.focusToCameraZoom(gameOverBackboxFocus));
   }
 }

lib/game/components/components.dart

@@ -1,4 +1,5 @@
 export 'android_acres/android_acres.dart';
+export 'backbox/backbox.dart';
 export 'bottom_group.dart';
 export 'camera_controller.dart';
 export 'controlled_ball.dart';
@@ -7,10 +8,9 @@ export 'controlled_plunger.dart';
 export 'dino_desert/dino_desert.dart';
 export 'drain.dart';
 export 'flutter_forest/flutter_forest.dart';
-export 'game_flow_controller.dart';
+export 'game_bloc_status_listener.dart';
 export 'google_word/google_word.dart';
 export 'launcher.dart';
 export 'multiballs/multiballs.dart';
 export 'multipliers/multipliers.dart';
-export 'scoring_behavior.dart';
 export 'sparky_scorch.dart';

lib/game/components/controlled_ball.dart

@@ -1,7 +1,6 @@
 // ignore_for_file: avoid_renaming_method_parameters
 
 import 'package:flame/components.dart';
-import 'package:flutter/material.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
@@ -17,7 +16,7 @@ class ControlledBall extends Ball with Controls<BallController> {
   /// A [Ball] that launches from the [Plunger].
   ControlledBall.launch({
     required CharacterTheme characterTheme,
-  }) : super(baseColor: characterTheme.ballColor) {
+  }) : super(assetPath: characterTheme.ball.keyName) {
     controller = BallController(this);
     layer = Layer.launcher;
     zIndex = ZIndexes.ballOnLaunchRamp;
@@ -28,13 +27,13 @@ class ControlledBall extends Ball with Controls<BallController> {
   /// {@endtemplate}
   ControlledBall.bonus({
     required CharacterTheme characterTheme,
-  }) : super(baseColor: characterTheme.ballColor) {
+  }) : super(assetPath: characterTheme.ball.keyName) {
     controller = BallController(this);
     zIndex = ZIndexes.ballOnBoard;
   }
 
   /// [Ball] used in [DebugPinballGame].
-  ControlledBall.debug() : super(baseColor: const Color(0xFFFF0000)) {
+  ControlledBall.debug() : super() {
     controller = BallController(this);
     zIndex = ZIndexes.ballOnBoard;
   }
@@ -67,7 +66,9 @@ class BallController extends ComponentController<Ball>
       const Duration(milliseconds: 2583),
     );
     component.resume();
-    await component.boost(Vector2(40, 110));
+    await component.add(
+      BallTurboChargingBehavior(impulse: Vector2(40, 110)),
+    );
   }
 
   @override

lib/game/components/controlled_flipper.dart

@@ -37,7 +37,7 @@ class FlipperController extends ComponentController<Flipper>
     RawKeyEvent event,
     Set<LogicalKeyboardKey> keysPressed,
   ) {
-    if (state?.isGameOver ?? false) return true;
+    if (state?.status.isGameOver ?? false) return true;
     if (!_keys.contains(event.logicalKey)) return true;
 
     if (event is RawKeyDownEvent) {

lib/game/components/controlled_plunger.dart

@@ -38,7 +38,7 @@ class PlungerController extends ComponentController<Plunger>
     RawKeyEvent event,
     Set<LogicalKeyboardKey> keysPressed,
   ) {
-    if (state?.isGameOver ?? false) return true;
+    if (state?.status.isGameOver ?? false) return true;
     if (!_keys.contains(event.logicalKey)) return true;
 
     if (event is RawKeyDownEvent) {

lib/game/components/dino_desert/dino_desert.dart

@@ -1,6 +1,7 @@
 import 'package:flame/components.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/material.dart';
+import 'package:pinball/game/behaviors/behaviors.dart';
 import 'package:pinball/game/components/dino_desert/behaviors/behaviors.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
@@ -16,7 +17,7 @@ class DinoDesert extends Component {
           children: [
             ChromeDino(
               children: [
-                ScoringBehavior(points: Points.twoHundredThousand)
+                ScoringContactBehavior(points: Points.twoHundredThousand)
                   ..applyTo(['inside_mouth']),
               ],
             )..initialPosition = Vector2(12.6, -6.9),
@@ -35,12 +36,14 @@ class DinoDesert extends Component {
 }
 
 class _BarrierBehindDino extends BodyComponent {
+  _BarrierBehindDino() : super(renderBody: false);
+
   @override
   Body createBody() {
     final shape = EdgeShape()
       ..set(
-        Vector2(25, -14.2),
-        Vector2(25, -7.7),
+        Vector2(25.3, -14.2),
+        Vector2(25.3, -7.7),
       );
 
     return world.createBody(BodyDef())..createFixtureFromShape(shape);

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

@@ -17,7 +17,7 @@ class FlutterForestBonusBehavior extends Component
     final bumpers = parent.children.whereType<DashNestBumper>();
     final signpost = parent.firstChild<Signpost>()!;
     final animatronic = parent.firstChild<DashAnimatronic>()!;
-    final canvas = gameRef.firstChild<ZCanvasComponent>()!;
+    final canvas = gameRef.descendants().whereType<ZCanvasComponent>().single;
 
     for (final bumper in bumpers) {
       // TODO(alestiago): Refactor subscription management once the following is

lib/game/components/flutter_forest/flutter_forest.dart

@@ -2,8 +2,8 @@
 
 import 'package:flame/components.dart';
 import 'package:flutter/material.dart';
+import 'package:pinball/game/behaviors/behaviors.dart';
 import 'package:pinball/game/components/flutter_forest/behaviors/behaviors.dart';
-import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 
@@ -18,22 +18,26 @@ class FlutterForest extends Component with ZIndex {
           children: [
             Signpost(
               children: [
-                ScoringBehavior(points: Points.fiveThousand),
+                ScoringContactBehavior(points: Points.fiveThousand),
+                BumperNoisyBehavior(),
               ],
             )..initialPosition = Vector2(8.35, -58.3),
             DashNestBumper.main(
               children: [
-                ScoringBehavior(points: Points.twoHundredThousand),
+                ScoringContactBehavior(points: Points.twoHundredThousand),
+                BumperNoisyBehavior(),
               ],
             )..initialPosition = Vector2(18.55, -59.35),
             DashNestBumper.a(
               children: [
-                ScoringBehavior(points: Points.twentyThousand),
+                ScoringContactBehavior(points: Points.twentyThousand),
+                BumperNoisyBehavior(),
               ],
             )..initialPosition = Vector2(8.95, -51.95),
             DashNestBumper.b(
               children: [
-                ScoringBehavior(points: Points.twentyThousand),
+                ScoringContactBehavior(points: Points.twentyThousand),
+                BumperNoisyBehavior(),
               ],
             )..initialPosition = Vector2(22.3, -46.75),
             DashAnimatronic()..position = Vector2(20, -66),

lib/game/components/game_bloc_status_listener.dart

@@ -0,0 +1,33 @@
+import 'package:flame/components.dart';
+import 'package:flame_bloc/flame_bloc.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_audio/pinball_audio.dart';
+
+/// Listens to the [GameBloc] and updates the game accordingly.
+class GameBlocStatusListener extends Component
+    with BlocComponent<GameBloc, GameState>, HasGameRef<PinballGame> {
+  @override
+  bool listenWhen(GameState? previousState, GameState newState) {
+    return previousState?.status != newState.status;
+  }
+
+  @override
+  void onNewState(GameState state) {
+    switch (state.status) {
+      case GameStatus.waiting:
+        break;
+      case GameStatus.playing:
+        gameRef.player.play(PinballAudio.backgroundMusic);
+        gameRef.firstChild<CameraController>()?.focusOnGame();
+        gameRef.overlays.remove(PinballGame.playButtonOverlay);
+        break;
+      case GameStatus.gameOver:
+        gameRef.descendants().whereType<Backbox>().first.requestInitials(
+              score: state.displayScore,
+              character: gameRef.characterTheme,
+            );
+        gameRef.firstChild<CameraController>()!.focusOnGameOverBackbox();
+        break;
+    }
+  }
+}

lib/game/components/game_flow_controller.dart

@@ -1,47 +0,0 @@
-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';
-
-/// {@template game_flow_controller}
-/// A [Component] that controls the game over and game restart logic
-/// {@endtemplate}
-class GameFlowController extends ComponentController<PinballGame>
-    with BlocComponent<GameBloc, GameState> {
-  /// {@macro game_flow_controller}
-  GameFlowController(PinballGame component) : super(component);
-
-  @override
-  bool listenWhen(GameState? previousState, GameState newState) {
-    return previousState?.isGameOver != newState.isGameOver;
-  }
-
-  @override
-  void onNewState(GameState state) {
-    if (state.isGameOver) {
-      gameOver();
-    } else {
-      start();
-    }
-  }
-
-  /// Puts the game on a game over state
-  void gameOver() {
-    // TODO(erickzanardo): implement score submission and "navigate" to the
-    // next page
-    component.firstChild<Backboard>()?.gameOverMode(
-          score: state?.score ?? 0,
-          characterIconPath: component.characterTheme.leaderboardIcon.keyName,
-        );
-    component.firstChild<CameraController>()?.focusOnBackboard();
-  }
-
-  /// Puts the game on a playing state
-  void start() {
-    component.audio.backgroundMusic();
-    component.firstChild<Backboard>()?.waitingMode();
-    component.firstChild<CameraController>()?.focusOnGame();
-    component.overlays.remove(PinballGame.playButtonOverlay);
-  }
-}

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

@@ -1,5 +1,6 @@
 import 'package:flame/components.dart';
 import 'package:pinball/game/game.dart';
+import 'package:pinball_audio/pinball_audio.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 
@@ -20,7 +21,7 @@ class GoogleWordBonusBehavior extends Component
             .every((letter) => letter.bloc.state == GoogleLetterState.lit);
 
         if (achievedBonus) {
-          gameRef.audio.googleBonus();
+          gameRef.player.play(PinballAudio.google);
           gameRef
               .read<GameBloc>()
               .add(const BonusActivated(GameBonus.googleWord));

lib/game/components/google_word/google_word.dart

@@ -1,7 +1,7 @@
 import 'package:flame/components.dart';
 import 'package:flutter/material.dart';
+import 'package:pinball/game/behaviors/scoring_behavior.dart';
 import 'package:pinball/game/components/google_word/behaviors/behaviors.dart';
-import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 
@@ -16,27 +16,27 @@ class GoogleWord extends Component with ZIndex {
           children: [
             GoogleLetter(
               0,
-              children: [ScoringBehavior(points: Points.fiveThousand)],
+              children: [ScoringContactBehavior(points: Points.fiveThousand)],
             )..initialPosition = position + Vector2(-13.1, 1.72),
             GoogleLetter(
               1,
-              children: [ScoringBehavior(points: Points.fiveThousand)],
+              children: [ScoringContactBehavior(points: Points.fiveThousand)],
             )..initialPosition = position + Vector2(-8.33, -0.75),
             GoogleLetter(
               2,
-              children: [ScoringBehavior(points: Points.fiveThousand)],
+              children: [ScoringContactBehavior(points: Points.fiveThousand)],
             )..initialPosition = position + Vector2(-2.88, -1.85),
             GoogleLetter(
               3,
-              children: [ScoringBehavior(points: Points.fiveThousand)],
+              children: [ScoringContactBehavior(points: Points.fiveThousand)],
             )..initialPosition = position + Vector2(2.88, -1.85),
             GoogleLetter(
               4,
-              children: [ScoringBehavior(points: Points.fiveThousand)],
+              children: [ScoringContactBehavior(points: Points.fiveThousand)],
             )..initialPosition = position + Vector2(8.33, -0.75),
             GoogleLetter(
               5,
-              children: [ScoringBehavior(points: Points.fiveThousand)],
+              children: [ScoringContactBehavior(points: Points.fiveThousand)],
             )..initialPosition = position + Vector2(13.1, 1.72),
             GoogleWordBonusBehavior(),
           ],

lib/game/components/launcher.dart

@@ -12,6 +12,7 @@ class Launcher extends Component {
       : super(
           children: [
             LaunchRamp(),
+            Flapper(),
             ControlledPlunger(compressionDistance: 9.2)
               ..initialPosition = Vector2(41.2, 43.7),
             RocketSpriteComponent()..position = Vector2(43, 62.3),

lib/game/components/scoring_behavior.dart

@@ -1,34 +0,0 @@
-// ignore_for_file: avoid_renaming_method_parameters
-
-import 'package:flame/components.dart';
-import 'package:flame_forge2d/flame_forge2d.dart';
-import 'package:pinball/game/game.dart';
-import 'package:pinball_components/pinball_components.dart';
-import 'package:pinball_flame/pinball_flame.dart';
-
-/// {@template scoring_behavior}
-/// Adds points to the score when the ball contacts the [parent].
-/// {@endtemplate}
-class ScoringBehavior extends ContactBehavior with HasGameRef<PinballGame> {
-  /// {@macro scoring_behavior}
-  ScoringBehavior({
-    required Points points,
-  }) : _points = points;
-
-  final Points _points;
-
-  @override
-  void beginContact(Object other, Contact contact) {
-    super.beginContact(other, contact);
-    if (other is! Ball) return;
-
-    gameRef.read<GameBloc>().add(Scored(points: _points.value));
-    gameRef.audio.score();
-    gameRef.firstChild<ZCanvasComponent>()!.add(
-          ScoreComponent(
-            points: _points,
-            position: other.body.position,
-          ),
-        );
-  }
-}

lib/game/components/sparky_scorch.dart

@@ -2,7 +2,8 @@
 
 import 'package:flame/components.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
-import 'package:pinball/game/game.dart';
+import 'package:pinball/game/behaviors/behaviors.dart';
+import 'package:pinball/game/components/components.dart';
 import 'package:pinball_components/pinball_components.dart';
 
 /// {@template sparky_scorch}
@@ -16,17 +17,20 @@ class SparkyScorch extends Component {
           children: [
             SparkyBumper.a(
               children: [
-                ScoringBehavior(points: Points.twentyThousand),
+                ScoringContactBehavior(points: Points.twentyThousand),
+                BumperNoisyBehavior(),
               ],
             )..initialPosition = Vector2(-22.9, -41.65),
             SparkyBumper.b(
               children: [
-                ScoringBehavior(points: Points.twentyThousand),
+                ScoringContactBehavior(points: Points.twentyThousand),
+                BumperNoisyBehavior(),
               ],
             )..initialPosition = Vector2(-21.25, -57.9),
             SparkyBumper.c(
               children: [
-                ScoringBehavior(points: Points.twentyThousand),
+                ScoringContactBehavior(points: Points.twentyThousand),
+                BumperNoisyBehavior(),
               ],
             )..initialPosition = Vector2(-3.3, -52.55),
             SparkyComputerSensor()..initialPosition = Vector2(-13, -49.9),
@@ -47,7 +51,7 @@ class SparkyComputerSensor extends BodyComponent
       : super(
           renderBody: false,
           children: [
-            ScoringBehavior(points: Points.twentyThousand),
+            ScoringContactBehavior(points: Points.twentyThousand),
           ],
         );
 

lib/game/game_assets.dart

@@ -13,7 +13,6 @@ extension PinballGameAssetsX on PinballGame {
 
     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),
       images.load(components.Assets.images.signpost.active1.keyName),
@@ -99,8 +98,8 @@ extension PinballGameAssetsX on PinballGame {
       images.load(components.Assets.images.sparky.bumper.b.dimmed.keyName),
       images.load(components.Assets.images.sparky.bumper.c.lit.keyName),
       images.load(components.Assets.images.sparky.bumper.c.dimmed.keyName),
-      images.load(components.Assets.images.backboard.backboardScores.keyName),
-      images.load(components.Assets.images.backboard.backboardGameOver.keyName),
+      images.load(components.Assets.images.backbox.marquee.keyName),
+      images.load(components.Assets.images.backbox.displayDivider.keyName),
       images.load(components.Assets.images.googleWord.letter1.lit.keyName),
       images.load(components.Assets.images.googleWord.letter1.dimmed.keyName),
       images.load(components.Assets.images.googleWord.letter2.lit.keyName),
@@ -113,7 +112,6 @@ extension PinballGameAssetsX on PinballGame {
       images.load(components.Assets.images.googleWord.letter5.dimmed.keyName),
       images.load(components.Assets.images.googleWord.letter6.lit.keyName),
       images.load(components.Assets.images.googleWord.letter6.dimmed.keyName),
-      images.load(components.Assets.images.backboard.display.keyName),
       images.load(components.Assets.images.multiball.lit.keyName),
       images.load(components.Assets.images.multiball.dimmed.keyName),
       images.load(components.Assets.images.multiplier.x2.lit.keyName),
@@ -130,10 +128,21 @@ extension PinballGameAssetsX on PinballGame {
       images.load(components.Assets.images.score.twentyThousand.keyName),
       images.load(components.Assets.images.score.twoHundredThousand.keyName),
       images.load(components.Assets.images.score.oneMillion.keyName),
+      images.load(components.Assets.images.flapper.backSupport.keyName),
+      images.load(components.Assets.images.flapper.frontSupport.keyName),
+      images.load(components.Assets.images.flapper.flap.keyName),
+      images.load(components.Assets.images.skillShot.decal.keyName),
+      images.load(components.Assets.images.skillShot.pin.keyName),
+      images.load(components.Assets.images.skillShot.lit.keyName),
+      images.load(components.Assets.images.skillShot.dimmed.keyName),
       images.load(dashTheme.leaderboardIcon.keyName),
       images.load(sparkyTheme.leaderboardIcon.keyName),
       images.load(androidTheme.leaderboardIcon.keyName),
       images.load(dinoTheme.leaderboardIcon.keyName),
+      images.load(androidTheme.ball.keyName),
+      images.load(dashTheme.ball.keyName),
+      images.load(dinoTheme.ball.keyName),
+      images.load(sparkyTheme.ball.keyName),
     ];
   }
 }

lib/game/pinball_game.dart

@@ -5,24 +5,28 @@ import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 import 'package:flame/input.dart';
 import 'package:flame_bloc/flame_bloc.dart';
-import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:leaderboard_repository/leaderboard_repository.dart';
+import 'package:pinball/game/behaviors/behaviors.dart';
 import 'package:pinball/game/game.dart';
+import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball_audio/pinball_audio.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 import 'package:pinball_theme/pinball_theme.dart';
 
-class PinballGame extends Forge2DGame
+class PinballGame extends PinballForge2DGame
     with
         FlameBloc,
         HasKeyboardHandlerComponents,
         Controls<_GameBallsController>,
-        TapDetector {
+        MultiTouchTapDetector {
   PinballGame({
     required this.characterTheme,
-    required this.audio,
+    required this.leaderboardRepository,
+    required this.l10n,
+    required this.player,
   }) : super(gravity: Vector2(0, 30)) {
     images.prefix = '';
     controller = _GameBallsController(this);
@@ -36,24 +40,30 @@ class PinballGame extends Forge2DGame
 
   final CharacterTheme characterTheme;
 
-  final PinballAudio audio;
+  final PinballPlayer player;
 
-  late final GameFlowController gameFlowController;
+  final LeaderboardRepository leaderboardRepository;
+
+  final AppLocalizations l10n;
 
   @override
   Future<void> onLoad() async {
-    await add(gameFlowController = GameFlowController(this));
     await add(CameraController(this));
 
     final machine = [
       BoardBackgroundSpriteComponent(),
       Boundaries(),
-      Backboard.waiting(position: Vector2(0, -88)),
+      Backbox(leaderboardRepository: leaderboardRepository),
     ];
     final decals = [
       GoogleWord(position: Vector2(-4.25, 1.8)),
       Multipliers(),
       Multiballs(),
+      SkillShot(
+        children: [
+          ScoringContactBehavior(points: Points.oneMillion),
+        ],
+      ),
     ];
     final characterAreas = [
       AndroidAcres(),
@@ -62,26 +72,38 @@ class PinballGame extends Forge2DGame
       SparkyScorch(),
     ];
 
-    await add(
-      ZCanvasComponent(
-        children: [
-          ...machine,
-          ...decals,
-          ...characterAreas,
-          Drain(),
-          BottomGroup(),
-          Launcher(),
-        ],
-      ),
+    await addAll(
+      [
+        GameBlocStatusListener(),
+        CanvasComponent(
+          onSpritePainted: (paint) {
+            if (paint.filterQuality != FilterQuality.medium) {
+              paint.filterQuality = FilterQuality.medium;
+            }
+          },
+          children: [
+            ZCanvasComponent(
+              children: [
+                ...machine,
+                ...decals,
+                ...characterAreas,
+                Drain(),
+                BottomGroup(),
+                Launcher(),
+              ],
+            ),
+          ],
+        ),
+      ],
     );
 
     await super.onLoad();
   }
 
-  BoardSide? focusedBoardSide;
+  final focusedBoardSide = <int, BoardSide>{};
 
   @override
-  void onTapDown(TapDownInfo info) {
+  void onTapDown(int pointerId, TapDownInfo info) {
     if (info.raw.kind == PointerDeviceKind.touch) {
       final rocket = descendants().whereType<RocketSpriteComponent>().first;
       final bounds = rocket.topLeftPosition & rocket.size;
@@ -91,36 +113,37 @@ class PinballGame extends Forge2DGame
         descendants().whereType<Plunger>().single.pullFor(2);
       } else {
         final leftSide = info.eventPosition.widget.x < canvasSize.x / 2;
-        focusedBoardSide = leftSide ? BoardSide.left : BoardSide.right;
+        focusedBoardSide[pointerId] =
+            leftSide ? BoardSide.left : BoardSide.right;
         final flippers = descendants().whereType<Flipper>().where((flipper) {
-          return flipper.side == focusedBoardSide;
+          return flipper.side == focusedBoardSide[pointerId];
         });
         flippers.first.moveUp();
       }
     }
 
-    super.onTapDown(info);
+    super.onTapDown(pointerId, info);
   }
 
   @override
-  void onTapUp(TapUpInfo info) {
-    _moveFlippersDown();
-    super.onTapUp(info);
+  void onTapUp(int pointerId, TapUpInfo info) {
+    _moveFlippersDown(pointerId);
+    super.onTapUp(pointerId, info);
   }
 
   @override
-  void onTapCancel() {
-    _moveFlippersDown();
-    super.onTapCancel();
+  void onTapCancel(int pointerId) {
+    _moveFlippersDown(pointerId);
+    super.onTapCancel(pointerId);
   }
 
-  void _moveFlippersDown() {
-    if (focusedBoardSide != null) {
+  void _moveFlippersDown(int pointerId) {
+    if (focusedBoardSide[pointerId] != null) {
       final flippers = descendants().whereType<Flipper>().where((flipper) {
-        return flipper.side == focusedBoardSide;
+        return flipper.side == focusedBoardSide[pointerId];
       });
       flippers.first.moveDown();
-      focusedBoardSide = null;
+      focusedBoardSide.remove(pointerId);
     }
   }
 }
@@ -132,9 +155,7 @@ class _GameBallsController extends ComponentController<PinballGame>
   @override
   bool listenWhen(GameState? previousState, GameState newState) {
     final noBallsLeft = component.descendants().whereType<Ball>().isEmpty;
-    final notGameOver = !newState.isGameOver;
-
-    return noBallsLeft && notGameOver;
+    return noBallsLeft && newState.status.isPlaying;
   }
 
   @override
@@ -159,42 +180,100 @@ class _GameBallsController extends ComponentController<PinballGame>
           plunger.body.position.x,
           plunger.body.position.y - Ball.size.y,
         );
-      component.firstChild<ZCanvasComponent>()?.add(ball);
+      component.descendants().whereType<ZCanvasComponent>().single.add(ball);
     });
   }
 }
 
-class DebugPinballGame extends PinballGame with FPSCounter {
+class DebugPinballGame extends PinballGame with FPSCounter, PanDetector {
   DebugPinballGame({
     required CharacterTheme characterTheme,
-    required PinballAudio audio,
+    required LeaderboardRepository leaderboardRepository,
+    required AppLocalizations l10n,
+    required PinballPlayer player,
   }) : super(
           characterTheme: characterTheme,
-          audio: audio,
+          player: player,
+          leaderboardRepository: leaderboardRepository,
+          l10n: l10n,
         ) {
     controller = _GameBallsController(this);
   }
 
+  Vector2? lineStart;
+  Vector2? lineEnd;
+
   @override
   Future<void> onLoad() async {
     await super.onLoad();
+    await add(PreviewLine());
+
     await add(_DebugInformation());
   }
 
   @override
-  void onTapUp(TapUpInfo info) {
-    super.onTapUp(info);
+  void onTapUp(int pointerId, TapUpInfo info) {
+    super.onTapUp(pointerId, info);
 
     if (info.raw.kind == PointerDeviceKind.mouse) {
+      final canvas = descendants().whereType<ZCanvasComponent>().single;
       final ball = ControlledBall.debug()
         ..initialPosition = info.eventPosition.game;
-      firstChild<ZCanvasComponent>()?.add(ball);
+      canvas.add(ball);
     }
   }
+
+  @override
+  void onPanStart(DragStartInfo info) {
+    lineStart = info.eventPosition.game;
+  }
+
+  @override
+  void onPanUpdate(DragUpdateInfo info) {
+    lineEnd = info.eventPosition.game;
+  }
+
+  @override
+  void onPanEnd(DragEndInfo info) {
+    if (lineEnd != null) {
+      final line = lineEnd! - lineStart!;
+      _turboChargeBall(line);
+      lineEnd = null;
+      lineStart = null;
+    }
+  }
+
+  void _turboChargeBall(Vector2 line) {
+    final canvas = descendants().whereType<ZCanvasComponent>().single;
+    final ball = ControlledBall.debug()..initialPosition = lineStart!;
+    final impulse = line * -1 * 10;
+    ball.add(BallTurboChargingBehavior(impulse: impulse));
+    canvas.add(ball);
+  }
 }
 
-// TODO(wolfenrain): investigate this CI failure.
 // coverage:ignore-start
+class PreviewLine extends PositionComponent with HasGameRef<DebugPinballGame> {
+  static final _previewLinePaint = Paint()
+    ..color = Colors.pink
+    ..strokeWidth = 0.4
+    ..style = PaintingStyle.stroke;
+
+  @override
+  void render(Canvas canvas) {
+    super.render(canvas);
+
+    if (gameRef.lineEnd != null) {
+      canvas.drawLine(
+        gameRef.lineStart!.toOffset(),
+        gameRef.lineEnd!.toOffset(),
+        _previewLinePaint,
+      );
+    }
+  }
+}
+
+// TODO(wolfenrain): investigate this CI failure.
 class _DebugInformation extends Component with HasGameRef<DebugPinballGame> {
   @override
   PositionType get positionType => PositionType.widget;

lib/game/view/pinball_game_page.dart

@@ -4,8 +4,10 @@ import 'package:flame/game.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:leaderboard_repository/leaderboard_repository.dart';
 import 'package:pinball/assets_manager/assets_manager.dart';
 import 'package:pinball/game/game.dart';
+import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball/select_character/select_character.dart';
 import 'package:pinball/start_game/start_game.dart';
 import 'package:pinball_audio/pinball_audio.dart';
@@ -35,23 +37,32 @@ class PinballGamePage extends StatelessWidget {
   Widget build(BuildContext context) {
     final characterTheme =
         context.read<CharacterThemeCubit>().state.characterTheme;
-    final audio = context.read<PinballAudio>();
-    final pinballAudio = context.read<PinballAudio>();
+    final player = context.read<PinballPlayer>();
+    final leaderboardRepository = context.read<LeaderboardRepository>();
 
     final game = isDebugMode
-        ? DebugPinballGame(characterTheme: characterTheme, audio: audio)
-        : PinballGame(characterTheme: characterTheme, audio: audio);
+        ? DebugPinballGame(
+            characterTheme: characterTheme,
+            player: player,
+            leaderboardRepository: leaderboardRepository,
+            l10n: context.l10n,
+          )
+        : PinballGame(
+            characterTheme: characterTheme,
+            player: player,
+            leaderboardRepository: leaderboardRepository,
+            l10n: context.l10n,
+          );
 
     final loadables = [
       ...game.preLoadAssets(),
-      pinballAudio.load(),
+      ...player.load(),
       ...BonusAnimation.loadAssets(),
       ...SelectedCharacter.loadAssets(),
     ];
 
     return MultiBlocProvider(
       providers: [
-        BlocProvider(create: (_) => StartGameBloc(game: game)),
         BlocProvider(create: (_) => GameBloc()),
         BlocProvider(create: (_) => AssetsManagerCubit(loadables)..load()),
       ],
@@ -96,36 +107,43 @@ class PinballGameLoadedView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final isPlaying = context.select(
+      (StartGameBloc bloc) => bloc.state.status == StartGameStatus.play,
+    );
     final gameWidgetWidth = MediaQuery.of(context).size.height * 9 / 16;
     final screenWidth = MediaQuery.of(context).size.width;
     final leftMargin = (screenWidth / 2) - (gameWidgetWidth / 1.8);
+    final clampedMargin = leftMargin > 0 ? leftMargin : 0.0;
 
-    return Stack(
-      children: [
-        Positioned.fill(
-          child: GameWidget<PinballGame>(
-            game: game,
-            initialActiveOverlays: const [PinballGame.playButtonOverlay],
-            overlayBuilderMap: {
-              PinballGame.playButtonOverlay: (context, game) {
-                return Positioned(
-                  bottom: 20,
-                  right: 0,
-                  left: 0,
-                  child: PlayButtonOverlay(game: game),
-                );
+    return StartGameListener(
+      child: Stack(
+        children: [
+          Positioned.fill(
+            child: GameWidget<PinballGame>(
+              game: game,
+              initialActiveOverlays: const [PinballGame.playButtonOverlay],
+              overlayBuilderMap: {
+                PinballGame.playButtonOverlay: (context, game) {
+                  return const Positioned(
+                    bottom: 20,
+                    right: 0,
+                    left: 0,
+                    child: PlayButtonOverlay(),
+                  );
+                },
               },
-            },
+            ),
           ),
-        ),
-        // TODO(arturplaczek): add Visibility to GameHud based on StartGameBloc
-        // status
-        Positioned(
-          top: 16,
-          left: leftMargin,
-          child: const GameHud(),
-        ),
-      ],
+          Positioned(
+            top: 0,
+            left: clampedMargin,
+            child: Visibility(
+              visible: isPlaying,
+              child: const GameHud(),
+            ),
+          ),
+        ],
+      ),
     );
   }
 }

lib/game/view/widgets/game_hud.dart

@@ -7,8 +7,8 @@ import 'package:pinball_ui/pinball_ui.dart';
 /// {@template game_hud}
 /// Overlay on the [PinballGame].
 ///
-/// Displays the current [GameState.score], [GameState.rounds] and animates when
-/// the player gets a [GameBonus].
+/// Displays the current [GameState.displayScore], [GameState.rounds] and
+/// animates when the player gets a [GameBonus].
 /// {@endtemplate}
 class GameHud extends StatefulWidget {
   /// {@macro game_hud}
@@ -23,16 +23,18 @@ class _GameHudState extends State<GameHud> {
 
   /// Ratio from sprite frame (width 500, height 144) w / h = ratio
   static const _ratio = 3.47;
-  static const _width = 265.0;
 
   @override
   Widget build(BuildContext context) {
-    final isGameOver = context.select((GameBloc bloc) => bloc.state.isGameOver);
+    final isGameOver =
+        context.select((GameBloc bloc) => bloc.state.status.isGameOver);
+
+    final height = _calculateHeight(context);
 
     return _ScoreViewDecoration(
       child: SizedBox(
-        height: _width / _ratio,
-        width: _width,
+        height: height,
+        width: height * _ratio,
         child: BlocListener<GameBloc, GameState>(
           listenWhen: (previous, current) =>
               previous.bonusHistory.length != current.bonusHistory.length,
@@ -53,6 +55,17 @@ class _GameHudState extends State<GameHud> {
       ),
     );
   }
+
+  double _calculateHeight(BuildContext context) {
+    final height = MediaQuery.of(context).size.height * 0.09;
+    if (height > 90) {
+      return 90;
+    } else if (height < 60) {
+      return 60;
+    } else {
+      return height;
+    }
+  }
 }
 
 class _ScoreViewDecoration extends StatelessWidget {

lib/game/view/widgets/play_button_overlay.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:pinball/game/pinball_game.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:pinball/l10n/l10n.dart';
-import 'package:pinball/select_character/select_character.dart';
+import 'package:pinball/start_game/start_game.dart';
 import 'package:pinball_ui/pinball_ui.dart';
 
 /// {@template play_button_overlay}
@@ -9,13 +9,7 @@ import 'package:pinball_ui/pinball_ui.dart';
 /// {@endtemplate}
 class PlayButtonOverlay extends StatelessWidget {
   /// {@macro play_button_overlay}
-  const PlayButtonOverlay({
-    Key? key,
-    required PinballGame game,
-  })  : _game = game,
-        super(key: key);
-
-  final PinballGame _game;
+  const PlayButtonOverlay({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -23,9 +17,8 @@ class PlayButtonOverlay extends StatelessWidget {
 
     return PinballButton(
       text: l10n.play,
-      onTap: () async {
-        _game.gameFlowController.start();
-        await showCharacterSelectionDialog(context);
+      onTap: () {
+        context.read<StartGameBloc>().add(const PlayTapped());
       },
     );
   }

lib/game/view/widgets/score_view.dart

@@ -13,12 +13,13 @@ class ScoreView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final isGameOver = context.select((GameBloc bloc) => bloc.state.isGameOver);
+    final isGameOver =
+        context.select((GameBloc bloc) => bloc.state.status.isGameOver);
 
     return Padding(
       padding: const EdgeInsets.symmetric(
         horizontal: 16,
-        vertical: 8,
+        vertical: 2,
       ),
       child: AnimatedSwitcher(
         duration: kThemeAnimationDuration,
@@ -69,11 +70,13 @@ class _ScoreText extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final score = context.select((GameBloc bloc) => bloc.state.score);
+    final score = context.select((GameBloc bloc) => bloc.state.displayScore);
 
-    return Text(
-      score.formatScore(),
-      style: Theme.of(context).textTheme.headline1,
+    return FittedBox(
+      child: Text(
+        score.formatScore(),
+        style: Theme.of(context).textTheme.headline2,
+      ),
     );
   }
 }

lib/how_to_play/widgets/how_to_play_dialog.dart

@@ -51,24 +51,16 @@ extension on Control {
   }
 }
 
-Future<void> showHowToPlayDialog(BuildContext context) {
-  final audio = context.read<PinballAudio>();
-  return showDialog<void>(
-    context: context,
-    builder: (_) => HowToPlayDialog(),
-  ).then((_) {
-    audio.ioPinballVoiceOver();
-  });
-}
-
 class HowToPlayDialog extends StatefulWidget {
   HowToPlayDialog({
     Key? key,
+    required this.onDismissCallback,
     @visibleForTesting PlatformHelper? platformHelper,
   })  : platformHelper = platformHelper ?? PlatformHelper(),
         super(key: key);
 
   final PlatformHelper platformHelper;
+  final VoidCallback onDismissCallback;
 
   @override
   State<HowToPlayDialog> createState() => _HowToPlayDialogState();
@@ -82,6 +74,7 @@ class _HowToPlayDialogState extends State<HowToPlayDialog> {
     closeTimer = Timer(const Duration(seconds: 3), () {
       if (mounted) {
         Navigator.of(context).pop();
+        widget.onDismissCallback.call();
       }
     });
   }
@@ -96,10 +89,20 @@ class _HowToPlayDialogState extends State<HowToPlayDialog> {
   Widget build(BuildContext context) {
     final isMobile = widget.platformHelper.isMobile;
     final l10n = context.l10n;
-    return PinballDialog(
-      title: l10n.howToPlay,
-      subtitle: l10n.tipsForFlips,
-      child: isMobile ? const _MobileBody() : const _DesktopBody(),
+
+    return WillPopScope(
+      onWillPop: () {
+        widget.onDismissCallback.call();
+        context.read<PinballPlayer>().play(PinballAudio.ioPinballVoiceOver);
+        return Future.value(true);
+      },
+      child: PinballDialog(
+        title: l10n.howToPlay,
+        subtitle: l10n.tipsForFlips,
+        child: FittedBox(
+          child: isMobile ? const _MobileBody() : const _DesktopBody(),
+        ),
+      ),
     );
   }
 }
@@ -111,18 +114,16 @@ class _MobileBody extends StatelessWidget {
   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(),
-          ],
-        ),
+    return Padding(
+      padding: EdgeInsets.symmetric(
+        horizontal: paddingWidth,
+      ),
+      child: Column(
+        children: [
+          const _MobileLaunchControls(),
+          SizedBox(height: paddingHeight),
+          const _MobileFlipperControls(),
+        ],
       ),
     );
   }
@@ -191,13 +192,15 @@ class _DesktopBody extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListView(
-      children: const [
-        SizedBox(height: 16),
-        _DesktopLaunchControls(),
-        SizedBox(height: 16),
-        _DesktopFlipperControls(),
-      ],
+    return Padding(
+      padding: const EdgeInsets.all(16),
+      child: Column(
+        children: const [
+          _DesktopLaunchControls(),
+          SizedBox(height: 16),
+          _DesktopFlipperControls(),
+        ],
+      ),
     );
   }
 }

lib/l10n/arb/app_en.arb

@@ -64,49 +64,45 @@
   "@gameOver": {
     "description": "Text displayed on the ending dialog when game finishes"
   },
-  "leaderboard": "Leaderboard",
-  "@leaderboard": {
-    "description": "Text displayed on the ending dialog leaderboard button"
+  "rounds": "Ball Ct:",
+  "@rounds": {
+    "description": "Text displayed on the scoreboard widget to indicate rounds left"
   },
-  "rank": "Rank",
-  "@rank": {
-    "description": "Text displayed on the leaderboard page header rank column"
+  "topPlayers": "Top Players",
+  "@topPlayers": {
+    "description": "Title text displayed on leaderboard screen"
   },
-  "character": "Character",
-  "@character": {
-    "description": "Text displayed on the leaderboard page header character column"
+  "rank": "rank",
+  "@rank": {
+    "description": "Label text displayed above player's rank"
   },
-  "username": "Username",
-  "@username": {
-    "description": "Text displayed on the leaderboard page header userName column"
+  "name": "name",
+  "@name": {
+    "description": "Label text displayed above player's initials"
   },
-  "score": "Score",
+  "score": "score",
   "@score": {
-    "description": "Text displayed on the leaderboard page header score column"
-  },
-  "retry": "Retry",
-  "@retry": {
-    "description": "Text displayed on the retry button leaders board page"
+    "description": "Label text displayed above player's score"
   },
-  "addUser": "Add User",
-  "@addUser": {
-    "description": "Text displayed on the add user button at ending dialog"
+  "enterInitials": "Enter your initials using the",
+  "@enterInitials": {
+    "description": "Informational text displayed on initials input screen"
   },
-  "error": "Error",
-  "@error": {
-    "description": "Text displayed on the ending dialog when there is any error on sending user"
+  "arrows": "arrows",
+  "@arrows": {
+    "description": "Text displayed on initials input screen indicating arrow keys"
   },
-  "yourScore": "Your score is",
-  "@yourScore": {
-    "description": "Text displayed on the ending dialog when game finishes to show the final score"
+  "andPress": "and press",
+  "@andPress": {
+    "description": "Connecting text displayed on initials input screen informational text span"
   },
-  "enterInitials": "Enter your initials",
-  "@enterInitials": {
-    "description": "Text displayed on the ending dialog when game finishes to ask the user for his initials"
+  "enterReturn": "enter/return",
+  "@enterReturn": {
+    "description": "Text displayed on initials input screen indicating return key"
   },
-  "rounds": "Ball Ct:",
-  "@rounds": {
-    "description": "Text displayed on the scoreboard widget to indicate rounds left"
+  "toSubmit": "to submit",
+  "@toSubmit": {
+    "description": "Ending text displayed on initials input screen informational text span"
   },
   "footerMadeWithText": "Made with ",
   "@footerMadeWithText": {

lib/leaderboard/models/leader_board_entry.dart

@@ -1,3 +1,4 @@
+import 'package:equatable/equatable.dart';
 import 'package:leaderboard_repository/leaderboard_repository.dart';
 import 'package:pinball_theme/pinball_theme.dart';
 
@@ -6,9 +7,9 @@ import 'package:pinball_theme/pinball_theme.dart';
 /// player's initials, score, and chosen character.
 ///
 /// {@endtemplate}
-class LeaderboardEntry {
+class LeaderboardEntry extends Equatable {
   /// {@macro leaderboard_entry}
-  LeaderboardEntry({
+  const LeaderboardEntry({
     required this.rank,
     required this.playerInitials,
     required this.score,
@@ -26,6 +27,9 @@ class LeaderboardEntry {
 
   /// [CharacterTheme] for [LeaderboardEntry].
   final AssetGenImage character;
+
+  @override
+  List<Object?> get props => [rank, playerInitials, score, character];
 }
 
 /// Converts [LeaderboardEntryData] from repository to [LeaderboardEntry].

lib/main_development.dart

@@ -11,7 +11,7 @@ void main() {
   bootstrap((firestore, firebaseAuth) async {
     final leaderboardRepository = LeaderboardRepository(firestore);
     final authenticationRepository = AuthenticationRepository(firebaseAuth);
-    final pinballAudio = PinballAudio();
+    final pinballPlayer = PinballPlayer();
     unawaited(
       Firebase.initializeApp().then(
         (_) => authenticationRepository.authenticateAnonymously(),
@@ -20,7 +20,7 @@ void main() {
     return App(
       authenticationRepository: authenticationRepository,
       leaderboardRepository: leaderboardRepository,
-      pinballAudio: pinballAudio,
+      pinballPlayer: pinballPlayer,
     );
   });
 }

lib/main_production.dart

@@ -11,7 +11,7 @@ void main() {
   bootstrap((firestore, firebaseAuth) async {
     final leaderboardRepository = LeaderboardRepository(firestore);
     final authenticationRepository = AuthenticationRepository(firebaseAuth);
-    final pinballAudio = PinballAudio();
+    final pinballPlayer = PinballPlayer();
     unawaited(
       Firebase.initializeApp().then(
         (_) => authenticationRepository.authenticateAnonymously(),
@@ -20,7 +20,7 @@ void main() {
     return App(
       authenticationRepository: authenticationRepository,
       leaderboardRepository: leaderboardRepository,
-      pinballAudio: pinballAudio,
+      pinballPlayer: pinballPlayer,
     );
   });
 }

lib/main_staging.dart

@@ -11,7 +11,7 @@ void main() {
   bootstrap((firestore, firebaseAuth) async {
     final leaderboardRepository = LeaderboardRepository(firestore);
     final authenticationRepository = AuthenticationRepository(firebaseAuth);
-    final pinballAudio = PinballAudio();
+    final pinballPlayer = PinballPlayer();
     unawaited(
       Firebase.initializeApp().then(
         (_) => authenticationRepository.authenticateAnonymously(),
@@ -20,7 +20,7 @@ void main() {
     return App(
       authenticationRepository: authenticationRepository,
       leaderboardRepository: leaderboardRepository,
-      pinballAudio: pinballAudio,
+      pinballPlayer: pinballPlayer,
     );
   });
 }

lib/select_character/view/character_selection_page.dart

@@ -1,20 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:pinball/how_to_play/how_to_play.dart';
 import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball/select_character/select_character.dart';
+import 'package:pinball/start_game/start_game.dart';
 import 'package:pinball_theme/pinball_theme.dart';
 import 'package:pinball_ui/pinball_ui.dart';
 
-/// Inflates [CharacterSelectionDialog] using [showDialog].
-Future<void> showCharacterSelectionDialog(BuildContext context) {
-  return showDialog<void>(
-    context: context,
-    barrierDismissible: false,
-    builder: (_) => const CharacterSelectionDialog(),
-  );
-}
-
 /// {@template character_selection_dialog}
 /// Dialog used to select the playing character of the game.
 /// {@endtemplate character_selection_dialog}
@@ -59,7 +50,7 @@ class _SelectCharacterButton extends StatelessWidget {
     return PinballButton(
       onTap: () async {
         Navigator.of(context).pop();
-        await showHowToPlayDialog(context);
+        context.read<StartGameBloc>().add(const CharacterSelected());
       },
       text: l10n.select,
     );
@@ -74,36 +65,40 @@ class _CharacterGrid extends StatelessWidget {
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            Column(
-              children: [
-                _Character(
-                  key: const Key('sparky_character_selection'),
-                  character: const SparkyTheme(),
-                  isSelected: state.isSparkySelected,
-                ),
-                const SizedBox(height: 6),
-                _Character(
-                  key: const Key('android_character_selection'),
-                  character: const AndroidTheme(),
-                  isSelected: state.isAndroidSelected,
-                ),
-              ],
+            Expanded(
+              child: Column(
+                children: [
+                  _Character(
+                    key: const Key('sparky_character_selection'),
+                    character: const SparkyTheme(),
+                    isSelected: state.isSparkySelected,
+                  ),
+                  const SizedBox(height: 6),
+                  _Character(
+                    key: const Key('android_character_selection'),
+                    character: const AndroidTheme(),
+                    isSelected: state.isAndroidSelected,
+                  ),
+                ],
+              ),
             ),
             const SizedBox(width: 6),
-            Column(
-              children: [
-                _Character(
-                  key: const Key('dash_character_selection'),
-                  character: const DashTheme(),
-                  isSelected: state.isDashSelected,
-                ),
-                const SizedBox(height: 6),
-                _Character(
-                  key: const Key('dino_character_selection'),
-                  character: const DinoTheme(),
-                  isSelected: state.isDinoSelected,
-                ),
-              ],
+            Expanded(
+              child: Column(
+                children: [
+                  _Character(
+                    key: const Key('dash_character_selection'),
+                    character: const DashTheme(),
+                    isSelected: state.isDashSelected,
+                  ),
+                  const SizedBox(height: 6),
+                  _Character(
+                    key: const Key('dino_character_selection'),
+                    character: const DinoTheme(),
+                    isSelected: state.isDinoSelected,
+                  ),
+                ],
+              ),
             ),
           ],
         );

lib/start_game/bloc/start_game_bloc.dart

@@ -1,6 +1,5 @@
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
-import 'package:pinball/game/game.dart';
 
 part 'start_game_event.dart';
 part 'start_game_state.dart';
@@ -10,23 +9,16 @@ part 'start_game_state.dart';
 /// {@endtemplate}
 class StartGameBloc extends Bloc<StartGameEvent, StartGameState> {
   /// {@macro start_game_bloc}
-  StartGameBloc({
-    required PinballGame game,
-  })  : _game = game,
-        super(const StartGameState.initial()) {
+  StartGameBloc() : super(const StartGameState.initial()) {
     on<PlayTapped>(_onPlayTapped);
     on<CharacterSelected>(_onCharacterSelected);
     on<HowToPlayFinished>(_onHowToPlayFinished);
   }
 
-  final PinballGame _game;
-
   void _onPlayTapped(
     PlayTapped event,
     Emitter<StartGameState> emit,
   ) {
-    _game.gameFlowController.start();
-
     emit(
       state.copyWith(
         status: StartGameStatus.selectCharacter,

lib/start_game/start_game.dart

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

lib/start_game/widgets/start_game_listener.dart

@@ -0,0 +1,88 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball/how_to_play/how_to_play.dart';
+import 'package:pinball/select_character/select_character.dart';
+import 'package:pinball/start_game/start_game.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+
+/// {@template start_game_listener}
+/// Listener that manages the display of dialogs for [StartGameStatus].
+///
+/// It's responsible for starting the game after pressing play button
+/// and playing a sound after the 'how to play' dialog.
+/// {@endtemplate}
+class StartGameListener extends StatelessWidget {
+  /// {@macro start_game_listener}
+  const StartGameListener({
+    Key? key,
+    required Widget child,
+  })  : _child = child,
+        super(key: key);
+
+  final Widget _child;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocListener<StartGameBloc, StartGameState>(
+      listener: (context, state) {
+        switch (state.status) {
+          case StartGameStatus.initial:
+            break;
+          case StartGameStatus.selectCharacter:
+            _onSelectCharacter(context);
+            context.read<GameBloc>().add(const GameStarted());
+            break;
+          case StartGameStatus.howToPlay:
+            _onHowToPlay(context);
+            break;
+          case StartGameStatus.play:
+            break;
+        }
+      },
+      child: _child,
+    );
+  }
+
+  void _onSelectCharacter(BuildContext context) {
+    _showPinballDialog(
+      context: context,
+      child: const CharacterSelectionDialog(),
+      barrierDismissible: false,
+    );
+  }
+
+  void _onHowToPlay(BuildContext context) {
+    _showPinballDialog(
+      context: context,
+      child: HowToPlayDialog(
+        onDismissCallback: () {
+          context.read<StartGameBloc>().add(const HowToPlayFinished());
+        },
+      ),
+    );
+  }
+
+  void _showPinballDialog({
+    required BuildContext context,
+    required Widget child,
+    bool barrierDismissible = true,
+  }) {
+    final gameWidgetWidth = MediaQuery.of(context).size.height * 9 / 16;
+
+    showDialog<void>(
+      context: context,
+      barrierColor: PinballColors.transparent,
+      barrierDismissible: barrierDismissible,
+      builder: (_) {
+        return Center(
+          child: SizedBox(
+            height: gameWidgetWidth * 0.87,
+            width: gameWidgetWidth,
+            child: child,
+          ),
+        );
+      },
+    );
+  }
+}

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

@@ -14,9 +14,10 @@ class $AssetsMusicGen {
 class $AssetsSfxGen {
   const $AssetsSfxGen();
 
+  String get bumperA => 'assets/sfx/bumper_a.mp3';
+  String get bumperB => 'assets/sfx/bumper_b.mp3';
   String get google => 'assets/sfx/google.mp3';
   String get ioPinballVoiceOver => 'assets/sfx/io_pinball_voice_over.mp3';
-  String get plim => 'assets/sfx/plim.mp3';
 }
 
 class Assets {

packages/pinball_audio/lib/src/pinball_audio.dart

@@ -1,10 +1,27 @@
+import 'dart:math';
+
 import 'package:audioplayers/audioplayers.dart';
 import 'package:flame_audio/audio_pool.dart';
 import 'package:flame_audio/flame_audio.dart';
+import 'package:flutter/material.dart';
 import 'package:pinball_audio/gen/assets.gen.dart';
 
-/// Function that defines the contract of the creation
-/// of an [AudioPool]
+/// Sounds available for play
+enum PinballAudio {
+  /// Google
+  google,
+
+  /// Bumper
+  bumper,
+
+  /// Background music
+  backgroundMusic,
+
+  /// IO Pinball voice over
+  ioPinballVoiceOver
+}
+
+/// Defines the contract of the creation of an [AudioPool].
 typedef CreateAudioPool = Future<AudioPool> Function(
   String sound, {
   bool? repeating,
@@ -29,17 +46,103 @@ typedef PreCacheSingleAudio = Future<void> Function(String);
 /// an [AudioCache] instance
 typedef ConfigureAudioCache = void Function(AudioCache);
 
-/// {@template pinball_audio}
+abstract class _Audio {
+  void play();
+  Future<void> load();
+
+  String prefixFile(String file) {
+    return 'packages/pinball_audio/$file';
+  }
+}
+
+class _SimplePlayAudio extends _Audio {
+  _SimplePlayAudio({
+    required this.preCacheSingleAudio,
+    required this.playSingleAudio,
+    required this.path,
+  });
+
+  final PreCacheSingleAudio preCacheSingleAudio;
+  final PlaySingleAudio playSingleAudio;
+  final String path;
+
+  @override
+  Future<void> load() => preCacheSingleAudio(prefixFile(path));
+
+  @override
+  void play() {
+    playSingleAudio(prefixFile(path));
+  }
+}
+
+class _LoopAudio extends _Audio {
+  _LoopAudio({
+    required this.preCacheSingleAudio,
+    required this.loopSingleAudio,
+    required this.path,
+  });
+
+  final PreCacheSingleAudio preCacheSingleAudio;
+  final LoopSingleAudio loopSingleAudio;
+  final String path;
+
+  @override
+  Future<void> load() => preCacheSingleAudio(prefixFile(path));
+
+  @override
+  void play() {
+    loopSingleAudio(prefixFile(path));
+  }
+}
+
+class _BumperAudio extends _Audio {
+  _BumperAudio({
+    required this.createAudioPool,
+    required this.seed,
+  });
+
+  final CreateAudioPool createAudioPool;
+  final Random seed;
+
+  late AudioPool bumperA;
+  late AudioPool bumperB;
+
+  @override
+  Future<void> load() async {
+    await Future.wait(
+      [
+        createAudioPool(
+          prefixFile(Assets.sfx.bumperA),
+          maxPlayers: 4,
+          prefix: '',
+        ).then((pool) => bumperA = pool),
+        createAudioPool(
+          prefixFile(Assets.sfx.bumperB),
+          maxPlayers: 4,
+          prefix: '',
+        ).then((pool) => bumperB = pool),
+      ],
+    );
+  }
+
+  @override
+  void play() {
+    (seed.nextBool() ? bumperA : bumperB).start(volume: 0.6);
+  }
+}
+
+/// {@template pinball_player}
 /// Sound manager for the pinball game
 /// {@endtemplate}
-class PinballAudio {
-  /// {@macro pinball_audio}
-  PinballAudio({
+class PinballPlayer {
+  /// {@macro pinball_player}
+  PinballPlayer({
     CreateAudioPool? createAudioPool,
     PlaySingleAudio? playSingleAudio,
     LoopSingleAudio? loopSingleAudio,
     PreCacheSingleAudio? preCacheSingleAudio,
     ConfigureAudioCache? configureAudioCache,
+    Random? seed,
   })  : _createAudioPool = createAudioPool ?? AudioPool.create,
         _playSingleAudio = playSingleAudio ?? FlameAudio.audioCache.play,
         _loopSingleAudio = loopSingleAudio ?? FlameAudio.audioCache.loop,
@@ -48,7 +151,30 @@ class PinballAudio {
         _configureAudioCache = configureAudioCache ??
             ((AudioCache a) {
               a.prefix = '';
-            });
+            }),
+        _seed = seed ?? Random() {
+    audios = {
+      PinballAudio.google: _SimplePlayAudio(
+        preCacheSingleAudio: _preCacheSingleAudio,
+        playSingleAudio: _playSingleAudio,
+        path: Assets.sfx.google,
+      ),
+      PinballAudio.ioPinballVoiceOver: _SimplePlayAudio(
+        preCacheSingleAudio: _preCacheSingleAudio,
+        playSingleAudio: _playSingleAudio,
+        path: Assets.sfx.ioPinballVoiceOver,
+      ),
+      PinballAudio.bumper: _BumperAudio(
+        createAudioPool: _createAudioPool,
+        seed: _seed,
+      ),
+      PinballAudio.backgroundMusic: _LoopAudio(
+        preCacheSingleAudio: _preCacheSingleAudio,
+        loopSingleAudio: _loopSingleAudio,
+        path: Assets.music.background,
+      ),
+    };
+  }
 
   final CreateAudioPool _createAudioPool;
 
@@ -60,46 +186,26 @@ class PinballAudio {
 
   final ConfigureAudioCache _configureAudioCache;
 
-  late AudioPool _scorePool;
+  final Random _seed;
+
+  /// Registered audios on the Player
+  @visibleForTesting
+  // ignore: library_private_types_in_public_api
+  late final Map<PinballAudio, _Audio> audios;
 
   /// Loads the sounds effects into the memory
-  Future<void> load() async {
+  List<Future<void>> load() {
     _configureAudioCache(FlameAudio.audioCache);
 
-    _scorePool = await _createAudioPool(
-      _prefixFile(Assets.sfx.plim),
-      maxPlayers: 4,
-      prefix: '',
-    );
-
-    await Future.wait([
-      _preCacheSingleAudio(_prefixFile(Assets.sfx.google)),
-      _preCacheSingleAudio(_prefixFile(Assets.sfx.ioPinballVoiceOver)),
-      _preCacheSingleAudio(_prefixFile(Assets.music.background)),
-    ]);
-  }
-
-  /// Plays the basic score sound
-  void score() {
-    _scorePool.start();
-  }
-
-  /// Plays the google word bonus
-  void googleBonus() {
-    _playSingleAudio(_prefixFile(Assets.sfx.google));
+    return audios.values.map((a) => a.load()).toList();
   }
 
-  /// Plays the I/O Pinball voice over audio.
-  void ioPinballVoiceOver() {
-    _playSingleAudio(_prefixFile(Assets.sfx.ioPinballVoiceOver));
-  }
-
-  /// Plays the background music
-  void backgroundMusic() {
-    _loopSingleAudio(_prefixFile(Assets.music.background));
-  }
-
-  String _prefixFile(String file) {
-    return 'packages/pinball_audio/$file';
+  /// Plays the received auido
+  void play(PinballAudio audio) {
+    assert(
+      audios.containsKey(audio),
+      'Tried to play unregistered audio $audio',
+    );
+    audios[audio]?.play();
   }
 }

packages/pinball_audio/test/src/pinball_audio_test.dart

@@ -1,4 +1,6 @@
 // ignore_for_file: prefer_const_constructors, one_member_abstracts
+import 'dart:math';
+
 import 'package:audioplayers/audioplayers.dart';
 import 'package:flame_audio/audio_pool.dart';
 import 'package:flame_audio/flame_audio.dart';
@@ -39,6 +41,8 @@ abstract class _PreCacheSingleAudio {
 
 class _MockPreCacheSingleAudio extends Mock implements _PreCacheSingleAudio {}
 
+class _MockRandom extends Mock implements Random {}
+
 void main() {
   group('PinballAudio', () {
     late _MockCreateAudioPool createAudioPool;
@@ -46,7 +50,8 @@ void main() {
     late _MockPlaySingleAudio playSingleAudio;
     late _MockLoopSingleAudio loopSingleAudio;
     late _PreCacheSingleAudio preCacheSingleAudio;
-    late PinballAudio audio;
+    late Random seed;
+    late PinballPlayer player;
 
     setUpAll(() {
       registerFallbackValue(_MockAudioCache());
@@ -74,26 +79,37 @@ void main() {
       preCacheSingleAudio = _MockPreCacheSingleAudio();
       when(() => preCacheSingleAudio.onCall(any())).thenAnswer((_) async {});
 
-      audio = PinballAudio(
+      seed = _MockRandom();
+
+      player = PinballPlayer(
         configureAudioCache: configureAudioCache.onCall,
         createAudioPool: createAudioPool.onCall,
         playSingleAudio: playSingleAudio.onCall,
         loopSingleAudio: loopSingleAudio.onCall,
         preCacheSingleAudio: preCacheSingleAudio.onCall,
+        seed: seed,
       );
     });
 
     test('can be instantiated', () {
-      expect(PinballAudio(), isNotNull);
+      expect(PinballPlayer(), isNotNull);
     });
 
     group('load', () {
-      test('creates the score pool', () async {
-        await audio.load();
+      test('creates the bumpers pools', () async {
+        await Future.wait(player.load());
+
+        verify(
+          () => createAudioPool.onCall(
+            'packages/pinball_audio/${Assets.sfx.bumperA}',
+            maxPlayers: 4,
+            prefix: '',
+          ),
+        ).called(1);
 
         verify(
           () => createAudioPool.onCall(
-            'packages/pinball_audio/${Assets.sfx.plim}',
+            'packages/pinball_audio/${Assets.sfx.bumperB}',
             maxPlayers: 4,
             prefix: '',
           ),
@@ -101,25 +117,25 @@ void main() {
       });
 
       test('configures the audio cache instance', () async {
-        await audio.load();
+        await Future.wait(player.load());
 
         verify(() => configureAudioCache.onCall(FlameAudio.audioCache))
             .called(1);
       });
 
       test('sets the correct prefix', () async {
-        audio = PinballAudio(
+        player = PinballPlayer(
           createAudioPool: createAudioPool.onCall,
           playSingleAudio: playSingleAudio.onCall,
           preCacheSingleAudio: preCacheSingleAudio.onCall,
         );
-        await audio.load();
+        await Future.wait(player.load());
 
         expect(FlameAudio.audioCache.prefix, equals(''));
       });
 
       test('pre cache the assets', () async {
-        await audio.load();
+        await Future.wait(player.load());
 
         verify(
           () => preCacheSingleAudio
@@ -137,29 +153,59 @@ void main() {
       });
     });
 
-    group('score', () {
-      test('plays the score sound pool', () async {
-        final audioPool = _MockAudioPool();
-        when(audioPool.start).thenAnswer((_) async => () {});
+    group('bumper', () {
+      late AudioPool bumperAPool;
+      late AudioPool bumperBPool;
+
+      setUp(() {
+        bumperAPool = _MockAudioPool();
+        when(() => bumperAPool.start(volume: any(named: 'volume')))
+            .thenAnswer((_) async => () {});
         when(
           () => createAudioPool.onCall(
-            any(),
+            'packages/pinball_audio/${Assets.sfx.bumperA}',
             maxPlayers: any(named: 'maxPlayers'),
             prefix: any(named: 'prefix'),
           ),
-        ).thenAnswer((_) async => audioPool);
+        ).thenAnswer((_) async => bumperAPool);
 
-        await audio.load();
-        audio.score();
+        bumperBPool = _MockAudioPool();
+        when(() => bumperBPool.start(volume: any(named: 'volume')))
+            .thenAnswer((_) async => () {});
+        when(
+          () => createAudioPool.onCall(
+            'packages/pinball_audio/${Assets.sfx.bumperB}',
+            maxPlayers: any(named: 'maxPlayers'),
+            prefix: any(named: 'prefix'),
+          ),
+        ).thenAnswer((_) async => bumperBPool);
+      });
+
+      group('when seed is true', () {
+        test('plays the bumper A sound pool', () async {
+          when(seed.nextBool).thenReturn(true);
+          await Future.wait(player.load());
+          player.play(PinballAudio.bumper);
 
-        verify(audioPool.start).called(1);
+          verify(() => bumperAPool.start(volume: 0.6)).called(1);
+        });
+      });
+
+      group('when seed is false', () {
+        test('plays the bumper B sound pool', () async {
+          when(seed.nextBool).thenReturn(false);
+          await Future.wait(player.load());
+          player.play(PinballAudio.bumper);
+
+          verify(() => bumperBPool.start(volume: 0.6)).called(1);
+        });
       });
     });
 
     group('googleBonus', () {
       test('plays the correct file', () async {
-        await audio.load();
-        audio.googleBonus();
+        await Future.wait(player.load());
+        player.play(PinballAudio.google);
 
         verify(
           () => playSingleAudio
@@ -170,8 +216,8 @@ void main() {
 
     group('ioPinballVoiceOver', () {
       test('plays the correct file', () async {
-        await audio.load();
-        audio.ioPinballVoiceOver();
+        await Future.wait(player.load());
+        player.play(PinballAudio.ioPinballVoiceOver);
 
         verify(
           () => playSingleAudio.onCall(
@@ -183,8 +229,8 @@ void main() {
 
     group('backgroundMusic', () {
       test('plays the correct file', () async {
-        await audio.load();
-        audio.backgroundMusic();
+        await Future.wait(player.load());
+        player.play(PinballAudio.backgroundMusic);
 
         verify(
           () => loopSingleAudio
@@ -192,5 +238,15 @@ void main() {
         ).called(1);
       });
     });
+
+    test(
+      'throws assertions error when playing an unregistered audio',
+      () async {
+        player.audios.remove(PinballAudio.google);
+        await Future.wait(player.load());
+
+        expect(() => player.play(PinballAudio.google), throwsAssertionError);
+      },
+    );
   });
 }

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

@@ -11,7 +11,7 @@ class $AssetsImagesGen {
   const $AssetsImagesGen();
 
   $AssetsImagesAndroidGen get android => const $AssetsImagesAndroidGen();
-  $AssetsImagesBackboardGen get backboard => const $AssetsImagesBackboardGen();
+  $AssetsImagesBackboxGen get backbox => const $AssetsImagesBackboxGen();
   $AssetsImagesBallGen get ball => const $AssetsImagesBallGen();
   $AssetsImagesBaseboardGen get baseboard => const $AssetsImagesBaseboardGen();
 
@@ -22,6 +22,7 @@ class $AssetsImagesGen {
   $AssetsImagesBoundaryGen get boundary => const $AssetsImagesBoundaryGen();
   $AssetsImagesDashGen get dash => const $AssetsImagesDashGen();
   $AssetsImagesDinoGen get dino => const $AssetsImagesDinoGen();
+  $AssetsImagesFlapperGen get flapper => const $AssetsImagesFlapperGen();
   $AssetsImagesFlipperGen get flipper => const $AssetsImagesFlipperGen();
   $AssetsImagesGoogleWordGen get googleWord =>
       const $AssetsImagesGoogleWordGen();
@@ -34,6 +35,7 @@ class $AssetsImagesGen {
   $AssetsImagesPlungerGen get plunger => const $AssetsImagesPlungerGen();
   $AssetsImagesScoreGen get score => const $AssetsImagesScoreGen();
   $AssetsImagesSignpostGen get signpost => const $AssetsImagesSignpostGen();
+  $AssetsImagesSkillShotGen get skillShot => const $AssetsImagesSkillShotGen();
   $AssetsImagesSlingshotGen get slingshot => const $AssetsImagesSlingshotGen();
   $AssetsImagesSparkyGen get sparky => const $AssetsImagesSparkyGen();
 }
@@ -49,20 +51,16 @@ class $AssetsImagesAndroidGen {
       const $AssetsImagesAndroidSpaceshipGen();
 }
 
-class $AssetsImagesBackboardGen {
-  const $AssetsImagesBackboardGen();
+class $AssetsImagesBackboxGen {
+  const $AssetsImagesBackboxGen();
 
-  /// File path: assets/images/backboard/backboard_game_over.png
-  AssetGenImage get backboardGameOver =>
-      const AssetGenImage('assets/images/backboard/backboard_game_over.png');
+  /// File path: assets/images/backbox/display-divider.png
+  AssetGenImage get displayDivider =>
+      const AssetGenImage('assets/images/backbox/display-divider.png');
 
-  /// File path: assets/images/backboard/backboard_scores.png
-  AssetGenImage get backboardScores =>
-      const AssetGenImage('assets/images/backboard/backboard_scores.png');
-
-  /// File path: assets/images/backboard/display.png
-  AssetGenImage get display =>
-      const AssetGenImage('assets/images/backboard/display.png');
+  /// File path: assets/images/backbox/marquee.png
+  AssetGenImage get marquee =>
+      const AssetGenImage('assets/images/backbox/marquee.png');
 }
 
 class $AssetsImagesBallGen {
@@ -133,6 +131,22 @@ class $AssetsImagesDinoGen {
       const AssetGenImage('assets/images/dino/top-wall.png');
 }
 
+class $AssetsImagesFlapperGen {
+  const $AssetsImagesFlapperGen();
+
+  /// File path: assets/images/flapper/back-support.png
+  AssetGenImage get backSupport =>
+      const AssetGenImage('assets/images/flapper/back-support.png');
+
+  /// File path: assets/images/flapper/flap.png
+  AssetGenImage get flap =>
+      const AssetGenImage('assets/images/flapper/flap.png');
+
+  /// File path: assets/images/flapper/front-support.png
+  AssetGenImage get frontSupport =>
+      const AssetGenImage('assets/images/flapper/front-support.png');
+}
+
 class $AssetsImagesFlipperGen {
   const $AssetsImagesFlipperGen();
 
@@ -259,6 +273,26 @@ class $AssetsImagesSignpostGen {
       const AssetGenImage('assets/images/signpost/inactive.png');
 }
 
+class $AssetsImagesSkillShotGen {
+  const $AssetsImagesSkillShotGen();
+
+  /// File path: assets/images/skill_shot/decal.png
+  AssetGenImage get decal =>
+      const AssetGenImage('assets/images/skill_shot/decal.png');
+
+  /// File path: assets/images/skill_shot/dimmed.png
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/skill_shot/dimmed.png');
+
+  /// File path: assets/images/skill_shot/lit.png
+  AssetGenImage get lit =>
+      const AssetGenImage('assets/images/skill_shot/lit.png');
+
+  /// File path: assets/images/skill_shot/pin.png
+  AssetGenImage get pin =>
+      const AssetGenImage('assets/images/skill_shot/pin.png');
+}
+
 class $AssetsImagesSlingshotGen {
   const $AssetsImagesSlingshotGen();
 

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

@@ -78,11 +78,11 @@ class AndroidBumper extends BodyComponent with InitialPosition, ZIndex {
   AndroidBumper.cow({
     Iterable<Component>? children,
   }) : this._(
-          majorRadius: 3.4,
-          minorRadius: 2.9,
+          majorRadius: 3.45,
+          minorRadius: 3.11,
           litAssetPath: Assets.images.android.bumper.cow.lit.keyName,
           dimmedAssetPath: Assets.images.android.bumper.cow.dimmed.keyName,
-          spritePosition: Vector2(0, -0.68),
+          spritePosition: Vector2(0, -0.35),
           bloc: AndroidBumperCubit(),
           children: [
             ...?children,

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

@@ -122,7 +122,7 @@ class _SpaceshipSaucerSpriteAnimationComponent extends SpriteAnimationComponent
       SpriteAnimationData.sequenced(
         amount: amountPerRow * amountPerColumn,
         amountPerRow: amountPerRow,
-        stepTime: 1 / 24,
+        stepTime: 1 / 12,
         textureSize: textureSize,
       ),
     );

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

@@ -1,79 +0,0 @@
-import 'dart:async';
-
-import 'package:flame/components.dart';
-import 'package:flutter/material.dart';
-import 'package:pinball_components/pinball_components.dart';
-
-export 'backboard_game_over.dart';
-export 'backboard_letter_prompt.dart';
-export 'backboard_waiting.dart';
-
-/// {@template backboard}
-/// The [Backboard] of the pinball machine.
-/// {@endtemplate}
-class Backboard extends PositionComponent with HasGameRef {
-  /// {@macro backboard}
-  Backboard({
-    required Vector2 position,
-  }) : super(
-          position: position,
-          anchor: Anchor.bottomCenter,
-        );
-
-  /// {@macro backboard}
-  ///
-  /// Returns a [Backboard] initialized in the waiting mode
-  factory Backboard.waiting({
-    required Vector2 position,
-  }) {
-    return Backboard(position: position)..waitingMode();
-  }
-
-  /// {@macro backboard}
-  ///
-  /// Returns a [Backboard] initialized in the game over mode
-  factory Backboard.gameOver({
-    required Vector2 position,
-    required String characterIconPath,
-    required int score,
-    required BackboardOnSubmit onSubmit,
-  }) {
-    return Backboard(position: position)
-      ..gameOverMode(
-        score: score,
-        characterIconPath: characterIconPath,
-        onSubmit: onSubmit,
-      );
-  }
-
-  /// [TextPaint] used on the [Backboard]
-  static final textPaint = TextPaint(
-    style: const TextStyle(
-      fontSize: 6,
-      color: Colors.white,
-      fontFamily: PinballFonts.pixeloidSans,
-    ),
-  );
-
-  /// Puts the Backboard in waiting mode, where the scoreboard is shown.
-  Future<void> waitingMode() async {
-    children.removeWhere((_) => true);
-    await add(BackboardWaiting());
-  }
-
-  /// Puts the Backboard in game over mode, where the score input is shown.
-  Future<void> gameOverMode({
-    required int score,
-    required String characterIconPath,
-    BackboardOnSubmit? onSubmit,
-  }) async {
-    children.removeWhere((_) => true);
-    await add(
-      BackboardGameOver(
-        score: score,
-        characterIconPath: characterIconPath,
-        onSubmit: onSubmit,
-      ),
-    );
-  }
-}

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

@@ -1,144 +0,0 @@
-import 'dart:async';
-import 'dart:math';
-
-import 'package:flame/components.dart';
-import 'package:flutter/services.dart';
-import 'package:pinball_components/pinball_components.dart';
-import 'package:pinball_flame/pinball_flame.dart';
-
-/// Signature for the callback called when the used has
-/// submettied their initials on the [BackboardGameOver]
-typedef BackboardOnSubmit = void Function(String);
-
-/// {@template backboard_game_over}
-/// [PositionComponent] that handles the user input on the
-/// game over display view.
-/// {@endtemplate}
-class BackboardGameOver extends PositionComponent with HasGameRef {
-  /// {@macro backboard_game_over}
-  BackboardGameOver({
-    required int score,
-    required String characterIconPath,
-    BackboardOnSubmit? onSubmit,
-  })  : _onSubmit = onSubmit,
-        super(
-          children: [
-            _BackboardSpriteComponent(),
-            _BackboardDisplaySpriteComponent(),
-            _ScoreTextComponent(score.formatScore()),
-            _CharacterIconSpriteComponent(characterIconPath),
-          ],
-        );
-
-  final BackboardOnSubmit? _onSubmit;
-
-  @override
-  Future<void> onLoad() async {
-    for (var i = 0; i < 3; i++) {
-      await add(
-        BackboardLetterPrompt(
-          position: Vector2(
-            24.3 + (4.5 * i),
-            -45,
-          ),
-          hasFocus: i == 0,
-        ),
-      );
-    }
-
-    await add(
-      KeyboardInputController(
-        keyUp: {
-          LogicalKeyboardKey.arrowLeft: () => _movePrompt(true),
-          LogicalKeyboardKey.arrowRight: () => _movePrompt(false),
-          LogicalKeyboardKey.enter: _submit,
-        },
-      ),
-    );
-  }
-
-  /// Returns the current inputed initials
-  String get initials => children
-      .whereType<BackboardLetterPrompt>()
-      .map((prompt) => prompt.char)
-      .join();
-
-  bool _submit() {
-    _onSubmit?.call(initials);
-    return true;
-  }
-
-  bool _movePrompt(bool left) {
-    final prompts = children.whereType<BackboardLetterPrompt>().toList();
-
-    final current = prompts.firstWhere((prompt) => prompt.hasFocus)
-      ..hasFocus = false;
-    var index = prompts.indexOf(current) + (left ? -1 : 1);
-    index = min(max(0, index), prompts.length - 1);
-
-    prompts[index].hasFocus = true;
-
-    return false;
-  }
-}
-
-class _BackboardSpriteComponent extends SpriteComponent with HasGameRef {
-  _BackboardSpriteComponent() : super(anchor: Anchor.bottomCenter);
-
-  @override
-  Future<void> onLoad() async {
-    await super.onLoad();
-    final sprite = await gameRef.loadSprite(
-      Assets.images.backboard.backboardGameOver.keyName,
-    );
-    this.sprite = sprite;
-    size = sprite.originalSize / 10;
-  }
-}
-
-class _BackboardDisplaySpriteComponent extends SpriteComponent with HasGameRef {
-  _BackboardDisplaySpriteComponent()
-      : super(
-          anchor: Anchor.bottomCenter,
-          position: Vector2(0, -11.5),
-        );
-
-  @override
-  Future<void> onLoad() async {
-    await super.onLoad();
-    final sprite = await gameRef.loadSprite(
-      Assets.images.backboard.display.keyName,
-    );
-    this.sprite = sprite;
-    size = sprite.originalSize / 10;
-  }
-}
-
-class _ScoreTextComponent extends TextComponent {
-  _ScoreTextComponent(String score)
-      : super(
-          text: score,
-          anchor: Anchor.centerLeft,
-          position: Vector2(-34, -45),
-          textRenderer: Backboard.textPaint,
-        );
-}
-
-class _CharacterIconSpriteComponent extends SpriteComponent with HasGameRef {
-  _CharacterIconSpriteComponent(String characterIconPath)
-      : _characterIconPath = characterIconPath,
-        super(
-          anchor: Anchor.center,
-          position: Vector2(18.4, -45),
-        );
-
-  final String _characterIconPath;
-
-  @override
-  Future<void> onLoad() async {
-    await super.onLoad();
-    final sprite = Sprite(gameRef.images.fromCache(_characterIconPath));
-    this.sprite = sprite;
-    size = sprite.originalSize / 10;
-  }
-}

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

@@ -1,102 +0,0 @@
-import 'dart:async';
-import 'dart:math';
-
-import 'package:flame/components.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:pinball_components/pinball_components.dart';
-import 'package:pinball_flame/pinball_flame.dart';
-
-/// {@template backboard_letter_prompt}
-/// A [PositionComponent] that renders a letter prompt used
-/// on the [BackboardGameOver]
-/// {@endtemplate}
-class BackboardLetterPrompt extends PositionComponent {
-  /// {@macro backboard_letter_prompt}
-  BackboardLetterPrompt({
-    required Vector2 position,
-    bool hasFocus = false,
-  })  : _hasFocus = hasFocus,
-        super(
-          position: position,
-        );
-
-  static const _alphabetCode = 65;
-  static const _alphabetLength = 25;
-  var _charIndex = 0;
-
-  bool _hasFocus;
-
-  late RectangleComponent _underscore;
-  late TextComponent _input;
-  late TimerComponent _underscoreBlinker;
-
-  @override
-  Future<void> onLoad() async {
-    _underscore = RectangleComponent(
-      size: Vector2(3.8, 0.8),
-      anchor: Anchor.center,
-      position: Vector2(-0.3, 4),
-    );
-
-    await add(_underscore);
-
-    _input = TextComponent(
-      text: 'A',
-      textRenderer: Backboard.textPaint,
-      anchor: Anchor.center,
-    );
-    await add(_input);
-
-    _underscoreBlinker = TimerComponent(
-      period: 0.6,
-      repeat: true,
-      autoStart: _hasFocus,
-      onTick: () {
-        _underscore.paint.color = (_underscore.paint.color == Colors.white)
-            ? Colors.transparent
-            : Colors.white;
-      },
-    );
-
-    await add(_underscoreBlinker);
-
-    await add(
-      KeyboardInputController(
-        keyUp: {
-          LogicalKeyboardKey.arrowUp: () => _cycle(true),
-          LogicalKeyboardKey.arrowDown: () => _cycle(false),
-        },
-      ),
-    );
-  }
-
-  /// Returns the current selected character
-  String get char => String.fromCharCode(_alphabetCode + _charIndex);
-
-  bool _cycle(bool up) {
-    if (_hasFocus) {
-      final newCharCode =
-          min(max(_charIndex + (up ? 1 : -1), 0), _alphabetLength);
-      _input.text = String.fromCharCode(_alphabetCode + newCharCode);
-      _charIndex = newCharCode;
-
-      return false;
-    }
-    return true;
-  }
-
-  /// Returns if this prompt has focus on it
-  bool get hasFocus => _hasFocus;
-
-  /// Updates this prompt focus
-  set hasFocus(bool hasFocus) {
-    if (hasFocus) {
-      _underscoreBlinker.timer.resume();
-    } else {
-      _underscoreBlinker.timer.pause();
-    }
-    _underscore.paint.color = Colors.white;
-    _hasFocus = hasFocus;
-  }
-}

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

@@ -1,17 +0,0 @@
-import 'package:flame/components.dart';
-import 'package:pinball_components/pinball_components.dart';
-
-/// [PositionComponent] that shows the leaderboard while the player
-/// has not started the game yet.
-class BackboardWaiting extends SpriteComponent with HasGameRef {
-  @override
-  Future<void> onLoad() async {
-    final sprite = await gameRef.loadSprite(
-      Assets.images.backboard.backboardScores.keyName,
-    );
-
-    this.sprite = sprite;
-    size = sprite.originalSize / 10;
-    anchor = Anchor.bottomCenter;
-  }
-}

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

@@ -1,26 +1,25 @@
 import 'dart:async';
-import 'dart:math' as math;
 
 import 'package:flame/components.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:pinball_components/src/components/ball/behaviors/ball_gravitating_behavior.dart';
-import 'package:pinball_components/src/components/ball/behaviors/ball_scaling_behavior.dart';
 import 'package:pinball_flame/pinball_flame.dart';
+import 'package:pinball_theme/pinball_theme.dart' as theme;
+
+export 'behaviors/behaviors.dart';
 
 /// {@template ball}
 /// A solid, [BodyType.dynamic] sphere that rolls and bounces around.
 /// {@endtemplate}
-class Ball<T extends Forge2DGame> extends BodyComponent<T>
-    with Layered, InitialPosition, ZIndex {
+class Ball extends BodyComponent with Layered, InitialPosition, ZIndex {
   /// {@macro ball}
   Ball({
-    required this.baseColor,
+    String? assetPath,
   }) : super(
           renderBody: false,
           children: [
-            _BallSpriteComponent()..tint(baseColor.withOpacity(0.5)),
+            _BallSpriteComponent(assetPath: assetPath),
             BallScalingBehavior(),
             BallGravitatingBehavior(),
           ],
@@ -37,7 +36,7 @@ class Ball<T extends Forge2DGame> extends BodyComponent<T>
   ///
   /// This can be used for testing [Ball]'s behaviors in isolation.
   @visibleForTesting
-  Ball.test({required this.baseColor})
+  Ball.test()
       : super(
           children: [_BallSpriteComponent()],
         );
@@ -45,23 +44,16 @@ class Ball<T extends Forge2DGame> extends BodyComponent<T>
   /// The size of the [Ball].
   static final Vector2 size = Vector2.all(4.13);
 
-  /// The base [Color] used to tint this [Ball].
-  final Color baseColor;
-
   @override
   Body createBody() {
     final shape = CircleShape()..radius = size.x / 2;
-    final fixtureDef = FixtureDef(
-      shape,
-      density: 1,
-    );
     final bodyDef = BodyDef(
       position: initialPosition,
-      userData: this,
       type: BodyType.dynamic,
+      userData: this,
     );
 
-    return world.createBody(bodyDef)..createFixture(fixtureDef);
+    return world.createBody(bodyDef)..createFixtureFromShape(shape, 1);
   }
 
   /// Immediatly and completly [stop]s the ball.
@@ -82,75 +74,25 @@ class Ball<T extends Forge2DGame> extends BodyComponent<T>
   void resume() {
     body.gravityScale = Vector2(1, 1);
   }
-
-  /// Applies a boost and [_TurboChargeSpriteAnimationComponent] on this [Ball].
-  Future<void> boost(Vector2 impulse) async {
-    body.linearVelocity = impulse;
-    await add(_TurboChargeSpriteAnimationComponent());
-  }
 }
 
 class _BallSpriteComponent extends SpriteComponent with HasGameRef {
-  @override
-  Future<void> onLoad() async {
-    await super.onLoad();
-    final sprite = await gameRef.loadSprite(
-      Assets.images.ball.ball.keyName,
-    );
-    this.sprite = sprite;
-    size = sprite.originalSize / 10;
-    anchor = Anchor.center;
-  }
-}
-
-class _TurboChargeSpriteAnimationComponent extends SpriteAnimationComponent
-    with HasGameRef, ZIndex {
-  _TurboChargeSpriteAnimationComponent()
-      : super(
-          anchor: const Anchor(0.53, 0.72),
-          removeOnFinish: true,
-        ) {
-    zIndex = ZIndexes.turboChargeFlame;
-  }
+  _BallSpriteComponent({
+    this.assetPath,
+  }) : super(
+          anchor: Anchor.center,
+        );
 
-  late final Vector2 _textureSize;
+  final String? assetPath;
 
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-
-    final spriteSheet = await gameRef.images.load(
-      Assets.images.ball.flameEffect.keyName,
-    );
-
-    const amountPerRow = 8;
-    const amountPerColumn = 4;
-    _textureSize = Vector2(
-      spriteSheet.width / amountPerRow,
-      spriteSheet.height / amountPerColumn,
+    final sprite = Sprite(
+      gameRef.images
+          .fromCache(assetPath ?? theme.Assets.images.dash.ball.keyName),
     );
-
-    animation = SpriteAnimation.fromFrameData(
-      spriteSheet,
-      SpriteAnimationData.sequenced(
-        amount: amountPerRow * amountPerColumn,
-        amountPerRow: amountPerRow,
-        stepTime: 1 / 24,
-        textureSize: _textureSize,
-        loop: false,
-      ),
-    );
-  }
-
-  @override
-  void update(double dt) {
-    super.update(dt);
-
-    if (parent != null) {
-      final body = (parent! as BodyComponent).body;
-      final direction = -body.linearVelocity.normalized();
-      angle = math.atan2(direction.x, -direction.y);
-      size = (_textureSize / 45) * body.fixtures.first.shape.radius;
-    }
+    this.sprite = sprite;
+    size = sprite.originalSize / 12.5;
   }
 }

packages/pinball_components/lib/src/components/ball/behaviors/ball_turbo_charging_behavior.dart

@@ -0,0 +1,81 @@
+import 'dart:math' as math;
+
+import 'package:flame/components.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+/// {@template ball_turbo_charging_behavior}
+/// Puts the [Ball] in flames and [_impulse]s it.
+/// {@endtemplate}
+class BallTurboChargingBehavior extends TimerComponent with ParentIsA<Ball> {
+  /// {@macro ball_turbo_charging_behavior}
+  BallTurboChargingBehavior({
+    required Vector2 impulse,
+  })  : _impulse = impulse,
+        super(period: 5, removeOnFinish: true);
+
+  final Vector2 _impulse;
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    parent.body.linearVelocity = _impulse;
+    await parent.add(_TurboChargeSpriteAnimationComponent());
+  }
+
+  @override
+  void onRemove() {
+    parent
+        .firstChild<_TurboChargeSpriteAnimationComponent>()!
+        .removeFromParent();
+    super.onRemove();
+  }
+}
+
+class _TurboChargeSpriteAnimationComponent extends SpriteAnimationComponent
+    with HasGameRef, ZIndex, ParentIsA<Ball> {
+  _TurboChargeSpriteAnimationComponent()
+      : super(
+          anchor: const Anchor(0.53, 0.72),
+        ) {
+    zIndex = ZIndexes.turboChargeFlame;
+  }
+
+  late final Vector2 _textureSize;
+
+  @override
+  void update(double dt) {
+    super.update(dt);
+
+    final direction = -parent.body.linearVelocity.normalized();
+    angle = math.atan2(direction.x, -direction.y);
+    size = (_textureSize / 45) * parent.body.fixtures.first.shape.radius;
+  }
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    final spriteSheet = await gameRef.images.load(
+      Assets.images.ball.flameEffect.keyName,
+    );
+
+    const amountPerRow = 8;
+    const amountPerColumn = 4;
+    _textureSize = Vector2(
+      spriteSheet.width / amountPerRow,
+      spriteSheet.height / amountPerColumn,
+    );
+
+    animation = SpriteAnimation.fromFrameData(
+      spriteSheet,
+      SpriteAnimationData.sequenced(
+        amount: amountPerRow * amountPerColumn,
+        amountPerRow: amountPerRow,
+        stepTime: 1 / 24,
+        textureSize: _textureSize,
+      ),
+    );
+  }
+}

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

@@ -1,2 +1,3 @@
 export 'ball_gravitating_behavior.dart';
 export 'ball_scaling_behavior.dart';
+export 'ball_turbo_charging_behavior.dart';

packages/pinball_components/lib/src/components/chrome_dino/cubit/chrome_dino_cubit.dart

@@ -7,7 +7,7 @@ import 'package:pinball_components/pinball_components.dart';
 part 'chrome_dino_state.dart';
 
 class ChromeDinoCubit extends Cubit<ChromeDinoState> {
-  ChromeDinoCubit() : super(const ChromeDinoState.inital());
+  ChromeDinoCubit() : super(const ChromeDinoState.initial());
 
   void onOpenMouth() {
     emit(state.copyWith(isMouthOpen: true));

packages/pinball_components/lib/src/components/chrome_dino/cubit/chrome_dino_state.dart

@@ -14,7 +14,7 @@ class ChromeDinoState extends Equatable {
     this.ball,
   });
 
-  const ChromeDinoState.inital()
+  const ChromeDinoState.initial()
       : this(
           status: ChromeDinoStatus.idle,
           isMouthOpen: false,

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

@@ -1,7 +1,6 @@
 export 'android_animatronic.dart';
 export 'android_bumper/android_bumper.dart';
 export 'android_spaceship/android_spaceship.dart';
-export 'backboard/backboard.dart';
 export 'ball/ball.dart';
 export 'baseboard.dart';
 export 'board_background_sprite_component.dart';
@@ -14,6 +13,7 @@ export 'dash_animatronic.dart';
 export 'dash_nest_bumper/dash_nest_bumper.dart';
 export 'dino_walls.dart';
 export 'fire_effect.dart';
+export 'flapper/flapper.dart';
 export 'flipper.dart';
 export 'google_letter/google_letter.dart';
 export 'initial_position.dart';
@@ -21,7 +21,7 @@ export 'joint_anchor.dart';
 export 'kicker/kicker.dart';
 export 'launch_ramp.dart';
 export 'layer.dart';
-export 'layer_sensor.dart';
+export 'layer_sensor/layer_sensor.dart';
 export 'multiball/multiball.dart';
 export 'multiplier/multiplier.dart';
 export 'plunger.dart';
@@ -29,9 +29,10 @@ export 'rocket.dart';
 export 'score_component.dart';
 export 'shapes/shapes.dart';
 export 'signpost/signpost.dart';
+export 'skill_shot/skill_shot.dart';
 export 'slingshot.dart';
 export 'spaceship_rail.dart';
-export 'spaceship_ramp.dart';
+export 'spaceship_ramp/spaceship_ramp.dart';
 export 'sparky_animatronic.dart';
 export 'sparky_bumper/sparky_bumper.dart';
 export 'sparky_computer.dart';