44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { useState } from 'react';
|
|
import useKetchup from 'ketchup-react'
|
|
import { addPlayerAction, reducer, removePlayerAction, resetAction } from 'wonders-common'
|
|
import './App.css';
|
|
import Game from '../Game/Game';
|
|
import UserSelector from '../UserSelector/UserSelector';
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
import Container from 'react-bootstrap/Container';
|
|
import Row from 'react-bootstrap/Row'
|
|
|
|
export default function App() {
|
|
const [state, dispatch] = useKetchup('ws://localhost:4000', reducer)
|
|
|
|
const [user, setUser] = useState<string>()
|
|
function selectUser(name?: string) {
|
|
setUser(name)
|
|
if (name && !state?.players.some(p => p.name === name)) {
|
|
dispatch(addPlayerAction(name))
|
|
}
|
|
}
|
|
function removeUser() {
|
|
if (user !== undefined) {
|
|
dispatch(removePlayerAction(user))
|
|
setUser(undefined)
|
|
}
|
|
}
|
|
|
|
function resetGame() {
|
|
dispatch(resetAction())
|
|
setUser(undefined)
|
|
}
|
|
|
|
return <Container fluid>
|
|
<UserSelector user={user} selectUser={selectUser} removeUser={removeUser} users={state?.players.map(p => p.name) ?? []} locked={state !== undefined && state.stage !== 'starting'} />
|
|
{state
|
|
? <>
|
|
<Game state={state} dispatch={dispatch} playerName={user} />
|
|
<button onClick={() => window.confirm('Reset game?') && resetGame()}> Reset</button>
|
|
</>
|
|
: <Row>Loading...</Row>
|
|
}
|
|
</Container>
|
|
}
|