Add a magic move animation when teams switch positions on the score o…

…verview
juice-shop · Nov 21, 2024 · e76825d · e76825d
1 parent b3d65e7
commit e76825d
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 26 deletions.
diff --git a/balancer/ui/package-lock.json b/balancer/ui/package-lock.json
diff --git a/balancer/ui/package.json b/balancer/ui/package.json
@@ -5,11 +5,12 @@
   "type": "module",
   "dependencies": {
     "promise-retry": "^2.0.1",
+    "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-intl": "^6.8.8",
+    "react-magic-motion": "^1.1.2",
     "react-router-dom": "^6.28.0",
-    "react": "^18.3.1",
     "reactjs-popup": "^2.0.6",
     "tailwindcss": "^3.4.15"
   },
@@ -47,4 +48,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/balancer/ui/src/pages/ScoreOverview.tsx b/balancer/ui/src/pages/ScoreOverview.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
+import { MagicMotion } from "react-magic-motion";
 
 function FirstPlace({ ...props }) {
   return <img src="/balancer/icons/first-place.svg" {...props} />;
@@ -92,30 +93,36 @@ export function ScoreOverviewPage({
             </tr>
           </thead>
           <tbody className="w-full dark:bg-gray-800">
-            {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 className="text-greay-800">{team.name}</strong>
-                      ) : (
-                        team.name
-                      )}
-                    </Link>
-                  </td>
-                  <td className="text-right text-s p-2 px-4">
-                    {team.score} points
-                    <p className="text-gray-500 m-1">
-                      {team.challenges.length} solved challenges
-                    </p>
-                  </td>
-                </tr>
-              );
-            })}
+            <MagicMotion>
+              <>
+                {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 className="text-gray-800">
+                              {team.name}
+                            </strong>
+                          ) : (
+                            team.name
+                          )}
+                        </Link>
+                      </td>
+                      <td className="text-right text-s p-2 px-4">
+                        {team.score} points
+                        <p className="text-gray-500 m-1">
+                          {team.challenges.length} solved challenges
+                        </p>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </>
+            </MagicMotion>
           </tbody>
         </table>
       </div>