diff --git a/lib/game/view/pinball_game_page.dart b/lib/game/view/pinball_game_page.dart index df58dd99..28d657db 100644 --- a/lib/game/view/pinball_game_page.dart +++ b/lib/game/view/pinball_game_page.dart @@ -140,7 +140,7 @@ class PinballGameLoadedView extends StatelessWidget { // TODO(arturplaczek): add Visibility to GameHud based on StartGameBloc // status Positioned( - top: 16, + top: 0, left: clampedMargin, child: const GameHud(), ), diff --git a/lib/game/view/widgets/game_hud.dart b/lib/game/view/widgets/game_hud.dart index aa1560b1..2c7d74bf 100644 --- a/lib/game/view/widgets/game_hud.dart +++ b/lib/game/view/widgets/game_hud.dart @@ -23,11 +23,12 @@ class _GameHudState extends State { /// Ratio from sprite frame (width 500, height 144) w / h = ratio static const _ratio = 3.47; - static const _width = 265.0; @override Widget build(BuildContext context) { final isGameOver = context.select((GameBloc bloc) => bloc.state.isGameOver); + final gameWidgetWidth = MediaQuery.of(context).size.height * 9 / 16; + final _width = gameWidgetWidth / 1.6; return _ScoreViewDecoration( child: SizedBox( @@ -37,17 +38,20 @@ class _GameHudState extends State { listenWhen: (previous, current) => previous.bonusHistory.length != current.bonusHistory.length, listener: (_, __) => setState(() => showAnimation = true), - child: AnimatedSwitcher( - duration: kThemeAnimationDuration, - child: showAnimation && !isGameOver - ? _AnimationView( - onComplete: () { - if (mounted) { - setState(() => showAnimation = false); - } - }, - ) - : const ScoreView(), + child: FittedBox( + alignment: Alignment.centerLeft, + child: AnimatedSwitcher( + duration: kThemeAnimationDuration, + child: showAnimation && !isGameOver + ? _AnimationView( + onComplete: () { + if (mounted) { + setState(() => showAnimation = false); + } + }, + ) + : const ScoreView(), + ), ), ), ), @@ -68,30 +72,27 @@ class _ScoreViewDecoration extends StatelessWidget { const radius = BorderRadius.all(Radius.circular(12)); const borderWidth = 5.0; - return Opacity( - opacity: 0.7, - child: DecoratedBox( - decoration: BoxDecoration( - borderRadius: radius, - border: Border.all( - color: PinballColors.white, - width: borderWidth, - ), - image: DecorationImage( - fit: BoxFit.cover, - image: AssetImage( - Assets.images.score.miniScoreBackground.path, - ), - ), + return DecoratedBox( + decoration: BoxDecoration( + borderRadius: radius, + border: Border.all( + color: PinballColors.white, + width: borderWidth, ), - child: Padding( - padding: const EdgeInsets.all(borderWidth - 1), - child: ClipRRect( - borderRadius: radius, - child: child, + image: DecorationImage( + fit: BoxFit.cover, + image: AssetImage( + Assets.images.score.miniScoreBackground.path, ), ), ), + child: Padding( + padding: const EdgeInsets.all(borderWidth - 1), + child: ClipRRect( + borderRadius: radius, + child: child, + ), + ), ); } }