feat: add board background asset (#270)

* feat: add board background sprite

* test: board background sprite

* fix: ignore coverage for dead code

* fix: swap comment order for lint

* fix: comment unused code

* fix: remove unused import 🤦‍♀️

lib/game/components/android_acres.dart

@@ -23,7 +23,7 @@ class AndroidAcres extends Blueprint {
               children: [
                 ScoringBehavior(points: 20000),
               ],
-            )..initialPosition = Vector2(-32.6, -9.2),
+            )..initialPosition = Vector2(-32.8, -9.2),
             AndroidBumper.cow(
               children: [
                 ScoringBehavior(points: 20),

lib/game/game_assets.dart

@@ -13,6 +13,7 @@ extension PinballGameAssetsX on PinballGame {
     const dinoTheme = DinoTheme();
 
     return [
+      images.load(components.Assets.images.boardBackground.keyName),
       images.load(components.Assets.images.ball.ball.keyName),
       images.load(components.Assets.images.ball.flameEffect.keyName),
       images.load(components.Assets.images.signpost.inactive.keyName),

lib/game/pinball_game.dart

@@ -9,11 +9,10 @@ import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball/game/game.dart';
-import 'package:pinball/gen/assets.gen.dart';
 import 'package:pinball_audio/pinball_audio.dart';
-import 'package:pinball_components/pinball_components.dart' hide Assets;
+import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
-import 'package:pinball_theme/pinball_theme.dart' hide Assets;
+import 'package:pinball_theme/pinball_theme.dart';
 
 class PinballGame extends Forge2DGame
     with
@@ -46,6 +45,7 @@ class PinballGame extends Forge2DGame
     unawaited(add(gameFlowController = GameFlowController(this)));
     unawaited(add(CameraController(this)));
     unawaited(add(Backboard.waiting(position: Vector2(0, -88))));
+    await add(BoardBackgroundSpriteComponent());
     await add(Drain());
     await add(BottomGroup());
     unawaited(addFromBlueprint(Boundaries()));
@@ -185,26 +185,25 @@ class DebugPinballGame extends PinballGame with FPSCounter {
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-    await _loadBackground();
     await add(_DebugInformation());
   }
 
-  // TODO(alestiago): Move to PinballGame once we have the real background
+  // TODO(allisonryan0002): Remove after google letters have been correctly
-  // component.
+  // placed.
-  Future<void> _loadBackground() async {
+  // Future<void> _loadBackground() async {
-    final sprite = await loadSprite(
+  //   final sprite = await loadSprite(
-      Assets.images.components.background.path,
+  //     Assets.images.components.background.path,
-    );
+  //   );
-    final spriteComponent = SpriteComponent(
+  //   final spriteComponent = SpriteComponent(
-      sprite: sprite,
+  //     sprite: sprite,
-      size: Vector2(120, 160),
+  //     size: Vector2(120, 160),
-      anchor: Anchor.center,
+  //     anchor: Anchor.center,
-    )
+  //   )
-      ..position = Vector2(0, -7.8)
+  //     ..position = Vector2(0, -7.8)
-      ..priority = RenderPriority.background;
+  //     ..priority = RenderPriority.boardBackground;
-
+
-    await add(spriteComponent);
+  //   await add(spriteComponent);
-  }
+  // }
 
   @override
   void onTapUp(TapUpInfo info) {

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

@@ -14,6 +14,10 @@ class $AssetsImagesGen {
   $AssetsImagesBackboardGen get backboard => const $AssetsImagesBackboardGen();
   $AssetsImagesBallGen get ball => const $AssetsImagesBallGen();
   $AssetsImagesBaseboardGen get baseboard => const $AssetsImagesBaseboardGen();
+
+  /// File path: assets/images/board-background.png
+  AssetGenImage get boardBackground =>
+      const AssetGenImage('assets/images/board-background.png');
   $AssetsImagesBoundaryGen get boundary => const $AssetsImagesBoundaryGen();
   $AssetsImagesDashGen get dash => const $AssetsImagesDashGen();
   $AssetsImagesDinoGen get dino => const $AssetsImagesDinoGen();

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

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

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

@@ -3,6 +3,7 @@ export 'android_spaceship.dart';
 export 'backboard/backboard.dart';
 export 'ball.dart';
 export 'baseboard.dart';
+export 'board_background_sprite_component.dart';
 export 'board_dimensions.dart';
 export 'board_side.dart';
 export 'boundaries.dart';

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

@@ -33,13 +33,13 @@ abstract class RenderPriority {
 
   // TODO(allisonryan0002): fix this magic priority. Could bump all priorities
   // so there are no negatives.
-  static const int background = 3 * _below + _base;
+  static const int boardBackground = 3 * _below + _base;
 
   // Boundaries
 
   static const int bottomBoundary = _above + dinoBottomWall;
 
-  static const int outerBoundary = _above + background;
+  static const int outerBoundary = _above + boardBackground;
 
   static const int outerBottomBoundary = _above + rocket;
 

packages/pinball_components/pubspec.yaml

@@ -45,6 +45,7 @@ flutter:
         - asset: fonts/PixeloidMono-1G8ae.ttf
 
   assets:
+    - assets/images/
     - assets/images/ball/
     - assets/images/baseboard/
     - assets/images/boundary/

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

@@ -0,0 +1,48 @@
+// ignore_for_file: cascade_invocations
+
+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 '../../helpers/helpers.dart';
+
+void main() {
+  TestWidgetsFlutterBinding.ensureInitialized();
+  final assets = [
+    Assets.images.boardBackground.keyName,
+  ];
+  final flameTester = FlameTester(() => TestGame(assets));
+
+  group('BoardBackgroundSpriteComponent', () {
+    flameTester.test(
+      'loads correctly',
+      (game) async {
+        final boardBackground = BoardBackgroundSpriteComponent();
+        await game.ensureAdd(boardBackground);
+
+        expect(game.contains(boardBackground), isTrue);
+      },
+    );
+
+    flameTester.testGameWidget(
+      'renders correctly',
+      setUp: (game, tester) async {
+        await game.images.loadAll(assets);
+        final boardBackground = BoardBackgroundSpriteComponent();
+        await game.ensureAdd(boardBackground);
+        await tester.pump();
+
+        game.camera
+          ..followVector2(Vector2.zero())
+          ..zoom = 3.7;
+      },
+      verify: (game, tester) async {
+        await expectLater(
+          find.byGame<TestGame>(),
+          matchesGoldenFile('golden/board-background.png'),
+        );
+      },
+    );
+  });
+}

test/game/pinball_game_test.dart

@@ -24,6 +24,7 @@ void main() {
     Assets.images.backboard.backboardScores.keyName,
     Assets.images.backboard.backboardGameOver.keyName,
     Assets.images.backboard.display.keyName,
+    Assets.images.boardBackground.keyName,
     Assets.images.ball.ball.keyName,
     Assets.images.ball.flameEffect.keyName,
     Assets.images.baseboard.left.keyName,