Merge c108db9 into 2e3e0ed

config/socket/socket.js

@@ -133,6 +133,10 @@ module.exports = function (io) {
     socket.on('disconnect', () => {
       exitGame(socket);
     });
+
+    socket.on('pickBlackCards', () => {
+      allGames[socket.gameID].continue(allGames[socket.gameID]);
+    });
   });
 
   const joinGame = function (socket, data) {

public/css/common.css

@@ -80,35 +80,12 @@ body,
 .main-container,
 .cont,
 #first-section,
-/* #inner-container {
-  height: 100%;
-} */
-
-
-
-
-/* .content {
-    margin-top: 50px;
-    width: 70%;
-  } */
-
-/* #main-container {
-  height: 100%;
-} */
-/* #main-container #app-container {
-
-  max-width: 1200px;
-  margin: 0px auto;
-  position: relative;
-} */
 
 #main-container #app-container #menu-container {
   width: 100%;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
-
-
 }
 @media (max-width: 520px) {
   #main-container #app-container #menu-container {
@@ -1739,7 +1716,6 @@ body,
   padding: 10px;
 }
 
-
 .circlebtn {
   background: transparent;
   height: 150px;
@@ -1766,7 +1742,6 @@ body,
   padding: 10px;
   padding: 10px;
   background-color: white;
-
 }
 
 .centersoutside{
@@ -1793,7 +1768,6 @@ body,
   box-shadow: 0 0 5px #888;
 }
 
-
 .upload-btn-wrapper {
   position: relative;
   overflow: hidden;
@@ -1851,7 +1825,6 @@ body,
 
 }
 
-
 .left h4{
     padding: 0 10px;
 }
@@ -1860,7 +1833,6 @@ body,
   color:  #4867AD
 }
 
-
 .twitter {
   color: #48A0EC
 }
@@ -1885,4 +1857,86 @@ body,
   text-align: center; /* To center it horizontally (if you want) */
   line-height: 30px; /* To center it vertically */
   color: white; 
-}
+}
+
+deckSize {
+  width: 200px;
+  height: 200px;
+}
+
+img.deckSize { 
+  cursor: pointer; 
+}
+
+.mycard {
+  height: 200px;
+  transform-style: preserve-3d;
+  transition: all 1s ease-in-out;
+  width: 200px;
+  transform: rotateY(180deg);
+}
+
+.mycard .side {
+  backface-visibility: hidden;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.mycard .back {
+  background: #eaeaed;
+  color: #0087cc;
+  line-height: 150px;
+  text-align: center;
+  transform: rotateY(180deg);
+}
+
+.flip-container {
+	perspective: 1000px;
+}
+
+.flip-container.hover .flipper, .flip-container.flip .flipper {
+	transform: rotateY(180deg);
+}
+
+.flip-container, .front, .back {
+  width: 150px;
+  height: 180px;
+}
+
+.flipper {
+	transition: 0.6s;
+	transform-style: preserve-3d;
+
+	position: relative;
+}
+
+/* hide back of pane during swap */
+.front, .back {
+	backface-visibility: hidden;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.back {
+	transform: rotateY(180deg);
+}
+
+.myfront {
+  width:300px;
+  height: 400px;
+  z-index: 1;
+  background: black;
+  color: white;
+  cursor: pointer;
+}
+
+.myface {
+  width:300px;
+  height: 400px;
+  font-family: Georgia;
+  font-size: 3em;
+  text-align: center;
+  line-height: 200px;
+}

public/css/style.css

@@ -28,6 +28,30 @@
   border-radius: 10px;
 }
 
+#app-modal2 {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  z-index: 1000;
+  position: fixed;
+  padding: 20px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.7);
+}
+
+#app-modal-content2 {
+  background: #fff;
+  padding-bottom: 10px;
+  max-height: 50%;
+  max-width: 80%;
+  border-radius: 10px;
+}
+
+
+
 .modal-header {
   background-color: rgba(232, 174, 64);
   height: 20%;
@@ -198,7 +222,14 @@
 }
 
 .modal-header {
-  background-color: green;
+  background-color: black;
+  height: 20%;
+  color: #fff;
+  text-align: center;
+}
+
+.modal-header2 {
+  background-color:black;
   height: 20%;
   color: #fff;
   text-align: center;
@@ -209,6 +240,12 @@
   font-weight: lighter;
 }
 
+.modal-body2 {
+  margin: 10px;
+  font-weight: lighter;
+}
+
+
 .button-div {
   text-align: center;
   margin-top: 180px; 
@@ -405,9 +442,6 @@ p a:hover {
   z-index:1000;
 }
 
-
-
-
 /**** LANDING ****/
 
 #main-text {

public/js/controllers/game.js

@@ -208,6 +208,33 @@ angular //eslint-disable-line
         return game.winningCard !== -1;
       };
 
+
+      $scope.$watch('game.state', () => {
+        if (!$scope.isCzar() && game.state === 'black card') {
+          $scope.waitingForCzarToPick = 'Wait! The Czar is picking a card';
+        } else {
+          $scope.waitingForCzarToPick = '';
+        }
+      });
+
+
+      $scope.continue = () => {
+        if ($scope.isCzar()) {
+          game.continue();
+        }
+      };
+
+
+      $scope.cardMixer = () => {
+        if ($scope.isCzar() && game.state === 'black card') {
+          document.querySelector('#myCard').classList.toggle('flip');
+          $timeout(() => {
+            document.querySelector('#myCard').classList.toggle('flip');
+            $scope.continue();
+          }, 2000);
+        }
+      };
+
       $scope.startGame = function () {
         game.startGame();
       };

public/js/services/game.js

@@ -143,7 +143,16 @@ angular.module('mean.system')
       game.state = data.state;
     }
 
-    if (data.state === 'waiting for players to pick') {
+
+    if (data.state === 'black card') {
+      game.czar = data.czar;
+      if (game.czar === game.playerIndex) {
+        addToNotificationQueue('You are now the Czar');
+        addToNotificationQueue('Click the black card to choose the question.')
+      } else {
+        addToNotificationQueue('Wait! The Czar is picking a card');
+      }
+    } else if (data.state === 'waiting for players to pick') {
       game.czar = data.czar;
       game.curQuestion = data.curQuestion;
       // Extending the underscore within the question
@@ -217,6 +226,10 @@ angular.module('mean.system')
     socket.emit('startGame');
   };
 
+  game.continue = () => {
+    socket.emit('pickBlackCards');
+  };
+
   game.leaveGame = function() {
     game.players = [];
     game.time = 0;

public/views/answers.html

@@ -46,8 +46,21 @@ <h3>What would you like to do now?</h3><br>
 
 <!-- Game CZAR-->
 <section class="game-czar" ng-show="isCzar() && game.table.length===0 && game.state !== 'game dissolved' && game.state !== 'awaiting players'">
-  <h2>You are now the game Czar<br>
-  Players are choosing their answers. Prepare to select the Winner</h2>
+    <div ng-show="isCzar() && game.state === 'black card'">
+        <div>
+          <div>
+              <h2 class="text-align: center">You are now the game Czar</h2>
+          </div>
+          <div>
+              <h3 style="color:red; font-size: 20px; text-align: center;"> Click on the black card to draw the next question</h3>
+            <div >
+            </div>
+          </div>
+        </div>
+      </div>
+    <div ng-show="isCzar() && game.state !== 'black card'">
+      <h2>Players are choosing their answers. Prepare to select the Winner</h2>
+  </div>
 </section>
 
 <!-- Game Cards -->