feat(xp): animate sidebar gains

src/app/(frontend)/flappy/actions.ts

@@ -4,6 +4,7 @@ import config from "@payload-config";
 import { getPayload } from "payload";
 import { emitGameEvent } from "@/utils/event-log/emit";
 import { EventTypes } from "@/utils/event-log/eventTypes";
+import { broadcastToUser } from "@/lib/realtime/bus";
 
 interface ActionResult<T = undefined> {
   success: boolean;
@@ -100,6 +101,11 @@ export async function submitFlappyScore(input: {
       overrideAccess: true,
       depth: 0,
     });
+    broadcastToUser("profile-update", Number(user.id), {
+      reason: "xp",
+      xpGained: runXp,
+      profileId: profile.id,
+    });
 
     if (passes > 0) {
       await emitGameEvent(payload, {

src/app/(frontend)/styles.css

@@ -298,6 +298,23 @@
     }
 }
 
+@keyframes xp-gain {
+  0% {
+    opacity: 0;
+    transform: translateX(0.35rem);
+  }
+  15% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-1.1rem);
+  }
+}
+
 .locker-search-highlight {
     animation: locker-search-pulse 1.1s ease-in-out infinite;
     box-shadow: 0 0 0 3px rgb(251 191 36 / 0.9);

src/components/frontend/blocks/XPDisplay.tsx

@@ -1,12 +1,42 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
 import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item";
 import { Progress } from "@/components/ui/progress";
 import { SparkleIcon } from "lucide-react";
 import type { ResolvedLevel } from "@/utils/xp/resolveLevel";
+import { PROFILE_UPDATE_EVENT, type ProfileUpdateDetail } from "@/hooks/useGameTick";
 
 const XPDisplay = ({ xpLevel }: { xpLevel: ResolvedLevel }) => {
   const { levelName, progress, xp, nextLevelXP } = xpLevel;
+  const [xpGain, setXpGain] = useState<number | null>(null);
+  const [xpGainId, setXpGainId] = useState(0);
+  const lastGainRef = useRef<{ amount: number; at: number } | null>(null);
+
+  useEffect(() => {
+    let clearTimer: ReturnType<typeof setTimeout> | null = null;
+
+    const handleProfileUpdate = (event: Event) => {
+      const detail = (event as CustomEvent<ProfileUpdateDetail>).detail;
+      if (!detail || typeof detail.xpGained !== "number" || detail.xpGained <= 0) return;
+      const now = Date.now();
+      if (lastGainRef.current?.amount === detail.xpGained && now - lastGainRef.current.at < 500) {
+        return;
+      }
+      lastGainRef.current = { amount: detail.xpGained, at: now };
+
+      setXpGain(detail.xpGained);
+      setXpGainId((id) => id + 1);
+      if (clearTimer) clearTimeout(clearTimer);
+      clearTimer = setTimeout(() => setXpGain(null), 1500);
+    };
+
+    window.addEventListener(PROFILE_UPDATE_EVENT, handleProfileUpdate);
+    return () => {
+      if (clearTimer) clearTimeout(clearTimer);
+      window.removeEventListener(PROFILE_UPDATE_EVENT, handleProfileUpdate);
+    };
+  }, []);
 
   return (
     <Item>
@@ -15,7 +45,18 @@ const XPDisplay = ({ xpLevel }: { xpLevel: ResolvedLevel }) => {
           <SparkleIcon />
           <div className="flex flex-col items-end">
             <span className="uppercase">{levelName}</span>
-            <span className="text-2xl font-bold uppercase">{xp.toLocaleString()}</span>
+            <span className="relative text-2xl font-bold uppercase flex flex-row items-center">
+              {xp.toLocaleString()}
+              {xpGain !== null && (
+                <span
+                  key={`${xpGain}-${xpGainId}`}
+                  className="pointer-events-none absolute right-full top-0 mr-2 whitespace-nowrap text-sm font-bold normal-case text-emerald-400 animate-[xp-gain_1.5s_ease-out_forwards]"
+                  aria-live="polite"
+                >
+                  +{xpGain.toLocaleString()} XP
+                </span>
+              )}
+            </span>
           </div>
         </ItemTitle>
       </ItemHeader>

src/components/frontend/flappy/FlappyBird.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
 
 import { type FlappyStats, submitFlappyScore } from "@/app/(frontend)/flappy/actions";
+import { PROFILE_UPDATE_EVENT } from "@/hooks/useGameTick";
 import { playFlap, playHit, playXp } from "./sounds";
 
 const CANVAS_W = 420;
@@ -330,6 +332,7 @@ export function FlappyBird({
   onGameRecorded?: () => void;
   onPhaseChange?: (phase: Phase) => void;
 }) {
+  const router = useRouter();
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const phaseRef = useRef<Phase>("ready");
@@ -399,6 +402,12 @@ export function FlappyBird({
         onGameRecorded?.();
         if (res.data.xpEarned > 0) {
           playXp();
+          window.dispatchEvent(
+            new CustomEvent(PROFILE_UPDATE_EVENT, {
+              detail: { reason: "xp", xpGained: res.data.xpEarned },
+            }),
+          );
+          window.setTimeout(() => router.refresh(), 1700);
         }
         setLastRun({
           score: finalScore,
@@ -414,7 +423,7 @@ export function FlappyBird({
         });
       }
     },
-    [onGameRecorded],
+    [onGameRecorded, router],
   );
 
   const handleGameOverRef = useRef(handleGameOver);