Merge branch 'main' into refactor/input-letter-logic

firebase.json

@@ -1,11 +1,33 @@
 {
+  "firestore": {
+    "rules": "firestore.rules"
+  },
   "hosting": {
     "public": "build/web",
     "site": "ashehwkdkdjruejdnensjsjdne",
-    "ignore": [
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
-      "firebase.json",
+    "headers": [
-      "**/.*",
+      {
-      "**/node_modules/**"
+        "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(
+      child: MultiBlocProvider(
-        create: (context) => CharacterThemeCubit(),
+        providers: [
+          BlocProvider(create: (_) => CharacterThemeCubit()),
+          BlocProvider(create: (_) => StartGameBloc()),
+        ],
         child: MaterialApp(
           title: 'I/O Pinball',
           theme: PinballTheme.standard,

lib/game/behaviors/bumper_noisy_behavior.dart

@@ -3,12 +3,13 @@
 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.audio.bumper();
+    gameRef.player.play(PinballAudio.bumper);
   }
 }

lib/game/behaviors/scoring_behavior.dart

@@ -40,13 +40,14 @@ class ScoringBehavior extends Component with HasGameRef<PinballGame> {
   @override
   Future<void> onLoad() async {
     gameRef.read<GameBloc>().add(Scored(points: _points.value));
-    await gameRef.firstChild<ZCanvasComponent>()!.add(
+    final canvas = gameRef.descendants().whereType<ZCanvasComponent>().single;
-          ScoreComponent(
+    await canvas.add(
-            points: _points,
+      ScoreComponent(
-            position: _position,
+        points: _points,
-            effectController: _effectController,
+        position: _position,
-          ),
+        effectController: _effectController,
-        );
+      ),
+    );
   }
 }
 

lib/game/bloc/game_bloc.dart

@@ -14,6 +14,16 @@ 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) {
@@ -26,12 +36,13 @@ class GameBloc extends Bloc<GameEvent, GameState> {
         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(roundScore: state.roundScore + event.points),
       );
@@ -39,7 +50,7 @@ class GameBloc extends Bloc<GameEvent, GameState> {
   }
 
   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,6 +20,17 @@ 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}
@@ -31,13 +42,15 @@ class GameState extends Equatable {
     required this.multiplier,
     required this.rounds,
     required this.bonusHistory,
+    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()
-      : totalScore = 0,
+      : status = GameStatus.waiting,
+        totalScore = 0,
         roundScore = 0,
         multiplier = 1,
         rounds = 3,
@@ -65,8 +78,7 @@ class GameState extends Equatable {
   /// PinballGame.
   final List<GameBonus> bonusHistory;
 
-  /// Determines when the game is over.
+  final GameStatus status;
-  bool get isGameOver => rounds == 0;
 
   /// The score displayed at the game.
   int get displayScore => roundScore + totalScore;
@@ -78,6 +90,7 @@ class GameState extends Equatable {
     int? balls,
     int? rounds,
     List<GameBonus>? bonusHistory,
+    GameStatus? status,
   }) {
     assert(
       totalScore == null || totalScore >= this.totalScore,
@@ -90,6 +103,7 @@ class GameState extends Equatable {
       multiplier: multiplier ?? this.multiplier,
       rounds: rounds ?? this.rounds,
       bonusHistory: bonusHistory ?? this.bonusHistory,
+      status: status ?? this.status,
     );
   }
 
@@ -100,5 +114,6 @@ class GameState extends Equatable {
         multiplier,
         rounds,
         bonusHistory,
+        status,
       ];
 }

lib/game/components/android_acres/android_acres.dart

@@ -15,7 +15,16 @@ 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(

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/components.dart

@@ -8,7 +8,7 @@ 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';

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;
   }

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

@@ -36,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.3, -14.2),
-        Vector2(25, -7.7),
+        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/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.initialsInput(
+              score: state.displayScore,
+              characterIconPath: gameRef.characterTheme.leaderboardIcon.keyName,
+            );
+        gameRef.firstChild<CameraController>()!.focusOnGameOverBackbox();
+        break;
+    }
+  }
+}

lib/game/components/game_flow_controller.dart

@@ -1,45 +0,0 @@
-import 'package:flame/components.dart';
-import 'package:flame_bloc/flame_bloc.dart';
-import 'package:pinball/game/game.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) {
-      _initialsInput();
-    } else {
-      start();
-    }
-  }
-
-  /// Puts the game in the initials input state.
-  void _initialsInput() {
-    // TODO(erickzanardo): implement score submission and "navigate" to the
-    // next page
-    component.descendants().whereType<Backbox>().first.initialsInput(
-          score: state?.displayScore ?? 0,
-          characterIconPath: component.characterTheme.leaderboardIcon.keyName,
-        );
-    component.firstChild<CameraController>()!.focusOnGameOverBackbox();
-  }
-
-  /// Puts the game in the playing state.
-  void start() {
-    component.audio.backgroundMusic();
-    component.firstChild<CameraController>()?.focusOnGame();
-    component.overlays.remove(PinballGame.playButtonOverlay);
-  }
-}

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

@@ -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/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),
@@ -132,10 +131,18 @@ extension PinballGameAssetsX on PinballGame {
       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

@@ -7,6 +7,7 @@ import 'package:flame/input.dart';
 import 'package:flame_bloc/flame_bloc.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.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';
@@ -22,8 +23,8 @@ class PinballGame extends PinballForge2DGame
         MultiTouchTapDetector {
   PinballGame({
     required this.characterTheme,
-    required this.audio,
     required this.l10n,
+    required this.player,
   }) : super(gravity: Vector2(0, 30)) {
     images.prefix = '';
     controller = _GameBallsController(this);
@@ -37,15 +38,12 @@ class PinballGame extends PinballForge2DGame
 
   final CharacterTheme characterTheme;
 
-  final PinballAudio audio;
+  final PinballPlayer player;
 
   final AppLocalizations l10n;
 
-  late final GameFlowController gameFlowController;
-
   @override
   Future<void> onLoad() async {
-    await add(gameFlowController = GameFlowController(this));
     await add(CameraController(this));
 
     final machine = [
@@ -57,6 +55,11 @@ class PinballGame extends PinballForge2DGame
       GoogleWord(position: Vector2(-4.25, 1.8)),
       Multipliers(),
       Multiballs(),
+      SkillShot(
+        children: [
+          ScoringContactBehavior(points: Points.oneMillion),
+        ],
+      ),
     ];
     final characterAreas = [
       AndroidAcres(),
@@ -65,17 +68,29 @@ class PinballGame extends PinballForge2DGame
       SparkyScorch(),
     ];
 
-    await add(
+    await addAll(
-      ZCanvasComponent(
+      [
-        children: [
+        GameBlocStatusListener(),
-          ...machine,
+        CanvasComponent(
-          ...decals,
+          onSpritePainted: (paint) {
-          ...characterAreas,
+            if (paint.filterQuality != FilterQuality.medium) {
-          Drain(),
+              paint.filterQuality = FilterQuality.medium;
-          BottomGroup(),
+            }
-          Launcher(),
+          },
-        ],
+          children: [
-      ),
+            ZCanvasComponent(
+              children: [
+                ...machine,
+                ...decals,
+                ...characterAreas,
+                Drain(),
+                BottomGroup(),
+                Launcher(),
+              ],
+            ),
+          ],
+        ),
+      ],
     );
 
     await super.onLoad();
@@ -136,9 +151,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 && newState.status.isPlaying;
-
-    return noBallsLeft && notGameOver;
   }
 
   @override
@@ -163,7 +176,7 @@ 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);
     });
   }
 }
@@ -171,11 +184,11 @@ class _GameBallsController extends ComponentController<PinballGame>
 class DebugPinballGame extends PinballGame with FPSCounter, PanDetector {
   DebugPinballGame({
     required CharacterTheme characterTheme,
-    required PinballAudio audio,
     required AppLocalizations l10n,
+    required PinballPlayer player,
   }) : super(
           characterTheme: characterTheme,
-          audio: audio,
+          player: player,
           l10n: l10n,
         ) {
     controller = _GameBallsController(this);
@@ -197,9 +210,10 @@ class DebugPinballGame extends PinballGame with FPSCounter, PanDetector {
     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);
     }
   }
 
@@ -224,10 +238,11 @@ class DebugPinballGame extends PinballGame with FPSCounter, PanDetector {
   }
 
   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));
-    firstChild<ZCanvasComponent>()?.add(ball);
+    canvas.add(ball);
   }
 }
 

lib/game/view/pinball_game_page.dart

@@ -36,31 +36,30 @@ class PinballGamePage extends StatelessWidget {
   Widget build(BuildContext context) {
     final characterTheme =
         context.read<CharacterThemeCubit>().state.characterTheme;
-    final audio = context.read<PinballAudio>();
+    final player = context.read<PinballPlayer>();
-    final pinballAudio = context.read<PinballAudio>();
+    final pinballAudio = context.read<PinballPlayer>();
 
     final game = isDebugMode
         ? DebugPinballGame(
             characterTheme: characterTheme,
-            audio: audio,
+            player: player,
             l10n: context.l10n,
           )
         : PinballGame(
             characterTheme: characterTheme,
-            audio: audio,
+            player: player,
             l10n: context.l10n,
           );
 
     final loadables = [
       ...game.preLoadAssets(),
-      pinballAudio.load(),
+      ...pinballAudio.load(),
       ...BonusAnimation.loadAssets(),
       ...SelectedCharacter.loadAssets(),
     ];
 
     return MultiBlocProvider(
       providers: [
-        BlocProvider(create: (_) => StartGameBloc(game: game)),
         BlocProvider(create: (_) => GameBloc()),
         BlocProvider(create: (_) => AssetsManagerCubit(loadables)..load()),
       ],
@@ -105,36 +104,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(
+    return StartGameListener(
-      children: [
+      child: Stack(
-        Positioned.fill(
+        children: [
-          child: GameWidget<PinballGame>(
+          Positioned.fill(
-            game: game,
+            child: GameWidget<PinballGame>(
-            initialActiveOverlays: const [PinballGame.playButtonOverlay],
+              game: game,
-            overlayBuilderMap: {
+              initialActiveOverlays: const [PinballGame.playButtonOverlay],
-              PinballGame.playButtonOverlay: (context, game) {
+              overlayBuilderMap: {
-                return Positioned(
+                PinballGame.playButtonOverlay: (context, game) {
-                  bottom: 20,
+                  return const Positioned(
-                  right: 0,
+                    bottom: 20,
-                  left: 0,
+                    right: 0,
-                  child: PlayButtonOverlay(game: game),
+                    left: 0,
-                );
+                    child: PlayButtonOverlay(),
+                  );
+                },
               },
-            },
+            ),
           ),
-        ),
+          Positioned(
-        // TODO(arturplaczek): add Visibility to GameHud based on StartGameBloc
+            top: 0,
-        // status
+            left: clampedMargin,
-        Positioned(
+            child: Visibility(
-          top: 16,
+              visible: isPlaying,
-          left: leftMargin,
+              child: const GameHud(),
-          child: const GameHud(),
+            ),
-        ),
+          ),
-      ],
+        ],
+      ),
     );
   }
 }

lib/game/view/widgets/game_hud.dart

@@ -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,
+        height: height,
-        width: _width,
+        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({
+  const PlayButtonOverlay({Key? key}) : super(key: key);
-    Key? key,
-    required PinballGame game,
-  })  : _game = game,
-        super(key: key);
-
-  final PinballGame _game;
 
   @override
   Widget build(BuildContext context) {
@@ -23,9 +17,8 @@ class PlayButtonOverlay extends StatelessWidget {
 
     return PinballButton(
       text: l10n.play,
-      onTap: () async {
+      onTap: () {
-        _game.gameFlowController.start();
+        context.read<StartGameBloc>().add(const PlayTapped());
-        await showCharacterSelectionDialog(context);
       },
     );
   }

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,
@@ -71,9 +72,11 @@ class _ScoreText extends StatelessWidget {
   Widget build(BuildContext context) {
     final score = context.select((GameBloc bloc) => bloc.state.displayScore);
 
-    return Text(
+    return FittedBox(
-      score.formatScore(),
+      child: Text(
-      style: Theme.of(context).textTheme.headline1,
+        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,
+    return WillPopScope(
-      subtitle: l10n.tipsForFlips,
+      onWillPop: () {
-      child: isMobile ? const _MobileBody() : const _DesktopBody(),
+        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(
+    return Padding(
-      child: Padding(
+      padding: EdgeInsets.symmetric(
-        padding: EdgeInsets.symmetric(
+        horizontal: paddingWidth,
-          horizontal: paddingWidth,
+      ),
-        ),
+      child: Column(
-        child: Column(
+        children: [
-          children: [
+          const _MobileLaunchControls(),
-            const _MobileLaunchControls(),
+          SizedBox(height: paddingHeight),
-            SizedBox(height: paddingHeight),
+          const _MobileFlipperControls(),
-            const _MobileFlipperControls(),
+        ],
-          ],
-        ),
       ),
     );
   }
@@ -191,13 +192,15 @@ class _DesktopBody extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListView(
+    return Padding(
-      children: const [
+      padding: const EdgeInsets.all(16),
-        SizedBox(height: 16),
+      child: Column(
-        _DesktopLaunchControls(),
+        children: const [
-        SizedBox(height: 16),
+          _DesktopLaunchControls(),
-        _DesktopFlipperControls(),
+          SizedBox(height: 16),
-      ],
+          _DesktopFlipperControls(),
+        ],
+      ),
     );
   }
 }

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(
+            Expanded(
-              children: [
+              child: Column(
-                _Character(
+                children: [
-                  key: const Key('sparky_character_selection'),
+                  _Character(
-                  character: const SparkyTheme(),
+                    key: const Key('sparky_character_selection'),
-                  isSelected: state.isSparkySelected,
+                    character: const SparkyTheme(),
-                ),
+                    isSelected: state.isSparkySelected,
-                const SizedBox(height: 6),
+                  ),
-                _Character(
+                  const SizedBox(height: 6),
-                  key: const Key('android_character_selection'),
+                  _Character(
-                  character: const AndroidTheme(),
+                    key: const Key('android_character_selection'),
-                  isSelected: state.isAndroidSelected,
+                    character: const AndroidTheme(),
-                ),
+                    isSelected: state.isAndroidSelected,
-              ],
+                  ),
+                ],
+              ),
             ),
             const SizedBox(width: 6),
-            Column(
+            Expanded(
-              children: [
+              child: Column(
-                _Character(
+                children: [
-                  key: const Key('dash_character_selection'),
+                  _Character(
-                  character: const DashTheme(),
+                    key: const Key('dash_character_selection'),
-                  isSelected: state.isDashSelected,
+                    character: const DashTheme(),
-                ),
+                    isSelected: state.isDashSelected,
-                const SizedBox(height: 6),
+                  ),
-                _Character(
+                  const SizedBox(height: 6),
-                  key: const Key('dino_character_selection'),
+                  _Character(
-                  character: const DinoTheme(),
+                    key: const Key('dino_character_selection'),
-                  isSelected: state.isDinoSelected,
+                    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({
+  StartGameBloc() : super(const StartGameState.initial()) {
-    required PinballGame game,
-  })  : _game = game,
-        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/src/pinball_audio.dart

@@ -3,10 +3,25 @@ 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
+/// Sounds available for play
-/// of an [AudioPool]
+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,
@@ -31,12 +46,97 @@ 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 {
+class PinballPlayer {
-  /// {@macro pinball_audio}
+  /// {@macro pinball_player}
-  PinballAudio({
+  PinballPlayer({
     CreateAudioPool? createAudioPool,
     PlaySingleAudio? playSingleAudio,
     LoopSingleAudio? loopSingleAudio,
@@ -52,7 +152,29 @@ class PinballAudio {
             ((AudioCache a) {
               a.prefix = '';
             }),
-        _seed = seed ?? Random();
+        _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;
 
@@ -66,54 +188,24 @@ class PinballAudio {
 
   final Random _seed;
 
-  late AudioPool _bumperAPool;
+  /// Registered audios on the Player
-
+  @visibleForTesting
-  late AudioPool _bumperBPool;
+  // 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);
 
-    _bumperAPool = await _createAudioPool(
+    return audios.values.map((a) => a.load()).toList();
-      _prefixFile(Assets.sfx.bumperA),
-      maxPlayers: 4,
-      prefix: '',
-    );
-
-    _bumperBPool = await _createAudioPool(
-      _prefixFile(Assets.sfx.bumperB),
-      maxPlayers: 4,
-      prefix: '',
-    );
-
-    await Future.wait([
-      _preCacheSingleAudio(_prefixFile(Assets.sfx.google)),
-      _preCacheSingleAudio(_prefixFile(Assets.sfx.ioPinballVoiceOver)),
-      _preCacheSingleAudio(_prefixFile(Assets.music.background)),
-    ]);
-  }
-
-  /// Plays a random bumper sfx.
-  void bumper() {
-    (_seed.nextBool() ? _bumperAPool : _bumperBPool).start(volume: 0.6);
-  }
-
-  /// Plays the google word bonus
-  void googleBonus() {
-    _playSingleAudio(_prefixFile(Assets.sfx.google));
   }
 
-  /// Plays the I/O Pinball voice over audio.
+  /// Plays the received auido
-  void ioPinballVoiceOver() {
+  void play(PinballAudio audio) {
-    _playSingleAudio(_prefixFile(Assets.sfx.ioPinballVoiceOver));
+    assert(
-  }
+      audios.containsKey(audio),
-
+      'Tried to play unregistered audio $audio',
-  /// Plays the background music
+    );
-  void backgroundMusic() {
+    audios[audio]?.play();
-    _loopSingleAudio(_prefixFile(Assets.music.background));
-  }
-
-  String _prefixFile(String file) {
-    return 'packages/pinball_audio/$file';
   }
 }

packages/pinball_audio/test/src/pinball_audio_test.dart

@@ -51,7 +51,7 @@ void main() {
     late _MockLoopSingleAudio loopSingleAudio;
     late _PreCacheSingleAudio preCacheSingleAudio;
     late Random seed;
-    late PinballAudio audio;
+    late PinballPlayer player;
 
     setUpAll(() {
       registerFallbackValue(_MockAudioCache());
@@ -81,7 +81,7 @@ void main() {
 
       seed = _MockRandom();
 
-      audio = PinballAudio(
+      player = PinballPlayer(
         configureAudioCache: configureAudioCache.onCall,
         createAudioPool: createAudioPool.onCall,
         playSingleAudio: playSingleAudio.onCall,
@@ -92,12 +92,12 @@ void main() {
     });
 
     test('can be instantiated', () {
-      expect(PinballAudio(), isNotNull);
+      expect(PinballPlayer(), isNotNull);
     });
 
     group('load', () {
       test('creates the bumpers pools', () async {
-        await audio.load();
+        await Future.wait(player.load());
 
         verify(
           () => createAudioPool.onCall(
@@ -117,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
@@ -184,8 +184,8 @@ void main() {
       group('when seed is true', () {
         test('plays the bumper A sound pool', () async {
           when(seed.nextBool).thenReturn(true);
-          await audio.load();
+          await Future.wait(player.load());
-          audio.bumper();
+          player.play(PinballAudio.bumper);
 
           verify(() => bumperAPool.start(volume: 0.6)).called(1);
         });
@@ -194,8 +194,8 @@ void main() {
       group('when seed is false', () {
         test('plays the bumper B sound pool', () async {
           when(seed.nextBool).thenReturn(false);
-          await audio.load();
+          await Future.wait(player.load());
-          audio.bumper();
+          player.play(PinballAudio.bumper);
 
           verify(() => bumperBPool.start(volume: 0.6)).called(1);
         });
@@ -204,8 +204,8 @@ void main() {
 
     group('googleBonus', () {
       test('plays the correct file', () async {
-        await audio.load();
+        await Future.wait(player.load());
-        audio.googleBonus();
+        player.play(PinballAudio.google);
 
         verify(
           () => playSingleAudio
@@ -216,8 +216,8 @@ void main() {
 
     group('ioPinballVoiceOver', () {
       test('plays the correct file', () async {
-        await audio.load();
+        await Future.wait(player.load());
-        audio.ioPinballVoiceOver();
+        player.play(PinballAudio.ioPinballVoiceOver);
 
         verify(
           () => playSingleAudio.onCall(
@@ -229,8 +229,8 @@ void main() {
 
     group('backgroundMusic', () {
       test('plays the correct file', () async {
-        await audio.load();
+        await Future.wait(player.load());
-        audio.backgroundMusic();
+        player.play(PinballAudio.backgroundMusic);
 
         verify(
           () => loopSingleAudio
@@ -238,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

@@ -35,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();
 }
@@ -272,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_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/ball/ball.dart

@@ -2,9 +2,10 @@ import 'dart:async';
 
 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_flame/pinball_flame.dart';
+import 'package:pinball_theme/pinball_theme.dart' as theme;
 
 export 'behaviors/behaviors.dart';
 
@@ -14,11 +15,11 @@ export 'behaviors/behaviors.dart';
 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(),
           ],
@@ -35,7 +36,7 @@ class Ball extends BodyComponent with Layered, InitialPosition, ZIndex {
   ///
   /// This can be used for testing [Ball]'s behaviors in isolation.
   @visibleForTesting
-  Ball.test({required this.baseColor})
+  Ball.test()
       : super(
           children: [_BallSpriteComponent()],
         );
@@ -43,9 +44,6 @@ class Ball extends BodyComponent with Layered, InitialPosition, ZIndex {
   /// 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;
@@ -79,14 +77,22 @@ class Ball extends BodyComponent with Layered, InitialPosition, ZIndex {
 }
 
 class _BallSpriteComponent extends SpriteComponent with HasGameRef {
+  _BallSpriteComponent({
+    this.assetPath,
+  }) : super(
+          anchor: Anchor.center,
+        );
+
+  final String? assetPath;
+
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-    final sprite = await gameRef.loadSprite(
+    final sprite = Sprite(
-      Assets.images.ball.ball.keyName,
+      gameRef.images
+          .fromCache(assetPath ?? theme.Assets.images.dash.ball.keyName),
     );
     this.sprite = sprite;
-    size = sprite.originalSize / 10;
+    size = sprite.originalSize / 12.5;
-    anchor = Anchor.center;
   }
 }

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

@@ -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';

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

@@ -60,10 +60,10 @@ class DashNestBumper extends BodyComponent with InitialPosition {
     Iterable<Component>? children,
   }) : this._(
           majorRadius: 3,
-          minorRadius: 2.5,
+          minorRadius: 2.2,
           activeAssetPath: Assets.images.dash.bumper.a.active.keyName,
           inactiveAssetPath: Assets.images.dash.bumper.a.inactive.keyName,
-          spritePosition: Vector2(0.35, -1.2),
+          spritePosition: Vector2(0.3, -1.3),
           bloc: DashNestBumperCubit(),
           children: [
             ...?children,
@@ -75,11 +75,11 @@ class DashNestBumper extends BodyComponent with InitialPosition {
   DashNestBumper.b({
     Iterable<Component>? children,
   }) : this._(
-          majorRadius: 3,
+          majorRadius: 3.1,
-          minorRadius: 2.5,
+          minorRadius: 2.2,
           activeAssetPath: Assets.images.dash.bumper.b.active.keyName,
           inactiveAssetPath: Assets.images.dash.bumper.b.inactive.keyName,
-          spritePosition: Vector2(0.35, -1.2),
+          spritePosition: Vector2(0.4, -1.2),
           bloc: DashNestBumperCubit(),
           children: [
             ...?children,

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

@@ -1,90 +0,0 @@
-// ignore_for_file: avoid_renaming_method_parameters
-
-import 'package:flame_forge2d/flame_forge2d.dart';
-import 'package:pinball_components/pinball_components.dart';
-
-/// {@template layer_entrance_orientation}
-/// Determines if a layer entrance is oriented [up] or [down] on the board.
-/// {@endtemplate}
-enum LayerEntranceOrientation {
-  /// Facing up on the Board.
-  up,
-
-  /// Facing down on the Board.
-  down,
-}
-
-/// {@template layer_sensor}
-/// [BodyComponent] located at the entrance and exit of a [Layer].
-///
-/// By default the base [layer] is set to [Layer.board] and the
-/// [_outsideZIndex] is set to [ZIndexes.ballOnBoard].
-/// {@endtemplate}
-abstract class LayerSensor extends BodyComponent
-    with InitialPosition, Layered, ContactCallbacks {
-  /// {@macro layer_sensor}
-  LayerSensor({
-    required Layer insideLayer,
-    Layer? outsideLayer,
-    required int insideZIndex,
-    int? outsideZIndex,
-    required this.orientation,
-  })  : _insideLayer = insideLayer,
-        _outsideLayer = outsideLayer ?? Layer.board,
-        _insideZIndex = insideZIndex,
-        _outsideZIndex = outsideZIndex ?? ZIndexes.ballOnBoard,
-        super(renderBody: false) {
-    layer = Layer.opening;
-  }
-
-  final Layer _insideLayer;
-  final Layer _outsideLayer;
-  final int _insideZIndex;
-  final int _outsideZIndex;
-
-  /// The [Shape] of the [LayerSensor].
-  Shape get shape;
-
-  /// {@macro layer_entrance_orientation}
-  // TODO(ruimiguel): Try to remove the need of [LayerEntranceOrientation] for
-  // collision calculations.
-  final LayerEntranceOrientation orientation;
-
-  @override
-  Body createBody() {
-    final fixtureDef = FixtureDef(
-      shape,
-      isSensor: true,
-    );
-    final bodyDef = BodyDef(
-      position: initialPosition,
-      userData: this,
-    );
-
-    return world.createBody(bodyDef)..createFixture(fixtureDef);
-  }
-
-  @override
-  void beginContact(Object other, Contact contact) {
-    super.beginContact(other, contact);
-    if (other is! Ball) return;
-
-    if (other.layer != _insideLayer) {
-      final isBallEnteringOpening =
-          (orientation == LayerEntranceOrientation.down &&
-                  other.body.linearVelocity.y < 0) ||
-              (orientation == LayerEntranceOrientation.up &&
-                  other.body.linearVelocity.y > 0);
-
-      if (isBallEnteringOpening) {
-        other
-          ..layer = _insideLayer
-          ..zIndex = _insideZIndex;
-      }
-    } else {
-      other
-        ..layer = _outsideLayer
-        ..zIndex = _outsideZIndex;
-    }
-  }
-}

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

@@ -0,0 +1,2 @@
+export 'behaviors.dart';
+export 'layer_filtering_behavior.dart';

packages/pinball_components/lib/src/components/layer_sensor/behaviors/layer_filtering_behavior.dart

@@ -0,0 +1,31 @@
+// ignore_for_file: public_member_api_docs
+
+import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+class LayerFilteringBehavior extends ContactBehavior<LayerSensor> {
+  @override
+  void beginContact(Object other, Contact contact) {
+    super.beginContact(other, contact);
+    if (other is! Ball) return;
+
+    if (other.layer != parent.insideLayer) {
+      final isBallEnteringOpening =
+          (parent.orientation == LayerEntranceOrientation.down &&
+                  other.body.linearVelocity.y < 0) ||
+              (parent.orientation == LayerEntranceOrientation.up &&
+                  other.body.linearVelocity.y > 0);
+
+      if (isBallEnteringOpening) {
+        other
+          ..layer = parent.insideLayer
+          ..zIndex = parent.insideZIndex;
+      }
+    } else {
+      other
+        ..layer = parent.outsideLayer
+        ..zIndex = parent.outsideZIndex;
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+// ignore_for_file: avoid_renaming_method_parameters, public_member_api_docs
+
+import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_components/src/components/layer_sensor/behaviors/layer_filtering_behavior.dart';
+
+/// {@template layer_entrance_orientation}
+/// Determines if a layer entrance is oriented [up] or [down] on the board.
+/// {@endtemplate}
+enum LayerEntranceOrientation {
+  /// Facing up on the Board.
+  up,
+
+  /// Facing down on the Board.
+  down,
+}
+
+/// {@template layer_sensor}
+/// [BodyComponent] located at the entrance and exit of a [Layer].
+///
+/// By default the base [layer] is set to [Layer.board] and the
+/// [outsideZIndex] is set to [ZIndexes.ballOnBoard].
+/// {@endtemplate}
+abstract class LayerSensor extends BodyComponent with InitialPosition, Layered {
+  /// {@macro layer_sensor}
+  LayerSensor({
+    required this.insideLayer,
+    Layer? outsideLayer,
+    required this.insideZIndex,
+    int? outsideZIndex,
+    required this.orientation,
+  })  : outsideLayer = outsideLayer ?? Layer.board,
+        outsideZIndex = outsideZIndex ?? ZIndexes.ballOnBoard,
+        super(
+          renderBody: false,
+          children: [LayerFilteringBehavior()],
+        ) {
+    layer = Layer.opening;
+  }
+
+  final Layer insideLayer;
+
+  final Layer outsideLayer;
+
+  final int insideZIndex;
+
+  final int outsideZIndex;
+
+  /// The [Shape] of the [LayerSensor].
+  Shape get shape;
+
+  /// {@macro layer_entrance_orientation}
+  // TODO(ruimiguel): Try to remove the need of [LayerEntranceOrientation] for
+  // collision calculations.
+  final LayerEntranceOrientation orientation;
+
+  @override
+  Body createBody() {
+    final fixtureDef = FixtureDef(
+      shape,
+      isSensor: true,
+    );
+    final bodyDef = BodyDef(position: initialPosition);
+    return world.createBody(bodyDef)..createFixture(fixtureDef);
+  }
+}

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

@@ -97,7 +97,7 @@ class Plunger extends BodyComponent with InitialPosition, Layered, ZIndex {
   void update(double dt) {
     // Ensure that we only pull or release when the time is greater than zero.
     if (_pullingDownTime > 0) {
-      _pullingDownTime -= dt;
+      _pullingDownTime -= PinballForge2DGame.clampDt(dt);
       if (_pullingDownTime <= 0) {
         release();
       } else {

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

@@ -0,0 +1,2 @@
+export 'skill_shot_ball_contact_behavior.dart';
+export 'skill_shot_blinking_behavior.dart';

packages/pinball_components/lib/src/components/skill_shot/behaviors/skill_shot_ball_contact_behavior.dart

@@ -0,0 +1,16 @@
+// ignore_for_file: public_member_api_docs
+
+import 'package:flame/components.dart';
+import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+class SkillShotBallContactBehavior extends ContactBehavior<SkillShot> {
+  @override
+  void beginContact(Object other, Contact contact) {
+    super.beginContact(other, contact);
+    if (other is! Ball) return;
+    parent.bloc.onBallContacted();
+    parent.firstChild<SpriteAnimationComponent>()?.playing = true;
+  }
+}

packages/pinball_components/lib/src/components/skill_shot/behaviors/skill_shot_blinking_behavior.dart

@@ -0,0 +1,44 @@
+import 'package:flame/components.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+/// {@template skill_shot_blinking_behavior}
+/// Makes a [SkillShot] blink between [SkillShotSpriteState.lit] and
+/// [SkillShotSpriteState.dimmed] for a set amount of blinks.
+/// {@endtemplate}
+class SkillShotBlinkingBehavior extends TimerComponent
+    with ParentIsA<SkillShot> {
+  /// {@macro skill_shot_blinking_behavior}
+  SkillShotBlinkingBehavior() : super(period: 0.15);
+
+  final _maxBlinks = 4;
+  int _blinks = 0;
+
+  void _onNewState(SkillShotState state) {
+    if (state.isBlinking) {
+      timer
+        ..reset()
+        ..start();
+    }
+  }
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    timer.stop();
+    parent.bloc.stream.listen(_onNewState);
+  }
+
+  @override
+  void onTick() {
+    super.onTick();
+    if (_blinks != _maxBlinks * 2) {
+      parent.bloc.switched();
+      _blinks++;
+    } else {
+      _blinks = 0;
+      timer.stop();
+      parent.bloc.onBlinkingFinished();
+    }
+  }
+}

packages/pinball_components/lib/src/components/skill_shot/cubit/skill_shot_cubit.dart

@@ -0,0 +1,39 @@
+// ignore_for_file: public_member_api_docs
+
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+
+part 'skill_shot_state.dart';
+
+class SkillShotCubit extends Cubit<SkillShotState> {
+  SkillShotCubit() : super(const SkillShotState.initial());
+
+  void onBallContacted() {
+    emit(
+      const SkillShotState(
+        spriteState: SkillShotSpriteState.lit,
+        isBlinking: true,
+      ),
+    );
+  }
+
+  void switched() {
+    switch (state.spriteState) {
+      case SkillShotSpriteState.lit:
+        emit(state.copyWith(spriteState: SkillShotSpriteState.dimmed));
+        break;
+      case SkillShotSpriteState.dimmed:
+        emit(state.copyWith(spriteState: SkillShotSpriteState.lit));
+        break;
+    }
+  }
+
+  void onBlinkingFinished() {
+    emit(
+      const SkillShotState(
+        spriteState: SkillShotSpriteState.dimmed,
+        isBlinking: false,
+      ),
+    );
+  }
+}

packages/pinball_components/lib/src/components/skill_shot/cubit/skill_shot_state.dart

@@ -0,0 +1,37 @@
+// ignore_for_file: public_member_api_docs
+
+part of 'skill_shot_cubit.dart';
+
+enum SkillShotSpriteState {
+  lit,
+  dimmed,
+}
+
+class SkillShotState extends Equatable {
+  const SkillShotState({
+    required this.spriteState,
+    required this.isBlinking,
+  });
+
+  const SkillShotState.initial()
+      : this(
+          spriteState: SkillShotSpriteState.dimmed,
+          isBlinking: false,
+        );
+
+  final SkillShotSpriteState spriteState;
+
+  final bool isBlinking;
+
+  SkillShotState copyWith({
+    SkillShotSpriteState? spriteState,
+    bool? isBlinking,
+  }) =>
+      SkillShotState(
+        spriteState: spriteState ?? this.spriteState,
+        isBlinking: isBlinking ?? this.isBlinking,
+      );
+
+  @override
+  List<Object?> get props => [spriteState, isBlinking];
+}

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

@@ -0,0 +1,169 @@
+import 'package:flame/components.dart';
+import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_components/src/components/skill_shot/behaviors/behaviors.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+export 'cubit/skill_shot_cubit.dart';
+
+/// {@template skill_shot}
+/// Rollover awarding extra points.
+/// {@endtemplate}
+class SkillShot extends BodyComponent with ZIndex {
+  /// {@macro skill_shot}
+  SkillShot({Iterable<Component>? children})
+      : this._(
+          children: children,
+          bloc: SkillShotCubit(),
+        );
+
+  SkillShot._({
+    Iterable<Component>? children,
+    required this.bloc,
+  }) : super(
+          renderBody: false,
+          children: [
+            SkillShotBallContactBehavior(),
+            SkillShotBlinkingBehavior(),
+            _RolloverDecalSpriteComponent(),
+            PinSpriteAnimationComponent(),
+            _TextDecalSpriteGroupComponent(state: bloc.state.spriteState),
+            ...?children,
+          ],
+        ) {
+    zIndex = ZIndexes.decal;
+  }
+
+  /// Creates a [SkillShot] without any children.
+  ///
+  /// This can be used for testing [SkillShot]'s behaviors in isolation.
+  // TODO(alestiago): Refactor injecting bloc once the following is merged:
+  // https://github.com/flame-engine/flame/pull/1538
+  @visibleForTesting
+  SkillShot.test({
+    required this.bloc,
+  });
+
+  // TODO(alestiago): Consider refactoring once the following is merged:
+  // https://github.com/flame-engine/flame/pull/1538
+  // ignore: public_member_api_docs
+  final SkillShotCubit bloc;
+
+  @override
+  void onRemove() {
+    bloc.close();
+    super.onRemove();
+  }
+
+  @override
+  Body createBody() {
+    final shape = PolygonShape()
+      ..setAsBox(
+        0.1,
+        3.7,
+        Vector2(-31.9, 9.1),
+        0.11,
+      );
+    final fixtureDef = FixtureDef(shape, isSensor: true);
+    return world.createBody(BodyDef())..createFixture(fixtureDef);
+  }
+}
+
+class _RolloverDecalSpriteComponent extends SpriteComponent with HasGameRef {
+  _RolloverDecalSpriteComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(-31.9, 9.1),
+          angle: 0.11,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    final sprite = Sprite(
+      gameRef.images.fromCache(
+        Assets.images.skillShot.decal.keyName,
+      ),
+    );
+    this.sprite = sprite;
+    size = sprite.originalSize / 20;
+  }
+}
+
+/// {@template pin_sprite_animation_component}
+/// Animation for pin in [SkillShot] rollover.
+/// {@endtemplate}
+@visibleForTesting
+class PinSpriteAnimationComponent extends SpriteAnimationComponent
+    with HasGameRef {
+  /// {@macro pin_sprite_animation_component}
+  PinSpriteAnimationComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(-31.9, 9.1),
+          angle: 0,
+          playing: false,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    final spriteSheet = gameRef.images.fromCache(
+      Assets.images.skillShot.pin.keyName,
+    );
+
+    const amountPerRow = 3;
+    const amountPerColumn = 1;
+    final textureSize = Vector2(
+      spriteSheet.width / amountPerRow,
+      spriteSheet.height / amountPerColumn,
+    );
+    size = textureSize / 10;
+
+    animation = SpriteAnimation.fromFrameData(
+      spriteSheet,
+      SpriteAnimationData.sequenced(
+        amount: amountPerRow * amountPerColumn,
+        amountPerRow: amountPerRow,
+        stepTime: 1 / 24,
+        textureSize: textureSize,
+        loop: false,
+      ),
+    )..onComplete = () {
+        animation?.reset();
+        playing = false;
+      };
+  }
+}
+
+class _TextDecalSpriteGroupComponent
+    extends SpriteGroupComponent<SkillShotSpriteState>
+    with HasGameRef, ParentIsA<SkillShot> {
+  _TextDecalSpriteGroupComponent({
+    required SkillShotSpriteState state,
+  }) : super(
+          anchor: Anchor.center,
+          position: Vector2(-35.55, 3.59),
+          current: state,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    parent.bloc.stream.listen((state) => current = state.spriteState);
+
+    final sprites = {
+      SkillShotSpriteState.lit: Sprite(
+        gameRef.images.fromCache(Assets.images.skillShot.lit.keyName),
+      ),
+      SkillShotSpriteState.dimmed: Sprite(
+        gameRef.images.fromCache(Assets.images.skillShot.dimmed.keyName),
+      ),
+    };
+    this.sprites = sprites;
+    size = sprites[current]!.originalSize / 10;
+  }
+}

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

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

packages/pinball_components/lib/src/components/spaceship_ramp/behavior/ramp_ball_ascending_contact_behavior.dart

@@ -0,0 +1,24 @@
+// ignore_for_file: public_member_api_docs
+
+import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+/// {@template ramp_ball_ascending_contact_behavior}
+/// Detects an ascending [Ball] that enters into the [SpaceshipRamp].
+///
+/// The [Ball] can hit with sensor to recognize if a [Ball] goes into or out of
+/// the [SpaceshipRamp].
+/// {@endtemplate}
+class RampBallAscendingContactBehavior
+    extends ContactBehavior<RampScoringSensor> {
+  @override
+  void beginContact(Object other, Contact contact) {
+    super.beginContact(other, contact);
+    if (other is! Ball) return;
+
+    if (other.body.linearVelocity.y < 0) {
+      parent.parent.bloc.onAscendingBallEntered();
+    }
+  }
+}

packages/pinball_components/lib/src/components/spaceship_ramp/cubit/spaceship_ramp_cubit.dart

@@ -0,0 +1,16 @@
+// ignore_for_file: public_member_api_docs
+
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+
+part 'spaceship_ramp_state.dart';
+
+class SpaceshipRampCubit extends Cubit<SpaceshipRampState> {
+  SpaceshipRampCubit() : super(const SpaceshipRampState.initial());
+
+  void onAscendingBallEntered() {
+    emit(
+      state.copyWith(hits: state.hits + 1),
+    );
+  }
+}

packages/pinball_components/lib/src/components/spaceship_ramp/cubit/spaceship_ramp_state.dart

@@ -0,0 +1,24 @@
+// ignore_for_file: public_member_api_docs
+
+part of 'spaceship_ramp_cubit.dart';
+
+class SpaceshipRampState extends Equatable {
+  const SpaceshipRampState({
+    required this.hits,
+  }) : assert(hits >= 0, "Hits can't be negative");
+
+  const SpaceshipRampState.initial() : this(hits: 0);
+
+  final int hits;
+
+  SpaceshipRampState copyWith({
+    int? hits,
+  }) {
+    return SpaceshipRampState(
+      hits: hits ?? this.hits,
+    );
+  }
+
+  @override
+  List<Object?> get props => [hits];
+}

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

@@ -5,16 +5,35 @@ import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball_components/gen/assets.gen.dart';
 import 'package:pinball_components/pinball_components.dart' hide Assets;
+import 'package:pinball_components/src/components/spaceship_ramp/behavior/behavior.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 
+export 'cubit/spaceship_ramp_cubit.dart';
+
 /// {@template spaceship_ramp}
 /// Ramp leading into the [AndroidSpaceship].
 /// {@endtemplate}
 class SpaceshipRamp extends Component {
   /// {@macro spaceship_ramp}
-  SpaceshipRamp()
+  SpaceshipRamp({
-      : super(
+    Iterable<Component>? children,
+  }) : this._(
+          children: children,
+          bloc: SpaceshipRampCubit(),
+        );
+
+  SpaceshipRamp._({
+    Iterable<Component>? children,
+    required this.bloc,
+  }) : super(
           children: [
+            // TODO(ruimiguel): refactor RampScoringSensor and
+            // _SpaceshipRampOpening to be in only one sensor if possible.
+            RampScoringSensor(
+              children: [
+                RampBallAscendingContactBehavior(),
+              ],
+            )..initialPosition = Vector2(1.7, -20.4),
             _SpaceshipRampOpening(
               outsidePriority: ZIndexes.ballOnBoard,
               rotation: math.pi,
@@ -34,60 +53,30 @@ class SpaceshipRamp extends Component {
             _SpaceshipRampForegroundRailing(),
             _SpaceshipRampBase()..initialPosition = Vector2(1.7, -20),
             _SpaceshipRampBackgroundRailingSpriteComponent(),
-            _SpaceshipRampArrowSpriteComponent(),
+            SpaceshipRampArrowSpriteComponent(
+              current: bloc.state.hits,
+            ),
+            ...?children,
           ],
         );
 
-  /// Forwards the sprite to the next [SpaceshipRampArrowSpriteState].
+  /// Creates a [SpaceshipRamp] without any children.
   ///
-  /// If the current state is the last one it cycles back to the initial state.
+  /// This can be used for testing [SpaceshipRamp]'s behaviors in isolation.
-  void progress() =>
+  @visibleForTesting
-      firstChild<_SpaceshipRampArrowSpriteComponent>()?.progress();
+  SpaceshipRamp.test({
-}
+    required this.bloc,
-
+  }) : super();
-/// Indicates the state of the arrow on the [SpaceshipRamp].
-@visibleForTesting
-enum SpaceshipRampArrowSpriteState {
-  /// Arrow with no dashes lit up.
-  inactive,
-
-  /// Arrow with 1 light lit up.
-  active1,
 
-  /// Arrow with 2 lights lit up.
+  // TODO(alestiago): Consider refactoring once the following is merged:
-  active2,
+  // https://github.com/flame-engine/flame/pull/1538
-
+  // ignore: public_member_api_docs
-  /// Arrow with 3 lights lit up.
+  final SpaceshipRampCubit bloc;
-  active3,
-
-  /// Arrow with 4 lights lit up.
-  active4,
-
-  /// Arrow with all 5 lights lit up.
-  active5,
-}
-
-extension on SpaceshipRampArrowSpriteState {
-  String get path {
-    switch (this) {
-      case SpaceshipRampArrowSpriteState.inactive:
-        return Assets.images.android.ramp.arrow.inactive.keyName;
-      case SpaceshipRampArrowSpriteState.active1:
-        return Assets.images.android.ramp.arrow.active1.keyName;
-      case SpaceshipRampArrowSpriteState.active2:
-        return Assets.images.android.ramp.arrow.active2.keyName;
-      case SpaceshipRampArrowSpriteState.active3:
-        return Assets.images.android.ramp.arrow.active3.keyName;
-      case SpaceshipRampArrowSpriteState.active4:
-        return Assets.images.android.ramp.arrow.active4.keyName;
-      case SpaceshipRampArrowSpriteState.active5:
-        return Assets.images.android.ramp.arrow.active5.keyName;
-    }
-  }
 
-  SpaceshipRampArrowSpriteState get next {
+  @override
-    return SpaceshipRampArrowSpriteState
+  void onRemove() {
-        .values[(index + 1) % SpaceshipRampArrowSpriteState.values.length];
+    bloc.close();
+    super.onRemove();
   }
 }
 
@@ -194,37 +183,81 @@ class _SpaceshipRampBackgroundRampSpriteComponent extends SpriteComponent
 ///
 /// Lights progressively whenever a [Ball] gets into [SpaceshipRamp].
 /// {@endtemplate}
-class _SpaceshipRampArrowSpriteComponent
+@visibleForTesting
-    extends SpriteGroupComponent<SpaceshipRampArrowSpriteState>
+class SpaceshipRampArrowSpriteComponent extends SpriteGroupComponent<int>
-    with HasGameRef, ZIndex {
+    with HasGameRef, ParentIsA<SpaceshipRamp>, ZIndex {
   /// {@macro spaceship_ramp_arrow_sprite_component}
-  _SpaceshipRampArrowSpriteComponent()
+  SpaceshipRampArrowSpriteComponent({
-      : super(
+    required int current,
+  }) : super(
           anchor: Anchor.center,
           position: Vector2(-3.9, -56.5),
+          current: current,
         ) {
     zIndex = ZIndexes.spaceshipRampArrow;
   }
 
-  /// Changes arrow image to the next [Sprite].
-  void progress() => current = current?.next;
-
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-    final sprites = <SpaceshipRampArrowSpriteState, Sprite>{};
+    parent.bloc.stream.listen((state) {
+      current = state.hits % SpaceshipRampArrowSpriteState.values.length;
+    });
+
+    final sprites = <int, Sprite>{};
     this.sprites = sprites;
     for (final spriteState in SpaceshipRampArrowSpriteState.values) {
-      sprites[spriteState] = Sprite(
+      sprites[spriteState.index] = Sprite(
         gameRef.images.fromCache(spriteState.path),
       );
     }
 
-    current = SpaceshipRampArrowSpriteState.inactive;
+    current = 0;
     size = sprites[current]!.originalSize / 10;
   }
 }
 
+/// Indicates the state of the arrow on the [SpaceshipRamp].
+@visibleForTesting
+enum SpaceshipRampArrowSpriteState {
+  /// Arrow with no dashes lit up.
+  inactive,
+
+  /// Arrow with 1 light lit up.
+  active1,
+
+  /// Arrow with 2 lights lit up.
+  active2,
+
+  /// Arrow with 3 lights lit up.
+  active3,
+
+  /// Arrow with 4 lights lit up.
+  active4,
+
+  /// Arrow with all 5 lights lit up.
+  active5,
+}
+
+extension on SpaceshipRampArrowSpriteState {
+  String get path {
+    switch (this) {
+      case SpaceshipRampArrowSpriteState.inactive:
+        return Assets.images.android.ramp.arrow.inactive.keyName;
+      case SpaceshipRampArrowSpriteState.active1:
+        return Assets.images.android.ramp.arrow.active1.keyName;
+      case SpaceshipRampArrowSpriteState.active2:
+        return Assets.images.android.ramp.arrow.active2.keyName;
+      case SpaceshipRampArrowSpriteState.active3:
+        return Assets.images.android.ramp.arrow.active3.keyName;
+      case SpaceshipRampArrowSpriteState.active4:
+        return Assets.images.android.ramp.arrow.active4.keyName;
+      case SpaceshipRampArrowSpriteState.active5:
+        return Assets.images.android.ramp.arrow.active5.keyName;
+    }
+  }
+}
+
 class _SpaceshipRampBoardOpeningSpriteComponent extends SpriteComponent
     with HasGameRef, ZIndex {
   _SpaceshipRampBoardOpeningSpriteComponent() : super(anchor: Anchor.center) {
@@ -373,3 +406,47 @@ class _SpaceshipRampOpening extends LayerSensor {
       );
   }
 }
+
+/// {@template ramp_scoring_sensor}
+/// Small sensor body used to detect when a ball has entered the
+/// [SpaceshipRamp].
+/// {@endtemplate}
+class RampScoringSensor extends BodyComponent
+    with ParentIsA<SpaceshipRamp>, InitialPosition, Layered {
+  /// {@macro ramp_scoring_sensor}
+  RampScoringSensor({
+    Iterable<Component>? children,
+  }) : super(
+          children: children,
+          renderBody: false,
+        ) {
+    layer = Layer.spaceshipEntranceRamp;
+  }
+
+  /// Creates a [RampScoringSensor] without any children.
+  ///
+  @visibleForTesting
+  RampScoringSensor.test();
+
+  @override
+  Body createBody() {
+    final shape = PolygonShape()
+      ..setAsBox(
+        2.6,
+        .5,
+        initialPosition,
+        -5 * math.pi / 180,
+      );
+
+    final fixtureDef = FixtureDef(
+      shape,
+      isSensor: true,
+    );
+    final bodyDef = BodyDef(
+      position: initialPosition,
+      userData: this,
+    );
+
+    return world.createBody(bodyDef)..createFixture(fixtureDef);
+  }
+}

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

@@ -32,18 +32,18 @@ class _ComputerBase extends BodyComponent with InitialPosition, ZIndex {
   List<FixtureDef> _createFixtureDefs() {
     final leftEdge = EdgeShape()
       ..set(
-        Vector2(-14.9, -46),
+        Vector2(-15.1, -45.9),
-        Vector2(-15.3, -49.6),
+        Vector2(-15.5, -49.5),
       );
     final topEdge = EdgeShape()
       ..set(
-        Vector2(-15.3, -49.6),
+        leftEdge.vertex2,
-        Vector2(-10.7, -50.6),
+        Vector2(-10.9, -50.5),
       );
     final rightEdge = EdgeShape()
       ..set(
-        Vector2(-10.7, -50.6),
+        topEdge.vertex2,
-        Vector2(-9, -47.2),
+        Vector2(-9.2, -47.1),
       );
 
     return [
@@ -67,7 +67,7 @@ class _ComputerBaseSpriteComponent extends SpriteComponent with HasGameRef {
   _ComputerBaseSpriteComponent()
       : super(
           anchor: Anchor.center,
-          position: Vector2(-12.1, -48.15),
+          position: Vector2(-12.24, -48.15),
         );
 
   @override
@@ -89,7 +89,7 @@ class _ComputerTopSpriteComponent extends SpriteComponent
   _ComputerTopSpriteComponent()
       : super(
           anchor: Anchor.center,
-          position: Vector2(-12.52, -49.37),
+          position: Vector2(-12.66, -49.37),
         ) {
     zIndex = ZIndexes.computerTop;
   }
@@ -113,9 +113,9 @@ class _ComputerGlowSpriteComponent extends SpriteComponent
   _ComputerGlowSpriteComponent()
       : super(
           anchor: Anchor.center,
-          position: Vector2(7.4, 10),
+          position: Vector2(4.2, 11),
         ) {
-    zIndex = ZIndexes.computerGlow;
+    zIndex = ZIndexes.computerGlow + 4;
   }
 
   @override

packages/pinball_components/pubspec.yaml

@@ -89,6 +89,7 @@ flutter:
     - assets/images/score/
     - assets/images/backbox/
     - assets/images/flapper/
+    - assets/images/skill_shot/
 
 flutter_gen:
   line_length: 80

packages/pinball_components/sandbox/lib/common/games.dart

@@ -24,6 +24,14 @@ abstract class AssetsGame extends Forge2DGame {
 }
 
 abstract class LineGame extends AssetsGame with PanDetector {
+  LineGame({
+    List<String>? imagesFileNames,
+  }) : super(
+          imagesFileNames: [
+            if (imagesFileNames != null) ...imagesFileNames,
+          ],
+        );
+
   Vector2? _lineEnd;
 
   @override

packages/pinball_components/sandbox/lib/stories/android_acres/android_bumper_a_game.dart

@@ -7,7 +7,6 @@ import 'package:sandbox/stories/ball/basic_ball_game.dart';
 class AndroidBumperAGame extends BallGame {
   AndroidBumperAGame()
       : super(
-          color: const Color(0xFF0000FF),
           imagesFileNames: [
             Assets.images.android.bumper.a.lit.keyName,
             Assets.images.android.bumper.a.dimmed.keyName,

packages/pinball_components/sandbox/lib/stories/android_acres/android_bumper_b_game.dart

@@ -7,7 +7,6 @@ import 'package:sandbox/stories/ball/basic_ball_game.dart';
 class AndroidBumperBGame extends BallGame {
   AndroidBumperBGame()
       : super(
-          color: const Color(0xFF0000FF),
           imagesFileNames: [
             Assets.images.android.bumper.b.lit.keyName,
             Assets.images.android.bumper.b.dimmed.keyName,

packages/pinball_components/sandbox/lib/stories/android_acres/spaceship_rail_game.dart

@@ -1,14 +1,12 @@
 import 'dart:async';
 
 import 'package:flame/input.dart';
-import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
 class SpaceshipRailGame extends BallGame {
   SpaceshipRailGame()
       : super(
-          color: Colors.blue,
           ballPriority: ZIndexes.ballOnSpaceshipRail,
           ballLayer: Layer.spaceshipExitRail,
           imagesFileNames: [

packages/pinball_components/sandbox/lib/stories/android_acres/spaceship_ramp_game.dart

@@ -9,7 +9,6 @@ import 'package:sandbox/stories/ball/basic_ball_game.dart';
 class SpaceshipRampGame extends BallGame with KeyboardEvents {
   SpaceshipRampGame()
       : super(
-          color: Colors.blue,
           ballPriority: ZIndexes.ballOnSpaceshipRamp,
           ballLayer: Layer.spaceshipEntranceRamp,
           imagesFileNames: [
@@ -54,7 +53,7 @@ class SpaceshipRampGame extends BallGame with KeyboardEvents {
   ) {
     if (event is RawKeyDownEvent &&
         event.logicalKey == LogicalKeyboardKey.space) {
-      _spaceshipRamp.progress();
+      _spaceshipRamp.bloc.onAscendingBallEntered();
       return KeyEventResult.handled;
     }
 

packages/pinball_components/sandbox/lib/stories/ball/ball_booster_game.dart

@@ -1,9 +1,20 @@
 import 'package:flame/components.dart';
-import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_theme/pinball_theme.dart' as theme;
 import 'package:sandbox/common/common.dart';
 
 class BallBoosterGame extends LineGame {
+  BallBoosterGame()
+      : super(
+          imagesFileNames: [
+            theme.Assets.images.android.ball.keyName,
+            theme.Assets.images.dash.ball.keyName,
+            theme.Assets.images.dino.ball.keyName,
+            theme.Assets.images.sparky.ball.keyName,
+            Assets.images.ball.flameEffect.keyName,
+          ],
+        );
+
   static const description = '''
     Shows how a Ball with a boost works.
 
@@ -12,7 +23,7 @@ class BallBoosterGame extends LineGame {
 
   @override
   void onLine(Vector2 line) {
-    final ball = Ball(baseColor: Colors.transparent);
+    final ball = Ball();
     final impulse = line * -1 * 20;
     ball.add(BallTurboChargingBehavior(impulse: impulse));
 

packages/pinball_components/sandbox/lib/stories/ball/basic_ball_game.dart

@@ -1,17 +1,20 @@
 import 'package:flame/input.dart';
-import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_theme/pinball_theme.dart' as theme;
 import 'package:sandbox/common/common.dart';
 
 class BallGame extends AssetsGame with TapDetector, Traceable {
   BallGame({
-    this.color = Colors.blue,
     this.ballPriority = 0,
     this.ballLayer = Layer.all,
+    this.character,
     List<String>? imagesFileNames,
   }) : super(
           imagesFileNames: [
-            Assets.images.ball.ball.keyName,
+            theme.Assets.images.android.ball.keyName,
+            theme.Assets.images.dash.ball.keyName,
+            theme.Assets.images.dino.ball.keyName,
+            theme.Assets.images.sparky.ball.keyName,
             if (imagesFileNames != null) ...imagesFileNames,
           ],
         );
@@ -22,14 +25,23 @@ class BallGame extends AssetsGame with TapDetector, Traceable {
     - Tap anywhere on the screen to spawn a ball into the game.
 ''';
 
-  final Color color;
+  static final characterBallPaths = <String, String>{
+    'Dash': theme.Assets.images.dash.ball.keyName,
+    'Sparky': theme.Assets.images.sparky.ball.keyName,
+    'Android': theme.Assets.images.android.ball.keyName,
+    'Dino': theme.Assets.images.dino.ball.keyName,
+  };
+
   final int ballPriority;
   final Layer ballLayer;
+  final String? character;
 
   @override
   void onTapUp(TapUpInfo info) {
     add(
-      Ball(baseColor: color)
+      Ball(
+        assetPath: characterBallPaths[character],
+      )
         ..initialPosition = info.eventPosition.game
         ..layer = ballLayer
         ..priority = ballPriority,

packages/pinball_components/sandbox/lib/stories/ball/stories.dart

@@ -1,5 +1,4 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flutter/material.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/ball_booster_game.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
@@ -7,10 +6,14 @@ import 'package:sandbox/stories/ball/basic_ball_game.dart';
 void addBallStories(Dashbook dashbook) {
   dashbook.storiesOf('Ball')
     ..addGame(
-      title: 'Colored',
+      title: 'Themed',
       description: BallGame.description,
       gameBuilder: (context) => BallGame(
-        color: context.colorProperty('color', Colors.blue),
+        character: context.listProperty(
+          'Character',
+          BallGame.characterBallPaths.keys.first,
+          BallGame.characterBallPaths.keys.toList(),
+        ),
       ),
     )
     ..addGame(

packages/pinball_components/sandbox/lib/stories/google_word/google_letter_game.dart

@@ -1,14 +1,10 @@
-import 'dart:ui';
-
 import 'package:flame_forge2d/flame_forge2d.dart';
-import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
 class GoogleLetterGame extends BallGame {
   GoogleLetterGame()
       : super(
-          color: const Color(0xFF009900),
           imagesFileNames: [
             Assets.images.googleWord.letter1.lit.keyName,
             Assets.images.googleWord.letter1.dimmed.keyName,

packages/pinball_components/sandbox/lib/stories/launch_ramp/launch_ramp_game.dart

@@ -1,14 +1,12 @@
 import 'dart:async';
 
 import 'package:flame/input.dart';
-import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
 class LaunchRampGame extends BallGame {
   LaunchRampGame()
       : super(
-          color: Colors.blue,
           ballPriority: ZIndexes.ballOnLaunchRamp,
           ballLayer: Layer.launcher,
         );

packages/pinball_components/sandbox/lib/stories/plunger/plunger_game.dart

@@ -6,8 +6,6 @@ import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
 class PlungerGame extends BallGame with KeyboardEvents, Traceable {
-  PlungerGame() : super(color: const Color(0xFFFF0000));
-
   static const description = '''
     Shows how Plunger is rendered.
 

packages/pinball_components/test/src/components/ball/ball_test.dart

@@ -2,31 +2,36 @@
 
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flame_test/flame_test.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_theme/pinball_theme.dart' as theme;
 
 import '../../../helpers/helpers.dart';
 
 void main() {
   TestWidgetsFlutterBinding.ensureInitialized();
-  final flameTester = FlameTester(TestGame.new);
+  final assets = [
+    theme.Assets.images.android.ball.keyName,
+    theme.Assets.images.dash.ball.keyName,
+    theme.Assets.images.dino.ball.keyName,
+    theme.Assets.images.sparky.ball.keyName,
+  ];
 
-  group('Ball', () {
+  final flameTester = FlameTester(() => TestGame(assets));
-    const baseColor = Color(0xFFFFFFFF);
 
+  group('Ball', () {
     test(
       'can be instantiated',
       () {
-        expect(Ball(baseColor: baseColor), isA<Ball>());
+        expect(Ball(), isA<Ball>());
-        expect(Ball.test(baseColor: baseColor), isA<Ball>());
+        expect(Ball.test(), isA<Ball>());
       },
     );
 
     flameTester.test(
       'loads correctly',
       (game) async {
-        final ball = Ball(baseColor: baseColor);
+        final ball = Ball();
         await game.ready();
         await game.ensureAdd(ball);
 
@@ -36,7 +41,7 @@ void main() {
 
     group('adds', () {
       flameTester.test('a BallScalingBehavior', (game) async {
-        final ball = Ball(baseColor: baseColor);
+        final ball = Ball();
         await game.ensureAdd(ball);
         expect(
           ball.descendants().whereType<BallScalingBehavior>().length,
@@ -45,7 +50,7 @@ void main() {
       });
 
       flameTester.test('a BallGravitatingBehavior', (game) async {
-        final ball = Ball(baseColor: baseColor);
+        final ball = Ball();
         await game.ensureAdd(ball);
         expect(
           ball.descendants().whereType<BallGravitatingBehavior>().length,
@@ -58,7 +63,7 @@ void main() {
       flameTester.test(
         'is dynamic',
         (game) async {
-          final ball = Ball(baseColor: baseColor);
+          final ball = Ball();
           await game.ensureAdd(ball);
 
           expect(ball.body.bodyType, equals(BodyType.dynamic));
@@ -67,7 +72,7 @@ void main() {
 
       group('can be moved', () {
         flameTester.test('by its weight', (game) async {
-          final ball = Ball(baseColor: baseColor);
+          final ball = Ball();
           await game.ensureAdd(ball);
 
           game.update(1);
@@ -75,7 +80,7 @@ void main() {
         });
 
         flameTester.test('by applying velocity', (game) async {
-          final ball = Ball(baseColor: baseColor);
+          final ball = Ball();
           await game.ensureAdd(ball);
 
           ball.body.gravityScale = Vector2.zero();
@@ -90,7 +95,7 @@ void main() {
       flameTester.test(
         'exists',
         (game) async {
-          final ball = Ball(baseColor: baseColor);
+          final ball = Ball();
           await game.ensureAdd(ball);
 
           expect(ball.body.fixtures[0], isA<Fixture>());
@@ -100,7 +105,7 @@ void main() {
       flameTester.test(
         'is dense',
         (game) async {
-          final ball = Ball(baseColor: baseColor);
+          final ball = Ball();
           await game.ensureAdd(ball);
 
           final fixture = ball.body.fixtures[0];
@@ -111,7 +116,7 @@ void main() {
       flameTester.test(
         'shape is circular',
         (game) async {
-          final ball = Ball(baseColor: baseColor);
+          final ball = Ball();
           await game.ensureAdd(ball);
 
           final fixture = ball.body.fixtures[0];
@@ -123,7 +128,7 @@ void main() {
       flameTester.test(
         'has Layer.all as default filter maskBits',
         (game) async {
-          final ball = Ball(baseColor: baseColor);
+          final ball = Ball();
           await game.ready();
           await game.ensureAdd(ball);
           await game.ready();
@@ -137,7 +142,7 @@ void main() {
     group('stop', () {
       group("can't be moved", () {
         flameTester.test('by its weight', (game) async {
-          final ball = Ball(baseColor: baseColor);
+          final ball = Ball();
           await game.ensureAdd(ball);
           ball.stop();
 
@@ -152,7 +157,7 @@ void main() {
         flameTester.test(
           'by its weight when previously stopped',
           (game) async {
-            final ball = Ball(baseColor: baseColor);
+            final ball = Ball();
             await game.ensureAdd(ball);
             ball.stop();
             ball.resume();
@@ -165,7 +170,7 @@ void main() {
         flameTester.test(
           'by applying velocity when previously stopped',
           (game) async {
-            final ball = Ball(baseColor: baseColor);
+            final ball = Ball();
             await game.ensureAdd(ball);
             ball.stop();
             ball.resume();

packages/pinball_components/test/src/components/ball/behaviors/ball_gravitating_behavior_test.dart

@@ -1,21 +1,19 @@
 // ignore_for_file: cascade_invocations
 
-import 'dart:ui';
-
 import 'package:flame/components.dart';
 import 'package:flame_test/flame_test.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_theme/pinball_theme.dart' as theme;
 
 import '../../../../helpers/helpers.dart';
 
 void main() {
   TestWidgetsFlutterBinding.ensureInitialized();
-  final asset = Assets.images.ball.ball.keyName;
+  final asset = theme.Assets.images.dash.ball.keyName;
   final flameTester = FlameTester(() => TestGame([asset]));
 
   group('BallGravitatingBehavior', () {
-    const baseColor = Color(0xFFFFFFFF);
     test('can be instantiated', () {
       expect(
         BallGravitatingBehavior(),
@@ -24,7 +22,7 @@ void main() {
     });
 
     flameTester.test('can be loaded', (game) async {
-      final ball = Ball.test(baseColor: baseColor);
+      final ball = Ball.test();
       final behavior = BallGravitatingBehavior();
       await ball.add(behavior);
       await game.ensureAdd(ball);
@@ -37,12 +35,10 @@ void main() {
     flameTester.test(
       "overrides the body's horizontal gravity symmetrically",
       (game) async {
-        final ball1 = Ball.test(baseColor: baseColor)
+        final ball1 = Ball.test()..initialPosition = Vector2(10, 0);
-          ..initialPosition = Vector2(10, 0);
         await ball1.add(BallGravitatingBehavior());
 
-        final ball2 = Ball.test(baseColor: baseColor)
+        final ball2 = Ball.test()..initialPosition = Vector2(-10, 0);
-          ..initialPosition = Vector2(-10, 0);
         await ball2.add(BallGravitatingBehavior());
 
         await game.ensureAddAll([ball1, ball2]);

packages/pinball_components/test/src/components/ball/behaviors/ball_scaling_behavior_test.dart

@@ -1,21 +1,19 @@
 // ignore_for_file: cascade_invocations
 
-import 'dart:ui';
-
 import 'package:flame/components.dart';
 import 'package:flame_test/flame_test.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_theme/pinball_theme.dart' as theme;
 
 import '../../../../helpers/helpers.dart';
 
 void main() {
   TestWidgetsFlutterBinding.ensureInitialized();
-  final asset = Assets.images.ball.ball.keyName;
+  final asset = theme.Assets.images.dash.ball.keyName;
   final flameTester = FlameTester(() => TestGame([asset]));
 
   group('BallScalingBehavior', () {
-    const baseColor = Color(0xFFFFFFFF);
     test('can be instantiated', () {
       expect(
         BallScalingBehavior(),
@@ -24,7 +22,7 @@ void main() {
     });
 
     flameTester.test('can be loaded', (game) async {
-      final ball = Ball.test(baseColor: baseColor);
+      final ball = Ball.test();
       final behavior = BallScalingBehavior();
       await ball.add(behavior);
       await game.ensureAdd(ball);
@@ -35,12 +33,10 @@ void main() {
     });
 
     flameTester.test('scales the shape radius', (game) async {
-      final ball1 = Ball.test(baseColor: baseColor)
+      final ball1 = Ball.test()..initialPosition = Vector2(0, 10);
-        ..initialPosition = Vector2(0, 10);
       await ball1.add(BallScalingBehavior());
 
-      final ball2 = Ball.test(baseColor: baseColor)
+      final ball2 = Ball.test()..initialPosition = Vector2(0, -10);
-        ..initialPosition = Vector2(0, -10);
       await ball2.add(BallScalingBehavior());
 
       await game.ensureAddAll([ball1, ball2]);
@@ -57,12 +53,10 @@ void main() {
     flameTester.test(
       'scales the sprite',
       (game) async {
-        final ball1 = Ball.test(baseColor: baseColor)
+        final ball1 = Ball.test()..initialPosition = Vector2(0, 10);
-          ..initialPosition = Vector2(0, 10);
         await ball1.add(BallScalingBehavior());
 
-        final ball2 = Ball.test(baseColor: baseColor)
+        final ball2 = Ball.test()..initialPosition = Vector2(0, -10);
-          ..initialPosition = Vector2(0, -10);
         await ball2.add(BallScalingBehavior());
 
         await game.ensureAddAll([ball1, ball2]);

packages/pinball_components/test/src/components/ball/behaviors/ball_turbo_charging_behavior_test.dart

@@ -1,12 +1,10 @@
 // ignore_for_file: cascade_invocations
 
-import 'dart:ui';
-
 import 'package:flame/components.dart';
 import 'package:flame_test/flame_test.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_theme/pinball_theme.dart' as theme;
 
 import '../../../../helpers/helpers.dart';
 
@@ -16,9 +14,8 @@ void main() {
   group(
     'BallTurboChargingBehavior',
     () {
-      final assets = [Assets.images.ball.ball.keyName];
+      final asset = theme.Assets.images.dash.ball.keyName;
-      final flameTester = FlameTester(() => TestGame(assets));
+      final flameTester = FlameTester(() => TestGame([asset]));
-      const baseColor = Color(0xFFFFFFFF);
 
       test('can be instantiated', () {
         expect(
@@ -28,7 +25,7 @@ void main() {
       });
 
       flameTester.test('can be loaded', (game) async {
-        final ball = Ball.test(baseColor: baseColor);
+        final ball = Ball.test();
         final behavior = BallTurboChargingBehavior(impulse: Vector2.zero());
         await ball.add(behavior);
         await game.ensureAdd(ball);
@@ -41,7 +38,7 @@ void main() {
       flameTester.test(
         'impulses the ball velocity when loaded',
         (game) async {
-          final ball = Ball.test(baseColor: baseColor);
+          final ball = Ball.test();
           await game.ensureAdd(ball);
           final impulse = Vector2.all(1);
           final behavior = BallTurboChargingBehavior(impulse: impulse);
@@ -59,7 +56,7 @@ void main() {
       );
 
       flameTester.test('adds sprite', (game) async {
-        final ball = Ball(baseColor: baseColor);
+        final ball = Ball();
         await game.ensureAdd(ball);
 
         await ball.ensureAdd(
@@ -73,7 +70,7 @@ void main() {
       });
 
       flameTester.test('removes sprite after it finishes', (game) async {
-        final ball = Ball(baseColor: baseColor);
+        final ball = Ball();
         await game.ensureAdd(ball);
 
         final behavior = BallTurboChargingBehavior(impulse: Vector2.zero());

packages/pinball_components/test/src/components/chrome_dino/behaviors/chrome_dino_chomping_behavior_test.dart

@@ -4,11 +4,11 @@ import 'package:bloc_test/bloc_test.dart';
 import 'package:flame/components.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flame_test/flame_test.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_components/src/components/chrome_dino/behaviors/behaviors.dart';
+import 'package:pinball_theme/pinball_theme.dart' as theme;
 
 import '../../../../helpers/helpers.dart';
 
@@ -20,7 +20,10 @@ class _MockFixture extends Mock implements Fixture {}
 
 void main() {
   TestWidgetsFlutterBinding.ensureInitialized();
-  final flameTester = FlameTester(TestGame.new);
+  final assets = [
+    theme.Assets.images.dash.ball.keyName,
+  ];
+  final flameTester = FlameTester(() => TestGame(assets));
 
   group(
     'ChromeDinoChompingBehavior',
@@ -35,7 +38,7 @@ void main() {
       flameTester.test(
         'beginContact sets ball sprite to be invisible and calls onChomp',
         (game) async {
-          final ball = Ball(baseColor: Colors.red);
+          final ball = Ball();
           final behavior = ChromeDinoChompingBehavior();
           final bloc = _MockChromeDinoCubit();
           whenListen(

packages/pinball_components/test/src/components/chrome_dino/behaviors/chrome_dino_spitting_behavior_test.dart

@@ -5,11 +5,11 @@ import 'dart:async';
 import 'package:bloc_test/bloc_test.dart';
 import 'package:flame/components.dart';
 import 'package:flame_test/flame_test.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_components/src/components/chrome_dino/behaviors/behaviors.dart';
+import 'package:pinball_theme/pinball_theme.dart' as theme;
 
 import '../../../../helpers/helpers.dart';
 
@@ -17,7 +17,10 @@ class _MockChromeDinoCubit extends Mock implements ChromeDinoCubit {}
 
 void main() {
   TestWidgetsFlutterBinding.ensureInitialized();
-  final flameTester = FlameTester(TestGame.new);
+  final assets = [
+    theme.Assets.images.dash.ball.keyName,
+  ];
+  final flameTester = FlameTester(() => TestGame(assets));
 
   group(
     'ChromeDinoSpittingBehavior',
@@ -33,7 +36,7 @@ void main() {
         flameTester.test(
           'sets ball sprite to visible and sets a linear velocity',
           (game) async {
-            final ball = Ball(baseColor: Colors.red);
+            final ball = Ball();
             final behavior = ChromeDinoSpittingBehavior();
             final bloc = _MockChromeDinoCubit();
             final streamController = StreamController<ChromeDinoState>();
@@ -71,7 +74,7 @@ void main() {
         flameTester.test(
           'calls onSpit',
           (game) async {
-            final ball = Ball(baseColor: Colors.red);
+            final ball = Ball();
             final behavior = ChromeDinoSpittingBehavior();
             final bloc = _MockChromeDinoCubit();
             final streamController = StreamController<ChromeDinoState>();

packages/pinball_components/test/src/components/chrome_dino/behaviors/chrome_dino_swiveling_behavior_test.dart

@@ -36,7 +36,7 @@ void main() {
           whenListen(
             bloc,
             const Stream<ChromeDinoState>.empty(),
-            initialState: const ChromeDinoState.inital(),
+            initialState: const ChromeDinoState.initial(),
           );
 
           final chromeDino = ChromeDino.test(bloc: bloc);
@@ -58,7 +58,7 @@ void main() {
           whenListen(
             bloc,
             const Stream<ChromeDinoState>.empty(),
-            initialState: const ChromeDinoState.inital(),
+            initialState: const ChromeDinoState.initial(),
           );
 
           final chromeDino = ChromeDino.test(bloc: bloc);
@@ -91,7 +91,7 @@ void main() {
               bloc,
               const Stream<ChromeDinoState>.empty(),
               initialState:
-                  const ChromeDinoState.inital().copyWith(isMouthOpen: true),
+                  const ChromeDinoState.initial().copyWith(isMouthOpen: true),
             );
 
             final chromeDino = ChromeDino.test(bloc: bloc);
@@ -120,7 +120,7 @@ void main() {
               bloc,
               const Stream<ChromeDinoState>.empty(),
               initialState:
-                  const ChromeDinoState.inital().copyWith(isMouthOpen: false),
+                  const ChromeDinoState.initial().copyWith(isMouthOpen: false),
             );
 
             final chromeDino = ChromeDino.test(bloc: bloc);
@@ -148,7 +148,7 @@ void main() {
               bloc,
               const Stream<ChromeDinoState>.empty(),
               initialState:
-                  const ChromeDinoState.inital().copyWith(isMouthOpen: false),
+                  const ChromeDinoState.initial().copyWith(isMouthOpen: false),
             );
 
             final chromeDino = ChromeDino.test(bloc: bloc);

packages/pinball_components/test/src/components/chrome_dino/chrome_dino_test.dart

@@ -79,7 +79,7 @@ void main() {
       whenListen(
         bloc,
         const Stream<ChromeDinoState>.empty(),
-        initialState: const ChromeDinoState.inital(),
+        initialState: const ChromeDinoState.initial(),
       );
       when(bloc.close).thenAnswer((_) async {});
       final chromeDino = ChromeDino.test(bloc: bloc);

packages/pinball_components/test/src/components/chrome_dino/cubit/chrome_dino_cubit_test.dart

@@ -1,5 +1,4 @@
 import 'package:bloc_test/bloc_test.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:pinball_components/pinball_components.dart';
 
@@ -7,7 +6,7 @@ void main() {
   group(
     'ChromeDinoCubit',
     () {
-      final ball = Ball(baseColor: Colors.red);
+      final ball = Ball();
 
       blocTest<ChromeDinoCubit, ChromeDinoState>(
         'onOpenMouth emits true',
@@ -58,7 +57,7 @@ void main() {
       blocTest<ChromeDinoCubit, ChromeDinoState>(
         'onChomp emits nothing when the ball is already in the mouth',
         build: ChromeDinoCubit.new,
-        seed: () => const ChromeDinoState.inital().copyWith(ball: ball),
+        seed: () => const ChromeDinoState.initial().copyWith(ball: ball),
         act: (bloc) => bloc.onChomp(ball),
         expect: () => <ChromeDinoState>[],
       );

packages/pinball_components/test/src/components/chrome_dino/cubit/chrome_dino_state_test.dart

@@ -1,6 +1,5 @@
 // ignore_for_file: prefer_const_constructors
 
-import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:pinball_components/pinball_components.dart';
 
@@ -37,7 +36,7 @@ void main() {
           status: ChromeDinoStatus.idle,
           isMouthOpen: false,
         );
-        expect(ChromeDinoState.inital(), equals(initialState));
+        expect(ChromeDinoState.initial(), equals(initialState));
       });
     });
 
@@ -61,7 +60,7 @@ void main() {
         'copies correctly '
         'when all arguments specified',
         () {
-          final ball = Ball(baseColor: Colors.red);
+          final ball = Ball();
           const chromeDinoState = ChromeDinoState(
             status: ChromeDinoStatus.chomping,
             isMouthOpen: true,

packages/pinball_components/test/src/components/flipper_test.dart

@@ -2,9 +2,9 @@
 
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flame_test/flame_test.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_theme/pinball_theme.dart' as theme;
 
 import '../../helpers/helpers.dart';
 
@@ -13,6 +13,7 @@ void main() {
   final assets = [
     Assets.images.flipper.left.keyName,
     Assets.images.flipper.right.keyName,
+    theme.Assets.images.dash.ball.keyName,
   ];
   final flameTester = FlameTester(() => TestGame(assets));
 
@@ -89,7 +90,7 @@ void main() {
         'has greater mass than Ball',
         (game) async {
           final flipper = Flipper(side: BoardSide.left);
-          final ball = Ball(baseColor: Colors.white);
+          final ball = Ball();
 
           await game.ready();
           await game.ensureAddAll([flipper, ball]);