Under the hood

Gets coordinates from geolocation, computes sun/golden-hour times with SunCalc, and flips the sky warm when the current time falls inside a morning or evening golden-hour window.

'use client';

import * as SunCalc from 'suncalc';
import * as React from 'react';

const fmt = (d: Date) =>
  d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

export function GoldenHourGame() {
  const [coords, setCoords] = React.useState<{ lat: number; lng: number } | null>(null);
  const [denied, setDenied] = React.useState(false);
  const [now, setNow] = React.useState(() => Date.now());

  React.useEffect(() => {
    navigator.geolocation?.getCurrentPosition(
      (p) => setCoords({ lat: p.coords.latitude, lng: p.coords.longitude }),
      () => {
        setCoords({ lat: 51.5072, lng: -0.1276 }); // London fallback
        setDenied(true);
      },
      { timeout: 8000 },
    );
    const id = window.setInterval(() => setNow(Date.now()), 1000 * 30);
    return () => window.clearInterval(id);
  }, []);

  if (!coords) return <div className="font-mono text-sm opacity-50">finding your sky…</div>;

  const t = SunCalc.getTimes(new Date(now), coords.lat, coords.lng) as unknown as Record<string, Date>;
  const inMorning = now >= +t.sunrise && now <= +t.goldenHourEnd;
  const inEvening = now >= +t.goldenHour && now <= +t.sunset;
  const active = inMorning || inEvening;

  const rows: [string, Date][] = [
    ['Sunrise', t.sunrise],
    ['Morning golden hour ends', t.goldenHourEnd],
    ['Evening golden hour starts', t.goldenHour],
    ['Sunset', t.sunset],
  ];

  return (
    <div className="flex w-full max-w-md flex-col items-center gap-6">
      <div
        className="flex h-48 w-full items-center justify-center rounded-2xl text-center"
        style={{
          background: active
            ? 'linear-gradient(160deg,#ffd27a,#e8915a 55%,#b8552e)'
            : 'linear-gradient(160deg,#cdd6e0,#9aa6b4 60%,#5b6470)',
          color: '#1a140c',
        }}
      >
        <div>
          <div className="text-2xl font-bold">{active ? 'Golden hour, now.' : 'Not golden hour.'}</div>
          <div className="mt-1 text-sm opacity-80">
            {active ? 'go outside' : inMorning ? '' : 'the light is ordinary'}
          </div>
        </div>
      </div>

      <dl className="grid w-full grid-cols-[1fr_auto] gap-y-2 font-mono text-sm">
        {rows.map(([k, d]) => (
          <React.Fragment key={k}>
            <dt className="opacity-60">{k}</dt>
            <dd>{fmt(d)}</dd>
          </React.Fragment>
        ))}
      </dl>
      <div className="font-mono text-[11px] uppercase tracking-[0.12em] opacity-45">
        {denied ? 'using London — allow location for your own sky' : 'for your location'}
      </div>
    </div>
  );
}