feat: defined trace method

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

@@ -1,11 +1,13 @@
 import 'dart:async';
 
 import 'package:flame/components.dart';
+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';
 
-class FlipperTracingGame extends BasicGame {
+class FlipperTracingGame extends BasicGame with TapDetector {
   static const info = '''
       Basic example of how a Flipper works.
 ''';
@@ -13,19 +15,38 @@ class FlipperTracingGame extends BasicGame {
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-
     final center = screenToWorld(camera.viewport.canvasSize! / 2);
+    final leftFlipper = Flipper(side: BoardSide.left)..initialPosition = center;
 
-    final leftFlipper = Flipper(side: BoardSide.left)
-      ..initialPosition = center - Vector2(Flipper.size.x, 0);
+    await add(leftFlipper);
+    leftFlipper.trace();
+  }
 
-    await addAll([
-      leftFlipper,
-    ]);
+  @override
+  void onTapUp(TapUpInfo info) {
+    add(
+      Ball(baseColor: Colors.yellow)..initialPosition = info.eventPosition.game,
+    );
+  }
+}
 
-    leftFlipper.body.joints.whereType<RevoluteJoint>().forEach(
+extension on BodyComponent {
+  void trace({Color color = Colors.red}) {
+    paint = Paint()..color = color;
+    renderBody = true;
+    body.joints.whereType<RevoluteJoint>().forEach(
           (joint) => joint.setLimits(0, 0),
         );
-    leftFlipper.removeAll(leftFlipper.children);
+
+    for (final fixture in body.fixtures) {
+      fixture.setSensor(true);
+    }
+
+    unawaited(
+      mounted.whenComplete(() {
+        final sprite = children.whereType<SpriteComponent>().first;
+        sprite.paint.color = sprite.paint.color.withOpacity(0.5);
+      }),
+    );
   }
 }