From 2165bc94c3905aae53004becd7e7ded480b5500f Mon Sep 17 00:00:00 2001 From: RuiAlonso Date: Thu, 5 May 2022 13:43:51 +0200 Subject: [PATCH] feat: info screen ui --- lib/game/components/backbox/backbox.dart | 16 ++ .../components/backbox/displays/displays.dart | 1 + .../backbox/displays/info_display.dart | 238 ++++++++++++++++++ lib/game/components/game_flow_controller.dart | 7 +- lib/game/game_assets.dart | 1 + .../assets/images/backbox/button/share.png | Bin 0 -> 2051 bytes .../lib/gen/assets.gen.dart | 14 +- packages/pinball_components/pubspec.yaml | 1 + 8 files changed, 273 insertions(+), 5 deletions(-) create mode 100644 lib/game/components/backbox/displays/info_display.dart create mode 100644 packages/pinball_components/assets/images/backbox/button/share.png 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 0000000000000000000000000000000000000000..71f8d6091b57a4dbd9056ad20fe3c5b2f6d1368d GIT binary patch literal 2051 zcmXw4eNjUD3rDs&|*P~d?YAT+yvR^CILc-Bzz`e=RN2jzI;O`VK*L3`2{mB9LSpb{Y$R7(RDSaJZTAV%142IfX zCpA7;oeByI0;n&vF@CTbVC}y`_68j}Z=sQe5zg;Bcj}hJy9>(49@G-0Z{NwGWU18`6XOrkK33lE z5>F%@6kYWj&^>a>4(Kk;ziZ;8P7>UrpR`7^&KF>=T%r@C>{Ak1hB4(|cWv9*+%jkf z5b*X`d7g0VqUu;Y4d7e-)KgzhL!n%gjYPv=*FGq^a#6qE6X1OC(z=;LGZMy9Fu>I3 zx^~|)7w-k$J3Bz#4SXG*o8#HKGJ~M66ZLaMr)gRrb|0FXs%43jsgf2jG<~QB(v4GCExU4A4{U&z+s+xa0xwf}5DyvPg*y1b**ER|{NzA6*U4r*0dK z&l#Wp~gu(O^;P$k1{tV@tr5v0+O14leC;`L5lq! z3WVuoBmEqa<0*Rl5AB%#%ZU!n4aK!K&9S+q?Clo^7(1LXU{kp6LX#BR#vc0}6o;IS zChI-oaJ5N%olfjqB~_J`W_&s!UT<9K+&^v`LIFKwJ9to0;w3WGptL@ptji{lL`JfNg<`uJ zIxxMp8$)A$Zadk4^0+G+JxImM94R`5E>yXmGQ2tuqaEJD%bMukksWHj=)2%6;IO5ZIbo2~TzlE}r?_U8gVpqT~ zBvID(Liryed~HC8Z#?jn%$rgGrmDS$%d1eJ05#E>*HxKg9~r&TxGvwFu8H%cRe5nk zo#(M5>>;?cGq8rfU>*(n}`V6%@woC-HyB9qigvPNYAT!Mr9Bj2PlbJWD!^U%)b|S z!o5SUX3O<7anN}7K+N$v(lSXGow*dU3t;TYdHtl;JFDFic#pg{iPNL@p==H4z&=sf zBL_cIMpqT7ST?$^&O7+v;Uzt990UNhv+y*`|(Wu zY1t&I&R(6Vr+tIT)}IUDrVpY#N$^JH${V@|61N{SvWUp|MZ>ibcfaz|#TmRE{eOuW zivL?os#)pM%6;LHmu3zlB0H5!?DGM;r|+QfzCIO|W5;+U$sja;ADvI?b#;LL9gI^s cc8i`H(j5PtJe9v2|7SzUKGxpa;Dpcq4_@zfMF0Q* literal 0 HcmV?d00001 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/