Under the hood

A pure function maps any Date to a list of "oddities" (leap day, Friday 13th, palindrome, solstice, doubled date); the page runs it on today.

'use client';

import * as React from 'react';

function oddities(d: Date): string[] {
  const out: string[] = [];
  const day = d.getDay();
  const date = d.getDate();
  const month = d.getMonth(); // 0-based
  const y = d.getFullYear();
  const isLeap = (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0;

  if (month === 1 && date === 29) out.push('Leap day — this date only exists every four years.');
  if (day === 5 && date === 13) out.push('Friday the 13th.');
  if (date === month + 1) out.push(`A doubled date (${month + 1}/${date}).`);
  if (month === 0 && date === 1) out.push("New Year's Day.");
  if (month === 11 && date === 31) out.push("New Year's Eve.");
  // Palindrome date (DDMMYYYY)
  const dd = String(date).padStart(2, '0');
  const mm = String(month + 1).padStart(2, '0');
  const s = `${dd}${mm}${y}`;
  if (s === [...s].reverse().join('')) out.push('A palindrome date (reads the same backwards).');
  // Solstices / equinoxes (approx)
  const eq: Record<string, string> = {
    '2-20': 'March equinox — spring begins (N. hemisphere).',
    '5-21': 'June solstice — the longest day.',
    '8-22': 'September equinox — autumn begins.',
    '11-21': 'December solstice — the shortest day.',
  };
  if (eq[`${month}-${date}`]) out.push(eq[`${month}-${date}`]);
  if (month === 1 && date === 28 && !isLeap) out.push('The last day of February (no leap day this year).');
  return out;
}

export function CalendarOdditiesGame() {
  const [today, setToday] = React.useState<Date | null>(null);

  React.useEffect(() => {
    setToday(new Date());
  }, []);

  if (!today) return null;

  const todays = oddities(today);

  return (
    <div className="flex w-full max-w-md flex-col items-center gap-6 text-center">
      <div className="font-mono text-sm opacity-60">
        {today.toLocaleDateString([], { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
      </div>

      {todays.length ? (
        <ul className="flex flex-col gap-2">
          {todays.map((o, i) => (
            <li key={i} className="text-xl font-bold leading-snug">
              {o}
            </li>
          ))}
        </ul>
      ) : (
        <div className="text-xl font-bold opacity-70">An ordinary day. Nothing odd about it.</div>
      )}
    </div>
  );
}