702 lines
25 KiB
Dart
702 lines
25 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:lba/res/colors.dart';
|
|
import '../models/hunt_card.dart';
|
|
import 'hunt_timer_widget.dart';
|
|
import 'hint_camera_widget.dart';
|
|
|
|
class HuntCardWidget extends StatefulWidget {
|
|
final HuntCard card;
|
|
final bool isSelected;
|
|
final bool isFlipped;
|
|
final VoidCallback onTap;
|
|
final double? customHeight;
|
|
final double? customWidth;
|
|
|
|
const HuntCardWidget({
|
|
super.key,
|
|
required this.card,
|
|
required this.onTap,
|
|
this.isSelected = false,
|
|
this.isFlipped = false,
|
|
this.customHeight,
|
|
this.customWidth,
|
|
});
|
|
|
|
@override
|
|
State<HuntCardWidget> createState() => _HuntCardWidgetState();
|
|
}
|
|
|
|
class _HuntCardWidgetState extends State<HuntCardWidget>
|
|
with TickerProviderStateMixin {
|
|
late AnimationController _flipController;
|
|
late AnimationController _scaleController;
|
|
late Animation<double> _flipAnimation;
|
|
late Animation<double> _scaleAnimation;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_flipController = AnimationController(
|
|
duration: const Duration(milliseconds: 800),
|
|
vsync: this,
|
|
);
|
|
_scaleController = AnimationController(
|
|
duration: const Duration(milliseconds: 300),
|
|
vsync: this,
|
|
);
|
|
|
|
_flipAnimation = Tween<double>(
|
|
begin: 0.0,
|
|
end: 1.0,
|
|
).animate(CurvedAnimation(
|
|
parent: _flipController,
|
|
curve: Curves.easeInOutBack,
|
|
));
|
|
|
|
_scaleAnimation = Tween<double>(
|
|
begin: 1.0,
|
|
end: 1.05,
|
|
).animate(CurvedAnimation(
|
|
parent: _scaleController,
|
|
curve: Curves.elasticOut,
|
|
));
|
|
}
|
|
|
|
@override
|
|
void didUpdateWidget(HuntCardWidget oldWidget) {
|
|
super.didUpdateWidget(oldWidget);
|
|
if (widget.isFlipped != oldWidget.isFlipped) {
|
|
if (widget.isFlipped) {
|
|
_flipController.forward();
|
|
} else {
|
|
_flipController.reverse();
|
|
}
|
|
}
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_flipController.dispose();
|
|
_scaleController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _openARHint() {
|
|
// Navigate to AR camera for location-based hints
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => HintCameraWidget(
|
|
targetLatitude: widget.card.hintLatitude,
|
|
targetLongitude: widget.card.hintLongitude,
|
|
hintDescription: widget.card.hintDescription,
|
|
onHintFound: () {
|
|
Navigator.pop(context);
|
|
// Show hint found feedback
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text('🎯 Hint Found! You\'re getting closer!'),
|
|
backgroundColor: Colors.green,
|
|
duration: Duration(seconds: 2),
|
|
),
|
|
);
|
|
},
|
|
onClose: () {
|
|
Navigator.pop(context);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTapDown: (_) => _scaleController.forward(),
|
|
onTapUp: (_) => _scaleController.reverse(),
|
|
onTapCancel: () => _scaleController.reverse(),
|
|
onTap: widget.onTap,
|
|
child: ScaleTransition(
|
|
scale: _scaleAnimation,
|
|
child: Container(
|
|
height: widget.customHeight ?? 260,
|
|
width: widget.customWidth,
|
|
margin: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
|
|
child: AnimatedBuilder(
|
|
animation: _flipAnimation,
|
|
builder: (context, child) {
|
|
final isShowingFront = _flipAnimation.value < 0.5;
|
|
return Transform(
|
|
alignment: Alignment.center,
|
|
transform: Matrix4.identity()
|
|
..setEntry(3, 2, 0.001)
|
|
..rotateY(_flipAnimation.value * 3.14159),
|
|
child: Card(
|
|
elevation: widget.isSelected ? 20 : 10,
|
|
shadowColor: widget.isSelected
|
|
? AppColors.primary.withOpacity(0.6)
|
|
: AppColors.shadowColor.withOpacity(0.3),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(20),
|
|
side: widget.isSelected
|
|
? BorderSide(
|
|
color: AppColors.primary,
|
|
width: 3,
|
|
strokeAlign: BorderSide.strokeAlignOutside,
|
|
)
|
|
: BorderSide.none,
|
|
),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(20),
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: isShowingFront
|
|
? [
|
|
AppColors.cardBackground,
|
|
AppColors.cardBackground.withOpacity(0.95),
|
|
AppColors.primary.withOpacity(0.05),
|
|
]
|
|
: [
|
|
AppColors.primary.withOpacity(0.2),
|
|
AppColors.primary.withOpacity(0.1),
|
|
AppColors.primary.withOpacity(0.05),
|
|
],
|
|
),
|
|
border: widget.isSelected && !isShowingFront
|
|
? Border.all(
|
|
color: AppColors.primary.withOpacity(0.7),
|
|
width: 2,
|
|
)
|
|
: null,
|
|
boxShadow: widget.isSelected ? [
|
|
BoxShadow(
|
|
color: AppColors.primary.withOpacity(0.3),
|
|
blurRadius: 15,
|
|
spreadRadius: 2,
|
|
offset: const Offset(0, 8),
|
|
),
|
|
] : [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.1),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: isShowingFront ? _buildFrontSide() : _buildBackSide(),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildFrontSide() {
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(20),
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [
|
|
AppColors.cardBackground,
|
|
AppColors.cardBackground.withOpacity(0.9),
|
|
AppColors.primary.withOpacity(0.05),
|
|
],
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.primary.withOpacity(0.1),
|
|
blurRadius: 12,
|
|
offset: const Offset(0, 6),
|
|
),
|
|
],
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
AppColors.primary.withOpacity(0.25),
|
|
AppColors.primary.withOpacity(0.15),
|
|
],
|
|
),
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(
|
|
color: AppColors.primary.withOpacity(0.4),
|
|
width: 1.5,
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.primary.withOpacity(0.2),
|
|
blurRadius: 6,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
widget.card.categoryIcon,
|
|
style: const TextStyle(fontSize: 16),
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
widget.card.category,
|
|
style: TextStyle(
|
|
color: AppColors.primary,
|
|
fontWeight: FontWeight.w700,
|
|
fontSize: 11,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
AppColors.confirmButton.withOpacity(0.25),
|
|
AppColors.confirmButton.withOpacity(0.15),
|
|
],
|
|
),
|
|
borderRadius: BorderRadius.circular(15),
|
|
border: Border.all(
|
|
color: AppColors.confirmButton.withOpacity(0.5),
|
|
width: 1.5,
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.confirmButton.withOpacity(0.3),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, 3),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
Icons.stars_rounded,
|
|
color: AppColors.confirmButton,
|
|
size: 16,
|
|
),
|
|
const SizedBox(width: 4),
|
|
Text(
|
|
'${widget.card.points}',
|
|
style: TextStyle(
|
|
color: AppColors.confirmButton,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 14,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 5),
|
|
Expanded(
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
// Gaming-style icon container with floating effect
|
|
Container(
|
|
padding: const EdgeInsets.all(24),
|
|
decoration: BoxDecoration(
|
|
gradient: RadialGradient(
|
|
colors: [
|
|
AppColors.primary.withOpacity(0.4),
|
|
AppColors.primary.withOpacity(0.2),
|
|
AppColors.primary.withOpacity(0.1),
|
|
AppColors.primary.withOpacity(0.05),
|
|
],
|
|
),
|
|
shape: BoxShape.circle,
|
|
border: Border.all(
|
|
color: AppColors.primary.withOpacity(0.5),
|
|
width: 2.5,
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.primary.withOpacity(0.4),
|
|
blurRadius: 20,
|
|
spreadRadius: 4,
|
|
),
|
|
BoxShadow(
|
|
color: AppColors.primary.withOpacity(0.2),
|
|
blurRadius: 40,
|
|
spreadRadius: 8,
|
|
),
|
|
],
|
|
),
|
|
child: Text(
|
|
widget.card.categoryIcon,
|
|
style: const TextStyle(fontSize: 36),
|
|
),
|
|
),
|
|
const SizedBox(height: 15),
|
|
// Gaming-style mystery text with holographic effect
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [
|
|
AppColors.surface.withOpacity(0.8),
|
|
AppColors.primary.withOpacity(0.1),
|
|
AppColors.surface.withOpacity(0.8),
|
|
],
|
|
),
|
|
borderRadius: BorderRadius.circular(25),
|
|
border: Border.all(
|
|
color: AppColors.primary.withOpacity(0.3),
|
|
width: 1.5,
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.primary.withOpacity(0.1),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
Icons.touch_app_rounded,
|
|
color: AppColors.primary,
|
|
size: 16,
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
'TAP TO REVEAL',
|
|
style: TextStyle(
|
|
color: AppColors.primary,
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.bold,
|
|
letterSpacing: 1.5,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
// const SizedBox(height: 4),
|
|
// Text(
|
|
// '✨ MYSTERY QUEST ✨',
|
|
// style: TextStyle(
|
|
// color: AppColors.textSecondary,
|
|
// fontSize: 10,
|
|
// fontWeight: FontWeight.w600,
|
|
// letterSpacing: 1.0,
|
|
// ),
|
|
// ),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// Gaming-style difficulty indicator with glow
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: List.generate(3, (index) {
|
|
final isActive = index < (widget.card.points ~/ 50).clamp(1, 3);
|
|
return SizedBox();
|
|
// Container(
|
|
// margin: const EdgeInsets.symmetric(horizontal: 3),
|
|
// width: isActive ? 20 : 14,
|
|
// height: 5,
|
|
// decoration: BoxDecoration(
|
|
// gradient: isActive ? LinearGradient(
|
|
// colors: [
|
|
// AppColors.primary,
|
|
// AppColors.primary.withOpacity(0.7),
|
|
// ],
|
|
// ) : null,
|
|
// color: isActive ? null : AppColors.textSecondary.withOpacity(0.3),
|
|
// borderRadius: BorderRadius.circular(3),
|
|
// boxShadow: isActive ? [
|
|
// BoxShadow(
|
|
// color: AppColors.primary.withOpacity(0.5),
|
|
// blurRadius: 4,
|
|
// spreadRadius: 1,
|
|
// ),
|
|
// ] : null,
|
|
// ),
|
|
// );
|
|
}),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildBackSide() {
|
|
return Transform(
|
|
alignment: Alignment.center,
|
|
transform: Matrix4.identity()..rotateY(3.14159),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(20),
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [
|
|
AppColors.primary.withOpacity(0.2),
|
|
AppColors.primary.withOpacity(0.1),
|
|
AppColors.primary.withOpacity(0.05),
|
|
],
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(14),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Header with title and timer
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(6),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
AppColors.primary.withOpacity(0.3),
|
|
AppColors.primary.withOpacity(0.2),
|
|
],
|
|
),
|
|
borderRadius: BorderRadius.circular(10),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.primary.withOpacity(0.2),
|
|
blurRadius: 4,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Icon(
|
|
Icons.auto_awesome_rounded,
|
|
color: AppColors.primary,
|
|
size: 16,
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
'Quest',
|
|
style: TextStyle(
|
|
color: AppColors.primary,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
// Enhanced Timer
|
|
HuntTimerWidget(
|
|
timeRemaining: const Duration(hours: 12),
|
|
isActive: true,
|
|
showMinutesSeconds: false,
|
|
fontSize: 8,
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 10),
|
|
|
|
// Riddle section
|
|
Expanded(
|
|
flex: 4,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [
|
|
AppColors.surface.withOpacity(0.9),
|
|
AppColors.surface.withOpacity(0.7),
|
|
],
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: AppColors.primary.withOpacity(0.3),
|
|
width: 1.5,
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.primary.withOpacity(0.1),
|
|
blurRadius: 6,
|
|
offset: const Offset(0, 3),
|
|
),
|
|
],
|
|
),
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
Icons.psychology_outlined,
|
|
color: AppColors.textSecondary,
|
|
size: 14,
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
'Riddle',
|
|
style: TextStyle(
|
|
color: AppColors.textSecondary,
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 6),
|
|
Text(
|
|
widget.card.question,
|
|
style: TextStyle(
|
|
color: AppColors.textPrimary,
|
|
fontSize: 13,
|
|
height: 1.2,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 8),
|
|
|
|
// AR Hint section
|
|
Expanded(
|
|
flex: 1,
|
|
child: GestureDetector(
|
|
onTap: () => _openARHint(),
|
|
child: Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(6),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
Colors.yellow.withOpacity(0.2),
|
|
Colors.blue.withOpacity(0.15),
|
|
],
|
|
),
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: Border.all(
|
|
color: Colors.yellow.withOpacity(0.4),
|
|
width: 1,
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.yellow.withOpacity(0.2),
|
|
blurRadius: 6,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.help,
|
|
color: Colors.yellow.shade600,
|
|
size: 14,
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
'AR Smart Hint',
|
|
style: TextStyle(
|
|
color: Colors.yellow.shade700,
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 6),
|
|
|
|
// Action button
|
|
Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.symmetric(vertical: 6),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [
|
|
AppColors.primary,
|
|
AppColors.primary.withOpacity(0.8),
|
|
AppColors.primary.withOpacity(0.9),
|
|
],
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.primary.withOpacity(0.4),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, 3),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.location_on_rounded,
|
|
color: Colors.white,
|
|
size: 12,
|
|
),
|
|
const SizedBox(width: 4),
|
|
Text(
|
|
'Find & Earn ${widget.card.points} Points!',
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|