fix: fixed sandbox errors

packages/leaderboard_repository/lib/src/leaderboard_repository.dart

@@ -72,6 +72,20 @@ class FetchPlayerRankingException extends LeaderboardException {
         );
 }
 
+/// {@template fetch_prohibited_initials_exception}
+/// Exception thrown when failure occurs while fetching prohibited initials.
+/// {@endtemplate}
+class FetchProhibitedInitialsException extends LeaderboardException {
+  /// {@macro fetch_prohibited_initials_exception}
+  const FetchProhibitedInitialsException(
+    Object error,
+    StackTrace stackTrace,
+  ) : super(
+          error,
+          stackTrace,
+        );
+}
+
 /// {@template leaderboard_repository}
 /// Repository to access leaderboard data in Firebase Cloud Firestore.
 /// {@endtemplate}
@@ -152,4 +166,25 @@ class LeaderboardRepository {
       throw FetchPlayerRankingException(error, stackTrace);
     }
   }
+
+  /// Determines if the given [initials] are allowed.
+  Future<bool> areInitialsAllowed({required String initials}) async {
+    // Initials can only be three uppercase A-Z letters
+    final initialsRegex = RegExp(r'^[A-Z]{3}$');
+    if (!initialsRegex.hasMatch(initials)) {
+      return false;
+    }
+
+    try {
+      final document = await _firebaseFirestore
+          .collection('prohibitedInitials')
+          .doc('list')
+          .get();
+      final prohibitedInitials =
+          document.get('prohibitedInitials') as List<String>;
+      return !prohibitedInitials.contains(initials);
+    } on Exception catch (error, stackTrace) {
+      throw FetchProhibitedInitialsException(error, stackTrace);
+    }
+  }
 }

packages/leaderboard_repository/test/src/leaderboard_repository_test.dart

@@ -21,6 +21,9 @@ class MockQueryDocumentSnapshot extends Mock
 class MockDocumentReference extends Mock
     implements DocumentReference<Map<String, dynamic>> {}
 
+class MockDocumentSnapshot extends Mock
+    implements DocumentSnapshot<Map<String, dynamic>> {}
+
 void main() {
   group('LeaderboardRepository', () {
     late FirebaseFirestore firestore;
@@ -223,5 +226,94 @@ void main() {
         );
       });
     });
+
+    group('areInitialsAllowed', () {
+      late LeaderboardRepository leaderboardRepository;
+      late CollectionReference<Map<String, dynamic>> collectionReference;
+      late DocumentReference<Map<String, dynamic>> documentReference;
+      late DocumentSnapshot<Map<String, dynamic>> documentSnapshot;
+
+      setUp(() async {
+        collectionReference = MockCollectionReference();
+        documentReference = MockDocumentReference();
+        documentSnapshot = MockDocumentSnapshot();
+        leaderboardRepository = LeaderboardRepository(firestore);
+
+        when(() => firestore.collection('prohibitedInitials'))
+            .thenReturn(collectionReference);
+        when(() => collectionReference.doc('list'))
+            .thenReturn(documentReference);
+        when(() => documentReference.get())
+            .thenAnswer((_) async => documentSnapshot);
+        when<dynamic>(() => documentSnapshot.get('prohibitedInitials'))
+            .thenReturn(['BAD']);
+      });
+
+      test('returns true if initials are three letters and allowed', () async {
+        final isUsernameAllowedResponse =
+            await leaderboardRepository.areInitialsAllowed(
+          initials: 'ABC',
+        );
+        expect(
+          isUsernameAllowedResponse,
+          isTrue,
+        );
+      });
+
+      test(
+        'returns false if initials are shorter than 3 characters',
+        () async {
+          final areInitialsAllowedResponse =
+              await leaderboardRepository.areInitialsAllowed(initials: 'AB');
+          expect(areInitialsAllowedResponse, isFalse);
+        },
+      );
+
+      test(
+        'returns false if initials are longer than 3 characters',
+        () async {
+          final areInitialsAllowedResponse =
+              await leaderboardRepository.areInitialsAllowed(initials: 'ABCD');
+          expect(areInitialsAllowedResponse, isFalse);
+        },
+      );
+
+      test(
+        'returns false if initials contain a lowercase letter',
+        () async {
+          final areInitialsAllowedResponse =
+              await leaderboardRepository.areInitialsAllowed(initials: 'AbC');
+          expect(areInitialsAllowedResponse, isFalse);
+        },
+      );
+
+      test(
+        'returns false if initials contain a special character',
+        () async {
+          final areInitialsAllowedResponse =
+              await leaderboardRepository.areInitialsAllowed(initials: 'A@C');
+          expect(areInitialsAllowedResponse, isFalse);
+        },
+      );
+
+      test('returns false if initials are forbidden', () async {
+        final areInitialsAllowedResponse =
+            await leaderboardRepository.areInitialsAllowed(initials: 'BAD');
+        expect(areInitialsAllowedResponse, isFalse);
+      });
+
+      test(
+        'throws FetchProhibitedInitialsException when Exception occurs '
+        'when trying to retrieve information from firestore',
+        () async {
+          when(() => firestore.collection('prohibitedInitials'))
+              .thenThrow(Exception('oops'));
+          expect(
+            () => leaderboardRepository.areInitialsAllowed(initials: 'ABC'),
+            throwsA(isA<FetchProhibitedInitialsException>()),
+          );
+        },
+      );
+    });
   });
 }

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

@@ -34,24 +34,21 @@ class _DinoTopWall extends BodyComponent with InitialPosition {
   }
 
   List<FixtureDef> _createFixtureDefs() {
-    final fixturesDef = <FixtureDef>[];
-
     final topStraightShape = EdgeShape()
       ..set(
         Vector2(28.65, -35.1),
         Vector2(29.5, -35.1),
       );
     final topStraightFixtureDef = FixtureDef(topStraightShape);
-    fixturesDef.add(topStraightFixtureDef);
 
     final topCurveShape = BezierCurveShape(
       controlPoints: [
         topStraightShape.vertex1,
-        Vector2(17.4, -26.38),
+        Vector2(18.8, -27),
-        Vector2(25.5, -20.7),
+        Vector2(26.6, -21),
       ],
     );
-    fixturesDef.add(FixtureDef(topCurveShape));
+    final topCurveFixtureDef = FixtureDef(topCurveShape);
 
     final middleCurveShape = BezierCurveShape(
       controlPoints: [
@@ -60,16 +57,16 @@ class _DinoTopWall extends BodyComponent with InitialPosition {
         Vector2(26.8, -19.5),
       ],
     );
-    fixturesDef.add(FixtureDef(middleCurveShape));
+    final middleCurveFixtureDef = FixtureDef(middleCurveShape);
 
     final bottomCurveShape = BezierCurveShape(
       controlPoints: [
         middleCurveShape.vertices.last,
-        Vector2(21.5, -15.8),
+        Vector2(23, -15),
-        Vector2(25.8, -14.8),
+        Vector2(27, -15),
       ],
     );
-    fixturesDef.add(FixtureDef(bottomCurveShape));
+    final bottomCurveFixtureDef = FixtureDef(bottomCurveShape);
 
     final bottomStraightShape = EdgeShape()
       ..set(
@@ -77,9 +74,14 @@ class _DinoTopWall extends BodyComponent with InitialPosition {
         Vector2(31, -14.5),
       );
     final bottomStraightFixtureDef = FixtureDef(bottomStraightShape);
-    fixturesDef.add(bottomStraightFixtureDef);
 
-    return fixturesDef;
+    return [
+      topStraightFixtureDef,
+      topCurveFixtureDef,
+      middleCurveFixtureDef,
+      bottomCurveFixtureDef,
+      bottomStraightFixtureDef,
+    ];
   }
 
   @override
@@ -106,12 +108,14 @@ class _DinoTopWallSpriteComponent extends SpriteComponent with HasGameRef {
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-    final sprite = await gameRef.loadSprite(
+    final sprite = Sprite(
-      Assets.images.dino.dinoLandTop.keyName,
+      gameRef.images.fromCache(
+        Assets.images.dino.dinoLandTop.keyName,
+      ),
     );
     this.sprite = sprite;
     size = sprite.originalSize / 10;
-    position = Vector2(22, -41.8);
+    position = Vector2(22.8, -38.9);
   }
 }
 
@@ -129,69 +133,56 @@ class _DinoBottomWall extends BodyComponent with InitialPosition {
   }
 
   List<FixtureDef> _createFixtureDefs() {
-    final fixturesDef = <FixtureDef>[];
     const restitution = 1.0;
 
-    final topStraightControlPoints = [
-      Vector2(32.4, -8.8),
-      Vector2(25, -7.7),
-    ];
     final topStraightShape = EdgeShape()
       ..set(
-        topStraightControlPoints.first,
+        Vector2(32.4, -8.8),
-        topStraightControlPoints.last,
+        Vector2(25, -7.7),
       );
     final topStraightFixtureDef = FixtureDef(
       topStraightShape,
       restitution: restitution,
     );
-    fixturesDef.add(topStraightFixtureDef);
 
-    final topLeftCurveControlPoints = [
-      topStraightControlPoints.last,
-      Vector2(21.8, -7),
-      Vector2(29.5, 13.8),
-    ];
     final topLeftCurveShape = BezierCurveShape(
-      controlPoints: topLeftCurveControlPoints,
+      controlPoints: [
+        topStraightShape.vertex2,
+        Vector2(21.8, -7),
+        Vector2(29.8, 13.8),
+      ],
     );
     final topLeftCurveFixtureDef = FixtureDef(
       topLeftCurveShape,
       restitution: restitution,
     );
-    fixturesDef.add(topLeftCurveFixtureDef);
 
-    final bottomLeftStraightControlPoints = [
-      topLeftCurveControlPoints.last,
-      Vector2(31.8, 44.1),
-    ];
     final bottomLeftStraightShape = EdgeShape()
       ..set(
-        bottomLeftStraightControlPoints.first,
+        topLeftCurveShape.vertices.last,
-        bottomLeftStraightControlPoints.last,
+        Vector2(31.9, 44.1),
       );
     final bottomLeftStraightFixtureDef = FixtureDef(
       bottomLeftStraightShape,
       restitution: restitution,
     );
-    fixturesDef.add(bottomLeftStraightFixtureDef);
 
-    final bottomStraightControlPoints = [
-      bottomLeftStraightControlPoints.last,
-      Vector2(37.8, 44.1),
-    ];
     final bottomStraightShape = EdgeShape()
       ..set(
-        bottomStraightControlPoints.first,
+        bottomLeftStraightShape.vertex2,
-        bottomStraightControlPoints.last,
+        Vector2(37.8, 44.1),
       );
     final bottomStraightFixtureDef = FixtureDef(
       bottomStraightShape,
       restitution: restitution,
     );
-    fixturesDef.add(bottomStraightFixtureDef);
 
-    return fixturesDef;
+    return [
+      topStraightFixtureDef,
+      topLeftCurveFixtureDef,
+      bottomLeftStraightFixtureDef,
+      bottomStraightFixtureDef,
+    ];
   }
 
   @override
@@ -212,8 +203,10 @@ class _DinoBottomWallSpriteComponent extends SpriteComponent with HasGameRef {
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-    final sprite = await gameRef.loadSprite(
+    final sprite = Sprite(
-      Assets.images.dino.dinoLandBottom.keyName,
+      gameRef.images.fromCache(
+        Assets.images.dino.dinoLandBottom.keyName,
+      ),
     );
     this.sprite = sprite;
     size = sprite.originalSize / 10;

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

@@ -78,6 +78,7 @@ class _GoogleLetterSprite extends SpriteComponent with HasGameRef {
   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.

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

@@ -136,6 +136,7 @@ class _KickerSpriteComponent extends SpriteComponent with HasGameRef {
   Future<void> onLoad() async {
     await super.onLoad();
 
+    // TODO(alestiago): Used cached asset.
     final sprite = await gameRef.loadSprite(
       (_side.isLeft)
           ? Assets.images.kicker.left.keyName

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

@@ -148,6 +148,7 @@ class _PlungerSpriteAnimationGroupComponent
   Future<void> onLoad() async {
     await super.onLoad();
 
+    // TODO(alestiago): Used cached images.
     final spriteSheet = await gameRef.images.load(
       Assets.images.plunger.plunger.keyName,
     );

packages/pinball_components/sandbox/lib/common/add_game.dart

@@ -0,0 +1,36 @@
+import 'package:dashbook/dashbook.dart';
+import 'package:flame/game.dart';
+import 'package:sandbox/common/common.dart';
+
+const _path =
+    'https://github.com/VGVentures/pinball/tree/main/packages/pinball_components/sandbox/lib/stories/';
+
+extension StoryAddGame on Story {
+  void addGame({
+    required String title,
+    required String description,
+    required Game Function(DashbookContext) gameBuilder,
+  }) {
+    final _chapter = Chapter(
+      title,
+      (DashbookContext context) {
+        final game = gameBuilder(context);
+        if (game is Traceable) {
+          game.trace = context.boolProperty('Trace', true);
+        }
+
+        return GameWidget(game: game);
+      },
+      this,
+      codeLink: '$_path${name.toPath()}/${title.toPath()}',
+      info: description,
+    );
+    chapters.add(_chapter);
+  }
+}
+
+extension on String {
+  String toPath() {
+    return replaceAll(' ', '_')..toLowerCase();
+  }
+}

packages/pinball_components/sandbox/lib/common/common.dart

@@ -1,3 +1,3 @@
+export 'add_game.dart';
 export 'games.dart';
-export 'methods.dart';
 export 'trace.dart';

packages/pinball_components/sandbox/lib/common/games.dart

@@ -5,16 +5,25 @@ import 'package:flame/input.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/material.dart';
 
-abstract class BasicGame extends Forge2DGame {
+abstract class AssetsGame extends Forge2DGame {
-  BasicGame() {
+  AssetsGame({
+    List<String>? imagesFileNames,
+  }) : _imagesFileNames = imagesFileNames {
     images.prefix = '';
   }
-}
 
-abstract class BasicKeyboardGame extends BasicGame
+  final List<String>? _imagesFileNames;
-    with HasKeyboardHandlerComponents {}
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    if (_imagesFileNames != null) {
+      await images.loadAll(_imagesFileNames!);
+    }
+  }
+}
 
-abstract class LineGame extends BasicGame with PanDetector {
+abstract class LineGame extends AssetsGame with PanDetector {
   Vector2? _lineEnd;
 
   @override

packages/pinball_components/sandbox/lib/common/methods.dart

@@ -1,3 +0,0 @@
-String buildSourceLink(String path) {
-  return 'https://github.com/VGVentures/pinball/tree/main/packages/pinball_components/sandbox/lib/stories/$path';
-}

packages/pinball_components/sandbox/lib/common/trace.dart

@@ -35,7 +35,7 @@ mixin Traceable on Forge2DGame {
           .forEach((bodyComponent) => bodyComponent.trace());
 
       descendants()
-          .whereType<SpriteComponent>()
+          .whereType<HasPaint>()
           .forEach((sprite) => sprite.setOpacity(0.5));
     }
   }

packages/pinball_components/sandbox/lib/main.dart

@@ -16,9 +16,6 @@ void main() {
   addLayerStories(dashbook);
   addEffectsStories(dashbook);
   addFlipperStories(dashbook);
-  addSpaceshipStories(dashbook);
-  addSpaceshipRampStories(dashbook);
-  addSpaceshipRailStories(dashbook);
   addBaseboardStories(dashbook);
   addChromeDinoStories(dashbook);
   addDashNestBumperStories(dashbook);
@@ -27,12 +24,12 @@ void main() {
   addSlingshotStories(dashbook);
   addSparkyBumperStories(dashbook);
   addAlienZoneStories(dashbook);
-  addZoomStories(dashbook);
   addBoundariesStories(dashbook);
   addGoogleWordStories(dashbook);
   addLaunchRampStories(dashbook);
   addScoreTextStories(dashbook);
   addBackboardStories(dashbook);
+  addDinoWallStories(dashbook);
   addMultipliersStories(dashbook);
 
   runApp(dashbook);

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

@@ -4,10 +4,17 @@ import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class AlienBumperAGame extends BasicBallGame {
+class AlienBumperAGame extends BallGame {
-  AlienBumperAGame() : super(color: const Color(0xFF0000FF));
+  AlienBumperAGame()
-
+      : super(
-  static const info = '''
+          color: const Color(0xFF0000FF),
+          imagesFileNames: [
+            Assets.images.alienBumper.a.active.keyName,
+            Assets.images.alienBumper.a.inactive.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how a AlienBumperA is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -17,16 +24,10 @@ class AlienBumperAGame extends BasicBallGame {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
+    camera.followVector2(Vector2.zero());
-      Assets.images.alienBumper.a.active.keyName,
+    await add(
-      Assets.images.alienBumper.a.inactive.keyName,
+      AlienBumper.a()..priority = 1,
-    ]);
+    );
-
-    final center = screenToWorld(camera.viewport.canvasSize! / 2);
-    final alienBumperA = AlienBumper.a()
-      ..initialPosition = Vector2(center.x - 20, center.y - 20)
-      ..priority = 1;
-    await add(alienBumperA);
 
     await traceAllBodies();
   }

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

@@ -4,10 +4,17 @@ import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class AlienBumperBGame extends BasicBallGame {
+class AlienBumperBGame extends BallGame {
-  AlienBumperBGame() : super(color: const Color(0xFF0000FF));
+  AlienBumperBGame()
-
+      : super(
-  static const info = '''
+          color: const Color(0xFF0000FF),
+          imagesFileNames: [
+            Assets.images.alienBumper.b.active.keyName,
+            Assets.images.alienBumper.b.inactive.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how a AlienBumperB is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -17,16 +24,10 @@ class AlienBumperBGame extends BasicBallGame {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
+    camera.followVector2(Vector2.zero());
-      Assets.images.alienBumper.b.active.keyName,
+    await add(
-      Assets.images.alienBumper.b.inactive.keyName,
+      AlienBumper.b()..priority = 1,
-    ]);
+    );
-
-    final center = screenToWorld(camera.viewport.canvasSize! / 2);
-    final alienBumperB = AlienBumper.b()
-      ..initialPosition = Vector2(center.x - 10, center.y + 10)
-      ..priority = 1;
-    await add(alienBumperB);
 
     await traceAllBodies();
   }

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

@@ -6,8 +6,8 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 import 'package:sandbox/common/common.dart';
 
-class BasicSpaceshipGame extends BasicGame with TapDetector {
+class SpaceshipGame extends AssetsGame with TapDetector {
-  static const info = '''
+  static const description = '''
     Shows how a Spaceship works.
       
     - Tap anywhere on the screen to spawn a Ball into the game.
@@ -18,10 +18,10 @@ class BasicSpaceshipGame extends BasicGame with TapDetector {
     await super.onLoad();
 
     camera.followVector2(Vector2.zero());
-
+    await addFromBlueprint(
-    unawaited(
+      Spaceship(position: Vector2.zero()),
-      addFromBlueprint(Spaceship(position: Vector2.zero())),
     );
+    await ready();
   }
 
   @override

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

@@ -6,7 +6,7 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SpaceshipRailGame extends BasicBallGame {
+class SpaceshipRailGame extends BallGame {
   SpaceshipRailGame()
       : super(
           color: Colors.blue,
@@ -14,7 +14,7 @@ class SpaceshipRailGame extends BasicBallGame {
           ballLayer: Layer.spaceshipExitRail,
         );
 
-  static const info = '''
+  static const description = '''
     Shows how SpaceshipRail are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -26,10 +26,8 @@ class SpaceshipRailGame extends BasicBallGame {
     await super.onLoad();
 
     camera.followVector2(Vector2(-30, -10));
-
+    await addFromBlueprint(SpaceshipRail());
-    final spaceshipRail = SpaceshipRail();
+    await ready();
-    unawaited(addFromBlueprint(spaceshipRail));
-
     await traceAllBodies();
   }
 }

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

@@ -7,15 +7,27 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SpaceshipRampGame extends BasicBallGame with KeyboardEvents {
+class SpaceshipRampGame extends BallGame with KeyboardEvents {
   SpaceshipRampGame()
       : super(
           color: Colors.blue,
           ballPriority: RenderPriority.ballOnSpaceshipRamp,
           ballLayer: Layer.spaceshipEntranceRamp,
+          imagesFileNames: [
+            Assets.images.spaceship.ramp.railingBackground.keyName,
+            Assets.images.spaceship.ramp.main.keyName,
+            Assets.images.spaceship.ramp.boardOpening.keyName,
+            Assets.images.spaceship.ramp.railingForeground.keyName,
+            Assets.images.spaceship.ramp.arrow.inactive.keyName,
+            Assets.images.spaceship.ramp.arrow.active1.keyName,
+            Assets.images.spaceship.ramp.arrow.active2.keyName,
+            Assets.images.spaceship.ramp.arrow.active3.keyName,
+            Assets.images.spaceship.ramp.arrow.active4.keyName,
+            Assets.images.spaceship.ramp.arrow.active5.keyName,
+          ],
         );
 
-  static const info = '''
+  static const description = '''
     Shows how SpaceshipRamp is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -29,22 +41,10 @@ class SpaceshipRampGame extends BasicBallGame with KeyboardEvents {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.spaceship.ramp.railingBackground.keyName,
-      Assets.images.spaceship.ramp.main.keyName,
-      Assets.images.spaceship.ramp.boardOpening.keyName,
-      Assets.images.spaceship.ramp.railingForeground.keyName,
-      Assets.images.spaceship.ramp.arrow.inactive.keyName,
-      Assets.images.spaceship.ramp.arrow.active1.keyName,
-      Assets.images.spaceship.ramp.arrow.active2.keyName,
-      Assets.images.spaceship.ramp.arrow.active3.keyName,
-      Assets.images.spaceship.ramp.arrow.active4.keyName,
-      Assets.images.spaceship.ramp.arrow.active5.keyName,
-    ]);
-
-    _spaceshipRamp = SpaceshipRamp();
-    await addFromBlueprint(_spaceshipRamp);
     camera.followVector2(Vector2(-12, -50));
+    await addFromBlueprint(
+      _spaceshipRamp = SpaceshipRamp(),
+    );
     await traceAllBodies();
   }
 

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

@@ -1,25 +1,36 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/alien_zone/alien_bumper_a_game.dart';
 import 'package:sandbox/stories/alien_zone/alien_bumper_b_game.dart';
+import 'package:sandbox/stories/alien_zone/spaceship_game.dart';
+import 'package:sandbox/stories/alien_zone/spaceship_rail_game.dart';
+import 'package:sandbox/stories/alien_zone/spaceship_ramp_game.dart';
 
 void addAlienZoneStories(Dashbook dashbook) {
   dashbook.storiesOf('Alien Zone')
-    ..add(
+    ..addGame(
-      'Alien Bumper A',
+      title: 'Alien Bumper A',
-      (context) => GameWidget(
+      description: AlienBumperAGame.description,
-        game: AlienBumperAGame()..trace = context.boolProperty('Trace', true),
+      gameBuilder: (_) => AlienBumperAGame(),
-      ),
-      codeLink: buildSourceLink('alien_zone/alien_bumper_a.dart'),
-      info: AlienBumperAGame.info,
     )
-    ..add(
+    ..addGame(
-      'Alien Bumper B',
+      title: 'Alien Bumper B',
-      (context) => GameWidget(
+      description: AlienBumperBGame.description,
-        game: AlienBumperBGame()..trace = context.boolProperty('Trace', true),
+      gameBuilder: (_) => AlienBumperBGame(),
-      ),
+    )
-      codeLink: buildSourceLink('alien_zone/alien_bumper_b.dart'),
+    ..addGame(
-      info: AlienBumperAGame.info,
+      title: 'Spaceship',
+      description: SpaceshipGame.description,
+      gameBuilder: (_) => SpaceshipGame(),
+    )
+    ..addGame(
+      title: 'Spaceship Rail',
+      description: SpaceshipRailGame.description,
+      gameBuilder: (_) => SpaceshipRailGame(),
+    )
+    ..addGame(
+      title: 'Spaceship Ramp',
+      description: SpaceshipRampGame.description,
+      gameBuilder: (_) => SpaceshipRampGame(),
     );
 }

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

@@ -1,21 +1,22 @@
-import 'package:flame/components.dart';
+import 'package:flame/input.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart' hide Assets;
 import 'package:pinball_theme/pinball_theme.dart';
 import 'package:sandbox/common/common.dart';
 
-class BackboardGameOverGame extends BasicKeyboardGame {
+class BackboardGameOverGame extends AssetsGame
-  BackboardGameOverGame(this.score, this.character);
+    with HasKeyboardHandlerComponents {
+  BackboardGameOverGame(this.score, this.character)
+      : super(
+          imagesFileNames: characterIconPaths.values.toList(),
+        );
 
-  static const info = '''
+  static const description = '''
-      Simple example showing the game over mode of the backboard.
+      Shows how the Backboard in game over mode is rendered.
 
       - Select a character to update the character icon.
   ''';
 
-  final int score;
-  final String character;
-
   static final characterIconPaths = <String, String>{
     'Dash': Assets.images.dash.leaderboardIcon.keyName,
     'Sparky': Assets.images.sparky.leaderboardIcon.keyName,
@@ -23,14 +24,16 @@ class BackboardGameOverGame extends BasicKeyboardGame {
     'Dino': Assets.images.dino.leaderboardIcon.keyName,
   };
 
+  final int score;
+
+  final String character;
+
   @override
   Future<void> onLoad() async {
     camera
       ..followVector2(Vector2.zero())
       ..zoom = 5;
 
-    await images.loadAll(characterIconPaths.values.toList());
-
     await add(
       Backboard.gameOver(
         position: Vector2(0, 20),

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

@@ -2,9 +2,14 @@ import 'package:flame/components.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
-class BackboardWaitingGame extends BasicGame {
+class BackboardWaitingGame extends AssetsGame {
-  static const info = '''
+  BackboardWaitingGame()
-      Simple example showing the waiting mode of the backboard.
+      : super(
+          imagesFileNames: [],
+        );
+
+  static const description = '''
+      Shows how the Backboard in waiting mode is rendered.
   ''';
 
   @override
@@ -13,7 +18,8 @@ class BackboardWaitingGame extends BasicGame {
       ..followVector2(Vector2.zero())
       ..zoom = 5;
 
-    final backboard = Backboard.waiting(position: Vector2(0, 20));
+    await add(
-    await add(backboard);
+      Backboard.waiting(position: Vector2(0, 20)),
+    );
   }
 }

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

@@ -1,32 +1,25 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/backboard/backboard_game_over_game.dart';
 import 'package:sandbox/stories/backboard/backboard_waiting_game.dart';
 
 void addBackboardStories(Dashbook dashbook) {
   dashbook.storiesOf('Backboard')
-    ..add(
+    ..addGame(
-      'Waiting mode',
+      title: 'Waiting',
-      (context) => GameWidget(
+      description: BackboardWaitingGame.description,
-        game: BackboardWaitingGame(),
+      gameBuilder: (_) => BackboardWaitingGame(),
-      ),
-      codeLink: buildSourceLink('backboard/waiting.dart'),
-      info: BackboardWaitingGame.info,
     )
-    ..add(
+    ..addGame(
-      'Game over',
+      title: 'Game over',
-      (context) => GameWidget(
+      description: BackboardGameOverGame.description,
-        game: BackboardGameOverGame(
+      gameBuilder: (context) => BackboardGameOverGame(
-          context.numberProperty('Score', 9000000000).toInt(),
+        context.numberProperty('Score', 9000000000).toInt(),
-          context.listProperty(
+        context.listProperty(
-            'Character',
+          'Character',
-            BackboardGameOverGame.characterIconPaths.keys.first,
+          BackboardGameOverGame.characterIconPaths.keys.first,
-            BackboardGameOverGame.characterIconPaths.keys.toList(),
+          BackboardGameOverGame.characterIconPaths.keys.toList(),
-          ),
         ),
       ),
-      codeLink: buildSourceLink('backboard/game_over.dart'),
-      info: BackboardGameOverGame.info,
     );
 }

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

@@ -4,7 +4,7 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
 class BallBoosterGame extends LineGame {
-  static const info = '''
+  static const description = '''
     Shows how a Ball with a boost works.
 
     - Drag to launch a boosted Ball.

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

@@ -3,14 +3,20 @@ import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
-class BasicBallGame extends BasicGame with TapDetector, Traceable {
+class BallGame extends AssetsGame with TapDetector, Traceable {
-  BasicBallGame({
+  BallGame({
     this.color = Colors.blue,
     this.ballPriority = 0,
     this.ballLayer = Layer.all,
-  });
+    List<String>? imagesFileNames,
+  }) : super(
+          imagesFileNames: [
+            Assets.images.ball.ball.keyName,
+            if (imagesFileNames != null) ...imagesFileNames,
+          ],
+        );
 
-  static const info = '''
+  static const description = '''
     Shows how a Ball works.
       
     - Tap anywhere on the screen to spawn a ball into the game.

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

@@ -1,5 +1,4 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:flutter/material.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/ball_booster_game.dart';
@@ -7,22 +6,16 @@ import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
 void addBallStories(Dashbook dashbook) {
   dashbook.storiesOf('Ball')
-    ..add(
+    ..addGame(
-      'Basic',
+      title: 'Colored',
-      (context) => GameWidget(
+      description: BallGame.description,
-        game: BasicBallGame(
+      gameBuilder: (context) => BallGame(
-          color: context.colorProperty('color', Colors.blue),
+        color: context.colorProperty('color', Colors.blue),
-        )..trace = context.boolProperty('Trace', true),
       ),
-      codeLink: buildSourceLink('ball/basic.dart'),
-      info: BasicBallGame.info,
     )
-    ..add(
+    ..addGame(
-      'Booster',
+      title: 'Booster',
-      (context) => GameWidget(
+      description: BallBoosterGame.description,
-        game: BallBoosterGame(),
+      gameBuilder: (context) => BallBoosterGame(),
-      ),
-      codeLink: buildSourceLink('ball/ball_booster.dart'),
-      info: BallBoosterGame.info,
     );
 }

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

@@ -1,10 +1,17 @@
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class BaseboardGame extends BasicBallGame with Traceable {
+class BaseboardGame extends BallGame {
-  static const info = '''
+  BaseboardGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.baseboard.left.keyName,
+            Assets.images.baseboard.right.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how the Baseboards are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -15,22 +22,14 @@ class BaseboardGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.baseboard.left.keyName,
-      Assets.images.baseboard.right.keyName,
-    ]);
-
     final center = screenToWorld(camera.viewport.canvasSize! / 2);
-    final leftBaseboard = Baseboard(side: BoardSide.left)
-      ..initialPosition = center - Vector2(25, 0)
-      ..priority = 1;
-    final rightBaseboard = Baseboard(side: BoardSide.right)
-      ..initialPosition = center + Vector2(25, 0)
-      ..priority = 1;
-
     await addAll([
-      leftBaseboard,
+      Baseboard(side: BoardSide.left)
-      rightBaseboard,
+        ..initialPosition = center - Vector2(25, 0)
+        ..priority = 1,
+      Baseboard(side: BoardSide.right)
+        ..initialPosition = center + Vector2(25, 0)
+        ..priority = 1,
     ]);
 
     await traceAllBodies();

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/baseboard/baseboard_game.dart';
 
 void addBaseboardStories(Dashbook dashbook) {
-  dashbook.storiesOf('Baseboard').add(
+  dashbook.storiesOf('Baseboard').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: BaseboardGame.description,
-          game: BaseboardGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => BaseboardGame(),
-        ),
-        codeLink: buildSourceLink('baseboard_game/basic.dart'),
-        info: BaseboardGame.info,
       );
 }

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

@@ -1,11 +1,19 @@
 import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class BoundariesGame extends BasicBallGame with Traceable {
+class BoundariesGame extends BallGame {
-  static const info = '''
+  BoundariesGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.boundary.outer.keyName,
+            Assets.images.boundary.outerBottom.keyName,
+            Assets.images.boundary.bottom.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how Boundaries are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,19 +24,11 @@ class BoundariesGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.boundary.outer.keyName,
-      Assets.images.boundary.outerBottom.keyName,
-      Assets.images.boundary.bottom.keyName,
-    ]);
-
-    await addFromBlueprint(Boundaries());
-    await ready();
-
     camera
       ..followVector2(Vector2.zero())
       ..zoom = 6;
-
+    await addFromBlueprint(Boundaries());
+    await ready();
     await traceAllBodies();
   }
 }

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/boundaries/boundaries_game.dart';
 
 void addBoundariesStories(Dashbook dashbook) {
-  dashbook.storiesOf('Boundaries').add(
+  dashbook.storiesOf('Boundaries').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: BoundariesGame.description,
-          game: BoundariesGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => BoundariesGame(),
-        ),
-        codeLink: buildSourceLink('boundaries_game/basic.dart'),
-        info: BoundariesGame.info,
       );
 }

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

@@ -2,7 +2,7 @@ import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball_components/pinball_components.dart';
 
 class ChromeDinoGame extends Forge2DGame {
-  static const info = 'Shows how a ChromeDino is rendered.';
+  static const description = 'Shows how a ChromeDino is rendered.';
 
   @override
   Future<void> onLoad() async {

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/chrome_dino/chrome_dino_game.dart';
 
 void addChromeDinoStories(Dashbook dashbook) {
-  dashbook.storiesOf('Chrome Dino').add(
+  dashbook.storiesOf('Chrome Dino').addGame(
-        'Basic',
+        title: 'Trace',
-        (context) => GameWidget(
+        description: ChromeDinoGame.description,
-          game: ChromeDinoGame(),
+        gameBuilder: (_) => ChromeDinoGame(),
-        ),
-        codeLink: buildSourceLink('chrome_dino/basic.dart'),
-        info: ChromeDinoGame.info,
       );
 }

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

@@ -0,0 +1,31 @@
+import 'dart:async';
+
+import 'package:flame/input.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+import 'package:sandbox/stories/ball/basic_ball_game.dart';
+
+class DinoWallGame extends BallGame {
+  DinoWallGame() : super();
+
+  static const description = '''
+    Shows how DinoWalls are rendered.
+
+    - Activate the "trace" parameter to overlay the body.
+    - Tap anywhere on the screen to spawn a ball into the game.
+''';
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    await images.loadAll([
+      Assets.images.dino.dinoLandTop.keyName,
+      Assets.images.dino.dinoLandBottom.keyName,
+    ]);
+
+    await addFromBlueprint(DinoWalls());
+    camera.followVector2(Vector2.zero());
+    await traceAllBodies();
+  }
+}

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

@@ -0,0 +1,11 @@
+import 'package:dashbook/dashbook.dart';
+import 'package:sandbox/common/common.dart';
+import 'package:sandbox/stories/dino_wall/dino_wall_game.dart';
+
+void addDinoWallStories(Dashbook dashbook) {
+  dashbook.storiesOf('DinoWall').addGame(
+        title: 'Traced',
+        description: DinoWallGame.description,
+        gameBuilder: (_) => DinoWallGame(),
+      );
+}

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

@@ -3,8 +3,8 @@ import 'package:flame/input.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
-class BasicCameraZoomGame extends BasicGame with TapDetector {
+class CameraZoomGame extends AssetsGame with TapDetector {
-  static const info = '''
+  static const description = '''
     Shows how CameraZoom can be used.
       
     - Tap to zoom in/out.

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

@@ -3,7 +3,7 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
 class FireEffectGame extends LineGame {
-  static const info = '''
+  static const description = '''
   Shows how the FireEffect renders.
 
   - Drag a line to define the trail direction.

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

@@ -1,13 +1,18 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
+import 'package:sandbox/stories/effects/camera_zoom_game.dart';
 import 'package:sandbox/stories/effects/fire_effect_game.dart';
 
 void addEffectsStories(Dashbook dashbook) {
-  dashbook.storiesOf('Effects').add(
+  dashbook.storiesOf('Effects')
-        'Fire Effect',
+    ..addGame(
-        (context) => GameWidget(game: FireEffectGame()),
+      title: 'Fire',
-        codeLink: buildSourceLink('effects/fire_effect.dart'),
+      description: FireEffectGame.description,
-        info: FireEffectGame.info,
+      gameBuilder: (_) => FireEffectGame(),
-      );
+    )
+    ..addGame(
+      title: 'CameraZoom',
+      description: CameraZoomGame.description,
+      gameBuilder: (_) => CameraZoomGame(),
+    );
 }

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

@@ -2,12 +2,19 @@ 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/common/common.dart';
 
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class FlipperGame extends BasicBallGame with KeyboardEvents, Traceable {
+class FlipperGame extends BallGame with KeyboardEvents {
-  static const info = '''
+  FlipperGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.flipper.left.keyName,
+            Assets.images.flipper.right.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how Flippers are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -33,21 +40,12 @@ class FlipperGame extends BasicBallGame with KeyboardEvents, Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.flipper.left.keyName,
-      Assets.images.flipper.right.keyName,
-    ]);
-
     final center = screenToWorld(camera.viewport.canvasSize! / 2);
-
-    leftFlipper = Flipper(side: BoardSide.left)
-      ..initialPosition = center - Vector2(Flipper.size.x, 0);
-    rightFlipper = Flipper(side: BoardSide.right)
-      ..initialPosition = center + Vector2(Flipper.size.x, 0);
-
     await addAll([
-      leftFlipper,
+      leftFlipper = Flipper(side: BoardSide.left)
-      rightFlipper,
+        ..initialPosition = center - Vector2(Flipper.size.x, 0),
+      rightFlipper = Flipper(side: BoardSide.right)
+        ..initialPosition = center + Vector2(Flipper.size.x, 0),
     ]);
 
     await traceAllBodies();

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/flipper/flipper_game.dart';
 
 void addFlipperStories(Dashbook dashbook) {
-  dashbook.storiesOf('Flipper').add(
+  dashbook.storiesOf('Flipper').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: FlipperGame.description,
-          game: FlipperGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => FlipperGame(),
-        ),
-        codeLink: buildSourceLink('flipper/basic.dart'),
-        info: FlipperGame.info,
       );
 }

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

@@ -2,11 +2,18 @@ import 'dart:async';
 
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class BigDashNestBumperGame extends BasicBallGame with Traceable {
+class BigDashNestBumperGame extends BallGame {
-  static const info = '''
+  BigDashNestBumperGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.dash.bumper.main.active.keyName,
+            Assets.images.dash.bumper.main.inactive.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how a BigDashNestBumper is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,13 +23,10 @@ class BigDashNestBumperGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.dash.bumper.main.active.keyName,
-      Assets.images.dash.bumper.main.inactive.keyName,
-    ]);
-
     camera.followVector2(Vector2.zero());
-    await add(DashNestBumper.main()..priority = 1);
+    await add(
+      DashNestBumper.main()..priority = 1,
+    );
     await traceAllBodies();
   }
 }

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

@@ -2,11 +2,20 @@ import 'dart:async';
 
 import 'package:flame/input.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SignpostGame extends BasicBallGame with Traceable, TapDetector {
+class SignpostGame extends BallGame {
-  static const info = '''
+  SignpostGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.signpost.inactive.keyName,
+            Assets.images.signpost.active1.keyName,
+            Assets.images.signpost.active2.keyName,
+            Assets.images.signpost.active3.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how a Signpost is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -17,13 +26,6 @@ class SignpostGame extends BasicBallGame with Traceable, TapDetector {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.signpost.inactive.keyName,
-      Assets.images.signpost.active1.keyName,
-      Assets.images.signpost.active2.keyName,
-      Assets.images.signpost.active3.keyName,
-    ]);
-
     camera.followVector2(Vector2.zero());
     await add(Signpost());
     await traceAllBodies();

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

@@ -2,11 +2,18 @@ import 'dart:async';
 
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SmallDashNestBumperAGame extends BasicBallGame with Traceable {
+class SmallDashNestBumperAGame extends BallGame {
-  static const info = '''
+  SmallDashNestBumperAGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.dash.bumper.a.active.keyName,
+            Assets.images.dash.bumper.a.inactive.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how a SmallDashNestBumper ("a") is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,11 +23,6 @@ class SmallDashNestBumperAGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.dash.bumper.a.active.keyName,
-      Assets.images.dash.bumper.a.inactive.keyName,
-    ]);
-
     camera.followVector2(Vector2.zero());
     await add(DashNestBumper.a()..priority = 1);
     await traceAllBodies();

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

@@ -2,11 +2,18 @@ import 'dart:async';
 
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SmallDashNestBumperBGame extends BasicBallGame with Traceable {
+class SmallDashNestBumperBGame extends BallGame {
-  static const info = '''
+  SmallDashNestBumperBGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.dash.bumper.b.active.keyName,
+            Assets.images.dash.bumper.b.inactive.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how a SmallDashNestBumper ("b") is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,11 +23,6 @@ class SmallDashNestBumperBGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.dash.bumper.b.active.keyName,
-      Assets.images.dash.bumper.b.inactive.keyName,
-    ]);
-
     camera.followVector2(Vector2.zero());
     await add(DashNestBumper.b()..priority = 1);
     await traceAllBodies();

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

@@ -1,5 +1,4 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/flutter_forest/big_dash_nest_bumper_game.dart';
 import 'package:sandbox/stories/flutter_forest/signpost_game.dart';
@@ -8,39 +7,24 @@ import 'package:sandbox/stories/flutter_forest/small_dash_nest_bumper_b_game.dar
 
 void addDashNestBumperStories(Dashbook dashbook) {
   dashbook.storiesOf('Flutter Forest')
-    ..add(
+    ..addGame(
-      'Signpost',
+      title: 'Signpost',
-      (context) => GameWidget(
+      description: SignpostGame.description,
-        game: SignpostGame()..trace = context.boolProperty('Trace', true),
+      gameBuilder: (_) => SignpostGame(),
-      ),
-      codeLink: buildSourceLink('flutter_forest/signpost.dart'),
-      info: SignpostGame.info,
     )
-    ..add(
+    ..addGame(
-      'Big Dash Nest Bumper',
+      title: 'Big Dash Nest Bumper',
-      (context) => GameWidget(
+      description: BigDashNestBumperGame.description,
-        game: BigDashNestBumperGame()
+      gameBuilder: (_) => BigDashNestBumperGame(),
-          ..trace = context.boolProperty('Trace', true),
-      ),
-      codeLink: buildSourceLink('flutter_forest/big_dash_nest_bumper.dart'),
-      info: BigDashNestBumperGame.info,
     )
-    ..add(
+    ..addGame(
-      'Small Dash Nest Bumper A',
+      title: 'Small Dash Nest Bumper A',
-      (context) => GameWidget(
+      description: SmallDashNestBumperAGame.description,
-        game: SmallDashNestBumperAGame()
+      gameBuilder: (_) => SmallDashNestBumperAGame(),
-          ..trace = context.boolProperty('Trace', true),
-      ),
-      codeLink: buildSourceLink('flutter_forest/small_dash_nest_bumper_a.dart'),
-      info: SmallDashNestBumperAGame.info,
     )
-    ..add(
+    ..addGame(
-      'Small Dash Nest Bumper B',
+      title: 'Small Dash Nest Bumper B',
-      (context) => GameWidget(
+      description: SmallDashNestBumperBGame.description,
-        game: SmallDashNestBumperBGame()
+      gameBuilder: (_) => SmallDashNestBumperBGame(),
-          ..trace = context.boolProperty('Trace', true),
-      ),
-      codeLink: buildSourceLink('flutter_forest/small_dash_nest_bumper_b.dart'),
-      info: SmallDashNestBumperBGame.info,
     );
 }

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

@@ -5,10 +5,10 @@ import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class GoogleLetterGame extends BasicBallGame {
+class GoogleLetterGame extends BallGame {
   GoogleLetterGame() : super(color: const Color(0xFF009900));
 
-  static const info = '''
+  static const description = '''
     Shows how a GoogleLetter is rendered.
       
     - Tap anywhere on the screen to spawn a ball into the game.

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/google_word/google_letter_game.dart';
 
 void addGoogleWordStories(Dashbook dashbook) {
-  dashbook.storiesOf('Google Word').add(
+  dashbook.storiesOf('Google Word').addGame(
-        'Letter',
+        title: 'Letter 0',
-        (context) => GameWidget(
+        description: GoogleLetterGame.description,
-          game: GoogleLetterGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => GoogleLetterGame(),
-        ),
-        codeLink: buildSourceLink('google_word/letter.dart'),
-        info: GoogleLetterGame.info,
       );
 }

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

@@ -1,10 +1,9 @@
 import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class KickerGame extends BasicBallGame with Traceable {
+class KickerGame extends BallGame {
-  static const info = '''
+  static const description = '''
     Shows how Kickers are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,14 +15,14 @@ class KickerGame extends BasicBallGame with Traceable {
     await super.onLoad();
 
     final center = screenToWorld(camera.viewport.canvasSize! / 2);
-
+    await addAll(
-    final leftKicker = Kicker(side: BoardSide.left)
+      [
-      ..initialPosition = Vector2(center.x - (Kicker.size.x * 2), center.y);
+        Kicker(side: BoardSide.left)
-    await add(leftKicker);
+          ..initialPosition = Vector2(center.x - (Kicker.size.x * 2), center.y),
-
+        Kicker(side: BoardSide.right)
-    final rightKicker = Kicker(side: BoardSide.right)
+          ..initialPosition = Vector2(center.x + (Kicker.size.x * 2), center.y),
-      ..initialPosition = Vector2(center.x + (Kicker.size.x * 2), center.y);
+      ],
-    await add(rightKicker);
+    );
 
     await traceAllBodies();
   }

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/kicker/kicker_game.dart';
 
 void addKickerStories(Dashbook dashbook) {
-  dashbook.storiesOf('Kickers').add(
+  dashbook.storiesOf('Kickers').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: KickerGame.description,
-          game: KickerGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => KickerGame(),
-        ),
-        codeLink: buildSourceLink('kicker_game/basic.dart'),
-        info: KickerGame.info,
       );
 }

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

@@ -6,7 +6,7 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class LaunchRampGame extends BasicBallGame {
+class LaunchRampGame extends BallGame {
   LaunchRampGame()
       : super(
           color: Colors.blue,
@@ -14,7 +14,7 @@ class LaunchRampGame extends BasicBallGame {
           ballLayer: Layer.launcher,
         );
 
-  static const info = '''
+  static const description = '''
     Shows how LaunchRamp are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -28,10 +28,8 @@ class LaunchRampGame extends BasicBallGame {
     camera
       ..followVector2(Vector2(0, 0))
       ..zoom = 7.5;
-
+    await addFromBlueprint(LaunchRamp());
-    final launchRamp = LaunchRamp();
+    await ready();
-    unawaited(addFromBlueprint(launchRamp));
-
     await traceAllBodies();
   }
 }

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/launch_ramp/launch_ramp_game.dart';
 
 void addLaunchRampStories(Dashbook dashbook) {
-  dashbook.storiesOf('LaunchRamp').add(
+  dashbook.storiesOf('LaunchRamp').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: LaunchRampGame.description,
-          game: LaunchRampGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => LaunchRampGame(),
-        ),
-        codeLink: buildSourceLink('launch_ramp/basic.dart'),
-        info: LaunchRampGame.info,
       );
 }

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

@@ -2,36 +2,35 @@ import 'package:flame/input.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
+import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class BasicLayerGame extends BasicGame with TapDetector {
+class LayerGame extends BallGame with TapDetector {
-  BasicLayerGame({required this.color});
+  static const description = '''
-
-  static const info = '''
     Shows how Layers work when a Ball hits other components.
       
     - Tap anywhere on the screen to spawn a Ball into the game.
 ''';
 
-  final Color color;
-
   @override
   Future<void> onLoad() async {
-    await add(BigSquare()..initialPosition = Vector2(30, -40));
+    await addAll(
-    await add(SmallSquare()..initialPosition = Vector2(50, -40));
+      [
-    await add(UnlayeredSquare()..initialPosition = Vector2(60, -40));
+        _BigSquare()..initialPosition = Vector2(30, -40),
-  }
+        _SmallSquare()..initialPosition = Vector2(50, -40),
-
+        _UnlayeredSquare()..initialPosition = Vector2(60, -40),
-  @override
+      ],
-  void onTapUp(TapUpInfo info) {
-    add(
-      Ball(baseColor: color)..initialPosition = info.eventPosition.game,
     );
   }
 }
 
-class BigSquare extends BodyComponent with InitialPosition, Layered {
+class _BigSquare extends BodyComponent with InitialPosition, Layered {
-  BigSquare() {
+  _BigSquare()
+      : super(
+          children: [
+            _UnlayeredSquare()..initialPosition = Vector2.all(4),
+            _SmallSquare()..initialPosition = Vector2.all(-4),
+          ],
+        ) {
     paint = Paint()
       ..color = const Color.fromARGB(255, 8, 218, 241)
       ..style = PaintingStyle.stroke;
@@ -42,27 +41,13 @@ class BigSquare extends BodyComponent with InitialPosition, Layered {
   Body createBody() {
     final shape = PolygonShape()..setAsBoxXY(16, 16);
     final fixtureDef = FixtureDef(shape);
-
     final bodyDef = BodyDef()..position = initialPosition;
-
     return world.createBody(bodyDef)..createFixture(fixtureDef);
   }
-
-  @override
-  Future<void> onLoad() async {
-    await super.onLoad();
-
-    await addAll(
-      [
-        UnlayeredSquare()..initialPosition = Vector2.all(4),
-        SmallSquare()..initialPosition = Vector2.all(-4),
-      ],
-    );
-  }
 }
 
-class SmallSquare extends BodyComponent with InitialPosition, Layered {
+class _SmallSquare extends BodyComponent with InitialPosition, Layered {
-  SmallSquare() {
+  _SmallSquare() {
     paint = Paint()
       ..color = const Color.fromARGB(255, 27, 241, 8)
       ..style = PaintingStyle.stroke;
@@ -73,15 +58,13 @@ class SmallSquare extends BodyComponent with InitialPosition, Layered {
   Body createBody() {
     final shape = PolygonShape()..setAsBoxXY(2, 2);
     final fixtureDef = FixtureDef(shape);
-
     final bodyDef = BodyDef()..position = initialPosition;
-
     return world.createBody(bodyDef)..createFixture(fixtureDef);
   }
 }
 
-class UnlayeredSquare extends BodyComponent with InitialPosition {
+class _UnlayeredSquare extends BodyComponent with InitialPosition {
-  UnlayeredSquare() {
+  _UnlayeredSquare() {
     paint = Paint()
       ..color = const Color.fromARGB(255, 241, 8, 8)
       ..style = PaintingStyle.stroke;
@@ -91,9 +74,7 @@ class UnlayeredSquare extends BodyComponent with InitialPosition {
   Body createBody() {
     final shape = PolygonShape()..setAsBoxXY(3, 3);
     final fixtureDef = FixtureDef(shape);
-
     final bodyDef = BodyDef()..position = initialPosition;
-
     return world.createBody(bodyDef)..createFixture(fixtureDef);
   }
 }

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

@@ -1,18 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
-import 'package:flutter/material.dart';
 import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/layer/basic_layer_game.dart';
+import 'package:sandbox/stories/layer/layer_game.dart';
 
 void addLayerStories(Dashbook dashbook) {
-  dashbook.storiesOf('Layer').add(
+  dashbook.storiesOf('Layer').addGame(
-        'Layer',
+        title: 'Example',
-        (context) => GameWidget(
+        description: LayerGame.description,
-          game: BasicLayerGame(
+        gameBuilder: (_) => LayerGame(),
-            color: context.colorProperty('color', Colors.blue),
-          ),
-        ),
-        codeLink: buildSourceLink('layer/basic.dart'),
-        info: BasicLayerGame.info,
       );
 }

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

@@ -4,10 +4,10 @@ import 'package:flutter/services.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class MultipliersGame extends BasicBallGame with KeyboardEvents {
+class MultipliersGame extends BallGame with KeyboardEvents {
   MultipliersGame() : super(color: const Color(0xFF009900));
 
-  static const info = '''
+  static const description = '''
     Shows how the Multipliers are rendered.
       
     - Tap anywhere on the screen to spawn a ball into the game.

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/multipliers/multipliers_game.dart';
 
 void addMultipliersStories(Dashbook dashbook) {
-  dashbook.storiesOf('Multipliers').add(
+  dashbook.storiesOf('Multipliers').addGame(
-        'Basic',
+        title: 'Assets',
-        (context) => GameWidget(
+        description: MultipliersGame.description,
-          game: MultipliersGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => MultipliersGame(),
-        ),
-        codeLink: buildSourceLink('multiplier/basic.dart'),
-        info: MultipliersGame.info,
       );
 }

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

@@ -5,10 +5,10 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class PlungerGame extends BasicBallGame with KeyboardEvents, Traceable {
+class PlungerGame extends BallGame with KeyboardEvents, Traceable {
   PlungerGame() : super(color: const Color(0xFFFF0000));
 
-  static const info = '''
+  static const description = '''
     Shows how Plunger is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -27,11 +27,10 @@ class PlungerGame extends BasicBallGame with KeyboardEvents, Traceable {
     await super.onLoad();
 
     final center = screenToWorld(camera.viewport.canvasSize! / 2);
-
+    await add(
-    plunger = Plunger(compressionDistance: 29)
+      plunger = Plunger(compressionDistance: 29)
-      ..initialPosition = Vector2(center.x - (Kicker.size.x * 2), center.y);
+        ..initialPosition = Vector2(center.x - (Kicker.size.x * 2), center.y),
-    await add(plunger);
+    );
-
     await traceAllBodies();
   }
 

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/plunger/plunger_game.dart';
 
 void addPlungerStories(Dashbook dashbook) {
-  dashbook.storiesOf('Plunger').add(
+  dashbook.storiesOf('Plunger').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: PlungerGame.description,
-          game: PlungerGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => PlungerGame(),
-        ),
-        codeLink: buildSourceLink('plunger_game/basic.dart'),
-        info: PlungerGame.info,
       );
 }

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

@@ -5,8 +5,8 @@ import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
-class ScoreTextBasicGame extends BasicGame with TapDetector {
+class ScoreTextGame extends AssetsGame with TapDetector {
-  static const info = '''
+  static const description = '''
     Simple game to show how score text works,
 
     - Tap anywhere on the screen to spawn an text on the given location.

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/score_text/basic.dart';
+import 'package:sandbox/stories/score_text/score_text_game.dart';
 
 void addScoreTextStories(Dashbook dashbook) {
-  dashbook.storiesOf('ScoreText').add(
+  dashbook.storiesOf('ScoreText').addGame(
-        'Basic',
+        title: 'Basic',
-        (context) => GameWidget(
+        description: ScoreTextGame.description,
-          game: ScoreTextBasicGame(),
+        gameBuilder: (_) => ScoreTextGame(),
-        ),
-        codeLink: buildSourceLink('score_text/basic.dart'),
-        info: ScoreTextBasicGame.info,
       );
 }

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

@@ -1,11 +1,18 @@
 import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SlingshotGame extends BasicBallGame with Traceable {
+class SlingshotGame extends BallGame {
-  static const info = '''
+  SlingshotGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.slingshot.upper.keyName,
+            Assets.images.slingshot.lower.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how Slingshots are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,13 +23,9 @@ class SlingshotGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.slingshot.upper.keyName,
-      Assets.images.slingshot.lower.keyName,
-    ]);
-
-    await addFromBlueprint(Slingshots());
     camera.followVector2(Vector2.zero());
+    await addFromBlueprint(Slingshots());
+    await ready();
     await traceAllBodies();
   }
 }

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/slingshot/slingshot_game.dart';
 
 void addSlingshotStories(Dashbook dashbook) {
-  dashbook.storiesOf('Slingshots').add(
+  dashbook.storiesOf('Slingshots').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: SlingshotGame.description,
-          game: SlingshotGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => SlingshotGame(),
-        ),
-        codeLink: buildSourceLink('slingshot_game/basic.dart'),
-        info: SlingshotGame.info,
       );
 }

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

@@ -1,15 +0,0 @@
-import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
-import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/spaceship/basic_spaceship_game.dart';
-
-void addSpaceshipStories(Dashbook dashbook) {
-  dashbook.storiesOf('Spaceship').add(
-        'Basic',
-        (context) => GameWidget(
-          game: BasicSpaceshipGame(),
-        ),
-        codeLink: buildSourceLink('spaceship/basic.dart'),
-        info: BasicSpaceshipGame.info,
-      );
-}

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

@@ -1,16 +0,0 @@
-import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
-import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/spaceship_rail/spaceship_rail_game.dart';
-
-void addSpaceshipRailStories(Dashbook dashbook) {
-  dashbook.storiesOf('SpaceshipRail').add(
-        'Basic',
-        (context) => GameWidget(
-          game: SpaceshipRailGame()
-            ..trace = context.boolProperty('Trace', true),
-        ),
-        codeLink: buildSourceLink('spaceship_rail/basic.dart'),
-        info: SpaceshipRailGame.info,
-      );
-}

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

@@ -1,16 +0,0 @@
-import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
-import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/spaceship_ramp/spaceship_ramp_game.dart';
-
-void addSpaceshipRampStories(Dashbook dashbook) {
-  dashbook.storiesOf('SpaceshipRamp').add(
-        'Basic',
-        (context) => GameWidget(
-          game: SpaceshipRampGame()
-            ..trace = context.boolProperty('Trace', true),
-        ),
-        codeLink: buildSourceLink('spaceship_ramp/basic.dart'),
-        info: SpaceshipRampGame.info,
-      );
-}

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

@@ -2,11 +2,10 @@ import 'dart:async';
 
 import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SparkyBumperGame extends BasicBallGame with Traceable {
+class SparkyBumperGame extends BallGame {
-  static const info = '''
+  static const description = '''
     Shows how a SparkyBumper is rendered.
 
     - Activate the "trace" parameter to overlay the body.

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

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/sparky_bumper/sparky_bumper_game.dart';
 
 void addSparkyBumperStories(Dashbook dashbook) {
-  dashbook.storiesOf('Sparky Bumpers').add(
+  dashbook.storiesOf('Sparky Bumpers').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: SparkyBumperGame.description,
-          game: SparkyBumperGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => SparkyBumperGame(),
-        ),
-        codeLink: buildSourceLink('sparky_bumper/basic.dart'),
-        info: SparkyBumperGame.info,
       );
 }

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

@@ -4,6 +4,7 @@ export 'ball/stories.dart';
 export 'baseboard/stories.dart';
 export 'boundaries/stories.dart';
 export 'chrome_dino/stories.dart';
+export 'dino_wall/stories.dart';
 export 'effects/stories.dart';
 export 'flipper/stories.dart';
 export 'flutter_forest/stories.dart';
@@ -14,8 +15,4 @@ export 'multipliers/stories.dart';
 export 'plunger/stories.dart';
 export 'score_text/stories.dart';
 export 'slingshot/stories.dart';
-export 'spaceship/stories.dart';
-export 'spaceship_rail/stories.dart';
-export 'spaceship_ramp/stories.dart';
 export 'sparky_bumper/stories.dart';
-export 'zoom/stories.dart';

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

@@ -1,15 +0,0 @@
-import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
-import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/zoom/basic_zoom_game.dart';
-
-void addZoomStories(Dashbook dashbook) {
-  dashbook.storiesOf('CameraZoom').add(
-        'Basic',
-        (context) => GameWidget(
-          game: BasicCameraZoomGame(),
-        ),
-        codeLink: buildSourceLink('zoom/basic_zoom_game.dart'),
-        info: BasicCameraZoomGame.info,
-      );
-}

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

@@ -11,15 +11,23 @@ import '../../helpers/helpers.dart';
 void main() {
   group('DinoWalls', () {
     TestWidgetsFlutterBinding.ensureInitialized();
-    final flameTester = FlameTester(TestGame.new);
+    final assets = [
+      Assets.images.dino.dinoLandTop.keyName,
+      Assets.images.dino.dinoLandBottom.keyName,
+    ];
+    final flameTester = FlameTester(() => TestGame(assets));
 
     flameTester.testGameWidget(
       'renders correctly',
       setUp: (game, tester) async {
+        await game.images.loadAll(assets);
         await game.addFromBlueprint(DinoWalls());
+        await game.ready();
+
         game.camera.followVector2(Vector2.zero());
         game.camera.zoom = 6.5;
-        await game.ready();
+
+        await tester.pump();
       },
       verify: (game, tester) async {
         await expectLater(

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

@@ -29,9 +29,12 @@ void main() {
       'loads correctly',
       (game) async {
         final spaceshipRamp = SpaceshipRamp();
-        await game.ensureAdd(spaceshipRamp);
+        await game.addFromBlueprint(spaceshipRamp);
+        await game.ready();
 
-        expect(game.contains(spaceshipRamp), isTrue);
+        for (final component in spaceshipRamp.components) {
+          expect(game.contains(component), isTrue);
+        }
       },
     );
 

packages/pinball_flame/lib/pinball_flame.dart

@@ -3,3 +3,4 @@ library pinball_flame;
 export 'src/blueprint.dart';
 export 'src/component_controller.dart';
 export 'src/keyboard_input_controller.dart';
+export 'src/sprite_animation.dart';

packages/pinball_flame/lib/src/blueprint.dart

@@ -1,16 +1,13 @@
 import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 
-// TODO(erickzanardo): Keeping this inside our code base
+// TODO(erickzanardo): Keeping this inside our code base so we can experiment
-// so we can experiment with the idea, but this is a
+// with the idea, but this is a potential upstream change on Flame.
-// potential upstream change on Flame.
 
 /// {@template blueprint}
-/// A [Blueprint] is a virtual way of grouping [Component]s that are related,
+/// A [Blueprint] is a virtual way of grouping [Component]s that are related.
-/// but they need to be added directly on the [FlameGame] level.
 /// {@endtemplate blueprint}
-// TODO(alestiago): refactor with feat/make-blueprint-extend-component.
+class Blueprint {
-class Blueprint extends Component {
   /// {@macro blueprint}
   Blueprint({
     Iterable<Component>? components,
@@ -27,7 +24,7 @@ class Blueprint extends Component {
 
   final List<Component> _components = [];
 
-  final List<Component> _blueprints = [];
+  final List<Blueprint> _blueprints = [];
 
   Future<void> _addToParent(Component parent) async {
     await parent.addAll(_components);
@@ -37,7 +34,7 @@ class Blueprint extends Component {
   List<Component> get components => List.unmodifiable(_components);
 
   /// Returns a copy of the blueprints built by this blueprint.
-  List<Component> get blueprints => List.unmodifiable(_blueprints);
+  List<Blueprint> get blueprints => List.unmodifiable(_blueprints);
 }
 
 /// Adds helper methods regarding [Blueprint]s to [FlameGame].

packages/pinball_flame/lib/src/sprite_animation.dart

@@ -0,0 +1,102 @@
+// ignore_for_file: public_member_api_docs
+
+import 'dart:math';
+
+import 'package:flame/components.dart';
+import 'package:flame/image_composition.dart';
+import 'package:flutter/material.dart' hide Animation;
+
+/// {@template flame.widgets.sprite_animation_widget}
+/// A [StatelessWidget] that renders a [SpriteAnimation].
+/// {@endtemplate}
+// TODO(arturplaczek): Remove when this PR will be merged.
+// https://github.com/flame-engine/flame/pull/1552
+class SpriteAnimationWidget extends StatelessWidget {
+  /// {@macro flame.widgets.sprite_animation_widget}
+  const SpriteAnimationWidget({
+    required this.controller,
+    this.anchor = Anchor.topLeft,
+    Key? key,
+  }) : super(key: key);
+
+  /// The positioning [Anchor].
+  final Anchor anchor;
+
+  final SpriteAnimationController controller;
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: controller,
+      builder: (_, __) {
+        return CustomPaint(
+          painter: SpritePainter(
+            controller.animation.getSprite(),
+            anchor,
+          ),
+        );
+      },
+    );
+  }
+}
+
+class SpriteAnimationController extends AnimationController {
+  SpriteAnimationController({
+    required TickerProvider vsync,
+    required this.animation,
+  }) : super(vsync: vsync) {
+    duration = Duration(seconds: animation.totalDuration().ceil());
+  }
+
+  final SpriteAnimation animation;
+
+  double? _lastUpdated;
+
+  @override
+  void notifyListeners() {
+    super.notifyListeners();
+
+    final now = DateTime.now().millisecond.toDouble();
+    final dt = max<double>(0, (now - (_lastUpdated ?? 0)) / 1000);
+    animation.update(dt);
+    _lastUpdated = now;
+  }
+}
+
+class SpritePainter extends CustomPainter {
+  SpritePainter(
+    this._sprite,
+    this._anchor, {
+    double angle = 0,
+  }) : _angle = angle;
+
+  final Sprite _sprite;
+  final Anchor _anchor;
+  final double _angle;
+
+  @override
+  bool shouldRepaint(SpritePainter oldDelegate) {
+    return oldDelegate._sprite != _sprite ||
+        oldDelegate._anchor != _anchor ||
+        oldDelegate._angle != _angle;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final boxSize = size.toVector2();
+    final rate = boxSize.clone()..divide(_sprite.srcSize);
+    final minRate = min(rate.x, rate.y);
+    final paintSize = _sprite.srcSize * minRate;
+    final anchorPosition = _anchor.toVector2();
+    final boxAnchorPosition = boxSize.clone()..multiply(anchorPosition);
+    final spriteAnchorPosition = anchorPosition..multiply(paintSize);
+
+    canvas
+      ..translateVector(boxAnchorPosition..sub(spriteAnchorPosition))
+      ..renderRotated(
+        _angle,
+        spriteAnchorPosition,
+        (canvas) => _sprite.render(canvas, size: paintSize),
+      );
+  }
+}

packages/pinball_flame/test/src/sprite_animation_test.dart

@@ -0,0 +1,74 @@
+import 'package:flame/components.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:pinball_flame/pinball_flame.dart';
+
+class MockSpriteAnimationController extends Mock
+    implements SpriteAnimationController {}
+
+class MockSpriteAnimation extends Mock implements SpriteAnimation {}
+
+class MockSprite extends Mock implements Sprite {}
+
+// TODO(arturplaczek): Remove when this PR will be merged.
+// https://github.com/flame-engine/flame/pull/1552
+
+void main() {
+  group('PinballSpriteAnimationWidget', () {
+    late SpriteAnimationController controller;
+    late SpriteAnimation animation;
+    late Sprite sprite;
+
+    setUp(() {
+      controller = MockSpriteAnimationController();
+      animation = MockSpriteAnimation();
+      sprite = MockSprite();
+
+      when(() => controller.animation).thenAnswer((_) => animation);
+
+      when(() => animation.totalDuration()).thenAnswer((_) => 1);
+      when(() => animation.getSprite()).thenAnswer((_) => sprite);
+      when(() => sprite.srcSize).thenAnswer((_) => Vector2(1, 1));
+      when(() => sprite.srcSize).thenAnswer((_) => Vector2(1, 1));
+    });
+
+    testWidgets('renders correctly', (tester) async {
+      await tester.pumpWidget(
+        SpriteAnimationWidget(
+          controller: controller,
+        ),
+      );
+
+      await tester.pumpAndSettle();
+      await tester.pumpAndSettle();
+
+      expect(find.byType(SpriteAnimationWidget), findsOneWidget);
+    });
+
+    test('SpriteAnimationController is updating animations', () {
+      SpriteAnimationController(
+        vsync: const TestVSync(),
+        animation: animation,
+      ).notifyListeners();
+
+      verify(() => animation.update(any())).called(1);
+    });
+
+    testWidgets('SpritePainter shouldRepaint returns true when Sprite changed',
+        (tester) async {
+      final spritePainter = SpritePainter(
+        sprite,
+        Anchor.center,
+        angle: 45,
+      );
+
+      final anotherPainter = SpritePainter(
+        sprite,
+        Anchor.center,
+        angle: 30,
+      );
+
+      expect(spritePainter.shouldRepaint(anotherPainter), isTrue);
+    });
+  });
+}

packages/share_repository/lib/share_repository.dart

@@ -1,3 +1,4 @@
 library share_repository;
 
+export 'src/models/models.dart';
 export 'src/share_repository.dart';

packages/share_repository/lib/src/models/models.dart

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

packages/share_repository/lib/src/models/share_platform.dart

@@ -0,0 +1,8 @@
+/// The platform that is being used to share a score.
+enum SharePlatform {
+  /// Twitter platform.
+  twitter,
+
+  /// Facebook platform.
+  facebook,
+}

packages/share_repository/lib/src/share_repository.dart

@@ -1,7 +1,30 @@
+import 'package:share_repository/share_repository.dart';
+
 /// {@template share_repository}
 /// Repository to facilitate sharing scores.
 /// {@endtemplate}
 class ShareRepository {
   /// {@macro share_repository}
-  const ShareRepository();
+  const ShareRepository({
+    required String appUrl,
+  }) : _appUrl = appUrl;
+
+  final String _appUrl;
+
+  /// Returns a url to share the [value] on the given [platform].
+  ///
+  /// The returned url can be opened using the [url_launcher](https://pub.dev/packages/url_launcher) package.
+  String shareText({
+    required String value,
+    required SharePlatform platform,
+  }) {
+    final encodedUrl = Uri.encodeComponent(_appUrl);
+    final encodedShareText = Uri.encodeComponent(value);
+    switch (platform) {
+      case SharePlatform.twitter:
+        return 'https://twitter.com/intent/tweet?url=$encodedUrl&text=$encodedShareText';
+      case SharePlatform.facebook:
+        return 'https://www.facebook.com/sharer.php?u=$encodedUrl&quote=$encodedShareText';
+    }
+  }
 }

packages/share_repository/test/src/share_repository_test.dart

@@ -4,8 +4,38 @@ import 'package:test/test.dart';
 
 void main() {
   group('ShareRepository', () {
+    const appUrl = 'https://fakeurl.com/';
+    late ShareRepository shareRepository;
+
+    setUp(() {
+      shareRepository = ShareRepository(appUrl: appUrl);
+    });
+
     test('can be instantiated', () {
-      expect(ShareRepository(), isNotNull);
+      expect(ShareRepository(appUrl: appUrl), isNotNull);
+    });
+
+    group('shareText', () {
+      const value = 'hello world!';
+      test('returns the correct share url for twitter', () async {
+        const shareTextUrl =
+            'https://twitter.com/intent/tweet?url=https%3A%2F%2Ffakeurl.com%2F&text=hello%20world!';
+        final shareTextResult = shareRepository.shareText(
+          value: value,
+          platform: SharePlatform.twitter,
+        );
+        expect(shareTextResult, equals(shareTextUrl));
+      });
+
+      test('returns the correct share url for facebook', () async {
+        const shareTextUrl =
+            'https://www.facebook.com/sharer.php?u=https%3A%2F%2Ffakeurl.com%2F&quote=hello%20world!';
+        final shareTextResult = shareRepository.shareText(
+          value: value,
+          platform: SharePlatform.facebook,
+        );
+        expect(shareTextResult, equals(shareTextUrl));
+      });
     });
   });
 }

test/game/components/sparky_fire_zone_test.dart

@@ -27,8 +27,8 @@ void main() {
 
   group('SparkyFireZone', () {
     flameTester.test('loads correctly', (game) async {
-      final sparkyFireZone = SparkyFireZone();
+      await game.addFromBlueprint(SparkyFireZone());
-      await game.ensureAdd(sparkyFireZone);
+      await game.ready();
     });
 
     group('loads', () {

test/game/pinball_game_test.dart

@@ -54,6 +54,7 @@ void main() {
     Assets.images.boundary.bottom.keyName,
     Assets.images.slingshot.upper.keyName,
     Assets.images.slingshot.lower.keyName,
+<<<<<<< HEAD
     Assets.images.multiplier.x2.active.keyName,
     Assets.images.multiplier.x2.inactive.keyName,
     Assets.images.multiplier.x3.active.keyName,
@@ -64,6 +65,10 @@ void main() {
     Assets.images.multiplier.x5.inactive.keyName,
     Assets.images.multiplier.x6.active.keyName,
     Assets.images.multiplier.x6.inactive.keyName,
+=======
+    Assets.images.dino.dinoLandTop.keyName,
+    Assets.images.dino.dinoLandBottom.keyName,
+>>>>>>> main
   ];
   final flameTester = FlameTester(() => PinballTestGame(assets));
   final debugModeFlameTester = FlameTester(() => DebugPinballTestGame(assets));