39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import React, { useEffect, 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';
|
|
|
|
export default function App() {
|
|
const [state, dispatch] = useKetchup('ws://localhost:4000', reducer)
|
|
useEffect(() => {
|
|
console.debug('State', state)
|
|
}, [state])
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
return <>
|
|
<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?') && dispatch(resetAction())}> Reset</button>
|
|
</>
|
|
: <p>Loading...</p>
|
|
}
|
|
</>
|
|
}
|