+ {a.icon || '★'}
+
+
+
+ {a.name}
+{a.description}
+ {done ? ( + + Unlocked {formatUnlockedAt(a.unlockedAt)} + + ) : ( + Locked + )} +
+
{item.imageUrl ? (
diff --git a/client/src/components/DropFeed.jsx b/client/src/components/DropFeed.jsx
index 44cc683..b4b3955 100644
--- a/client/src/components/DropFeed.jsx
+++ b/client/src/components/DropFeed.jsx
@@ -36,31 +36,57 @@ export default function DropFeed() {
useEffect(() => {
let cancelled = false;
-
- (async () => {
- try {
- const data = await api.feed();
- if (!cancelled) setDrops(pruneDrops(data.drops || []));
- } catch {
- /* ignore — socket history may fill */
- }
- })();
-
const socket = getSocket();
- const onHistory = (list) => {
- setDrops(pruneDrops(Array.isArray(list) ? list.slice(0, MAX_BUFFER) : []));
- };
- const onDrop = (entry) => {
- setDrops((prev) => pruneDrops([entry, ...prev].slice(0, MAX_BUFFER)));
+
+ const applyList = (list) => {
+ if (cancelled) return;
+ const seen = new Set();
+ const unique = [];
+ for (const d of list || []) {
+ if (!d?.id || seen.has(d.id)) continue;
+ seen.add(d.id);
+ unique.push(d);
+ }
+ setDrops(pruneDrops(unique.slice(0, MAX_BUFFER)));
};
+ const onHistory = (list) => applyList(list);
+ const onDrop = (entry) => {
+ if (!entry?.id) return;
+ setDrops((prev) => {
+ if (prev.some((d) => d.id === entry.id)) return prev;
+ // Also skip near-identical batch (same user + item + count) within a few seconds
+ const nearDup = prev.find(
+ (d) =>
+ d.username === entry.username &&
+ d.item?.id === entry.item?.id &&
+ (d.count || 1) === (entry.count || 1) &&
+ (d.openCount || 1) === (entry.openCount || 1) &&
+ Math.abs(new Date(d.at) - new Date(entry.at)) < 15000
+ );
+ if (nearDup) return prev;
+ return pruneDrops([entry, ...prev].slice(0, MAX_BUFFER));
+ });
+ };
+
+ // Prefer socket history; HTTP is fallback if socket is slow
socket.emit('feed:subscribe');
socket.on('feed:history', onHistory);
socket.on('feed:drop', onDrop);
socket.on('connect', () => socket.emit('feed:subscribe'));
+ const t = setTimeout(() => {
+ if (cancelled) return;
+ api.feed()
+ .then((data) => {
+ setDrops((prev) => (prev.length ? prev : pruneDrops(data.drops || [])));
+ })
+ .catch(() => {});
+ }, 400);
+
return () => {
cancelled = true;
+ clearTimeout(t);
socket.emit('feed:unsubscribe');
socket.off('feed:history', onHistory);
socket.off('feed:drop', onDrop);
@@ -100,7 +126,13 @@ export default function DropFeed() {
)}
-
diff --git a/client/src/components/ItemTile.jsx b/client/src/components/ItemTile.jsx
index b196bdb..280ef9f 100644
--- a/client/src/components/ItemTile.jsx
+++ b/client/src/components/ItemTile.jsx
@@ -1,26 +1,52 @@
import { formatCredits } from '../api';
import { rarityColor } from '../rarities';
+/** Instance sell/bet price, else catalog FT reference */
+export function itemValueCents(item) {
+ if (!item) return 0;
+ if (item.valueCents != null && Number.isFinite(Number(item.valueCents))) {
+ return Number(item.valueCents);
+ }
+ return Number(item.marketValue) || 0;
+}
+
+export function formatFloat(f) {
+ const n = Number(f);
+ if (!Number.isFinite(n)) return '';
+ return n.toFixed(6);
+}
+
export default function ItemTile({
item,
showValue = true,
+ showWear = true,
selected = false,
+ favorite = false,
onClick,
disabled = false,
}) {
const color = rarityColor(item.rarity);
const clickable = typeof onClick === 'function';
const hasImage = Boolean(item.imageUrl);
+ const value = itemValueCents(item);
+ const wear = item.wear;
+ const floatTitle =
+ wear && item.floatValue != null
+ ? `${wear} · ${formatFloat(item.floatValue)}${
+ item.paintSeed != null ? ` · seed ${item.paintSeed}` : ''
+ }`
+ : wear || undefined;
return (
{d.item?.name}
+
+ {d.item?.name}
+ {d.count > 1 ? x{d.count} : null}
+
+ {d.item?.wear ? (
+ {d.item.wear}
+ ) : null}
{d.avatarUrl ? (
@@ -109,11 +141,29 @@ export default function DropFeed() {
{(d.username || '?').slice(0, 1).toUpperCase()}
)}
- {d.username}
+
+ {d.source === 'jackpot' ? (
+ <>
+ Battle Winner{' '}
+ {d.username}
+
+ ) : (
+ d.username
+ )}
+
- {d.caseName ? `${d.caseName} · ` : ''}
+ {d.source === 'jackpot'
+ ? 'MultiPlayers Case · '
+ : d.caseName
+ ? `${d.caseName} · `
+ : ''}
{formatCredits(d.item?.marketValue || 0)} cr
+ {d.openCount > 1
+ ? d.source === 'jackpot'
+ ? ` · ${d.openCount} items`
+ : ` · ${d.openCount}× open`
+ : ''}
{formatDropTime(d.at)}
{
@@ -33,6 +59,7 @@ export default function ItemTile({
}
>
+ {favorite ? ★ : null}
{hasImage ? (
) : (
@@ -43,8 +70,13 @@ export default function ItemTile({
);
diff --git a/client/src/components/Layout.jsx b/client/src/components/Layout.jsx
index edabd69..5f09027 100644
--- a/client/src/components/Layout.jsx
+++ b/client/src/components/Layout.jsx
@@ -1,13 +1,50 @@
import { useEffect, useState } from 'react';
-import { NavLink, Outlet } from 'react-router-dom';
+import { NavLink, Outlet, useLocation } from 'react-router-dom';
import { useAuth } from '../AuthContext';
-import { formatCredits } from '../api';
+import { api, formatCredits } from '../api';
import DropFeed from './DropFeed';
+import SessionLimitOverlay from './SessionLimitOverlay';
+import { onInventoryChanged } from '../inventoryEvents';
+import { getSocket, onSessionLimitChange } from '../socket';
const FEED_KEY = 'caseforge-feed-drop';
+function ScrollToTop() {
+ const { pathname } = useLocation();
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, [pathname]);
+ return null;
+}
+
+function countWaitingBattles(jackpotRound, duelOpen) {
+ let n = 0;
+
+ // MultiPlayers: only if someone has already bet and round still waits for more players
+ const jpPlayers = jackpotRound?.players?.length ?? 0;
+ const jpDeposits = jackpotRound?.deposits?.length ?? 0;
+ if (
+ jackpotRound?.waitingForPlayers &&
+ jackpotRound.status !== 'spinning' &&
+ (jpPlayers > 0 || jpDeposits > 0)
+ ) {
+ n += 1;
+ }
+
+ // 1vX: each open room that already has at least one player with a bet
+ for (const room of duelOpen || []) {
+ if (room.status !== 'open') continue;
+ const hasBet =
+ (room.playerCount ?? room.players?.length ?? 0) > 0 ||
+ (room.deposits?.length ?? 0) > 0;
+ if (hasBet) n += 1;
+ }
+
+ return n;
+}
+
export default function Layout() {
- const { user, logout } = useAuth();
+ const { user } = useAuth();
const [feedOpen, setFeedOpen] = useState(() => {
try {
return localStorage.getItem(FEED_KEY) === '1';
@@ -15,6 +52,9 @@ export default function Layout() {
return false;
}
});
+ const [waitingBattles, setWaitingBattles] = useState(0);
+ const [prestigeVisible, setPrestigeVisible] = useState(false);
+ const [sessionLimit, setSessionLimit] = useState(null);
useEffect(() => {
try {
@@ -24,53 +64,176 @@ export default function Layout() {
}
}, [feedOpen]);
+ useEffect(() => {
+ if (!user || user.role === 'admin') {
+ setPrestigeVisible(false);
+ return undefined;
+ }
+ if ((user.prestigeCount ?? 0) > 0) {
+ setPrestigeVisible(true);
+ }
+ let cancelled = false;
+ const refreshVisibility = async () => {
+ try {
+ const data = await api.prestige();
+ if (!cancelled) setPrestigeVisible(Boolean(data.pageVisible));
+ } catch {
+ /* nav link optional */
+ }
+ };
+ refreshVisibility();
+ const offInv = onInventoryChanged(() => {
+ refreshVisibility();
+ });
+ return () => {
+ cancelled = true;
+ offInv();
+ };
+ }, [user?.id, user?.role, user?.balance, user?.prestigeCount]);
+
+ useEffect(() => {
+ if (!user || user.role === 'admin') {
+ setWaitingBattles(0);
+ return undefined;
+ }
+
+ let jackpotRound = null;
+ let duelOpen = [];
+ let cancelled = false;
+
+ const sync = () => {
+ if (cancelled) return;
+ setWaitingBattles((prev) => {
+ const next = countWaitingBattles(jackpotRound, duelOpen);
+ return prev === next ? prev : next;
+ });
+ };
+
+ (async () => {
+ try {
+ const [jp, duels] = await Promise.all([api.jackpot(), api.duels()]);
+ if (cancelled) return;
+ jackpotRound = jp.round;
+ duelOpen = duels.open || [];
+ sync();
+ } catch {
+ /* nav badge is optional */
+ }
+ })();
+
+ const socket = getSocket();
+ const offLimitChange = onSessionLimitChange((payload) => {
+ setSessionLimit(payload);
+ });
+ const onJackpot = (state) => {
+ jackpotRound = state;
+ sync();
+ };
+ const onDuels = (list) => {
+ duelOpen = list.open || [];
+ sync();
+ };
+
+ socket.emit('jackpot:subscribe');
+ socket.emit('duels:subscribe');
+ socket.on('jackpot:state', onJackpot);
+ socket.on('jackpot:spin', onJackpot);
+ socket.on('jackpot:result', onJackpot);
+ socket.on('duels:list', onDuels);
+ socket.on('connect', () => {
+ socket.emit('jackpot:subscribe');
+ socket.emit('duels:subscribe');
+ });
+
+ return () => {
+ cancelled = true;
+ offLimitChange();
+ socket.emit('jackpot:unsubscribe');
+ socket.emit('duels:unsubscribe');
+ socket.off('jackpot:state', onJackpot);
+ socket.off('jackpot:spin', onJackpot);
+ socket.off('jackpot:result', onJackpot);
+ socket.off('duels:list', onDuels);
+ };
+ }, [user?.id, user?.role]);
+
+ const isPlayer = user && user.role !== 'admin';
+
return (
-
{item.rarity}
+ {showWear && wear ? (
+
+ {wear}
+
+ ) : null}
{showValue && (
- {formatCredits(item.marketValue)} cr
+ {formatCredits(value)} cr
)}
+
+
);
}
diff --git a/client/src/pages/Register.jsx b/client/src/pages/Register.jsx
index 3754310..bad265f 100644
--- a/client/src/pages/Register.jsx
+++ b/client/src/pages/Register.jsx
@@ -7,6 +7,7 @@ export default function Register() {
const navigate = useNavigate();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
+ const [confirmPassword, setConfirmPassword] = useState('');
const [error, setError] = useState('');
const [busy, setBusy] = useState(false);
@@ -17,6 +18,10 @@ export default function Register() {
const onSubmit = async (e) => {
e.preventDefault();
setError('');
+ if (password !== confirmPassword) {
+ setError('Passwords do not match.');
+ return;
+ }
setBusy(true);
try {
await register(username, password);
@@ -56,6 +61,17 @@ export default function Register() {
minLength={6}
/>
+
{error &&
+
-
- CaseForge
-
+
{error &&
+
+ CaseForge
+
+ {isPlayer && (
+
+ )}
+
- {feedOpen && user && user.role !== 'admin' &&
diff --git a/client/src/components/ProfileAchievementBadges.jsx b/client/src/components/ProfileAchievementBadges.jsx
new file mode 100644
index 0000000..be335b3
--- /dev/null
+++ b/client/src/components/ProfileAchievementBadges.jsx
@@ -0,0 +1,51 @@
+import { Link } from 'react-router-dom';
+
+export default function ProfileAchievementBadges({
+ achievements = [],
+ linkToAchievements = false,
+}) {
+ if (!achievements.length) return null;
+
+ return (
+
+
+ );
+}
diff --git a/client/src/pages/Admin.jsx b/client/src/pages/Admin.jsx
index 7aff016..1c0ad2e 100644
--- a/client/src/pages/Admin.jsx
+++ b/client/src/pages/Admin.jsx
@@ -432,7 +432,7 @@ export default function Admin() {
@@ -145,7 +145,7 @@ export default function DuelListPage() {
) : (
+
+ );
+}
diff --git a/client/src/components/ProfileCaseStats.jsx b/client/src/components/ProfileCaseStats.jsx
new file mode 100644
index 0000000..3363bb7
--- /dev/null
+++ b/client/src/components/ProfileCaseStats.jsx
@@ -0,0 +1,33 @@
+import { Link } from 'react-router-dom';
+
+export default function ProfileCaseStats({ caseOpens = [] }) {
+ if (!caseOpens.length) {
+ return
+
+ Achievements
+ {linkToAchievements && ( + + View all + + )} +
+ {achievements.map((a) => {
+ const inner = (
+ <>
+
+ {a.icon || '★'}
+
+ {a.name}
+
+ );
+ return linkToAchievements ? (
+
+ {inner}
+
+ ) : (
+
+
+ {inner}
+
+ );
+ })}
+ No cases opened yet.
; + } + + return ( +-
+ {caseOpens.map((row) => (
+
-
+
+
+ {row.imageUrl ? (
+
+ ) : ( + '▣' + )} + + {row.caseName} + + {row.count} + opened + + + {row.keys} key{row.keys === 1 ? '' : 's'} + + +
+ ))}
+
+
+ );
+}
diff --git a/client/src/components/ProfilePrestigeStats.jsx b/client/src/components/ProfilePrestigeStats.jsx
new file mode 100644
index 0000000..95446c6
--- /dev/null
+++ b/client/src/components/ProfilePrestigeStats.jsx
@@ -0,0 +1,23 @@
+export default function ProfilePrestigeStats({ prestige }) {
+ if (!prestige || !prestige.count) return null;
+
+ return (
+
+
+ Catalog
+ {luckPercent > 0 && ( + +{luckPercent}% luck + )} +
+ {completed.map((ch) => {
+ const inner = (
+ <>
+ {ch.imageUrl ? (
+ 
+ ) : (
+ ▣
+ )}
+
+ ✓
+
+ {ch.name}
+
+ );
+ return linkToCatalog ? (
+
+ {inner}
+
+ ) : (
+
+
+ {inner}
+
+ );
+ })}
+
+
+ );
+}
diff --git a/client/src/components/SessionLimitOverlay.jsx b/client/src/components/SessionLimitOverlay.jsx
new file mode 100644
index 0000000..5899256
--- /dev/null
+++ b/client/src/components/SessionLimitOverlay.jsx
@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react';
+
+const FAKE_ADS = [
+ {
+ brand: 'ServerFuel™',
+ tagline: 'Keep the forge warm',
+ blurb: 'Fictional energy drink for fictional servers. 0 calories, 100% vibes.',
+ },
+ {
+ brand: 'CloudCrate Hosting',
+ tagline: 'Boxes in the sky',
+ blurb: 'Not a real host. Just a polite reminder that bandwidth isn’t free.',
+ },
+ {
+ brand: 'FairPlay Shield',
+ tagline: 'One account, few tabs',
+ blurb: 'Demo ad. Thanks for not multi-boxing the backend into orbit.',
+ },
+];
+
+export default function SessionLimitOverlay({ max = 10 }) {
+ const [ad] = useState(
+ () => FAKE_ADS[Math.floor(Math.random() * FAKE_ADS.length)]
+ );
+ const [phase, setPhase] = useState('idle'); // idle | watching | done
+ const [secondsLeft, setSecondsLeft] = useState(5);
+
+ useEffect(() => {
+ if (phase !== 'watching') return undefined;
+ if (secondsLeft <= 0) {
+ setPhase('done');
+ return undefined;
+ }
+ const t = setTimeout(() => setSecondsLeft((s) => s - 1), 1000);
+ return () => clearTimeout(t);
+ }, [phase, secondsLeft]);
+
+ const startAd = () => {
+ setSecondsLeft(5);
+ setPhase('watching');
+ };
+
+ return (
+
+
+ Prestige
+ ×{prestige.count} +-
+
- + Chance +{prestige.chanceBonus}% + +
- + Sell gains +{prestige.gainBonus}% + +
- + Key opens −{prestige.keyOpenReduction} + +
+
+ );
+}
diff --git a/client/src/index.css b/client/src/index.css
index b369c81..32a1c02 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -99,6 +99,13 @@ h3 {
text-transform: uppercase;
}
+.topnav-left {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ flex-shrink: 0;
+}
+
.nav-links {
display: flex;
gap: 1rem;
@@ -116,6 +123,41 @@ h3 {
color: var(--text);
}
+.nav-battle {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ padding-right: 0.15rem;
+}
+
+.nav-battle.nav-battle-waiting,
+.nav-battle.nav-battle-waiting:hover,
+.nav-battle.nav-battle-waiting.active {
+ color: var(--accent);
+}
+
+.nav-battle-badge {
+ position: absolute;
+ top: -0.55rem;
+ right: -0.75rem;
+ min-width: 1.1rem;
+ height: 1.1rem;
+ padding: 0;
+ border: none;
+ border-radius: 0;
+ display: inline-grid;
+ place-items: center;
+ font-family: var(--font-display);
+ font-size: 0.7rem;
+ font-weight: 600;
+ line-height: 1;
+ color: inherit;
+ background: transparent;
+ box-shadow: none;
+ pointer-events: none;
+}
+
.nav-toggle {
background: transparent;
border: 1px solid var(--stroke);
@@ -214,6 +256,17 @@ h3 {
white-space: nowrap;
}
+.drop-feed-count {
+ color: var(--gold);
+ font-weight: 700;
+ margin-left: 0.15rem;
+}
+
+.drop-feed-wear {
+ font-size: 0.72rem;
+ margin-top: 0.1rem;
+}
+
.drop-feed-player {
display: flex;
align-items: center;
@@ -222,6 +275,13 @@ h3 {
margin-top: 0.15rem;
}
+.drop-feed-winner-label {
+ color: var(--gold);
+ font-family: var(--font-display);
+ font-weight: 600;
+ font-size: 0.78rem;
+}
+
.drop-feed-avatar {
width: 18px;
height: 18px;
@@ -276,6 +336,19 @@ h3 {
padding: 0.35rem 0.7rem;
}
+a.balance-pill-link {
+ color: var(--gold);
+ text-decoration: none;
+ cursor: pointer;
+}
+
+a.balance-pill-link:hover,
+a.balance-pill-link.active {
+ color: var(--gold);
+ background: rgba(228, 174, 57, 0.15);
+ border-color: rgba(228, 174, 57, 0.5);
+}
+
.main {
width: min(1100px, 100%);
margin: 0 auto;
@@ -382,6 +455,148 @@ h3 {
font-size: 0.9rem;
}
+.session-limit-banner {
+ padding: 0.65rem 1rem;
+ text-align: center;
+ font-size: 0.88rem;
+ font-family: var(--font-display);
+ color: var(--text);
+ background: color-mix(in srgb, var(--danger) 18%, var(--bg-panel));
+ border-bottom: 1px solid color-mix(in srgb, var(--danger) 45%, var(--stroke));
+}
+
+.app-shell.session-locked .topnav,
+.app-shell.session-locked .app-body {
+ filter: grayscale(0.85) brightness(0.45);
+ pointer-events: none;
+ user-select: none;
+}
+
+.session-limit-overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 2000;
+ display: grid;
+ place-items: center;
+ padding: 1.25rem;
+ background: rgba(6, 10, 14, 0.72);
+}
+
+.session-limit-box {
+ width: min(28rem, 100%);
+ padding: 1.5rem 1.35rem 1.35rem;
+ border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--stroke));
+ background:
+ linear-gradient(165deg, rgba(235, 75, 75, 0.08) 0%, transparent 40%),
+ var(--bg-panel);
+ box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
+ text-align: center;
+}
+
+.session-limit-kicker {
+ margin: 0 0 0.35rem;
+ font-size: 0.7rem;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--danger);
+ font-family: var(--font-display);
+}
+
+.session-limit-box h2 {
+ margin: 0 0 0.65rem;
+ font-size: 1.45rem;
+}
+
+.session-limit-lead {
+ margin: 0 0 0.75rem;
+ font-size: 0.95rem;
+ line-height: 1.45;
+}
+
+.session-limit-respect {
+ margin: 0 0 1.15rem;
+ padding: 0.75rem 0.85rem;
+ font-size: 0.88rem;
+ line-height: 1.45;
+ color: var(--muted);
+ border: 1px solid var(--stroke);
+ background: var(--bg-deep);
+ text-align: left;
+}
+
+.session-limit-ad {
+ text-align: left;
+ border: 1px solid var(--stroke);
+ background: var(--bg-elevated);
+}
+
+.session-limit-ad-label {
+ padding: 0.35rem 0.75rem;
+ font-size: 0.65rem;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--muted);
+ border-bottom: 1px solid var(--stroke);
+ font-family: var(--font-display);
+}
+
+.session-limit-ad-screen {
+ padding: 1rem 0.9rem 1.05rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.45rem;
+ align-items: flex-start;
+ min-height: 8.5rem;
+}
+
+.session-limit-ad-screen.playing {
+ background:
+ radial-gradient(ellipse at 30% 20%, rgba(61, 214, 198, 0.12), transparent 55%),
+ var(--bg-elevated);
+}
+
+.session-limit-ad-brand {
+ font-family: var(--font-display);
+ font-size: 1.15rem;
+ font-weight: 600;
+ color: var(--accent);
+}
+
+.session-limit-ad-tag {
+ font-family: var(--font-display);
+ font-size: 0.85rem;
+ color: var(--text);
+}
+
+.session-limit-ad-screen .muted {
+ margin: 0;
+ font-size: 0.82rem;
+}
+
+.session-limit-ad-screen .btn {
+ margin-top: 0.35rem;
+}
+
+.session-limit-ad-progress {
+ width: 100%;
+ height: 0.35rem;
+ background: var(--bg-deep);
+ border: 1px solid var(--stroke);
+ overflow: hidden;
+}
+
+.session-limit-ad-progress-fill {
+ height: 100%;
+ background: var(--accent);
+ transition: width 0.9s linear;
+}
+
+.session-limit-ad-countdown {
+ margin: 0;
+ font-family: var(--font-display);
+ font-size: 0.95rem;
+}
+
.section {
margin-bottom: 2.5rem;
}
@@ -430,6 +645,7 @@ h3 {
.item-visual,
.case-visual {
+ position: relative;
flex: 1;
display: grid;
place-items: center;
@@ -451,6 +667,14 @@ h3 {
font-size: 0.85rem;
}
+.item-wear {
+ color: var(--gold);
+ font-size: 0.72rem;
+ font-family: var(--font-display);
+ letter-spacing: 0.02em;
+ line-height: 1.2;
+}
+
.empty {
padding: 1.5rem;
border: 1px dashed var(--stroke);
@@ -460,18 +684,120 @@ h3 {
.case-page {
display: flex;
flex-direction: column;
- gap: 1.5rem;
+ gap: 0.5rem;
+ margin-top: -0.5rem;
+}
+
+.case-page > a.muted {
+ margin: 0;
+ line-height: 1.2;
}
.case-hero {
display: flex;
flex-direction: column;
align-items: center;
- gap: 0.75rem;
- padding: 1.5rem 1rem 0.5rem;
+ gap: 0.35rem;
+ padding: 0.35rem 1rem 0.25rem;
text-align: center;
}
+.case-hero > p.muted {
+ margin: 0;
+}
+
+.case-key-progress {
+ width: min(420px, 100%);
+ margin: 0.35rem 0 0.15rem;
+}
+
+.case-key-head {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 0.35rem 0.75rem;
+ font-size: 0.9rem;
+ margin-bottom: 0.4rem;
+}
+
+.case-key-bar {
+ height: 6px;
+ border-radius: 999px;
+ background: var(--stroke);
+ overflow: hidden;
+}
+
+.case-key-bar-fill {
+ height: 100%;
+ background: linear-gradient(90deg, var(--accent-dim), var(--accent));
+ border-radius: inherit;
+ transition: width 300ms ease;
+}
+
+.case-key-badge {
+ color: var(--gold);
+ font-family: var(--font-display);
+}
+
+.open-qty {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ align-items: center;
+ justify-content: center;
+}
+
+.open-qty label {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.45rem;
+}
+
+.open-qty select {
+ background: var(--bg-deep);
+ border: 1px solid var(--stroke);
+ color: var(--text);
+ padding: 0.4rem 0.55rem;
+ font-family: var(--font-display);
+}
+
+.multi-reels {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ margin-bottom: 1rem;
+}
+
+.multi-reels.many {
+ gap: 1.25rem;
+}
+
+.multi-reel-slot {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.multi-reel-label {
+ font-family: var(--font-display);
+ font-size: 0.85rem;
+}
+
+.won-banner.compact {
+ padding: 0.65rem;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem 0.85rem;
+}
+
+.won-banner.compact .won-img {
+ width: 48px;
+ height: 48px;
+ margin: 0;
+}
+
.case-hero .case-icon {
width: 140px;
height: 140px;
@@ -664,6 +990,439 @@ h3 {
color: var(--accent);
}
+.table tbody tr.table-row-clickable {
+ cursor: pointer;
+}
+
+.table tbody tr.table-row-clickable:hover,
+.table tbody tr.table-row-clickable:focus-visible {
+ background: rgba(61, 214, 198, 0.06);
+ outline: none;
+}
+
+/* —— Leaderboard —— */
+.lb-page {
+ max-width: 960px;
+}
+
+.lb-avatar {
+ flex-shrink: 0;
+ display: grid;
+ place-items: center;
+ overflow: hidden;
+ background: var(--bg-deep);
+ border: 1px solid var(--stroke);
+ font-family: var(--font-display);
+ font-weight: 600;
+ color: var(--muted);
+ letter-spacing: 0.02em;
+}
+
+.lb-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.lb-avatar-sm {
+ width: 2.35rem;
+ height: 2.35rem;
+ font-size: 0.7rem;
+}
+
+.lb-avatar-lg {
+ width: 3.4rem;
+ height: 3.4rem;
+ font-size: 0.9rem;
+}
+
+.lb-avatar-xl {
+ width: 4.5rem;
+ height: 4.5rem;
+ font-size: 1.15rem;
+}
+
+.lb-podium {
+ display: grid;
+ grid-template-columns: 1fr 1.15fr 1fr;
+ gap: 0.65rem;
+ align-items: end;
+ margin: 0.25rem 0 1.25rem;
+}
+
+.lb-podium-card {
+ appearance: none;
+ width: 100%;
+ text-align: center;
+ cursor: pointer;
+ color: inherit;
+ font: inherit;
+ padding: 0.7rem 0.7rem 0.75rem;
+ border: 1px solid var(--stroke);
+ background: var(--bg-panel);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.2rem;
+ transition:
+ border-color 0.2s ease,
+ transform 0.2s ease,
+ background 0.2s ease;
+}
+
+.lb-podium-card:hover,
+.lb-podium-card:focus-visible {
+ outline: none;
+ transform: translateY(-2px);
+}
+
+.lb-podium-rank {
+ font-family: var(--font-display);
+ font-weight: 700;
+ font-size: 0.75rem;
+ letter-spacing: 0.08em;
+ color: var(--muted);
+}
+
+.lb-podium-frame {
+ margin: 0.15rem 0 0.1rem;
+ padding: 0.2rem;
+ border: 1px solid var(--stroke);
+}
+
+.lb-podium-title {
+ font-family: var(--font-display);
+ font-size: 0.65rem;
+ font-weight: 600;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.lb-podium-name {
+ font-family: var(--font-display);
+ font-size: 0.95rem;
+ font-weight: 600;
+}
+
+.lb-podium-bonus {
+ font-size: 0.68rem;
+ color: var(--accent);
+ margin-bottom: 0.1rem;
+}
+
+.lb-wealth {
+ width: 100%;
+ margin-top: 0.2rem;
+ padding-top: 0.45rem;
+ border-top: 1px solid var(--stroke);
+}
+
+.lb-wealth-total {
+ display: flex;
+ flex-direction: column;
+ gap: 0.05rem;
+}
+
+.lb-wealth-label {
+ font-size: 0.6rem;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.lb-wealth-total strong {
+ font-family: var(--font-display);
+ font-size: 0.95rem;
+ font-weight: 600;
+}
+
+.lb-wealth-parts {
+ display: flex;
+ flex-direction: column;
+ gap: 0.1rem;
+ margin-top: 0.3rem;
+ font-size: 0.68rem;
+ color: var(--muted);
+}
+
+.lb-wealth-parts em {
+ font-style: normal;
+ color: var(--text);
+ font-family: var(--font-display);
+}
+
+.lb-wealth-compact strong {
+ font-family: var(--font-display);
+ font-weight: 600;
+ white-space: nowrap;
+}
+
+/* 1st — most impressive */
+.lb-place-1 {
+ position: relative;
+ z-index: 1;
+ overflow: visible;
+ isolation: isolate;
+ padding: 0.95rem 0.85rem 0.9rem;
+ border-color: color-mix(in srgb, var(--gold) 55%, var(--stroke));
+ background:
+ linear-gradient(165deg, rgba(228, 174, 57, 0.16) 0%, transparent 42%),
+ linear-gradient(180deg, #243040 0%, var(--bg-panel) 100%);
+ box-shadow: inset 0 1px 0 rgba(228, 174, 57, 0.25);
+}
+
+.lb-fire {
+ position: absolute;
+ inset: -4px;
+ pointer-events: none;
+ z-index: -1;
+}
+
+.lb-fire-ring {
+ position: absolute;
+ inset: 0;
+ padding: 2px;
+ border: none;
+ background: linear-gradient(
+ 120deg,
+ #7a1a00,
+ #e85d04,
+ #ffba08,
+ #faa307,
+ #dc2f02,
+ #7a1a00
+ );
+ background-size: 280% 280%;
+ animation: lb-fire-ring 2.4s linear infinite;
+ opacity: 0.95;
+ -webkit-mask:
+ linear-gradient(#fff 0 0) content-box,
+ linear-gradient(#fff 0 0);
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+}
+
+@keyframes lb-fire-ring {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 100% {
+ background-position: 100% 50%;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .lb-fire-ring {
+ animation: none;
+ background-position: 40% 50%;
+ }
+}
+
+.lb-place-1 .lb-podium-rank {
+ font-size: 0.95rem;
+ color: var(--gold);
+}
+
+.lb-place-1 .lb-podium-frame {
+ border-color: color-mix(in srgb, var(--gold) 70%, var(--stroke));
+ padding: 0.28rem;
+ background: color-mix(in srgb, var(--gold) 10%, transparent);
+}
+
+.lb-place-1 .lb-podium-title {
+ color: var(--gold);
+ font-size: 0.72rem;
+}
+
+.lb-place-1 .lb-podium-name {
+ font-size: 1.15rem;
+}
+
+.lb-place-1 .lb-podium-bonus {
+ color: var(--gold);
+ font-family: var(--font-display);
+ font-size: 0.75rem;
+}
+
+.lb-place-1 .lb-wealth-total strong {
+ font-size: 1.1rem;
+ color: var(--gold);
+}
+
+.lb-place-1:hover,
+.lb-place-1:focus-visible {
+ border-color: var(--gold);
+ transform: translateY(-3px);
+}
+
+/* 2nd */
+.lb-place-2 {
+ border-color: color-mix(in srgb, #c5d0db 40%, var(--stroke));
+ background:
+ linear-gradient(165deg, rgba(197, 208, 219, 0.1) 0%, transparent 45%),
+ var(--bg-panel);
+}
+
+.lb-place-2 .lb-podium-rank {
+ color: #c5d0db;
+}
+
+.lb-place-2 .lb-podium-frame {
+ border-color: color-mix(in srgb, #c5d0db 55%, var(--stroke));
+}
+
+.lb-place-2 .lb-podium-title,
+.lb-place-2 .lb-podium-bonus {
+ color: #b8c4d0;
+}
+
+.lb-place-2:hover,
+.lb-place-2:focus-visible {
+ border-color: #c5d0db;
+}
+
+/* 3rd */
+.lb-place-3 {
+ border-color: color-mix(in srgb, #c47a45 45%, var(--stroke));
+ background:
+ linear-gradient(165deg, rgba(196, 122, 69, 0.12) 0%, transparent 45%),
+ var(--bg-panel);
+}
+
+.lb-place-3 .lb-podium-rank {
+ color: #d4925c;
+}
+
+.lb-place-3 .lb-podium-frame {
+ border-color: color-mix(in srgb, #c47a45 55%, var(--stroke));
+}
+
+.lb-place-3 .lb-podium-title,
+.lb-place-3 .lb-podium-bonus {
+ color: #d4925c;
+}
+
+.lb-place-3:hover,
+.lb-place-3:focus-visible {
+ border-color: #d4925c;
+}
+
+.lb-list {
+ border-top: 1px solid var(--stroke);
+ padding-top: 1rem;
+}
+
+.lb-list-head {
+ display: grid;
+ grid-template-columns: 3rem 2.35rem 1fr auto auto;
+ gap: 0.75rem;
+ align-items: center;
+ padding: 0 0.85rem 0.55rem;
+ font-size: 0.72rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.lb-list-head span:nth-child(2) {
+ grid-column: 2 / 4;
+}
+
+.lb-list-head-wealth {
+ text-align: right;
+}
+
+.lb-list-rows {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.35rem;
+}
+
+.lb-row {
+ appearance: none;
+ width: 100%;
+ display: grid;
+ grid-template-columns: 3rem 2.35rem minmax(0, 1fr) auto auto;
+ gap: 0.75rem;
+ align-items: center;
+ padding: 0.65rem 0.85rem;
+ border: 1px solid transparent;
+ border-bottom-color: var(--stroke);
+ background: transparent;
+ color: inherit;
+ font: inherit;
+ text-align: left;
+ cursor: pointer;
+ transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.lb-row:hover,
+.lb-row:focus-visible {
+ outline: none;
+ background: rgba(61, 214, 198, 0.05);
+ border-color: color-mix(in srgb, var(--accent) 25%, transparent);
+}
+
+.lb-row-rank {
+ font-family: var(--font-display);
+ font-weight: 600;
+ color: var(--accent-dim);
+}
+
+.lb-row-name {
+ font-family: var(--font-display);
+ font-weight: 560;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.lb-row-meta {
+ font-size: 0.78rem;
+ display: none;
+}
+
+.lb-row .lb-wealth-compact {
+ text-align: right;
+}
+
+@media (min-width: 640px) {
+ .lb-row-meta {
+ display: block;
+ }
+}
+
+@media (max-width: 720px) {
+ .lb-podium {
+ grid-template-columns: 1fr;
+ gap: 0.65rem;
+ }
+
+ .lb-place-1 {
+ order: -1;
+ }
+
+ .lb-list-head {
+ grid-template-columns: 2.5rem 2.35rem 1fr auto;
+ }
+
+ .lb-list-head span:nth-child(2) {
+ grid-column: 2 / 3;
+ }
+
+ .lb-row {
+ grid-template-columns: 2.5rem 2.35rem minmax(0, 1fr) auto;
+ }
+
+ .lb-row-meta {
+ display: none;
+ }
+}
+
.admin-tabs {
display: flex;
gap: 0.5rem;
@@ -767,6 +1526,22 @@ h3 {
outline-offset: 2px;
}
+.item-tile.favorite {
+ box-shadow: inset 0 0 0 1px rgba(228, 174, 57, 0.45);
+}
+
+.item-favorite-badge {
+ position: absolute;
+ top: 0.35rem;
+ right: 0.35rem;
+ z-index: 1;
+ color: var(--gold);
+ font-size: 0.95rem;
+ line-height: 1;
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
+ pointer-events: none;
+}
+
.item-tile.disabled {
opacity: 0.4;
pointer-events: none;
@@ -788,6 +1563,159 @@ h3 {
position: relative;
}
+.mode-card-live {
+ grid-column: 1 / -1;
+ min-height: 220px;
+}
+
+.mode-card-top {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 0.75rem;
+}
+
+.mode-card-top h2 {
+ margin: 0;
+}
+
+.mode-status {
+ flex-shrink: 0;
+ font-family: var(--font-display);
+ font-size: 0.75rem;
+ color: var(--accent);
+ border: 1px solid rgba(61, 214, 198, 0.35);
+ background: rgba(61, 214, 198, 0.08);
+ padding: 0.2rem 0.45rem;
+ white-space: nowrap;
+}
+
+.mode-status.spinning {
+ color: var(--gold);
+ border-color: rgba(228, 174, 57, 0.4);
+ background: rgba(228, 174, 57, 0.1);
+}
+
+.mode-blurb {
+ margin: 0.5rem 0 0.85rem;
+ font-size: 0.9rem;
+}
+
+.mode-pot-stats {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 12rem));
+ gap: 0.75rem 1.5rem;
+ margin-bottom: 0.85rem;
+}
+
+.mode-pot-stats > div {
+ display: flex;
+ flex-direction: column;
+ gap: 0.15rem;
+ font-size: 0.8rem;
+}
+
+.mode-pot-stats strong {
+ font-family: var(--font-display);
+ font-size: 0.95rem;
+ color: var(--text);
+}
+
+.mode-pot-items {
+ display: flex;
+ align-items: center;
+ gap: 0.4rem;
+ flex-wrap: wrap;
+}
+
+.mode-pot-thumb {
+ width: 4.5rem;
+ height: 4.5rem;
+ border: 1px solid var(--stroke);
+ border-top-width: 2px;
+ background: rgba(0, 0, 0, 0.25);
+ display: grid;
+ place-items: center;
+ overflow: hidden;
+ font-size: 0.85rem;
+ font-family: var(--font-display);
+ color: var(--muted);
+}
+
+.mode-pot-thumb img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.mode-pot-more {
+ font-size: 0.8rem;
+}
+
+.mode-pot-empty {
+ margin: 0;
+ font-size: 0.85rem;
+}
+
+.mode-card-reel {
+ margin-top: 0.15rem;
+}
+
+.mode-card-winner {
+ margin: 0.5rem 0 0;
+ font-size: 0.9rem;
+ color: var(--gold);
+}
+
+.reel-wrap-compact {
+ height: 118px;
+}
+
+.reel-wrap-compact.reel-wrap-owners {
+ height: 148px;
+}
+
+.reel-wrap-compact::before,
+.reel-wrap-compact::after {
+ width: 48px;
+}
+
+.reel-wrap-compact .reel-item {
+ flex: 0 0 72px;
+ width: 72px;
+ padding: 0.25rem;
+ gap: 0.2rem;
+ border-top-width: 3px;
+}
+
+.reel-wrap-compact .reel-item .glyph {
+ font-size: 1rem;
+}
+
+.reel-wrap-compact .reel-img {
+ max-height: 2.4rem;
+}
+
+.reel-wrap-compact .reel-item .label {
+ font-size: 0.62rem;
+}
+
+.reel-wrap-compact .reel-owner {
+ gap: 0.2rem;
+}
+
+.reel-wrap-compact .reel-owner-avatar,
+.reel-wrap-compact .reel-owner-fallback {
+ width: 0.9rem;
+ height: 0.9rem;
+ font-size: 0.55rem;
+}
+
+.reel-wrap-compact .reel-owner-name {
+ font-size: 0.58rem;
+ max-width: 3.5rem;
+}
+
a.mode-card:hover {
transform: translateY(-3px);
border-color: var(--accent-dim);
@@ -960,6 +1888,305 @@ a.mode-card:hover {
gap: 0.55rem;
}
+.case-stats-block {
+ margin-top: 1rem;
+ padding-top: 0.85rem;
+ border-top: 1px solid var(--stroke);
+}
+
+.catalog-badges-block {
+ margin-top: 1rem;
+ padding-top: 0.85rem;
+ border-top: 1px solid var(--stroke);
+}
+
+.catalog-badges-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+ margin-bottom: 0.65rem;
+}
+
+.catalog-badges-head h3 {
+ margin: 0;
+ font-family: var(--font-display);
+ font-size: 0.95rem;
+ font-weight: 600;
+}
+
+.catalog-badges-luck {
+ font-family: var(--font-display);
+ font-size: 0.75rem;
+ color: var(--accent);
+ border: 1px solid rgba(61, 214, 198, 0.35);
+ background: rgba(61, 214, 198, 0.08);
+ padding: 0.15rem 0.45rem;
+ white-space: nowrap;
+}
+
+.catalog-badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+.catalog-badge {
+ position: relative;
+ width: 3.4rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.2rem;
+ text-decoration: none;
+ color: inherit;
+}
+
+a.catalog-badge:hover .catalog-badge-name {
+ color: var(--accent);
+}
+
+.catalog-badge img,
+.catalog-badge-fallback {
+ width: 2.75rem;
+ height: 2.75rem;
+ object-fit: contain;
+ border: 1px solid rgba(61, 214, 198, 0.4);
+ background: rgba(61, 214, 198, 0.08);
+ display: grid;
+ place-items: center;
+ color: var(--accent);
+ font-size: 1rem;
+}
+
+.catalog-badge-check {
+ position: absolute;
+ top: -0.2rem;
+ right: 0.1rem;
+ font-size: 0.65rem;
+ font-weight: 700;
+ color: var(--bg-deep);
+ background: var(--accent);
+ width: 0.95rem;
+ height: 0.95rem;
+ display: grid;
+ place-items: center;
+ line-height: 1;
+}
+
+.catalog-badge-name {
+ font-size: 0.62rem;
+ color: var(--muted);
+ text-align: center;
+ line-height: 1.15;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.presence-online {
+ color: #3ecf8e;
+}
+
+.presence-offline {
+ color: var(--muted);
+}
+
+.achievement-badges-block {
+ margin-top: 1rem;
+ padding-top: 0.85rem;
+ border-top: 1px solid var(--stroke);
+}
+
+.achievement-badges-link {
+ font-size: 0.75rem;
+ color: var(--accent);
+ text-decoration: none;
+}
+
+.achievement-badges-link:hover {
+ text-decoration: underline;
+}
+
+.achievement-badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+.achievement-badge {
+ position: relative;
+ width: 3.4rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.2rem;
+ text-decoration: none;
+ color: inherit;
+}
+
+a.achievement-badge:hover .achievement-badge-name {
+ color: var(--accent);
+}
+
+.achievement-badge-icon {
+ width: 2.75rem;
+ height: 2.75rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid var(--stroke);
+ background: color-mix(in srgb, var(--accent) 12%, transparent);
+ font-family: var(--font-display);
+ font-size: 0.95rem;
+ color: var(--accent);
+}
+
+.achievement-badge-name {
+ font-size: 0.62rem;
+ color: var(--muted);
+ text-align: center;
+ line-height: 1.15;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.achievement-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+ gap: 0.85rem;
+ margin-top: 1rem;
+}
+
+.achievement-card {
+ display: flex;
+ gap: 0.85rem;
+ padding: 0.9rem 1rem;
+ border: 1px solid var(--stroke);
+ background: color-mix(in srgb, var(--panel) 88%, transparent);
+}
+
+.achievement-card.locked {
+ opacity: 0.55;
+}
+
+.achievement-card.unlocked .achievement-card-icon {
+ color: var(--accent);
+ border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke));
+ background: color-mix(in srgb, var(--accent) 14%, transparent);
+}
+
+.achievement-card-icon {
+ flex-shrink: 0;
+ width: 2.75rem;
+ height: 2.75rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid var(--stroke);
+ font-family: var(--font-display);
+ font-size: 1.1rem;
+}
+
+.achievement-card-body h2 {
+ margin: 0 0 0.25rem;
+ font-family: var(--font-display);
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+.achievement-card-body p {
+ margin: 0 0 0.45rem;
+ font-size: 0.85rem;
+}
+
+.achievement-card-meta {
+ font-size: 0.72rem;
+ color: var(--muted);
+}
+
+.achievement-card-meta.locked-label {
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+
+.case-stats-block h3 {
+ margin: 0 0 0.65rem;
+ font-family: var(--font-display);
+ font-size: 0.95rem;
+ font-weight: 600;
+}
+
+.case-stats-empty {
+ margin: 0;
+ font-size: 0.85rem;
+}
+
+.case-stat-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.35rem;
+}
+
+.case-stat-row {
+ display: grid;
+ grid-template-columns: auto 1fr auto auto;
+ align-items: center;
+ gap: 0.55rem 0.75rem;
+ padding: 0.45rem 0.55rem;
+ border: 1px solid var(--stroke);
+ border-radius: 8px;
+ background: rgba(0, 0, 0, 0.12);
+ color: inherit;
+ text-decoration: none;
+ transition: border-color 150ms ease, background 150ms ease;
+}
+
+.case-stat-row:hover {
+ border-color: var(--accent-dim);
+ background: rgba(61, 214, 198, 0.06);
+}
+
+.case-stat-visual {
+ width: 2rem;
+ height: 2rem;
+ display: grid;
+ place-items: center;
+ font-size: 1rem;
+ color: var(--accent);
+}
+
+.case-stat-visual img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.case-stat-name {
+ font-family: var(--font-display);
+ font-size: 0.9rem;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.case-stat-count {
+ font-size: 0.85rem;
+ white-space: nowrap;
+}
+
+.case-stat-keys {
+ font-size: 0.8rem;
+ white-space: nowrap;
+}
+
.ok-msg {
color: var(--accent);
font-size: 0.9rem;
@@ -1099,6 +2326,98 @@ a.mode-card:hover {
margin-bottom: 1rem;
}
+.inv-toolbar-left {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.inv-count {
+ font-size: 0.85rem;
+}
+
+.inv-pager {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+ margin-top: 1.25rem;
+ flex-wrap: wrap;
+}
+
+.inv-bulk-sell {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.75rem 1rem;
+ margin-bottom: 1rem;
+ padding: 0.75rem 0;
+ border-top: 1px solid var(--stroke);
+}
+
+.inv-bulk-label {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: var(--font-display);
+ font-size: 0.9rem;
+ color: var(--text);
+}
+
+.inv-bulk-label input[type='number'] {
+ width: 5.5rem;
+ background: var(--panel);
+ border: 1px solid var(--stroke);
+ color: var(--text);
+ padding: 0.4rem 0.55rem;
+ font-family: inherit;
+}
+
+.inv-bulk-preview {
+ font-size: 0.85rem;
+}
+
+.inv-auto-sell-box {
+ margin-left: auto;
+ border: 1px solid rgba(61, 214, 198, 0.35);
+ background: rgba(61, 214, 198, 0.08);
+ border-radius: 8px;
+ padding: 0.45rem 0.85rem;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.45rem;
+}
+
+.inv-auto-sell-at {
+ font-family: var(--font-display);
+ font-size: 0.85rem;
+ white-space: nowrap;
+}
+
+.inv-auto-sell-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.55rem;
+ cursor: pointer;
+ font-family: var(--font-display);
+ font-size: 0.9rem;
+ color: var(--text);
+ user-select: none;
+}
+
+.inv-auto-sell-toggle input[type='checkbox'] {
+ width: 1.15rem;
+ height: 1.15rem;
+ margin: 0;
+ accent-color: var(--accent);
+ cursor: pointer;
+}
+
+.inv-auto-sell-toggle span {
+ white-space: nowrap;
+}
+
.sort-toggle {
display: inline-flex;
border: 1px solid var(--stroke);
@@ -1150,3 +2469,283 @@ a.mode-card:hover {
background-position: -100% 0;
}
}
+
+/* Catalog */
+.catalog-luck-pill {
+ font-family: var(--font-display);
+ color: var(--accent);
+ border: 1px solid rgba(61, 214, 198, 0.35);
+ background: rgba(61, 214, 198, 0.08);
+ padding: 0.35rem 0.7rem;
+ white-space: nowrap;
+}
+
+.catalog-chapters {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.catalog-chapter {
+ border: 1px solid var(--stroke);
+ background: linear-gradient(160deg, var(--bg-elevated), var(--bg-panel));
+ padding: 1rem 1.15rem 1.15rem;
+}
+
+.catalog-chapter.completed {
+ border-color: rgba(61, 214, 198, 0.4);
+}
+
+.catalog-chapter-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ margin-bottom: 0.85rem;
+ flex-wrap: wrap;
+}
+
+.catalog-chapter-title {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ min-width: 0;
+}
+
+.catalog-chapter-title h2 {
+ margin: 0;
+ font-size: 1.15rem;
+}
+
+.catalog-chapter-title h2 a {
+ color: var(--text);
+}
+
+.catalog-chapter-title h2 a:hover {
+ color: var(--accent);
+}
+
+.catalog-chapter-title p {
+ margin: 0.2rem 0 0;
+ font-size: 0.85rem;
+}
+
+.catalog-case-thumb {
+ width: 3rem;
+ height: 3rem;
+ object-fit: contain;
+ background: rgba(0, 0, 0, 0.25);
+ border: 1px solid var(--stroke);
+ flex-shrink: 0;
+}
+
+.catalog-case-thumb.placeholder {
+ display: grid;
+ place-items: center;
+ color: var(--accent);
+ font-size: 1.2rem;
+}
+
+.catalog-complete-badge {
+ font-family: var(--font-display);
+ font-size: 0.8rem;
+ color: var(--accent);
+ border: 1px solid rgba(61, 214, 198, 0.35);
+ background: rgba(61, 214, 198, 0.08);
+ padding: 0.25rem 0.55rem;
+ white-space: nowrap;
+}
+
+.catalog-progress-bar {
+ width: 7rem;
+ height: 0.35rem;
+ background: rgba(255, 255, 255, 0.06);
+ border: 1px solid var(--stroke);
+ flex-shrink: 0;
+}
+
+.catalog-progress-fill {
+ height: 100%;
+ background: var(--accent);
+ transition: width 200ms ease;
+}
+
+.catalog-slots {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
+ gap: 0.5rem;
+}
+
+.catalog-slot {
+ aspect-ratio: 1;
+ border: 1px solid var(--stroke);
+ background: rgba(0, 0, 0, 0.28);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 0.25rem;
+ padding: 0.35rem;
+ overflow: hidden;
+ position: relative;
+}
+
+.catalog-slot.filled {
+ border-top: 3px solid var(--rarity, var(--stroke));
+}
+
+.catalog-slot.empty {
+ opacity: 0.55;
+}
+
+.catalog-slot img {
+ width: 70%;
+ height: 55%;
+ object-fit: contain;
+}
+
+.catalog-slot-fallback {
+ font-family: var(--font-display);
+ font-size: 0.95rem;
+ color: var(--muted);
+}
+
+.catalog-slot-name {
+ font-size: 0.62rem;
+ color: var(--muted);
+ text-align: center;
+ line-height: 1.15;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.catalog-slot-empty {
+ font-family: var(--font-display);
+ font-size: 1.4rem;
+ color: var(--muted);
+}
+
+
+/* Prestige */
+.prestige-count-pill {
+ font-family: var(--font-display);
+ color: var(--gold);
+ border: 1px solid rgba(228, 174, 57, 0.4);
+ background: rgba(228, 174, 57, 0.08);
+ padding: 0.35rem 0.7rem;
+ white-space: nowrap;
+}
+
+.prestige-totals {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 10rem));
+ gap: 0.75rem 1.5rem;
+ margin-bottom: 1.25rem;
+}
+
+.prestige-totals > div {
+ display: flex;
+ flex-direction: column;
+ gap: 0.15rem;
+ font-size: 0.85rem;
+}
+
+.prestige-totals strong {
+ font-family: var(--font-display);
+ font-size: 1.05rem;
+ color: var(--text);
+}
+
+.prestige-cost-row {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ gap: 0.5rem 1rem;
+ margin-bottom: 1rem;
+ font-size: 0.9rem;
+}
+
+.prestige-choices {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ gap: 0.85rem;
+ margin-bottom: 1.25rem;
+}
+
+.prestige-choice {
+ text-align: left;
+ background: linear-gradient(160deg, var(--bg-elevated), var(--bg-panel));
+ border: 1px solid var(--stroke);
+ color: inherit;
+ padding: 1rem;
+ cursor: pointer;
+ font: inherit;
+}
+
+.prestige-choice:disabled {
+ opacity: 0.55;
+ cursor: not-allowed;
+}
+
+.prestige-choice.selected {
+ border-color: rgba(228, 174, 57, 0.55);
+ box-shadow: inset 0 0 0 1px rgba(228, 174, 57, 0.25);
+}
+
+.prestige-choice h2 {
+ margin: 0 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+.prestige-choice p {
+ margin: 0 0 0.75rem;
+ font-size: 0.85rem;
+}
+
+.prestige-choice-meta {
+ display: flex;
+ justify-content: space-between;
+ gap: 0.5rem;
+ font-size: 0.8rem;
+}
+
+.prestige-delta {
+ color: var(--gold);
+ font-family: var(--font-display);
+}
+
+.prestige-confirm {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+ max-width: 32rem;
+}
+
+.prestige-confirm label {
+ display: flex;
+ flex-direction: column;
+ gap: 0.35rem;
+}
+
+.prestige-history {
+ margin-top: 1.5rem;
+ padding-top: 1rem;
+ border-top: 1px solid var(--stroke);
+}
+
+.prestige-history h2 {
+ margin: 0 0 0.65rem;
+ font-size: 1.05rem;
+}
+
+.prestige-profile-block {
+ margin-top: 1rem;
+ padding-top: 0.85rem;
+ border-top: 1px solid var(--stroke);
+}
+
+.prestige-profile-stats {
+ margin-top: 0.35rem;
+}
diff --git a/client/src/inventoryEvents.js b/client/src/inventoryEvents.js
new file mode 100644
index 0000000..79395be
--- /dev/null
+++ b/client/src/inventoryEvents.js
@@ -0,0 +1,10 @@
+export function notifyInventoryChanged() {
+ if (typeof window === 'undefined') return;
+ window.dispatchEvent(new Event('inventory:changed'));
+}
+
+export function onInventoryChanged(handler) {
+ if (typeof window === 'undefined') return () => {};
+ window.addEventListener('inventory:changed', handler);
+ return () => window.removeEventListener('inventory:changed', handler);
+}
diff --git a/client/src/pages/AchievementsPage.jsx b/client/src/pages/AchievementsPage.jsx
new file mode 100644
index 0000000..48c7815
--- /dev/null
+++ b/client/src/pages/AchievementsPage.jsx
@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { Link, Navigate } from 'react-router-dom';
+import { api } from '../api';
+import { useAuth } from '../AuthContext';
+
+function formatUnlockedAt(iso) {
+ if (!iso) return null;
+ try {
+ return new Date(iso).toLocaleString();
+ } catch {
+ return null;
+ }
+}
+
+export default function AchievementsPage() {
+ const { user, loading } = useAuth();
+ const [achievements, setAchievements] = useState([]);
+ const [unlocked, setUnlocked] = useState(0);
+ const [total, setTotal] = useState(0);
+ const [error, setError] = useState('');
+ const [busy, setBusy] = useState(true);
+
+ useEffect(() => {
+ if (!user || user.role === 'admin') return undefined;
+ let cancelled = false;
+ (async () => {
+ try {
+ const data = await api.achievements();
+ if (cancelled) return;
+ setAchievements(data.achievements || []);
+ setUnlocked(data.unlocked || 0);
+ setTotal(data.total || 0);
+ } catch (err) {
+ if (!cancelled) setError(err.message);
+ } finally {
+ if (!cancelled) setBusy(false);
+ }
+ })();
+ return () => {
+ cancelled = true;
+ };
+ }, [user?.id, user?.role]);
+
+ if (loading || busy) return
+
+ Connection limit
+Too many windows
++ This account already has {max} tabs/windows connected. + Close another one, then reload this page. +
++ Merci de ne pas abuser ni exploiter de bugs pour multiplier les sessions — + ça charge le serveur pour tout le monde. Un compte, un usage raisonnable. +
+ +
+
+ Sponsored · fictif
+
+ {phase === 'idle' && (
+ <>
+
+ {ad.brand}
+ {ad.tagline}
+ {ad.blurb}
+ + + )} + {phase === 'watching' && ( + <> +{ad.brand}
+
+
+
+ Ad playing… {secondsLeft}s
+Fictional spot — thanks for the support gesture.
+ + )} + {phase === 'done' && ( + <> +Thanks!
+ + Pub fictive terminée. Pour débloquer cette page : ferme un autre onglet, + puis recharge. +
+ + + )} +Loading…
; + if (!user) return
+
+
+ {error &&
+
+ Achievements
++ Unlock badges by playing. Earned badges show on your{' '} + profile. +
+
+ {unlocked}/{total} unlocked
+
+ {error}
}
+
+ {achievements.length === 0 && !error && (
+ No achievements defined yet.
+ )}
+
+
+ {achievements.map((a) => {
+ const done = Boolean(a.unlockedAt);
+ return (
+
+
+ );
+ })}
+
+
{open.map((r) => (
-
+
- {inventory.length === 0 ? (
+ {inventoryByValue.length === 0 ? (
Room #{r.id}
by {r.creatorUsername} · {r.playerCount}/{r.maxPlayers} players ·{' '}
@@ -165,7 +165,7 @@ export default function DuelListPage() {
) : (
@@ -307,20 +326,21 @@ export default function DuelRoomPage() {
Deposit
{inProgress.map((r) => (
-
+
-
+
All rooms
Room #{r.id} Live
diff --git a/client/src/pages/DuelRoomPage.jsx b/client/src/pages/DuelRoomPage.jsx
index 7010cc0..f4f8062 100644
--- a/client/src/pages/DuelRoomPage.jsx
+++ b/client/src/pages/DuelRoomPage.jsx
@@ -2,8 +2,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
import { Link, Navigate, useParams } from 'react-router-dom';
import { api, formatCredits, formatChance } from '../api';
import { useAuth } from '../AuthContext';
-import ItemTile from '../components/ItemTile';
+import ItemTile, { itemValueCents } from '../components/ItemTile';
import CaseReel from '../components/CaseReel';
+import { onInventoryChanged } from '../inventoryEvents';
import { getSocket } from '../socket';
export default function DuelRoomPage() {
@@ -22,6 +23,16 @@ export default function DuelRoomPage() {
setInventory(inv.inventory);
}, []);
+ const inventoryByValue = useMemo(
+ () =>
+ [...inventory].sort(
+ (a, b) =>
+ itemValueCents(b.item) - itemValueCents(a.item) ||
+ (b.valueCents ?? 0) - (a.valueCents ?? 0)
+ ),
+ [inventory]
+ );
+
useEffect(() => {
if (!user || user.role === 'admin') return undefined;
let cancelled = false;
@@ -75,6 +86,14 @@ export default function DuelRoomPage() {
};
}, [user, id, loadInventory, refresh]);
+ useEffect(() => {
+ if (!user || user.role === 'admin') return undefined;
+ return onInventoryChanged(() => {
+ loadInventory().catch(() => {});
+ refresh().catch(() => {});
+ });
+ }, [user, loadInventory, refresh]);
+
const isSpectator =
room &&
(room.status === 'in_progress' || room.status === 'spinning' || room.status === 'resolved') &&
@@ -176,7 +195,7 @@ export default function DuelRoomPage() {
{isSpectator ? ' · Spectating' : ''}
No free items — open a case.
) : (
- {inventory.map((inv) => (
+ {inventoryByValue.map((inv) => (
toggleSelect(inv.id)}
/>
diff --git a/client/src/pages/Leaderboard.jsx b/client/src/pages/Leaderboard.jsx
index ab356fd..77df659 100644
--- a/client/src/pages/Leaderboard.jsx
+++ b/client/src/pages/Leaderboard.jsx
@@ -1,10 +1,69 @@
import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
import { api, formatCredits } from '../api';
+const PODIUM_META = {
+ 1: {
+ label: 'Champion',
+ bonus: 'Crown of the Forge',
+ placeClass: 'lb-place-1',
+ },
+ 2: {
+ label: 'Challenger',
+ bonus: 'Silver Crest',
+ placeClass: 'lb-place-2',
+ },
+ 3: {
+ label: 'Contender',
+ bonus: 'Bronze Mark',
+ placeClass: 'lb-place-3',
+ },
+};
+
+function PlayerAvatar({ username, avatarUrl, size = 'md' }) {
+ const initials = (username || '?').slice(0, 2).toUpperCase();
+ return (
+
@@ -174,11 +192,24 @@ export default function MultiPlayersPage() {
+ {avatarUrl ? 
: {initials}}
+
+ );
+}
+
+function WealthBreakdown({ balance, inventoryValue, totalWealth, compact }) {
+ if (compact) {
+ return (
+
+ {formatCredits(totalWealth)} cr
+
+ );
+ }
+ return (
+
+
+ );
+}
+
export default function Leaderboard() {
+ const navigate = useNavigate();
const [rows, setRows] = useState([]);
const [error, setError] = useState('');
+ const openPlayer = (username) => {
+ navigate(`/player/${encodeURIComponent(username)}`);
+ };
+
useEffect(() => {
let cancelled = false;
(async () => {
@@ -20,40 +79,105 @@ export default function Leaderboard() {
};
}, []);
+ const top3 = rows.slice(0, 3);
+ const rest = rows.slice(3);
+ // Podium visual order: 2nd | 1st | 3rd
+ const podiumOrder = [top3[1], top3[0], top3[2]].filter(Boolean);
+
return (
-
+ Total
+ {formatCredits(totalWealth)} cr
+
+
+
+ Balance {formatCredits(balance)}
+
+
+ Inventory {formatCredits(inventoryValue)}
+
+
+
+
+
{error &&
-
-
+ <>
+ {top3.length > 0 && (
+
+ {podiumOrder.map((row) => {
+ const meta = PODIUM_META[row.rank];
+ return (
+
+ );
+ })}
+
+ )}
+
+ {rest.length > 0 && (
+
+
+ )}
+
)}
);
diff --git a/client/src/pages/MultiPlayersPage.jsx b/client/src/pages/MultiPlayersPage.jsx
index 72877fc..057be70 100644
--- a/client/src/pages/MultiPlayersPage.jsx
+++ b/client/src/pages/MultiPlayersPage.jsx
@@ -2,9 +2,10 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
import { Link, Navigate } from 'react-router-dom';
import { api, formatCredits, formatChance } from '../api';
import { useAuth } from '../AuthContext';
-import ItemTile from '../components/ItemTile';
+import ItemTile, { itemValueCents } from '../components/ItemTile';
import CaseReel from '../components/CaseReel';
import { useCountdown } from '../hooks/useCountdown';
+import { onInventoryChanged } from '../inventoryEvents';
import { getSocket } from '../socket';
export default function MultiPlayersPage() {
@@ -22,7 +23,9 @@ export default function MultiPlayersPage() {
const [spinActive, setSpinActive] = useState(false);
const { label: timerLabel, remaining } = useCountdown(
- round?.status === 'open' ? round.endsAt : null
+ round?.status === 'open' && round?.endsAt && !round?.waitingForPlayers
+ ? round.endsAt
+ : null
);
const loadInventory = useCallback(async () => {
@@ -30,6 +33,16 @@ export default function MultiPlayersPage() {
setInventory(inv.inventory);
}, []);
+ const inventoryByValue = useMemo(
+ () =>
+ [...inventory].sort(
+ (a, b) =>
+ itemValueCents(b.item) - itemValueCents(a.item) ||
+ (b.valueCents ?? 0) - (a.valueCents ?? 0)
+ ),
+ [inventory]
+ );
+
useEffect(() => {
if (!user || user.role === 'admin') return undefined;
let cancelled = false;
@@ -46,8 +59,6 @@ export default function MultiPlayersPage() {
const onState = (state) => {
setRound(state);
if (state?.status === 'open') {
- setSpinning(false);
- setReelWinnerItemId(null);
loadInventory().catch(() => {});
}
};
@@ -62,7 +73,6 @@ export default function MultiPlayersPage() {
};
const onResult = (state) => {
setRound(state);
- setSpinning(false);
loadInventory().catch(() => {});
refresh().catch(() => {});
};
@@ -82,6 +92,14 @@ export default function MultiPlayersPage() {
};
}, [user, loadInventory, refresh]);
+ useEffect(() => {
+ if (!user || user.role === 'admin') return undefined;
+ return onInventoryChanged(() => {
+ loadInventory().catch(() => {});
+ refresh().catch(() => {});
+ });
+ }, [user, loadInventory, refresh]);
+
const maxItems = round?.maxItemsPerPlayer || 3;
const myDeposits = useMemo(
() => (round?.deposits || []).filter((d) => d.userId === user?.id),
@@ -158,7 +176,7 @@ export default function MultiPlayersPage() {
-
+
Modes
Leaderboard
-Richest players by balance + inventory value.
{error}
}
+
{rows.length === 0 && !error ? (
No players yet.
) : (
- | # | -Player | -Balance | -Inventory | -Total | -
|---|---|---|---|---|
| {row.rank} | -{row.username} | -{formatCredits(row.balance)} | -{formatCredits(row.inventoryValue)} | -{formatCredits(row.totalWealth)} cr | -
+ Rank
+ Player
+ Total
+
+ -
+ {rest.map((row) => (
+
- + + + ))} +
MultiPlayers Case
Live shared pot — win chance = your value / total pot.
Timer
- {round?.status === 'open' ? timerLabel : round?.status === 'spinning' ? 'SPIN' : '—'}
+ {round?.status === 'spinning' || spinning
+ ? 'SPIN'
+ : round?.waitingForPlayers
+ ? 'WAIT'
+ : round?.status === 'open' && round?.endsAt
+ ? timerLabel
+ : '—'}
- {round?.status === 'open' && remaining <= 5 && remaining > 0 && (
- closing…
+ {round?.waitingForPlayers && round?.status === 'open' && (
+
+ Need {round.minPlayers || 2} players ({round.players?.length || 0}/
+ {round.minPlayers || 2})
+
)}
+ {round?.status === 'open' &&
+ !round?.waitingForPlayers &&
+ remaining <= 5 &&
+ remaining > 0 && closing…}
Pot
@@ -289,20 +320,19 @@ export default function MultiPlayersPage() {
Place bet
- {inventory.length === 0 ? (
+ {inventoryByValue.length === 0 ? (
No free items — open a case.
) : (
- {inventory.map((inv) => (
+ {inventoryByValue.map((inv) => (
toggleSelect(inv.id)}
/>
))}
diff --git a/client/src/pages/PlayerProfilePage.jsx b/client/src/pages/PlayerProfilePage.jsx
new file mode 100644
index 0000000..f49f1bd
--- /dev/null
+++ b/client/src/pages/PlayerProfilePage.jsx
@@ -0,0 +1,257 @@
+import { api, formatCredits, formatLastConnection, formatPlayTime } from '../api';
+import { useAuth } from '../AuthContext';
+import ItemTile from '../components/ItemTile';
+import ProfileCaseStats from '../components/ProfileCaseStats';
+import ProfileCatalogBadges from '../components/ProfileCatalogBadges';
+import ProfileAchievementBadges from '../components/ProfileAchievementBadges';
+import ProfilePrestigeStats from '../components/ProfilePrestigeStats';
+import { Link, Navigate, useParams } from 'react-router-dom';
+import { useEffect, useMemo, useState } from 'react';
+
+const PAGE_SIZE = 50;
+
+export default function PlayerProfilePage() {
+ const { username } = useParams();
+ const { user } = useAuth();
+ const [data, setData] = useState(null);
+ const [error, setError] = useState('');
+ const [sort, setSort] = useState('value');
+ const [page, setPage] = useState(1);
+
+ useEffect(() => {
+ let cancelled = false;
+ (async () => {
+ try {
+ const result = await api.playerProfile(username);
+ if (!cancelled) setData(result);
+ } catch (err) {
+ if (!cancelled) setError(err.message);
+ }
+ })();
+ return () => {
+ cancelled = true;
+ };
+ }, [username]);
+
+ const inventory = data?.inventory ?? [];
+
+ const sorted = useMemo(() => {
+ const list = [...inventory];
+ if (sort === 'value') {
+ list.sort(
+ (a, b) =>
+ (b.valueCents ?? b.item?.valueCents ?? b.item?.marketValue) -
+ (a.valueCents ?? a.item?.valueCents ?? a.item?.marketValue)
+ );
+ } else {
+ list.sort((a, b) => new Date(b.obtainedAt) - new Date(a.obtainedAt));
+ }
+ return list;
+ }, [inventory, sort]);
+
+ const totalPages = Math.max(1, Math.ceil(sorted.length / PAGE_SIZE));
+ const currentPage = Math.min(page, totalPages);
+ const pageItems = useMemo(() => {
+ const start = (currentPage - 1) * PAGE_SIZE;
+ return sorted.slice(start, start + PAGE_SIZE);
+ }, [sorted, currentPage]);
+
+ useEffect(() => {
+ setPage(1);
+ }, [sort, username]);
+
+ useEffect(() => {
+ if (page > totalPages) setPage(totalPages);
+ }, [page, totalPages]);
+
+ if (user?.username === username) {
+ return
+
+ );
+}
diff --git a/client/src/pages/ProfilePage.jsx b/client/src/pages/ProfilePage.jsx
index ddfd07c..2f6dd00 100644
--- a/client/src/pages/ProfilePage.jsx
+++ b/client/src/pages/ProfilePage.jsx
@@ -1,10 +1,15 @@
-import { useEffect, useState } from 'react';
-import { Navigate } from 'react-router-dom';
-import { api, formatCredits } from '../api';
+import { api, formatCredits, formatLastConnection, formatPlayTime } from '../api';
import { useAuth } from '../AuthContext';
+import ProfileCaseStats from '../components/ProfileCaseStats';
+import ProfileCatalogBadges from '../components/ProfileCatalogBadges';
+import ProfileAchievementBadges from '../components/ProfileAchievementBadges';
+import ProfilePrestigeStats from '../components/ProfilePrestigeStats';
+import { Link, Navigate, useNavigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
export default function ProfilePage() {
- const { user, loading, refresh } = useAuth();
+ const { user, loading, refresh, logout } = useAuth();
+ const navigate = useNavigate();
const [profile, setProfile] = useState(null);
const [bio, setBio] = useState('');
const [currentPassword, setCurrentPassword] = useState('');
@@ -83,6 +88,17 @@ export default function ProfilePage() {
}
};
+ const onLogout = async () => {
+ setBusy(true);
+ try {
+ await logout();
+ navigate('/login', { replace: true });
+ } catch (err) {
+ setError(err.message);
+ setBusy(false);
+ }
+ };
+
if (loading) return
+
+ Achievements
+
+
+ );
+ }
+
+ if (!data) return
+
+
+
+ Player profile
+@{username}
+{error}
+
+ Back to leaderboard
+
+ Loading…
; + + const { user: player, profile } = data; + + return ( +
+
+
+
+
+
+
+ );
+}
diff --git a/client/src/pages/PrestigePage.jsx b/client/src/pages/PrestigePage.jsx
new file mode 100644
index 0000000..45c31ff
--- /dev/null
+++ b/client/src/pages/PrestigePage.jsx
@@ -0,0 +1,199 @@
+import { useEffect, useState } from 'react';
+import { Navigate } from 'react-router-dom';
+import { api, formatCredits } from '../api';
+import { useAuth } from '../AuthContext';
+
+const CHOICE_LABELS = {
+ chance: 'Chance',
+ gain: 'Gain',
+ key: 'Key progress',
+};
+
+export default function PrestigePage() {
+ const { user, loading, patchUser, refresh } = useAuth();
+ const [data, setData] = useState(null);
+ const [selected, setSelected] = useState(null);
+ const [confirmText, setConfirmText] = useState('');
+ const [error, setError] = useState('');
+ const [message, setMessage] = useState('');
+ const [busy, setBusy] = useState(false);
+
+ const load = async () => {
+ const result = await api.prestige();
+ setData(result);
+ };
+
+ useEffect(() => {
+ if (!user || user.role === 'admin') return undefined;
+ let cancelled = false;
+ (async () => {
+ try {
+ const result = await api.prestige();
+ if (!cancelled) setData(result);
+ } catch (err) {
+ if (!cancelled) setError(err.message);
+ }
+ })();
+ return () => {
+ cancelled = true;
+ };
+ }, [user?.id, user?.role]);
+
+ if (loading) return
+
+
+
+
+
+ Leaderboard
+
+ {player.username}
+Player profile
+
+
+
+
+
+
+ {player.avatarUrl ? (
+ 
+ ) : (
+ {player.username.slice(0, 2).toUpperCase()}
+ )}
+
+ {player.bio ? (
+ {player.bio}
+ ) : ( ++ No bio yet. +
+ )} +
+ Balance {formatCredits(player.balance)} cr
+
+
+
+ Stats
+-
+
- + Status{' '} + + {profile.presence?.isConnected ? 'Online' : 'Offline'} + + +
- + Play time{' '} + {formatPlayTime(profile.presence?.playTimeSeconds)} + +
- + Last connection{' '} + + {formatLastConnection(profile.presence?.lastConnection)} + + +
- + Joined {new Date(profile.createdAt).toLocaleDateString()} + +
- + Inventory{' '} + + {profile.inventoryCount} items · {formatCredits(profile.inventoryValue)} cr + + +
- + Cases opened {profile.casesOpened} + +
- + Jackpot wins {profile.jackpotWins} + +
- + Duel wins {profile.duelWins} + +
+
+ )}
+ Opens by case
+
+
+
+ {inventory.length > 0 && (
+
+
+ Inventory
+Items currently held by this player.
+
+
+ )}
+
+ {inventory.length === 0 ? (
+
+
+
+
+
+
+
+ {inventory.length} item{inventory.length === 1 ? '' : 's'}
+
+ No items in inventory.
+ ) : (
+ <>
+
+ {pageItems.map((inv) => (
+
+ {totalPages > 1 && (
+
+
+
+ Page {currentPage} / {totalPages}
+
+
+
+ )}
+
+ )}
+ Loading…
; + if (!user) returnLoading…
; + if (data && data.pageVisible === false) { + return
+
+
+ {error &&
+
+ {p && (
+ Prestige
++ Pay {formatCredits(cost)} cr, pick one permanent boost, then reset balance, inventory, + keys, and catalog. History is kept. Unlocks at {formatCredits(unlockAt)} cr total wealth. +
+
+ Prestige {p.count}
+
+ )}
+ {error}
}
+ {message && {message}
}
+
+ {p && (
+
+
+ )}
+
+
+ Chance
+ +{p.chanceBonus}%
+
+
+ Gains
+ +{p.gainBonus}%
+
+
+ Key opens
+ −{p.keyOpenReduction}
+
+
+ Cost
+ {formatCredits(cost)} cr
+ Your balance
+ {formatCredits(user.balance)} cr
+
+
+ {!data?.canAfford && (
+ You need {formatCredits(cost)} cr to prestige.
+ )} + {data?.lockedItems > 0 && ( +
+ Withdraw {data.lockedItems} locked item{data.lockedItems === 1 ? '' : 's'} from battles
+ before prestiging.
+
+ )}
+
+
+ {(data?.choices || []).map((c) => (
+
+ ))}
+
+
+
+
+
+ {data?.history?.length > 0 && (
+ + This permanently spends {formatCredits(cost)} cr and wipes your balance, inventory, case + keys, and catalog. Type PRESTIGE to confirm. +
+ + +
+
+ )}
+ History
+-
+ {data.history.map((h) => (
+
- + {CHOICE_LABELS[h.choice] || h.choice}{' '} + + · {new Date(h.createdAt).toLocaleString()} + + + ))} +
Loading…
; if (!user) returnProfile
@{user.username}
{error}
}
@@ -121,27 +140,67 @@ export default function ProfilePage() {
Stats
{profile ? ( --
-
- - Joined{' '} - {new Date(profile.createdAt).toLocaleDateString()} - -
- - Inventory{' '} - - {profile.inventoryCount} items · {formatCredits(profile.inventoryValue)} cr - - -
- - Cases opened {profile.casesOpened} - -
- - Jackpot wins {profile.jackpotWins} - -
- - Duel wins {profile.duelWins} - -
-
+
- + Status{' '} + + {profile.presence?.isConnected ? 'Online' : 'Offline'} + + +
- + Play time{' '} + {formatPlayTime(profile.presence?.playTimeSeconds)} + +
- + Last connection{' '} + + {formatLastConnection(profile.presence?.lastConnection)} + + +
- + Joined{' '} + {new Date(profile.createdAt).toLocaleDateString()} + +
- + Inventory{' '} + + {profile.inventoryCount} items · {formatCredits(profile.inventoryValue)} cr + + +
- + Cases opened {profile.casesOpened} + +
- + Jackpot wins {profile.jackpotWins} + +
- + Duel wins {profile.duelWins} + +
+
+ )}
+
) : (
Opens by case
+Loading stats…
)} @@ -194,6 +253,16 @@ export default function ProfilePage() { + +Session
++ Sign out of CaseForge on this device. +
+ +{error}
}