stuff

bun.lock

@@ -104,7 +104,6 @@
         "cross-env": "^7.0.3",
         "dexie": "^4.0.11",
         "dexie-react-hooks": "^1.1.7",
-        "framer-motion": "^12.4.2",
         "js-cookie": "^3.0.5",
         "lucide-react": "^0.475.0",
         "next": "^15.1.7",
@@ -1084,8 +1083,6 @@
 
     "forwarded-parse": ["forwarded-parse@2.1.2", "", {}, "sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw=="],
 
-    "framer-motion": ["framer-motion@12.4.2", "", { "dependencies": { "motion-dom": "^12.0.0", "motion-utils": "^12.0.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-pW307cQKjDqEuO1flEoIFf6TkuJRfKr+c7qsHAJhDo4368N/5U8/7WU8J+xhd9+gjmOgJfgp+46evxRRFM39dA=="],
-
     "fs.realpath": ["fs.realpath@1.0.0", "", {}, "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
@@ -1362,10 +1359,6 @@
 
     "mongoose": ["mongoose@8.10.0", "", { "dependencies": { "bson": "^6.10.1", "kareem": "2.6.3", "mongodb": "~6.13.0", "mpath": "0.9.0", "mquery": "5.0.0", "ms": "2.1.3", "sift": "17.1.3" } }, "sha512-nLhk3Qrv6q/HpD2k1O7kbBqsq+/kmKpdv5KJ+LLhQlII3e1p/SSLoLP6jMuSiU6+iLK7zFw4T1niAk3mA3QVug=="],
 
-    "motion-dom": ["motion-dom@12.0.0", "", { "dependencies": { "motion-utils": "^12.0.0" } }, "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg=="],
-
-    "motion-utils": ["motion-utils@12.0.0", "", {}, "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA=="],
-
     "mpath": ["mpath@0.9.0", "", {}, "sha512-ikJRQTk8hw5DEoFVxHG1Gn9T/xcjtdnOKIU1JTmGjZZlg9LST2mBLmcX3/ICIbgJydT2GOc15RnNy5mHmzfSew=="],
 
     "mquery": ["mquery@5.0.0", "", { "dependencies": { "debug": "4.x" } }, "sha512-iQMncpmEK8R8ncT8HJGsGc9Dsp8xcgYMVSbs5jgnm1lFHTZqMJTUWTDx1LBO8+mK3tPNZWFLBghQEIOULSTHZg=="],

projects/backend/src/service/scoresaber.service.ts

@@ -314,7 +314,7 @@ export default class ScoreSaberService {
     sort: string,
     search?: string
   ): Promise<PlayerScoresResponse<unknown, unknown> | undefined> {
-    return fetchWithCache(
+    return await fetchWithCache(
       CacheService.getCache(ServiceCache.PlayerScores),
       `player-scores:${playerId}-${page}-${sort}-${search}`,
       async () => {
@@ -328,7 +328,10 @@ export default class ScoreSaberService {
           search,
         });
         if (leaderboardScores == undefined) {
-          return undefined;
+          return {
+            scores: scores,
+            metadata: metadata,
+          };
         }
 
         metadata = new Metadata(

projects/website/package.json

@@ -42,7 +42,6 @@
     "cross-env": "^7.0.3",
     "dexie": "^4.0.11",
     "dexie-react-hooks": "^1.1.7",
-    "framer-motion": "^12.4.2",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.475.0",
     "next": "^15.1.7",

projects/website/src/app/(pages)/(ssr)/(pages)/page.tsx

@@ -1,7 +1,6 @@
 import DataCollection from "@/components/landing/data-collection";
 import Friends from "@/components/landing/friends";
 import HeroSection from "@/components/landing/hero";
-import RealtimeScores from "@/components/landing/realtime-scores";
 import SiteStats from "@/components/landing/site-stats";
 
 export default async function LandingPage() {
@@ -13,7 +12,6 @@ export default async function LandingPage() {
           <DataCollection />
           <Friends />
           <SiteStats />
-          <RealtimeScores />
         </div>
       </div>
     </main>

projects/website/src/app/(pages)/(ssr)/(pages)/player/[...slug]/page.tsx

@@ -39,21 +39,22 @@ type PlayerData = {
  * @returns the player data and scores
  */
 const getPlayerData = async (
-  { params }: Props,
+  { params, searchParams }: Props,
   type: DetailType = DetailType.FULL
 ): Promise<PlayerData> => {
   const { slug } = await params;
+  const { search } = await searchParams;
+
   const id = slug[0]; // The players id
   const sort: ScoreSort =
     (slug[1] as ScoreSort) || (await getCookieValue("lastScoreSort", ScoreSort.recent)); // The sorting method
   const page = parseInt(slug[2]) || 1; // The page number
-  const search = (slug[3] as string) || ""; // The search query
 
   const player = await ssrApi.getScoreSaberPlayer(id, { type: type });
   return {
     sort: sort,
     page: page,
-    search: search,
+    search: search || "",
     player: player,
   };
 };

projects/website/src/app/(pages)/(ssr)/(pages)/ranking/[[...slug]]/page.tsx

@@ -51,7 +51,7 @@ const getRankingData = async (
 };
 
 export async function generateMetadata(props: Props): Promise<Metadata> {
-  const { players, page, country } = await getRankingData(props);
+  const { players, country } = await getRankingData(props);
   if (players === undefined) {
     return {
       title: UNKNOWN_PAGE.title,

projects/website/src/components/home/friend-ranking.tsx

@@ -1,12 +1,10 @@
 "use client";
 
-import { staggerAnimation } from "@/common/animations";
 import useDatabase from "@/hooks/use-database";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { Page, Pagination } from "@ssr/common/pagination";
 import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
 import { useLiveQuery } from "dexie-react-hooks";
-import { motion, useAnimation } from "framer-motion";
 import { memo, useCallback, useEffect, useState } from "react";
 import Card from "../card";
 import PaginationComponent from "../input/pagination";
@@ -16,14 +14,11 @@ import { PlayerListItem } from "../player/player-list-item";
 const MemoizedPagination = memo(PaginationComponent);
 
 export function FriendRanking() {
+  const isMobile = useIsMobile();
   const database = useDatabase();
   const friends = useLiveQuery(async () => database.getFriends(true));
 
-  const isMobile = useIsMobile();
-  const controls = useAnimation();
-
   const [page, setPage] = useState(1);
-  const [previousPage, setPreviousPage] = useState(1);
   const [friendsPage, setFriendsPage] = useState<Page<ScoreSaberPlayer>>();
 
   const getFriendsPage = useCallback(async () => {
@@ -36,19 +31,9 @@ export function FriendRanking() {
     return pagination.getPage(page);
   }, [friends, page]);
 
-  // Handle score animation
-  const handleScoreAnimation = useCallback(async () => {
-    await controls.start(previousPage >= page ? "hiddenRight" : "hiddenLeft");
-    setFriendsPage(await getFriendsPage());
-    await controls.start("visible");
-  }, [controls, previousPage, page, getFriendsPage]);
-
-  // Trigger animation when data changes
   useEffect(() => {
-    if (friends) {
-      handleScoreAnimation();
-    }
-  }, [friends, handleScoreAnimation]);
+    getFriendsPage().then(setFriendsPage);
+  }, [getFriendsPage]);
 
   return (
     <Card className="h-fit flex flex-col gap-2">
@@ -68,26 +53,18 @@ export function FriendRanking() {
       {friendsPage && (
         <div className="flex flex-col gap-2">
           <>
-            <motion.div
-              initial="hidden"
-              animate={controls}
-              variants={staggerAnimation}
-              className="divide-y divide-border"
-            >
+            <div className="divide-y divide-border">
               {friendsPage.items.map((player, index) => (
                 <PlayerListItem key={index} player={player} />
               ))}
-            </motion.div>
+            </div>
 
             <MemoizedPagination
               mobilePagination={isMobile}
               page={page}
               totalItems={friendsPage.metadata.totalItems}
               itemsPerPage={friendsPage.metadata.itemsPerPage}
-              onPageChange={newPage => {
-                setPreviousPage(page);
-                setPage(newPage);
-              }}
+              onPageChange={newPage => setPage(newPage)}
             />
           </>
         </div>

projects/website/src/components/home/friend-scores.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { staggerAnimation } from "@/common/animations";
 import useDatabase from "@/hooks/use-database";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { ScoreSaberLeaderboard } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
@@ -10,7 +9,6 @@ import { PlayerScore } from "@ssr/common/score/player-score";
 import { ssrApi } from "@ssr/common/utils/ssr-api";
 import { useQuery } from "@tanstack/react-query";
 import { useLiveQuery } from "dexie-react-hooks";
-import { motion, useAnimation } from "framer-motion";
 import { useCallback, useEffect, useState } from "react";
 import Card from "../card";
 import Pagination from "../input/pagination";
@@ -21,33 +19,15 @@ export function FriendScores() {
   const isMobile = useIsMobile();
   const database = useDatabase();
   const friendIds = useLiveQuery(async () => database.getFriendIds(true));
-  const controls = useAnimation();
 
   const [page, setPage] = useState(1);
-  const [previousPage, setPreviousPage] = useState(1);
-  const [scoreData, setScoreData] =
-    useState<Page<PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>>>();
 
-  const { data, isLoading } = useQuery({
+  const { data: scoreData, isLoading } = useQuery({
     queryKey: ["friend-scores", friendIds, page],
     queryFn: async () => ssrApi.getFriendScores(friendIds!, page),
     enabled: friendIds !== undefined && friendIds.length > 0,
   });
 
-  // Handle score animation
-  const handleScoreAnimation = useCallback(async () => {
-    await controls.start(previousPage >= page ? "hiddenRight" : "hiddenLeft");
-    setScoreData(data);
-    await controls.start("visible");
-  }, [controls, previousPage, page, data]);
-
-  // Trigger animation when data changes
-  useEffect(() => {
-    if (data) {
-      handleScoreAnimation();
-    }
-  }, [data, handleScoreAnimation]);
-
   return (
     <Card className="h-fit flex flex-col gap-2">
       <div>
@@ -57,30 +37,23 @@ export function FriendScores() {
           based on cached data
         </p>
       </div>
-
       {/* Loading */}
       {isLoading && !scoreData && (
         <div className="flex w-full justify-center items-center">
           <LoadingIcon />
         </div>
       )}
-
-      {/* Scores */}
+      {/* Scores */}s
       {scoreData && (
         <div className="flex flex-col gap-2">
           <>
-            <motion.div
-              initial="hidden"
-              animate={controls}
-              variants={staggerAnimation}
-              className="divide-y divide-border"
-            >
+            <div className="divide-y divide-border">
               {scoreData.items.map((playerScore, index) => {
                 const score = playerScore.score;
                 const leaderboard = playerScore.leaderboard;
                 const beatSaverMap = playerScore.beatSaver;
                 return (
-                  <motion.div key={index} variants={staggerAnimation}>
+                  <div key={index}>
                     <Score
                       score={score}
                       leaderboard={leaderboard}
@@ -94,21 +67,18 @@ export function FriendScores() {
                         allowLeaderboardPreview: true,
                       }}
                     />
-                  </motion.div>
+                  </div>
                 );
               })}
-            </motion.div>
+            </div>
 
             <Pagination
               mobilePagination={isMobile}
               page={page}
               totalItems={scoreData.metadata.totalItems}
               itemsPerPage={scoreData.metadata.itemsPerPage}
               loadingPage={isLoading ? page : undefined}
-              onPageChange={newPage => {
-                setPreviousPage(page);
-                setPage(newPage);
-              }}
+              onPageChange={newPage => setPage(newPage)}
             />
           </>
         </div>

projects/website/src/components/landing/hero.tsx

@@ -6,22 +6,16 @@ import AnimatedShinyText from "@/components/ui/animated-shiny-text";
 import { BorderBeam } from "@/components/ui/border-beam";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { motion } from "framer-motion";
 import { ArrowRight, GithubIcon, UserSearch } from "lucide-react";
 import Link from "next/link";
 
 export default function HeroSection() {
   return (
     <div className="flex flex-col gap-2 text-center items-center select-none">
-      <motion.div
-        className="flex flex-col gap-2.5 text-center items-center"
-        initial={{ opacity: 0, y: -40 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5, ease: "easeOut" }}
-      >
+      <div className="flex flex-col gap-2.5 text-center items-center">
         <Alert />
         <Title />
-      </motion.div>
+      </div>
       <Buttons />
       <AppPreview />
       <Separator className="my-12 w-full" />
@@ -64,12 +58,7 @@ function Title() {
 function Buttons() {
   const { openSearch } = useSearch();
   return (
-    <motion.div
-      className="mt-4 flex flex-col xs:flex-row gap-2 xs:gap-4 items-center"
-      initial={{ opacity: 0, y: -20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ delay: 0.35, duration: 0.7, ease: "easeOut" }}
-    >
+    <div className="mt-4 flex flex-col xs:flex-row gap-2 xs:gap-4 items-center">
       <Button
         className="max-w-52 flex gap-2.5 bg-ssr hover:bg-ssr/85 text-white"
         onClick={openSearch}
@@ -79,25 +68,20 @@ function Buttons() {
       </Button>
 
       <DiscordButton />
-    </motion.div>
+    </div>
   );
 }
 
 function AppPreview() {
   return (
-    <motion.div
-      className="mx-5 my-20 relative max-w-[1190px] shadow-[0_3rem_20rem_-15px_rgba(15,15,15,0.6)] shadow-pp/50 rounded-2xl overflow-hidden"
-      initial={{ opacity: 0, y: -35 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ delay: 0.45, duration: 0.7, ease: "easeOut" }}
-    >
+    <div className="mx-5 my-20 relative max-w-[1190px] shadow-[0_3rem_20rem_-15px_rgba(15,15,15,0.6)] shadow-pp/50 rounded-2xl overflow-hidden">
       <BorderBeam colorFrom="#6773ff" colorTo="#4858ff" />
       <img
         className="w-full h-full border-4 border-pp/20 rounded-2xl"
         src="/assets/home/app-preview.png"
         alt="App Preview"
         draggable={false}
       />
-    </motion.div>
+    </div>
   );
 }