coderschool · vanmitG · Jul 26, 2019 · Jul 26, 2019 · Jul 26, 2019 · Jul 28, 2019
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
-# CoderSchool FTW - * Nam, the Monster Hunter *
+# CoderSchool FTW - _ Nam, the Monster Hunter _
 
 Created with love by: Charles Lee
-  
-This is a simple Canvas-based game that requires a solid understanding of the principles of JavaScript programming to customize. 
+
+This is a simple Canvas-based game that requires a solid understanding of the principles of JavaScript programming to customize.
 
 ## Video Walkthrough
 
@@ -12,39 +12,38 @@ Here's a walkthrough of implemented user stories.
 
 ## Code Reviews
 
-This code was reviewed by @username and @otherusername. 
-
-* [Link to PR #X](#) - reviewed by @username.
-* [Link to PR #Y](#) - reviewed by @otherusername.   
+This code was reviewed by @username and @otherusername.
 
+- [Link to PR #X](https://github.com/vanmitG/canvas_game_starter/pull/1) - reviewed by @username.
+- [Link to PR #Y](#) - reviewed by @otherusername.
 
 ## Required User Stories
+
 - [ ] I have at least three code reviews from others.
-- [x] The user can move their character with the arrow keys. 
+- [x] The user can move their character with the arrow keys.
 - [x] The user can see a monster.
-- [ ] The monster is placed at a random location within the game boundaries.
+- [x] The monster is placed at a random location within the game boundaries.
 - [x] The user can catch a monster by moving their character to the same location as a monster.
-- [ ] When the user catches a monster, a new monster is placed randomly upon the screen.
-- [ ] The user can see the numbers of monsters she has caught. Every time she catches a monster, the number should increment by one. 
-- [ ] The game ends when the user has caught 20 monsters. The total time elapsed is displayed upon game completion, in seconds.
-- [ ] The user can access this game from the internet (e.g. using Netlify).
-- [ ] The code has been reviewed by at least one other person, using Pull Requests on GitHub.
+- [x] When the user catches a monster, a new monster is placed randomly upon the screen.
+- [x] The user can see the numbers of monsters she has caught. Every time she catches a monster, the number should increment by one.
+- [x] The game ends when the user has caught 20 monsters. The total time elapsed is displayed upon game completion, in seconds.
+- [x] The user can access this game from the internet (e.g. using Netlify).
+- [x] The code has been reviewed by at least one other person, using Pull Requests on GitHub.
 
 ## Optional User Stories
 
-- [ ] Custom styling: the developer has replaced the images for the main character, monster, and background with something of her choice.  
-- [ ] The user cannot move her character off the screen. 
-- [ ] The user sees a few different types of monster each time a new monster is spawned. 
-- [ ] The monster moves around on its own each frame, and the user must chase it. 
-- [ ] The map has "obstacles", such as trees, which block the user from moving through the space occupied by the obstacle. 
-- [ ] The user can hear sound effects upon movement and upon catching a monster. 
-- [ ] The user hears background music during the game. 
-- [ ] The user can see their high score. 
-
+- [x] Custom styling: the developer has replaced the images for the main character, monster, and background with something of her choice.
+- [x] The user cannot move her character off the screen.
+- [] The user sees a few different types of monster each time a new monster is spawned.
+- [ ] The monster moves around on its own each frame, and the user must chase it.
+- [ ] The map has "obstacles", such as trees, which block the user from moving through the space occupied by the obstacle.
+- [ ] The user can hear sound effects upon movement and upon catching a monster.
+- [ ] The user hears background music during the game.
+- [x] The user can see their high score.
 
 The following **additional** features are implemented:
 
-* [x] List anything else that you can get done to improve the page!
+- [x] List anything else that you can get done to improve the page!
 
 ## Time Spent and Lessons Learned
 
@@ -66,4 +65,4 @@ Describe any challenges encountered while building the app.
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
-    limitations under the License.
+    limitations under the License.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,11 @@
+#gameContainer {
+  width: 980;
+  height: 680;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.noScroll {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
diff --git a/game.js b/game.js
diff --git a/images/0756dd46e11b3ce.jpg b/images/0756dd46e11b3ce.jpg
diff --git a/...468aa8cc8297_pond-clip-art-free-clipart-panda-free-clipart-images_1249-1249.svg b/...468aa8cc8297_pond-clip-art-free-clipart-panda-free-clipart-images_1249-1249.svg
diff --git a/images/assetList.png b/images/assetList.png
diff --git a/images/backgroundN1.png b/images/backgroundN1.png
diff --git a/images/backgroundN2 - Copy.png b/images/backgroundN2 - Copy.png
diff --git a/images/backgroundN2.png b/images/backgroundN2.png
diff --git a/images/blackGhost2.png b/images/blackGhost2.png
diff --git a/images/blackGhostSmall.png b/images/blackGhostSmall.png
diff --git a/images/bonfire_PNG44.png b/images/bonfire_PNG44.png
diff --git a/images/bush1.png b/images/bush1.png
diff --git a/images/fireSmall.png b/images/fireSmall.png
diff --git a/images/ghost_PNG85.png b/images/ghost_PNG85.png
diff --git a/images/hero2.png b/images/hero2.png
diff --git a/images/pondFrog.png b/images/pondFrog.png
diff --git a/images/pondFrog2.png b/images/pondFrog2.png
diff --git a/images/pool.png b/images/pool.png
diff --git a/images/shrekSmall.png b/images/shrekSmall.png
diff --git a/images/shrek_PNG5.png b/images/shrek_PNG5.png
diff --git a/images/stone-bush.png b/images/stone-bush.png
diff --git a/images/stone1.png b/images/stone1.png
diff --git a/images/stoneSmall.png b/images/stoneSmall.png
diff --git a/images/stoneSmall2.png b/images/stoneSmall2.png
diff --git a/images/stone_PNG13589.png b/images/stone_PNG13589.png
diff --git a/images/stone_PNG13590.png b/images/stone_PNG13590.png
diff --git a/images/water-2748638_960_720.png b/images/water-2748638_960_720.png
diff --git a/images/waterSmall.png b/images/waterSmall.png
diff --git a/index.html b/index.html
@@ -1,10 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Best Game Ever!</title>
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="css/style.css" />
   </head>
   <body>
+    <div class="container">
+      <h2 class="text-center">Canvas Game</h2>
+      <div
+        class="row col-md-12 d-flex justify-content-center align-items-center"
+      >
+        <div class="col-md-2">
+          <button
+            id="playAgain()"
+            class="btn btn-outline-success"
+            onclick="playAgain()"
+          >
+            Play Again
+          </button>
+        </div>
+
+        <div class="col-md-10 d-flex justify-content-center">
+          <h6 class="alert alert-success">
+            Timer:
+            <span id="timePlay"></span>
+          </h6>
+
+          <h6 class="alert alert-success">
+            Score Number:
+            <span id="scoreNumber">
+              Your Catch
+            </span>
+          </h6>
+          <h6 class="alert alert-success text-center">
+            Your High Score: <span id="playerHighScore"></span>
+          </h6>
+          <h6 class="alert alert-success">
+            Game Number:
+            <span id="gameNumber">1</span>
+          </h6>
+          <h6 class="alert alert-success">
+            Best Score: <span id="highScore"></span>
+          </h6>
+        </div>
+      </div>
+
+      <!-- <h3 id="endOfGame"></h3> -->
+
+      <div class="container d-flex justify-content-center align-items-center">
+        <div class="row col-md-12 noScroll">
+          <div id="gameContainer"></div>
+        </div>
+      </div>
+    </div>
+
     <script src="game.js"></script>
   </body>
-</html>
+</html>