Add instruction page

lib/instruction_pannel.dart

@@ -0,0 +1,258 @@
+/*
+ * @Author       : Linloir
+ * @Date         : 2022-03-08 08:19:49
+ * @LastEditTime : 2022-03-08 10:52:10
+ * @Description  : Instruction dialog
+ */
+
+import 'package:flutter/material.dart';
+import 'dart:math';
+
+class DecoratedTitleWidget extends StatelessWidget {
+  const DecoratedTitleWidget({required this.title, Key? key}) : super(key: key);
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    var mainTextColor = Theme.of(context).brightness == Brightness.dark ? Colors.white : Colors.grey[850];
+    var mainDecorationColor = Theme.of(context).brightness == Brightness.dark ? Colors.white.withAlpha(100) : Colors.grey.withAlpha(100);
+    return SizedBox(
+      height: 50.0,
+      child: Stack(
+        children: [
+          Positioned.directional(
+            textDirection: TextDirection.ltr,
+            bottom: 0,
+            child: Container(
+              color: mainDecorationColor,
+              width: 50.0,
+              height: 10.0,
+            ),
+          ),
+          Positioned.directional(
+            textDirection: TextDirection.ltr,
+            bottom: 0,
+            child: Text(
+              title,
+              style: TextStyle(
+                fontSize: 25.0,
+                fontWeight: FontWeight.bold,
+                color: mainTextColor,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class DecoratedPlainText extends StatelessWidget {
+  const DecoratedPlainText({required this.text, Key? key}) : super(key: key);
+
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    var mainTextColor = Theme.of(context).brightness == Brightness.dark ? Colors.white : Colors.grey[850];
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 10.0),
+      child: Text(
+        text,
+        style: TextStyle(
+          color: mainTextColor,
+          fontSize: 16.0,
+        ),
+      ),
+    );
+  }
+}
+
+class DecoratedTextBox extends StatelessWidget {
+  const DecoratedTextBox({required this.letter, required this.state, Key? key}) : super(key: key);
+
+  final String letter;
+  final int state;
+
+  @override
+  Widget build(BuildContext context) {
+    var mainTextColor = Theme.of(context).brightness == Brightness.dark ? Colors.white : 
+                      state != 0 && state != 3 ? Colors.white : Colors.grey[850];
+    var backGroundColor = state == 1 ? Colors.green[600]! :
+                          state == 2 ? Colors.yellow[800]! :
+                          state == -1 ? Colors.grey[700]! :
+                          Theme.of(context).brightness == Brightness.dark ? Colors.grey[850]! : Colors.white;
+    var borderColor = state == 1 ? Colors.green[600]! :
+                      state == 2 ? Colors.yellow[800]! :
+                      state == 3 ? Theme.of(context).brightness == Brightness.dark ? Colors.grey[400]! : Colors.grey[850]! :
+                      state == -1 ? Colors.grey[700]! :
+                      Theme.of(context).brightness == Brightness.dark ? Colors.grey[700]! : Colors.grey[400]!;
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 1.0),
+      child: Container(
+        width: 40.0,
+        height: 40.0,
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+          border: Border.all(
+            color: borderColor,
+            width: 2.0,
+          ),
+          color: backGroundColor,
+        ),
+        child: Text(
+          letter,
+          style: TextStyle(
+            color: mainTextColor,
+            fontSize: 20.0,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+Future<void> showInstructionDialog({required context}) {
+  return showGeneralDialog(
+    transitionDuration: const Duration(milliseconds: 750),
+    context: context,
+    pageBuilder: (context, animation, secondaryAnimation) {
+      return SafeArea(
+        child: Builder(
+          builder: (context) {
+            return Dialog(
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  const Align(
+                    alignment: Alignment.centerLeft,
+                    child: Padding(
+                      padding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 10.0),
+                      child: Text(
+                        'How To Play',
+                        style: TextStyle(
+                          fontSize: 20.0,
+                        ),
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    child: Container(
+                      margin: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 20.0),
+                      alignment: Alignment.center,
+                      child: SingleChildScrollView(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            //# AIM OF THE GAME
+                            const DecoratedTitleWidget(title: "Aim Of The Game"),
+                            //Content of # AIM OF THE GAME
+                            const DecoratedPlainText(
+                              text: "The aim of the WORDLE game is to guess a word within six tries.",
+                            ),
+                            // const DecoratedPlainText(
+                            //   text: "By default, the hidden word is five characters long.",
+                            // ),
+                            const DecoratedPlainText(
+                              text: "Each guess should be a valid word which matches the length of the hidden word, length of which by default is five characters long.",
+                            ),
+                            const DecoratedPlainText(
+                              text: "After each guess, the color of the tiles will change to infer how close your answer is to the word. The meaning of the colors is shown below.",
+                            ),
+                            const DecoratedTitleWidget(title: "Read The Colors"),
+                            Padding(
+                              padding: const EdgeInsets.symmetric(vertical: 10.0),
+                              child: Row(
+                                mainAxisAlignment: MainAxisAlignment.start,
+                                children: const [
+                                  DecoratedTextBox(letter: "B", state: 1),
+                                  DecoratedTextBox(letter: "I", state: 0),
+                                  DecoratedTextBox(letter: "N", state: 0),
+                                  DecoratedTextBox(letter: "G", state: 0),
+                                  DecoratedTextBox(letter: "O", state: 0),
+                                ],
+                              ),
+                            ),
+                            const DecoratedPlainText(
+                              text: "The green tile shows that letter B is in the word and it's in the right spot.",
+                            ),
+                            Row(
+                              mainAxisAlignment: MainAxisAlignment.start,
+                              children: const [
+                                DecoratedTextBox(letter: "S", state: 1),
+                                DecoratedTextBox(letter: "Y", state: 2),
+                                DecoratedTextBox(letter: "S", state: -1),
+                                DecoratedTextBox(letter: "U", state: 0),
+                              ],
+                            ),
+                            const DecoratedPlainText(
+                              text: "The yellow tile shows that letter Y is in the word but it's not in the right spot.",
+                            ),
+                            Row(
+                              mainAxisAlignment: MainAxisAlignment.start,
+                              children: const [
+                                DecoratedTextBox(letter: "O", state: -1),
+                                DecoratedTextBox(letter: "O", state: -1),
+                                DecoratedTextBox(letter: "P", state: -1),
+                                DecoratedTextBox(letter: "S", state: -1),
+                              ],
+                            ),
+                            const DecoratedPlainText(
+                              text: "A grey tile shows the letter is not in the word. For example, O, P, S are not in the word.",
+                            ),
+                          ]
+                        ),
+                      ),
+                    ),
+                  ),
+                  Align(
+                    alignment: Alignment.centerRight,
+                    child: Padding(
+                      padding: const EdgeInsets.all(10.0),
+                      child: TextButton(
+                        child: Text('Got it!', style: TextStyle(color: Colors.grey[850]),),
+                        onPressed: () => Navigator.of(context).pop(),
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            );
+          }
+        ),
+      );
+    },
+    transitionBuilder: (context, animation, secondaryAnimation, child) {
+      var scaleAnimation = Tween<double>(begin: 0, end: 1).animate(
+        CurvedAnimation(
+          parent: animation, 
+          curve: Curves.easeOutExpo,
+        )
+      );
+      var opacAnimation = Tween<double>(begin: 0, end: 1).animate(
+        CurvedAnimation(
+          parent: animation, 
+          curve: Curves.easeOut,
+        )
+      );
+      return AnimatedBuilder(
+        animation: animation,
+        builder: (context, child) {
+          return Opacity(
+            opacity: opacAnimation.value,
+            child: Transform.scale(
+              scale: scaleAnimation.value,
+              child: child,
+            )
+          );
+        },
+        child: child,
+      );
+    },
+    barrierDismissible: true,
+    barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
+    barrierColor: Colors.black54,
+  );
+}

lib/offline.dart

@@ -1,7 +1,7 @@
 /*
  * @Author       : Linloir
  * @Date         : 2022-03-05 20:41:41
- * @LastEditTime : 2022-03-07 14:40:37
+ * @LastEditTime : 2022-03-08 10:28:17
  * @Description  : Offline page
  */
 
@@ -10,7 +10,8 @@ import 'dart:math';
 import 'package:flutter/material.dart';
 import 'package:wordle/event_bus.dart';
 import 'package:wordle/validation_provider.dart';
-import './display_pannel.dart';
+import 'package:wordle/display_pannel.dart';
+import 'package:wordle/instruction_pannel.dart';
 
 class OfflinePage extends StatefulWidget {
   const OfflinePage({Key? key}) : super(key: key);
@@ -37,7 +38,8 @@ class _OfflinePageState extends State<OfflinePage> with TickerProviderStateMixin
         title: const Text('WORDLE OFFLINE'),
         centerTitle: true,
         //iconTheme: const IconThemeData(color: Colors.black),
-        actions: [AnimatedSwitcher(
+        actions: [
+          AnimatedSwitcher(
             duration: const Duration(milliseconds: 750),
             reverseDuration: const Duration(milliseconds: 750),
             switchInCurve: Curves.bounceOut,
@@ -66,6 +68,13 @@ class _OfflinePageState extends State<OfflinePage> with TickerProviderStateMixin
               onPressed: () => mainBus.emit(event: "ToggleTheme", args: []),
             ),
           ),
+          IconButton(
+            icon: const Icon(Icons.help_outline_outlined),
+            //color: Colors.black,
+            onPressed: (){
+              showInstructionDialog(context: context);
+            },
+          ),
           IconButton(
             icon: const Icon(Icons.refresh_rounded),
             //color: Colors.black,

pubspec.lock

@@ -5,56 +5,56 @@ packages:
     dependency: transitive
     description:
       name: async
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.8.2"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.1.0"
   characters:
     dependency: transitive
     description:
       name: characters
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.2.0"
   charcode:
     dependency: transitive
     description:
       name: charcode
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.3.1"
   clock:
     dependency: transitive
     description:
       name: clock
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.1.0"
   collection:
     dependency: transitive
     description:
       name: collection
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.15.0"
   cupertino_icons:
     dependency: "direct main"
     description:
       name: cupertino_icons
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.0.4"
   fake_async:
     dependency: transitive
     description:
       name: fake_async
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.2.0"
   flutter:
@@ -66,7 +66,7 @@ packages:
     dependency: "direct dev"
     description:
       name: flutter_lints
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.0.4"
   flutter_test:
@@ -78,35 +78,35 @@ packages:
     dependency: transitive
     description:
       name: lints
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.0.1"
   matcher:
     dependency: transitive
     description:
       name: matcher
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "0.12.11"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "0.1.3"
   meta:
     dependency: transitive
     description:
       name: meta
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.7.0"
   path:
     dependency: transitive
     description:
       name: path
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.8.0"
   sky_engine:
@@ -118,56 +118,56 @@ packages:
     dependency: transitive
     description:
       name: source_span
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.8.1"
   stack_trace:
     dependency: transitive
     description:
       name: stack_trace
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.10.0"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.1.0"
   string_scanner:
     dependency: transitive
     description:
       name: string_scanner
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.1.0"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.2.0"
   test_api:
     dependency: transitive
     description:
       name: test_api
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "0.4.8"
   typed_data:
     dependency: transitive
     description:
       name: typed_data
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.3.0"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
-      url: "https://pub.dartlang.org"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.1.1"
 sdks: