diff --git a/lib/instruction_pannel.dart b/lib/instruction_pannel.dart new file mode 100644 index 0000000..1c9d15c --- /dev/null +++ b/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 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(begin: 0, end: 1).animate( + CurvedAnimation( + parent: animation, + curve: Curves.easeOutExpo, + ) + ); + var opacAnimation = Tween(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, + ); +} diff --git a/lib/offline.dart b/lib/offline.dart index 7225e16..13d17e2 100644 --- a/lib/offline.dart +++ b/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 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 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, diff --git a/pubspec.lock b/pubspec.lock index 7e78bae..9b41ab4 100644 --- a/pubspec.lock +++ b/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: