centered game grid

khan-ngo · Apr 20, 2017 · ddb06c2 · ddb06c2
1 parent 0df5109
commit ddb06c2
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 34 deletions.
diff --git a/assets/scripts/game/events.js b/assets/scripts/game/events.js
@@ -141,7 +141,9 @@ const winnerFound = function () {
   // send update request to api for game
   api.updateGame(data)
 
-  getStats()
+  api.index()
+    .then(ui.getStatsSuccess)
+    .catch(ui.getStatsSuccess)
 }
 
 const printWinStats = function () {
@@ -162,7 +164,9 @@ const tiedGame = function () {
   setResultMessage('Cats Game - You tied!')
   setMessage('Cats Game - You tied!')
 
-  getStats()
+  api.index()
+    .then(ui.getStatsSuccess)
+    .catch(ui.getStatsFailure)
 }
 
 const newGame = function () {
@@ -201,15 +205,6 @@ const clearBox = function (number) {
   document.getElementById('s' + number).innerText = ''
 }
 
-const getStats = function () {
-  // prevent board from refreshing
-  event.preventDefault()
-  // run api call to get the statistics
-  api.index()
-    .then(ui.getGamesSuccess)
-  //  .catch(ui.getGamesFailure)
-}
-
 const returnToLogIn = function () {
   $('#signUpModal').hide()
   $('#signInModal').show()

diff --git a/assets/scripts/game/ui.js b/assets/scripts/game/ui.js
@@ -25,13 +25,20 @@ const updateGameFailure = (error) => {
 }
 
 const getStatsSuccess = (data) => {
-  console.log('getGamesSuccess ran successfuly')
+  const gameCount = data.games.length
+  $('#playerX').html(store.user.email)
+  $('#statnum').html(gameCount)
+}
+
+const getStatsFailure = () => {
+  console.error('getGamesFailure failed')
 }
 
 module.exports = {
   createGameSuccess,
   createGameFailure,
   updateGameSuccess,
   updateGameFailure,
-  getStatsSuccess
+  getStatsSuccess,
+  getStatsFailure
 }
diff --git a/assets/styles/index.scss b/assets/styles/index.scss
@@ -19,34 +19,34 @@ body {
   padding: 10px;
 }
 
+.gameboard {
+   align-self: center;
+   display: flex;
+   justify-content: center;
+}
+
 .square {
   background: #edadc7;
-  font-family: 'Gloria Hallelujah', cursive;
-  font-size: 50px;
   font-color: #000;
-  position: absolute;
-  text-align: center;
-  // display:inline-block;
-  // float: none;
+  font-family: 'Gloria Hallelujah', cursive;
+  font-size: 40px;
   }
 
-.square:hover{
-background-color: #ff5177;
+.square:hover {
+  background-color: #ff5177;
 }
 
 .box {
-  align: center;
   border: 4px solid #fff;
   height: 2em;
-  text-align: center;
   position: relative;
+  text-align: center;
   width: 2em;
 }
 
-
 .auth-alert {
-  padding-bottom: 10px;
   font-family: 'Gloria Hallelujah', cursive;
+  padding-bottom: 10px;
 }
 
 .form-error {
@@ -61,9 +61,7 @@ background-color: #ff5177;
   text-transform: uppercase;
 }
 
-.title {
-  text-align: center;
-}
+
 .modal-title, .black-text {
   color: #000;
 }
@@ -79,7 +77,6 @@ background-color: #ff5177;
 }
 
 .header-message {
-  text-align: center;
   color: black;
   font-size: 15px;
 }
@@ -97,3 +94,10 @@ background-color: #ff5177;
   border-bottom: 1px solid #000;
   color: #000;
   }
+
+
+  .game-history {
+    color: #0000ff;
+    font-family: cursive;
+    font-size: 20px;
+  }
diff --git a/index.html b/index.html
@@ -26,6 +26,7 @@
     </div>
   </nav>
 </div>
+
 <!-- ========= END NavBar ============ -->
 
 <div id="Game-message">
@@ -62,7 +63,7 @@ <h3 id="tempSignInError" class="form-error" ></h3>
 <div class="modal-footer"></div>
 <div id="register" class="form-subtext">
   <p>Not Registered ?
-    <span id="sign-up-form" class="form-link"><a>Sign Up Here</a></span>
+    <span id="sign-up-form" class="form-link"><a href='#'>Sign Up Here</a></span>
   </p>
 </div>
 <div class="modal-footer"></div>
@@ -95,7 +96,7 @@ <h3 id="tempSignUpError" class="form-error"></h3>
              <div class="modal-footer"></div>
              <div class="form-subtext">
                <p>Did you get here on accident ?
-                 <span id="return-to-log-in" class="form-link"><a>Return to LogIn</a></span>
+                 <span id="return-to-log-in" class="form-link"><a href='#'>Return to LogIn</a></span>
                </p>
              </div>
              <div class="modal-footer"></div>
@@ -160,7 +161,6 @@ <h3 id="tempChangePasswordSuccess" class="form-success"></h3>
           <h3 id="tempGameboardError" class="form-error"></h3>
         </div>
         <div class="container-fluid gameboard">
-
           <div class="col-xs-6 col-centered">
               <div class="row">
                 <div class="game gamegrid">
@@ -181,7 +181,7 @@ <h3 id="tempGameboardError" class="form-error"></h3>
                     </div>
                   </div>
                   </div>
-                  <div class="modal-footer"></div>
+                <div class="modal-footer"></div>
           </div>
         </div>
       </div>
@@ -197,7 +197,8 @@ <h3 id="GameResultModalMessage" class="form-header general-message">Game Message
       </div>
 
       <div class="modal-header">
-        <h4 class="modal-title">Total Wins</h4>
+        <div class="game-history">
+          <span id='playerX'></span> , you completed <span id='statnum'></span> games on record !</div>
       </div>
 
       <div id="game-stats-X" class="general-message">