Fix word card resize on load and add points animation

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<NewWordOverlay>
   late final Animation<double> _fadeAnim;
   late final Animation<Alignment> _alignmentAnim;
   late final Animation<Offset> _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<NewWordOverlay>
     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<NewWordOverlay>
     );
     _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<NewWordOverlay>
       ),
     );
 
+    _controller.addListener(() {
+      if (!pointsBlast && _controller.value >= 0.6) {
+        setState(() {
+          pointsBlast = true;
+        });
+      }
+    });
+
     xpSeedWidget = Container(
       child: svg,
     );
@@ -84,15 +93,19 @@ class _NewWordOverlayState extends State<NewWordOverlay>
 
   @override
   Widget build(BuildContext context) {
-    if (!_showOverlay) return widget.child;
+    if (!widget.show) return widget.child;
     return Stack(
       children: [
         widget.child,
-        Positioned.fill(
+        Positioned(
-          child: FadeTransition(
+          left: 5,
+          right: 5,
+          top: 5,
+          bottom: 5,
+          child: Stack(
+            children: [
+              FadeTransition(
                 opacity: ReverseAnimation(_fadeAnim),
-            child: Padding(
-              padding: const EdgeInsets.all(8.0),
                 child: Container(
                   color: widget.overlayColor,
                   child: AnimatedBuilder(
@@ -105,7 +118,7 @@ class _NewWordOverlayState extends State<NewWordOverlay>
                           child: ScaleTransition(
                             scale: _xpScaleAnim,
                             child: Transform.scale(
-                            scale: 2 * (1 - _fadeAnim.value),
+                              scale: 2 * (.8 - _fadeAnim.value),
                               child: xpSeedWidget,
                             ),
                           ),
@@ -115,6 +128,16 @@ class _NewWordOverlayState extends State<NewWordOverlay>
                   ),
                 ),
               ),
+              pointsBlast
+                  ? const Align(
+                      alignment: Alignment.bottomCenter,
+                      child: PointsGainedAnimation(
+                        points: 10,
+                        targetID: "",
+                      ),
+                    )
+                  : const SizedBox.shrink(),
+            ],
           ),
         ),
       ],

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) {
+    // Only wrap in NewWordOverlay if wordIsNew is true
-      card = NewWordOverlay(
+    return NewWordOverlay(
-        show: true,
+      show: wordIsNew,
       overlayColor: overlayColor,
       child: card,
     );
   }
-    return card;
-  }
 }