mirror of
https://github.com/Linloir/Flutter-Wordle.git
synced 2025-12-16 22:18:10 +08:00
Update Animation
This commit is contained in:
parent
840adcc4a4
commit
9722abaeeb
@ -1,13 +1,15 @@
|
||||
/*
|
||||
* @Author : Linloir
|
||||
* @Date : 2022-03-05 20:56:05
|
||||
* @LastEditTime : 2022-03-05 23:51:16
|
||||
* @LastEditTime : 2022-03-06 12:14:57
|
||||
* @Description : The display widget of the wordle game
|
||||
*/
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:wordle/validation_provider.dart';
|
||||
import './input_pannel.dart';
|
||||
import './event_bus.dart';
|
||||
import 'dart:math' as math;
|
||||
|
||||
class WordleDisplayWidget extends StatefulWidget {
|
||||
const WordleDisplayWidget({Key? key}) : super(key: key);
|
||||
@ -16,18 +18,51 @@ class WordleDisplayWidget extends StatefulWidget {
|
||||
State<WordleDisplayWidget> createState() => _WordleDisplayWidgetState();
|
||||
}
|
||||
|
||||
class _WordleDisplayWidgetState extends State<WordleDisplayWidget> {
|
||||
class _WordleDisplayWidgetState extends State<WordleDisplayWidget> with TickerProviderStateMixin{
|
||||
int r = 0;
|
||||
int c = 0;
|
||||
var inputs = <List<String>>[for(int i = 0; i < 6; i++) [for(int j = 0; j < 5; j++) "A"]];
|
||||
bool onAnimation = false;
|
||||
late final List<List<Map<String, dynamic>>> inputs;
|
||||
|
||||
void _validationAnimation(List<int> validation) async {
|
||||
onAnimation = true;
|
||||
for(int i = 0; i < 5; i++) {
|
||||
setState((){
|
||||
inputs[r][i]["State"] = validation[i];
|
||||
print('Set $r, $i to state ${validation[i]}');
|
||||
});
|
||||
await Future.delayed(const Duration(seconds: 1));
|
||||
}
|
||||
onAnimation = false;
|
||||
r++;
|
||||
c = 0;
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
inputs = [
|
||||
for(int i = 0; i < 6; i++)
|
||||
[
|
||||
for(int j = 0; j < 5; j++)
|
||||
{
|
||||
"Letter": "",
|
||||
"State": 0,
|
||||
"InputAnimationController": AnimationController(
|
||||
duration: const Duration(milliseconds: 50),
|
||||
reverseDuration: const Duration(milliseconds: 100),
|
||||
vsync: this
|
||||
),
|
||||
}
|
||||
]
|
||||
];
|
||||
mainBus.onBus(
|
||||
event: "Attempt",
|
||||
onEvent: (args) {
|
||||
|
||||
print('Heard');
|
||||
List<int> validation = args;
|
||||
print(validation);
|
||||
_validationAnimation(validation);
|
||||
}
|
||||
);
|
||||
}
|
||||
@ -38,45 +73,104 @@ class _WordleDisplayWidgetState extends State<WordleDisplayWidget> {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
for(int r = 0; r < 6; r++)
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
for(int c = 0; c < 5; c++)
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(5.0),
|
||||
child: Container(
|
||||
constraints: const BoxConstraints.tightFor(width: 100.0, height: 100.0),
|
||||
child: Center(
|
||||
child: Text(
|
||||
inputs[r][c],
|
||||
style: TextStyle(
|
||||
fontSize: 50.0,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
for(int i = 0; i < 6; i++)
|
||||
Expanded(
|
||||
flex: 1,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
for(int j = 0; j < 5; j++)
|
||||
AnimatedBuilder(
|
||||
animation: inputs[i][j]["InputAnimationController"],
|
||||
builder: (context, child) {
|
||||
return Transform.scale(
|
||||
scale: Tween<double>(begin: 1, end: 1.1).evaluate(inputs[i][j]["InputAnimationController"]),
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
child: AspectRatio(
|
||||
aspectRatio: 1,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 750),
|
||||
switchInCurve: Curves.easeOut,
|
||||
reverseDuration: const Duration(milliseconds: 10),
|
||||
transitionBuilder: (child, animation) {
|
||||
return AnimatedBuilder(
|
||||
animation: animation,
|
||||
child: child,
|
||||
builder: (context, child) {
|
||||
var _animation = Tween<double>(begin: math.pi / 2, end: 0).animate(animation);
|
||||
// return ConstrainedBox(
|
||||
// constraints: BoxConstraints.tightFor(height: constraints.maxHeight * _animation.value),
|
||||
// child: child,
|
||||
// );
|
||||
return Transform(
|
||||
transform: Matrix4.rotationX(_animation.value),
|
||||
alignment: Alignment.center,
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
);
|
||||
},
|
||||
child: Padding(
|
||||
key: ValueKey((inputs[i][j]["State"] == 0 || inputs[i][j]["State"] == 3) ? 0 : 1),
|
||||
padding: const EdgeInsets.all(5.0),
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: inputs[i][j]["State"] == 1 ? Colors.green[600]! :
|
||||
inputs[i][j]["State"] == 2 ? Colors.yellow[800]! :
|
||||
inputs[i][j]["State"] == 3 ? Colors.grey[850]! :
|
||||
inputs[i][j]["State"] == -1 ? Colors.grey[700]! :
|
||||
Colors.grey[400]!,
|
||||
width: 3.0,
|
||||
),
|
||||
color: inputs[i][j]["State"] == 1 ? Colors.green[600]! :
|
||||
inputs[i][j]["State"] == 2 ? Colors.yellow[800]! :
|
||||
inputs[i][j]["State"] == -1 ? Colors.grey[700]! :
|
||||
Colors.white,
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
inputs[i][j]["Letter"],
|
||||
style: TextStyle(
|
||||
color: inputs[i][j]["State"] == 3 ? Colors.grey[850]! : Colors.white,
|
||||
fontSize: 30,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
|
||||
),
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: Colors.grey[600]!,
|
||||
width: 3.0,
|
||||
)
|
||||
),
|
||||
)
|
||||
|
||||
),
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
InputPannelWidget(),
|
||||
],
|
||||
),
|
||||
onNotification: (noti) {
|
||||
print('Get');
|
||||
if(noti.type == InputType.singleCharacter) {
|
||||
if(r <= 6 && c <= 5) {
|
||||
if(r < 6 && c < 5 && !onAnimation) {
|
||||
setState((){
|
||||
inputs[r].add(noti.msg);
|
||||
inputs[r][c]["Letter"] = noti.msg;
|
||||
inputs[r][c]["State"] = 3;
|
||||
var controller = inputs[r][c]["InputAnimationController"] as AnimationController;
|
||||
controller.forward().then((value) => controller.reverse());
|
||||
c++;
|
||||
});
|
||||
}
|
||||
}
|
||||
return true;
|
||||
return false;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,63 @@
|
||||
/*
|
||||
* @Author : Linloir
|
||||
* @Date : 2022-03-05 20:55:53
|
||||
* @LastEditTime : 2022-03-05 20:55:53
|
||||
* @Description :
|
||||
* @LastEditTime : 2022-03-06 12:17:55
|
||||
* @Description : Input pannel class
|
||||
*/
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:wordle/validation_provider.dart';
|
||||
import './event_bus.dart';
|
||||
|
||||
class InputPannelWidget extends StatefulWidget {
|
||||
const InputPannelWidget({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<InputPannelWidget> createState() => _InputPannelWidgetState();
|
||||
}
|
||||
|
||||
class _InputPannelWidgetState extends State<InputPannelWidget> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
children: [
|
||||
ElevatedButton(
|
||||
child: const Text('A'),
|
||||
onPressed: () {
|
||||
const InputNotification(type: InputType.singleCharacter, msg: "A").dispatch(context);
|
||||
},
|
||||
),
|
||||
ElevatedButton(
|
||||
child: const Text('W'),
|
||||
onPressed: () {
|
||||
const InputNotification(type: InputType.singleCharacter, msg: "W").dispatch(context);
|
||||
},
|
||||
),
|
||||
ElevatedButton(
|
||||
child: const Text('O'),
|
||||
onPressed: () {
|
||||
const InputNotification(type: InputType.singleCharacter, msg: "O").dispatch(context);
|
||||
},
|
||||
),
|
||||
ElevatedButton(
|
||||
child: const Text('R'),
|
||||
onPressed: () {
|
||||
const InputNotification(type: InputType.singleCharacter, msg: "R").dispatch(context);
|
||||
},
|
||||
),
|
||||
ElevatedButton(
|
||||
child: const Text('Submit'),
|
||||
onPressed: () {
|
||||
const InputNotification(type: InputType.inputConfirmation, msg: "").dispatch(context);
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,14 @@
|
||||
/*
|
||||
* @Author : Linloir
|
||||
* @Date : 2022-03-05 20:41:41
|
||||
* @LastEditTime : 2022-03-05 23:22:41
|
||||
* @LastEditTime : 2022-03-06 11:41:41
|
||||
* @Description : Offline page
|
||||
*/
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:wordle/validation_provider.dart';
|
||||
import './display_pannel.dart';
|
||||
import './input_pannel.dart';
|
||||
|
||||
class OfflinePage extends StatefulWidget {
|
||||
const OfflinePage({Key? key}) : super(key: key);
|
||||
@ -41,9 +43,11 @@ class _OfflinePageState extends State<OfflinePage> {
|
||||
],
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
children: const <Widget>[
|
||||
Expanded(
|
||||
child: WordleDisplayWidget(),
|
||||
child: ValidationProvider(
|
||||
child: WordleDisplayWidget(),
|
||||
)
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author : Linloir
|
||||
* @Date : 2022-03-05 21:40:51
|
||||
* @LastEditTime : 2022-03-05 23:06:28
|
||||
* @LastEditTime : 2022-03-06 11:42:36
|
||||
* @Description : Validation Provider class
|
||||
*/
|
||||
|
||||
@ -80,10 +80,12 @@ class _ValidationProviderState extends State<ValidationProvider> {
|
||||
return NotificationListener<InputNotification>(
|
||||
child: widget.child,
|
||||
onNotification: (noti) {
|
||||
print('Get');
|
||||
if(noti.type == InputType.inputConfirmation){
|
||||
if(curAttempt.length < 5) {
|
||||
print('failed');
|
||||
//Not enough
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
//Check validation
|
||||
@ -91,11 +93,17 @@ class _ValidationProviderState extends State<ValidationProvider> {
|
||||
//emit current attempt
|
||||
mainBus.emit(
|
||||
event: "Attempt",
|
||||
args: {
|
||||
"Attempt": curAttempt,
|
||||
"AttemptCount": curAttemptCount,
|
||||
}
|
||||
args: <int>[
|
||||
for(int i = 0; i < 5; i++)
|
||||
if(curAttempt[i] == answer[i])
|
||||
1
|
||||
else if(letterSet.lookup(curAttempt[i]) != null)
|
||||
2
|
||||
else
|
||||
-1
|
||||
],
|
||||
);
|
||||
print('Emited');
|
||||
curAttempt = "";
|
||||
curAttemptCount++;
|
||||
}
|
||||
@ -123,7 +131,7 @@ class _ValidationProviderState extends State<ValidationProvider> {
|
||||
curAttempt += noti.msg;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
return true;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user