feat(ui): floating pulse hint for booster targeting
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) <noreply@anthropic.com>
This commit is contained in:
@@ -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<GameScreen>
|
||||
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<GameScreen>
|
||||
),
|
||||
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(
|
||||
|
||||
@@ -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<BoosterHint> createState() => _BoosterHintState();
|
||||
}
|
||||
|
||||
class _BoosterHintState extends State<BoosterHint>
|
||||
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),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user