joel/WordGrid
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve UI; add end game button

Browse source
This commit is contained in:
Joel Therrien 2023-09-21 19:01:56 -07:00
parent 75d8db4098
commit a34ad8cd12
2 changed files with 31 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ui/src/Game.tsx
View file

@ -305,6 +305,13 @@ export function Game(props: {
<div className="board-log"> <div className="board-log">
<Grid cellTypes={cellTypes} playerLetters={playerLetters} boardLetters={boardLetters} dispatch={trayDispatch}/> <Grid cellTypes={cellTypes} playerLetters={playerLetters} boardLetters={boardLetters} dispatch={trayDispatch}/>
<div className="message-log"> <div className="message-log">
<button className="end-game"
onClick={() => {
props.end_game_fn();
}}
>
End Game
</button>
<Scores playerScores={playerAndScores}/> <Scores playerScores={playerAndScores}/>
<div className="log" ref={logDivRef}> <div className="log" ref={logDivRef}>
{logInfo} {logInfo}

14
ui/src/style.less
View file

@ -173,18 +173,22 @@
max-height: inherit; max-height: inherit;
display: grid; display: grid;
grid-template-rows: 6em 1fr; grid-template-rows: 1.5em 6em 1fr;
.log { .log {
overflow-y: scroll; overflow-y: scroll;
} padding: 0.5em;
} }
button.end-game {
margin: 0.5em;
width: fit-content;
height: fit-content;
}
.scoring { .scoring {
text-align: center; text-align: center;
display: flex; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: none; grid-template-rows: none;
@ -197,6 +201,8 @@
margin-right: 10px; margin-right: 10px;
} }
} }
}
dialog { dialog {
border-radius: 10px; border-radius: 10px;