impl pp gain

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

@@ -23,6 +23,11 @@ export default interface ScoreSaberPlayer extends Player {
    */
   pp: number;
 
+  /**
+   * The amount of pp gained compared to yesterday.
+   */
+  ppGain: number;
+
   /**
    * The role the player has.
    */
@@ -75,6 +80,7 @@ export async function getScoreSaberPlayerFromToken(
       };
     }) || [];
 
+  const todayDate = formatDateMinimal(getMidnightAlignedDate(new Date()));
   let statisticHistory: { [key: string]: PlayerHistory } = {};
   try {
     const history = await ky
@@ -88,7 +94,7 @@ export async function getScoreSaberPlayerFromToken(
     }
     if (history) {
       // Use the latest data for today
-      history[formatDateMinimal(getMidnightAlignedDate(new Date()))] = {
+      history[todayDate] = {
         rank: token.rank,
         countryRank: token.countryRank,
         pp: token.pp,
@@ -118,6 +124,12 @@ export async function getScoreSaberPlayerFromToken(
       .sort()
       .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});
   }
+  const yesterdayDate = formatDateMinimal(
+    getMidnightAlignedDate(getDaysAgoDate(1)),
+  );
+  const ppGain =
+    (statisticHistory[yesterdayDate]?.pp || 0) -
+    (statisticHistory[todayDate]?.pp || 0);
 
   return {
     id: token.id,
@@ -129,6 +141,7 @@ export async function getScoreSaberPlayerFromToken(
     joinedDate: new Date(token.firstSeen),
     bio: bio,
     pp: token.pp,
+    ppGain: ppGain < 0 ? 0 : ppGain,
     role: role,
     badges: badges,
     statisticHistory: statisticHistory,

src/components/player/player-header.tsx

@@ -6,6 +6,7 @@ import { Avatar, AvatarImage } from "../ui/avatar";
 import ClaimProfile from "./claim-profile";
 import PlayerStats from "./player-stats";
 import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import Tooltip from "@/components/tooltip";
 
 const playerData = [
   {
@@ -29,7 +30,16 @@ const playerData = [
   {
     showWhenInactiveOrBanned: true,
     render: (player: ScoreSaberPlayer) => {
-      return <p className="text-pp">{formatPp(player.pp)}pp</p>;
+      return (
+        <div className="text-pp flex gap-1 items-center">
+          <p>{formatPp(player.pp)}pp</p>
+          {player.ppGain > 0 && (
+            <Tooltip display={<p>The amount of PP you have gained today</p>}>
+              <span className="text-green-400 text-sm">+{player.ppGain}pp</span>
+            </Tooltip>
+          )}
+        </div>
+      );
     },
   },
 ];