import { useGameSocket } from './hooks/useGameSocket';
import { LanderCanvas } from './LanderCanvas';

// Vite dev server proxies `/ws` → `ws://localhost:5100`. In prod the backend
// serves the built static files, so same-origin works there too.
function buildWsUrl(): string {
  const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
  return `${proto}//${window.location.host}/ws/game`;
}

export function App() {
  const { connected, state, sendCursor } = useGameSocket(buildWsUrl());

  return (
    <>
      <LanderCanvas state={state} onCursor={sendCursor} />
      <StatusBar connected={connected} step={state?.step ?? 0} />
    </>
  );
}

interface StatusBarProps { connected: boolean; step: number; }
function StatusBar({ connected, step }: StatusBarProps) {
  return (
    <div style={{
      position: 'fixed', top: 8, left: 8, padding: '4px 10px',
      background: 'rgba(0,0,0,0.5)', borderRadius: 4, fontSize: 12,
      pointerEvents: 'none',
    }}>
      <span style={{ color: connected ? '#5f5' : '#f55' }}>●</span>{' '}
      {connected ? 'connected' : 'disconnected'} · step {step}
    </div>
  );
}