Merge pull request #241 from casualWaist/218-improve-interactive-translator

improve ITStep Transitions

lib/pangea/choreographer/controllers/it_controller.dart

@@ -28,6 +28,7 @@ class ITController {
   String? sourceText;
   List<ITStep> completedITSteps = [];
   CurrentITStep? currentITStep;
+  CurrentITStep? nextITStep;
   GoldRouteTracker goldRouteTracker = GoldRouteTracker.defaultTracker;
   List<int> payLoadIds = [];
 
@@ -42,6 +43,7 @@ class ITController {
     sourceText = null;
     completedITSteps = [];
     currentITStep = null;
+    nextITStep = null;
     goldRouteTracker = GoldRouteTracker.defaultTracker;
     payLoadIds = [];
 
@@ -130,6 +132,7 @@ class ITController {
         );
       }
 
+      if (nextITStep == null) {
         currentITStep = null;
 
         final ITResponseModel res = await _customInputTranslation(currentText);
@@ -156,10 +159,48 @@ class ITController {
         );
 
         _addPayloadId(res);
+      } else {
+        currentITStep = nextITStep;
+        nextITStep = null;
+      }
 
       if (isTranslationDone) {
         choreographer.altTranslator.setTranslationFeedback();
         choreographer.getLanguageHelp(true);
+      } else {
+        getNextTranslationData();
+      }
+    } catch (e, s) {
+      debugger(when: kDebugMode);
+      if (e is! http.Response) {
+        ErrorHandler.logError(e: e, s: s);
+      }
+      choreographer.errorService.setErrorAndLock(
+        ChoreoError(type: ChoreoErrorType.unknown, raw: e),
+      );
+    } finally {
+      choreographer.stopLoading();
+    }
+  }
+
+  Future<void>getNextTranslationData() async {
+    try {
+      if (completedITSteps.length < goldRouteTracker.continuances.length) {
+        final String currentText = choreographer.currentText;
+        final String nextText =
+            goldRouteTracker.continuances[completedITSteps.length].text;
+
+        final ITResponseModel res =
+            await _customInputTranslation(currentText + nextText);
+
+        nextITStep = CurrentITStep(
+          sourceText: sourceText!,
+          currentText: nextText,
+          responseModel: res,
+          storedGoldContinuances: goldRouteTracker.continuances,
+        );
+      } else {
+        nextITStep = null;
       }
     } catch (e, s) {
       debugger(when: kDebugMode);

lib/pangea/choreographer/widgets/choice_array.dart

@@ -1,9 +1,11 @@
 import 'dart:developer';
+import 'dart:math';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:matrix/matrix.dart';
 
 import '../../utils/bot_style.dart';
 import 'it_shimmer.dart';
@@ -56,10 +58,12 @@ class Choice {
   Choice({
     this.color,
     required this.text,
+    this.isGold = false,
   });
 
   final Color? color;
   final String text;
+  final bool isGold;
 }
 
 class ChoiceItem extends StatelessWidget {
@@ -86,6 +90,10 @@ class ChoiceItem extends StatelessWidget {
         waitDuration: onLongPress != null
             ? const Duration(milliseconds: 500)
             : const Duration(days: 1),
+        child: ChoiceAnimationWidget(
+          key: ValueKey(entry.value.text),
+          selected: entry.value.color != null,
+          isGold: entry.value.isGold,
           child: Container(
             margin: const EdgeInsets.all(2),
             padding: EdgeInsets.zero,
@@ -128,6 +136,7 @@ class ChoiceItem extends StatelessWidget {
               ),
             ),
           ),
+        ),
       );
     } catch (e) {
       debugger(when: kDebugMode);
@@ -135,3 +144,110 @@ class ChoiceItem extends StatelessWidget {
     }
   }
 }
+
+class ChoiceAnimationWidget extends StatefulWidget {
+  final Widget child;
+  final bool selected;
+  final bool isGold;
+
+  const ChoiceAnimationWidget({
+    super.key,
+    required this.child,
+    required this.selected,
+    this.isGold = false,
+  });
+
+  @override
+  ChoiceAnimationWidgetState createState() => ChoiceAnimationWidgetState();
+}
+
+class ChoiceAnimationWidgetState extends State<ChoiceAnimationWidget>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+  late final Animation<double> _animation;
+  bool animationPlayed = false;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      duration: const Duration(milliseconds: 300),
+      vsync: this,
+    );
+
+    _animation = widget.isGold
+      ? Tween<double>(begin: 1.0, end: 1.2).animate(_controller)
+      : TweenSequence<double>([
+        TweenSequenceItem<double>(
+          tween: Tween<double>(begin: 0, end: -8 * pi / 180),
+          weight: 1.0,
+        ),
+        TweenSequenceItem<double>(
+          tween: Tween<double>(begin: -8 * pi / 180, end: 16 * pi / 180),
+          weight: 2.0,
+        ),
+        TweenSequenceItem<double>(
+          tween: Tween<double>(begin: 16 * pi / 180, end: 0),
+          weight: 1.0,
+        ),
+      ]).animate(_controller);
+
+    if (widget.selected && !animationPlayed) {
+      _controller.forward();
+      animationPlayed = true;
+      setState(() {});
+    }
+    _controller.addStatusListener((status) {
+      if (status == AnimationStatus.completed) {
+        _controller.reverse();
+      } else if (status == AnimationStatus.dismissed) {
+        _controller.stop();
+        _controller.reset();
+      }
+    });
+  }
+
+  @override
+  void didUpdateWidget(ChoiceAnimationWidget oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.selected && !animationPlayed) {
+      _controller.forward();
+      animationPlayed = true;
+      setState(() {});
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return widget.isGold
+    ? AnimatedBuilder(
+      key: UniqueKey(),
+      animation: _animation,
+      builder: (context, child) {
+        return Transform.scale(
+          scale: _animation.value,
+          child: child,
+        );
+      },
+      child: widget.child,
+    )
+    : AnimatedBuilder(
+      key: UniqueKey(),
+      animation: _animation,
+      builder: (context, child) {
+        return Transform.rotate(
+          angle: _animation.value,
+          child: child,
+        );
+      },
+      child: widget.child,
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+}

lib/pangea/choreographer/widgets/it_bar.dart

@@ -280,7 +280,11 @@ class ITChoices extends StatelessWidget {
         originalSpan: "dummy",
         choices: controller.currentITStep!.continuances.map((e) {
           try {
-            return Choice(text: e.text.trim(), color: e.color);
+            return Choice(
+                text: e.text.trim(),
+                color: e.color,
+                isGold: e.description == "best",
+            );
           } catch (e) {
             debugger(when: kDebugMode);
             return Choice(text: "error", color: Colors.red);

lib/pangea/widgets/igc/span_card.dart

@@ -198,6 +198,7 @@ class WordMatchContent extends StatelessWidget {
                                   (e) => Choice(
                                     text: e.value,
                                     color: e.selected ? e.type.color : null,
+                                    isGold: e.type.name == 'bestCorrection',
                                   ),
                                 )
                                 .toList(),