From 09bf9fcac227c2341b96476c0669cf4b8bfab6cd Mon Sep 17 00:00:00 2001 From: avashilling <165050625+avashilling@users.noreply.github.com> Date: Thu, 5 Jun 2025 12:27:52 -0400 Subject: [PATCH] add grammar and vocab animations and user icon --- .../settings_chat/settings_chat_view.dart | 20 ++- lib/pangea/analytics_misc/level_up.dart | 119 +++++++++++++++--- 2 files changed, 117 insertions(+), 22 deletions(-) diff --git a/lib/pages/settings_chat/settings_chat_view.dart b/lib/pages/settings_chat/settings_chat_view.dart index fa165ecfd..74b163759 100644 --- a/lib/pages/settings_chat/settings_chat_view.dart +++ b/lib/pages/settings_chat/settings_chat_view.dart @@ -1,13 +1,14 @@ -import 'package:flutter/material.dart'; - -import 'package:flutter_gen/gen_l10n/l10n.dart'; - import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/config/setting_keys.dart'; import 'package:fluffychat/config/themes.dart'; import 'package:fluffychat/utils/platform_infos.dart'; import 'package:fluffychat/widgets/layouts/max_width_body.dart'; import 'package:fluffychat/widgets/settings_switch_list_tile.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_gen/gen_l10n/l10n.dart'; + +//import for testing level up +import '../../pangea/analytics_misc/level_up.dart'; import 'settings_chat.dart'; class SettingsChatView extends StatelessWidget { @@ -29,6 +30,17 @@ class SettingsChatView extends StatelessWidget { child: MaxWidthBody( child: Column( children: [ + ElevatedButton( + // Test button for leveling up + onPressed: () { + LevelUpUtil.showLevelUpDialog( + 5, + 4, + context, + ); + }, + child: const Text("Test Level Up Dialog"), + ), // #Pangea // SettingsSwitchListTile.adaptive( // title: L10n.of(context).formattedMessages, diff --git a/lib/pangea/analytics_misc/level_up.dart b/lib/pangea/analytics_misc/level_up.dart index 872e8f450..3368daac1 100644 --- a/lib/pangea/analytics_misc/level_up.dart +++ b/lib/pangea/analytics_misc/level_up.dart @@ -5,6 +5,7 @@ import 'package:cached_network_image/cached_network_image.dart'; import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/config/themes.dart'; import 'package:fluffychat/pangea/analytics_misc/analytics_constants.dart'; +import 'package:fluffychat/pangea/analytics_misc/gain_points_animation.dart'; import 'package:fluffychat/pangea/analytics_misc/learning_skills_enum.dart'; import 'package:fluffychat/pangea/analytics_summary/progress_bar/progress_bar.dart'; import 'package:fluffychat/pangea/analytics_summary/progress_bar/progress_bar_details.dart'; @@ -14,6 +15,7 @@ import 'package:fluffychat/pangea/constructs/construct_repo.dart'; import 'package:fluffychat/widgets/matrix.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; +import 'package:material_symbols_icons/symbols.dart'; class LevelUpConstants { static const String starFileName = "star.png"; @@ -550,7 +552,16 @@ class LevelUpBarAnimation extends StatefulWidget { class _LevelUpBarAnimationState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; - late Animation _animation; + late Animation _progressAnimation; + late Animation _newVocab; + late Animation _newGrammar; + + final int startGrammar = 23; + final int endGrammar = 78; + final int startVocab = 54; + final int endVocab = 64; + + //add vocab and grammar animation controllers, then display their values in the text fields below. Easy! @override void initState() { @@ -561,7 +572,15 @@ class _LevelUpBarAnimationState extends State vsync: this, ); - _animation = Tween(begin: 0, end: 1).animate( + _progressAnimation = Tween(begin: 0, end: 1).animate( + CurvedAnimation(parent: _controller, curve: Curves.easeInOut), + ); + + _newVocab = IntTween(begin: startVocab, end: endVocab).animate( + CurvedAnimation(parent: _controller, curve: Curves.easeOut), + ); + + _newGrammar = IntTween(begin: startGrammar, end: endGrammar).animate( CurvedAnimation(parent: _controller, curve: Curves.easeInOut), ); @@ -576,23 +595,87 @@ class _LevelUpBarAnimationState extends State @override Widget build(BuildContext context) { - return AnimatedBuilder( - animation: _animation, - builder: (context, _) { - return Padding( - padding: const EdgeInsets.all(24), - child: ProgressBar( - levelBars: [ - LevelBarDetails( - widthMultiplier: _animation.value, - currentPoints: 0, - fillColor: AppConfig.goldLight, + final Color grammarVocabColor = Theme.of(context).colorScheme.primary; + final TextStyle grammarVocabText = + TextStyle(color: grammarVocabColor, fontSize: 24); + const TextStyle titleText = + TextStyle(color: AppConfig.goldLight, fontSize: 20); + + return Stack( + alignment: AlignmentDirectional.center, + children: [ + Column( + children: [ + ClipOval( + child: Image.asset( + '../../../assets/favicon.png', + width: 150, // Adjust the size as needed + height: 150, + fit: BoxFit.cover, // Use BoxFit.cover to fill the circle ), - ], - height: 20, - ), - ); - }, + ), + const SizedBox( + height: 20, + ), + const Text( + //Language fix later + "You have reached a new level!", + style: titleText, + ), + AnimatedBuilder( + animation: _progressAnimation, + builder: (context, _) { + return Padding( + padding: const EdgeInsets.all(24), + child: Column( + children: [ + ProgressBar( + levelBars: [ + LevelBarDetails( + widthMultiplier: _progressAnimation.value, + currentPoints: 0, + fillColor: AppConfig.goldLight, + ), + ], + height: 20, + ), + const SizedBox(height: 45), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Symbols.dictionary, + color: grammarVocabColor, + size: 35, + ), + Text( + "${_newVocab.value}", + style: grammarVocabText, + ), + const SizedBox(width: 40), + Icon( + Symbols.toys_and_games, + color: grammarVocabColor, + size: 35, + ), + Text( + "${_newGrammar.value}", + style: grammarVocabText, + ), + ], + ), + ], + ), + ); + }, + ), + ], + ), + const PointsGainedAnimation( + points: 10, + targetID: "targetID?", + ), + ], ); } }