/* global React, Icon */ // =========================================================== // Área 7 — Calendar (month grid + day slot expansion) // =========================================================== const { useState: useStateC, useEffect: useEffectC, useMemo: useMemoC } = React; const DAYS_ES = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom']; const MONTHS_ES = [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre', ]; const HOURS = [ '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', ]; // Deterministic pseudo-random availability per (court, date, hour) so the // demo "feels real" without a backend. Booking actions overlay on top. function hashSeed(...vals) { let h = 2166136261 >>> 0; for (const v of vals) { const s = String(v); for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); } } return h >>> 0; } function rand01(seed) { return ((seed % 10000) / 10000); } function defaultStatus(courtId, dateISO, hour) { const r = rand01(hashSeed(courtId, dateISO, hour)); // Bias evening (18-22h) toward booked const h = parseInt(hour); const isEvening = h >= 19 && h <= 22; const isWeekend = new Date(dateISO).getDay() % 6 === 0; let bookedProb = isEvening ? 0.55 : 0.22; if (isWeekend && isEvening) bookedProb = 0.78; return r < bookedProb ? 'reservado' : 'disponible'; } function getMonthGrid(year, month) { // first day index 0=Mon ... 6=Sun const first = new Date(year, month, 1); const dow = (first.getDay() + 6) % 7; // shift to Mon-first const daysInMonth = new Date(year, month + 1, 0).getDate(); const prevDays = new Date(year, month, 0).getDate(); const cells = []; for (let i = 0; i < dow; i++) { cells.push({ d: prevDays - dow + i + 1, month: month - 1, year, outside: true }); } for (let d = 1; d <= daysInMonth; d++) { cells.push({ d, month, year, outside: false }); } while (cells.length % 7 !== 0) { const last = cells[cells.length - 1]; const next = last.outside ? last.d + 1 : 1; cells.push({ d: next, month: month + 1, year, outside: true }); } // pad to 6 rows while (cells.length < 42) { const last = cells[cells.length - 1]; cells.push({ d: last.d + 1, month: last.month, year: last.year, outside: true }); } return cells; } function toISO(year, month, day) { const y = year; const m = String(month + 1).padStart(2, '0'); const d = String(day).padStart(2, '0'); return `${y}-${m}-${d}`; } function dayAvailability(courtId, year, month, day, bookings) { const iso = toISO(year, month, day); let free = 0, total = HOURS.length; HOURS.forEach(h => { const key = `${courtId}|${iso}|${h}`; const overridden = bookings[key]; const status = overridden || defaultStatus(courtId, iso, h); if (status === 'disponible') free++; }); return { free, total, iso }; } // ---------- COMPONENT ---------- function Calendar({ courts, activeCourtId, onCourtChange, selected, onSelect, // { date, hour } bookings, // { [court|iso|hour]: 'reservado' | 'disponible' } prices, // { [courtId]: number } density, // 'comfortable' | 'compact' }) { const today = new Date(); const [cursor, setCursor] = useStateC(() => ({ year: today.getFullYear(), month: today.getMonth() })); const [expandedDay, setExpandedDay] = useStateC(null); // ISO const cells = useMemoC(() => getMonthGrid(cursor.year, cursor.month), [cursor]); const activeCourt = courts.find(c => c.id === activeCourtId) || courts[0]; const goPrev = () => setCursor(c => { const m = c.month - 1; return m < 0 ? { year: c.year - 1, month: 11 } : { ...c, month: m }; }); const goNext = () => setCursor(c => { const m = c.month + 1; return m > 11 ? { year: c.year + 1, month: 0 } : { ...c, month: m }; }); const isPast = (year, month, day) => { const d = new Date(year, month, day); const t = new Date(today.getFullYear(), today.getMonth(), today.getDate()); return d < t; }; const isToday = (year, month, day) => year === today.getFullYear() && month === today.getMonth() && day === today.getDate(); const cellSize = density === 'compact' ? 40 : 56; const gap = density === 'compact' ? 4 : 6; return (
{/* Court tabs */}
{courts.map(c => { const active = c.id === activeCourtId; return ( ); })}
{/* Header / nav */}
Disponibilidad — {activeCourt.name}
{MONTHS_ES[cursor.month]} {cursor.year}
{/* Legend */}
Libre Quedan pocos Completo
{/* Day-of-week labels */}
{DAYS_ES.map(d => (
{d}
))}
{/* Grid of day chips */}
{cells.map((cell, idx) => { const past = isPast(cell.year, cell.month, cell.d); const today = isToday(cell.year, cell.month, cell.d); const iso = toISO(cell.year, cell.month, cell.d); const av = dayAvailability(activeCourtId, cell.year, cell.month, cell.d, bookings); const ratio = av.free / av.total; let dot = 'disp'; if (av.free === 0) dot = 'full'; else if (av.free <= 3) dot = 'low'; const isSelected = selected.date === iso; const isExpanded = expandedDay === iso; const disabled = cell.outside || past; const ring = isSelected ? 'var(--accent)' : isExpanded ? 'var(--accent)' : today ? 'var(--hair-4)' : 'transparent'; const dotColor = dot === 'full' ? 'var(--live)' : dot === 'low' ? 'var(--warn)' : 'var(--accent)'; return ( ); })}
{/* Expanded day: hour slots */} {expandedDay && (
Turnos disponibles
{formatDateLong(expandedDay)}
{HOURS.map(h => { const key = `${activeCourtId}|${expandedDay}|${h}`; const status = bookings[key] || defaultStatus(activeCourtId, expandedDay, h); const isSel = selected.date === expandedDay && selected.hour === h; const occ = status === 'reservado'; return ( ); })}
)}
); } function formatDateLong(iso) { const [y, m, d] = iso.split('-').map(Number); const date = new Date(y, m - 1, d); const dow = ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'][date.getDay()]; return `${dow} ${d} de ${MONTHS_ES[m-1]}`; } Object.assign(window, { Calendar, HOURS, DAYS_ES, MONTHS_ES, defaultStatus, hashSeed, formatDateLong, toISO });