allow for negative pp change

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

@@ -24,9 +24,9 @@ export default interface ScoreSaberPlayer extends Player {
   pp: number;
 
   /**
-   * The amount of pp gained compared to yesterday.
+   * The change in pp compared to yesterday.
    */
-  ppGain: number;
+  ppChange: number;
 
   /**
    * The role the player has.
@@ -127,9 +127,12 @@ export async function getScoreSaberPlayerFromToken(
   const yesterdayDate = formatDateMinimal(
     getMidnightAlignedDate(getDaysAgoDate(1)),
   );
-  const ppGain =
+  const todayStats = statisticHistory[todayDate];
-    (statisticHistory[yesterdayDate]?.pp || 0) -
+  const yesterdayStats = statisticHistory[yesterdayDate];
-    (statisticHistory[todayDate]?.pp || 0);
+
+  // Calculate the pp change
+  const ppChange =
+    todayStats.pp && todayStats.pp ? todayStats.pp - (todayStats.pp + 10) : 0;
 
   return {
     id: token.id,
@@ -141,7 +144,7 @@ export async function getScoreSaberPlayerFromToken(
     joinedDate: new Date(token.firstSeen),
     bio: bio,
     pp: token.pp,
-    ppGain: ppGain < 0 ? 0 : ppGain,
+    ppChange: ppChange,
     role: role,
     badges: badges,
     statisticHistory: statisticHistory,

src/components/player/player-header.tsx

@@ -33,11 +33,14 @@ const playerData = [
       return (
         <div className="text-pp flex gap-1 items-center">
           <p>{formatPp(player.pp)}pp</p>
-          {player.ppGain > 0 && (
+          <Tooltip display={<p>The change in your pp compared to yesterday</p>}>
-            <Tooltip display={<p>The amount of PP you have gained today</p>}>
+            <p
-              <span className="text-green-400 text-sm">+{player.ppGain}pp</span>
+              className={`text-sm ${player.ppChange > 0 ? "text-green-400" : "text-red-400"}`}
-            </Tooltip>
+            >
-          )}
+              {player.ppChange > 0 ? "+" : ""}
+              {formatPp(player.ppChange)}pp
+            </p>
+          </Tooltip>
         </div>
       );
     },