feat: info screen ui

lib/game/components/backbox/backbox.dart

@@ -36,6 +36,22 @@ class Backbox extends PositionComponent with HasGameRef, ZIndex {
       ),
     );
   }
+
+  /// Puts [InfoDisplay] on the [Backbox].
+  Future<void> infoScreen({
+    required int score,
+    required String characterIconPath,
+    ScoreOnShared? onShared,
+  }) async {
+    removeAll(children.where((child) => child is! _BackboxSpriteComponent));
+    await add(
+      InfoDisplay(
+        score: score,
+        characterIconPath: characterIconPath,
+        onShared: onShared,
+      ),
+    );
+  }
 }
 
 class _BackboxSpriteComponent extends SpriteComponent with HasGameRef {

lib/game/components/backbox/displays/displays.dart

@@ -1 +1,2 @@
 export 'initials_input_display.dart';
+export 'info_display.dart';

lib/game/components/backbox/displays/info_display.dart

@@ -0,0 +1,238 @@
+import 'dart:async';
+
+import 'package:flame/components.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball/game/game.dart';
+import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+
+/// Signature for the callback called when the used has
+/// shared score on the [InfoDisplay].
+typedef ScoreOnShared = void Function(String);
+
+final _titleTextPaint = TextPaint(
+  style: const TextStyle(
+    fontSize: 1.6,
+    color: PinballColors.white,
+    fontFamily: PinballFonts.pixeloidSans,
+  ),
+);
+
+final _titleBoldTextPaint = TextPaint(
+  style: const TextStyle(
+    fontSize: 1.4,
+    color: PinballColors.white,
+    fontFamily: PinballFonts.pixeloidSans,
+    fontWeight: FontWeight.bold,
+  ),
+);
+
+final _linkTextPaint = TextPaint(
+  style: const TextStyle(
+    fontSize: 1.7,
+    color: PinballColors.orange,
+    fontFamily: PinballFonts.pixeloidSans,
+    fontWeight: FontWeight.bold,
+    decoration: TextDecoration.underline,
+    decorationThickness: 1,
+  ),
+);
+
+final _descriptionTextPaint = TextPaint(
+  style: const TextStyle(
+    fontSize: 1.6,
+    color: PinballColors.white,
+    fontFamily: PinballFonts.pixeloidSans,
+  ),
+);
+
+/// {@template info_display}
+/// Display that handles the user input on the game over view.
+/// {@endtemplate}
+class InfoDisplay extends Component with HasGameRef {
+  /// {@macro info_display}
+  InfoDisplay({
+    required int score,
+    required String characterIconPath,
+    ScoreOnShared? onShared,
+  })  : _onShared = onShared,
+        super(
+          children: [
+            _InstructionsComponent(),
+          ],
+        );
+
+  final ScoreOnShared? _onShared;
+
+  bool _share() {
+    _onShared?.call('');
+    return true;
+  }
+}
+
+class _InstructionsComponent extends PositionComponent with HasGameRef {
+  _InstructionsComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(0, -25),
+          children: [
+            _TitleComponent(),
+            _LinksComponent(),
+            _DescriptionComponent(),
+          ],
+        );
+}
+
+class _TitleComponent extends PositionComponent with HasGameRef<PinballGame> {
+  _TitleComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(0, 3),
+          children: [
+            _TitleBackgroundSpriteComponent(),
+            _ShareScoreTextComponent(),
+            _ChallengeFriendsTextComponent(),
+          ],
+        );
+}
+
+class _ShareScoreTextComponent extends TextComponent
+    with HasGameRef<PinballGame> {
+  _ShareScoreTextComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(0, -1.5),
+          textRenderer: _titleTextPaint,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = 'Share your score';
+    //gameRef.l10n.shareYourScore;
+  }
+}
+
+class _ChallengeFriendsTextComponent extends TextComponent
+    with HasGameRef<PinballGame> {
+  _ChallengeFriendsTextComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(0, 1.5),
+          textRenderer: _titleBoldTextPaint,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = 'AND CHALLENGE YOUR FRIENDS';
+    //gameRef.l10n.challengeYourFriends;
+  }
+}
+
+class _TitleBackgroundSpriteComponent extends SpriteComponent with HasGameRef {
+  _TitleBackgroundSpriteComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2.zero(),
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    final sprite = Sprite(
+      gameRef.images.fromCache(Assets.images.backbox.button.share.keyName),
+    );
+    this.sprite = sprite;
+    size = sprite.originalSize / 22;
+  }
+}
+
+class _LinksComponent extends PositionComponent with HasGameRef<PinballGame> {
+  _LinksComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(0, 9.2),
+          children: [
+            _ShareLinkComponent(),
+            _GotoIOLinkComponent(),
+          ],
+        );
+}
+
+class _ShareLinkComponent extends TextComponent with HasGameRef<PinballGame> {
+  _ShareLinkComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(-7, 0),
+          textRenderer: _linkTextPaint,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = 'SHARE'; //gameRef.l10n.share;
+  }
+}
+
+class _GotoIOLinkComponent extends TextComponent with HasGameRef<PinballGame> {
+  _GotoIOLinkComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(6, 0),
+          textRenderer: _linkTextPaint,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = 'GO TO I/O'; //gameRef.l10n.gotoIO;
+  }
+}
+
+class _DescriptionComponent extends PositionComponent
+    with HasGameRef<PinballGame> {
+  _DescriptionComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(0, 13),
+          children: [
+            _LearnMoreTextComponent(),
+            _LearnMore2TextComponent(),
+          ],
+        );
+}
+
+class _LearnMoreTextComponent extends TextComponent
+    with HasGameRef<PinballGame> {
+  _LearnMoreTextComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2.zero(),
+          textRenderer: _descriptionTextPaint,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = 'Learn more about building games in Flutter with';
+    //gameRef.l10n.learnMore;
+  }
+}
+
+class _LearnMore2TextComponent extends TextComponent
+    with HasGameRef<PinballGame> {
+  _LearnMore2TextComponent()
+      : super(
+          anchor: Anchor.center,
+          position: Vector2(0, 2.5),
+          textRenderer: _descriptionTextPaint,
+        );
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    text = 'Firebase or dive right into the open source code.';
+    //gameRef.l10n.learnMore2;
+  }
+}

lib/game/components/game_flow_controller.dart

@@ -18,6 +18,7 @@ class GameFlowController extends ComponentController<PinballGame>
 
   @override
   void onNewState(GameState state) {
+    print("START $state");
     if (state.isGameOver) {
       _initialsInput();
     } else {
@@ -29,7 +30,7 @@ class GameFlowController extends ComponentController<PinballGame>
   void _initialsInput() {
     // TODO(erickzanardo): implement score submission and "navigate" to the
     // next page
-    component.descendants().whereType<Backbox>().first.initialsInput(
+    component.descendants().whereType<Backbox>().first.infoScreen(
           score: state?.displayScore ?? 0,
           characterIconPath: component.characterTheme.leaderboardIcon.keyName,
         );
@@ -38,8 +39,10 @@ class GameFlowController extends ComponentController<PinballGame>
 
   /// Puts the game in the playing state.
   void start() {
+    _initialsInput();
+    /*
     component.audio.backgroundMusic();
     component.firstChild<CameraController>()?.focusOnGame();
-    component.overlays.remove(PinballGame.playButtonOverlay);
+    component.overlays.remove(PinballGame.playButtonOverlay);*/
   }
 }

lib/game/game_assets.dart

@@ -100,6 +100,7 @@ extension PinballGameAssetsX on PinballGame {
       images.load(components.Assets.images.sparky.bumper.c.dimmed.keyName),
       images.load(components.Assets.images.backbox.marquee.keyName),
       images.load(components.Assets.images.backbox.displayDivider.keyName),
+      images.load(components.Assets.images.backbox.button.share.keyName),
       images.load(components.Assets.images.googleWord.letter1.lit.keyName),
       images.load(components.Assets.images.googleWord.letter1.dimmed.keyName),
       images.load(components.Assets.images.googleWord.letter2.lit.keyName),

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

@@ -54,6 +54,9 @@ class $AssetsImagesAndroidGen {
 class $AssetsImagesBackboxGen {
   const $AssetsImagesBackboxGen();
 
+  $AssetsImagesBackboxButtonGen get button =>
+      const $AssetsImagesBackboxButtonGen();
+
   /// File path: assets/images/backbox/display-divider.png
   AssetGenImage get displayDivider =>
       const AssetGenImage('assets/images/backbox/display-divider.png');
@@ -66,9 +69,6 @@ class $AssetsImagesBackboxGen {
 class $AssetsImagesBallGen {
   const $AssetsImagesBallGen();
 
-  /// File path: assets/images/ball/ball.png
-  AssetGenImage get ball => const AssetGenImage('assets/images/ball/ball.png');
-
   /// File path: assets/images/ball/flame_effect.png
   AssetGenImage get flameEffect =>
       const AssetGenImage('assets/images/ball/flame_effect.png');
@@ -380,6 +380,14 @@ class $AssetsImagesAndroidSpaceshipGen {
       const AssetGenImage('assets/images/android/spaceship/saucer.png');
 }
 
+class $AssetsImagesBackboxButtonGen {
+  const $AssetsImagesBackboxButtonGen();
+
+  /// File path: assets/images/backbox/button/share.png
+  AssetGenImage get share =>
+      const AssetGenImage('assets/images/backbox/button/share.png');
+}
+
 class $AssetsImagesDashBumperGen {
   const $AssetsImagesDashBumperGen();
 

packages/pinball_components/pubspec.yaml

@@ -88,6 +88,7 @@ flutter:
     - assets/images/multiplier/x6/
     - assets/images/score/
     - assets/images/backbox/
+    - assets/images/backbox/button/
     - assets/images/flapper/
     - assets/images/skill_shot/