Add 'QuickChess' label to top of page

This commit is contained in:
Sage Vaillancourt 2022-10-13 10:24:29 -04:00
parent 7ad5079289
commit ed281b51f4
3 changed files with 23 additions and 7 deletions

4
package-lock.json generated
View File

@ -1,11 +1,11 @@
{
"name": "chess",
"name": "quickchess",
"version": "0.1.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "chess",
"name": "quickchess",
"version": "0.1.0",
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",

View File

@ -10,6 +10,13 @@ body {
justify-content: center;
}
#root {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
ol, ul {
padding-left: 30px;
}
@ -54,6 +61,11 @@ ol, ul {
}
}
.game {
height: 100%;
display: flex;
}
.square {
background: #fff;
border: none;
@ -94,6 +106,7 @@ ol, ul {
.game-board {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@ -111,4 +124,4 @@ ol, ul {
.icon:hover {
opacity: 1;
margin-top: -0.35em;
}
}

View File

@ -78,11 +78,14 @@ class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
{this.state.gameKey ? this.state.board : <NameForm onSubmit={this.setGameKey.bind(this)} />}
<>
<h2 className="white-on-light">QuickChess</h2>
<div className="game">
<div className="game-board">
{this.state.gameKey ? this.state.board : <NameForm onSubmit={this.setGameKey.bind(this)} />}
</div>
</div>
</div>
</>
);
}
}