diff --git a/assets/images/bonus_animation/android.png b/assets/images/bonus_animation/android_spaceship.png similarity index 100% rename from assets/images/bonus_animation/android.png rename to assets/images/bonus_animation/android_spaceship.png diff --git a/assets/images/bonus_animation/dino.png b/assets/images/bonus_animation/dino_chomp.png similarity index 100% rename from assets/images/bonus_animation/dino.png rename to assets/images/bonus_animation/dino_chomp.png diff --git a/assets/images/bonus_animation/google.png b/assets/images/bonus_animation/google_word.png similarity index 100% rename from assets/images/bonus_animation/google.png rename to assets/images/bonus_animation/google_word.png diff --git a/lib/game/view/pinball_game_page.dart b/lib/game/view/pinball_game_page.dart index 0fb2dd73..44336aee 100644 --- a/lib/game/view/pinball_game_page.dart +++ b/lib/game/view/pinball_game_page.dart @@ -114,10 +114,12 @@ class PinballGameLoadedView extends StatelessWidget { @override Widget build(BuildContext context) { - final leftMargin = MediaQuery.of(context).size.width * 0.3; final isPlaying = context.select( (StartGameBloc bloc) => bloc.state.status == StartGameStatus.play, ); + final widthInRatio = MediaQuery.of(context).size.height * 9 / 16; + final screenWidth = MediaQuery.of(context).size.width; + final leftMargin = (screenWidth / 2) - (widthInRatio / 1.8); return Stack( children: [ diff --git a/lib/game/view/widgets/bonus_animation.dart b/lib/game/view/widgets/bonus_animation.dart index cd6854db..da67e1aa 100644 --- a/lib/game/view/widgets/bonus_animation.dart +++ b/lib/game/view/widgets/bonus_animation.dart @@ -5,7 +5,7 @@ import 'package:pinball/gen/assets.gen.dart'; import 'package:pinball_flame/pinball_flame.dart'; /// {@template bonus_animation} -/// [Widget] that displays the animation. +/// [Widget] that displays bonus animations. /// {@endtemplate} class BonusAnimation extends StatefulWidget { /// {@macro bonus_animation} @@ -42,7 +42,7 @@ class BonusAnimation extends StatefulWidget { Key? key, VoidCallback? onCompleted, }) : this._( - Assets.images.bonusAnimation.dino.keyName, + Assets.images.bonusAnimation.dinoChomp.keyName, onCompleted: onCompleted, key: key, ); @@ -52,7 +52,7 @@ class BonusAnimation extends StatefulWidget { Key? key, VoidCallback? onCompleted, }) : this._( - Assets.images.bonusAnimation.android.keyName, + Assets.images.bonusAnimation.androidSpaceship.keyName, onCompleted: onCompleted, key: key, ); @@ -62,7 +62,7 @@ class BonusAnimation extends StatefulWidget { Key? key, VoidCallback? onCompleted, }) : this._( - Assets.images.bonusAnimation.google.keyName, + Assets.images.bonusAnimation.googleWord.keyName, onCompleted: onCompleted, key: key, ); @@ -77,9 +77,9 @@ class BonusAnimation extends StatefulWidget { return [ Flame.images.load(Assets.images.bonusAnimation.dashNest.keyName), Flame.images.load(Assets.images.bonusAnimation.sparkyTurboCharge.keyName), - Flame.images.load(Assets.images.bonusAnimation.dino.keyName), - Flame.images.load(Assets.images.bonusAnimation.android.keyName), - Flame.images.load(Assets.images.bonusAnimation.google.keyName), + Flame.images.load(Assets.images.bonusAnimation.dinoChomp.keyName), + Flame.images.load(Assets.images.bonusAnimation.androidSpaceship.keyName), + Flame.images.load(Assets.images.bonusAnimation.googleWord.keyName), ]; } diff --git a/lib/game/view/widgets/game_hud.dart b/lib/game/view/widgets/game_hud.dart index 8d5e24b8..3623e21f 100644 --- a/lib/game/view/widgets/game_hud.dart +++ b/lib/game/view/widgets/game_hud.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:pinball/game/game.dart'; import 'package:pinball/gen/gen.dart'; +import 'package:pinball/theme/app_colors.dart'; /// {@template game_hud} /// Overlay on the [PinballGame]. @@ -64,18 +65,29 @@ class _ScoreViewDecoration extends StatelessWidget { @override Widget build(BuildContext context) { - return ClipRRect( - borderRadius: const BorderRadius.all(Radius.circular(12)), - child: DecoratedBox( - decoration: BoxDecoration( - image: DecorationImage( - fit: BoxFit.cover, - image: AssetImage( - Assets.images.score.miniScoreBackground.path, - ), + const radius = BorderRadius.all(Radius.circular(12)); + const boardWidth = 5.0; + + return DecoratedBox( + decoration: BoxDecoration( + borderRadius: radius, + border: Border.all( + color: AppColors.white, + width: boardWidth, + ), + image: DecorationImage( + fit: BoxFit.cover, + image: AssetImage( + Assets.images.score.miniScoreBackground.path, ), ), - child: child, + ), + child: Padding( + padding: const EdgeInsets.all(boardWidth - 1), + child: ClipRRect( + borderRadius: radius, + child: child, + ), ), ); } diff --git a/lib/game/view/widgets/round_count_display.dart b/lib/game/view/widgets/round_count_display.dart index 44a939af..98776764 100644 --- a/lib/game/view/widgets/round_count_display.dart +++ b/lib/game/view/widgets/round_count_display.dart @@ -5,7 +5,7 @@ import 'package:pinball/l10n/l10n.dart'; import 'package:pinball/theme/theme.dart'; /// {@template round_count_display} -/// [Widget] that displays the count of rounds. +/// Colored square indicating if a round is available. /// {@endtemplate} class RoundCountDisplay extends StatelessWidget { /// {@macro round_count_display} @@ -14,6 +14,8 @@ class RoundCountDisplay extends StatelessWidget { @override Widget build(BuildContext context) { final l10n = context.l10n; + // TODO(arturplaczek): refactor when GameState handle balls and rounds and + // select state.rounds property instead of state.ball final balls = context.select((GameBloc bloc) => bloc.state.balls); return Row( diff --git a/lib/gen/assets.gen.dart b/lib/gen/assets.gen.dart index 89f86585..f5b935a5 100644 --- a/lib/gen/assets.gen.dart +++ b/lib/gen/assets.gen.dart @@ -20,21 +20,21 @@ class $AssetsImagesGen { class $AssetsImagesBonusAnimationGen { const $AssetsImagesBonusAnimationGen(); - /// File path: assets/images/bonus_animation/android.png - AssetGenImage get android => - const AssetGenImage('assets/images/bonus_animation/android.png'); + /// File path: assets/images/bonus_animation/android_spaceship.png + AssetGenImage get androidSpaceship => const AssetGenImage( + 'assets/images/bonus_animation/android_spaceship.png'); /// File path: assets/images/bonus_animation/dash_nest.png AssetGenImage get dashNest => const AssetGenImage('assets/images/bonus_animation/dash_nest.png'); - /// File path: assets/images/bonus_animation/dino.png - AssetGenImage get dino => - const AssetGenImage('assets/images/bonus_animation/dino.png'); + /// File path: assets/images/bonus_animation/dino_chomp.png + AssetGenImage get dinoChomp => + const AssetGenImage('assets/images/bonus_animation/dino_chomp.png'); - /// File path: assets/images/bonus_animation/google.png - AssetGenImage get google => - const AssetGenImage('assets/images/bonus_animation/google.png'); + /// File path: assets/images/bonus_animation/google_word.png + AssetGenImage get googleWord => + const AssetGenImage('assets/images/bonus_animation/google_word.png'); /// File path: assets/images/bonus_animation/sparky_turbo_charge.png AssetGenImage get sparkyTurboCharge => const AssetGenImage( diff --git a/test/game/view/widgets/round_count_display_test.dart b/test/game/view/widgets/round_count_display_test.dart index df1a60aa..8281ce83 100644 --- a/test/game/view/widgets/round_count_display_test.dart +++ b/test/game/view/widgets/round_count_display_test.dart @@ -25,7 +25,7 @@ void main() { ); }); - testWidgets('three active balls', (tester) async { + testWidgets('three active round indicator', (tester) async { await tester.pumpApp( const RoundCountDisplay(), gameBloc: gameBloc, @@ -35,7 +35,7 @@ void main() { expect(find.byType(RoundIndicator), findsNWidgets(3)); }); - testWidgets('two active balls', (tester) async { + testWidgets('two active round indicator', (tester) async { final state = initialState.copyWith( balls: 2, ); @@ -66,7 +66,7 @@ void main() { ); }); - testWidgets('one active ball', (tester) async { + testWidgets('one active round indicator', (tester) async { final state = initialState.copyWith( balls: 1, ); @@ -98,7 +98,7 @@ void main() { }); }); - testWidgets('active score ball is displaying with proper color', + testWidgets('active round indicator is displaying with proper color', (tester) async { await tester.pumpApp( const RoundIndicator(isActive: true), @@ -113,7 +113,7 @@ void main() { ); }); - testWidgets('inactive score ball is displaying with proper color', + testWidgets('inactive round indicator is displaying with proper color', (tester) async { await tester.pumpApp( const RoundIndicator(isActive: false),