From 410182cf7df51d13b9657c92b52349ee97fa81bd Mon Sep 17 00:00:00 2001 From: airkjw Date: Thu, 18 Jun 2026 20:53:52 +0900 Subject: [PATCH] feat(ui): floating pulse hint for booster targeting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces the plain bottom SnackBar with a BoosterHint pill that floats in the empty space above the board: season-accent coloured, a breathing glow that pulses only while armed (idle otherwise — no wasted ticker), slides/ fades in, shows the booster icon + prompt, and cancels on tap. 3 widget tests; full suite 234 green. Co-Authored-By: Claude Opus 4.8 (1M context) --- lib/ui/screens/game_screen.dart | 84 +++++++++-------- lib/ui/widgets/booster_hint.dart | 149 +++++++++++++++++++++++++++++++ test/ui/booster_hint_test.dart | 54 +++++++++++ 3 files changed, 252 insertions(+), 35 deletions(-) create mode 100644 lib/ui/widgets/booster_hint.dart create mode 100644 test/ui/booster_hint_test.dart diff --git a/lib/ui/screens/game_screen.dart b/lib/ui/screens/game_screen.dart index 030590d..acc98d7 100644 --- a/lib/ui/screens/game_screen.dart +++ b/lib/ui/screens/game_screen.dart @@ -16,6 +16,7 @@ import '../widgets/board_geometry.dart'; import '../widgets/board_painter.dart'; import '../widgets/board_widget.dart'; import '../widgets/booster_bar.dart'; +import '../widgets/booster_hint.dart'; import '../widgets/effects_overlay.dart'; import '../widgets/hud_widget.dart'; import '../widgets/piece_painter.dart'; @@ -143,18 +144,9 @@ class _GameScreenState extends ConsumerState await ref.read(gameSessionProvider.notifier).useShuffle(); return; } - // hammer / lineBomb need a board target. + // hammer / lineBomb need a board target; the floating BoosterHint above + // the board shows the prompt (and lets the player cancel) while armed. setState(() => _arming = type); - final l10n = AppLocalizations.of(context)!; - final hint = - type == BoosterType.hammer ? l10n.boosterTapTarget : l10n.boosterTapLine; - if (!mounted) return; - ScaffoldMessenger.of(context) - ..hideCurrentSnackBar() - ..showSnackBar(SnackBar( - content: Text(hint), - duration: const Duration(seconds: 3), - )); } /// Converts a board tap into a cell, then applies the armed booster. @@ -410,32 +402,54 @@ class _GameScreenState extends ConsumerState ), HudWidget(view: view), Expanded( - child: Center( - child: AnimatedBuilder( - animation: _shake, - builder: (context, child) { - final t = _shake.value; - final dx = - math.sin(t * math.pi * 10) * 6 * (1 - t); - return Transform.translate( - offset: Offset(dx, 0), child: child); - }, - // While a targeted booster is armed, taps on the - // board pick a cell. When not arming, onTapUp - // returns immediately so it never steals the - // tray-drag placement gestures. - child: GestureDetector( - behavior: HitTestBehavior.deferToChild, - onTapUp: _arming == null - ? null - : (details) => _onBoardTapUp(details), - child: BoardWidget( - key: _boardKey, - view: view, - ghost: ghost, + child: Stack( + children: [ + Positioned.fill( + child: Center( + child: AnimatedBuilder( + animation: _shake, + builder: (context, child) { + final t = _shake.value; + final dx = math.sin(t * math.pi * 10) * + 6 * + (1 - t); + return Transform.translate( + offset: Offset(dx, 0), child: child); + }, + // While a targeted booster is armed, taps on + // the board pick a cell. When not arming, + // onTapUp returns immediately so it never + // steals the tray-drag placement gestures. + child: GestureDetector( + behavior: HitTestBehavior.deferToChild, + onTapUp: _arming == null + ? null + : (details) => _onBoardTapUp(details), + child: BoardWidget( + key: _boardKey, + view: view, + ghost: ghost, + ), + ), + ), ), ), - ), + // Floating targeting prompt, in the empty space above + // the centered board so it never covers cells. + Positioned( + top: 4, + left: 0, + right: 0, + child: Center( + child: BoosterHint( + arming: _arming, + accent: ThemeColors(theme).accent, + onCancel: () => + setState(() => _arming = null), + ), + ), + ), + ], ), ), TrayWidget( diff --git a/lib/ui/widgets/booster_hint.dart b/lib/ui/widgets/booster_hint.dart new file mode 100644 index 0000000..835b3ba --- /dev/null +++ b/lib/ui/widgets/booster_hint.dart @@ -0,0 +1,149 @@ +// lib/ui/widgets/booster_hint.dart +import 'package:flutter/material.dart'; + +import '../../game/models/booster.dart'; +import '../../l10n/gen/app_localizations.dart'; + +/// A small floating pill that appears above the board while a targeted booster +/// (hammer / line-bomb) is armed, telling the player what to tap. Glows with a +/// gentle pulse in the season accent colour, slides/scales in, and cancels the +/// armed state when tapped. Renders (invisibly, ignoring pointer) when nothing +/// is armed so it can animate in/out in place without layout jumps. +class BoosterHint extends StatefulWidget { + const BoosterHint({ + super.key, + required this.arming, + required this.accent, + required this.onCancel, + }); + + final BoosterType? arming; + final Color accent; + final VoidCallback onCancel; + + @override + State createState() => _BoosterHintState(); +} + +class _BoosterHintState extends State + with SingleTickerProviderStateMixin { + late final AnimationController _pulse = AnimationController( + vsync: this, + duration: const Duration(milliseconds: 1100), + ); + + static const _icons = { + BoosterType.hammer: Icons.gavel, + BoosterType.shuffle: Icons.shuffle, + BoosterType.lineBomb: Icons.clear_all, + }; + + @override + void initState() { + super.initState(); + _syncPulse(); + } + + @override + void didUpdateWidget(BoosterHint oldWidget) { + super.didUpdateWidget(oldWidget); + _syncPulse(); + } + + /// Pulse only while a booster is armed — idle (no live ticker) otherwise, so + /// it never spins during normal play or pins a timer open in widget tests. + void _syncPulse() { + if (widget.arming != null) { + if (!_pulse.isAnimating) _pulse.repeat(reverse: true); + } else if (_pulse.isAnimating) { + _pulse + ..stop() + ..value = 0; + } + } + + @override + void dispose() { + _pulse.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + final arming = widget.arming; + final visible = arming != null; + final l10n = AppLocalizations.of(context)!; + final label = arming == BoosterType.lineBomb + ? l10n.boosterTapLine + : l10n.boosterTapTarget; + final accent = widget.accent; + + return IgnorePointer( + ignoring: !visible, + child: AnimatedOpacity( + opacity: visible ? 1 : 0, + duration: const Duration(milliseconds: 160), + child: AnimatedSlide( + offset: visible ? Offset.zero : const Offset(0, -0.4), + duration: const Duration(milliseconds: 220), + curve: Curves.easeOutBack, + child: GestureDetector( + onTap: widget.onCancel, + child: AnimatedBuilder( + animation: _pulse, + builder: (context, child) { + final t = _pulse.value; // 0..1, breathing + return Container( + decoration: BoxDecoration( + color: accent, + borderRadius: BorderRadius.circular(999), + boxShadow: [ + BoxShadow( + color: accent.withValues(alpha: 0.22 + 0.28 * t), + blurRadius: 10 + 12 * t, + spreadRadius: 1 + 3 * t, + ), + ], + ), + child: child, + ); + }, + child: Padding( + padding: const EdgeInsets.fromLTRB(7, 6, 12, 6), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + width: 26, + height: 26, + decoration: BoxDecoration( + color: Colors.white.withValues(alpha: 0.22), + shape: BoxShape.circle, + ), + child: Icon( + _icons[arming ?? BoosterType.hammer], + size: 16, + color: Colors.white, + ), + ), + const SizedBox(width: 8), + Text( + label, + style: const TextStyle( + color: Colors.white, + fontSize: 13, + fontWeight: FontWeight.w600, + ), + ), + const SizedBox(width: 8), + const Icon(Icons.close, size: 16, color: Colors.white70), + ], + ), + ), + ), + ), + ), + ), + ); + } +} diff --git a/test/ui/booster_hint_test.dart b/test/ui/booster_hint_test.dart new file mode 100644 index 0000000..5246b5c --- /dev/null +++ b/test/ui/booster_hint_test.dart @@ -0,0 +1,54 @@ +import 'package:block_seasons/game/models/booster.dart'; +import 'package:block_seasons/l10n/gen/app_localizations.dart'; +import 'package:block_seasons/ui/widgets/booster_hint.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; + +void main() { + Widget wrap(Widget child) => MaterialApp( + locale: const Locale('en'), + localizationsDelegates: AppLocalizations.localizationsDelegates, + supportedLocales: AppLocalizations.supportedLocales, + home: Scaffold(body: Center(child: child)), + ); + + testWidgets('shows the cell hint for hammer and cancels on tap', + (tester) async { + var cancelled = false; + await tester.pumpWidget(wrap(BoosterHint( + arming: BoosterType.hammer, + accent: const Color(0xFF5B7FFF), + onCancel: () => cancelled = true, + ))); + await tester.pump(const Duration(milliseconds: 250)); // settle entrance + + expect(find.text('Tap a cell'), findsOneWidget); + + await tester.tap(find.byType(BoosterHint)); + expect(cancelled, isTrue); + }); + + testWidgets('shows the line hint for the line bomb', (tester) async { + await tester.pumpWidget(wrap(BoosterHint( + arming: BoosterType.lineBomb, + accent: const Color(0xFF5B7FFF), + onCancel: () {}, + ))); + await tester.pump(const Duration(milliseconds: 250)); + + expect(find.text('Tap a row or column'), findsOneWidget); + }); + + testWidgets('ignores taps when nothing is armed', (tester) async { + var cancelled = false; + await tester.pumpWidget(wrap(BoosterHint( + arming: null, + accent: const Color(0xFF5B7FFF), + onCancel: () => cancelled = true, + ))); + await tester.pump(const Duration(milliseconds: 250)); + + await tester.tap(find.byType(BoosterHint), warnIfMissed: false); + expect(cancelled, isFalse); + }); +}