chore: add google letter assets

lib/game/components/google_word.dart

@@ -53,7 +53,7 @@ class _GoogleWordController extends ComponentController<GoogleWord>
 
   final _activatedLetters = <GoogleLetter>{};
 
-  void activate(GoogleLetter googleLetter) {
+  Future<void> activate(GoogleLetter googleLetter) async {
     if (!_activatedLetters.add(googleLetter)) return;
 
     googleLetter.activate();
@@ -62,12 +62,30 @@ class _GoogleWordController extends ComponentController<GoogleWord>
     if (activatedBonus) {
       gameRef.audio.googleBonus();
       gameRef.read<GameBloc>().add(const BonusActivated(GameBonus.googleWord));
-      component.children.whereType<GoogleLetter>().forEach(
-            (letter) => letter.deactivate(),
-          );
+      await _bonusAnimation();
       _activatedLetters.clear();
     }
   }
+
+  Future<void> _bonusAnimation() async {
+    const blinkDuration = Duration(milliseconds: 300);
+    const blinkCount = 4;
+    final googleLetters = component.children.whereType<GoogleLetter>();
+    var shouldActivate = false;
+
+    await Future<void>.delayed(blinkDuration);
+    for (var i = 1; i < blinkCount * 2; i++) {
+      for (final letter in googleLetters) {
+        if (shouldActivate) {
+          letter.activate();
+        } else {
+          letter.deactivate();
+        }
+      }
+      shouldActivate = !shouldActivate;
+      await Future<void>.delayed(blinkDuration);
+    }
+  }
 }
 
 /// Activates a [GoogleLetter] when it contacts with a [Ball].

lib/game/game_assets.dart

@@ -94,12 +94,18 @@ extension PinballGameAssetsX on PinballGame {
       images.load(components.Assets.images.sparky.bumper.c.inactive.keyName),
       images.load(components.Assets.images.backboard.backboardScores.keyName),
       images.load(components.Assets.images.backboard.backboardGameOver.keyName),
-      images.load(components.Assets.images.googleWord.letter1.keyName),
-      images.load(components.Assets.images.googleWord.letter2.keyName),
-      images.load(components.Assets.images.googleWord.letter3.keyName),
-      images.load(components.Assets.images.googleWord.letter4.keyName),
-      images.load(components.Assets.images.googleWord.letter5.keyName),
-      images.load(components.Assets.images.googleWord.letter6.keyName),
+      images.load(components.Assets.images.googleWord.letter1.active.keyName),
+      images.load(components.Assets.images.googleWord.letter1.inactive.keyName),
+      images.load(components.Assets.images.googleWord.letter2.active.keyName),
+      images.load(components.Assets.images.googleWord.letter2.inactive.keyName),
+      images.load(components.Assets.images.googleWord.letter3.active.keyName),
+      images.load(components.Assets.images.googleWord.letter3.inactive.keyName),
+      images.load(components.Assets.images.googleWord.letter4.active.keyName),
+      images.load(components.Assets.images.googleWord.letter4.inactive.keyName),
+      images.load(components.Assets.images.googleWord.letter5.active.keyName),
+      images.load(components.Assets.images.googleWord.letter5.inactive.keyName),
+      images.load(components.Assets.images.googleWord.letter6.active.keyName),
+      images.load(components.Assets.images.googleWord.letter6.inactive.keyName),
       images.load(components.Assets.images.backboard.display.keyName),
       images.load(dashTheme.leaderboardIcon.keyName),
       images.load(sparkyTheme.leaderboardIcon.keyName),

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

@@ -144,29 +144,18 @@ class $AssetsImagesFlipperGen {
 class $AssetsImagesGoogleWordGen {
   const $AssetsImagesGoogleWordGen();
 
-  /// File path: assets/images/google_word/letter1.png
-  AssetGenImage get letter1 =>
-      const AssetGenImage('assets/images/google_word/letter1.png');
-
-  /// File path: assets/images/google_word/letter2.png
-  AssetGenImage get letter2 =>
-      const AssetGenImage('assets/images/google_word/letter2.png');
-
-  /// File path: assets/images/google_word/letter3.png
-  AssetGenImage get letter3 =>
-      const AssetGenImage('assets/images/google_word/letter3.png');
-
-  /// File path: assets/images/google_word/letter4.png
-  AssetGenImage get letter4 =>
-      const AssetGenImage('assets/images/google_word/letter4.png');
-
-  /// File path: assets/images/google_word/letter5.png
-  AssetGenImage get letter5 =>
-      const AssetGenImage('assets/images/google_word/letter5.png');
-
-  /// File path: assets/images/google_word/letter6.png
-  AssetGenImage get letter6 =>
-      const AssetGenImage('assets/images/google_word/letter6.png');
+  $AssetsImagesGoogleWordLetter1Gen get letter1 =>
+      const $AssetsImagesGoogleWordLetter1Gen();
+  $AssetsImagesGoogleWordLetter2Gen get letter2 =>
+      const $AssetsImagesGoogleWordLetter2Gen();
+  $AssetsImagesGoogleWordLetter3Gen get letter3 =>
+      const $AssetsImagesGoogleWordLetter3Gen();
+  $AssetsImagesGoogleWordLetter4Gen get letter4 =>
+      const $AssetsImagesGoogleWordLetter4Gen();
+  $AssetsImagesGoogleWordLetter5Gen get letter5 =>
+      const $AssetsImagesGoogleWordLetter5Gen();
+  $AssetsImagesGoogleWordLetter6Gen get letter6 =>
+      const $AssetsImagesGoogleWordLetter6Gen();
 }
 
 class $AssetsImagesKickerGen {
@@ -302,6 +291,78 @@ class $AssetsImagesDashBumperGen {
       const $AssetsImagesDashBumperMainGen();
 }
 
+class $AssetsImagesGoogleWordLetter1Gen {
+  const $AssetsImagesGoogleWordLetter1Gen();
+
+  /// File path: assets/images/google_word/letter1/active.png
+  AssetGenImage get active =>
+      const AssetGenImage('assets/images/google_word/letter1/active.png');
+
+  /// File path: assets/images/google_word/letter1/inactive.png
+  AssetGenImage get inactive =>
+      const AssetGenImage('assets/images/google_word/letter1/inactive.png');
+}
+
+class $AssetsImagesGoogleWordLetter2Gen {
+  const $AssetsImagesGoogleWordLetter2Gen();
+
+  /// File path: assets/images/google_word/letter2/active.png
+  AssetGenImage get active =>
+      const AssetGenImage('assets/images/google_word/letter2/active.png');
+
+  /// File path: assets/images/google_word/letter2/inactive.png
+  AssetGenImage get inactive =>
+      const AssetGenImage('assets/images/google_word/letter2/inactive.png');
+}
+
+class $AssetsImagesGoogleWordLetter3Gen {
+  const $AssetsImagesGoogleWordLetter3Gen();
+
+  /// File path: assets/images/google_word/letter3/active.png
+  AssetGenImage get active =>
+      const AssetGenImage('assets/images/google_word/letter3/active.png');
+
+  /// File path: assets/images/google_word/letter3/inactive.png
+  AssetGenImage get inactive =>
+      const AssetGenImage('assets/images/google_word/letter3/inactive.png');
+}
+
+class $AssetsImagesGoogleWordLetter4Gen {
+  const $AssetsImagesGoogleWordLetter4Gen();
+
+  /// File path: assets/images/google_word/letter4/active.png
+  AssetGenImage get active =>
+      const AssetGenImage('assets/images/google_word/letter4/active.png');
+
+  /// File path: assets/images/google_word/letter4/inactive.png
+  AssetGenImage get inactive =>
+      const AssetGenImage('assets/images/google_word/letter4/inactive.png');
+}
+
+class $AssetsImagesGoogleWordLetter5Gen {
+  const $AssetsImagesGoogleWordLetter5Gen();
+
+  /// File path: assets/images/google_word/letter5/active.png
+  AssetGenImage get active =>
+      const AssetGenImage('assets/images/google_word/letter5/active.png');
+
+  /// File path: assets/images/google_word/letter5/inactive.png
+  AssetGenImage get inactive =>
+      const AssetGenImage('assets/images/google_word/letter5/inactive.png');
+}
+
+class $AssetsImagesGoogleWordLetter6Gen {
+  const $AssetsImagesGoogleWordLetter6Gen();
+
+  /// File path: assets/images/google_word/letter6/active.png
+  AssetGenImage get active =>
+      const AssetGenImage('assets/images/google_word/letter6/active.png');
+
+  /// File path: assets/images/google_word/letter6/inactive.png
+  AssetGenImage get inactive =>
+      const AssetGenImage('assets/images/google_word/letter6/inactive.png');
+}
+
 class $AssetsImagesSpaceshipRailGen {
   const $AssetsImagesSpaceshipRailGen();
 

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

@@ -1,5 +1,4 @@
 import 'package:flame/components.dart';
-import 'package:flame/effects.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
@@ -10,19 +9,17 @@ import 'package:pinball_components/pinball_components.dart';
 class GoogleLetter extends BodyComponent with InitialPosition {
   /// {@macro google_letter}
   GoogleLetter(int index)
-      : _sprite = _GoogleLetterSprite(
-          _GoogleLetterSprite.spritePaths[index],
+      : _sprite = _GoogleLetterSpriteGroupComponent(
+          _GoogleLetterSpriteGroupComponent.spritePaths[index],
         );
 
-  final _GoogleLetterSprite _sprite;
+  final _GoogleLetterSpriteGroupComponent _sprite;
 
-  /// Activates this [GoogleLetter].
-  // TODO(alestiago): Improve doc comment once activate and deactivate
-  // are implemented with the actual assets.
-  Future<void> activate() => _sprite.activate();
+  /// Displays active sprite for this [GoogleLetter].
+  void activate() => _sprite.activate();
 
-  /// Deactivates this [GoogleLetter].
-  Future<void> deactivate() => _sprite.deactivate();
+  /// Displays inactive sprite for this [GoogleLetter].
+  void deactivate() => _sprite.deactivate();
 
   @override
   Future<void> onLoad() async {
@@ -46,53 +43,90 @@ class GoogleLetter extends BodyComponent with InitialPosition {
   }
 }
 
-class _GoogleLetterSprite extends SpriteComponent with HasGameRef {
-  _GoogleLetterSprite(String path) : _path = path;
+/// Indicates the [GoogleLetter]'s current sprite state.
+@visibleForTesting
+enum GoogleLetterSpriteState {
+  /// A lit up letter.
+  active,
 
-  static final spritePaths = [
-    Assets.images.googleWord.letter1.keyName,
-    Assets.images.googleWord.letter2.keyName,
-    Assets.images.googleWord.letter3.keyName,
-    Assets.images.googleWord.letter4.keyName,
-    Assets.images.googleWord.letter5.keyName,
-    Assets.images.googleWord.letter6.keyName,
+  /// A dimmed letter.
+  inactive,
+}
+
+class _GoogleLetterSpriteGroupComponent
+    extends SpriteGroupComponent<GoogleLetterSpriteState> with HasGameRef {
+  _GoogleLetterSpriteGroupComponent(
+    Map<GoogleLetterSpriteState, String> statePaths,
+  )   : _statePaths = statePaths,
+        super(anchor: Anchor.center);
+
+  static final spritePaths = <Map<GoogleLetterSpriteState, String>>[
+    {
+      GoogleLetterSpriteState.active:
+          Assets.images.googleWord.letter1.active.keyName,
+      GoogleLetterSpriteState.inactive:
+          Assets.images.googleWord.letter1.inactive.keyName,
+    },
+    {
+      GoogleLetterSpriteState.active:
+          Assets.images.googleWord.letter2.active.keyName,
+      GoogleLetterSpriteState.inactive:
+          Assets.images.googleWord.letter2.inactive.keyName,
+    },
+    {
+      GoogleLetterSpriteState.active:
+          Assets.images.googleWord.letter3.active.keyName,
+      GoogleLetterSpriteState.inactive:
+          Assets.images.googleWord.letter3.inactive.keyName,
+    },
+    {
+      GoogleLetterSpriteState.active:
+          Assets.images.googleWord.letter4.active.keyName,
+      GoogleLetterSpriteState.inactive:
+          Assets.images.googleWord.letter4.inactive.keyName,
+    },
+    {
+      GoogleLetterSpriteState.active:
+          Assets.images.googleWord.letter5.active.keyName,
+      GoogleLetterSpriteState.inactive:
+          Assets.images.googleWord.letter5.inactive.keyName,
+    },
+    {
+      GoogleLetterSpriteState.active:
+          Assets.images.googleWord.letter6.active.keyName,
+      GoogleLetterSpriteState.inactive:
+          Assets.images.googleWord.letter6.inactive.keyName,
+    },
   ];
 
-  final String _path;
+  final Map<GoogleLetterSpriteState, String> _statePaths;
 
-  // TODO(alestiago): Correctly implement activate and deactivate once the
-  // assets are provided.
-  Future<void> activate() async {
-    await add(
-      _GoogleLetterColorEffect(color: Colors.green),
-    );
+  void activate() {
+    current = GoogleLetterSpriteState.active;
   }
 
-  Future<void> deactivate() async {
-    await add(
-      _GoogleLetterColorEffect(color: Colors.red),
-    );
+  void deactivate() {
+    current = GoogleLetterSpriteState.inactive;
   }
 
   @override
   Future<void> onLoad() async {
     await super.onLoad();
 
-    // TODO(alestiago): Used cached assets.
-    final sprite = await gameRef.loadSprite(_path);
-    this.sprite = sprite;
-    // TODO(alestiago): Size correctly once the assets are provided.
-    size = sprite.originalSize / 5;
-    anchor = Anchor.center;
-  }
-}
+    paint = Paint()..isAntiAlias = false;
 
-class _GoogleLetterColorEffect extends ColorEffect {
-  _GoogleLetterColorEffect({
-    required Color color,
-  }) : super(
-          color,
-          const Offset(0, 1),
-          EffectController(duration: 0.25),
-        );
+    final sprites = {
+      GoogleLetterSpriteState.active: Sprite(
+        gameRef.images.fromCache(_statePaths[GoogleLetterSpriteState.active]!),
+      ),
+      GoogleLetterSpriteState.inactive: Sprite(
+        gameRef.images
+            .fromCache(_statePaths[GoogleLetterSpriteState.inactive]!),
+      ),
+    };
+    this.sprites = sprites;
+
+    current = GoogleLetterSpriteState.inactive;
+    size = sprites[current]!.originalSize / 10;
+  }
 }

packages/pinball_components/pubspec.yaml

@@ -67,7 +67,12 @@ flutter:
     - assets/images/sparky/bumper/b/
     - assets/images/sparky/bumper/c/
     - assets/images/backboard/
-    - assets/images/google_word/
+    - assets/images/google_word/letter1/
+    - assets/images/google_word/letter2/
+    - assets/images/google_word/letter3/
+    - assets/images/google_word/letter4/
+    - assets/images/google_word/letter5/
+    - assets/images/google_word/letter6/
     - assets/images/signpost/
 
 flutter_gen: