diff --git a/packages/pinball_components/assets/images/error_background.png b/packages/pinball_components/assets/images/error_background.png new file mode 100644 index 00000000..5aa6595f Binary files /dev/null and b/packages/pinball_components/assets/images/error_background.png differ diff --git a/packages/pinball_components/lib/gen/assets.gen.dart b/packages/pinball_components/lib/gen/assets.gen.dart index 9a8be63e..a3570985 100644 --- a/packages/pinball_components/lib/gen/assets.gen.dart +++ b/packages/pinball_components/lib/gen/assets.gen.dart @@ -22,6 +22,11 @@ class $AssetsImagesGen { $AssetsImagesBoundaryGen get boundary => const $AssetsImagesBoundaryGen(); $AssetsImagesDashGen get dash => const $AssetsImagesDashGen(); $AssetsImagesDinoGen get dino => const $AssetsImagesDinoGen(); + + /// File path: assets/images/error_background.png + AssetGenImage get errorBackground => + const AssetGenImage('assets/images/error_background.png'); + $AssetsImagesFlapperGen get flapper => const $AssetsImagesFlapperGen(); $AssetsImagesFlipperGen get flipper => const $AssetsImagesFlipperGen(); $AssetsImagesGoogleWordGen get googleWord => diff --git a/packages/pinball_components/lib/src/components/components.dart b/packages/pinball_components/lib/src/components/components.dart index db2f7d38..55fe6bb5 100644 --- a/packages/pinball_components/lib/src/components/components.dart +++ b/packages/pinball_components/lib/src/components/components.dart @@ -12,6 +12,7 @@ export 'chrome_dino/chrome_dino.dart'; export 'dash_animatronic.dart'; export 'dash_nest_bumper/dash_nest_bumper.dart'; export 'dino_walls.dart'; +export 'error_component.dart'; export 'fire_effect.dart'; export 'flapper/flapper.dart'; export 'flipper.dart'; diff --git a/packages/pinball_components/lib/src/components/error_component.dart b/packages/pinball_components/lib/src/components/error_component.dart new file mode 100644 index 00000000..49be8069 --- /dev/null +++ b/packages/pinball_components/lib/src/components/error_component.dart @@ -0,0 +1,95 @@ +import 'package:flame/components.dart'; +import 'package:flutter/material.dart'; +import 'package:pinball_components/pinball_components.dart'; +import 'package:pinball_ui/pinball_ui.dart'; + +final _boldLabelTextPaint = TextPaint( + style: const TextStyle( + fontSize: 1.8, + color: PinballColors.white, + fontFamily: PinballFonts.pixeloidSans, + fontWeight: FontWeight.w700, + ), +); + +final _labelTextPaint = TextPaint( + style: const TextStyle( + fontSize: 1.8, + color: PinballColors.white, + fontFamily: PinballFonts.pixeloidSans, + fontWeight: FontWeight.w400, + ), +); + +/// {@template error_component} +/// A plain visual component used to show errors for the user. +/// {@endtemplate} +class ErrorComponent extends SpriteComponent with HasGameRef { + /// {@macro error_component} + ErrorComponent({required this.label, Vector2? position}) + : _textPaint = _labelTextPaint, + super( + position: position, + ); + + /// {@macro error_component} + ErrorComponent.bold({required this.label, Vector2? position}) + : _textPaint = _boldLabelTextPaint, + super( + position: position, + ); + + /// Text shown on the error message. + final String label; + final TextPaint _textPaint; + + List _splitInLines() { + final maxWidth = size.x - 8; + final lines = []; + var currentLine = ''; + final words = label.split(' '); + while (words.isNotEmpty) { + final word = words.removeAt(0); + + if (_textPaint.measureTextWidth('$currentLine $word') <= maxWidth) { + currentLine = '$currentLine $word'.trim(); + } else { + lines.add(currentLine); + currentLine = word; + } + } + + lines.add(currentLine); + return lines; + } + + @override + Future onLoad() async { + anchor = Anchor.center; + final sprite = await gameRef.loadSprite( + Assets.images.errorBackground.keyName, + ); + + size = sprite.originalSize / 20; + this.sprite = sprite; + + final lines = _splitInLines(); + + // Calculates vertical offset based on the number of lines of text to be + // displayed. This offset is used to keep the middle of the multi-line text + // at the center of the [ErrorComponent]. + final yOffset = ((size.y / 2.2) / lines.length) * 1.5; + + for (var i = 0; i < lines.length; i++) { + await add( + TextComponent( + position: Vector2(size.x / 2, yOffset + 2.2 * i), + size: Vector2(size.x - 4, 2.2), + text: lines[i], + textRenderer: _textPaint, + anchor: Anchor.center, + ), + ); + } + } +} diff --git a/packages/pinball_components/pubspec.yaml b/packages/pinball_components/pubspec.yaml index 1876e5aa..a51ba799 100644 --- a/packages/pinball_components/pubspec.yaml +++ b/packages/pinball_components/pubspec.yaml @@ -23,6 +23,8 @@ dependencies: path: ../pinball_flame pinball_theme: path: ../pinball_theme + pinball_ui: + path: ../pinball_ui dev_dependencies: bloc_test: ^9.0.3 @@ -33,6 +35,7 @@ dev_dependencies: very_good_analysis: ^2.4.0 flutter: + uses-material-design: true generate: true fonts: - family: PixeloidSans diff --git a/packages/pinball_components/sandbox/lib/main.dart b/packages/pinball_components/sandbox/lib/main.dart index ccb1b0bc..714bbee5 100644 --- a/packages/pinball_components/sandbox/lib/main.dart +++ b/packages/pinball_components/sandbox/lib/main.dart @@ -8,6 +8,7 @@ void main() { addBallStories(dashbook); addLayerStories(dashbook); addEffectsStories(dashbook); + addErrorComponentStories(dashbook); addFlutterForestStories(dashbook); addSparkyScorchStories(dashbook); addAndroidAcresStories(dashbook); diff --git a/packages/pinball_components/sandbox/lib/stories/error_component/error_component_game.dart b/packages/pinball_components/sandbox/lib/stories/error_component/error_component_game.dart new file mode 100644 index 00000000..c64e6d48 --- /dev/null +++ b/packages/pinball_components/sandbox/lib/stories/error_component/error_component_game.dart @@ -0,0 +1,24 @@ +import 'package:flame/components.dart'; +import 'package:pinball_components/pinball_components.dart'; +import 'package:sandbox/common/common.dart'; + +class ErrorComponentGame extends AssetsGame { + ErrorComponentGame({required this.text}); + + static const description = 'Shows how ErrorComponents are rendered.'; + + final String text; + + @override + Future onLoad() async { + camera.followVector2(Vector2.zero()); + + await add(ErrorComponent(label: text)); + await add( + ErrorComponent.bold( + label: text, + position: Vector2(0, 10), + ), + ); + } +} diff --git a/packages/pinball_components/sandbox/lib/stories/error_component/stories.dart b/packages/pinball_components/sandbox/lib/stories/error_component/stories.dart new file mode 100644 index 00000000..cecd9dae --- /dev/null +++ b/packages/pinball_components/sandbox/lib/stories/error_component/stories.dart @@ -0,0 +1,16 @@ +import 'package:dashbook/dashbook.dart'; +import 'package:sandbox/common/common.dart'; +import 'package:sandbox/stories/error_component/error_component_game.dart'; + +void addErrorComponentStories(Dashbook dashbook) { + dashbook.storiesOf('ErrorComponent').addGame( + title: 'Basic', + description: ErrorComponentGame.description, + gameBuilder: (context) => ErrorComponentGame( + text: context.textProperty( + 'label', + 'Oh no, something went wrong!', + ), + ), + ); +} diff --git a/packages/pinball_components/sandbox/lib/stories/stories.dart b/packages/pinball_components/sandbox/lib/stories/stories.dart index b48770ba..0a514eb9 100644 --- a/packages/pinball_components/sandbox/lib/stories/stories.dart +++ b/packages/pinball_components/sandbox/lib/stories/stories.dart @@ -4,6 +4,7 @@ export 'bottom_group/stories.dart'; export 'boundaries/stories.dart'; export 'dino_desert/stories.dart'; export 'effects/stories.dart'; +export 'error_component/stories.dart'; export 'flutter_forest/stories.dart'; export 'google_word/stories.dart'; export 'launch_ramp/stories.dart'; diff --git a/packages/pinball_components/test/src/components/error_component_test.dart b/packages/pinball_components/test/src/components/error_component_test.dart new file mode 100644 index 00000000..c50ac629 --- /dev/null +++ b/packages/pinball_components/test/src/components/error_component_test.dart @@ -0,0 +1,57 @@ +// ignore_for_file: cascade_invocations + +import 'package:flame/components.dart'; +import 'package:flame_test/flame_test.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:pinball_components/pinball_components.dart'; + +import '../../helpers/helpers.dart'; + +extension _IterableX on Iterable { + int countTexts(String value) { + return where( + (component) => component is TextComponent && component.text == value, + ).length; + } +} + +void main() { + group('ErrorComponent', () { + TestWidgetsFlutterBinding.ensureInitialized(); + final assets = [ + Assets.images.errorBackground.keyName, + ]; + final flameTester = FlameTester(() => TestGame(assets)); + + flameTester.test('renders correctly', (game) async { + await game.ensureAdd(ErrorComponent(label: 'Error Message')); + final count = game.descendants().countTexts('Error Message'); + + expect(count, equals(1)); + }); + + group('when the text is longer than one line', () { + flameTester.test('renders correctly', (game) async { + await game.ensureAdd( + ErrorComponent( + label: 'Error With A Longer Message', + ), + ); + final count1 = game.descendants().countTexts('Error With A'); + final count2 = game.descendants().countTexts('Longer Message'); + + expect(count1, equals(1)); + expect(count2, equals(1)); + }); + }); + + group('when using the bold font', () { + flameTester.test('renders correctly', (game) async { + await game.ensureAdd(ErrorComponent.bold(label: 'Error Message')); + final count = game.descendants().countTexts('Error Message'); + + expect(count, equals(1)); + }); + }); + }); +}