Update Animation

lib/display_pannel.dart

@@ -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++)
+          for(int i = 0; i < 6; i++)
-            Row(
+            Expanded(
-              mainAxisAlignment: MainAxisAlignment.center,
+              flex: 1,
-              children: [
+              child: Row(
-                for(int c = 0; c < 5; c++)
+                mainAxisAlignment: MainAxisAlignment.center,
-                  Padding(
+                children: [
-                    padding: const EdgeInsets.all(5.0),
+                  for(int j = 0; j < 5; j++)
-                    child: Container(
+                    AnimatedBuilder(
-                      constraints: const BoxConstraints.tightFor(width: 100.0, height: 100.0),
+                      animation: inputs[i][j]["InputAnimationController"],
-                      child: Center(
+                      builder: (context, child) {
-                        child: Text(
+                        return Transform.scale(
-                          inputs[r][c],
+                          scale: Tween<double>(begin: 1, end: 1.1).evaluate(inputs[i][j]["InputAnimationController"]),
-                          style: TextStyle(
+                          child: child,
-                            fontSize: 50.0,
+                        );
-                            fontWeight: FontWeight.bold,
+                      },
-                          ),
+                      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;
       },
     );
   }

lib/input_pannel.dart

@@ -1,6 +1,63 @@
 /*
  * @Author       : Linloir
  * @Date         : 2022-03-05 20:55:53
- * @LastEditTime : 2022-03-05 20:55:53
+ * @LastEditTime : 2022-03-06 12:17:55
- * @Description  : 
+ * @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);
+          },
+        ),
+      ],
+    );
+  }
+}

lib/offline.dart

@@ -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(),
+            )
           ),
         ],
       ),

lib/validation_provider.dart

@@ -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: {
+                args:  <int>[
-                  "Attempt": curAttempt,
+                  for(int i = 0; i < 5; i++)
-                  "AttemptCount": curAttemptCount,
+                    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;
       },
     );
   }