From 58468bde2ff1ea9aa1769d0bbd473f9b589863e6 Mon Sep 17 00:00:00 2001 From: Jorge Coca Date: Tue, 3 May 2022 10:42:24 -0500 Subject: [PATCH] feat: improve UI of the initial loading screen (#309) --- lib/assets_manager/assets_manager.dart | 2 + .../cubit/assets_manager_cubit.dart | 0 .../cubit/assets_manager_state.dart | 0 .../views/assets_loading_page.dart | 46 +++++++++++++ lib/assets_manager/views/views.dart | 1 + lib/game/game.dart | 1 - lib/game/view/pinball_game_page.dart | 35 +++------- lib/l10n/arb/app_en.arb | 8 +++ .../lib/src/theme/pinball_colors.dart | 5 ++ .../src/widgets/animated_ellipsis_text.dart | 61 +++++++++++++++++ .../lib/src/widgets/crt_background.dart | 23 +++++++ .../widgets/pinball_loading_indicator.dart | 66 +++++++++++++++++++ .../pinball_ui/lib/src/widgets/widgets.dart | 3 + .../test/src/theme/pinball_colors_test.dart | 20 ++++++ .../widgets/animated_ellipsis_text_test.dart | 30 +++++++++ .../test/src/widgets/crt_background_test.dart | 25 +++++++ .../pinball_loading_indicator_test.dart | 45 +++++++++++++ .../cubit/assets_manager_cubit_test.dart | 2 +- .../cubit/assets_manager_state_test.dart | 2 +- .../views/assets_loading_page_test.dart | 38 +++++++++++ test/game/view/pinball_game_page_test.dart | 11 +--- test/helpers/pump_app.dart | 1 + 22 files changed, 387 insertions(+), 38 deletions(-) create mode 100644 lib/assets_manager/assets_manager.dart rename lib/{game => }/assets_manager/cubit/assets_manager_cubit.dart (100%) rename lib/{game => }/assets_manager/cubit/assets_manager_state.dart (100%) create mode 100644 lib/assets_manager/views/assets_loading_page.dart create mode 100644 lib/assets_manager/views/views.dart create mode 100644 packages/pinball_ui/lib/src/widgets/animated_ellipsis_text.dart create mode 100644 packages/pinball_ui/lib/src/widgets/crt_background.dart create mode 100644 packages/pinball_ui/lib/src/widgets/pinball_loading_indicator.dart create mode 100644 packages/pinball_ui/test/src/widgets/animated_ellipsis_text_test.dart create mode 100644 packages/pinball_ui/test/src/widgets/crt_background_test.dart create mode 100644 packages/pinball_ui/test/src/widgets/pinball_loading_indicator_test.dart rename test/{game => }/assets_manager/cubit/assets_manager_cubit_test.dart (93%) rename test/{game => }/assets_manager/cubit/assets_manager_state_test.dart (98%) create mode 100644 test/assets_manager/views/assets_loading_page_test.dart diff --git a/lib/assets_manager/assets_manager.dart b/lib/assets_manager/assets_manager.dart new file mode 100644 index 00000000..438b75d1 --- /dev/null +++ b/lib/assets_manager/assets_manager.dart @@ -0,0 +1,2 @@ +export 'cubit/assets_manager_cubit.dart'; +export 'views/views.dart'; diff --git a/lib/game/assets_manager/cubit/assets_manager_cubit.dart b/lib/assets_manager/cubit/assets_manager_cubit.dart similarity index 100% rename from lib/game/assets_manager/cubit/assets_manager_cubit.dart rename to lib/assets_manager/cubit/assets_manager_cubit.dart diff --git a/lib/game/assets_manager/cubit/assets_manager_state.dart b/lib/assets_manager/cubit/assets_manager_state.dart similarity index 100% rename from lib/game/assets_manager/cubit/assets_manager_state.dart rename to lib/assets_manager/cubit/assets_manager_state.dart diff --git a/lib/assets_manager/views/assets_loading_page.dart b/lib/assets_manager/views/assets_loading_page.dart new file mode 100644 index 00000000..ddb76803 --- /dev/null +++ b/lib/assets_manager/views/assets_loading_page.dart @@ -0,0 +1,46 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:pinball/assets_manager/assets_manager.dart'; +import 'package:pinball/l10n/l10n.dart'; +import 'package:pinball_ui/pinball_ui.dart'; + +/// {@template assets_loading_page} +/// Widget used to indicate the loading progress of the different assets used +/// in the game +/// {@endtemplate} +class AssetsLoadingPage extends StatelessWidget { + /// {@macro assets_loading_page} + const AssetsLoadingPage({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final l10n = context.l10n; + final headline1 = Theme.of(context).textTheme.headline1; + return Center( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + l10n.ioPinball, + style: headline1!.copyWith(fontSize: 80), + textAlign: TextAlign.center, + ), + const SizedBox(height: 40), + AnimatedEllipsisText( + l10n.loading, + style: headline1, + ), + const SizedBox(height: 40), + FractionallySizedBox( + widthFactor: 0.8, + child: BlocBuilder( + builder: (context, state) { + return PinballLoadingIndicator(value: state.progress); + }, + ), + ), + ], + ), + ); + } +} diff --git a/lib/assets_manager/views/views.dart b/lib/assets_manager/views/views.dart new file mode 100644 index 00000000..8c60627f --- /dev/null +++ b/lib/assets_manager/views/views.dart @@ -0,0 +1 @@ +export 'assets_loading_page.dart'; diff --git a/lib/game/game.dart b/lib/game/game.dart index 7de964eb..ad02533d 100644 --- a/lib/game/game.dart +++ b/lib/game/game.dart @@ -1,4 +1,3 @@ -export 'assets_manager/cubit/assets_manager_cubit.dart'; export 'bloc/game_bloc.dart'; export 'components/components.dart'; export 'game_assets.dart'; diff --git a/lib/game/view/pinball_game_page.dart b/lib/game/view/pinball_game_page.dart index 9ac25cfe..4557c243 100644 --- a/lib/game/view/pinball_game_page.dart +++ b/lib/game/view/pinball_game_page.dart @@ -4,10 +4,12 @@ import 'package:flame/game.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:pinball/assets_manager/assets_manager.dart'; import 'package:pinball/game/game.dart'; import 'package:pinball/select_character/select_character.dart'; import 'package:pinball/start_game/start_game.dart'; import 'package:pinball_audio/pinball_audio.dart'; +import 'package:pinball_ui/pinball_ui.dart'; class PinballGamePage extends StatelessWidget { const PinballGamePage({ @@ -71,32 +73,13 @@ class PinballGameView extends StatelessWidget { final isLoading = context.select( (AssetsManagerCubit bloc) => bloc.state.progress != 1, ); - - return Scaffold( - backgroundColor: Colors.blue, - body: isLoading - ? const _PinballGameLoadingView() - : PinballGameLoadedView(game: game), - ); - } -} - -class _PinballGameLoadingView extends StatelessWidget { - const _PinballGameLoadingView({Key? key}) : super(key: key); - - @override - Widget build(BuildContext context) { - final loadingProgress = context.select( - (AssetsManagerCubit bloc) => bloc.state.progress, - ); - - return Padding( - padding: const EdgeInsets.all(24), - child: Center( - child: LinearProgressIndicator( - color: Colors.white, - value: loadingProgress, - ), + return Container( + decoration: const CrtBackground(), + child: Scaffold( + backgroundColor: PinballColors.transparent, + body: isLoading + ? const AssetsLoadingPage() + : PinballGameLoadedView(game: game), ), ); } diff --git a/lib/l10n/arb/app_en.arb b/lib/l10n/arb/app_en.arb index 162b0d19..5566066f 100644 --- a/lib/l10n/arb/app_en.arb +++ b/lib/l10n/arb/app_en.arb @@ -123,5 +123,13 @@ "footerGoogleIOText": "Google I/O", "@footerGoogleIOText": { "description": "Text shown on the footer which mentions Google I/O" + }, + "loading": "Loading", + "@loading": { + "description": "Text shown to indicate loading times" + }, + "ioPinball": "I/O Pinball", + "@ioPinball": { + "description": "I/O Pinball - Name of the game" } } diff --git a/packages/pinball_ui/lib/src/theme/pinball_colors.dart b/packages/pinball_ui/lib/src/theme/pinball_colors.dart index 5db27229..df1ddce6 100644 --- a/packages/pinball_ui/lib/src/theme/pinball_colors.dart +++ b/packages/pinball_ui/lib/src/theme/pinball_colors.dart @@ -8,4 +8,9 @@ abstract class PinballColors { static const Color orange = Color(0xFFE5AB05); static const Color blue = Color(0xFF4B94F6); static const Color transparent = Color(0x00000000); + static const Color loadingDarkRed = Color(0xFFE33B2D); + static const Color loadingLightRed = Color(0xFFEC5E2B); + static const Color loadingDarkBlue = Color(0xFF4087F8); + static const Color loadingLightBlue = Color(0xFF6CCAE4); + static const Color crtBackground = Color(0xFF274E54); } diff --git a/packages/pinball_ui/lib/src/widgets/animated_ellipsis_text.dart b/packages/pinball_ui/lib/src/widgets/animated_ellipsis_text.dart new file mode 100644 index 00000000..9b52d604 --- /dev/null +++ b/packages/pinball_ui/lib/src/widgets/animated_ellipsis_text.dart @@ -0,0 +1,61 @@ +import 'dart:async'; + +import 'package:flutter/material.dart'; + +/// {@tempalte animated_ellipsis_text} +/// Every 500 milliseconds, it will add a new `.` at the end of the given +/// [text]. Once 3 `.` have been added (e.g. `Loading...`), it will reset to +/// zero ellipsis and start over again. +/// {@endtemplate} +class AnimatedEllipsisText extends StatefulWidget { + /// {@macro animated_ellipsis_text} + const AnimatedEllipsisText( + this.text, { + Key? key, + this.style, + }) : super(key: key); + + /// The text that will be animated. + final String text; + + /// Optional [TextStyle] of the given [text]. + final TextStyle? style; + + @override + State createState() => _AnimatedEllipsisText(); +} + +class _AnimatedEllipsisText extends State + with SingleTickerProviderStateMixin { + late final Timer timer; + var _numberOfEllipsis = 0; + + @override + void initState() { + super.initState(); + timer = Timer.periodic(const Duration(milliseconds: 500), (_) { + setState(() { + _numberOfEllipsis++; + _numberOfEllipsis = _numberOfEllipsis % 4; + }); + }); + } + + @override + void dispose() { + if (timer.isActive) timer.cancel(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Text( + '${widget.text}${_numberOfEllipsis.toEllipsis()}', + style: widget.style, + ); + } +} + +extension on int { + String toEllipsis() => '.' * this; +} diff --git a/packages/pinball_ui/lib/src/widgets/crt_background.dart b/packages/pinball_ui/lib/src/widgets/crt_background.dart new file mode 100644 index 00000000..202af1d3 --- /dev/null +++ b/packages/pinball_ui/lib/src/widgets/crt_background.dart @@ -0,0 +1,23 @@ +import 'package:flutter/material.dart'; +import 'package:pinball_ui/pinball_ui.dart'; + +/// {@template crt_background} +/// [BoxDecoration] that provides a CRT-like background efffect. +/// {@endtemplate} +class CrtBackground extends BoxDecoration { + /// {@macro crt_background} + const CrtBackground() + : super( + gradient: const LinearGradient( + begin: Alignment(1, 0.015), + stops: [0.0, 0.5, 0.5, 1], + colors: [ + PinballColors.darkBlue, + PinballColors.darkBlue, + PinballColors.crtBackground, + PinballColors.crtBackground, + ], + tileMode: TileMode.repeated, + ), + ); +} diff --git a/packages/pinball_ui/lib/src/widgets/pinball_loading_indicator.dart b/packages/pinball_ui/lib/src/widgets/pinball_loading_indicator.dart new file mode 100644 index 00000000..ac9b4f46 --- /dev/null +++ b/packages/pinball_ui/lib/src/widgets/pinball_loading_indicator.dart @@ -0,0 +1,66 @@ +import 'package:flutter/material.dart'; +import 'package:pinball_ui/pinball_ui.dart'; + +/// {@template pinball_loading_indicator} +/// Pixel-art loading indicator +/// {@endtemplate} +class PinballLoadingIndicator extends StatelessWidget { + /// {@macro pinball_loading_indicator} + const PinballLoadingIndicator({ + Key? key, + required this.value, + }) : assert( + value >= 0.0 && value <= 1.0, + 'Progress must be between 0 and 1', + ), + super(key: key); + + /// Progress value + final double value; + + @override + Widget build(BuildContext context) { + return Column( + children: [ + _InnerIndicator(value: value, widthFactor: 0.95), + _InnerIndicator(value: value, widthFactor: 0.98), + _InnerIndicator(value: value), + _InnerIndicator(value: value), + _InnerIndicator(value: value, widthFactor: 0.98), + _InnerIndicator(value: value, widthFactor: 0.95) + ], + ); + } +} + +class _InnerIndicator extends StatelessWidget { + const _InnerIndicator({ + Key? key, + required this.value, + this.widthFactor = 1.0, + }) : super(key: key); + + final double value; + final double widthFactor; + + @override + Widget build(BuildContext context) { + return FractionallySizedBox( + widthFactor: widthFactor, + child: Column( + children: [ + LinearProgressIndicator( + backgroundColor: PinballColors.loadingDarkBlue, + color: PinballColors.loadingDarkRed, + value: value, + ), + LinearProgressIndicator( + backgroundColor: PinballColors.loadingLightBlue, + color: PinballColors.loadingLightRed, + value: value, + ), + ], + ), + ); + } +} diff --git a/packages/pinball_ui/lib/src/widgets/widgets.dart b/packages/pinball_ui/lib/src/widgets/widgets.dart index 34d952b6..3aa96c3e 100644 --- a/packages/pinball_ui/lib/src/widgets/widgets.dart +++ b/packages/pinball_ui/lib/src/widgets/widgets.dart @@ -1 +1,4 @@ +export 'animated_ellipsis_text.dart'; +export 'crt_background.dart'; export 'pinball_button.dart'; +export 'pinball_loading_indicator.dart'; diff --git a/packages/pinball_ui/test/src/theme/pinball_colors_test.dart b/packages/pinball_ui/test/src/theme/pinball_colors_test.dart index 36e45c0d..3c54c60b 100644 --- a/packages/pinball_ui/test/src/theme/pinball_colors_test.dart +++ b/packages/pinball_ui/test/src/theme/pinball_colors_test.dart @@ -27,5 +27,25 @@ void main() { test('transparent is 0x00000000', () { expect(PinballColors.transparent, const Color(0x00000000)); }); + + test('loadingDarkRed is 0xFFE33B2D', () { + expect(PinballColors.loadingDarkRed, const Color(0xFFE33B2D)); + }); + + test('loadingLightRed is 0xFFEC5E2B', () { + expect(PinballColors.loadingLightRed, const Color(0xFFEC5E2B)); + }); + + test('loadingDarkBlue is 0xFF4087F8', () { + expect(PinballColors.loadingDarkBlue, const Color(0xFF4087F8)); + }); + + test('loadingLightBlue is 0xFF6CCAE4', () { + expect(PinballColors.loadingLightBlue, const Color(0xFF6CCAE4)); + }); + + test('crtBackground is 0xFF274E54', () { + expect(PinballColors.crtBackground, const Color(0xFF274E54)); + }); }); } diff --git a/packages/pinball_ui/test/src/widgets/animated_ellipsis_text_test.dart b/packages/pinball_ui/test/src/widgets/animated_ellipsis_text_test.dart new file mode 100644 index 00000000..3800cfed --- /dev/null +++ b/packages/pinball_ui/test/src/widgets/animated_ellipsis_text_test.dart @@ -0,0 +1,30 @@ +// ignore_for_file: prefer_const_constructors + +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:pinball_ui/pinball_ui.dart'; + +void main() { + group('AnimatedEllipsisText', () { + testWidgets( + 'adds a new `.` every 500ms and ' + 'resets back to zero after adding 3', (tester) async { + await tester.pumpWidget( + MaterialApp( + home: Scaffold( + body: AnimatedEllipsisText('test'), + ), + ), + ); + expect(find.text('test'), findsOneWidget); + await tester.pump(const Duration(milliseconds: 600)); + expect(find.text('test.'), findsOneWidget); + await tester.pump(const Duration(milliseconds: 600)); + expect(find.text('test..'), findsOneWidget); + await tester.pump(const Duration(milliseconds: 600)); + expect(find.text('test...'), findsOneWidget); + await tester.pump(const Duration(milliseconds: 600)); + expect(find.text('test'), findsOneWidget); + }); + }); +} diff --git a/packages/pinball_ui/test/src/widgets/crt_background_test.dart b/packages/pinball_ui/test/src/widgets/crt_background_test.dart new file mode 100644 index 00000000..65f27456 --- /dev/null +++ b/packages/pinball_ui/test/src/widgets/crt_background_test.dart @@ -0,0 +1,25 @@ +import 'package:flutter/widgets.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:pinball_ui/pinball_ui.dart'; + +void main() { + group('CrtBackground', () { + test('is a BoxDecoration with a LinearGradient', () { + // ignore: prefer_const_constructors + final crtBg = CrtBackground(); + const expectedGradient = LinearGradient( + begin: Alignment(1, 0.015), + stops: [0.0, 0.5, 0.5, 1], + colors: [ + PinballColors.darkBlue, + PinballColors.darkBlue, + PinballColors.crtBackground, + PinballColors.crtBackground, + ], + tileMode: TileMode.repeated, + ); + expect(crtBg, isA()); + expect(crtBg.gradient, expectedGradient); + }); + }); +} diff --git a/packages/pinball_ui/test/src/widgets/pinball_loading_indicator_test.dart b/packages/pinball_ui/test/src/widgets/pinball_loading_indicator_test.dart new file mode 100644 index 00000000..a2cc6d1a --- /dev/null +++ b/packages/pinball_ui/test/src/widgets/pinball_loading_indicator_test.dart @@ -0,0 +1,45 @@ +// ignore_for_file: prefer_const_constructors + +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:pinball_ui/pinball_ui.dart'; + +void main() { + group('PinballLoadingIndicator', () { + group('assert value', () { + test('throws error if value <= 0.0', () { + expect( + () => PinballLoadingIndicator(value: -0.5), + throwsA(isA()), + ); + }); + + test('throws error if value >= 1.0', () { + expect( + () => PinballLoadingIndicator(value: 1.5), + throwsA(isA()), + ); + }); + }); + + testWidgets( + 'renders 12 LinearProgressIndicators and ' + '6 FractionallySizedBox to indicate progress', (tester) async { + await tester.pumpWidget( + MaterialApp( + home: Scaffold( + body: PinballLoadingIndicator(value: 0.75), + ), + ), + ); + expect(find.byType(FractionallySizedBox), findsNWidgets(6)); + expect(find.byType(LinearProgressIndicator), findsNWidgets(12)); + final progressIndicators = tester.widgetList( + find.byType(LinearProgressIndicator), + ); + for (final i in progressIndicators) { + expect(i.value, 0.75); + } + }); + }); +} diff --git a/test/game/assets_manager/cubit/assets_manager_cubit_test.dart b/test/assets_manager/cubit/assets_manager_cubit_test.dart similarity index 93% rename from test/game/assets_manager/cubit/assets_manager_cubit_test.dart rename to test/assets_manager/cubit/assets_manager_cubit_test.dart index d0afee34..27d9cedb 100644 --- a/test/game/assets_manager/cubit/assets_manager_cubit_test.dart +++ b/test/assets_manager/cubit/assets_manager_cubit_test.dart @@ -2,7 +2,7 @@ import 'dart:async'; import 'package:bloc_test/bloc_test.dart'; import 'package:flutter_test/flutter_test.dart'; -import 'package:pinball/game/game.dart'; +import 'package:pinball/assets_manager/assets_manager.dart'; void main() { group('AssetsManagerCubit', () { diff --git a/test/game/assets_manager/cubit/assets_manager_state_test.dart b/test/assets_manager/cubit/assets_manager_state_test.dart similarity index 98% rename from test/game/assets_manager/cubit/assets_manager_state_test.dart rename to test/assets_manager/cubit/assets_manager_state_test.dart index 12a42485..4882f880 100644 --- a/test/game/assets_manager/cubit/assets_manager_state_test.dart +++ b/test/assets_manager/cubit/assets_manager_state_test.dart @@ -1,7 +1,7 @@ // ignore_for_file: prefer_const_constructors import 'package:flutter_test/flutter_test.dart'; -import 'package:pinball/game/game.dart'; +import 'package:pinball/assets_manager/assets_manager.dart'; void main() { group('AssetsManagerState', () { diff --git a/test/assets_manager/views/assets_loading_page_test.dart b/test/assets_manager/views/assets_loading_page_test.dart new file mode 100644 index 00000000..a6210e0c --- /dev/null +++ b/test/assets_manager/views/assets_loading_page_test.dart @@ -0,0 +1,38 @@ +import 'package:bloc_test/bloc_test.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:mocktail/mocktail.dart'; +import 'package:pinball/assets_manager/assets_manager.dart'; +import 'package:pinball_ui/pinball_ui.dart'; + +import '../../helpers/helpers.dart'; + +class _MockAssetsManagerCubit extends Mock implements AssetsManagerCubit {} + +void main() { + late AssetsManagerCubit assetsManagerCubit; + + setUp(() { + final initialAssetsState = AssetsManagerState( + loadables: [Future.value()], + loaded: const [], + ); + assetsManagerCubit = _MockAssetsManagerCubit(); + whenListen( + assetsManagerCubit, + Stream.value(initialAssetsState), + initialState: initialAssetsState, + ); + }); + + group('AssetsLoadingPage', () { + testWidgets('renders an animated text and a pinball loading indicator', + (tester) async { + await tester.pumpApp( + const AssetsLoadingPage(), + assetsManagerCubit: assetsManagerCubit, + ); + expect(find.byType(AnimatedEllipsisText), findsOneWidget); + expect(find.byType(PinballLoadingIndicator), findsOneWidget); + }); + }); +} diff --git a/test/game/view/pinball_game_page_test.dart b/test/game/view/pinball_game_page_test.dart index d3b32d85..0ed6e744 100644 --- a/test/game/view/pinball_game_page_test.dart +++ b/test/game/view/pinball_game_page_test.dart @@ -5,6 +5,7 @@ import 'package:flame/game.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:mocktail/mocktail.dart'; +import 'package:pinball/assets_manager/assets_manager.dart'; import 'package:pinball/game/game.dart'; import 'package:pinball/select_character/select_character.dart'; import 'package:pinball/start_game/start_game.dart'; @@ -66,7 +67,6 @@ void main() { Stream.value(initialAssetsState), initialState: initialAssetsState, ); - await tester.pumpApp( PinballGameView( game: game, @@ -74,14 +74,7 @@ void main() { assetsManagerCubit: assetsManagerCubit, characterThemeCubit: characterThemeCubit, ); - - expect( - find.byWidgetPredicate( - (widget) => - widget is LinearProgressIndicator && widget.value == 0.0, - ), - findsOneWidget, - ); + expect(find.byType(AssetsLoadingPage), findsOneWidget); }, ); diff --git a/test/helpers/pump_app.dart b/test/helpers/pump_app.dart index 7347989d..8c852f4e 100644 --- a/test/helpers/pump_app.dart +++ b/test/helpers/pump_app.dart @@ -12,6 +12,7 @@ import 'package:flutter_localizations/flutter_localizations.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:leaderboard_repository/leaderboard_repository.dart'; import 'package:mocktail/mocktail.dart'; +import 'package:pinball/assets_manager/assets_manager.dart'; import 'package:pinball/game/game.dart'; import 'package:pinball/l10n/l10n.dart'; import 'package:pinball/select_character/select_character.dart';