From 6b456ef62f7996eb67521dfcf7d665b745e3484c Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Mon, 29 Aug 2022 01:34:56 +0200
Subject: [PATCH] animating the xp breakdown step by step

---
 frontend/src/ts/elements/account-button.ts | 193 +++++++++++++++++++--
 1 file changed, 179 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ts/elements/account-button.ts b/frontend/src/ts/elements/account-button.ts
index a3c5c41e2..67d0b0218 100644
--- a/frontend/src/ts/elements/account-button.ts
+++ b/frontend/src/ts/elements/account-button.ts
@@ -72,18 +72,191 @@ export async function update(
 export async function updateXpBar(
   currentXp: number,
   addedXp: number,
-  withDailyBonus: boolean
+  withDailyBonus: boolean,
+  breakdown: Record<string, number>
 ): Promise<void> {
   const startingLevel = Misc.getLevel(currentXp);
   const endingLevel = Misc.getLevel(currentXp + addedXp);
+  const xpBarPromise = animateXpBar(startingLevel, endingLevel);
+  const xpBreakdownPromise = animateXpBreakdown(
+    addedXp,
+    withDailyBonus,
+    breakdown
+  );
+
+  await Promise.all([xpBarPromise, xpBreakdownPromise]);
+  await Misc.sleep(2000);
+  $("#menu .level").text(Math.floor(Misc.getLevel(getSnapshot().xp)));
+  $("#menu .xpBar")
+    .stop(true, true)
+    .css("opacity", 1)
+    .animate({ opacity: 0 }, 250, () => {
+      $("#menu .xpBar .xpGain").text(``);
+    });
+}
+
+async function animateXpBreakdown(
+  addedXp: number,
+  withDailyBonus: boolean,
+  breakdown: Record<string, number>
+): Promise<void> {
+  //
+
+  console.log("animateXpBreakdown", addedXp, withDailyBonus, breakdown);
+  const delay = 1000;
+  let total = 0;
+  const xpGain = $("#menu .xpBar .xpGain");
+  const xpBreakdown = $("#menu .xpBar .xpBreakdown");
+  xpBreakdown.empty();
+
+  async function append(string: string): Promise<void> {
+    xpBreakdown.find(".next").removeClass("next").addClass("previous");
+    xpBreakdown.append(
+      `<div class='text next' style="opacity: 0; margin-top: 1rem;">${string}</div>`
+    );
+    const previous = xpBreakdown.find(".previous");
+    previous.animate(
+      {
+        marginTop: "-1rem",
+        opacity: 0,
+      },
+      250,
+      () => {
+        previous.remove();
+      }
+    );
+    setTimeout(() => {
+      xpGain
+        .stop(true, true)
+        .text(`+${total}`)
+        .css({
+          borderSpacing: 100,
+        })
+        .animate(
+          {
+            borderSpacing: 0,
+          },
+          {
+            step(step) {
+              xpGain.css(
+                "transform",
+                `scale(${1 + step / 200}) translateY(-50%)`
+              );
+            },
+            duration: 250,
+            easing: "swing",
+          }
+        );
+    }, 125);
+
+    await Misc.promiseAnimation(
+      xpBreakdown.find(".next"),
+      {
+        opacity: "1",
+        marginTop: "0",
+      },
+      250,
+      "swing"
+    );
+  }
+
+  // $("#menu .xpBar .xpGain").text(
+  //   `+${addedXp} ${withDailyBonus === true ? "daily bonus" : ""}`
+  // );
+
+  xpGain.text(`+0`);
+  xpBreakdown.append(
+    `<div class='text next'>time typing +${breakdown["base"]}</div>`
+  );
+  total += breakdown["base"];
+  if (breakdown["100%"]) {
+    await Misc.sleep(delay);
+    await append(`perfect +${breakdown["100%"]}`);
+    total += breakdown["100%"];
+  } else if (breakdown["corrected"]) {
+    await Misc.sleep(delay);
+    await append(`clean +${breakdown["corrected"]}`);
+    total += breakdown["corrected"];
+  }
+  if (breakdown["quote"]) {
+    await Misc.sleep(delay);
+    await append(`quote +${breakdown["quote"]}`);
+    total += breakdown["quote"];
+  } else if (breakdown["punctuation"]) {
+    await Misc.sleep(delay);
+    await append(`punctuation +${breakdown["punctuation"]}`);
+    total += breakdown["punctuation"];
+  } else if (breakdown["numbers"]) {
+    await Misc.sleep(delay);
+    await append(`numbers +${breakdown["numbers"]}`);
+    total += breakdown["numbers"];
+  }
+  if (breakdown["accPenalty"]) {
+    await Misc.sleep(delay);
+    await append(`accuracy penalty -${breakdown["accPenalty"]}`);
+    total -= breakdown["accPenalty"];
+  }
+  if (breakdown["incomplete"]) {
+    await Misc.sleep(delay);
+    await append(`incomplete tests +${breakdown["incomplete"]}`);
+    total += breakdown["incomplete"];
+  }
+  if (breakdown["configMultiplier"]) {
+    await Misc.sleep(delay);
+    await append(`global multiplier x${breakdown["configMultiplier"]}`);
+    total += breakdown["configMultiplier"];
+  }
+  if (breakdown["daily"]) {
+    await Misc.sleep(delay);
+    await append(`daily bonus +${breakdown["daily"]}`);
+    total += breakdown["daily"];
+  }
+  await Misc.sleep(delay);
+  await append("");
+  // setTimeout(() => {
+  //   xpGain
+  //     .stop(true, true)
+  //     .text(`+${total}`)
+  //     .css({
+  //       borderSpacing: 100,
+  //     })
+  //     .animate(
+  //       {
+  //         borderSpacing: 0,
+  //       },
+  //       {
+  //         step(step) {
+  //           xpGain.css(
+  //             "transform",
+  //             `scale(${1 + step / 200}) translateY(-50%)`
+  //           );
+  //         },
+  //         duration: 250,
+  //         easing: "swing",
+  //       }
+  //     );
+  // }, 125);
+  // await Misc.promiseAnimation(
+  //   xpBreakdown.find(".next"),
+  //   {
+  //     opacity: "0",
+  //     marginTop: "-1rem",
+  //   },
+  //   250,
+  //   "swing"
+  // );
+  return;
+  //base (100% corrected) (quote punctuation numbers) accPenalty incomplete configMultiplier daily
+}
+
+async function animateXpBar(
+  startingLevel: number,
+  endingLevel: number
+): Promise<void> {
   const difference = endingLevel - startingLevel;
 
   $("#menu .xpBar").stop(true, true).css("opacity", 0);
 
-  $("#menu .xpBar .xpGain").text(
-    `+${addedXp} ${withDailyBonus === true ? "daily bonus" : ""}`
-  );
-
   await Misc.promiseAnimation(
     $("#menu .xpBar"),
     {
@@ -166,15 +339,7 @@ export async function updateXpBar(
       "easeOutExpo"
     );
   }
-  setTimeout(() => {
-    $("#menu .level").text(Math.floor(Misc.getLevel(getSnapshot().xp)));
-    $("#menu .xpBar")
-      .stop(true, true)
-      .css("opacity", 1)
-      .animate({ opacity: 0 }, 250, () => {
-        $("#menu .xpBar .xpGain").text(``);
-      });
-  }, 3000);
+  return;
 }
 
 async function flashLevel(): Promise<void> {