adding backboard stories

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

@@ -4,10 +4,11 @@ import 'package:pinball_components/pinball_components.dart';
 /// {@template backboard}
 /// The [Backboard] of the pinball machine.
 /// {@endtemplate}
-class Backboard extends SpriteComponent with HasGameRef {
+class Backboard extends PositionComponent with HasGameRef {
   /// {@macro backboard}
   Backboard({
     required Vector2 position,
+    this.startsAtWaiting = true,
   }) : super(
           // TODO(erickzanardo): remove multiply after
           // https://github.com/flame-engine/flame/pull/1506 is merged
@@ -15,26 +16,49 @@ class Backboard extends SpriteComponent with HasGameRef {
           anchor: Anchor.bottomCenter,
         );
 
+  /// If true will start at the waiting mode
+  final bool startsAtWaiting;
+
   @override
   Future<void> onLoad() async {
+    if (startsAtWaiting) {
       await waitingMode();
+    } else {
+      await gameOverMode();
+    }
   }
 
   /// Puts the Backboard in waiting mode, where the scoreboard is shown.
   Future<void> waitingMode() async {
+    children.removeWhere((element) => true);
     final sprite = await gameRef.loadSprite(
       Assets.images.backboard.backboardScores.keyName,
     );
-    size = sprite.originalSize / 10;
-    this.sprite = sprite;
+    await add(
+      SpriteComponent(
+        sprite: sprite,
+        size: sprite.originalSize / 10,
+        anchor: Anchor.bottomCenter,
+      ),
+    );
   }
 
   /// Puts the Backboard in game over mode, where the score input is shown.
   Future<void> gameOverMode() async {
+    children.removeWhere((element) => true);
+    await add(BackboardGameOver());
+  }
+}
+
+/// {@template backboard_game_over}
+class BackboardGameOver extends SpriteComponent with HasGameRef {
+  @override
+  Future<void> onLoad() async {
     final sprite = await gameRef.loadSprite(
       Assets.images.backboard.backboardGameOver.keyName,
     );
     size = sprite.originalSize / 10;
+    anchor = Anchor.bottomCenter;
     this.sprite = sprite;
   }
 }

packages/pinball_components/sandbox/lib/main.dart

@@ -32,6 +32,7 @@ void main() {
   addGoogleWordStories(dashbook);
   addLaunchRampStories(dashbook);
   addScoreTextStories(dashbook);
+  addBackboardStories(dashbook);
 
   runApp(dashbook);
 }

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

@@ -0,0 +1,23 @@
+import 'package:flame/components.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:sandbox/common/common.dart';
+
+class BackboardGameOverGame extends BasicGame {
+  static const info = '''
+      Simple example showing the waiting mode of the backboard.
+  ''';
+
+  @override
+  Future<void> onLoad() async {
+    camera
+      ..followVector2(Vector2.zero())
+      ..zoom = 5;
+
+    await add(
+      Backboard(
+        position: Vector2(0, 20),
+        startsAtWaiting: false,
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,25 @@
+import 'package:dashbook/dashbook.dart';
+import 'package:flame/game.dart';
+import 'package:sandbox/common/common.dart';
+import 'package:sandbox/stories/backboard/game_over.dart';
+import 'package:sandbox/stories/backboard/waiting.dart';
+
+void addBackboardStories(Dashbook dashbook) {
+  dashbook.storiesOf('Backboard')
+    ..add(
+      'Waiting mode',
+      (context) => GameWidget(
+        game: BackboardWaitingGame(),
+      ),
+      codeLink: buildSourceLink('backboard/waiting.dart'),
+      info: BackboardWaitingGame.info,
+    )
+    ..add(
+      'Game over',
+      (context) => GameWidget(
+        game: BackboardGameOverGame(),
+      ),
+      codeLink: buildSourceLink('backboard/game_over.dart'),
+      info: BackboardGameOverGame.info,
+    );
+}

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

@@ -0,0 +1,19 @@
+import 'package:flame/components.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:sandbox/common/common.dart';
+
+class BackboardWaitingGame extends BasicGame {
+  static const info = '''
+      Simple example showing the waiting mode of the backboard.
+  ''';
+
+  @override
+  Future<void> onLoad() async {
+    camera
+      ..followVector2(Vector2.zero())
+      ..zoom = 5;
+
+    final backboard = Backboard(position: Vector2(0, 20));
+    await add(backboard);
+  }
+}

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

@@ -1,4 +1,5 @@
 export 'alien_zone/stories.dart';
+export 'backboard/stories.dart';
 export 'ball/stories.dart';
 export 'baseboard/stories.dart';
 export 'boundaries/stories.dart';