35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
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>
|
|
);
|
|
}
|