From 21adfddd025cb80467e2e096c2d83f0a3ae210d6 Mon Sep 17 00:00:00 2001 From: arturplaczek Date: Thu, 28 Apr 2022 15:12:57 +0200 Subject: [PATCH] fix: apply code review --- .github/workflows/pinball_ui.yaml | 4 + lib/game/view/widgets/game_hud.dart | 6 +- .../view/widgets/play_button_overlay.dart | 11 ++- .../view/character_selection_page.dart | 13 ++- .../widgets/how_to_play_dialog.dart | 2 +- packages/pinball_ui/README.md | 2 +- .../pinball_ui/lib/src/dialog/dialog.dart | 2 +- .../lib/src/dialog/pinball_dialog_layout.dart | 98 ------------------- .../lib/src/dialog/pixelated_decoration.dart | 58 +++++++++++ packages/pinball_ui/pubspec.yaml | 3 +- ...st.dart => pixelated_decoration_test.dart} | 4 +- 11 files changed, 92 insertions(+), 111 deletions(-) delete mode 100644 packages/pinball_ui/lib/src/dialog/pinball_dialog_layout.dart create mode 100644 packages/pinball_ui/lib/src/dialog/pixelated_decoration.dart rename packages/pinball_ui/test/src/dialog/{pinball_dialog_layout_test.dart => pixelated_decoration_test.dart} (89%) diff --git a/.github/workflows/pinball_ui.yaml b/.github/workflows/pinball_ui.yaml index a123fdd0..98643ffa 100644 --- a/.github/workflows/pinball_ui.yaml +++ b/.github/workflows/pinball_ui.yaml @@ -1,5 +1,9 @@ name: pinball_ui +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + on: push: paths: diff --git a/lib/game/view/widgets/game_hud.dart b/lib/game/view/widgets/game_hud.dart index 3623e21f..217a549e 100644 --- a/lib/game/view/widgets/game_hud.dart +++ b/lib/game/view/widgets/game_hud.dart @@ -66,14 +66,14 @@ class _ScoreViewDecoration extends StatelessWidget { @override Widget build(BuildContext context) { const radius = BorderRadius.all(Radius.circular(12)); - const boardWidth = 5.0; + const borderWidth = 5.0; return DecoratedBox( decoration: BoxDecoration( borderRadius: radius, border: Border.all( color: AppColors.white, - width: boardWidth, + width: borderWidth, ), image: DecorationImage( fit: BoxFit.cover, @@ -83,7 +83,7 @@ class _ScoreViewDecoration extends StatelessWidget { ), ), child: Padding( - padding: const EdgeInsets.all(boardWidth - 1), + padding: const EdgeInsets.all(borderWidth - 1), child: ClipRRect( borderRadius: radius, child: child, diff --git a/lib/game/view/widgets/play_button_overlay.dart b/lib/game/view/widgets/play_button_overlay.dart index c0ad324a..3db62a50 100644 --- a/lib/game/view/widgets/play_button_overlay.dart +++ b/lib/game/view/widgets/play_button_overlay.dart @@ -28,7 +28,16 @@ class PlayButtonOverlay extends StatelessWidget { context: context, barrierDismissible: false, builder: (_) { - return const CharacterSelectionDialog(); + // TODO(arturplaczek): remove after merge StarBlocListener + final height = MediaQuery.of(context).size.height * 0.5; + + return Center( + child: SizedBox( + height: height, + width: height * 1.4, + child: const CharacterSelectionDialog(), + ), + ); }, ); }, diff --git a/lib/select_character/view/character_selection_page.dart b/lib/select_character/view/character_selection_page.dart index 8f26815b..83dc6ee6 100644 --- a/lib/select_character/view/character_selection_page.dart +++ b/lib/select_character/view/character_selection_page.dart @@ -33,7 +33,7 @@ class CharacterSelectionView extends StatelessWidget { Widget build(BuildContext context) { final l10n = context.l10n; - return PinballDialogLayout( + return PixelatedDecoration( header: Text( l10n.characterSelectionTitle, style: Theme.of(context).textTheme.headline3, @@ -47,9 +47,18 @@ class CharacterSelectionView extends StatelessWidget { TextButton( onPressed: () { Navigator.of(context).pop(); + // TODO(arturplaczek): remove after merge StarBlocListener + final height = MediaQuery.of(context).size.height * 0.5; + showDialog( context: context, - builder: (_) => const HowToPlayDialog(), + builder: (_) => Center( + child: SizedBox( + height: height, + width: height * 1.4, + child: const HowToPlayDialog(), + ), + ), ); }, child: Text(l10n.start), diff --git a/lib/start_game/widgets/how_to_play_dialog.dart b/lib/start_game/widgets/how_to_play_dialog.dart index 4a9cbfbf..bc5166e4 100644 --- a/lib/start_game/widgets/how_to_play_dialog.dart +++ b/lib/start_game/widgets/how_to_play_dialog.dart @@ -12,7 +12,7 @@ class HowToPlayDialog extends StatelessWidget { final l10n = context.l10n; const spacing = SizedBox(height: 16); - return PinballDialogLayout( + return PixelatedDecoration( header: Text(l10n.howToPlay), body: ListView( children: const [ diff --git a/packages/pinball_ui/README.md b/packages/pinball_ui/README.md index 08fd7ada..cabc194a 100644 --- a/packages/pinball_ui/README.md +++ b/packages/pinball_ui/README.md @@ -3,7 +3,7 @@ [![style: very good analysis][very_good_analysis_badge]][very_good_analysis_link] [![License: MIT][license_badge]][license_link] -Package with the UI components for the Pinball Game +UI Toolkit for the Pinball Flutter Application [license_badge]: https://img.shields.io/badge/license-MIT-blue.svg [license_link]: https://opensource.org/licenses/MIT diff --git a/packages/pinball_ui/lib/src/dialog/dialog.dart b/packages/pinball_ui/lib/src/dialog/dialog.dart index c95b9826..7a224272 100644 --- a/packages/pinball_ui/lib/src/dialog/dialog.dart +++ b/packages/pinball_ui/lib/src/dialog/dialog.dart @@ -1 +1 @@ -export 'pinball_dialog_layout.dart'; +export 'pixelated_decoration.dart'; diff --git a/packages/pinball_ui/lib/src/dialog/pinball_dialog_layout.dart b/packages/pinball_ui/lib/src/dialog/pinball_dialog_layout.dart deleted file mode 100644 index 7b1a6e97..00000000 --- a/packages/pinball_ui/lib/src/dialog/pinball_dialog_layout.dart +++ /dev/null @@ -1,98 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:pinball_ui/gen/gen.dart'; - -/// {@template pinball_dialog_layout} -/// Decoration for dialogs that display pixelated background and takes -/// two parameters: -/// - header [Widget] -/// - body [Widget] -/// -/// Creates square, centered decoration the size of a game. -/// -/// The header takes 20% of the area and the body remaining space. -/// {@endtemplate} -class PinballDialogLayout extends StatelessWidget { - /// {@macro pinball_dialog_layout} - const PinballDialogLayout({ - Key? key, - required Widget header, - required Widget body, - }) : _header = header, - _body = body, - super(key: key); - - final Widget _header; - final Widget _body; - - @override - Widget build(BuildContext context) { - return LayoutBuilder( - builder: (context, constraints) { - final gameWidgetWidth = constraints.maxHeight * 9 / 16; - - return Center( - child: SizedBox( - height: gameWidgetWidth, - width: gameWidgetWidth, - child: _DialogDecoration( - header: _header, - body: _body, - ), - ), - ); - }, - ); - } -} - -class _DialogDecoration extends StatelessWidget { - const _DialogDecoration({ - Key? key, - required Widget header, - required Widget body, - }) : _header = header, - _body = body, - super(key: key); - - final Widget _header; - final Widget _body; - - @override - Widget build(BuildContext context) { - const radius = BorderRadius.all(Radius.circular(12)); - const boardWidth = 5.0; - - return DecoratedBox( - decoration: BoxDecoration( - borderRadius: radius, - border: Border.all( - color: Colors.white, - width: boardWidth, - ), - image: DecorationImage( - fit: BoxFit.cover, - image: AssetImage( - Assets.images.dialog.background.keyName, - ), - ), - ), - child: Padding( - padding: const EdgeInsets.all(boardWidth - 1), - child: ClipRRect( - borderRadius: radius, - child: Column( - children: [ - Expanded( - child: Center(child: _header), - ), - Expanded( - flex: 4, - child: _body, - ), - ], - ), - ), - ), - ); - } -} diff --git a/packages/pinball_ui/lib/src/dialog/pixelated_decoration.dart b/packages/pinball_ui/lib/src/dialog/pixelated_decoration.dart new file mode 100644 index 00000000..deecf5cc --- /dev/null +++ b/packages/pinball_ui/lib/src/dialog/pixelated_decoration.dart @@ -0,0 +1,58 @@ +import 'package:flutter/material.dart'; +import 'package:pinball_ui/gen/gen.dart'; + +/// {@template pixelated_decoration} +/// Pixelated decoration. +/// {@endtemplate} +class PixelatedDecoration extends StatelessWidget { + /// {@macro pixelated_decoration} + const PixelatedDecoration({ + Key? key, + required Widget header, + required Widget body, + }) : _header = header, + _body = body, + super(key: key); + + final Widget _header; + final Widget _body; + + @override + Widget build(BuildContext context) { + const radius = BorderRadius.all(Radius.circular(12)); + const borderWidth = 5.0; + + return DecoratedBox( + decoration: BoxDecoration( + image: DecorationImage( + fit: BoxFit.fill, + image: AssetImage(Assets.images.dialog.background.keyName), + ), + borderRadius: radius, + border: Border.all( + color: Colors.white, + width: borderWidth, + ), + ), + child: Padding( + padding: const EdgeInsets.all(borderWidth), + child: ClipRRect( + borderRadius: radius, + child: Column( + children: [ + Expanded( + child: Center( + child: _header, + ), + ), + Expanded( + flex: 4, + child: _body, + ), + ], + ), + ), + ), + ); + } +} diff --git a/packages/pinball_ui/pubspec.yaml b/packages/pinball_ui/pubspec.yaml index 307c1f8b..79c65338 100644 --- a/packages/pinball_ui/pubspec.yaml +++ b/packages/pinball_ui/pubspec.yaml @@ -1,5 +1,5 @@ name: pinball_ui -description: App UI Component Library +description: UI Toolkit for the Pinball Flutter Application version: 1.0.0+1 publish_to: none @@ -13,7 +13,6 @@ dependencies: dev_dependencies: flutter_test: sdk: flutter - mocktail: ^0.2.0 test: ^1.19.2 very_good_analysis: ^2.4.0 diff --git a/packages/pinball_ui/test/src/dialog/pinball_dialog_layout_test.dart b/packages/pinball_ui/test/src/dialog/pixelated_decoration_test.dart similarity index 89% rename from packages/pinball_ui/test/src/dialog/pinball_dialog_layout_test.dart rename to packages/pinball_ui/test/src/dialog/pixelated_decoration_test.dart index fffa0b52..772f2570 100644 --- a/packages/pinball_ui/test/src/dialog/pinball_dialog_layout_test.dart +++ b/packages/pinball_ui/test/src/dialog/pixelated_decoration_test.dart @@ -5,14 +5,14 @@ import 'package:flutter_test/flutter_test.dart'; import 'package:pinball_ui/pinball_ui.dart'; void main() { - group('PinballDialogLayout', () { + group('PixelatedDecoration', () { testWidgets('renders header and body', (tester) async { const headerText = 'header'; const bodyText = 'body'; await tester.pumpWidget( MaterialApp( - home: PinballDialogLayout( + home: PixelatedDecoration( header: Text(headerText), body: Text(bodyText), ),