diff --git a/lib/pangea/toolbar/widgets/word_zoom/new_word_overlay.dart b/lib/pangea/toolbar/widgets/word_zoom/new_word_overlay.dart index f0317405d..1127bfd41 100644 --- a/lib/pangea/toolbar/widgets/word_zoom/new_word_overlay.dart +++ b/lib/pangea/toolbar/widgets/word_zoom/new_word_overlay.dart @@ -1,3 +1,4 @@ +import 'package:fluffychat/pangea/analytics_misc/gain_points_animation.dart'; import 'package:fluffychat/pangea/constructs/construct_level_enum.dart'; import 'package:flutter/material.dart'; @@ -26,7 +27,7 @@ class _NewWordOverlayState extends State late final Animation _fadeAnim; late final Animation _alignmentAnim; late final Animation _offsetAnim; - final bool _showOverlay = true; + bool pointsBlast = false; Widget xpSeedWidget = const SizedBox(); Widget? get svg => ConstructLevelEnum.seeds.icon(); @override @@ -34,7 +35,7 @@ class _NewWordOverlayState extends State super.initState(); _controller = AnimationController( vsync: this, - duration: const Duration(milliseconds: 2500), + duration: const Duration(milliseconds: 2000), ); _xpScaleAnim = CurvedAnimation( @@ -43,7 +44,7 @@ class _NewWordOverlayState extends State ); _fadeAnim = CurvedAnimation( parent: _controller, - curve: const Interval(0.5, 1.0, curve: Curves.easeOut), + curve: const Interval(0.7, 1.0, curve: Curves.easeOut), ); _alignmentAnim = AlignmentTween( @@ -67,6 +68,14 @@ class _NewWordOverlayState extends State ), ); + _controller.addListener(() { + if (!pointsBlast && _controller.value >= 0.6) { + setState(() { + pointsBlast = true; + }); + } + }); + xpSeedWidget = Container( child: svg, ); @@ -84,37 +93,51 @@ class _NewWordOverlayState extends State @override Widget build(BuildContext context) { - if (!_showOverlay) return widget.child; + if (!widget.show) return widget.child; return Stack( children: [ widget.child, - Positioned.fill( - child: FadeTransition( - opacity: ReverseAnimation(_fadeAnim), - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Container( - color: widget.overlayColor, - child: AnimatedBuilder( - animation: _controller, - builder: (context, child) { - return Align( - alignment: _alignmentAnim.value, - child: FractionalTranslation( - translation: _offsetAnim.value, - child: ScaleTransition( - scale: _xpScaleAnim, - child: Transform.scale( - scale: 2 * (1 - _fadeAnim.value), - child: xpSeedWidget, + Positioned( + left: 5, + right: 5, + top: 5, + bottom: 5, + child: Stack( + children: [ + FadeTransition( + opacity: ReverseAnimation(_fadeAnim), + child: Container( + color: widget.overlayColor, + child: AnimatedBuilder( + animation: _controller, + builder: (context, child) { + return Align( + alignment: _alignmentAnim.value, + child: FractionalTranslation( + translation: _offsetAnim.value, + child: ScaleTransition( + scale: _xpScaleAnim, + child: Transform.scale( + scale: 2 * (.8 - _fadeAnim.value), + child: xpSeedWidget, + ), ), ), - ), - ); - }, + ); + }, + ), ), ), - ), + pointsBlast + ? const Align( + alignment: Alignment.bottomCenter, + child: PointsGainedAnimation( + points: 10, + targetID: "", + ), + ) + : const SizedBox.shrink(), + ], ), ), ], diff --git a/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart b/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart index da137881b..ad5957fed 100644 --- a/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart +++ b/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart @@ -43,9 +43,8 @@ class WordZoomWidget extends StatelessWidget { @override Widget build(BuildContext context) { - final isNewWord = wordIsNew; final overlayColor = Theme.of(context).scaffoldBackgroundColor; - Widget card = Container( + final Widget card = Container( padding: const EdgeInsets.all(12.0), constraints: const BoxConstraints( minHeight: AppConfig.toolbarMinHeight - 8, @@ -245,13 +244,11 @@ class WordZoomWidget extends StatelessWidget { ), ), ); - if (isNewWord) { - card = NewWordOverlay( - show: true, - overlayColor: overlayColor, - child: card, - ); - } - return card; + // Only wrap in NewWordOverlay if wordIsNew is true + return NewWordOverlay( + show: wordIsNew, + overlayColor: overlayColor, + child: card, + ); } }