From 8b62f04c8bd75c5211174aaef04cc77326b7a2f2 Mon Sep 17 00:00:00 2001
From: Jannik Hollenbach <jannik@hollenbach.de>
Date: Sun, 15 Dec 2024 23:46:16 +0100
Subject: [PATCH] Readd score board animation using framer motion directly

---
 balancer/ui/package-lock.json           | 95 +++++++++++++++++++++++++
 balancer/ui/package.json                |  1 +
 balancer/ui/src/pages/ScoreOverview.tsx | 76 +++++++++++---------
 3 files changed, 140 insertions(+), 32 deletions(-)

diff --git a/balancer/ui/package-lock.json b/balancer/ui/package-lock.json
index 0047eda3..e36dd512 100644
--- a/balancer/ui/package-lock.json
+++ b/balancer/ui/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "license": "Apache-2.0",
       "dependencies": {
+        "motion": "^11.14.4",
         "promise-retry": "^2.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -2374,6 +2375,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.14.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.14.4.tgz",
+      "integrity": "sha512-NQuzr9JbeJDMQmy0FFLhLzk9h1kAjVC1tGE/HY4ubF02B95EBm2lpA21LE3Od/OpXqXgp0zl5Hdqu25hliBRsA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.14.3",
+        "motion-utils": "^11.14.3",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2875,6 +2903,44 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion": {
+      "version": "11.14.4",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.14.4.tgz",
+      "integrity": "sha512-ZIaw6ko88B8rSmBEFzqbTCQMbo9xMu8f4PSXSGdb9DTDy8R0sXcbwMEKmTEYkrj9TmZ4n+Ebd0KYjtqHgzRkRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^11.14.4",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
+      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==",
+      "license": "MIT"
+    },
+    "node_modules/motion-utils": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
+      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -6997,6 +7063,16 @@
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
       "dev": true
     },
+    "framer-motion": {
+      "version": "11.14.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.14.4.tgz",
+      "integrity": "sha512-NQuzr9JbeJDMQmy0FFLhLzk9h1kAjVC1tGE/HY4ubF02B95EBm2lpA21LE3Od/OpXqXgp0zl5Hdqu25hliBRsA==",
+      "requires": {
+        "motion-dom": "^11.14.3",
+        "motion-utils": "^11.14.3",
+        "tslib": "^2.4.0"
+      }
+    },
     "fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -7327,6 +7403,25 @@
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="
     },
+    "motion": {
+      "version": "11.14.4",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.14.4.tgz",
+      "integrity": "sha512-ZIaw6ko88B8rSmBEFzqbTCQMbo9xMu8f4PSXSGdb9DTDy8R0sXcbwMEKmTEYkrj9TmZ4n+Ebd0KYjtqHgzRkRQ==",
+      "requires": {
+        "framer-motion": "^11.14.4",
+        "tslib": "^2.4.0"
+      }
+    },
+    "motion-dom": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
+      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA=="
+    },
+    "motion-utils": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
+      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ=="
+    },
     "ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/balancer/ui/package.json b/balancer/ui/package.json
index 54081939..f2f810c5 100644
--- a/balancer/ui/package.json
+++ b/balancer/ui/package.json
@@ -4,6 +4,7 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
+    "motion": "^11.14.4",
     "promise-retry": "^2.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/balancer/ui/src/pages/ScoreOverview.tsx b/balancer/ui/src/pages/ScoreOverview.tsx
index 9fb46a32..9ec5d81b 100644
--- a/balancer/ui/src/pages/ScoreOverview.tsx
+++ b/balancer/ui/src/pages/ScoreOverview.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { PositionDisplay } from "../components/PositionDisplay";
 import { FormattedMessage } from "react-intl";
+import { motion, domMax, LazyMotion, LayoutGroup } from "motion/react";
 
 interface Team {
   name: string;
@@ -94,42 +95,53 @@ export default function ScoreOverviewPage({
             </tr>
           </thead>
           <tbody className="w-full dark:bg-gray-800 bg-gray-100">
-            {teams.map((team) => {
-              return (
-                <tr className="border-t border-gray-600" key={team.name}>
-                  <td className="text-center p-2 px-3">
-                    <PositionDisplay place={team.position} />
-                  </td>
-                  <td className="p-2 px-4">
-                    <Link to={`/score-overview/teams/${team.name}`}>
-                      {team.name === activeTeam ? (
-                        <strong>{team.name}</strong>
-                      ) : (
-                        team.name
-                      )}
-                    </Link>
-                  </td>
-                  <td className="text-right text-s p-2 px-4">
-                    <FormattedMessage
-                      id="score_display"
-                      defaultMessage="{score} points"
-                      values={{
-                        score: team.score,
-                      }}
-                    />
-                    <p className="text-gray-500 m-1">
+            <LayoutGroup>
+              <LazyMotion features={domMax}>
+                {teams.map((team) => (
+                  <motion.tr
+                    key={team.name}
+                    layout
+                    transition={{
+                      type: "tween",
+                      duration: 0.3,
+                      ease: "easeInOut",
+                    }}
+                    className="border-t border-gray-600"
+                  >
+                    <td className="text-center p-2 px-3">
+                      <PositionDisplay place={team.position} />
+                    </td>
+                    <td className="p-2 px-4">
+                      <Link to={`/score-overview/teams/${team.name}`}>
+                        {team.name === activeTeam ? (
+                          <strong>{team.name}</strong>
+                        ) : (
+                          team.name
+                        )}
+                      </Link>
+                    </td>
+                    <td className="text-right text-s p-2 px-4">
                       <FormattedMessage
-                        id="solved_challenges_display"
-                        defaultMessage="{solved_challenge_count} solved challenges"
+                        id="score_display"
+                        defaultMessage="{score} points"
                         values={{
-                          solved_challenge_count: team.solvedChallengeCount,
+                          score: team.score,
                         }}
                       />
-                    </p>
-                  </td>
-                </tr>
-              );
-            })}
+                      <p className="text-gray-500 m-1">
+                        <FormattedMessage
+                          id="solved_challenges_display"
+                          defaultMessage="{solved_challenge_count} solved challenges"
+                          values={{
+                            solved_challenge_count: team.solvedChallengeCount,
+                          }}
+                        />
+                      </p>
+                    </td>
+                  </motion.tr>
+                ))}
+              </LazyMotion>
+            </LayoutGroup>
           </tbody>
         </table>
       </div>