35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { useGameConnection } from './net/useGameConnection';
|
|
import { GamePage } from './pages/GamePage';
|
|
import { HomePage } from './pages/HomePage';
|
|
import { LobbyPage } from './pages/LobbyPage';
|
|
import styles from './App.module.css';
|
|
|
|
const statusText = {
|
|
connecting: 'Connecting to server...',
|
|
reconnecting: 'Connection lost, reconnecting...',
|
|
disconnected: 'Server unreachable, retrying...',
|
|
connected: '',
|
|
};
|
|
|
|
export function App() {
|
|
const { status, playerId, lobby, match, flashes, actions } = useGameConnection();
|
|
|
|
let content;
|
|
if (!lobby || !playerId) {
|
|
content = <HomePage connected={status === 'connected'} actions={actions} />;
|
|
} else if (match) {
|
|
content = <GamePage match={match} lobby={lobby} playerId={playerId} flashes={flashes} actions={actions} />;
|
|
} else if (lobby.phase === 'playing') {
|
|
content = <div className={styles.loading}>Starting...</div>;
|
|
} else {
|
|
content = <LobbyPage lobby={lobby} playerId={playerId} actions={actions} />;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{status !== 'connected' && <div className={styles.status}>{statusText[status]}</div>}
|
|
{content}
|
|
</>
|
|
);
|
|
}
|