mirror of
https://github.com/Linloir/Flutter-Wordle.git
synced 2025-12-16 22:18:10 +08:00
Add instruction page
This commit is contained in:
parent
4f2db49d65
commit
87b8bdc38b
258
lib/instruction_pannel.dart
Normal file
258
lib/instruction_pannel.dart
Normal file
@ -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,
|
||||
);
|
||||
}
|
||||
@ -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,
|
||||
|
||||
44
pubspec.lock
44
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:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user