Session 38: Design system Phase G — living layer, i18n/odds, a11y, paywall, parlay math (1890 tests)
VYNDR 2.0 conversion, Phase G (the systems that make the design alive). All 5 wired. Frontend-only; zero backend changes. - lib/parlayMath.js: correlation model (0.62/0.34/0.06/0) + parlayGrade penalty + grade->odds + combined odds (frontend; backend parlayService unchanged). - lib/oddsFormat.js: fmtOdds across american/decimal/fractional/implied with the totals-pass-through rule (safer than the prototype's parseAm, which would mis-convert 228.5) + region presets. - lib/prefs.js: applyPrefs sets <html data-*> (the S33 a11y CSS layer) + load/save. - lib/liveTick.js: single tick engine (SSR/test-safe, no auto-start, fresh state). - lib/checkout.js: checkoutUrl(plan). - LiveLayer (useLive/LiveNumber/HeartbeatBar) under the Nav ticker; GlobalHosts in layout applies prefs + registers __prefs/__goPaywall/__checkout + hosts the Preferences and Paywall modals. Nav read-meter is now a paywall trigger. Gotchas: useEffect can't return a Set.delete unsub directly (boolean != cleanup); header grew to 124px so layout paddingTop + Slate sticky-top updated to match. 18 new tests. Backend 1872 -> 1890, 146 suites, zero regressions. Web build clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -7,6 +7,7 @@ import Nav from '@/components/Nav';
|
||||
import Footer from '@/components/Footer';
|
||||
import AuthGate from '@/components/AuthGate';
|
||||
import HashRedirect from '@/components/vyndr/HashRedirect';
|
||||
import GlobalHosts from '@/components/vyndr/GlobalHosts';
|
||||
import ParlayTray from '@/components/ParlayTray';
|
||||
import BottomTabBar from '@/components/BottomTabBar';
|
||||
import InstallPrompt from '@/components/InstallPrompt';
|
||||
@@ -128,9 +129,9 @@ export default async function RootLayout({ children }: { children: React.ReactNo
|
||||
<ParlayProvider>
|
||||
<HashRedirect />
|
||||
<Nav />
|
||||
{/* Header = 60px nav + 32px ticker; offset main so content clears it. */}
|
||||
{/* Header = 60px nav + 32px ticker + 30px heartbeat (§8); offset main. */}
|
||||
<AuthGate>
|
||||
<main style={{ paddingTop: 96, minHeight: '100vh', paddingBottom: 80 }}>{children}</main>
|
||||
<main style={{ paddingTop: 124, minHeight: '100vh', paddingBottom: 80 }}>{children}</main>
|
||||
</AuthGate>
|
||||
<Footer />
|
||||
<ParlayTray />
|
||||
@@ -141,6 +142,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
|
||||
<MFAChallenge />
|
||||
<CookieConsent />
|
||||
<SentryInit />
|
||||
{/* Session 38 — prefs apply + paywall/checkout/prefs globals (§9/§10/§12) */}
|
||||
<GlobalHosts />
|
||||
</ParlayProvider>
|
||||
</ExplainModeProvider>
|
||||
</AuthProvider>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useState } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { Wordmark, Ticker } from '@/components/vyndr';
|
||||
import { HeartbeatBar } from '@/components/vyndr/LiveLayer';
|
||||
import NotificationBell from '@/components/NotificationBell';
|
||||
// Nav labels are English literals for now; nav-string i18n lands in Phase G
|
||||
// (Session 38) once the locale dictionaries carry slate/terminal/etc. keys.
|
||||
@@ -190,21 +191,41 @@ export default function Nav() {
|
||||
<span>Query</span>
|
||||
</a>
|
||||
|
||||
{/* Preferences (language / odds format / accessibility) — §9/§10 */}
|
||||
<button
|
||||
onClick={() => typeof window !== 'undefined' && window.__prefs && window.__prefs()}
|
||||
aria-label="Language & accessibility preferences"
|
||||
title="Language & accessibility"
|
||||
style={{ width: 30, height: 30, borderRadius: 8, border: '1px solid var(--border-hi)', background: 'var(--bg-2)', color: 'var(--text-1)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
||||
<circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{user && <NotificationBell />}
|
||||
|
||||
{user ? (
|
||||
<div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
|
||||
{showReadCounter && scansRemaining != null && tier === 'free' && (
|
||||
<span
|
||||
// Read meter is a live paywall trigger (§12): tapping it (or
|
||||
// hitting 0) opens the paywall.
|
||||
<button
|
||||
onClick={() => typeof window !== 'undefined' && window.__goPaywall && window.__goPaywall()}
|
||||
className="mono"
|
||||
aria-label={`${scansRemaining} of 5 reads remaining — upgrade`}
|
||||
style={{
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: 0,
|
||||
color: scansRemaining <= 1 ? 'var(--g-c)' : 'var(--text-1)',
|
||||
}}
|
||||
>
|
||||
{scansRemaining}/5 · MO
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
{tier !== 'free' && (
|
||||
<span
|
||||
@@ -376,8 +397,9 @@ export default function Nav() {
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Ticker under the bar — sample data; real feed wires in Session 38 */}
|
||||
{/* Ticker + heartbeat under the bar (§8 living layer) */}
|
||||
<Ticker items={TICKER_ITEMS} height={32} />
|
||||
<HeartbeatBar />
|
||||
|
||||
<style jsx>{`
|
||||
@media (min-width: 768px) {
|
||||
|
||||
@@ -555,7 +555,7 @@ export default function Slate({ initialTab = 'all', tier = 'free' }: SlateProps)
|
||||
<div
|
||||
style={{
|
||||
position: 'sticky',
|
||||
top: 64, // matches Nav height
|
||||
top: 122, // clears nav (60) + ticker (32) + heartbeat (30) — Session 38
|
||||
zIndex: 5,
|
||||
background: 'var(--bg-0, #0A0A0F)',
|
||||
paddingTop: 12,
|
||||
|
||||
@@ -0,0 +1,208 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { applyPrefs, loadPrefs, savePrefs, DEFAULTS } from '@/lib/prefs';
|
||||
import { REGIONS, ODDS_FORMATS, regionPreset } from '@/lib/oddsFormat';
|
||||
import { checkoutUrl, PLAN_PRICES } from '@/lib/checkout';
|
||||
import SectionHead from '@/components/vyndr/SectionHead';
|
||||
import VBtn from '@/components/vyndr/VBtn';
|
||||
|
||||
// Augment the window with the design's global hosts (§12).
|
||||
declare global {
|
||||
interface Window {
|
||||
__prefs?: () => void;
|
||||
__goPaywall?: () => void;
|
||||
__checkout?: (plan: string) => void;
|
||||
}
|
||||
}
|
||||
|
||||
type Prefs = typeof DEFAULTS;
|
||||
|
||||
/**
|
||||
* GlobalHosts (§9/§10/§12) — mounted once in the layout. On mount it:
|
||||
* - applies stored a11y/i18n prefs to <html> (the CSS layer keys off data-*),
|
||||
* - registers window.__prefs / __goPaywall / __checkout,
|
||||
* - hosts the Preferences modal and the Paywall modal.
|
||||
*/
|
||||
export default function GlobalHosts() {
|
||||
const [prefs, setPrefs] = useState<Prefs>(DEFAULTS);
|
||||
const [prefsOpen, setPrefsOpen] = useState(false);
|
||||
const [paywallOpen, setPaywallOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const loaded = loadPrefs();
|
||||
setPrefs(loaded);
|
||||
applyPrefs(loaded);
|
||||
window.__prefs = () => setPrefsOpen(true);
|
||||
window.__goPaywall = () => setPaywallOpen(true);
|
||||
window.__checkout = (plan: string) => {
|
||||
window.location.href = checkoutUrl(plan);
|
||||
};
|
||||
return () => {
|
||||
delete window.__prefs;
|
||||
delete window.__goPaywall;
|
||||
delete window.__checkout;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const update = (patch: Partial<Prefs>) => {
|
||||
setPrefs((prev) => {
|
||||
let next = { ...prev, ...patch };
|
||||
// Region preset cascades odds + currency.
|
||||
if (patch.region) {
|
||||
const r = regionPreset(patch.region);
|
||||
next = { ...next, odds: r.odds, currency: r.currency };
|
||||
}
|
||||
savePrefs(next);
|
||||
applyPrefs(next);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{prefsOpen && <PrefsModal prefs={prefs} update={update} onClose={() => setPrefsOpen(false)} />}
|
||||
{paywallOpen && <PaywallModal onClose={() => setPaywallOpen(false)} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const overlay: React.CSSProperties = {
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
zIndex: 80,
|
||||
background: 'rgba(6,6,11,.7)',
|
||||
backdropFilter: 'blur(4px)',
|
||||
WebkitBackdropFilter: 'blur(4px)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 16,
|
||||
};
|
||||
|
||||
const panel: React.CSSProperties = {
|
||||
width: '100%',
|
||||
maxWidth: 460,
|
||||
maxHeight: '88vh',
|
||||
overflowY: 'auto',
|
||||
background: 'var(--bg-1)',
|
||||
border: '1px solid var(--border-hi)',
|
||||
borderRadius: 14,
|
||||
position: 'relative',
|
||||
};
|
||||
|
||||
function Row({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '12px 18px', borderBottom: '1px solid var(--border)' }}>
|
||||
<span className="mono" style={{ fontSize: 12, color: 'var(--text-0)', letterSpacing: '0.04em' }}>{label}</span>
|
||||
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Seg({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
aria-pressed={active}
|
||||
className="mono"
|
||||
style={{
|
||||
minHeight: 30,
|
||||
padding: '5px 10px',
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.04em',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
border: `1px solid ${active ? 'var(--g-a)' : 'var(--border-hi)'}`,
|
||||
background: active ? 'color-mix(in srgb, var(--g-a) 16%, transparent)' : 'transparent',
|
||||
color: active ? 'var(--g-a)' : 'var(--text-1)',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function PrefsModal({ prefs, update, onClose }: { prefs: Prefs; update: (p: Partial<Prefs>) => void; onClose: () => void }) {
|
||||
return (
|
||||
<div className="fade-in" role="dialog" aria-modal="true" aria-label="Preferences" style={overlay} onClick={onClose}>
|
||||
<div className="scanlines" style={panel} onClick={(e) => e.stopPropagation()}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
|
||||
<SectionHead accent="var(--g-a)">PREFERENCES</SectionHead>
|
||||
<button onClick={onClose} aria-label="Close" style={{ background: 'transparent', border: '1px solid var(--border-hi)', borderRadius: 6, color: 'var(--text-1)', width: 30, height: 30, cursor: 'pointer' }}>×</button>
|
||||
</div>
|
||||
|
||||
<Row label="Region">
|
||||
{Object.keys(REGIONS).map((r) => (
|
||||
<Seg key={r} active={prefs.region === r} onClick={() => update({ region: r })}>{r}</Seg>
|
||||
))}
|
||||
</Row>
|
||||
<Row label="Odds format">
|
||||
{ODDS_FORMATS.map((f) => (
|
||||
<Seg key={f} active={prefs.odds === f} onClick={() => update({ odds: f })}>{f.slice(0, 4)}</Seg>
|
||||
))}
|
||||
</Row>
|
||||
<Row label="Text size">
|
||||
{(['sm', 'base', 'lg', 'xl'] as const).map((t) => (
|
||||
<Seg key={t} active={prefs.text === t} onClick={() => update({ text: t })}>{t === 'base' ? 'M' : t.toUpperCase()}</Seg>
|
||||
))}
|
||||
</Row>
|
||||
<Row label="Reduce motion">
|
||||
<Seg active={prefs.motion === 'reduced'} onClick={() => update({ motion: prefs.motion === 'reduced' ? 'on' : 'reduced' })}>{prefs.motion === 'reduced' ? 'ON' : 'OFF'}</Seg>
|
||||
</Row>
|
||||
<Row label="High contrast">
|
||||
<Seg active={prefs.contrast === 'high'} onClick={() => update({ contrast: prefs.contrast === 'high' ? 'off' : 'high' })}>{prefs.contrast === 'high' ? 'ON' : 'OFF'}</Seg>
|
||||
</Row>
|
||||
<Row label="Colorblind-safe">
|
||||
<Seg active={prefs.cb === 'on'} onClick={() => update({ cb: prefs.cb === 'on' ? 'off' : 'on' })}>{prefs.cb === 'on' ? 'ON' : 'OFF'}</Seg>
|
||||
</Row>
|
||||
<Row label="Readable font">
|
||||
<Seg active={prefs.font === 'readable'} onClick={() => update({ font: prefs.font === 'readable' ? 'default' : 'readable' })}>{prefs.font === 'readable' ? 'ON' : 'OFF'}</Seg>
|
||||
</Row>
|
||||
<div className="mono" style={{ padding: '12px 18px', fontSize: 10.5, color: 'var(--text-2)' }}>
|
||||
Saved to this device. Totals & stat lines never reformat — only odds.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PaywallModal({ onClose }: { onClose: () => void }) {
|
||||
const tiers = [
|
||||
{ id: 'analyst', name: 'Analyst', price: PLAN_PRICES.analyst, lines: ['Unlimited reads', 'Every signal', 'Kill conditions'] },
|
||||
{ id: 'desk', name: 'Desk', price: PLAN_PRICES.desk, lines: ['Everything in Analyst', 'Alt-line ladder', 'Full intelligence layer'] },
|
||||
];
|
||||
return (
|
||||
<div className="fade-in" role="dialog" aria-modal="true" aria-label="Upgrade" style={overlay} onClick={onClose}>
|
||||
<div className="scanlines" style={panel} onClick={(e) => e.stopPropagation()}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
|
||||
<SectionHead accent="var(--amber)">▚ SIGNAL EXHAUSTED</SectionHead>
|
||||
<button onClick={onClose} aria-label="Close" style={{ background: 'transparent', border: '1px solid var(--border-hi)', borderRadius: 6, color: 'var(--text-1)', width: 30, height: 30, cursor: 'pointer' }}>×</button>
|
||||
</div>
|
||||
<div style={{ padding: 18 }}>
|
||||
<p className="mono" style={{ fontSize: 13, color: 'var(--text-1)', lineHeight: 1.6, marginBottom: 16 }}>
|
||||
You've used your free reads. Unlock the full intelligence layer — founder pricing locks for life.
|
||||
</p>
|
||||
<div style={{ display: 'grid', gap: 12 }}>
|
||||
{tiers.map((t) => (
|
||||
<div key={t.id} style={{ border: '1px solid var(--border-hi)', borderRadius: 10, padding: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
|
||||
<span style={{ fontSize: 16, fontWeight: 800 }}>{t.name}</span>
|
||||
<span className="mono" style={{ fontSize: 15, fontWeight: 800, color: 'var(--g-a)' }}>{t.price}<span style={{ fontSize: 11, color: 'var(--text-2)' }}>/mo</span></span>
|
||||
</div>
|
||||
{t.lines.map((l) => (
|
||||
<div key={l} className="mono" style={{ fontSize: 11.5, color: 'var(--text-1)', marginBottom: 4 }}>· {l}</div>
|
||||
))}
|
||||
<VBtn variant={t.id === 'analyst' ? 'primary' : 'outline'} style={{ width: '100%', marginTop: 12 }} onClick={() => window.__checkout && window.__checkout(t.id)}>
|
||||
Go {t.name}
|
||||
</VBtn>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState, type CSSProperties } from 'react';
|
||||
import { liveTick } from '@/lib/liveTick';
|
||||
|
||||
/** Subscribe to the single living-layer tick (§8). Starts the shared interval
|
||||
* on first mount; many components can call this — one interval, fan-out. */
|
||||
export function useLive() {
|
||||
const [s, setS] = useState(liveTick.state);
|
||||
useEffect(() => {
|
||||
liveTick.start();
|
||||
const unsub = liveTick.subscribe(setS);
|
||||
return () => {
|
||||
unsub();
|
||||
};
|
||||
}, []);
|
||||
return s;
|
||||
}
|
||||
|
||||
/** A number that pops (count-tick) when its value changes. Data, not chrome —
|
||||
* the pop is a one-shot transform, killed under reduced-motion by the CSS. */
|
||||
export function LiveNumber({ value, className = '', style = {} }: { value: number | string; className?: string; style?: CSSProperties }) {
|
||||
const [pop, setPop] = useState(false);
|
||||
const prev = useRef(value);
|
||||
useEffect(() => {
|
||||
if (prev.current !== value) {
|
||||
prev.current = value;
|
||||
setPop(true);
|
||||
const t = setTimeout(() => setPop(false), 500);
|
||||
return () => clearTimeout(t);
|
||||
}
|
||||
}, [value]);
|
||||
return (
|
||||
<span className={`mono ${pop ? 'count-tick' : ''} ${className}`} style={{ display: 'inline-block', ...style }}>
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const EKG = 'M0 12 H10 L13 4 L16 20 L19 12 H30 L33 9 L36 15 L39 12 H50';
|
||||
|
||||
/** The system heartbeat (§8): scrolling EKG + SIGNAL LIVE + graded count +
|
||||
* breathing neural % + sync clock. Sits under the ticker. */
|
||||
export function HeartbeatBar() {
|
||||
const live = useLive();
|
||||
const clock = `${String(Math.floor(live.tick / 60) % 60).padStart(2, '0')}:${String(live.tick % 60).padStart(2, '0')}`;
|
||||
return (
|
||||
<div
|
||||
className="scanlines"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 14,
|
||||
height: 30,
|
||||
padding: '0 16px',
|
||||
background: 'var(--bg-0)',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
overflow: 'hidden',
|
||||
fontSize: 10.5,
|
||||
}}
|
||||
>
|
||||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
|
||||
<span className="live-dot" style={{ background: 'var(--g-a)' }} />
|
||||
<span className="mono" style={{ color: 'var(--g-a)', fontWeight: 700, letterSpacing: '0.12em' }}>SIGNAL LIVE</span>
|
||||
</span>
|
||||
|
||||
{/* EKG strip */}
|
||||
<div style={{ flex: 1, overflow: 'hidden', height: 22, maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)' }}>
|
||||
<div className="ekg-track" style={{ height: 22 }}>
|
||||
{[0, 1].map((k) => (
|
||||
<svg key={k} width="200" height="22" viewBox="0 0 200 22" style={{ display: 'block' }} aria-hidden>
|
||||
{[0, 50, 100, 150].map((x) => (
|
||||
<path key={x} d={EKG} transform={`translate(${x},0)`} fill="none" stroke="var(--g-a)" strokeWidth="1.2" opacity="0.55" />
|
||||
))}
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className="mono" style={{ color: 'var(--text-1)', flexShrink: 0 }}>
|
||||
<LiveNumber value={live.graded} style={{ color: 'var(--text-0)', fontWeight: 700 }} /> graded
|
||||
</span>
|
||||
<span className="mono" style={{ color: 'var(--text-1)', flexShrink: 0 }}>
|
||||
neural <span style={{ color: 'var(--g-a)', fontWeight: 700 }}>{live.neural}%</span>
|
||||
</span>
|
||||
<span className="mono" style={{ color: 'var(--text-2)', flexShrink: 0 }}>SYNC {clock}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/* VYNDR 2.0 — checkout helper (§12). CommonJS so the paywall imports it
|
||||
AND Jest verifies the tier→URL mapping. */
|
||||
|
||||
const PLAN_PRICES = { analyst: '$14.99', desk: '$44.99' };
|
||||
|
||||
/** Build the Stripe checkout URL for a plan tier. */
|
||||
function checkoutUrl(plan) {
|
||||
const tier = plan === 'desk' ? 'desk' : 'analyst';
|
||||
return `/api/checkout?tier=${tier}`;
|
||||
}
|
||||
|
||||
module.exports = { checkoutUrl, PLAN_PRICES };
|
||||
@@ -0,0 +1,66 @@
|
||||
/* ============================================================
|
||||
VYNDR 2.0 — living-layer tick engine (§8).
|
||||
ONE interval, many subscribers (fan-out). Drives HeartbeatBar,
|
||||
LiveNumber, NeuralBrain. Plain CommonJS so the React hook imports it
|
||||
AND Jest drives it manually via tick().
|
||||
|
||||
Does NOT auto-start on import (would run in SSR/tests). The React hook
|
||||
calls start() on mount; tests call tick() directly. Animations are gated
|
||||
behind reduced-motion in the CSS layer (Session 33), not here — the tick
|
||||
only updates data.
|
||||
============================================================ */
|
||||
|
||||
const INITIAL = { tick: 0, graded: 247, neural: 96, aPlus: 6, cascades: 11 };
|
||||
|
||||
const liveTick = {
|
||||
listeners: new Set(),
|
||||
state: { ...INITIAL },
|
||||
_timer: null,
|
||||
|
||||
subscribe(fn) {
|
||||
this.listeners.add(fn);
|
||||
return () => this.listeners.delete(fn);
|
||||
},
|
||||
|
||||
_notify() {
|
||||
for (const fn of this.listeners) fn(this.state);
|
||||
},
|
||||
|
||||
/** Advance one tick. New state object so React subscribers re-render. */
|
||||
tick() {
|
||||
const prev = this.state;
|
||||
const t = prev.tick + 1;
|
||||
this.state = {
|
||||
tick: t,
|
||||
// graded count creeps up roughly every ~7s
|
||||
graded: prev.graded + (t % 7 === 0 ? 1 : 0),
|
||||
// neural % "breathes" 90–98 deterministically (sin-driven, test-safe)
|
||||
neural: 94 + Math.round(Math.sin(t / 3) * 4),
|
||||
aPlus: prev.aPlus + (t % 23 === 0 ? 1 : 0),
|
||||
cascades: prev.cascades,
|
||||
};
|
||||
this._notify();
|
||||
return this.state;
|
||||
},
|
||||
|
||||
start(intervalMs = 1000) {
|
||||
if (this._timer || typeof setInterval === 'undefined') return;
|
||||
this._timer = setInterval(() => this.tick(), intervalMs);
|
||||
if (this._timer && typeof this._timer.unref === 'function') this._timer.unref();
|
||||
},
|
||||
|
||||
stop() {
|
||||
if (this._timer) {
|
||||
clearInterval(this._timer);
|
||||
this._timer = null;
|
||||
}
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.stop();
|
||||
this.state = { ...INITIAL };
|
||||
this.listeners.clear();
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = { liveTick, INITIAL };
|
||||
@@ -0,0 +1,98 @@
|
||||
/* ============================================================
|
||||
VYNDR 2.0 — odds formatting + region presets (§9).
|
||||
Plain CommonJS so components import it (allowJs) AND Jest tests it.
|
||||
|
||||
CRITICAL (the #1 i18n footgun): fmtOdds only converts MONEYLINES —
|
||||
bare signed-integer strings (+150 / -110) or integer numbers (the
|
||||
grade→odds map). Totals/lines/spreads like 228.5, 229, -7.5 PASS
|
||||
THROUGH UNCHANGED. Apply to moneylines/book odds/parlay legs; NEVER
|
||||
to O/U totals or stat lines.
|
||||
|
||||
This deliberately DEVIATES from the prototype's parseAm, whose regex
|
||||
accepted decimals (`228.5` would have been mis-converted to a fake
|
||||
implied % on O/U cells). The prompt's spec is authoritative here.
|
||||
============================================================ */
|
||||
|
||||
const REGIONS = {
|
||||
US: { label: 'United States', odds: 'american', currency: 'USD' },
|
||||
UK: { label: 'United Kingdom', odds: 'fractional', currency: 'GBP' },
|
||||
EU: { label: 'Europe', odds: 'decimal', currency: 'EUR' },
|
||||
BR: { label: 'Brazil', odds: 'decimal', currency: 'BRL' },
|
||||
AU: { label: 'Australia', odds: 'decimal', currency: 'AUD' },
|
||||
};
|
||||
|
||||
const CURRENCIES = { USD: '$', GBP: '£', EUR: '€', BRL: 'R$', AUD: 'A$' };
|
||||
|
||||
const ODDS_FORMATS = ['american', 'decimal', 'fractional', 'implied'];
|
||||
|
||||
function gcd(a, b) {
|
||||
a = Math.abs(a);
|
||||
b = Math.abs(b);
|
||||
while (b) {
|
||||
[a, b] = [b, a % b];
|
||||
}
|
||||
return a || 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the American-odds integer for a moneyline input, or null if the
|
||||
* value is NOT a moneyline (and must pass through unchanged).
|
||||
* - number → only an integer counts (the grade→odds map); 228.5 → null
|
||||
* - string → only an explicitly SIGNED integer (+150 / -110); "228.5",
|
||||
* "229", "-7.5" → null
|
||||
*/
|
||||
function parseMoneyline(value) {
|
||||
if (typeof value === 'number') return Number.isInteger(value) ? value : null;
|
||||
if (typeof value !== 'string') return null;
|
||||
return /^[+-]\d+$/.test(value.trim()) ? parseInt(value, 10) : null;
|
||||
}
|
||||
|
||||
function americanToDecimal(am) {
|
||||
return am > 0 ? am / 100 + 1 : 100 / -am + 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format an odds value into the requested style. Non-moneyline inputs are
|
||||
* returned verbatim (the pass-through guarantee).
|
||||
*/
|
||||
function fmtOdds(value, format = 'american') {
|
||||
const am = parseMoneyline(value);
|
||||
if (am === null) return value;
|
||||
if (format === 'american') return (am > 0 ? '+' : '') + Math.round(am);
|
||||
const dec = americanToDecimal(am);
|
||||
if (format === 'decimal') return dec.toFixed(2);
|
||||
if (format === 'implied') return Math.round((1 / dec) * 100) + '%';
|
||||
// fractional
|
||||
let n;
|
||||
let d;
|
||||
if (am > 0) {
|
||||
n = Math.round(am);
|
||||
d = 100;
|
||||
} else {
|
||||
n = 100;
|
||||
d = Math.round(-am);
|
||||
}
|
||||
const g = gcd(n, d);
|
||||
return `${n / g}/${d / g}`;
|
||||
}
|
||||
|
||||
/** Region → { odds, currency, currencySymbol } preset (§9). */
|
||||
function regionPreset(region) {
|
||||
const r = REGIONS[region] || REGIONS.US;
|
||||
return { odds: r.odds, currency: r.currency, currencySymbol: CURRENCIES[r.currency] || '$' };
|
||||
}
|
||||
|
||||
function currencySymbol(code) {
|
||||
return CURRENCIES[code] || '$';
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
REGIONS,
|
||||
CURRENCIES,
|
||||
ODDS_FORMATS,
|
||||
parseMoneyline,
|
||||
americanToDecimal,
|
||||
fmtOdds,
|
||||
regionPreset,
|
||||
currencySymbol,
|
||||
};
|
||||
@@ -0,0 +1,96 @@
|
||||
/* ============================================================
|
||||
VYNDR 2.0 — parlay correlation math (§12).
|
||||
Ported from the prototype's vyndr-parlay.jsx. Plain CommonJS so the
|
||||
Parlay Lab imports it (allowJs) AND Jest exercises it directly.
|
||||
|
||||
NOTE: the BACKEND parlayService (Session 28) owns server-side combined
|
||||
odds + suggestions. This module is the FRONTEND correlation model that
|
||||
powers the Parlay Lab's live matrix + grade penalty.
|
||||
============================================================ */
|
||||
|
||||
// Grade → representative American odds (the prototype's GRADE_ODDS).
|
||||
const GRADE_ODDS = { 'A+': -135, A: 110, 'A-': 115, 'B+': 125, B: 135, 'B-': 150, C: 175, D: 240 };
|
||||
|
||||
function amToDec(am) {
|
||||
return am > 0 ? am / 100 + 1 : 100 / -am + 1;
|
||||
}
|
||||
function decToAm(dec) {
|
||||
return dec >= 2 ? Math.round((dec - 1) * 100) : Math.round(-100 / (dec - 1));
|
||||
}
|
||||
function fmtAmerican(am) {
|
||||
return (am > 0 ? '+' : '') + am;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pairwise correlation (§12): same player legs move together hardest,
|
||||
* then same team, then same league, then ~independent across sports.
|
||||
*/
|
||||
function getCorrelation(legA, legB) {
|
||||
if (!legA || !legB) return 0;
|
||||
if (legA.player && legA.player === legB.player) return 0.62;
|
||||
if (legA.team && legA.team === legB.team && legA.sport === legB.sport) return 0.34;
|
||||
if (legA.sport && legA.sport === legB.sport) return 0.06;
|
||||
return 0;
|
||||
}
|
||||
|
||||
/** Highest pairwise correlation across the slip (the worst hidden drag). */
|
||||
function maxCorrelation(legs) {
|
||||
let max = 0;
|
||||
for (let i = 0; i < legs.length; i++) {
|
||||
for (let j = i + 1; j < legs.length; j++) {
|
||||
max = Math.max(max, getCorrelation(legs[i], legs[j]));
|
||||
}
|
||||
}
|
||||
return max;
|
||||
}
|
||||
|
||||
/** All correlated pairs as [i, j, correlation]. */
|
||||
function correlationPairs(legs) {
|
||||
const pairs = [];
|
||||
for (let i = 0; i < legs.length; i++) {
|
||||
for (let j = i + 1; j < legs.length; j++) {
|
||||
pairs.push([i, j, getCorrelation(legs[i], legs[j])]);
|
||||
}
|
||||
}
|
||||
return pairs;
|
||||
}
|
||||
|
||||
const GRADE_ORDER = ['A+', 'A', 'B+', 'B', 'C', 'D'];
|
||||
|
||||
/**
|
||||
* Combined parlay grade. Averages the leg grades, then bumps the slip DOWN
|
||||
* one tier when any pair is strongly correlated (>0.4) — correlated stacks
|
||||
* are riskier than the books' independent pricing implies.
|
||||
*/
|
||||
function parlayGrade(legs) {
|
||||
if (!legs || !legs.length) return '—';
|
||||
const avg = legs.reduce((s, l) => s + Math.max(0, GRADE_ORDER.indexOf(String(l.grade || 'B').replace('-', ''))), 0) / legs.length;
|
||||
const penalty = maxCorrelation(legs) > 0.4 ? 1 : 0;
|
||||
const idx = Math.min(GRADE_ORDER.length - 1, Math.round(avg + penalty));
|
||||
return GRADE_ORDER[idx];
|
||||
}
|
||||
|
||||
/** Combined decimal odds (product of per-leg decimal odds). */
|
||||
function combinedDecimal(legs) {
|
||||
return legs.reduce((d, l) => d * amToDec(GRADE_ODDS[l.grade] != null ? GRADE_ODDS[l.grade] : 110), 1);
|
||||
}
|
||||
|
||||
/** Combined odds as an American string, or "—" for an empty slip. */
|
||||
function combinedAmerican(legs) {
|
||||
if (!legs || !legs.length) return '—';
|
||||
return fmtAmerican(decToAm(combinedDecimal(legs)));
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
GRADE_ODDS,
|
||||
GRADE_ORDER,
|
||||
amToDec,
|
||||
decToAm,
|
||||
fmtAmerican,
|
||||
getCorrelation,
|
||||
maxCorrelation,
|
||||
correlationPairs,
|
||||
parlayGrade,
|
||||
combinedDecimal,
|
||||
combinedAmerican,
|
||||
};
|
||||
@@ -0,0 +1,73 @@
|
||||
/* ============================================================
|
||||
VYNDR 2.0 — preferences store (§9 i18n + §10 a11y).
|
||||
Plain CommonJS so the modal/applier import it (allowJs) AND Jest tests
|
||||
the apply/load/save logic with a fake element + fake storage.
|
||||
|
||||
The CSS layer already exists (Session 33 added the <html data-*>
|
||||
overrides to globals.css). This module SETS those attributes.
|
||||
============================================================ */
|
||||
|
||||
const PREFS_KEY = 'vyndr_prefs';
|
||||
|
||||
const DEFAULTS = {
|
||||
lang: 'en',
|
||||
region: 'US',
|
||||
odds: 'american',
|
||||
currency: 'USD',
|
||||
motion: 'on', // 'on' | 'reduced'
|
||||
contrast: 'off', // 'off' | 'high'
|
||||
text: 'base', // 'sm' | 'base' | 'lg' | 'xl'
|
||||
cb: 'off', // 'off' | 'on' (colorblind-safe)
|
||||
font: 'default', // 'default' | 'readable'
|
||||
};
|
||||
|
||||
/**
|
||||
* Apply preferences to a document element by setting/removing the data-*
|
||||
* attributes the CSS layer keys off. `el` defaults to document.documentElement;
|
||||
* tests pass a fake element exposing setAttribute/removeAttribute.
|
||||
*/
|
||||
function applyPrefs(prefs, el) {
|
||||
const target = el || (typeof document !== 'undefined' ? document.documentElement : null);
|
||||
if (!target) return;
|
||||
const p = { ...DEFAULTS, ...(prefs || {}) };
|
||||
|
||||
const setOrRemove = (attr, value) => {
|
||||
if (value == null) target.removeAttribute(attr);
|
||||
else target.setAttribute(attr, value);
|
||||
};
|
||||
|
||||
setOrRemove('data-motion', p.motion === 'reduced' ? 'reduced' : null);
|
||||
setOrRemove('data-contrast', p.contrast === 'high' ? 'high' : null);
|
||||
setOrRemove('data-text', p.text && p.text !== 'base' ? p.text : null);
|
||||
setOrRemove('data-cb', p.cb === 'on' || p.cb === '1' ? '1' : null);
|
||||
setOrRemove('data-font', p.font === 'readable' ? 'readable' : null);
|
||||
}
|
||||
|
||||
/** Read persisted prefs merged over defaults. `storage` defaults to localStorage. */
|
||||
function loadPrefs(storage) {
|
||||
const store = storage || (typeof localStorage !== 'undefined' ? localStorage : null);
|
||||
if (!store) return { ...DEFAULTS };
|
||||
try {
|
||||
const raw = store.getItem(PREFS_KEY);
|
||||
if (!raw) return { ...DEFAULTS };
|
||||
return { ...DEFAULTS, ...JSON.parse(raw) };
|
||||
} catch {
|
||||
return { ...DEFAULTS };
|
||||
}
|
||||
}
|
||||
|
||||
/** Persist prefs (merged over defaults). Returns the merged object. */
|
||||
function savePrefs(prefs, storage) {
|
||||
const store = storage || (typeof localStorage !== 'undefined' ? localStorage : null);
|
||||
const merged = { ...DEFAULTS, ...(prefs || {}) };
|
||||
if (store) {
|
||||
try {
|
||||
store.setItem(PREFS_KEY, JSON.stringify(merged));
|
||||
} catch {
|
||||
/* ignore quota / privacy-mode failures */
|
||||
}
|
||||
}
|
||||
return merged;
|
||||
}
|
||||
|
||||
module.exports = { PREFS_KEY, DEFAULTS, applyPrefs, loadPrefs, savePrefs };
|
||||
Reference in New Issue
Block a user