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_painter.dart';
|
||||||
import '../widgets/board_widget.dart';
|
import '../widgets/board_widget.dart';
|
||||||
import '../widgets/booster_bar.dart';
|
import '../widgets/booster_bar.dart';
|
||||||
|
import '../widgets/booster_hint.dart';
|
||||||
import '../widgets/effects_overlay.dart';
|
import '../widgets/effects_overlay.dart';
|
||||||
import '../widgets/hud_widget.dart';
|
import '../widgets/hud_widget.dart';
|
||||||
import '../widgets/piece_painter.dart';
|
import '../widgets/piece_painter.dart';
|
||||||
@@ -143,18 +144,9 @@ class _GameScreenState extends ConsumerState<GameScreen>
|
|||||||
await ref.read(gameSessionProvider.notifier).useShuffle();
|
await ref.read(gameSessionProvider.notifier).useShuffle();
|
||||||
return;
|
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);
|
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.
|
/// Converts a board tap into a cell, then applies the armed booster.
|
||||||
@@ -410,32 +402,54 @@ class _GameScreenState extends ConsumerState<GameScreen>
|
|||||||
),
|
),
|
||||||
HudWidget(view: view),
|
HudWidget(view: view),
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Center(
|
child: Stack(
|
||||||
child: AnimatedBuilder(
|
children: [
|
||||||
animation: _shake,
|
Positioned.fill(
|
||||||
builder: (context, child) {
|
child: Center(
|
||||||
final t = _shake.value;
|
child: AnimatedBuilder(
|
||||||
final dx =
|
animation: _shake,
|
||||||
math.sin(t * math.pi * 10) * 6 * (1 - t);
|
builder: (context, child) {
|
||||||
return Transform.translate(
|
final t = _shake.value;
|
||||||
offset: Offset(dx, 0), child: child);
|
final dx = math.sin(t * math.pi * 10) *
|
||||||
},
|
6 *
|
||||||
// While a targeted booster is armed, taps on the
|
(1 - t);
|
||||||
// board pick a cell. When not arming, onTapUp
|
return Transform.translate(
|
||||||
// returns immediately so it never steals the
|
offset: Offset(dx, 0), child: child);
|
||||||
// tray-drag placement gestures.
|
},
|
||||||
child: GestureDetector(
|
// While a targeted booster is armed, taps on
|
||||||
behavior: HitTestBehavior.deferToChild,
|
// the board pick a cell. When not arming,
|
||||||
onTapUp: _arming == null
|
// onTapUp returns immediately so it never
|
||||||
? null
|
// steals the tray-drag placement gestures.
|
||||||
: (details) => _onBoardTapUp(details),
|
child: GestureDetector(
|
||||||
child: BoardWidget(
|
behavior: HitTestBehavior.deferToChild,
|
||||||
key: _boardKey,
|
onTapUp: _arming == null
|
||||||
view: view,
|
? null
|
||||||
ghost: ghost,
|
: (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(
|
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