feat(juice): button press feedback + fade screen transitions
Adds PressableScale (0.94 squish on tap-down) around the Adventure FilledButton, Classic OutlinedButton, and each season-map stage node. Replaces all in-app MaterialPageRoute pushes with a gentle fade+scale PageRouteBuilder (320ms in, 240ms out) via a new fadeRoute helper.
This commit is contained in:
@@ -6,6 +6,8 @@ import '../../game/models/stage.dart';
|
||||
import '../../l10n/gen/app_localizations.dart';
|
||||
import '../../state/providers.dart';
|
||||
import '../widgets/banner_ad_slot.dart';
|
||||
import '../widgets/fade_route.dart';
|
||||
import '../widgets/pressable_scale.dart';
|
||||
import '../widgets/season_background.dart';
|
||||
import 'game_screen.dart';
|
||||
import 'season_map_screen.dart';
|
||||
@@ -67,43 +69,45 @@ class HomeScreen extends ConsumerWidget {
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 44),
|
||||
FilledButton(
|
||||
style: FilledButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 56, vertical: 18),
|
||||
textStyle: Theme.of(context).textTheme.titleLarge,
|
||||
PressableScale(
|
||||
child: FilledButton(
|
||||
style: FilledButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 56, vertical: 18),
|
||||
textStyle: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
onPressed: () {
|
||||
if (!(ModalRoute.of(context)?.isCurrent ?? true)) return;
|
||||
Navigator.of(context).push(
|
||||
fadeRoute(const SeasonMapScreen()),
|
||||
);
|
||||
},
|
||||
child: Text(l10n.adventure),
|
||||
),
|
||||
onPressed: () {
|
||||
if (!(ModalRoute.of(context)?.isCurrent ?? true)) return;
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute(
|
||||
builder: (_) => const SeasonMapScreen()),
|
||||
);
|
||||
},
|
||||
child: Text(l10n.adventure),
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
OutlinedButton(
|
||||
style: OutlinedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 40, vertical: 14),
|
||||
textStyle: Theme.of(context).textTheme.titleMedium,
|
||||
PressableScale(
|
||||
child: OutlinedButton(
|
||||
style: OutlinedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 40, vertical: 14),
|
||||
textStyle: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
onPressed: () {
|
||||
if (!(ModalRoute.of(context)?.isCurrent ?? true)) return;
|
||||
ref.read(seasonFlowProvider.notifier).clear();
|
||||
ref.read(analyticsProvider).endlessStart();
|
||||
ref.read(gameSessionProvider.notifier).startStage(
|
||||
StageConfig.endless(
|
||||
seed: DateTime.now().millisecondsSinceEpoch,
|
||||
),
|
||||
);
|
||||
Navigator.of(context).push(
|
||||
fadeRoute(const GameScreen()),
|
||||
);
|
||||
},
|
||||
child: Text(l10n.classic),
|
||||
),
|
||||
onPressed: () {
|
||||
if (!(ModalRoute.of(context)?.isCurrent ?? true)) return;
|
||||
ref.read(seasonFlowProvider.notifier).clear();
|
||||
ref.read(analyticsProvider).endlessStart();
|
||||
ref.read(gameSessionProvider.notifier).startStage(
|
||||
StageConfig.endless(
|
||||
seed: DateTime.now().millisecondsSinceEpoch,
|
||||
),
|
||||
);
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute(
|
||||
builder: (_) => const GameScreen()),
|
||||
);
|
||||
},
|
||||
child: Text(l10n.classic),
|
||||
),
|
||||
if (best > 0) ...[
|
||||
const SizedBox(height: 10),
|
||||
@@ -127,7 +131,7 @@ class HomeScreen extends ConsumerWidget {
|
||||
child: IconButton(
|
||||
icon: const Icon(Icons.settings, color: Colors.white70),
|
||||
onPressed: () => Navigator.of(context).push(
|
||||
MaterialPageRoute(builder: (_) => const SettingsScreen()),
|
||||
fadeRoute(const SettingsScreen()),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -5,7 +5,9 @@ import '../../game/models/season.dart';
|
||||
import '../../state/providers.dart';
|
||||
import '../theme/palette.dart';
|
||||
import '../widgets/banner_ad_slot.dart';
|
||||
import '../widgets/fade_route.dart';
|
||||
import '../widgets/map_layout.dart';
|
||||
import '../widgets/pressable_scale.dart';
|
||||
import '../widgets/season_background.dart';
|
||||
import '../widgets/tile_painter.dart';
|
||||
import 'game_screen.dart';
|
||||
@@ -193,79 +195,81 @@ class _JourneyMapState extends ConsumerState<_JourneyMap> {
|
||||
key: Key('stage_node_$i'),
|
||||
left: center.dx - size / 2,
|
||||
top: center.dy - size / 2,
|
||||
child: GestureDetector(
|
||||
onTap: !isUnlocked
|
||||
? null
|
||||
: () {
|
||||
ref
|
||||
.read(seasonFlowProvider.notifier)
|
||||
.startSeasonStage(widget.pack, i);
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute(builder: (_) => const GameScreen()),
|
||||
);
|
||||
},
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: size,
|
||||
height: size,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: isUnlocked
|
||||
? LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: isCurrent
|
||||
? [
|
||||
lighten(colors.accent, 0.25),
|
||||
colors.accent,
|
||||
darken(colors.accent, 0.2),
|
||||
]
|
||||
: [
|
||||
const Color(0xFFFFE9A8),
|
||||
const Color(0xFFFFD166),
|
||||
const Color(0xFFE0AC3B),
|
||||
],
|
||||
)
|
||||
: null,
|
||||
color: isUnlocked ? null : GamePalette.lockedNode,
|
||||
boxShadow: isCurrent
|
||||
? [
|
||||
BoxShadow(
|
||||
color: colors.accent.withValues(alpha: 0.7),
|
||||
blurRadius: 22,
|
||||
child: PressableScale(
|
||||
child: GestureDetector(
|
||||
onTap: !isUnlocked
|
||||
? null
|
||||
: () {
|
||||
ref
|
||||
.read(seasonFlowProvider.notifier)
|
||||
.startSeasonStage(widget.pack, i);
|
||||
Navigator.of(context).push(
|
||||
fadeRoute(const GameScreen()),
|
||||
);
|
||||
},
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: size,
|
||||
height: size,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: isUnlocked
|
||||
? LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: isCurrent
|
||||
? [
|
||||
lighten(colors.accent, 0.25),
|
||||
colors.accent,
|
||||
darken(colors.accent, 0.2),
|
||||
]
|
||||
: [
|
||||
const Color(0xFFFFE9A8),
|
||||
const Color(0xFFFFD166),
|
||||
const Color(0xFFE0AC3B),
|
||||
],
|
||||
)
|
||||
: null,
|
||||
color: isUnlocked ? null : GamePalette.lockedNode,
|
||||
boxShadow: isCurrent
|
||||
? [
|
||||
BoxShadow(
|
||||
color: colors.accent.withValues(alpha: 0.7),
|
||||
blurRadius: 22,
|
||||
),
|
||||
]
|
||||
: null,
|
||||
),
|
||||
child: isUnlocked
|
||||
? Text(
|
||||
'${i + 1}',
|
||||
style: TextStyle(
|
||||
fontSize: isCurrent ? 22 : 17,
|
||||
fontWeight: FontWeight.w900,
|
||||
color: isCurrent
|
||||
? Colors.white
|
||||
: const Color(0xFF5A4200),
|
||||
),
|
||||
]
|
||||
: null,
|
||||
)
|
||||
: const Icon(Icons.lock, color: Colors.white24, size: 20),
|
||||
),
|
||||
child: isUnlocked
|
||||
? Text(
|
||||
'${i + 1}',
|
||||
style: TextStyle(
|
||||
fontSize: isCurrent ? 22 : 17,
|
||||
fontWeight: FontWeight.w900,
|
||||
color: isCurrent
|
||||
? Colors.white
|
||||
: const Color(0xFF5A4200),
|
||||
if (isUnlocked && !isCurrent)
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
for (var s = 0; s < 3; s++)
|
||||
Icon(
|
||||
Icons.star,
|
||||
size: 13,
|
||||
color: s < stars ? Colors.amber : Colors.white24,
|
||||
),
|
||||
)
|
||||
: const Icon(Icons.lock, color: Colors.white24, size: 20),
|
||||
),
|
||||
if (isUnlocked && !isCurrent)
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
for (var s = 0; s < 3; s++)
|
||||
Icon(
|
||||
Icons.star,
|
||||
size: 13,
|
||||
color: s < stars ? Colors.amber : Colors.white24,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user