add relative pp to the mini rankings and handle mobile support better for mini rankings

src/common/model/player/impl/scoresaber-player.ts

@@ -1,9 +1,13 @@
-import Player, {StatisticChange} from "../player";
+import Player, { StatisticChange } from "../player";
 import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-player-token";
-import {PlayerHistory} from "@/common/player/player-history";
-import {config} from "../../../../../config";
+import { PlayerHistory } from "@/common/player/player-history";
+import { config } from "../../../../../config";
 import ky from "ky";
-import {formatDateMinimal, getDaysAgoDate, getMidnightAlignedDate,} from "@/common/time-utils";
+import {
+  formatDateMinimal,
+  getDaysAgoDate,
+  getMidnightAlignedDate,
+} from "@/common/time-utils";
 
 /**
  * A ScoreSaber player.

src/components/loaders/database-loader.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import {createContext, useEffect, useState} from "react";
-import Database, {db} from "../../common/database/database";
+import { createContext, useEffect, useState } from "react";
+import Database, { db } from "../../common/database/database";
 import FullscreenLoader from "./fullscreen-loader";
 
 /**

src/components/player/player-data.tsx

@@ -29,6 +29,7 @@ export default function PlayerData({
   page,
 }: Props) {
   const isMobile = useIsMobile();
+  console.log("mobile", isMobile);
 
   let player = initalPlayerData;
   const { data, isLoading, isError } = useQuery({
@@ -60,7 +61,7 @@ export default function PlayerData({
         />
       </article>
       {!isMobile && (
-        <aside className="w-[550px] hidden 2xl:flex flex-col gap-2">
+        <aside className="w-[600px] hidden 2xl:flex flex-col gap-2">
           <Mini type="Global" player={player} />
           <Mini type="Country" player={player} />
         </aside>

src/components/ranking/mini.tsx

@@ -105,7 +105,7 @@ export default function Mini({ type, player }: MiniProps) {
         {icon}
         <p>{type} Ranking</p>
       </div>
-      <div className="flex flex-col">
+      <div className="flex flex-col text-sm">
         {isLoading && <p className="text-gray-400">Loading...</p>}
         {isError && <p className="text-red-500">Error</p>}
         {players?.map((playerRanking, index) => {
@@ -115,15 +115,16 @@ export default function Mini({ type, player }: MiniProps) {
             playerRanking.name.length > PLAYER_NAME_MAX_LENGTH
               ? playerRanking.name.substring(0, PLAYER_NAME_MAX_LENGTH) + "..."
               : playerRanking.name;
+          const ppDifference = playerRanking.pp - player.pp;
 
           return (
             <Link
               key={index}
               href={`/player/${playerRanking.id}`}
-              className="flex justify-between gap-2 bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-75 first:rounded-t last:rounded-b"
+              className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-75 first:rounded-t last:rounded-b"
             >
-              <div className="flex gap-2">
               <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
+              <div className="flex gap-1 items-center">
                 <Avatar className="w-6 h-6 pointer-events-none">
                   <AvatarImage
                     alt="Profile Picture"
@@ -138,7 +139,19 @@ export default function Mini({ type, player }: MiniProps) {
                   {playerName}
                 </p>
               </div>
-              <p className="text-pp">{formatPp(playerRanking.pp)}pp</p>
+              <div className="inline-flex min-w-[10.75em] gap-1 items-center">
+                <p className="text-pp text-right">
+                  {formatPp(playerRanking.pp)}pp
+                </p>
+                {playerRanking.id !== player.id && (
+                  <p
+                    className={`text-xs text-right ${ppDifference > 0 ? "text-green-400" : "text-red-400"}`}
+                  >
+                    {ppDifference > 0 ? "+" : ""}
+                    {formatPp(ppDifference)}
+                  </p>
+                )}
+              </div>
             </Link>
           );
         })}

src/hooks/use-is-mobile.ts

@@ -1,16 +1,19 @@
 import { useEffect, useState } from "react";
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(false);
+  const checkMobile = () => {
+    return window.innerWidth < 1536;
+  };
+  const [isMobile, setIsMobile] = useState(checkMobile());
 
   useEffect(() => {
     const handleResize = () => {
-      setIsMobile(window.innerWidth < 768);
+      setIsMobile(checkMobile());
     };
     window.addEventListener("resize", handleResize);
-    handleResize();
-
-    return () => window.removeEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
   }, []);
 
   return isMobile;