Ticker Configurator + Emulator
Tune the display centrally and preview what each Raspberry Pi board will render.
Presets
{DISPLAY_PRESETS.map((preset) => (
))}
{(DISPLAY_BRAND_PACKS.find((pack) => pack.key === selectedBrandPack)?.logos || []).slice(0, 2).map((logo) => (
))}
{((DISPLAY_BRAND_PACKS.find((pack) => pack.key === selectedBrandPack)?.logos || []).length === 0) && (
No league logo overlay in this pack.
)}
{[
["show_open_bets", "Open Bets"],
["show_graph", "Balance Graph"],
["show_scores", "Final Scores"],
["show_balance_strip", "Balance Strip"],
["show_logos", "Team Logos"],
["notifications.reactions", "Reactions"],
["notifications.payins", "Payins"],
["notifications.payouts", "Payouts"],
["notifications.settlements", "Settlements"],
["notifications.live_bets", "Live Bets"],
].map(([field, label]) => {
const isNotif = String(field).startsWith("notifications.");
const notifKey = String(field).split(".")[1];
const checked = isNotif
? !!(displayDraft.notifications && displayDraft.notifications[notifKey])
: !!displayDraft[field];
return (
);
})}
{displayStatus && {displayStatus}
}
Live Emulator (true 128x64 LED matrix)
{/* ── WAGER TICKER (always top) ── */}
);
})()}
)}
{/* ── TICKER MODE ── */}
{mode === "ticker" && (
)}
{/* ── SETTLEMENT MODE ── */}
{mode === "settlement" && (
)}
{/* ── FINALS MODE ── */}
{mode === "finals" && (
{/* ── REACTION FOOTER TICKER (shown whenever reactions are active) ── */}
{rxActive && (
{tickerText}
{isFlashing ? (flashPulse ? "⚡ REACTION ⚡" : (t.title || "BLACKBOOK LIVE")) : (t.title || "BLACKBOOK LIVE")}
{isFlashing ? "REACT" : mode.toUpperCase()}
{rxActive && ●}
{/* ── BOARD MODE ── */}
{mode === "board" && (
▌ BALANCE BOARD
{graphData.length === 0 && No balance data
}
{graphData.length > 0 && (
BETTOR
TODAY
YTD
PEND
BAL
)}
{graphData.map((row, i) => {
const bal = Number(row.balance || 0);
const today = Number(row.today_pnl || 0);
const ytd = Number(row.ytd_pnl || 0);
const pend = Number(row.pending || 0);
const todayCol = today > 0 ? winCol : today < 0 ? lossCol : pushCol;
const ytdCol = ytd > 0 ? winCol : ytd < 0 ? lossCol : pushCol;
const balCol = bal > 0 ? winCol : bal < 0 ? lossCol : pushCol;
const pendCol = pend > 0 ? "#facc15" : pushCol;
const userPick = emulatorOpenPicks.find(p => p.handle === row.handle);
const status = userPick ? getBettorStatus(userPick) : null;
const nameCol = status === "winning" ? winCol : status === "losing" ? lossCol : bal > 0 ? winCol : bal < 0 ? lossCol : pushCol;
const tColor = (userPick && teamThemeColor(userPick)) || nameCol;
return (
{row.handle}
{today>=0?"+":""}{today.toFixed(2)}
{ytd>=0?"+":""}{ytd.toFixed(2)}
{pend > 0 ? `$${pend.toFixed(0)}` : "—"}
{bal>=0?"+":""}{bal.toFixed(2)}
);
})}
{graphData.length > 1 && graphData.some(r => r.today_pnl !== 0) && (() => {
const vals = graphData.map(r => Number(r.today_pnl||0));
const minV = Math.min(0,...vals), maxV = Math.max(0.01,...vals);
const h=36, w=200, pad=4;
const yOf = v => h - pad - ((v-minV)/(maxV-minV))*(h-2*pad);
const pts = vals.map((v,i)=>`${pad+(i/(vals.length-1))*(w-2*pad)},${yOf(v)}`).join(" ");
return (
▌ TODAY P&L
▌ ALL WAGERS
{emulatorOpenPicks.length === 0 && No open wagers
}
{emulatorOpenPicks.map((p, i) => {
const status = getBettorStatus(p);
const col = status === "winning" ? winCol : status === "losing" ? lossCol : userColor(i);
const sc2 = scoreLabel(p);
return (
{p.handle}
{p.compactMatchup || p.matchup || p.secondTeam || stripDateNoise(p.event || "")}
{summarizeWagerCompactDetails(p)} • {summarizeWagerDetails(p)}
{sc2 ? (
{sc2.isLive?"🔴":""}{sc2.label}
) : (
${Number(p.stake||0).toFixed(0)}
)}
);
})}
▌ GAME RESULTS
{realSettlements.length === 0 && No settlements yet
}
{realSettlements.map((s, i) => {
const col = s.result==="WON"?winCol:s.result==="LOST"?lossCol:pushCol;
return (
{s.handle}
{s.secondTeam || s.matchup || stripDateNoise(s.event || s.bet)}
{s.result}
);
})}
{emulatorDailySettlements.length === 0 &&
);
})}
)}
No finals today
}
{emulatorDailySettlements.map((card, ci) => {
const logo = getLeagueLogo(card.league);
return (
{logo && }
{card.bettors.map((b, bi) => {
const net=Number(b.net||0), col=net>0?winCol:net<0?lossCol:pushCol;
return (
{card.score}
{card.matchup}
{card.secondTeam && (
{card.secondTeam}
)}
{card.league.toUpperCase()} ✓
{b.handle}
{net>=0?"+":""}{net.toFixed(2)}
);
})}
{rxFooterText}
)}
Speed V:{displaySpeed.vertical} • H:{displaySpeed.horizontal} • Page:{displaySpeed.page} • {activeEmulatorMode.toUpperCase()} • group: {board?.group_code || "(connect device)"}{reactionQueue.filter(i => i.expiresAt > Date.now()).length > 0 ? ` • ${reactionQueue.filter(i => i.expiresAt > Date.now()).length} reaction(s)` : ""}