From e8cd40f14be43b79d3aeb5ebb13afacfbbaabb6f Mon Sep 17 00:00:00 2001 From: Erick Zanardo Date: Tue, 12 Apr 2022 13:48:29 -0300 Subject: [PATCH] progress on the input --- .../lib/gen/assets.gen.dart | 14 +-- .../lib/src/components/backboard.dart | 64 -------------- .../src/components/backboard/backboard.dart | 66 ++++++++++++++ .../backboard/backboard_game_over.dart | 87 +++++++++++++++++++ .../backboard/backboard_letter_prompt.dart | 74 ++++++++++++++++ .../backboard/backboard_waiting.dart | 17 ++++ .../lib/src/components/components.dart | 2 +- packages/pinball_components/pubspec.yaml | 1 + .../sandbox/lib/common/games.dart | 3 + .../lib/stories/backboard/game_over.dart | 10 ++- .../lib/stories/backboard/stories.dart | 4 +- .../lib/stories/backboard/waiting.dart | 2 +- .../pinball_components/sandbox/pubspec.lock | 7 ++ 13 files changed, 269 insertions(+), 82 deletions(-) delete mode 100644 packages/pinball_components/lib/src/components/backboard.dart create mode 100644 packages/pinball_components/lib/src/components/backboard/backboard.dart create mode 100644 packages/pinball_components/lib/src/components/backboard/backboard_game_over.dart create mode 100644 packages/pinball_components/lib/src/components/backboard/backboard_letter_prompt.dart create mode 100644 packages/pinball_components/lib/src/components/backboard/backboard_waiting.dart diff --git a/packages/pinball_components/lib/gen/assets.gen.dart b/packages/pinball_components/lib/gen/assets.gen.dart index 35a998a4..f45543b0 100644 --- a/packages/pinball_components/lib/gen/assets.gen.dart +++ b/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'); } diff --git a/packages/pinball_components/lib/src/components/backboard.dart b/packages/pinball_components/lib/src/components/backboard.dart deleted file mode 100644 index 27ac236f..00000000 --- a/packages/pinball_components/lib/src/components/backboard.dart +++ /dev/null @@ -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 onLoad() async { - if (startsAtWaiting) { - await waitingMode(); - } else { - await gameOverMode(); - } - } - - /// Puts the Backboard in waiting mode, where the scoreboard is shown. - Future 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 gameOverMode() async { - children.removeWhere((element) => true); - await add(BackboardGameOver()); - } -} - -/// {@template backboard_game_over} -class BackboardGameOver extends SpriteComponent with HasGameRef { - @override - Future onLoad() async { - final sprite = await gameRef.loadSprite( - Assets.images.backboard.backboardGameOver.keyName, - ); - size = sprite.originalSize / 10; - anchor = Anchor.bottomCenter; - this.sprite = sprite; - } -} diff --git a/packages/pinball_components/lib/src/components/backboard/backboard.dart b/packages/pinball_components/lib/src/components/backboard/backboard.dart new file mode 100644 index 00000000..f3903d82 --- /dev/null +++ b/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 waitingMode() async { + children.removeWhere((element) => true); + await add(BackboardWaiting()); + } + + /// Puts the Backboard in game over mode, where the score input is shown. + Future gameOverMode({ required int score}) async { + children.removeWhere((element) => true); + await add(BackboardGameOver(score: score)); + } +} diff --git a/packages/pinball_components/lib/src/components/backboard/backboard_game_over.dart b/packages/pinball_components/lib/src/components/backboard/backboard_game_over.dart new file mode 100644 index 00000000..469988cf --- /dev/null +++ b/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 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 keysPressed) { + final isUp = event is RawKeyUpEvent; + + return true; + } +} diff --git a/packages/pinball_components/lib/src/components/backboard/backboard_letter_prompt.dart b/packages/pinball_components/lib/src/components/backboard/backboard_letter_prompt.dart new file mode 100644 index 00000000..76169c62 --- /dev/null +++ b/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 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() { + } +} diff --git a/packages/pinball_components/lib/src/components/backboard/backboard_waiting.dart b/packages/pinball_components/lib/src/components/backboard/backboard_waiting.dart new file mode 100644 index 00000000..f7fa84bf --- /dev/null +++ b/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 onLoad() async { + final sprite = await gameRef.loadSprite( + Assets.images.backboard.backboardScores.keyName, + ); + + this.sprite = sprite; + size = sprite.originalSize / 10; + anchor = Anchor.bottomCenter; + } +} diff --git a/packages/pinball_components/lib/src/components/components.dart b/packages/pinball_components/lib/src/components/components.dart index e719783f..7b4e1ddd 100644 --- a/packages/pinball_components/lib/src/components/components.dart +++ b/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'; diff --git a/packages/pinball_components/pubspec.yaml b/packages/pinball_components/pubspec.yaml index cf2a22a2..d27084f1 100644 --- a/packages/pinball_components/pubspec.yaml +++ b/packages/pinball_components/pubspec.yaml @@ -13,6 +13,7 @@ dependencies: sdk: flutter geometry: path: ../geometry + intl: ^0.17.0 dev_dependencies: diff --git a/packages/pinball_components/sandbox/lib/common/games.dart b/packages/pinball_components/sandbox/lib/common/games.dart index 4aae07cb..4fb158bd 100644 --- a/packages/pinball_components/sandbox/lib/common/games.dart +++ b/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; diff --git a/packages/pinball_components/sandbox/lib/stories/backboard/game_over.dart b/packages/pinball_components/sandbox/lib/stories/backboard/game_over.dart index 8af8e214..90e7fe19 100644 --- a/packages/pinball_components/sandbox/lib/stories/backboard/game_over.dart +++ b/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 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, ), ); } diff --git a/packages/pinball_components/sandbox/lib/stories/backboard/stories.dart b/packages/pinball_components/sandbox/lib/stories/backboard/stories.dart index 1bbc4ce0..e6b28ba1 100644 --- a/packages/pinball_components/sandbox/lib/stories/backboard/stories.dart +++ b/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, diff --git a/packages/pinball_components/sandbox/lib/stories/backboard/waiting.dart b/packages/pinball_components/sandbox/lib/stories/backboard/waiting.dart index 0b85342d..71f5c09a 100644 --- a/packages/pinball_components/sandbox/lib/stories/backboard/waiting.dart +++ b/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); } } diff --git a/packages/pinball_components/sandbox/pubspec.lock b/packages/pinball_components/sandbox/pubspec.lock index 33553ba6..61af3a8a 100644 --- a/packages/pinball_components/sandbox/pubspec.lock +++ b/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: