progress on the input

packages/pinball_components/lib/gen/assets.gen.dart

@@ -57,6 +57,8 @@ class $AssetsImagesBackboardGen {
   /// File path: assets/images/backboard/backboard_scores.png
   AssetGenImage get backboardScores =>
       const AssetGenImage('assets/images/backboard/backboard_scores.png');
+  AssetGenImage get display =>
+      const AssetGenImage('assets/images/backboard/display.png');
 }
 
 class $AssetsImagesBaseboardGen {
@@ -307,11 +309,8 @@ class $AssetsImagesSparkyBumperGen {
 class $AssetsImagesSparkyComputerGen {
   const $AssetsImagesSparkyComputerGen();
 
-  /// File path: assets/images/sparky/computer/base.png
   AssetGenImage get base =>
       const AssetGenImage('assets/images/sparky/computer/base.png');
-
-  /// File path: assets/images/sparky/computer/top.png
   AssetGenImage get top =>
       const AssetGenImage('assets/images/sparky/computer/top.png');
 }
@@ -355,11 +354,8 @@ class $AssetsImagesDashBumperMainGen {
 class $AssetsImagesSparkyBumperAGen {
   const $AssetsImagesSparkyBumperAGen();
 
-  /// File path: assets/images/sparky/bumper/a/active.png
   AssetGenImage get active =>
       const AssetGenImage('assets/images/sparky/bumper/a/active.png');
-
-  /// File path: assets/images/sparky/bumper/a/inactive.png
   AssetGenImage get inactive =>
       const AssetGenImage('assets/images/sparky/bumper/a/inactive.png');
 }
@@ -367,11 +363,8 @@ class $AssetsImagesSparkyBumperAGen {
 class $AssetsImagesSparkyBumperBGen {
   const $AssetsImagesSparkyBumperBGen();
 
-  /// File path: assets/images/sparky/bumper/b/active.png
   AssetGenImage get active =>
       const AssetGenImage('assets/images/sparky/bumper/b/active.png');
-
-  /// File path: assets/images/sparky/bumper/b/inactive.png
   AssetGenImage get inactive =>
       const AssetGenImage('assets/images/sparky/bumper/b/inactive.png');
 }
@@ -379,11 +372,8 @@ class $AssetsImagesSparkyBumperBGen {
 class $AssetsImagesSparkyBumperCGen {
   const $AssetsImagesSparkyBumperCGen();
 
-  /// File path: assets/images/sparky/bumper/c/active.png
   AssetGenImage get active =>
       const AssetGenImage('assets/images/sparky/bumper/c/active.png');
-
-  /// File path: assets/images/sparky/bumper/c/inactive.png
   AssetGenImage get inactive =>
       const AssetGenImage('assets/images/sparky/bumper/c/inactive.png');
 }

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

@@ -1,64 +0,0 @@
-import 'package:flame/components.dart';
-import 'package:pinball_components/pinball_components.dart';
-
-/// {@template backboard}
-/// The [Backboard] of the pinball machine.
-/// {@endtemplate}
-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
-          position: position..clone().multiply(Vector2(1, -1)),
-          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,
-    );
-    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/lib/src/components/backboard/backboard.dart

@@ -0,0 +1,66 @@
+import 'dart:async';
+
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball_components/pinball_components.dart';
+
+export 'backboard_game_over.dart';
+export 'backboard_letter_prompt.dart';
+export 'backboard_waiting.dart';
+
+/// {@template backboard}
+/// The [Backboard] of the pinball machine.
+/// {@endtemplate}
+class Backboard extends PositionComponent with HasGameRef {
+  /// {@macro backboard}
+  Backboard({
+    required Vector2 position,
+  }) : super(
+          // TODO(erickzanardo): remove multiply after
+          // https://github.com/flame-engine/flame/pull/1506 is merged
+          position: position..clone().multiply(Vector2(1, -1)),
+          anchor: Anchor.bottomCenter,
+        );
+
+  /// [TextPaint] used on the [Backboard]
+  static final textPaint = TextPaint(
+    style: TextStyle(
+      fontSize: 6,
+      color: Colors.white,
+      fontFamily: PinballFonts.pixeloidSans,
+    ),
+  );
+
+  /// {@macro backboard}
+  ///
+  /// Returns a [Backboard] initialized in the waiting mode
+  factory Backboard.waiting({
+    required Vector2 position,
+  }) {
+    return Backboard(position: position)
+        ..waitingMode();
+  }
+
+  /// {@macro backboard}
+  ///
+  /// Returns a [Backboard] initialized in the game over mode
+  factory Backboard.gameOver({
+    required Vector2 position,
+    required int score,
+  }) {
+    return Backboard(position: position)
+        ..gameOverMode(score: score);
+  }
+
+  /// Puts the Backboard in waiting mode, where the scoreboard is shown.
+  Future<void> waitingMode() async {
+    children.removeWhere((element) => true);
+    await add(BackboardWaiting());
+  }
+
+  /// Puts the Backboard in game over mode, where the score input is shown.
+  Future<void> gameOverMode({ required int score}) async {
+    children.removeWhere((element) => true);
+    await add(BackboardGameOver(score: score));
+  }
+}

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

@@ -0,0 +1,87 @@
+import 'dart:async';
+
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:intl/intl.dart';
+import 'package:pinball_components/pinball_components.dart';
+
+/// {@template backboard_game_over}
+/// [PositionComponent] that handles the user input on the
+/// game over display view.
+/// {@endtemplate}
+class BackboardGameOver extends PositionComponent
+    with HasGameRef, KeyboardHandler {
+  /// {@macro backboard_game_over}
+  BackboardGameOver({
+    required int score,
+  }) : _score = score;
+
+  final int _score;
+
+  final _numberFormat = NumberFormat('#,###,###');
+
+  @override
+  Future<void> onLoad() async {
+    final backgroundSprite = await gameRef.loadSprite(
+      Assets.images.backboard.backboardGameOver.keyName,
+    );
+
+    unawaited(
+      add(
+        SpriteComponent(
+          sprite: backgroundSprite,
+          size: backgroundSprite.originalSize / 10,
+          anchor: Anchor.bottomCenter,
+        ),
+      ),
+    );
+
+    final displaySprite = await gameRef.loadSprite(
+      Assets.images.backboard.display.keyName,
+    );
+
+    unawaited(
+      add(
+        SpriteComponent(
+          sprite: displaySprite,
+          size: displaySprite.originalSize / 10,
+          anchor: Anchor.bottomCenter,
+          position: Vector2(0, -11.5),
+        ),
+      ),
+    );
+
+    unawaited(
+      add(
+        TextComponent(
+          text: _numberFormat.format(_score),
+          position: Vector2(-22, -46.5),
+          anchor: Anchor.center,
+          textRenderer: Backboard.textPaint,
+        ),
+      ),
+    );
+
+    for (var i = 0; i < 3; i++) {
+      unawaited(
+        add(
+          BackboardLetterPrompt(
+            position: Vector2(
+              20 + (6 * i).toDouble(),
+              -46.5,
+            ),
+            hasFocus: i == 0,
+          ),
+        ),
+      );
+    }
+  }
+
+  @override
+  bool onKeyEvent(RawKeyEvent event, Set<LogicalKeyboardKey> keysPressed) {
+    final isUp = event is RawKeyUpEvent;
+
+    return true;
+  }
+}

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

@@ -0,0 +1,74 @@
+import 'dart:async';
+import 'dart:ui';
+
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball_components/pinball_components.dart';
+
+/// {@template backboard_letter_prompt}
+/// A [PositionComponent] that renders a letter prompt used
+/// on the [BackboardGameOver]
+/// {@endtemplate}
+class BackboardLetterPrompt extends PositionComponent {
+  /// {@macro backboard_letter_prompt}
+  BackboardLetterPrompt({
+    required Vector2 position,
+    bool hasFocus = false,
+  })  : _hasFocus = hasFocus,
+        super(
+          position: position,
+        );
+
+  static const _alphabetCode = 65;
+  static const _alphabetLength = 26;
+
+  bool _hasFocus;
+  String _char = '';
+
+  late RectangleComponent _underscore;
+  late TextComponent _input;
+  late TimerComponent _underscoreBlinker;
+
+  @override
+  Future<void> onLoad() async {
+    _underscore = RectangleComponent(
+      size: Vector2(
+        4,
+        1.2,
+      ),
+      anchor: Anchor.center,
+      position: Vector2(0, 4),
+    );
+
+    unawaited(add(_underscore));
+
+    _input = TextComponent(
+        text: _hasFocus ? 'A' : '',
+        textRenderer: Backboard.textPaint,
+        anchor: Anchor.center,
+    );
+    unawaited(add(_input));
+
+    _underscoreBlinker = TimerComponent(
+      period: 0.6,
+      repeat: true,
+      autoStart: _hasFocus,
+      onTick: () {
+        _underscore.paint.color = (_underscore.paint.color == Colors.white)
+            ? Colors.transparent
+            : Colors.white;
+      },
+    );
+
+    unawaited(add(_underscoreBlinker));
+  }
+
+  void up() {
+  }
+
+  void down() {
+  }
+
+  void nextPrompt() {
+  }
+}

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

@@ -0,0 +1,17 @@
+import 'package:flame/components.dart';
+import 'package:pinball_components/pinball_components.dart';
+
+/// [PositionComponent] that shows the leaderboard while the player
+/// has not started the game yet.
+class BackboardWaiting extends SpriteComponent with HasGameRef {
+  @override
+  Future<void> onLoad() async {
+    final sprite = await gameRef.loadSprite(
+      Assets.images.backboard.backboardScores.keyName,
+    );
+
+    this.sprite = sprite;
+    size = sprite.originalSize / 10;
+    anchor = Anchor.bottomCenter;
+  }
+}

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

@@ -1,5 +1,5 @@
 export 'alien_bumper.dart';
-export 'backboard.dart';
+export 'backboard/backboard.dart';
 export 'ball.dart';
 export 'baseboard.dart';
 export 'board_dimensions.dart';

packages/pinball_components/pubspec.yaml

@@ -13,6 +13,7 @@ dependencies:
     sdk: flutter
   geometry:
     path: ../geometry
+  intl: ^0.17.0
 
 
 dev_dependencies:

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

@@ -11,6 +11,9 @@ abstract class BasicGame extends Forge2DGame {
   }
 }
 
+abstract class BasicKeyboardGame extends BasicGame
+    with HasKeyboardHandlerComponents {}
+
 abstract class LineGame extends BasicGame with PanDetector {
   Vector2? _lineEnd;
 

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

@@ -2,11 +2,15 @@ import 'package:flame/components.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
-class BackboardGameOverGame extends BasicGame {
+class BackboardGameOverGame extends BasicKeyboardGame {
+  BackboardGameOverGame(this.score);
+
   static const info = '''
       Simple example showing the waiting mode of the backboard.
   ''';
 
+  final int score;
+
   @override
   Future<void> onLoad() async {
     camera
@@ -14,9 +18,9 @@ class BackboardGameOverGame extends BasicGame {
       ..zoom = 5;
 
     await add(
-      Backboard(
+      Backboard.gameOver(
         position: Vector2(0, 20),
-        startsAtWaiting: false,
+        score: score,
       ),
     );
   }

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

@@ -17,7 +17,9 @@ void addBackboardStories(Dashbook dashbook) {
     ..add(
       'Game over',
       (context) => GameWidget(
-        game: BackboardGameOverGame(),
+        game: BackboardGameOverGame(
+            context.numberProperty('score', 9000000000).toInt(),
+        ),
       ),
       codeLink: buildSourceLink('backboard/game_over.dart'),
       info: BackboardGameOverGame.info,

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

@@ -13,7 +13,7 @@ class BackboardWaitingGame extends BasicGame {
       ..followVector2(Vector2.zero())
       ..zoom = 5;
 
-    final backboard = Backboard(position: Vector2(0, 20));
+    final backboard = Backboard.waiting(position: Vector2(0, 20));
     await add(backboard);
   }
 }

packages/pinball_components/sandbox/pubspec.lock

@@ -149,6 +149,13 @@ packages:
       relative: true
     source: path
     version: "1.0.0+1"
+  intl:
+    dependency: transitive
+    description:
+      name: intl
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.17.0"
   js:
     dependency: transitive
     description: