Session 42: Player Intelligence System — archetypes, stat strips, player profile, enhanced cards (2011 tests)
Built from the Claude Design "VYNDR Player Intelligence" bundle (10 sections). - Archetypes: src/services/archetypeService.js — 41 archetypes (15 NBA / 5 WNBA-unique / 15 MLB / 6 soccer), classify -> primary+secondary+blend. Frontend visual map web/src/lib/archetypes.js (colors verified == backend). ArchetypeBadge (full/ghost/tint + glyphs) + ArchetypeBlend (DNA bar). - StatStrip (compact/expanded): player name once, horizontal mono stats, inline GradeBadge props, onPlayerClick -> profile. - Stats API: extended src/routes/stats.js with /player/:name, /leaders, /game/:id (rate-limited). Aggregation in playerIntelService.js (sanitizes name param; grades cache; graceful on cold cache). Next proxies added. - Player Profile /player/[name]: all 9 design sections, graceful empty states. - Enhanced GameCard (MLB pitchers + player-grouped StatStrips) + GradeResultCard (archetype strip + stat context + VYNDR intelligence, optional/self-hiding via gradeAdapter.buildIntelFields). Player-name links wired everywhere. - Settings page replaces the S41 redirect (account/subscription/notifications/ display/responsible-play/danger-zone with DELETE-gated delete). LINKS to the real /settings/security MFA page — does not replace it. + BookChip. - Bonus: Stats Explorer /explore (real /api/stats/leaders leaderboard); added Explore + Settings to Nav MORE. Deferred (need data pipelines, Session 43): Team Hub, Offseason Intel, Slate redesign, Stats Explorer sub-panels. Backend 1940 -> 2011 tests (+71), 157 suites. Web build clean (exit 0). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,13 +1,212 @@
|
||||
import { redirect } from 'next/navigation';
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
|
||||
/**
|
||||
* /settings (Session 41 — P0 audit fix).
|
||||
* /settings (Session 42 — Player Intelligence design).
|
||||
*
|
||||
* The audit found /settings 404'd. Account/preferences already live on
|
||||
* /profile (the canonical surface), so forward there rather than build a
|
||||
* second screen that would drift out of sync. Server-side redirect — no
|
||||
* flash of an empty page.
|
||||
* Replaces the Session-41 redirect with the design's full settings surface.
|
||||
* NOTE: /settings/security is a REAL MFA enrollment page — this page LINKS to
|
||||
* it, it does not replace it.
|
||||
*/
|
||||
export default function SettingsPage() {
|
||||
redirect('/profile');
|
||||
|
||||
const Section = ({ label, color = 'var(--text-1)', dot = 'var(--g-a)', children }: { label: string; color?: string; dot?: string; children: React.ReactNode }) => (
|
||||
<div style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 12, padding: '18px 20px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 16 }}>
|
||||
<span style={{ width: 6, height: 6, background: dot, borderRadius: 1 }} />
|
||||
<span className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', color }}>{label}</span>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Row = ({ children }: { children: React.ReactNode }) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '9px 0', gap: 12, flexWrap: 'wrap' }}>{children}</div>
|
||||
);
|
||||
const Divider = () => <div style={{ height: 1, background: '#14141E', margin: '4px 0' }} />;
|
||||
|
||||
function Toggle({ on, onClick }: { on: boolean; onClick: () => void }) {
|
||||
return (
|
||||
<button onClick={onClick} aria-pressed={on} style={{ cursor: 'pointer', appearance: 'none', position: 'relative', width: 40, height: 22, borderRadius: 11, border: '1px solid var(--border-hi)', background: on ? 'var(--g-a)' : '#15151f' }}>
|
||||
<span style={{ position: 'absolute', top: 1, left: on ? 19 : 1, width: 18, height: 18, borderRadius: '50%', background: on ? '#06060B' : '#7a7a8e', transition: '.18s' }} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function tierLabel(tier: string) {
|
||||
if (tier === 'desk') return { label: 'DESK', color: '#00ffb8' };
|
||||
if (tier === 'analyst') return { label: 'ANALYST', color: 'var(--g-b)' };
|
||||
return { label: 'FREE', color: 'var(--text-1)' };
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
const router = useRouter();
|
||||
const { user, tier } = useAuth();
|
||||
const [emailAlerts, setEmailAlerts] = useState(true);
|
||||
const [pushAlerts, setPushAlerts] = useState(false);
|
||||
const [deleteText, setDeleteText] = useState('');
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [delError, setDelError] = useState('');
|
||||
|
||||
const plan = tierLabel(tier || 'free');
|
||||
const canDelete = deleteText === 'DELETE';
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!canDelete || deleting) return;
|
||||
setDeleting(true);
|
||||
setDelError('');
|
||||
try {
|
||||
const token = typeof window !== 'undefined' ? localStorage.getItem('sb-token') : null;
|
||||
const res = await fetch('/api/user/profile', {
|
||||
method: 'DELETE',
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
});
|
||||
if (res.ok) {
|
||||
router.replace('/?deleted=1');
|
||||
return;
|
||||
}
|
||||
// No fake success — if the backend can't process it, say so.
|
||||
setDelError('Account deletion could not be completed automatically. Email support@vyndr.app and we will remove your account within 48 hours.');
|
||||
} catch {
|
||||
setDelError('Network error. Try again, or email support@vyndr.app.');
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section style={{ maxWidth: 640, margin: '0 auto', padding: '24px 16px 120px' }}>
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<div className="mono" style={{ fontSize: 11, color: 'var(--g-a)', letterSpacing: '0.12em', marginBottom: 10 }}>SETTINGS</div>
|
||||
<h1 style={{ margin: 0, fontSize: 30, fontWeight: 800, letterSpacing: '-0.01em' }}>Settings</h1>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
{/* ACCOUNT */}
|
||||
<Section label="ACCOUNT">
|
||||
<Row>
|
||||
<span style={{ fontSize: 13, color: 'var(--text-1)' }}>Email</span>
|
||||
<span className="mono" style={{ fontSize: 13, color: 'var(--text-0)' }}>{user?.email || '—'}</span>
|
||||
</Row>
|
||||
<Divider />
|
||||
<Row>
|
||||
<span style={{ fontSize: 13, color: 'var(--text-1)' }}>Plan</span>
|
||||
<span className="mono" style={{ display: 'inline-flex', alignItems: 'center', fontWeight: 700, fontSize: 11, letterSpacing: '0.06em', color: plan.color, background: 'color-mix(in srgb, currentColor 12%, transparent)', border: '1px solid color-mix(in srgb, currentColor 40%, transparent)', padding: '3px 10px', borderRadius: 5 }}>{plan.label}</span>
|
||||
</Row>
|
||||
<Divider />
|
||||
<Row>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, color: 'var(--text-0)' }}>Security & two-factor</div>
|
||||
<div style={{ fontSize: 11, color: 'var(--text-1)', marginTop: 2 }}>Authenticator-app MFA</div>
|
||||
</div>
|
||||
<a href="/settings/security" className="mono" style={{ cursor: 'pointer', background: 'transparent', border: '1px solid var(--border-hi)', borderRadius: 8, padding: '8px 14px', fontSize: 11, fontWeight: 600, color: 'var(--text-1)', textDecoration: 'none' }}>MANAGE →</a>
|
||||
</Row>
|
||||
</Section>
|
||||
|
||||
{/* SUBSCRIPTION */}
|
||||
<Section label="SUBSCRIPTION">
|
||||
<Row>
|
||||
<div>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, color: '#fff' }}>VYNDR {plan.label === 'FREE' ? 'Free' : plan.label === 'DESK' ? 'Desk' : 'Analyst'}</div>
|
||||
<div className="mono" style={{ fontSize: 12, color: 'var(--text-1)', marginTop: 3 }}>{plan.label === 'FREE' ? '5 scans / month' : 'Active subscription'}</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 9 }}>
|
||||
{plan.label !== 'FREE' && (
|
||||
<button onClick={() => router.push('/profile')} className="mono" style={{ cursor: 'pointer', background: 'transparent', border: '1px solid var(--border-hi)', borderRadius: 8, padding: '9px 15px', fontSize: 11, fontWeight: 600, color: 'var(--text-1)' }}>MANAGE</button>
|
||||
)}
|
||||
<a href="/pricing" className="mono" style={{ cursor: 'pointer', background: 'var(--g-a)', border: '1px solid var(--g-a)', borderRadius: 8, padding: '9px 15px', fontSize: 11, fontWeight: 700, color: '#06060B', textDecoration: 'none' }}>{plan.label === 'FREE' ? 'UPGRADE' : 'CHANGE PLAN'}</a>
|
||||
</div>
|
||||
</Row>
|
||||
</Section>
|
||||
|
||||
{/* NOTIFICATIONS */}
|
||||
<Section label="NOTIFICATIONS">
|
||||
<Row>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, color: 'var(--text-0)' }}>Email alerts</div>
|
||||
<div style={{ fontSize: 11, color: 'var(--text-1)', marginTop: 2 }}>Grade locks and line moves</div>
|
||||
</div>
|
||||
<Toggle on={emailAlerts} onClick={() => setEmailAlerts((v) => !v)} />
|
||||
</Row>
|
||||
<Divider />
|
||||
<Row>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, color: 'var(--text-0)' }}>Push alerts</div>
|
||||
<div style={{ fontSize: 11, color: 'var(--text-1)', marginTop: 2 }}>Injury news for tracked players</div>
|
||||
</div>
|
||||
<Toggle on={pushAlerts} onClick={() => setPushAlerts((v) => !v)} />
|
||||
</Row>
|
||||
</Section>
|
||||
|
||||
{/* DISPLAY */}
|
||||
<Section label="DISPLAY PREFERENCES">
|
||||
<Row>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, color: 'var(--text-0)' }}>Display, odds format & accessibility</div>
|
||||
<div style={{ fontSize: 11, color: 'var(--text-1)', marginTop: 2 }}>Region, odds format, text size, motion, contrast, colorblind-safe</div>
|
||||
</div>
|
||||
<button onClick={() => window.__prefs?.()} className="mono" style={{ cursor: 'pointer', background: 'transparent', border: '1px solid var(--border-hi)', borderRadius: 8, padding: '8px 14px', fontSize: 11, fontWeight: 600, color: 'var(--text-1)' }}>OPEN</button>
|
||||
</Row>
|
||||
</Section>
|
||||
|
||||
{/* RESPONSIBLE PLAY */}
|
||||
<Section label="RESPONSIBLE PLAY" color="var(--text-1)" dot="var(--amber)">
|
||||
<Row>
|
||||
<span style={{ fontSize: 13, color: 'var(--text-0)' }}>Set a weekly time limit</span>
|
||||
<a href="/responsible-gambling" className="mono" style={{ cursor: 'pointer', background: 'transparent', border: '1px solid var(--border-hi)', borderRadius: 8, padding: '8px 14px', fontSize: 11, fontWeight: 600, color: 'var(--text-1)', textDecoration: 'none' }}>CONFIGURE</a>
|
||||
</Row>
|
||||
<Divider />
|
||||
<Row>
|
||||
<span style={{ fontSize: 13, color: 'var(--text-0)' }}>Self-exclusion</span>
|
||||
<a href="/responsible-gambling" className="mono" style={{ cursor: 'pointer', background: 'transparent', border: '1px solid #FFB34740', borderRadius: 8, padding: '8px 14px', fontSize: 11, fontWeight: 600, color: 'var(--amber)', textDecoration: 'none' }}>TAKE A BREAK</a>
|
||||
</Row>
|
||||
</Section>
|
||||
|
||||
{/* DANGER ZONE */}
|
||||
<div style={{ background: '#0E0808', border: '1px solid #3A1A1A', borderRadius: 12, padding: '18px 20px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 14 }}>
|
||||
<span style={{ width: 6, height: 6, background: 'var(--miss)', borderRadius: 1 }} />
|
||||
<span className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', color: '#FF7A6B' }}>DANGER ZONE</span>
|
||||
</div>
|
||||
<p style={{ margin: '0 0 14px', fontSize: 13, lineHeight: 1.55, color: '#9A8585' }}>
|
||||
Deleting your account is permanent. All grade history and tracked players will be lost. Type{' '}
|
||||
<strong className="mono" style={{ color: '#FF7A6B' }}>DELETE</strong> to confirm.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||||
<input
|
||||
value={deleteText}
|
||||
onChange={(e) => setDeleteText(e.target.value)}
|
||||
placeholder="Type DELETE"
|
||||
aria-label="Type DELETE to confirm account deletion"
|
||||
className="mono"
|
||||
style={{ flex: 1, minWidth: 160, appearance: 'none', background: '#0A0606', border: '1px solid #3A1A1A', borderRadius: 8, padding: '10px 13px', fontSize: 13, color: '#fff', letterSpacing: '0.08em', outline: 'none' }}
|
||||
/>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={!canDelete || deleting}
|
||||
className="mono"
|
||||
style={{
|
||||
cursor: canDelete && !deleting ? 'pointer' : 'not-allowed',
|
||||
appearance: 'none',
|
||||
background: canDelete ? 'var(--miss)' : '#1A0E0E',
|
||||
border: `1px solid ${canDelete ? 'var(--miss)' : '#3A1A1A'}`,
|
||||
borderRadius: 8,
|
||||
padding: '10px 18px',
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
color: canDelete ? '#0A0606' : '#6A4A4A',
|
||||
letterSpacing: '0.04em',
|
||||
transition: '.15s',
|
||||
}}
|
||||
>
|
||||
{deleting ? 'WORKING…' : 'DELETE ACCOUNT'}
|
||||
</button>
|
||||
</div>
|
||||
{delError && <p className="mono" style={{ marginTop: 12, fontSize: 12, color: '#FFB0A4', lineHeight: 1.5 }}>{delError}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user