537 lines
18 KiB
Dart
537 lines
18 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter/foundation.dart';
|
|
import 'dart:io';
|
|
|
|
class WordlePage extends StatefulWidget {
|
|
@override
|
|
_WordlePageState createState() => _WordlePageState();
|
|
}
|
|
|
|
class _WordlePageState extends State<WordlePage> with TickerProviderStateMixin {
|
|
static const String TARGET_WORD = "HELLO";
|
|
static const int MAX_ATTEMPTS = 6;
|
|
static const int WORD_LENGTH = 5;
|
|
|
|
List<List<String>> grid = List.generate(MAX_ATTEMPTS, (_) => List.filled(WORD_LENGTH, ''));
|
|
List<List<LetterState>> gridStates = List.generate(MAX_ATTEMPTS, (_) => List.filled(WORD_LENGTH, LetterState.empty));
|
|
Map<String, LetterState> keyboardStates = {};
|
|
|
|
int currentRow = 0;
|
|
int currentCol = 0;
|
|
bool gameWon = false;
|
|
bool gameLost = false;
|
|
|
|
late List<AnimationController> _flipControllers;
|
|
late List<Animation<double>> _flipAnimations;
|
|
late FocusNode _focusNode;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_initializeAnimations();
|
|
_initializeKeyboardStates();
|
|
_focusNode = FocusNode();
|
|
|
|
// Request focus for keyboard input on web/desktop
|
|
if (kIsWeb || (!kIsWeb && !Platform.isIOS && !Platform.isAndroid)) {
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
_focusNode.requestFocus();
|
|
});
|
|
}
|
|
}
|
|
|
|
void _initializeAnimations() {
|
|
_flipControllers = List.generate(
|
|
WORD_LENGTH,
|
|
(index) => AnimationController(
|
|
duration: Duration(milliseconds: 600),
|
|
vsync: this,
|
|
),
|
|
);
|
|
_flipAnimations = _flipControllers.map((controller) =>
|
|
Tween<double>(begin: 0.0, end: 1.0).animate(
|
|
CurvedAnimation(parent: controller, curve: Curves.easeInOut)
|
|
)
|
|
).toList();
|
|
}
|
|
|
|
void _initializeKeyboardStates() {
|
|
for (int i = 65; i <= 90; i++) {
|
|
keyboardStates[String.fromCharCode(i)] = LetterState.empty;
|
|
}
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
for (var controller in _flipControllers) {
|
|
controller.dispose();
|
|
}
|
|
_focusNode.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _addLetter(String letter) {
|
|
if (currentCol < WORD_LENGTH && currentRow < MAX_ATTEMPTS && !gameWon && !gameLost) {
|
|
setState(() {
|
|
grid[currentRow][currentCol] = letter;
|
|
currentCol++;
|
|
});
|
|
HapticFeedback.lightImpact();
|
|
}
|
|
}
|
|
|
|
void _deleteLetter() {
|
|
if (currentCol > 0 && !gameWon && !gameLost) {
|
|
setState(() {
|
|
currentCol--;
|
|
grid[currentRow][currentCol] = '';
|
|
});
|
|
HapticFeedback.lightImpact();
|
|
}
|
|
}
|
|
|
|
Future<void> _submitWord() async {
|
|
if (currentCol == WORD_LENGTH && !gameWon && !gameLost) {
|
|
String guess = grid[currentRow].join('');
|
|
|
|
// Animate the flip
|
|
for (int i = 0; i < WORD_LENGTH; i++) {
|
|
await Future.delayed(Duration(milliseconds: 100));
|
|
_flipControllers[i].forward();
|
|
}
|
|
|
|
await Future.delayed(Duration(milliseconds: 300));
|
|
|
|
List<LetterState> newStates = _evaluateGuess(guess);
|
|
|
|
setState(() {
|
|
gridStates[currentRow] = newStates;
|
|
_updateKeyboardStates(guess, newStates);
|
|
});
|
|
|
|
// Reset animations
|
|
for (var controller in _flipControllers) {
|
|
controller.reset();
|
|
}
|
|
|
|
if (guess == TARGET_WORD) {
|
|
setState(() {
|
|
gameWon = true;
|
|
});
|
|
HapticFeedback.heavyImpact();
|
|
_showGameEndDialog(true);
|
|
} else if (currentRow == MAX_ATTEMPTS - 1) {
|
|
setState(() {
|
|
gameLost = true;
|
|
});
|
|
HapticFeedback.heavyImpact();
|
|
_showGameEndDialog(false);
|
|
} else {
|
|
setState(() {
|
|
currentRow++;
|
|
currentCol = 0;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
List<LetterState> _evaluateGuess(String guess) {
|
|
List<LetterState> states = List.filled(WORD_LENGTH, LetterState.absent);
|
|
List<String> targetLetters = TARGET_WORD.split('');
|
|
List<bool> used = List.filled(WORD_LENGTH, false);
|
|
|
|
// First pass: check for correct positions
|
|
for (int i = 0; i < WORD_LENGTH; i++) {
|
|
if (guess[i] == targetLetters[i]) {
|
|
states[i] = LetterState.correct;
|
|
used[i] = true;
|
|
}
|
|
}
|
|
|
|
// Second pass: check for present letters
|
|
for (int i = 0; i < WORD_LENGTH; i++) {
|
|
if (states[i] != LetterState.correct) {
|
|
for (int j = 0; j < WORD_LENGTH; j++) {
|
|
if (!used[j] && guess[i] == targetLetters[j]) {
|
|
states[i] = LetterState.present;
|
|
used[j] = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return states;
|
|
}
|
|
|
|
void _updateKeyboardStates(String guess, List<LetterState> states) {
|
|
for (int i = 0; i < guess.length; i++) {
|
|
String letter = guess[i];
|
|
LetterState currentState = keyboardStates[letter] ?? LetterState.empty;
|
|
LetterState newState = states[i];
|
|
|
|
if (currentState == LetterState.correct) continue;
|
|
if (currentState == LetterState.present && newState == LetterState.absent) continue;
|
|
|
|
keyboardStates[letter] = newState;
|
|
}
|
|
}
|
|
|
|
void _showGameEndDialog(bool won) {
|
|
showDialog(
|
|
context: context,
|
|
barrierDismissible: false,
|
|
builder: (BuildContext context) {
|
|
return AlertDialog(
|
|
title: Text(won ? 'Congratulations!' : 'Game Over'),
|
|
content: Text(won ? 'You solved today\'s puzzle!' : 'The word was: $TARGET_WORD'),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () {
|
|
Navigator.of(context).pop();
|
|
_resetGame();
|
|
},
|
|
child: Text('Play Again', style: TextStyle(color: Color(0xFF6A4C93))),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
void _resetGame() {
|
|
setState(() {
|
|
grid = List.generate(MAX_ATTEMPTS, (_) => List.filled(WORD_LENGTH, ''));
|
|
gridStates = List.generate(MAX_ATTEMPTS, (_) => List.filled(WORD_LENGTH, LetterState.empty));
|
|
currentRow = 0;
|
|
currentCol = 0;
|
|
gameWon = false;
|
|
gameLost = false;
|
|
_initializeKeyboardStates();
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return PopScope(
|
|
canPop: false,
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
// Prevent mobile keyboard from showing up
|
|
FocusScope.of(context).unfocus();
|
|
// Only request focus on web/desktop platforms
|
|
if (kIsWeb || (!kIsWeb && !Platform.isIOS && !Platform.isAndroid)) {
|
|
_focusNode.requestFocus();
|
|
}
|
|
},
|
|
child: KeyboardListener(
|
|
focusNode: _focusNode,
|
|
onKeyEvent: _handleKeyEvent,
|
|
child: Scaffold(
|
|
backgroundColor: Colors.white,
|
|
appBar: AppBar(
|
|
backgroundColor: Colors.white,
|
|
elevation: 0,
|
|
automaticallyImplyLeading: false,
|
|
centerTitle: true,
|
|
title: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
'وصال',
|
|
style: TextStyle(
|
|
fontSize: 28,
|
|
fontWeight: FontWeight.w200,
|
|
fontFamily: 'Blaka',
|
|
color: Color(0xFF6A4C93),
|
|
),
|
|
),
|
|
SizedBox(width: 8),
|
|
Text(
|
|
'Daily Challenge',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w500,
|
|
color: Colors.grey[600],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
bottom: PreferredSize(
|
|
preferredSize: Size.fromHeight(1),
|
|
child: Container(height: 1, color: Colors.grey[200]),
|
|
),
|
|
),
|
|
body: Column(
|
|
children: [
|
|
Expanded(
|
|
child: Center(
|
|
child: Container(
|
|
constraints: BoxConstraints(maxWidth: 350),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
// Game Grid
|
|
Container(
|
|
padding: EdgeInsets.all(16),
|
|
child: Column(
|
|
children: List.generate(MAX_ATTEMPTS, (row) {
|
|
return Padding(
|
|
padding: EdgeInsets.symmetric(vertical: 2),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: List.generate(WORD_LENGTH, (col) {
|
|
return Container(
|
|
margin: EdgeInsets.all(2),
|
|
width: 62,
|
|
height: 62,
|
|
child: AnimatedBuilder(
|
|
animation: _flipAnimations[col],
|
|
builder: (context, child) {
|
|
// Check if this tile should be animating
|
|
bool isCurrentRowAndAnimating = row == currentRow && _flipAnimations[col].value > 0;
|
|
|
|
// If not animating, show the final state
|
|
if (!isCurrentRowAndAnimating) {
|
|
return Container(
|
|
width: 62,
|
|
height: 62,
|
|
decoration: BoxDecoration(
|
|
border: Border.all(
|
|
color: _getBorderColor(row, col),
|
|
width: 2,
|
|
),
|
|
color: _getTileColor(row, col),
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
grid[row][col],
|
|
style: TextStyle(
|
|
fontSize: 32,
|
|
fontWeight: FontWeight.bold,
|
|
color: _getTextColor(row, col),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// Animation is running - create flip effect
|
|
double progress = _flipAnimations[col].value;
|
|
double rotationX = progress * 3.14159;
|
|
|
|
// Determine colors to show during animation
|
|
bool showFinalColors = progress > 0.5;
|
|
Color bgColor = showFinalColors ? _getTileColor(row, col) : Colors.white;
|
|
Color textColor = showFinalColors ? _getTextColor(row, col) : Colors.black;
|
|
|
|
return Container(
|
|
width: 62,
|
|
height: 62,
|
|
decoration: BoxDecoration(
|
|
border: Border.all(
|
|
color: _getBorderColor(row, col),
|
|
width: 2,
|
|
),
|
|
color: Colors.white,
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
// Animated background that flips
|
|
Transform(
|
|
alignment: Alignment.center,
|
|
transform: Matrix4.identity()
|
|
..setEntry(3, 2, 0.001)
|
|
..rotateX(rotationX),
|
|
child: Container(
|
|
width: 62,
|
|
height: 62,
|
|
color: bgColor,
|
|
),
|
|
),
|
|
// Text that always stays upright and visible
|
|
Center(
|
|
child: Text(
|
|
grid[row][col],
|
|
style: TextStyle(
|
|
fontSize: 32,
|
|
fontWeight: FontWeight.bold,
|
|
color: textColor,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
// Keyboard
|
|
Container(
|
|
padding: EdgeInsets.all(8),
|
|
child: _buildKeyboard(),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildKeyboard() {
|
|
List<List<String>> keyboardLayout = [
|
|
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
|
|
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
|
|
['ENTER', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '⌫'],
|
|
];
|
|
|
|
return Column(
|
|
children: keyboardLayout.map((row) {
|
|
return Padding(
|
|
padding: EdgeInsets.symmetric(vertical: 2),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: row.map((key) {
|
|
bool isSpecial = key == 'ENTER' || key == '⌫';
|
|
double width = isSpecial ? 65 : 35;
|
|
|
|
return Container(
|
|
margin: EdgeInsets.symmetric(horizontal: 1.5),
|
|
width: width,
|
|
height: 58,
|
|
child: Material(
|
|
color: _getKeyColor(key),
|
|
borderRadius: BorderRadius.circular(4),
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(4),
|
|
onTap: () => _handleKeyTap(key),
|
|
child: Container(
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
key,
|
|
style: TextStyle(
|
|
fontSize: isSpecial ? 12 : 14,
|
|
fontWeight: FontWeight.bold,
|
|
color: _getKeyTextColor(key),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
);
|
|
}).toList(),
|
|
);
|
|
}
|
|
|
|
void _handleKeyTap(String key) {
|
|
if (key == 'ENTER') {
|
|
_submitWord();
|
|
} else if (key == '⌫') {
|
|
_deleteLetter();
|
|
} else {
|
|
_addLetter(key);
|
|
}
|
|
}
|
|
|
|
bool _handleKeyEvent(KeyEvent event) {
|
|
if (event is KeyDownEvent) {
|
|
if (event.logicalKey == LogicalKeyboardKey.enter) {
|
|
_submitWord();
|
|
return true;
|
|
} else if (event.logicalKey == LogicalKeyboardKey.backspace) {
|
|
_deleteLetter();
|
|
return true;
|
|
} else if (event.logicalKey.keyLabel.length == 1) {
|
|
String key = event.logicalKey.keyLabel.toUpperCase();
|
|
if (key.codeUnitAt(0) >= 65 && key.codeUnitAt(0) <= 90) {
|
|
_addLetter(key);
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
Color _getBorderColor(int row, int col) {
|
|
if (row >= MAX_ATTEMPTS || col >= WORD_LENGTH) return Colors.grey[300]!;
|
|
if (row < currentRow || (row == currentRow && gameWon)) {
|
|
return Colors.transparent;
|
|
} else if (row == currentRow && col < currentCol) {
|
|
return Colors.grey[600]!;
|
|
} else {
|
|
return Colors.grey[300]!;
|
|
}
|
|
}
|
|
|
|
Color _getTileColor(int row, int col) {
|
|
if (row >= MAX_ATTEMPTS || col >= WORD_LENGTH) return Colors.white;
|
|
if (row >= currentRow && !gameWon) return Colors.white;
|
|
|
|
switch (gridStates[row][col]) {
|
|
case LetterState.correct:
|
|
return Color(0xFF6AAE7C);
|
|
case LetterState.present:
|
|
return Color(0xFFC9B037);
|
|
case LetterState.absent:
|
|
return Color(0xFF787C7E);
|
|
default:
|
|
return Colors.white;
|
|
}
|
|
}
|
|
|
|
Color _getTextColor(int row, int col) {
|
|
if (row >= MAX_ATTEMPTS || col >= WORD_LENGTH) return Colors.black;
|
|
if (row >= currentRow && !gameWon) return Colors.black;
|
|
return gridStates[row][col] == LetterState.empty ? Colors.black : Colors.white;
|
|
}
|
|
|
|
Color _getKeyColor(String key) {
|
|
if (key == 'ENTER' || key == '⌫') {
|
|
return Colors.grey[300]!;
|
|
}
|
|
|
|
LetterState state = keyboardStates[key] ?? LetterState.empty;
|
|
switch (state) {
|
|
case LetterState.correct:
|
|
return Color(0xFF6AAE7C);
|
|
case LetterState.present:
|
|
return Color(0xFFC9B037);
|
|
case LetterState.absent:
|
|
return Color(0xFF787C7E);
|
|
default:
|
|
return Colors.grey[200]!;
|
|
}
|
|
}
|
|
|
|
Color _getKeyTextColor(String key) {
|
|
if (key == 'ENTER' || key == '⌫') {
|
|
return Colors.black;
|
|
}
|
|
|
|
LetterState state = keyboardStates[key] ?? LetterState.empty;
|
|
return state == LetterState.empty ? Colors.black : Colors.white;
|
|
}
|
|
}
|
|
|
|
enum LetterState {
|
|
empty,
|
|
absent,
|
|
present,
|
|
correct,
|
|
} |