Integrate Authentication and gaming screen

andela · Jun 19, 2018 · 6caf786 · 6caf786
1 parent b14da45
commit 6caf786
Show file tree

Hide file tree

Showing 10 changed files with 208 additions and 36 deletions.
diff --git a/app/controllers/users.js b/app/controllers/users.js
@@ -61,7 +61,7 @@ exports.signup = (req, res) => {
  */
 exports.signout = (req, res) => {
   req.logout();
-  res.send('loggedOut');
+  res.redirect('/');
 };
 
 /**

diff --git a/public/css/style.css b/public/css/style.css
@@ -26,8 +26,10 @@ body{
 }
 
 .abandon-game {
-  color: #f42020 !important;
+  color: #fff !important;
   margin-right: 20px;
+  border-radius: 15px;
+  font-size: 13px;
 }
 
 .main-screen {
@@ -399,15 +401,15 @@ carousel-indicators .active {
   -webkit-box-shadow: 0 1px 0 0 #fd9267;
   box-shadow: 0 1px 0 0 #fd9267; }
 
-.form-gradient input[type=text]:focus:not([readonly]) + label {
+.form-gradient input[type=text]:focus:not([readonly])  label {
   color: #4f4f4f; }
 
 .form-gradient input[type=password]:focus:not([readonly]) {
   border-bottom: 1px solid #fd9267;
   -webkit-box-shadow: 0 1px 0 0 #fd9267;
   box-shadow: 0 1px 0 0 #fd9267; }
 
-.form-gradient input[type=password]:focus:not([readonly]) + label {
+.form-gradient input[type=password]:focus:not([readonly])  label {
   color: #4f4f4f; }
 
   .peach-gradient {
@@ -451,7 +453,8 @@ carousel-indicators .active {
   .parent-form {
       overflow: hidden;
       background-color: rgba(0,0,0,0.2);
-      height: 100vh
+      height: 100%;
+      min-height: 100vh
   }
   .authenticate-card {
       width: 100%;
@@ -463,7 +466,7 @@ carousel-indicators .active {
   .authenticate-signup-card {
       width: 100%;
       max-width: 28rem;
-      margin: 2% auto 0;
+      margin: 0 auto 0;
       box-shadow: 3px 4px 10px rgb(51, 30, 5);
   }
 
@@ -490,7 +493,7 @@ carousel-indicators .active {
     min-height: 100vh;
     width: 100%;
     height: 100%;
-    font-family: 'cursive';
+    font-family: -apple-system, BlinkMacSystemFont;
     background: linear-gradient(217deg, rgba(31, 16, 16, 0.95), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(70, 38, 16, 0.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(25, 8, 6, 0.8), rgba(45, 13, 3, 0.42)70.71%);
   }
 
@@ -619,6 +622,7 @@ li {
   font-size: 25px;
   font-weight: bolder
 }
+
 #notifications {
   padding-top: 10px;
   font-weight: bold 
@@ -871,4 +875,61 @@ li {
         text-transform: none !important; }
         .gradientButton .donateNow {
           border-top: 0px solid black !important; }
+
+      .auth {
+        display: flex;
+      }
+
+      .playGame {
+        color: white !important;
+        text-decoration: none !important;
+      }
+
+      .playGame:hover {
+        color: white;
+        text-decoration: none !important;
+      }
+
+/* Image Styling */
+
+      .image-preview {
+          height: 170px;
+            width: 170px;
+            border-radius: 50%;
+            border: 5px solid white;
+            margin-bottom: 2px;
+            background-color: #999;
+         }
+
+         #profile-pic {
+          display: flex;
+          margin: 0 0;
+          padding-top: 5px !important;
+          justify-content: center;
+          width: 319px;
+          object-fit: contain
+         }
+
+         #profile-pic::after {
+           color: white;
+         }
+
+         .choose-image {
+          display: flex;
+          justify-content: center;
+          padding: 2px 0
+         } 
+/* Activate Account Completion */
+         .verify-image{
+          background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("/img/landing/scattered-cards.png"); 
+          height: 100%;
+          width: 100%; 
+          position: absolute;
+          border: 2px solid gray;
+       }
+
+       .white-text a{
+      vertical-align: 350px;
+      /* margin: auto auto; */
 
+       }
diff --git a/public/js/controllers/game.js b/public/js/controllers/game.js
@@ -48,7 +48,10 @@ angular.module('mean.system')
         return false;
       }
     };
-
+    $scope.closeModal = () => {
+      $('#gameModal').remove();
+      $('.modal-backdrop').hide();
+    }
     $scope.cardIsSecondSelected = function(card) {
       if (game.curQuestion.numAnswers > 1) {
         return card === $scope.pickedCards[1];
@@ -185,7 +188,7 @@ angular.module('mean.system')
             setTimeout(function(){
               var link = document.URL;
               var txt = 'Give the following link to your friends so they can join your game: ';
-              $('#lobby-how-to-play').text(txt);
+              $('#lobby-how-to-play').css({'text-align': 'center', 'font-size':'22px', 'font-weight':'bold', 'background': 'white', 'color': 'black'}).text(txt);
               $('#oh-el').css({'text-align': 'center', 'font-size':'22px', 'background': 'white', 'color': 'black'}).text(link);
             }, 200);
             $scope.modalShown = true;

diff --git a/public/js/controllers/index.js b/public/js/controllers/index.js
@@ -57,7 +57,8 @@ angular.module('mean.system').controller('IndexController', [
             $scope.user.profileImage = res.secure_url;
             $http.post('/api/auth/signup', $scope.user)
               .then(() => {
-                $location.path('/confirmaccount');
+                $('#signUpModal').modal('show');
+                // $location.path('/confirmaccount');
               }, (error) => {
                 if (error.data.errors) {
                   $scope.hasSignupError = true;
@@ -70,12 +71,17 @@ angular.module('mean.system').controller('IndexController', [
         $http.post('/api/auth/signup', $scope.user)
           .then(
             () => {
-              $location.path('/confirmaccount');
+              // $location.path('/confirmaccount');
+              $('#signUpModal').modal('show');
             },
             (error) => {
               if (error.data.errors) {
                 $scope.hasSignupError = true;
-                $scope.signupError = error.data.errors[0].msg || error.data.msg;
+                $scope.signupError = error.data.errors[0].msg || error.data.message;
+              }
+              if (error.data.message) {
+                $scope.hasSignupError = true;
+                $scope.signupError = error.data.message;
               }
             }
           );

diff --git a/public/views/activateComplete.html b/public/views/activateComplete.html
@@ -1,3 +1,9 @@
-<div class="text-decor" ng-controller="IndexController">
-    <h4> Welcome, You have successfully verified your account. Click <a href="#!/signin">Here</a> to login</h4>
+<div class="jumbotron verify-image" ng-controller="IndexController">
+        <h6  class="display-4 text-white text-center"> Welcome, You have successfully verified your account. Click <a href="#!/signin">Here</a> to login</h6>
+        <!-- <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+        <hr class="my-4">
+        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+        <p class="lead"> -->
+          <!-- <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> -->
+        </p>
 </div>
diff --git a/public/views/answers.html b/public/views/answers.html
@@ -25,7 +25,7 @@
 <div id="info-container" ng-show="game.state === 'awaiting players'">
   <div class="inner-info">
     <!-- end of trials-->
-    <div class="lobby-how-to-play text-center">How To Play</div>
+    <div id ="lobby-how-to-play" class="lobby-how-to-play text-center">How To Play</div>
     <ol id="oh-el" style="font-weight: bold">
       <li>Each player begins with, and will always have, 10 white answer cards.</li>
       <li>For each round, one player is randomly chosen as the Card Czar.</li>

diff --git a/public/views/app.html b/public/views/app.html
@@ -1,5 +1,5 @@
 <div class="app-container" id="heythere" ng-controller="GameController">
-  <nav class="navbar1 navbar-expand-lg navbar-light bg-light">
+  <nav landing class="navbar1 navbar-expand-lg navbar-light bg-light">
     <!-- <a class="navbar-brand" href="#">Navbar</a> -->
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
       aria-expanded="false" aria-label="Toggle navigation">
@@ -10,14 +10,14 @@
       <ul class="game-nav navbar-nav mr-auto">
         <!-- <a class="navbar-brand" href="#">Navbar</a> -->
         <li class="nav-item" data-step="1" data-intro="Welcome to Card for Humanity a Game for horrible people 😄, I will be taking you on a brief tour on how to play the game click next to continue">
-          <img src="../img/landing/logo.png" alt="logo" width="80px">
+          <a href="#!/"><img src="../img/landing/logo.png" alt="logo" width="80px"></a>
         </li>
       </ul>
       <form class="form-inline my-2 my-lg-0">
-          <a href="javascript:void(0);" class="btn btn-info" ng-show="showTour" data-step="13" data-intro="Did you miss anything? Click the back button or click here to start again 🧐" onclick="javascript:introJs().start();">Take a tour</a>
+          <a href="javascript:void(0);" class="auth nav-link" ng-show="showTour" data-step="13" data-intro="Did you miss anything? Click the back button or click here to start again 🧐" onclick="javascript:introJs().start();">TAKE A TOUR</a>
         <!-- trings-->
         <!-- Trigger the modal with a button -->
-        <button type="button" class="btn btn-info" ng-show="isCustomGame() && game.state === 'awaiting players'" data-step="11" data-intro="You can invite your friends to join your game. Just search for a friend and click the invite button next to his name" data-toggle="modal" data-target="#myModal">Invite friends </button>
+        <a class="auth nav-link" ng-show="isCustomGame() && game.state === 'awaiting players'" data-step="11" data-intro="You can invite your friends to join your game. Just search for a friend and click the invite button next to his name" data-toggle="modal" data-target="#myModal">INVITE FRIENDS </a>
         <!-- Modal -->
         <div id="myModal" class="modal fade" role="dialog">
           <div class="modal-dialog">
@@ -61,8 +61,27 @@ <h5 style="color: red"> No such user found </h5>
           </div>
         </div>
         <ul class="navbar-nav">
+          <div class="auth" ng-show="showOptions">
           <li class="nav-item">
-            <div class="nav-link abandon-game" data-step="12" data-intro="Click to leave the game and go back to the Home Page. You wont be able to join the game again if it has already started." ng-click="abandonGame()">
+            <div class="nav-link auth">
+              SIGN UP
+            </div>
+          </li>
+          <li class="nav-item">
+            <div class="nav-link auth">
+              SIGN IN
+            </div>
+          </li>
+          </div>
+          <div class="auth" ng-hide="showOptions">
+          <li class="nav-item">
+            <div ng-controller="IndexController" ng-click="logout()" class="nav-link auth">
+              SIGN OUT
+            </div>
+          </li>
+          </div>
+        <li class="nav-item">
+            <div class="nav-link btn btn-danger abandon-game" data-step="12" data-intro="Click to leave the game and go back to the Home Page. You wont be able to join the game again if it has already started." ng-click="abandonGame()">
               Abandon Game
             </div>
           </li>
@@ -84,11 +103,11 @@ <h5 class="modal-title">Play Game</h5>
           </button> -->
         </div>
         <div class="modal-body">
-          <p>Would you like to Take a Tour on How To Play Before the Game begins?</p>
+          <p style="font-weight: bold">Would you like to Take a Tour on How To Play Before the Game begins?</p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          <a href="javascript:void(0);" class="btn btn-primary" data-dismiss="modal" onclick="javascript:introJs().start();">Take Tour</a>
+          <button type="button" class="btn btn-danger" ng-click="closeModal()">Close</button>
+          <a href="javascript:void(0);" class="btn btn-warning" data-dismiss="modal" onclick="javascript:introJs().start();">Take Tour</a>
         </div>
       </div>
     </div>

diff --git a/public/views/index.html b/public/views/index.html
@@ -18,23 +18,28 @@
       <div class="collapse navbar-collapse center-link" id="navbarNavDropdown">
         <ul class="navbar-nav cfh-navbar">
           <li class="nav-item">
-            <a class="nav-link" href="#">HOW TO PLAY
+            <a class="nav-link" target="_self" href="#!/#howToPlay">HOW TO PLAY
               <span class="sr-only">(current)</span>
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#">CHARITY</a>
+            <a class="nav-link" target="_self" href="#!/#charitySect">CHARITY</a>
           </li>
         </ul>
-        <a class="navbar-brand" href="#">
+        <a class="navbar-brand" href="#!/">
           <img src="../img/landing/logo.png" width="100px" alt="logo" />
         </a>
         <ul class="navbar-nav">
+          <div class="auth" ng-show="showOptions">
           <li class="nav-item">
-            <a class="nav-link" href="#">SIGN UP</a>
+            <a class="nav-link" href="#!/signup">SIGN UP</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#">SIGN IN</a>
+            <a class="nav-link" href="#!/signin">SIGN IN</a>
+          </li>
+        </div>
+          <li class="nav-item" ng-hide="showOptions">
+            <a class="nav-link" ng-click="logout()">SIGN OUT</a>
           </li>
         </ul>
       </div>
@@ -58,18 +63,62 @@ <h2 class="game-text">
             </div>
           </div>
           <h3 class="brief-info">Cards for Humanity is a fast-paced online version of the popular card game,
-            <br/>Cards Against Humanity, that gives you the opportunity to donate to children in need -
+            <br/>Cards Against Humanity, that gives you the opportunity to donate to children in need 
             <br/>all while remaining as despicable and awkward as you naturally are.</h3>
-          <div class="button-wrapper">
+          <div class="button-wrapper" ng-show="showOptions">
             <button class="btn btn-signup">SIGNUP</button>
             <button class="btn btn-play-as-guest">PLAY AS GUEST</button>
           </div>
+          <div class="button-wrapper" ng-hide="showOptions">
+            <a data-toggle="modal" data-target="#playModal" class="playGame btn btn-signup">PLAY GAME WITH STRANGERS</a>
+            <a data-toggle="modal" data-target="#playWithFriendsModal" class="playGame btn btn-play-as-guest">PLAY GAME WITH FRIENDS</a>
+          </div>
         </div>
-
       </div>
     </section>
 
-    <section class="how-to-play overlay">
+     <div id="playWithFriendsModal" class="modal fade">
+           <div class="modal-dialog">
+             <!-- Modal content -->
+             <div class="modal-content">
+               <div class="modal-header">
+                 <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
+                 <h4 class= "modal-title">PLAY GAME</h4>
+               </div>
+               <div class= "modal-body">
+                 <p style="font-weight: bold">You are about to start a new game do you want to proceed?</p>
+               </div>
+               <div class= "modal-footer">
+                 <button type= "button" class= "btn btn-warning"><a class="playGame" href= "/play?custom">PLAY GAME</a></button>
+                 <button type= "button" class= "btn btn-warning" data-dismiss= "modal">CLOSE</button>
+               </div>
+             </div>
+           </div>
+         </div>
+
+         <!-- Play With Guests Modal -->
+         <div id= "playModal" class= "modal fade">
+           <div class= "modal-dialog">
+
+             <!-- Modal content-->
+             <div class= "modal-content">
+               <div class= "text-center modal-header">
+                 <!-- <button type= "button" class= "close" data-dismiss= "modal">&times;</button> -->
+                 <h4 class="modal-title text-center">PLAY GAME</h4>
+               </div>
+               <div class= "modal-body">
+                 <p style="font-weight: bold">You are about to start a new game do you want to proceed?</p>
+               </div>
+               <div class= "modal-footer">
+                 <button type= "button" class= "btn btn-warning"><a class="playGame" href= "/play">PLAY GAME</a></button>
+                 <button type= "button" class= "btn btn-warning" data-dismiss= "modal">CLOSE</button>
+               </div>
+             </div>
+           </div>
+         </div> 
+
+
+    <section id="howToPlay" class="how-to-play overlay">
       <div class="content overlay">
         <h2 class="text-center">HOW TO PLAY</h2>
         <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
@@ -135,7 +184,7 @@ <h2 class="text-center">HOW TO PLAY</h2>
 
       </div>
     </section>
-    <section class="charity">
+    <section id="charitySect" class="charity">
       <div class="content">
         <h2 class="text-center">CHARITY</h2>
         <div class="charity-content">