feat(points): apply worn effects on covers, details and backgrounds

src/App.jsx

@@ -29,6 +29,7 @@ import {Toaster} from '@/components/ui/sonner';
 import {TooltipProvider} from '@/components/ui/tooltip';
 import PageBackground from './components/PageBackground.jsx';
 import {usePreferences} from './context/PreferencesContext.jsx';
+import {backgroundEffect} from './utils/rewards.js';
 import {clearSession} from './utils/auth.js';
 import useSession from './hooks/useSession.js';
 import {UnsavedChangesGuard} from './hooks/useUnsavedChanges.js';
@@ -37,7 +38,7 @@ import {logout} from './utils/api.js';
 function App() {
     const {t} = useTranslation();
     const {active: isAuthenticated} = useSession();
-    const {appearance, syncPreferences} = usePreferences();
+    const {appearance, equipped, syncPreferences} = usePreferences();
 
     // Hooks for routing
     const navigate = useNavigate();
@@ -60,7 +61,9 @@ function App() {
             {/* isolate: the background layer sits behind the content but in front of this div's own background. */}
             <div className="isolate min-h-screen flex flex-col bg-background text-foreground font-sans">
                 {/* A public profile shows the owner's background instead. */}
-                {isAuthenticated && !location.pathname.startsWith('/u/') && <PageBackground appid={appearance.backgroundAppid}/>}
+                {isAuthenticated && !location.pathname.startsWith('/u/') && (
+                    <PageBackground appid={appearance.backgroundAppid} effect={backgroundEffect(equipped)}/>
+                )}
                 <AppHeader isAuthenticated={isAuthenticated} onLogout={handleLogout}/>
 
                 <main className="grow flex flex-col">