Add draft clock UI, Fischer increment timer logic, and security fixes (#19)
- Add prominent clock badge to tab bar (lights up on your turn) with
correct Fischer increment chess-clock model: bank starts at initialTime,
+= incrementTime after each pick, other teams' banks untouched
- Extract pure timer helpers to app/lib/draft-timer.ts and add 29 unit
tests covering formatClockTime, calculateTimeAfterPick, getTimerColorClass,
and full snake-draft lifecycle regression scenarios
- Fix make-pick.ts: add status !== 'draft' and draftPaused server guards
- Fix draft-utils.ts: replace (global as any).__socketIO with getSocketIO(),
fix timeUsed to store actual timeRemaining at pick moment (not always 120),
add null timer warning, move timer fetch before pick insert
- Fix draft.start.ts: batch timer inserts, guard against empty draftSlots
- Fix DraftGridSection: memoize currentTeamId, widen teamTimers type to
Record<string, number | undefined>
- Fix duplicate animate-pulse (getTimerColorClass already includes it)
- Clamp negative seconds in formatClockTime to guard against timer drift
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-21 16:51:12 -08:00
|
|
|
/**
|
|
|
|
|
* Pure utility functions for the draft clock/timer system.
|
|
|
|
|
* Extracted here to be independently testable and shared across
|
|
|
|
|
* route handlers and UI components.
|
|
|
|
|
*
|
|
|
|
|
* Clock model (chess-clock / Fischer increment):
|
|
|
|
|
* - Draft start: every team receives `initialTime` as their bank.
|
|
|
|
|
* - While on the clock: the active team's bank counts down each second.
|
|
|
|
|
* - After a pick is made: the picker's bank += `incrementTime`.
|
|
|
|
|
* - Between turns: all other teams' banks are left untouched.
|
|
|
|
|
*/
|
|
|
|
|
|
2026-04-28 22:24:13 -07:00
|
|
|
/**
|
|
|
|
|
* Formats a HH:MM time string as 12-hour time with AM/PM.
|
|
|
|
|
* e.g. "23:00" → "11:00 PM", "07:30" → "7:30 AM"
|
|
|
|
|
*/
|
|
|
|
|
export function formatTime12h(t: string): string {
|
|
|
|
|
const [h, m] = t.split(":").map(Number);
|
|
|
|
|
const ap = (h || 0) >= 12 ? "PM" : "AM";
|
|
|
|
|
return `${(h || 0) % 12 || 12}:${String(m || 0).padStart(2, "0")} ${ap}`;
|
|
|
|
|
}
|
|
|
|
|
|
Add draft clock UI, Fischer increment timer logic, and security fixes (#19)
- Add prominent clock badge to tab bar (lights up on your turn) with
correct Fischer increment chess-clock model: bank starts at initialTime,
+= incrementTime after each pick, other teams' banks untouched
- Extract pure timer helpers to app/lib/draft-timer.ts and add 29 unit
tests covering formatClockTime, calculateTimeAfterPick, getTimerColorClass,
and full snake-draft lifecycle regression scenarios
- Fix make-pick.ts: add status !== 'draft' and draftPaused server guards
- Fix draft-utils.ts: replace (global as any).__socketIO with getSocketIO(),
fix timeUsed to store actual timeRemaining at pick moment (not always 120),
add null timer warning, move timer fetch before pick insert
- Fix draft.start.ts: batch timer inserts, guard against empty draftSlots
- Fix DraftGridSection: memoize currentTeamId, widen teamTimers type to
Record<string, number | undefined>
- Fix duplicate animate-pulse (getTimerColorClass already includes it)
- Clamp negative seconds in formatClockTime to guard against timer drift
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-21 16:51:12 -08:00
|
|
|
/**
|
|
|
|
|
* Formats a seconds value for display.
|
|
|
|
|
* undefined → "--:--"
|
|
|
|
|
* < 3600 s → "m:ss"
|
|
|
|
|
* >= 3600 s → "h:mm:ss"
|
|
|
|
|
*/
|
|
|
|
|
export function formatClockTime(seconds: number | undefined): string {
|
|
|
|
|
if (seconds === undefined) return "--:--";
|
|
|
|
|
const clamped = Math.max(0, seconds); // guard against negative values from timer drift
|
|
|
|
|
const h = Math.floor(clamped / 3600);
|
|
|
|
|
const m = Math.floor((clamped % 3600) / 60);
|
|
|
|
|
const s = clamped % 60;
|
|
|
|
|
if (h > 0)
|
|
|
|
|
return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
|
|
|
|
|
return `${m}:${String(s).padStart(2, "0")}`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Returns a team's new bank time after they complete a pick.
|
|
|
|
|
* The increment is the post-pick reward (chess clock model).
|
|
|
|
|
*
|
|
|
|
|
* @param bankTime Current remaining seconds in the team's bank
|
|
|
|
|
* @param incrementTime Bonus seconds awarded after each pick
|
|
|
|
|
*/
|
|
|
|
|
export function calculateTimeAfterPick(
|
|
|
|
|
bankTime: number,
|
|
|
|
|
incrementTime: number
|
|
|
|
|
): number {
|
|
|
|
|
return bankTime + incrementTime;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-15 14:02:49 -07:00
|
|
|
/** Pure preset data for chess-clock mode — the single source of truth shared with DraftSpeedPicker. */
|
|
|
|
|
export const CHESS_CLOCK_PRESETS: { value: string; bankSec: number; incrSec: number }[] = [
|
|
|
|
|
{ value: "fast", bankSec: 60, incrSec: 10 },
|
|
|
|
|
{ value: "standard", bankSec: 120, incrSec: 15 },
|
|
|
|
|
{ value: "slow", bankSec: 28800, incrSec: 3600 },
|
|
|
|
|
{ value: "very-slow", bankSec: 43200, incrSec: 3600 },
|
|
|
|
|
];
|
|
|
|
|
|
2026-03-20 21:36:39 -07:00
|
|
|
/**
|
|
|
|
|
* Converts a draftSpeed form value + timerMode into DB time fields.
|
|
|
|
|
*
|
|
|
|
|
* Standard mode: speed is raw seconds (the per-pick time); both fields equal it.
|
|
|
|
|
* Chess clock mode: speed is a named preset that maps to (initial bank, increment).
|
|
|
|
|
*/
|
|
|
|
|
export function parseDraftSpeed(
|
|
|
|
|
draftSpeed: string | null,
|
|
|
|
|
draftTimerMode: "chess_clock" | "standard"
|
|
|
|
|
): { draftInitialTime: number; draftIncrementTime: number } {
|
|
|
|
|
if (draftTimerMode === "standard") {
|
|
|
|
|
const seconds = parseInt(draftSpeed ?? "", 10);
|
|
|
|
|
const time = isNaN(seconds) ? 90 : seconds;
|
|
|
|
|
return { draftInitialTime: time, draftIncrementTime: time };
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-28 22:24:13 -07:00
|
|
|
if (draftSpeed?.startsWith("custom:")) {
|
|
|
|
|
const [, bankStr, incrStr] = draftSpeed.split(":");
|
|
|
|
|
const bank = parseInt(bankStr ?? "", 10);
|
|
|
|
|
const incr = parseInt(incrStr ?? "", 10);
|
|
|
|
|
if (!isNaN(bank) && !isNaN(incr)) return { draftInitialTime: bank, draftIncrementTime: incr };
|
|
|
|
|
}
|
2026-05-15 14:02:49 -07:00
|
|
|
|
|
|
|
|
const preset = CHESS_CLOCK_PRESETS.find((p) => p.value === draftSpeed);
|
|
|
|
|
if (preset) return { draftInitialTime: preset.bankSec, draftIncrementTime: preset.incrSec };
|
|
|
|
|
|
|
|
|
|
// Unknown/null speed — fall back to "standard" preset
|
|
|
|
|
return { draftInitialTime: 120, draftIncrementTime: 15 };
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
type DraftSpeedSource = {
|
|
|
|
|
draftTimerMode?: "chess_clock" | "standard" | null;
|
|
|
|
|
draftInitialTime?: number | null;
|
|
|
|
|
draftIncrementTime?: number | null;
|
|
|
|
|
} | null | undefined;
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Derives the draftSpeed UI value (preset key or "custom:{bank}:{incr}") from
|
|
|
|
|
* saved DB fields. Used to initialise and reset the DraftSpeedPicker.
|
|
|
|
|
*/
|
|
|
|
|
export function getInitialDraftSpeed(season: DraftSpeedSource): string {
|
|
|
|
|
const mode = season?.draftTimerMode ?? "chess_clock";
|
|
|
|
|
if (mode === "standard") return season?.draftIncrementTime?.toString() ?? "90";
|
|
|
|
|
const preset = CHESS_CLOCK_PRESETS.find(
|
|
|
|
|
(p) => p.bankSec === season?.draftInitialTime && p.incrSec === season?.draftIncrementTime
|
|
|
|
|
);
|
|
|
|
|
if (preset) return preset.value;
|
|
|
|
|
if (season?.draftInitialTime !== null && season?.draftInitialTime !== undefined &&
|
|
|
|
|
season?.draftIncrementTime !== null && season?.draftIncrementTime !== undefined) {
|
|
|
|
|
return `custom:${season.draftInitialTime}:${season.draftIncrementTime}`;
|
2026-03-20 21:36:39 -07:00
|
|
|
}
|
2026-05-15 14:02:49 -07:00
|
|
|
return "standard";
|
2026-03-20 21:36:39 -07:00
|
|
|
}
|
|
|
|
|
|
Add draft clock UI, Fischer increment timer logic, and security fixes (#19)
- Add prominent clock badge to tab bar (lights up on your turn) with
correct Fischer increment chess-clock model: bank starts at initialTime,
+= incrementTime after each pick, other teams' banks untouched
- Extract pure timer helpers to app/lib/draft-timer.ts and add 29 unit
tests covering formatClockTime, calculateTimeAfterPick, getTimerColorClass,
and full snake-draft lifecycle regression scenarios
- Fix make-pick.ts: add status !== 'draft' and draftPaused server guards
- Fix draft-utils.ts: replace (global as any).__socketIO with getSocketIO(),
fix timeUsed to store actual timeRemaining at pick moment (not always 120),
add null timer warning, move timer fetch before pick insert
- Fix draft.start.ts: batch timer inserts, guard against empty draftSlots
- Fix DraftGridSection: memoize currentTeamId, widen teamTimers type to
Record<string, number | undefined>
- Fix duplicate animate-pulse (getTimerColorClass already includes it)
- Clamp negative seconds in formatClockTime to guard against timer drift
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-21 16:51:12 -08:00
|
|
|
/**
|
|
|
|
|
* Returns the Tailwind colour class(es) for a timer value.
|
|
|
|
|
*
|
|
|
|
|
* > 60 s → green (plenty of time)
|
|
|
|
|
* > 30 s → amber (getting tight)
|
|
|
|
|
* > 10 s → coral (urgent)
|
|
|
|
|
* ≤ 10 s → coral + animate-pulse (critical)
|
|
|
|
|
* undefined → muted (clock not running)
|
|
|
|
|
*/
|
|
|
|
|
export function getTimerColorClass(seconds: number | undefined): string {
|
|
|
|
|
if (seconds === undefined) return "text-muted-foreground";
|
|
|
|
|
if (seconds > 60) return "text-emerald-400";
|
|
|
|
|
if (seconds > 30) return "text-amber-accent";
|
|
|
|
|
if (seconds > 10) return "text-coral-accent";
|
|
|
|
|
return "text-coral-accent animate-pulse";
|
|
|
|
|
}
|