feat: included debug Background image (#103)

* feat: added design background

* refactor: moved Background to DebugGame

* feat: included priority value

* docs: updated TODO comment

lib/game/game_assets.dart

@@ -9,6 +9,7 @@ extension PinballGameAssetsX on PinballGame {
     await Future.wait([
       images.load(components.Assets.images.ball.keyName),
       images.load(Assets.images.components.flipper.path),
+      images.load(Assets.images.components.background.path),
       images.load(Assets.images.components.spaceship.androidTop.path),
       images.load(Assets.images.components.spaceship.androidBottom.path),
       images.load(Assets.images.components.spaceship.lower.path),

lib/game/pinball_game.dart

@@ -2,13 +2,15 @@
 import 'dart:async';
 import 'dart:math' as math;
 
+import 'package:flame/components.dart';
 import 'package:flame/extensions.dart';
 import 'package:flame/input.dart';
 import 'package:flame_bloc/flame_bloc.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball/flame/blueprint.dart';
 import 'package:pinball/game/game.dart';
-import 'package:pinball_theme/pinball_theme.dart';
+import 'package:pinball/gen/assets.gen.dart';
+import 'package:pinball_theme/pinball_theme.dart' hide Assets;
 
 class PinballGame extends Forge2DGame
     with FlameBloc, HasKeyboardHandlerComponents {
@@ -48,7 +50,7 @@ class PinballGame extends Forge2DGame
 
     // Fix camera on the center of the board.
     camera
-      ..followVector2(Vector2.zero())
+      ..followVector2(Vector2(0, -7.8))
       ..zoom = size.y / 16;
   }
 
@@ -93,6 +95,29 @@ class PinballGame extends Forge2DGame
 class DebugPinballGame extends PinballGame with TapDetector {
   DebugPinballGame({required PinballTheme theme}) : super(theme: theme);
 
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    await _loadBackground();
+  }
+
+  // TODO(alestiago): Move to PinballGame once we have the real background
+  // component.
+  Future<void> _loadBackground() async {
+    final sprite = await loadSprite(
+      Assets.images.components.background.path,
+    );
+    final spriteComponent = SpriteComponent(
+      sprite: sprite,
+      size: Vector2(120, 160),
+      anchor: Anchor.center,
+    )
+      ..position = Vector2(0, -7.8)
+      ..priority = -1;
+
+    await add(spriteComponent);
+  }
+
   @override
   void onTapUp(TapUpInfo info) {
     addFromBlueprint(BallBlueprint(position: info.eventPosition.game));

lib/gen/assets.gen.dart

@@ -3,6 +3,8 @@
 ///  FlutterGen
 /// *****************************************************
 
+// ignore_for_file: directives_ordering,unnecessary_import
+
 import 'package:flutter/widgets.dart';
 
 class $AssetsImagesGen {
@@ -15,8 +17,14 @@ class $AssetsImagesGen {
 class $AssetsImagesComponentsGen {
   const $AssetsImagesComponentsGen();
 
+  /// File path: assets/images/components/background.png
+  AssetGenImage get background =>
+      const AssetGenImage('assets/images/components/background.png');
+
+  /// File path: assets/images/components/flipper.png
   AssetGenImage get flipper =>
       const AssetGenImage('assets/images/components/flipper.png');
+
   $AssetsImagesComponentsSpaceshipGen get spaceship =>
       const $AssetsImagesComponentsSpaceshipGen();
 }
@@ -24,14 +32,23 @@ class $AssetsImagesComponentsGen {
 class $AssetsImagesComponentsSpaceshipGen {
   const $AssetsImagesComponentsSpaceshipGen();
 
+  /// File path: assets/images/components/spaceship/android-bottom.png
   AssetGenImage get androidBottom => const AssetGenImage(
       'assets/images/components/spaceship/android-bottom.png');
+
+  /// File path: assets/images/components/spaceship/android-top.png
   AssetGenImage get androidTop =>
       const AssetGenImage('assets/images/components/spaceship/android-top.png');
+
+  /// File path: assets/images/components/spaceship/lower.png
   AssetGenImage get lower =>
       const AssetGenImage('assets/images/components/spaceship/lower.png');
+
+  /// File path: assets/images/components/spaceship/saucer.png
   AssetGenImage get saucer =>
       const AssetGenImage('assets/images/components/spaceship/saucer.png');
+
+  /// File path: assets/images/components/spaceship/upper.png
   AssetGenImage get upper =>
       const AssetGenImage('assets/images/components/spaceship/upper.png');
 }