feat: implemented `Multipliers` (#231)

* feat: added multipliers

* feat: added multipliers to sandbox

* test: tests and golden tests for multipliers

* feat: multipliers controller

* fix: missed assets load

* refactor: multiplier refactored and tested

* refactor: changed sandbox for multipliers

* feat: multiplier controller

* refactor: moved assets to constructor at sandbox

* test: coverage for multipliers

* test: removed test

* refactor: coverage for multiplier

* test: coverage for multiplier

* chore: multiplier doc

* Update packages/pinball_components/sandbox/lib/stories/multipliers/multipliers_game.dart

Co-authored-by: Alejandro Santiago <dev@alestiago.com>

* chore: little code refactor, doc

* refactor: multiplier creation refactored

* test: fixed tests for multipliers

* refactor: changed properties names

* refactor: multipliers cubit

* test: refactored tests for multipliers

* refactored: sandbow for multipliers

* refactor: multipliers controller

* test: tests for multiplier behavior

* chore: analysis errors

* feat: multipliers behavior with multiplier from gamebloc

* refactor: changed toggle to next at multipliers

* test: coverage for cubit

* refactor: refactored multipliers and coverage

* refactor: sandbox

* test: flamebloctester

* Update lib/game/components/multipliers/multipliers.dart

Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com>

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

Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com>

* Update lib/game/components/multipliers/multipliers.dart

Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com>

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

Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com>

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

Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com>

* Update test/game/components/multipliers/behaviors/multipliers_behavior_test.dart

Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com>

* test: fixed test names and golden files

* test: golden tests

* fix: fixed bloc bug for tests on multiplier behavior

* chore: renamed rotation

* chore: doc ignore

* test: grouped

* test: golden tests dir

* Update packages/pinball_components/sandbox/lib/stories/multipliers/stories.dart

Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com>

* refactor: moved extension for multiplier value

* chore: multiplier extension equalsTo name

* fixed: missed method rename

Co-authored-by: Alejandro Santiago <dev@alestiago.com>
Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com>

lib/game/components/components.dart

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

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

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

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

@@ -0,0 +1,25 @@
+import 'package:flame/components.dart';
+import 'package:flame_bloc/flame_bloc.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+/// Toggle each [Multiplier] when GameState.multiplier changes.
+class MultipliersBehavior extends Component
+    with
+        HasGameRef<PinballGame>,
+        ParentIsA<Multipliers>,
+        BlocComponent<GameBloc, GameState> {
+  @override
+  bool listenWhen(GameState? previousState, GameState newState) {
+    return previousState?.multiplier != newState.multiplier;
+  }
+
+  @override
+  void onNewState(GameState state) {
+    final multipliers = parent.children.whereType<Multiplier>();
+    for (final multiplier in multipliers) {
+      multiplier.bloc.next(state.multiplier);
+    }
+  }
+}

lib/game/components/multipliers/multipliers.dart

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

lib/game/game_assets.dart

@@ -103,6 +103,16 @@ extension PinballGameAssetsX on PinballGame {
       images.load(components.Assets.images.googleWord.letter5.keyName),
       images.load(components.Assets.images.googleWord.letter6.keyName),
       images.load(components.Assets.images.backboard.display.keyName),
+      images.load(components.Assets.images.multiplier.x2.lit.keyName),
+      images.load(components.Assets.images.multiplier.x2.dimmed.keyName),
+      images.load(components.Assets.images.multiplier.x3.lit.keyName),
+      images.load(components.Assets.images.multiplier.x3.dimmed.keyName),
+      images.load(components.Assets.images.multiplier.x4.lit.keyName),
+      images.load(components.Assets.images.multiplier.x4.dimmed.keyName),
+      images.load(components.Assets.images.multiplier.x5.lit.keyName),
+      images.load(components.Assets.images.multiplier.x5.dimmed.keyName),
+      images.load(components.Assets.images.multiplier.x6.lit.keyName),
+      images.load(components.Assets.images.multiplier.x6.dimmed.keyName),
       images.load(dashTheme.leaderboardIcon.keyName),
       images.load(sparkyTheme.leaderboardIcon.keyName),
       images.load(androidTheme.leaderboardIcon.keyName),

lib/game/pinball_game.dart

@@ -53,6 +53,7 @@ class PinballGame extends Forge2DGame
 
     final launcher = Launcher();
     unawaited(addFromBlueprint(launcher));
+    await add(Multipliers());
     await add(FlutterForest());
     await addFromBlueprint(SparkyFireZone());
     await addFromBlueprint(AndroidAcres());

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

@@ -24,6 +24,8 @@ class $AssetsImagesGen {
   $AssetsImagesKickerGen get kicker => const $AssetsImagesKickerGen();
   $AssetsImagesLaunchRampGen get launchRamp =>
       const $AssetsImagesLaunchRampGen();
+  $AssetsImagesMultiplierGen get multiplier =>
+      const $AssetsImagesMultiplierGen();
   $AssetsImagesPlungerGen get plunger => const $AssetsImagesPlungerGen();
   $AssetsImagesSignpostGen get signpost => const $AssetsImagesSignpostGen();
   $AssetsImagesSlingshotGen get slingshot => const $AssetsImagesSlingshotGen();
@@ -190,6 +192,16 @@ class $AssetsImagesLaunchRampGen {
       const AssetGenImage('assets/images/launch_ramp/ramp.png');
 }
 
+class $AssetsImagesMultiplierGen {
+  const $AssetsImagesMultiplierGen();
+
+  $AssetsImagesMultiplierX2Gen get x2 => const $AssetsImagesMultiplierX2Gen();
+  $AssetsImagesMultiplierX3Gen get x3 => const $AssetsImagesMultiplierX3Gen();
+  $AssetsImagesMultiplierX4Gen get x4 => const $AssetsImagesMultiplierX4Gen();
+  $AssetsImagesMultiplierX5Gen get x5 => const $AssetsImagesMultiplierX5Gen();
+  $AssetsImagesMultiplierX6Gen get x6 => const $AssetsImagesMultiplierX6Gen();
+}
+
 class $AssetsImagesPlungerGen {
   const $AssetsImagesPlungerGen();
 
@@ -321,6 +333,66 @@ class $AssetsImagesDinoAnimatronicGen {
       const AssetGenImage('assets/images/dino/animatronic/mouth.png');
 }
 
+class $AssetsImagesMultiplierX2Gen {
+  const $AssetsImagesMultiplierX2Gen();
+
+  /// File path: assets/images/multiplier/x2/dimmed.png
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/multiplier/x2/dimmed.png');
+
+  /// File path: assets/images/multiplier/x2/lit.png
+  AssetGenImage get lit =>
+      const AssetGenImage('assets/images/multiplier/x2/lit.png');
+}
+
+class $AssetsImagesMultiplierX3Gen {
+  const $AssetsImagesMultiplierX3Gen();
+
+  /// File path: assets/images/multiplier/x3/dimmed.png
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/multiplier/x3/dimmed.png');
+
+  /// File path: assets/images/multiplier/x3/lit.png
+  AssetGenImage get lit =>
+      const AssetGenImage('assets/images/multiplier/x3/lit.png');
+}
+
+class $AssetsImagesMultiplierX4Gen {
+  const $AssetsImagesMultiplierX4Gen();
+
+  /// File path: assets/images/multiplier/x4/dimmed.png
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/multiplier/x4/dimmed.png');
+
+  /// File path: assets/images/multiplier/x4/lit.png
+  AssetGenImage get lit =>
+      const AssetGenImage('assets/images/multiplier/x4/lit.png');
+}
+
+class $AssetsImagesMultiplierX5Gen {
+  const $AssetsImagesMultiplierX5Gen();
+
+  /// File path: assets/images/multiplier/x5/dimmed.png
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/multiplier/x5/dimmed.png');
+
+  /// File path: assets/images/multiplier/x5/lit.png
+  AssetGenImage get lit =>
+      const AssetGenImage('assets/images/multiplier/x5/lit.png');
+}
+
+class $AssetsImagesMultiplierX6Gen {
+  const $AssetsImagesMultiplierX6Gen();
+
+  /// File path: assets/images/multiplier/x6/dimmed.png
+  AssetGenImage get dimmed =>
+      const AssetGenImage('assets/images/multiplier/x6/dimmed.png');
+
+  /// File path: assets/images/multiplier/x6/lit.png
+  AssetGenImage get lit =>
+      const AssetGenImage('assets/images/multiplier/x6/lit.png');
+}
+
 class $AssetsImagesSpaceshipRailGen {
   const $AssetsImagesSpaceshipRailGen();
 

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

@@ -19,6 +19,7 @@ export 'kicker.dart';
 export 'launch_ramp.dart';
 export 'layer.dart';
 export 'layer_sensor.dart';
+export 'multiplier/multiplier.dart';
 export 'plunger.dart';
 export 'render_priority.dart';
 export 'rocket.dart';

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

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

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

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

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

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

packages/pinball_components/pubspec.yaml

@@ -75,6 +75,11 @@ flutter:
     - assets/images/backboard/
     - assets/images/google_word/
     - assets/images/signpost/
+    - assets/images/multiplier/x2/
+    - assets/images/multiplier/x3/
+    - assets/images/multiplier/x4/
+    - assets/images/multiplier/x5/
+    - assets/images/multiplier/x6/
 
 flutter_gen:
   line_length: 80

packages/pinball_components/sandbox/lib/main.dart

@@ -27,6 +27,7 @@ void main() {
   addScoreTextStories(dashbook);
   addBackboardStories(dashbook);
   addDinoWallStories(dashbook);
+  addMultipliersStories(dashbook);
 
   runApp(dashbook);
 }

packages/pinball_components/sandbox/lib/stories/multipliers/multipliers_game.dart

@@ -0,0 +1,97 @@
+import 'dart:math' as math;
+import 'package:flame/input.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:sandbox/stories/ball/basic_ball_game.dart';
+
+class MultipliersGame extends BallGame with KeyboardEvents {
+  MultipliersGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.multiplier.x2.lit.keyName,
+            Assets.images.multiplier.x2.dimmed.keyName,
+            Assets.images.multiplier.x3.lit.keyName,
+            Assets.images.multiplier.x3.dimmed.keyName,
+            Assets.images.multiplier.x4.lit.keyName,
+            Assets.images.multiplier.x4.dimmed.keyName,
+            Assets.images.multiplier.x5.lit.keyName,
+            Assets.images.multiplier.x5.dimmed.keyName,
+            Assets.images.multiplier.x6.lit.keyName,
+            Assets.images.multiplier.x6.dimmed.keyName,
+          ],
+        );
+
+  static const description = '''
+    Shows how the Multipliers are rendered.
+      
+    - Tap anywhere on the screen to spawn a ball into the game.
+    - Press digits 2 to 6 for toggle state multipliers 2 to 6.
+''';
+
+  final List<Multiplier> multipliers = [
+    Multiplier.x2(
+      position: Vector2(-20, 0),
+      angle: -15 * math.pi / 180,
+    ),
+    Multiplier.x3(
+      position: Vector2(20, -5),
+      angle: 15 * math.pi / 180,
+    ),
+    Multiplier.x4(
+      position: Vector2(0, -15),
+      angle: 0,
+    ),
+    Multiplier.x5(
+      position: Vector2(-10, -25),
+      angle: -3 * math.pi / 180,
+    ),
+    Multiplier.x6(
+      position: Vector2(10, -35),
+      angle: 8 * math.pi / 180,
+    ),
+  ];
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    camera.followVector2(Vector2.zero());
+
+    await addAll(multipliers);
+    await traceAllBodies();
+  }
+
+  @override
+  KeyEventResult onKeyEvent(
+    RawKeyEvent event,
+    Set<LogicalKeyboardKey> keysPressed,
+  ) {
+    if (event is RawKeyDownEvent) {
+      var currentMultiplier = 1;
+
+      if (event.logicalKey == LogicalKeyboardKey.digit2) {
+        currentMultiplier = 2;
+      }
+      if (event.logicalKey == LogicalKeyboardKey.digit3) {
+        currentMultiplier = 3;
+      }
+      if (event.logicalKey == LogicalKeyboardKey.digit4) {
+        currentMultiplier = 4;
+      }
+      if (event.logicalKey == LogicalKeyboardKey.digit5) {
+        currentMultiplier = 5;
+      }
+      if (event.logicalKey == LogicalKeyboardKey.digit6) {
+        currentMultiplier = 6;
+      }
+
+      for (final multiplier in multipliers) {
+        multiplier.bloc.next(currentMultiplier);
+      }
+
+      return KeyEventResult.handled;
+    }
+    return KeyEventResult.ignored;
+  }
+}

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

@@ -0,0 +1,11 @@
+import 'package:dashbook/dashbook.dart';
+import 'package:sandbox/common/common.dart';
+import 'package:sandbox/stories/multipliers/multipliers_game.dart';
+
+void addMultipliersStories(Dashbook dashbook) {
+  dashbook.storiesOf('Multipliers').addGame(
+        title: 'Multipliers',
+        description: MultipliersGame.description,
+        gameBuilder: (_) => MultipliersGame(),
+      );
+}

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

@@ -10,6 +10,7 @@ export 'flutter_forest/stories.dart';
 export 'google_word/stories.dart';
 export 'launch_ramp/stories.dart';
 export 'layer/stories.dart';
+export 'multipliers/stories.dart';
 export 'plunger/stories.dart';
 export 'score_text/stories.dart';
 export 'slingshot/stories.dart';

packages/pinball_components/sandbox/pubspec.lock

@@ -15,6 +15,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.8.2"
+  bloc:
+    dependency: transitive
+    description:
+      name: bloc
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "8.0.3"
   boolean_selector:
     dependency: transitive
     description:
@@ -171,7 +178,7 @@ packages:
       name: js
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.6.4"
+    version: "0.6.3"
   json_annotation:
     dependency: transitive
     description:
@@ -199,7 +206,7 @@ packages:
       name: material_color_utilities
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.4"
+    version: "0.1.3"
   meta:
     dependency: transitive
     description:
@@ -220,7 +227,7 @@ packages:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.1"
+    version: "1.8.0"
   path_provider_linux:
     dependency: transitive
     description:
@@ -351,7 +358,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.2"
+    version: "1.8.1"
   stack_trace:
     dependency: transitive
     description:
@@ -386,7 +393,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.9"
+    version: "0.4.8"
   typed_data:
     dependency: transitive
     description:
@@ -456,7 +463,7 @@ packages:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.2"
+    version: "2.1.1"
   very_good_analysis:
     dependency: "direct dev"
     description:

packages/pinball_components/test/helpers/mocks.dart

@@ -24,3 +24,5 @@ class MockGoogleLetterCubit extends Mock implements GoogleLetterCubit {}
 class MockSparkyBumperCubit extends Mock implements SparkyBumperCubit {}
 
 class MockDashNestBumperCubit extends Mock implements DashNestBumperCubit {}
+
+class MockMultiplierCubit extends Mock implements MultiplierCubit {}

packages/pinball_components/test/src/components/multiplier/cubit/multiplier_cubit_test.dart

@@ -0,0 +1,118 @@
+// ignore_for_file: prefer_const_constructors
+
+import 'package:bloc_test/bloc_test.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:pinball_components/pinball_components.dart';
+
+void main() {
+  group(
+    'MultiplierCubit',
+    () {
+      blocTest<MultiplierCubit, MultiplierState>(
+        "emits [lit] when 'next' on x2 dimmed with x2 multiplier value",
+        build: () => MultiplierCubit(MultiplierValue.x2),
+        act: (bloc) => bloc.next(2),
+        expect: () => [
+          isA<MultiplierState>()
+            ..having(
+              (state) => state.spriteState,
+              'spriteState',
+              MultiplierSpriteState.lit,
+            ),
+        ],
+      );
+
+      blocTest<MultiplierCubit, MultiplierState>(
+        "emits [lit] when 'next' on x3 dimmed with x3 multiplier value",
+        build: () => MultiplierCubit(MultiplierValue.x3),
+        act: (bloc) => bloc.next(3),
+        expect: () => [
+          isA<MultiplierState>()
+            ..having(
+              (state) => state.spriteState,
+              'spriteState',
+              MultiplierSpriteState.lit,
+            ),
+        ],
+      );
+
+      blocTest<MultiplierCubit, MultiplierState>(
+        "emits [lit] when 'next' on x4 dimmed with x4 multiplier value",
+        build: () => MultiplierCubit(MultiplierValue.x4),
+        act: (bloc) => bloc.next(4),
+        expect: () => [
+          isA<MultiplierState>()
+            ..having(
+              (state) => state.spriteState,
+              'spriteState',
+              MultiplierSpriteState.lit,
+            ),
+        ],
+      );
+
+      blocTest<MultiplierCubit, MultiplierState>(
+        "emits [lit] when 'next' on x5 dimmed with x5 multiplier value",
+        build: () => MultiplierCubit(MultiplierValue.x5),
+        act: (bloc) => bloc.next(5),
+        expect: () => [
+          isA<MultiplierState>()
+            ..having(
+              (state) => state.spriteState,
+              'spriteState',
+              MultiplierSpriteState.lit,
+            ),
+        ],
+      );
+
+      blocTest<MultiplierCubit, MultiplierState>(
+        "emits [lit] when 'next' on x6 dimmed with x6 multiplier value",
+        build: () => MultiplierCubit(MultiplierValue.x6),
+        act: (bloc) => bloc.next(6),
+        expect: () => [
+          isA<MultiplierState>()
+            ..having(
+              (state) => state.spriteState,
+              'spriteState',
+              MultiplierSpriteState.lit,
+            ),
+        ],
+      );
+
+      blocTest<MultiplierCubit, MultiplierState>(
+        "emits [dimmed] when 'next' on lit with different multiplier value",
+        build: () => MultiplierCubit(MultiplierValue.x2),
+        seed: () => MultiplierState(
+          value: MultiplierValue.x2,
+          spriteState: MultiplierSpriteState.lit,
+        ),
+        act: (bloc) => bloc.next(3),
+        expect: () => [
+          isA<MultiplierState>()
+            ..having(
+              (state) => state.spriteState,
+              'spriteState',
+              MultiplierSpriteState.dimmed,
+            ),
+        ],
+      );
+
+      blocTest<MultiplierCubit, MultiplierState>(
+        "emits nothing when 'next' on lit with same multiplier value",
+        build: () => MultiplierCubit(MultiplierValue.x2),
+        seed: () => MultiplierState(
+          value: MultiplierValue.x2,
+          spriteState: MultiplierSpriteState.lit,
+        ),
+        act: (bloc) => bloc.next(2),
+        expect: () => <MultiplierState>[],
+      );
+
+      blocTest<MultiplierCubit, MultiplierState>(
+        "emits nothing when 'next' on dimmed with different multiplier value",
+        build: () => MultiplierCubit(MultiplierValue.x2),
+        act: (bloc) => bloc.next(3),
+        expect: () => <MultiplierState>[],
+      );
+    },
+  );
+}

packages/pinball_components/test/src/components/multiplier/cubit/multiplier_state_test.dart

@@ -0,0 +1,75 @@
+// ignore_for_file: prefer_const_constructors
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:pinball_components/src/pinball_components.dart';
+
+void main() {
+  group('MultiplierState', () {
+    test('supports value equality', () {
+      expect(
+        MultiplierState(
+          value: MultiplierValue.x2,
+          spriteState: MultiplierSpriteState.lit,
+        ),
+        equals(
+          MultiplierState(
+            value: MultiplierValue.x2,
+            spriteState: MultiplierSpriteState.lit,
+          ),
+        ),
+      );
+    });
+
+    group('constructor', () {
+      test('can be instantiated', () {
+        expect(
+          MultiplierState(
+            value: MultiplierValue.x2,
+            spriteState: MultiplierSpriteState.lit,
+          ),
+          isNotNull,
+        );
+      });
+    });
+
+    group('copyWith', () {
+      test(
+        'copies correctly '
+        'when no argument specified',
+        () {
+          const multiplierState = MultiplierState(
+            value: MultiplierValue.x2,
+            spriteState: MultiplierSpriteState.lit,
+          );
+          expect(
+            multiplierState.copyWith(),
+            equals(multiplierState),
+          );
+        },
+      );
+
+      test(
+        'copies correctly '
+        'when all arguments specified',
+        () {
+          const multiplierState = MultiplierState(
+            value: MultiplierValue.x2,
+            spriteState: MultiplierSpriteState.lit,
+          );
+          final otherMultiplierState = MultiplierState(
+            value: MultiplierValue.x2,
+            spriteState: MultiplierSpriteState.dimmed,
+          );
+          expect(multiplierState, isNot(equals(otherMultiplierState)));
+
+          expect(
+            multiplierState.copyWith(
+              spriteState: MultiplierSpriteState.dimmed,
+            ),
+            equals(otherMultiplierState),
+          );
+        },
+      );
+    });
+  });
+}

packages/pinball_components/test/src/components/multiplier/multiplier_test.dart

@@ -0,0 +1,517 @@
+// ignore_for_file: cascade_invocations, prefer_const_constructors
+
+import 'package:bloc_test/bloc_test.dart';
+import 'package:flame/components.dart';
+import 'package:flame_test/flame_test.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:pinball_components/pinball_components.dart';
+
+import '../../../helpers/helpers.dart';
+
+void main() {
+  final bloc = MockMultiplierCubit();
+
+  group('Multiplier', () {
+    TestWidgetsFlutterBinding.ensureInitialized();
+    final assets = [
+      Assets.images.multiplier.x2.lit.keyName,
+      Assets.images.multiplier.x2.dimmed.keyName,
+      Assets.images.multiplier.x3.lit.keyName,
+      Assets.images.multiplier.x3.dimmed.keyName,
+      Assets.images.multiplier.x4.lit.keyName,
+      Assets.images.multiplier.x4.dimmed.keyName,
+      Assets.images.multiplier.x5.lit.keyName,
+      Assets.images.multiplier.x5.dimmed.keyName,
+      Assets.images.multiplier.x6.lit.keyName,
+      Assets.images.multiplier.x6.dimmed.keyName,
+    ];
+    final flameTester = FlameTester(() => TestGame(assets));
+
+    flameTester.test('"x2" loads correctly', (game) async {
+      final multiplier = Multiplier.x2(
+        position: Vector2.zero(),
+        angle: 0,
+      );
+      await game.ensureAdd(multiplier);
+      expect(game.contains(multiplier), isTrue);
+    });
+
+    flameTester.test('"x3" loads correctly', (game) async {
+      final multiplier = Multiplier.x3(
+        position: Vector2.zero(),
+        angle: 0,
+      );
+      await game.ensureAdd(multiplier);
+      expect(game.contains(multiplier), isTrue);
+    });
+
+    flameTester.test('"x4" loads correctly', (game) async {
+      final multiplier = Multiplier.x4(
+        position: Vector2.zero(),
+        angle: 0,
+      );
+      await game.ensureAdd(multiplier);
+      expect(game.contains(multiplier), isTrue);
+    });
+
+    flameTester.test('"x5" loads correctly', (game) async {
+      final multiplier = Multiplier.x5(
+        position: Vector2.zero(),
+        angle: 0,
+      );
+      await game.ensureAdd(multiplier);
+      expect(game.contains(multiplier), isTrue);
+    });
+
+    flameTester.test('"x6" loads correctly', (game) async {
+      final multiplier = Multiplier.x6(
+        position: Vector2.zero(),
+        angle: 0,
+      );
+      await game.ensureAdd(multiplier);
+      expect(game.contains(multiplier), isTrue);
+    });
+
+    group('renders correctly', () {
+      group('x2', () {
+        const multiplierValue = MultiplierValue.x2;
+
+        flameTester.testGameWidget(
+          'lit when bloc state is lit',
+          setUp: (game, tester) async {
+            await game.images.loadAll(assets);
+
+            whenListen(
+              bloc,
+              const Stream<MultiplierState>.empty(),
+              initialState: MultiplierState(
+                value: multiplierValue,
+                spriteState: MultiplierSpriteState.lit,
+              ),
+            );
+
+            final multiplier = Multiplier.test(
+              value: multiplierValue,
+              bloc: bloc,
+            );
+            await game.ensureAdd(multiplier);
+            await tester.pump();
+
+            game.camera.followVector2(Vector2.zero());
+          },
+          verify: (game, tester) async {
+            expect(
+              game
+                  .descendants()
+                  .whereType<MultiplierSpriteGroupComponent>()
+                  .first
+                  .current,
+              MultiplierSpriteState.lit,
+            );
+
+            await expectLater(
+              find.byGame<TestGame>(),
+              matchesGoldenFile('../golden/multipliers/x2-lit.png'),
+            );
+          },
+        );
+
+        flameTester.testGameWidget(
+          'dimmed when bloc state is dimmed',
+          setUp: (game, tester) async {
+            await game.images.loadAll(assets);
+
+            whenListen(
+              bloc,
+              const Stream<MultiplierState>.empty(),
+              initialState: MultiplierState(
+                value: multiplierValue,
+                spriteState: MultiplierSpriteState.dimmed,
+              ),
+            );
+
+            final multiplier = Multiplier.test(
+              value: multiplierValue,
+              bloc: bloc,
+            );
+            await game.ensureAdd(multiplier);
+            await tester.pump();
+
+            game.camera.followVector2(Vector2.zero());
+          },
+          verify: (game, tester) async {
+            expect(
+              game
+                  .descendants()
+                  .whereType<MultiplierSpriteGroupComponent>()
+                  .first
+                  .current,
+              MultiplierSpriteState.dimmed,
+            );
+
+            await expectLater(
+              find.byGame<TestGame>(),
+              matchesGoldenFile('../golden/multipliers/x2-dimmed.png'),
+            );
+          },
+        );
+      });
+
+      group('x3', () {
+        const multiplierValue = MultiplierValue.x3;
+
+        flameTester.testGameWidget(
+          'lit when bloc state is lit',
+          setUp: (game, tester) async {
+            await game.images.loadAll(assets);
+
+            whenListen(
+              bloc,
+              const Stream<MultiplierState>.empty(),
+              initialState: MultiplierState(
+                value: multiplierValue,
+                spriteState: MultiplierSpriteState.lit,
+              ),
+            );
+
+            final multiplier = Multiplier.test(
+              value: multiplierValue,
+              bloc: bloc,
+            );
+            await game.ensureAdd(multiplier);
+            await tester.pump();
+
+            game.camera.followVector2(Vector2.zero());
+          },
+          verify: (game, tester) async {
+            expect(
+              game
+                  .descendants()
+                  .whereType<MultiplierSpriteGroupComponent>()
+                  .first
+                  .current,
+              MultiplierSpriteState.lit,
+            );
+
+            await expectLater(
+              find.byGame<TestGame>(),
+              matchesGoldenFile('../golden/multipliers/x3-lit.png'),
+            );
+          },
+        );
+
+        flameTester.testGameWidget(
+          'dimmed when bloc state is dimmed',
+          setUp: (game, tester) async {
+            await game.images.loadAll(assets);
+
+            whenListen(
+              bloc,
+              const Stream<MultiplierState>.empty(),
+              initialState: MultiplierState(
+                value: multiplierValue,
+                spriteState: MultiplierSpriteState.dimmed,
+              ),
+            );
+
+            final multiplier = Multiplier.test(
+              value: multiplierValue,
+              bloc: bloc,
+            );
+            await game.ensureAdd(multiplier);
+            await tester.pump();
+
+            game.camera.followVector2(Vector2.zero());
+          },
+          verify: (game, tester) async {
+            expect(
+              game
+                  .descendants()
+                  .whereType<MultiplierSpriteGroupComponent>()
+                  .first
+                  .current,
+              MultiplierSpriteState.dimmed,
+            );
+
+            await expectLater(
+              find.byGame<TestGame>(),
+              matchesGoldenFile('../golden/multipliers/x3-dimmed.png'),
+            );
+          },
+        );
+      });
+
+      group('x4', () {
+        const multiplierValue = MultiplierValue.x4;
+
+        flameTester.testGameWidget(
+          'lit when bloc state is lit',
+          setUp: (game, tester) async {
+            await game.images.loadAll(assets);
+
+            whenListen(
+              bloc,
+              const Stream<MultiplierState>.empty(),
+              initialState: MultiplierState(
+                value: multiplierValue,
+                spriteState: MultiplierSpriteState.lit,
+              ),
+            );
+
+            final multiplier = Multiplier.test(
+              value: multiplierValue,
+              bloc: bloc,
+            );
+            await game.ensureAdd(multiplier);
+            await tester.pump();
+
+            game.camera.followVector2(Vector2.zero());
+          },
+          verify: (game, tester) async {
+            expect(
+              game
+                  .descendants()
+                  .whereType<MultiplierSpriteGroupComponent>()
+                  .first
+                  .current,
+              MultiplierSpriteState.lit,
+            );
+
+            await expectLater(
+              find.byGame<TestGame>(),
+              matchesGoldenFile('../golden/multipliers/x4-lit.png'),
+            );
+          },
+        );
+
+        flameTester.testGameWidget(
+          'dimmed when bloc state is dimmed',
+          setUp: (game, tester) async {
+            await game.images.loadAll(assets);
+
+            whenListen(
+              bloc,
+              const Stream<MultiplierState>.empty(),
+              initialState: MultiplierState(
+                value: multiplierValue,
+                spriteState: MultiplierSpriteState.dimmed,
+              ),
+            );
+
+            final multiplier = Multiplier.test(
+              value: multiplierValue,
+              bloc: bloc,
+            );
+            await game.ensureAdd(multiplier);
+            await tester.pump();
+
+            game.camera.followVector2(Vector2.zero());
+          },
+          verify: (game, tester) async {
+            expect(
+              game
+                  .descendants()
+                  .whereType<MultiplierSpriteGroupComponent>()
+                  .first
+                  .current,
+              MultiplierSpriteState.dimmed,
+            );
+
+            await expectLater(
+              find.byGame<TestGame>(),
+              matchesGoldenFile('../golden/multipliers/x4-dimmed.png'),
+            );
+          },
+        );
+      });
+
+      group('x5', () {
+        const multiplierValue = MultiplierValue.x5;
+
+        flameTester.testGameWidget(
+          'lit when bloc state is lit',
+          setUp: (game, tester) async {
+            await game.images.loadAll(assets);
+
+            whenListen(
+              bloc,
+              const Stream<MultiplierState>.empty(),
+              initialState: MultiplierState(
+                value: multiplierValue,
+                spriteState: MultiplierSpriteState.lit,
+              ),
+            );
+
+            final multiplier = Multiplier.test(
+              value: multiplierValue,
+              bloc: bloc,
+            );
+            await game.ensureAdd(multiplier);
+            await tester.pump();
+
+            game.camera.followVector2(Vector2.zero());
+          },
+          verify: (game, tester) async {
+            expect(
+              game
+                  .descendants()
+                  .whereType<MultiplierSpriteGroupComponent>()
+                  .first
+                  .current,
+              MultiplierSpriteState.lit,
+            );
+
+            await expectLater(
+              find.byGame<TestGame>(),
+              matchesGoldenFile('../golden/multipliers/x5-lit.png'),
+            );
+          },
+        );
+
+        flameTester.testGameWidget(
+          'dimmed when bloc state is dimmed',
+          setUp: (game, tester) async {
+            await game.images.loadAll(assets);
+
+            whenListen(
+              bloc,
+              const Stream<MultiplierState>.empty(),
+              initialState: MultiplierState(
+                value: multiplierValue,
+                spriteState: MultiplierSpriteState.dimmed,
+              ),
+            );
+
+            final multiplier = Multiplier.test(
+              value: multiplierValue,
+              bloc: bloc,
+            );
+            await game.ensureAdd(multiplier);
+            await tester.pump();
+
+            game.camera.followVector2(Vector2.zero());
+          },
+          verify: (game, tester) async {
+            expect(
+              game
+                  .descendants()
+                  .whereType<MultiplierSpriteGroupComponent>()
+                  .first
+                  .current,
+              MultiplierSpriteState.dimmed,
+            );
+
+            await expectLater(
+              find.byGame<TestGame>(),
+              matchesGoldenFile('../golden/multipliers/x5-dimmed.png'),
+            );
+          },
+        );
+      });
+
+      group('x6', () {
+        const multiplierValue = MultiplierValue.x6;
+
+        flameTester.testGameWidget(
+          'lit when bloc state is lit',
+          setUp: (game, tester) async {
+            await game.images.loadAll(assets);
+
+            whenListen(
+              bloc,
+              const Stream<MultiplierState>.empty(),
+              initialState: MultiplierState(
+                value: multiplierValue,
+                spriteState: MultiplierSpriteState.lit,
+              ),
+            );
+
+            final multiplier = Multiplier.test(
+              value: multiplierValue,
+              bloc: bloc,
+            );
+            await game.ensureAdd(multiplier);
+            await tester.pump();
+
+            game.camera.followVector2(Vector2.zero());
+          },
+          verify: (game, tester) async {
+            expect(
+              game
+                  .descendants()
+                  .whereType<MultiplierSpriteGroupComponent>()
+                  .first
+                  .current,
+              MultiplierSpriteState.lit,
+            );
+
+            await expectLater(
+              find.byGame<TestGame>(),
+              matchesGoldenFile('../golden/multipliers/x6-lit.png'),
+            );
+          },
+        );
+
+        flameTester.testGameWidget(
+          'dimmed when bloc state is dimmed',
+          setUp: (game, tester) async {
+            await game.images.loadAll(assets);
+
+            whenListen(
+              bloc,
+              const Stream<MultiplierState>.empty(),
+              initialState: MultiplierState(
+                value: multiplierValue,
+                spriteState: MultiplierSpriteState.dimmed,
+              ),
+            );
+
+            final multiplier = Multiplier.test(
+              value: multiplierValue,
+              bloc: bloc,
+            );
+            await game.ensureAdd(multiplier);
+            await tester.pump();
+
+            game.camera.followVector2(Vector2.zero());
+          },
+          verify: (game, tester) async {
+            expect(
+              game
+                  .descendants()
+                  .whereType<MultiplierSpriteGroupComponent>()
+                  .first
+                  .current,
+              MultiplierSpriteState.dimmed,
+            );
+
+            await expectLater(
+              find.byGame<TestGame>(),
+              matchesGoldenFile('../golden/multipliers/x6-dimmed.png'),
+            );
+          },
+        );
+      });
+    });
+
+    flameTester.test('closes bloc when removed', (game) async {
+      whenListen(
+        bloc,
+        const Stream<MultiplierState>.empty(),
+        initialState: MultiplierState(
+          value: MultiplierValue.x2,
+          spriteState: MultiplierSpriteState.dimmed,
+        ),
+      );
+      when(bloc.close).thenAnswer((_) async {});
+      final multiplier = Multiplier.test(value: MultiplierValue.x2, bloc: bloc);
+
+      await game.ensureAdd(multiplier);
+      game.remove(multiplier);
+      await game.ready();
+
+      verify(bloc.close).called(1);
+    });
+  });
+}

test/game/components/multipliers/behaviors/multipliers_behavior_test.dart

@@ -0,0 +1,133 @@
+// ignore_for_file: cascade_invocations, prefer_const_constructors
+
+import 'dart:async';
+
+import 'package:bloc_test/bloc_test.dart';
+import 'package:flame_test/flame_test.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mockingjay/mockingjay.dart';
+import 'package:pinball/game/components/multipliers/behaviors/behaviors.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+
+import '../../../../helpers/helpers.dart';
+
+void main() {
+  TestWidgetsFlutterBinding.ensureInitialized();
+  final assets = [
+    Assets.images.multiplier.x2.lit.keyName,
+    Assets.images.multiplier.x2.dimmed.keyName,
+    Assets.images.multiplier.x3.lit.keyName,
+    Assets.images.multiplier.x3.dimmed.keyName,
+    Assets.images.multiplier.x4.lit.keyName,
+    Assets.images.multiplier.x4.dimmed.keyName,
+    Assets.images.multiplier.x5.lit.keyName,
+    Assets.images.multiplier.x5.dimmed.keyName,
+    Assets.images.multiplier.x6.lit.keyName,
+    Assets.images.multiplier.x6.dimmed.keyName,
+  ];
+
+  group('MultipliersBehavior', () {
+    late GameBloc gameBloc;
+
+    setUp(() {
+      registerFallbackValue(MockComponent());
+      gameBloc = MockGameBloc();
+      whenListen(
+        gameBloc,
+        const Stream<GameState>.empty(),
+        initialState: const GameState.initial(),
+      );
+    });
+
+    final flameBlocTester = FlameBlocTester<PinballGame, GameBloc>(
+      gameBuilder: EmptyPinballTestGame.new,
+      blocBuilder: () => gameBloc,
+      assets: assets,
+    );
+
+    group('listenWhen', () {
+      test('is true when the multiplier has changed', () {
+        final state = GameState(
+          score: 10,
+          multiplier: 2,
+          rounds: 0,
+          bonusHistory: const [],
+        );
+
+        final previous = GameState.initial();
+        expect(
+          MultipliersBehavior().listenWhen(previous, state),
+          isTrue,
+        );
+      });
+
+      test('is false when the multiplier state is the same', () {
+        final state = GameState(
+          score: 10,
+          multiplier: 1,
+          rounds: 0,
+          bonusHistory: const [],
+        );
+
+        final previous = GameState.initial();
+        expect(
+          MultipliersBehavior().listenWhen(previous, state),
+          isFalse,
+        );
+      });
+    });
+
+    group('onNewState', () {
+      flameBlocTester.testGameWidget(
+        "calls 'next' once per each multiplier when GameBloc emit state",
+        setUp: (game, tester) async {
+          final behavior = MultipliersBehavior();
+          final parent = Multipliers.test();
+          final multiplierX2Cubit = MockMultiplierCubit();
+          final multiplierX3Cubit = MockMultiplierCubit();
+          final multipliers = [
+            Multiplier.test(
+              value: MultiplierValue.x2,
+              bloc: multiplierX2Cubit,
+            ),
+            Multiplier.test(
+              value: MultiplierValue.x3,
+              bloc: multiplierX3Cubit,
+            ),
+          ];
+
+          whenListen(
+            multiplierX2Cubit,
+            const Stream<MultiplierState>.empty(),
+            initialState: MultiplierState.initial(MultiplierValue.x2),
+          );
+          when(() => multiplierX2Cubit.next(any())).thenAnswer((_) async {});
+
+          whenListen(
+            multiplierX3Cubit,
+            const Stream<MultiplierState>.empty(),
+            initialState: MultiplierState.initial(MultiplierValue.x2),
+          );
+          when(() => multiplierX3Cubit.next(any())).thenAnswer((_) async {});
+
+          await parent.addAll(multipliers);
+          await game.ensureAdd(parent);
+          await parent.ensureAdd(behavior);
+
+          await tester.pump();
+
+          behavior.onNewState(
+            GameState.initial().copyWith(multiplier: 2),
+          );
+
+          for (final multiplier in multipliers) {
+            verify(
+              () => multiplier.bloc.next(any()),
+            ).called(1);
+          }
+        },
+      );
+    });
+  });
+}

test/game/components/multipliers/multipliers_test.dart

@@ -0,0 +1,63 @@
+// ignore_for_file: cascade_invocations
+
+import 'package:flame_test/flame_test.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+
+import '../../../helpers/helpers.dart';
+
+void main() {
+  TestWidgetsFlutterBinding.ensureInitialized();
+  final assets = [
+    Assets.images.multiplier.x2.lit.keyName,
+    Assets.images.multiplier.x2.dimmed.keyName,
+    Assets.images.multiplier.x3.lit.keyName,
+    Assets.images.multiplier.x3.dimmed.keyName,
+    Assets.images.multiplier.x4.lit.keyName,
+    Assets.images.multiplier.x4.dimmed.keyName,
+    Assets.images.multiplier.x5.lit.keyName,
+    Assets.images.multiplier.x5.dimmed.keyName,
+    Assets.images.multiplier.x6.lit.keyName,
+    Assets.images.multiplier.x6.dimmed.keyName,
+  ];
+
+  late GameBloc gameBloc;
+
+  setUp(() {
+    gameBloc = GameBloc();
+  });
+
+  final flameBlocTester = FlameBlocTester<PinballGame, GameBloc>(
+    gameBuilder: EmptyPinballTestGame.new,
+    blocBuilder: () => gameBloc,
+    assets: assets,
+  );
+
+  group('Multipliers', () {
+    flameBlocTester.testGameWidget(
+      'loads correctly',
+      setUp: (game, tester) async {
+        final multipliersGroup = Multipliers();
+        await game.ensureAdd(multipliersGroup);
+
+        expect(game.contains(multipliersGroup), isTrue);
+      },
+    );
+
+    group('loads', () {
+      flameBlocTester.testGameWidget(
+        'five Multiplier',
+        setUp: (game, tester) async {
+          final multipliersGroup = Multipliers();
+          await game.ensureAdd(multipliersGroup);
+
+          expect(
+            multipliersGroup.descendants().whereType<Multiplier>().length,
+            equals(5),
+          );
+        },
+      );
+    });
+  });
+}

test/game/pinball_game_test.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: cascade_invocations
 
+import 'package:bloc_test/bloc_test.dart';
 import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 import 'package:flame_test/flame_test.dart';
@@ -54,6 +55,16 @@ void main() {
     Assets.images.launchRamp.ramp.keyName,
     Assets.images.launchRamp.foregroundRailing.keyName,
     Assets.images.launchRamp.backgroundRailing.keyName,
+    Assets.images.multiplier.x2.lit.keyName,
+    Assets.images.multiplier.x2.dimmed.keyName,
+    Assets.images.multiplier.x3.lit.keyName,
+    Assets.images.multiplier.x3.dimmed.keyName,
+    Assets.images.multiplier.x4.lit.keyName,
+    Assets.images.multiplier.x4.dimmed.keyName,
+    Assets.images.multiplier.x5.lit.keyName,
+    Assets.images.multiplier.x5.dimmed.keyName,
+    Assets.images.multiplier.x6.lit.keyName,
+    Assets.images.multiplier.x6.dimmed.keyName,
     Assets.images.plunger.plunger.keyName,
     Assets.images.plunger.rocket.keyName,
     Assets.images.signpost.inactive.keyName,
@@ -94,6 +105,17 @@ void main() {
     Assets.images.sparky.bumper.c.inactive.keyName,
   ];
 
+  late GameBloc gameBloc;
+
+  setUp(() {
+    gameBloc = MockGameBloc();
+    whenListen(
+      gameBloc,
+      const Stream<GameState>.empty(),
+      initialState: const GameState.initial(),
+    );
+  });
+
   final flameTester = FlameTester(
     () => PinballTestGame(assets: assets),
   );
@@ -101,11 +123,16 @@ void main() {
     () => DebugPinballTestGame(assets: assets),
   );
 
+  final flameBlocTester = FlameBlocTester<PinballGame, GameBloc>(
+    gameBuilder: () => PinballTestGame(assets: assets),
+    blocBuilder: () => gameBloc,
+  );
+
   group('PinballGame', () {
     group('components', () {
       // TODO(alestiago): tests that Blueprints get added once the Blueprint
       // class is removed.
-      flameTester.test(
+      flameBlocTester.test(
         'has only one Drain',
         (game) async {
           await game.ready();
@@ -116,11 +143,10 @@ void main() {
         },
       );
 
-      flameTester.test(
+      flameBlocTester.test(
         'has only one BottomGroup',
         (game) async {
           await game.ready();
-
           expect(
             game.children.whereType<BottomGroup>().length,
             equals(1),
@@ -128,7 +154,7 @@ void main() {
         },
       );
 
-      flameTester.test(
+      flameBlocTester.test(
         'has only one Plunger',
         (game) async {
           await game.ready();
@@ -139,7 +165,7 @@ void main() {
         },
       );
 
-      flameTester.test('has one FlutterForest', (game) async {
+      flameBlocTester.test('has one FlutterForest', (game) async {
         await game.ready();
         expect(
           game.children.whereType<FlutterForest>().length,
@@ -147,7 +173,7 @@ void main() {
         );
       });
 
-      flameTester.test(
+      flameBlocTester.test(
         'one GoogleWord',
         (game) async {
           await game.ready();

test/helpers/mocks.dart

@@ -64,6 +64,8 @@ class MockFilter extends Mock implements Filter {}
 
 class MockFixture extends Mock implements Fixture {}
 
+class MockComponent extends Mock implements Component {}
+
 class MockComponentSet extends Mock implements ComponentSet {}
 
 class MockDashNestBumper extends Mock implements DashNestBumper {}
@@ -86,3 +88,9 @@ class MockGameFlowController extends Mock implements GameFlowController {}
 class MockAndroidBumper extends Mock implements AndroidBumper {}
 
 class MockSparkyBumper extends Mock implements SparkyBumper {}
+
+class MockMultiplier extends Mock implements Multiplier {}
+
+class MockMultipliersGroup extends Mock implements Multipliers {}
+
+class MockMultiplierCubit extends Mock implements MultiplierCubit {}