improve layout for smaller width

This commit is contained in:
Vinzenz Schroeter 2024-04-21 21:37:38 +02:00
parent 19e1792307
commit 3cea9c967d
5 changed files with 13 additions and 4 deletions

View file

@ -33,6 +33,9 @@ export default function App() {
}, [nameId, isLoggedIn])();
return <Column className='flex-grow'>
<ClientScreen logout={logout} theme={theme} playerId={nameId.id}/>
<Row>
<h1 className='flex-grow'>CCCB-Tanks!</h1>
<Button text='change colors' onClick={() => setTheme(_ => getRandomTheme())}/>
@ -42,12 +45,14 @@ export default function App() {
{nameId.name !== '' &&
<Button onClick={() => setNameId(getNewNameId)} text='logout'/>}
</Row>
<ClientScreen logout={logout} theme={theme} playerId={nameId.id}/>
{nameId.name === '' && <JoinForm setNameId={setNameId} clientId={nameId.id}/>}
<Row className='GadgetRows'>
{isLoggedIn && <Controls playerId={nameId.id}/>}
{isLoggedIn && <PlayerInfo playerId={nameId.id}/>}
<Scoreboard/>
</Row>
</Column>;
}