474 lines
13 KiB
Dart
474 lines
13 KiB
Dart
|
import 'package:flame/game.dart';
|
||
|
|
import 'package:flutter/material.dart';
|
||
|
|
|
||
|
|
import '../components/result_modal.dart';
|
||
|
|
import '../flame/memory_match_flame_game.dart';
|
||
|
|
import '../game/levels.dart';
|
||
|
|
|
||
|
|
class GameScreenFlame extends StatefulWidget {
|
||
|
|
const GameScreenFlame({super.key, this.levelId = 1});
|
||
|
|
|
||
|
|
final int levelId;
|
||
|
|
|
||
|
|
@override
|
||
|
|
State<GameScreenFlame> createState() => _GameScreenFlameState();
|
||
|
|
}
|
||
|
|
|
||
|
|
class _GameScreenFlameState extends State<GameScreenFlame> {
|
||
|
|
late int currentLevelId;
|
||
|
|
late MemoryMatchFlameGame flameGame;
|
||
|
|
|
||
|
|
@override
|
||
|
|
void initState() {
|
||
|
|
super.initState();
|
||
|
|
currentLevelId = widget.levelId;
|
||
|
|
flameGame = _buildGame(currentLevelId);
|
||
|
|
}
|
||
|
|
|
||
|
|
MemoryMatchFlameGame _buildGame(int levelId) {
|
||
|
|
final level = levels[(levelId - 1).clamp(0, levels.length - 1)];
|
||
|
|
return MemoryMatchFlameGame(
|
||
|
|
level: level,
|
||
|
|
onStateChanged: () {
|
||
|
|
if (mounted) {
|
||
|
|
setState(() {});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onResult: (status, score) {
|
||
|
|
if (mounted) {
|
||
|
|
setState(() {});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Future<void> _restartSameLevel() async {
|
||
|
|
await flameGame.restartSameLevel();
|
||
|
|
if (mounted) {
|
||
|
|
setState(() {});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Future<void> _goNext() async {
|
||
|
|
if (currentLevelId >= levels.length) {
|
||
|
|
await _restartSameLevel();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
currentLevelId += 1;
|
||
|
|
await flameGame.nextLevel(levels[currentLevelId - 1]);
|
||
|
|
if (mounted) {
|
||
|
|
setState(() {});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
final isReady = flameGame.isReady;
|
||
|
|
final scoreText = isReady ? '${flameGame.controller.score}' : '0';
|
||
|
|
|
||
|
|
return Scaffold(
|
||
|
|
body: Stack(
|
||
|
|
children: [
|
||
|
|
GameWidget(game: flameGame),
|
||
|
|
SafeArea(
|
||
|
|
child: Column(
|
||
|
|
children: [
|
||
|
|
Padding(
|
||
|
|
padding: EdgeInsets.symmetric(
|
||
|
|
horizontal: MediaQuery.of(context).size.width >= 768
|
||
|
|
? 22
|
||
|
|
: 12,
|
||
|
|
vertical: 8,
|
||
|
|
),
|
||
|
|
child: _TopHud(
|
||
|
|
flameGame: flameGame,
|
||
|
|
onPause: () {
|
||
|
|
flameGame.togglePause();
|
||
|
|
},
|
||
|
|
onMusic: () {
|
||
|
|
flameGame.toggleMusic();
|
||
|
|
},
|
||
|
|
onSfx: () {
|
||
|
|
flameGame.toggleSfx();
|
||
|
|
},
|
||
|
|
),
|
||
|
|
),
|
||
|
|
Text(
|
||
|
|
'Level ${flameGame.level.id}',
|
||
|
|
style: const TextStyle(
|
||
|
|
fontSize: 34,
|
||
|
|
fontWeight: FontWeight.w900,
|
||
|
|
color: Color(0xFF56F0FF),
|
||
|
|
letterSpacing: 1,
|
||
|
|
shadows: [
|
||
|
|
Shadow(
|
||
|
|
color: Color.fromRGBO(80, 255, 255, 0.55),
|
||
|
|
blurRadius: 12,
|
||
|
|
offset: Offset(0, 2),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const Spacer(),
|
||
|
|
Padding(
|
||
|
|
padding: EdgeInsets.symmetric(
|
||
|
|
horizontal: MediaQuery.of(context).size.width >= 768
|
||
|
|
? 22
|
||
|
|
: 18,
|
||
|
|
),
|
||
|
|
child: _BottomHud(
|
||
|
|
flameGame: flameGame,
|
||
|
|
scoreText: scoreText,
|
||
|
|
onRetry: () {
|
||
|
|
_restartSameLevel();
|
||
|
|
},
|
||
|
|
),
|
||
|
|
),
|
||
|
|
// Padding(
|
||
|
|
// padding: const EdgeInsets.symmetric(vertical: 6),
|
||
|
|
// child: Text(
|
||
|
|
// 'Moves: $moves Mistakes: $mistakes${flameGame.level.maxMistakes != null ? ' / ${flameGame.level.maxMistakes}' : ''} Grid: ${flameGame.level.rowPattern.join('-')}',
|
||
|
|
// style: const TextStyle(
|
||
|
|
// color: Color.fromRGBO(255, 255, 255, 0.85),
|
||
|
|
// ),
|
||
|
|
// ),
|
||
|
|
// ),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
if (flameGame.pausedByUser)
|
||
|
|
Positioned.fill(
|
||
|
|
child: _PauseOverlay(
|
||
|
|
onResume: () {
|
||
|
|
flameGame.togglePause();
|
||
|
|
},
|
||
|
|
onRetry: () {
|
||
|
|
_restartSameLevel();
|
||
|
|
},
|
||
|
|
onHome: () {
|
||
|
|
Navigator.of(context).pushReplacementNamed('/start');
|
||
|
|
},
|
||
|
|
),
|
||
|
|
),
|
||
|
|
ResultModal(
|
||
|
|
visible: flameGame.showResult,
|
||
|
|
status: flameGame.resultStatus,
|
||
|
|
score: flameGame.finalScore,
|
||
|
|
bestScore: flameGame.bestScore,
|
||
|
|
hasNext: currentLevelId + 1 <= levels.length,
|
||
|
|
onRetry: _restartSameLevel,
|
||
|
|
onNext: _goNext,
|
||
|
|
showAddTime: flameGame.resultStatus == 'lost',
|
||
|
|
addTimeSeconds: 30,
|
||
|
|
onRequestRewardAddTime: (grant) async {
|
||
|
|
await Future.delayed(const Duration(milliseconds: 600));
|
||
|
|
final sec = await flameGame.reviveWithReward();
|
||
|
|
grant(sec);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class _TopHud extends StatelessWidget {
|
||
|
|
const _TopHud({
|
||
|
|
required this.flameGame,
|
||
|
|
required this.onPause,
|
||
|
|
required this.onMusic,
|
||
|
|
required this.onSfx,
|
||
|
|
});
|
||
|
|
|
||
|
|
final MemoryMatchFlameGame flameGame;
|
||
|
|
final VoidCallback onPause;
|
||
|
|
final VoidCallback onMusic;
|
||
|
|
final VoidCallback onSfx;
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return LayoutBuilder(
|
||
|
|
builder: (context, constraints) {
|
||
|
|
final compact = constraints.maxWidth < 380;
|
||
|
|
final iconSize = compact ? 42.0 : 46.0;
|
||
|
|
final itemGap = compact ? 6.0 : 10.0;
|
||
|
|
final groupGap = compact ? 8.0 : 12.0;
|
||
|
|
final topBadgeHeight = compact ? 52.0 : 58.0;
|
||
|
|
final rightGroupWidth = iconSize * 2 + itemGap;
|
||
|
|
final timerWidth =
|
||
|
|
(constraints.maxWidth - iconSize - rightGroupWidth - groupGap * 2)
|
||
|
|
.clamp(118.0, 176.0);
|
||
|
|
|
||
|
|
return Row(
|
||
|
|
children: [
|
||
|
|
_NeonIconButton(
|
||
|
|
iconAsset: flameGame.pausedByUser
|
||
|
|
? 'assets/images/0f3f8a4a21cdb16db2f080e4d7695cdc.png'
|
||
|
|
: 'assets/images/e86bdd5d8908079d1ed4c06015f37eb0.png',
|
||
|
|
onTap: onPause,
|
||
|
|
size: iconSize,
|
||
|
|
),
|
||
|
|
SizedBox(width: groupGap),
|
||
|
|
_HudValueBadge(
|
||
|
|
backgroundAsset: 'assets/images/b5bf27b2555de44e3df2230080db5a1d.png',
|
||
|
|
text: flameGame.timeText,
|
||
|
|
width: timerWidth,
|
||
|
|
height: topBadgeHeight,
|
||
|
|
textLeftInset: compact ? 64 : 76,
|
||
|
|
textRightInset: compact ? 12 : 16,
|
||
|
|
textStyle: TextStyle(
|
||
|
|
color: const Color(0xFF69F6FF),
|
||
|
|
fontSize: compact ? 16 : 18,
|
||
|
|
fontWeight: FontWeight.w900,
|
||
|
|
letterSpacing: compact ? 0.5 : 1,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const Spacer(),
|
||
|
|
_NeonIconButton(
|
||
|
|
iconAsset: flameGame.mutedMusic
|
||
|
|
? 'assets/images/5efe427a4e20b0ab12afe98c3cb50a60.png'
|
||
|
|
: 'assets/images/5efe427a4e20b0ab12afe98c3cb50a60.png',
|
||
|
|
active: !flameGame.mutedMusic,
|
||
|
|
onTap: onMusic,
|
||
|
|
size: iconSize,
|
||
|
|
),
|
||
|
|
SizedBox(width: itemGap),
|
||
|
|
_NeonIconButton(
|
||
|
|
iconAsset: flameGame.mutedSfx
|
||
|
|
? 'assets/images/849ade26e1b6da2ed96d00db639a0985.png'
|
||
|
|
: 'assets/images/1548af1c94ad45584324df8f08baf227.png',
|
||
|
|
active: !flameGame.mutedSfx,
|
||
|
|
onTap: onSfx,
|
||
|
|
size: iconSize,
|
||
|
|
),
|
||
|
|
],
|
||
|
|
);
|
||
|
|
},
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class _BottomHud extends StatelessWidget {
|
||
|
|
const _BottomHud({
|
||
|
|
required this.flameGame,
|
||
|
|
required this.scoreText,
|
||
|
|
required this.onRetry,
|
||
|
|
});
|
||
|
|
|
||
|
|
final MemoryMatchFlameGame flameGame;
|
||
|
|
final String scoreText;
|
||
|
|
final VoidCallback onRetry;
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return Row(
|
||
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
|
|
children: [
|
||
|
|
_HudValueBadge(
|
||
|
|
backgroundAsset: 'assets/images/5e36941b3d856737e81516acd45edc50.png',
|
||
|
|
text: scoreText,
|
||
|
|
width: 118,
|
||
|
|
height: 44,
|
||
|
|
textLeftInset: 54,
|
||
|
|
textRightInset: 10,
|
||
|
|
textStyle: const TextStyle(
|
||
|
|
color: Color(0xFF56F0FF),
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: FontWeight.w900,
|
||
|
|
letterSpacing: 1,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
_NeonIconButton(
|
||
|
|
iconAsset: 'assets/images/161747ec4dc9f55f1760195593742232.png',
|
||
|
|
onTap: onRetry,
|
||
|
|
),
|
||
|
|
],
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class _HudValueBadge extends StatelessWidget {
|
||
|
|
const _HudValueBadge({
|
||
|
|
required this.backgroundAsset,
|
||
|
|
required this.text,
|
||
|
|
required this.width,
|
||
|
|
required this.height,
|
||
|
|
required this.textLeftInset,
|
||
|
|
required this.textRightInset,
|
||
|
|
required this.textStyle,
|
||
|
|
});
|
||
|
|
|
||
|
|
final String backgroundAsset;
|
||
|
|
final String text;
|
||
|
|
final double width;
|
||
|
|
final double height;
|
||
|
|
final double textLeftInset;
|
||
|
|
final double textRightInset;
|
||
|
|
final TextStyle textStyle;
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return SizedBox(
|
||
|
|
width: width,
|
||
|
|
height: height,
|
||
|
|
child: Stack(
|
||
|
|
children: [
|
||
|
|
Positioned.fill(
|
||
|
|
child: Image.asset(backgroundAsset, fit: BoxFit.fill),
|
||
|
|
),
|
||
|
|
Positioned.fill(
|
||
|
|
left: textLeftInset,
|
||
|
|
right: textRightInset,
|
||
|
|
child: Align(
|
||
|
|
alignment: Alignment.center,
|
||
|
|
child: FittedBox(
|
||
|
|
fit: BoxFit.scaleDown,
|
||
|
|
child: Text(text, maxLines: 1, style: textStyle),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class _NeonIconButton extends StatelessWidget {
|
||
|
|
const _NeonIconButton({
|
||
|
|
required this.iconAsset,
|
||
|
|
required this.onTap,
|
||
|
|
this.active = true,
|
||
|
|
this.size = 46,
|
||
|
|
});
|
||
|
|
|
||
|
|
final String iconAsset;
|
||
|
|
final VoidCallback onTap;
|
||
|
|
final bool active;
|
||
|
|
final double size;
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return GestureDetector(
|
||
|
|
onTap: onTap,
|
||
|
|
child: SizedBox(
|
||
|
|
width: size,
|
||
|
|
height: size,
|
||
|
|
child: Center(
|
||
|
|
child: Opacity(
|
||
|
|
opacity: active ? 1 : 0.45,
|
||
|
|
child: Image.asset(iconAsset, width: size, height: size),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class _PauseOverlay extends StatelessWidget {
|
||
|
|
const _PauseOverlay({
|
||
|
|
required this.onResume,
|
||
|
|
required this.onRetry,
|
||
|
|
required this.onHome,
|
||
|
|
});
|
||
|
|
|
||
|
|
final VoidCallback onResume;
|
||
|
|
final VoidCallback onRetry;
|
||
|
|
final VoidCallback onHome;
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return Material(
|
||
|
|
color: const Color.fromRGBO(0, 0, 0, 0.65),
|
||
|
|
child: Center(
|
||
|
|
child: Container(
|
||
|
|
width: MediaQuery.of(context).size.width.clamp(0, 420).toDouble(),
|
||
|
|
margin: const EdgeInsets.symmetric(horizontal: 20),
|
||
|
|
padding: const EdgeInsets.all(16),
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: const Color.fromRGBO(20, 24, 60, 0.96),
|
||
|
|
borderRadius: BorderRadius.circular(18),
|
||
|
|
border: Border.all(
|
||
|
|
color: const Color.fromRGBO(120, 255, 255, 0.25),
|
||
|
|
width: 2,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
child: Column(
|
||
|
|
mainAxisSize: MainAxisSize.min,
|
||
|
|
children: [
|
||
|
|
const Text(
|
||
|
|
'Paused',
|
||
|
|
style: TextStyle(
|
||
|
|
fontSize: 20,
|
||
|
|
fontWeight: FontWeight.w900,
|
||
|
|
color: Colors.white,
|
||
|
|
letterSpacing: 1,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const SizedBox(height: 12),
|
||
|
|
_PauseButton(
|
||
|
|
text: 'Resume',
|
||
|
|
color: const Color.fromRGBO(50, 160, 255, 0.9),
|
||
|
|
onTap: onResume,
|
||
|
|
),
|
||
|
|
const SizedBox(height: 10),
|
||
|
|
_PauseButton(
|
||
|
|
text: 'Retry',
|
||
|
|
color: const Color.fromRGBO(255, 255, 255, 0.1),
|
||
|
|
onTap: onRetry,
|
||
|
|
),
|
||
|
|
const SizedBox(height: 10),
|
||
|
|
_PauseButton(
|
||
|
|
text: 'Home',
|
||
|
|
color: const Color.fromRGBO(255, 120, 120, 0.22),
|
||
|
|
onTap: onHome,
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class _PauseButton extends StatelessWidget {
|
||
|
|
const _PauseButton({
|
||
|
|
required this.text,
|
||
|
|
required this.color,
|
||
|
|
required this.onTap,
|
||
|
|
});
|
||
|
|
|
||
|
|
final String text;
|
||
|
|
final Color color;
|
||
|
|
final VoidCallback onTap;
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return SizedBox(
|
||
|
|
width: double.infinity,
|
||
|
|
height: 48,
|
||
|
|
child: ElevatedButton(
|
||
|
|
style: ElevatedButton.styleFrom(
|
||
|
|
backgroundColor: color,
|
||
|
|
shape: RoundedRectangleBorder(
|
||
|
|
borderRadius: BorderRadius.circular(14),
|
||
|
|
),
|
||
|
|
side: const BorderSide(
|
||
|
|
color: Color.fromRGBO(255, 255, 255, 0.22),
|
||
|
|
width: 2,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
onPressed: onTap,
|
||
|
|
child: Text(
|
||
|
|
text,
|
||
|
|
style: const TextStyle(
|
||
|
|
color: Colors.white,
|
||
|
|
fontSize: 14,
|
||
|
|
fontWeight: FontWeight.w900,
|
||
|
|
letterSpacing: 0.5,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|