Session 28: Parlay builder, line movement tracker, book comparison — 3 features, zero credits (1623 tests)

2026-06-13 12:37:08 -04:00
parent 66fafd8429
commit c48aecd510
23 changed files with 1567 additions and 1 deletions
@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getVisibleCount, getHiddenCount, type Tier } from '@/lib/tierGate';
+
+/**
+ * BestLinesPanel (Session 28).
+ *
+ * "Best lines tonight" — the prop + sportsbook offering the highest payout,
+ * with the dollars-per-$100 a user saves by line-shopping. Reads
+ * /api/books/:sport (cached odds, zero credits). Self-hides when empty.
+ */
+
+interface BestLine {
+  player: string;
+  stat: string;
+  line: number | null;
+  bestBook: string;
+  bestOdds: number;
+  savings: number;
+}
+
+export interface BestLinesPanelProps {
+  sport: string;
+  tier?: Tier;
+  limit?: number;
+}
+
+export default function BestLinesPanel({ sport, tier = 'free', limit }: BestLinesPanelProps) {
+  const [lines, setLines] = useState<BestLine[] | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        const res = await fetch(`/api/books/${sport}`);
+        if (!res.ok) { if (!cancelled) setLines([]); return; }
+        const data = await res.json();
+        if (!cancelled) setLines(Array.isArray(data?.bestLines) ? data.bestLines : []);
+      } catch {
+        if (!cancelled) setLines([]);
+      }
+    }
+    load();
+    return () => { cancelled = true; };
+  }, [sport]);
+
+  if (!lines || lines.length === 0) return null;
+
+  const tierCount = getVisibleCount(tier, lines.length);
+  const cap = limit && limit > 0 ? Math.min(limit, tierCount) : tierCount;
+  const visible = lines.slice(0, cap);
+  const hidden = limit ? lines.length - visible.length : getHiddenCount(tier, lines.length);
+
+  const fmtOdds = (o: number) => (o > 0 ? `+${o}` : `${o}`);
+
+  return (
+    <section className="best-lines-panel" style={{ margin: '16px 0' }}>
+      <h3 style={heading}>💰 BEST LINES TONIGHT</h3>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        {visible.map((bl) => (
+          <div key={`${bl.player}-${bl.stat}`} style={row}>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={playerName}>{bl.player}</div>
+              <div style={propLine}>
+                {bl.stat.replace(/_/g, ' ')}{bl.line != null ? ` ${bl.line}` : ''}
+              </div>
+            </div>
+            <span style={book}>
+              {bl.bestBook} <span style={{ color: 'var(--grade-a, #00D4A0)' }}>{fmtOdds(bl.bestOdds)}</span>
+            </span>
+            {bl.savings > 0 && <span style={savings}>save ${bl.savings.toFixed(2)}</span>}
+          </div>
+        ))}
+      </div>
+      {hidden > 0 && (
+        <a href="/pricing" style={upsell}>{hidden} more — upgrade to compare every book →</a>
+      )}
+    </section>
+  );
+}
+
+const heading: React.CSSProperties = {
+  fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase',
+  color: 'var(--text-tertiary, #6B6B7B)', margin: '0 0 10px',
+};
+const row: React.CSSProperties = {
+  display: 'flex', alignItems: 'center', gap: 12,
+  padding: '8px 10px', borderRadius: 10,
+  background: 'var(--bg-2, #12121A)', border: '1px solid var(--border, #1A1A24)',
+};
+const playerName: React.CSSProperties = {
+  fontSize: 14, fontWeight: 700, color: 'var(--text-0, #F0F0F5)',
+  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+};
+const propLine: React.CSSProperties = { fontSize: 12, color: 'var(--text-secondary, #8A8A9A)', textTransform: 'capitalize' };
+const book: React.CSSProperties = { flex: '0 0 auto', fontSize: 12, fontWeight: 700, color: 'var(--text-0, #F0F0F5)', textTransform: 'capitalize' };
+const savings: React.CSSProperties = {
+  flex: '0 0 auto', fontSize: 11, fontWeight: 700, padding: '2px 7px', borderRadius: 6,
+  background: 'rgba(0,212,160,0.12)', color: 'var(--grade-a, #00D4A0)', whiteSpace: 'nowrap',
+};
+const upsell: React.CSSProperties = {
+  display: 'inline-block', marginTop: 10, fontSize: 12, fontWeight: 600,
+  color: 'var(--grade-a, #00D4A0)', textDecoration: 'none',
+};