feat(sandbox): made BasicFlipperGame respond to KeyEvents (#123)

* feat: made Flippers movable

* feat(sanbox): included balls in flipper example

* feat: improved moving logic

* refactor: removed unused import

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

@@ -1,21 +1,39 @@
-import 'package:flame_forge2d/flame_forge2d.dart';
+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';
 
-class BasicFlipperGame extends BasicGame {
+import 'package:sandbox/stories/ball/basic.dart';
+
+class BasicFlipperGame extends BasicBallGame with KeyboardEvents {
+  BasicFlipperGame() : super(color: Colors.blue);
+
   static const info = '''
       Basic example of how a Flipper works.
 ''';
 
+  static const _leftFlipperKeys = [
+    LogicalKeyboardKey.arrowLeft,
+    LogicalKeyboardKey.keyA,
+  ];
+
+  static const _rightFlipperKeys = [
+    LogicalKeyboardKey.arrowRight,
+    LogicalKeyboardKey.keyD,
+  ];
+
+  late Flipper leftFlipper;
+  late Flipper rightFlipper;
+
   @override
   Future<void> onLoad() async {
     await super.onLoad();
 
     final center = screenToWorld(camera.viewport.canvasSize! / 2);
 
-    final leftFlipper = Flipper(side: BoardSide.left)
+    leftFlipper = Flipper(side: BoardSide.left)
       ..initialPosition = center - Vector2(Flipper.size.x, 0);
-    final rightFlipper = Flipper(side: BoardSide.right)
+    rightFlipper = Flipper(side: BoardSide.right)
       ..initialPosition = center + Vector2(Flipper.size.x, 0);
 
     await addAll([
@@ -23,4 +41,32 @@ class BasicFlipperGame extends BasicGame {
       rightFlipper,
     ]);
   }
+
+  @override
+  KeyEventResult onKeyEvent(
+    RawKeyEvent event,
+    Set<LogicalKeyboardKey> keysPressed,
+  ) {
+    final movedLeftFlipper = _leftFlipperKeys.contains(event.logicalKey);
+    if (movedLeftFlipper) {
+      if (event is RawKeyDownEvent) {
+        leftFlipper.moveUp();
+      } else if (event is RawKeyUpEvent) {
+        leftFlipper.moveDown();
+      }
+    }
+
+    final movedRightFlipper = _rightFlipperKeys.contains(event.logicalKey);
+    if (movedRightFlipper) {
+      if (event is RawKeyDownEvent) {
+        rightFlipper.moveUp();
+      } else if (event is RawKeyUpEvent) {
+        rightFlipper.moveDown();
+      }
+    }
+
+    return movedLeftFlipper || movedRightFlipper
+        ? KeyEventResult.handled
+        : KeyEventResult.ignored;
+  }
 }

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

@@ -3,10 +3,9 @@ import 'dart:async';
 import 'package:flame/components.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/material.dart';
-import 'package:pinball_components/pinball_components.dart';
+import 'package:sandbox/stories/flipper/basic.dart';
-import 'package:sandbox/common/common.dart';
 
-class FlipperTracingGame extends BasicGame {
+class FlipperTracingGame extends BasicFlipperGame {
   static const info = '''
       Basic example of how the Flipper body overlays the sprite.
 ''';
@@ -14,17 +13,6 @@ 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 - Vector2(Flipper.size.x, 0);
-    final rightFlipper = Flipper(side: BoardSide.right)
-      ..initialPosition = center + Vector2(Flipper.size.x, 0);
-
-    await addAll([
-      leftFlipper,
-      rightFlipper,
-    ]);
     leftFlipper.trace();
     rightFlipper.trace();
   }
@@ -37,7 +25,6 @@ extension on BodyComponent {
     body.joints.whereType<RevoluteJoint>().forEach(
           (joint) => joint.setLimits(0, 0),
         );
-    body.setType(BodyType.static);
 
     unawaited(
       mounted.whenComplete(() {