diff --git a/lib/game/components/backbox/backbox.dart b/lib/game/components/backbox/backbox.dart index 0ef85fba..693ad8c0 100644 --- a/lib/game/components/backbox/backbox.dart +++ b/lib/game/components/backbox/backbox.dart @@ -36,6 +36,22 @@ class Backbox extends PositionComponent with HasGameRef, ZIndex { ), ); } + + /// Puts [InfoDisplay] on the [Backbox]. + Future 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 { diff --git a/lib/game/components/backbox/displays/displays.dart b/lib/game/components/backbox/displays/displays.dart index 194212ab..f5b76ba0 100644 --- a/lib/game/components/backbox/displays/displays.dart +++ b/lib/game/components/backbox/displays/displays.dart @@ -1 +1,2 @@ export 'initials_input_display.dart'; +export 'info_display.dart'; diff --git a/lib/game/components/backbox/displays/info_display.dart b/lib/game/components/backbox/displays/info_display.dart new file mode 100644 index 00000000..4edc404b --- /dev/null +++ b/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 { + _TitleComponent() + : super( + anchor: Anchor.center, + position: Vector2(0, 3), + children: [ + _TitleBackgroundSpriteComponent(), + _ShareScoreTextComponent(), + _ChallengeFriendsTextComponent(), + ], + ); +} + +class _ShareScoreTextComponent extends TextComponent + with HasGameRef { + _ShareScoreTextComponent() + : super( + anchor: Anchor.center, + position: Vector2(0, -1.5), + textRenderer: _titleTextPaint, + ); + + @override + Future onLoad() async { + await super.onLoad(); + text = 'Share your score'; + //gameRef.l10n.shareYourScore; + } +} + +class _ChallengeFriendsTextComponent extends TextComponent + with HasGameRef { + _ChallengeFriendsTextComponent() + : super( + anchor: Anchor.center, + position: Vector2(0, 1.5), + textRenderer: _titleBoldTextPaint, + ); + + @override + Future 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 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 { + _LinksComponent() + : super( + anchor: Anchor.center, + position: Vector2(0, 9.2), + children: [ + _ShareLinkComponent(), + _GotoIOLinkComponent(), + ], + ); +} + +class _ShareLinkComponent extends TextComponent with HasGameRef { + _ShareLinkComponent() + : super( + anchor: Anchor.center, + position: Vector2(-7, 0), + textRenderer: _linkTextPaint, + ); + + @override + Future onLoad() async { + await super.onLoad(); + text = 'SHARE'; //gameRef.l10n.share; + } +} + +class _GotoIOLinkComponent extends TextComponent with HasGameRef { + _GotoIOLinkComponent() + : super( + anchor: Anchor.center, + position: Vector2(6, 0), + textRenderer: _linkTextPaint, + ); + + @override + Future onLoad() async { + await super.onLoad(); + text = 'GO TO I/O'; //gameRef.l10n.gotoIO; + } +} + +class _DescriptionComponent extends PositionComponent + with HasGameRef { + _DescriptionComponent() + : super( + anchor: Anchor.center, + position: Vector2(0, 13), + children: [ + _LearnMoreTextComponent(), + _LearnMore2TextComponent(), + ], + ); +} + +class _LearnMoreTextComponent extends TextComponent + with HasGameRef { + _LearnMoreTextComponent() + : super( + anchor: Anchor.center, + position: Vector2.zero(), + textRenderer: _descriptionTextPaint, + ); + + @override + Future onLoad() async { + await super.onLoad(); + text = 'Learn more about building games in Flutter with'; + //gameRef.l10n.learnMore; + } +} + +class _LearnMore2TextComponent extends TextComponent + with HasGameRef { + _LearnMore2TextComponent() + : super( + anchor: Anchor.center, + position: Vector2(0, 2.5), + textRenderer: _descriptionTextPaint, + ); + + @override + Future onLoad() async { + await super.onLoad(); + text = 'Firebase or dive right into the open source code.'; + //gameRef.l10n.learnMore2; + } +} diff --git a/lib/game/components/game_flow_controller.dart b/lib/game/components/game_flow_controller.dart index 1299e6eb..e6657627 100644 --- a/lib/game/components/game_flow_controller.dart +++ b/lib/game/components/game_flow_controller.dart @@ -18,6 +18,7 @@ class GameFlowController extends ComponentController @override void onNewState(GameState state) { + print("START $state"); if (state.isGameOver) { _initialsInput(); } else { @@ -29,7 +30,7 @@ class GameFlowController extends ComponentController void _initialsInput() { // TODO(erickzanardo): implement score submission and "navigate" to the // next page - component.descendants().whereType().first.initialsInput( + component.descendants().whereType().first.infoScreen( score: state?.displayScore ?? 0, characterIconPath: component.characterTheme.leaderboardIcon.keyName, ); @@ -38,8 +39,10 @@ class GameFlowController extends ComponentController /// Puts the game in the playing state. void start() { + _initialsInput(); + /* component.audio.backgroundMusic(); component.firstChild()?.focusOnGame(); - component.overlays.remove(PinballGame.playButtonOverlay); + component.overlays.remove(PinballGame.playButtonOverlay);*/ } } diff --git a/lib/game/game_assets.dart b/lib/game/game_assets.dart index ac324417..13da6f46 100644 --- a/lib/game/game_assets.dart +++ b/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), diff --git a/packages/pinball_components/assets/images/backbox/button/share.png b/packages/pinball_components/assets/images/backbox/button/share.png new file mode 100644 index 00000000..71f8d609 Binary files /dev/null and b/packages/pinball_components/assets/images/backbox/button/share.png differ diff --git a/packages/pinball_components/lib/gen/assets.gen.dart b/packages/pinball_components/lib/gen/assets.gen.dart index cac04cc0..9a8be63e 100644 --- a/packages/pinball_components/lib/gen/assets.gen.dart +++ b/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(); diff --git a/packages/pinball_components/pubspec.yaml b/packages/pinball_components/pubspec.yaml index 4f66c220..1876e5aa 100644 --- a/packages/pinball_components/pubspec.yaml +++ b/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/