From ed281b51f47a83edf59d7023c70d184ab94a0f92 Mon Sep 17 00:00:00 2001
From: Sage Vaillancourt <svaillancourt@add123.com>
Date: Thu, 13 Oct 2022 10:24:29 -0400
Subject: [PATCH] Add 'QuickChess' label to top of page

---
 package-lock.json |  4 ++--
 src/index.css     | 15 ++++++++++++++-
 src/index.js      | 11 +++++++----
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 20013b9..b976b8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/src/index.css b/src/index.css
index 1266b92..f26200b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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;
-}
\ No newline at end of file
+}
diff --git a/src/index.js b/src/index.js
index 7ec7f31..042f4bc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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>
+      </>
     );
   }
 }