syncronized selection

db.js

@@ -72,7 +72,13 @@ exports.addUserToRoom = (userId, roomId, state, fn=null) => {
 exports.getRoom = (roomId, fn) => {
   if (!roomId) return fn({error: "Room ID is required"});
   var sql = `
-    SELECT token, edition, rotate_czar as rotateCzar, cur_prompt as curPrompt, state
+    SELECT 
+      token, 
+      edition, 
+      rotate_czar as rotateCzar, 
+      cur_prompt as curPrompt, 
+      state, 
+      selected_response as selectedResponse
     FROM rooms
     WHERE id = ?;
   `;
@@ -91,7 +97,8 @@ exports.getRoom = (roomId, fn) => {
       edition: results[0].edition,
       rotateCzar: results[0].rotateCzar,
       curPrompt: results[0].curPrompt,
-      state: results[0].state
+      state: results[0].state,
+      selectedResponse: results[0].selectedResponse
     });
   });
 };
@@ -271,12 +278,11 @@ function getCards(roomId, black, count, fn) {
         FROM room_packs
         WHERE room_id = ${roomId}
       )
-    )
-    AND id NOT IN (
+    ) AND id NOT IN (
       SELECT card_id
       FROM room_${color}_cards
       WHERE room_id = ${roomId}
-    )
+    ) ${black ? "AND pick = 1" : ""}
     ORDER BY RAND()
     LIMIT ${count};
   `;

index.js

@@ -687,6 +687,52 @@ function initSocket(socket, userId) {
     });
   });
 
+  socket.on("selectResponse", (data, fn) => {
+    if (data.cardId != null && !helpers.validateUInt(data.cardId)) return fn({error: "Invalid Card ID"});
+    var user = getUser(userId, true);
+    if (user.error) return fn(user);
+    if (user.state != vars.UserStates.czar) {
+      console.warn("User #" + userId + " with state '" + user.state + "' tried to reveal a response!");
+      return fn({error: "Invalid User State"});
+    }
+
+    db.getRoom(user.roomId, room => {
+      if (room.error) return fn(room);
+      if (room.state != vars.RoomStates.readingCards) return fn({error: "Invalid Room State"});
+
+      db.getRoomUsers(user.roomId, response => {
+        if (response.error) {
+          console.warn("Failed to get users when revealing card in room #" + user.roomId);
+          return fn(response);
+        } else if (response.userIds.length == 0) return fn({error: "Invalid Room"});
+
+        if (data.cardId != null) {
+          db.getWhiteCardByID(data.cardId, card => {
+            if (card.error) return fn(card);
+
+            finishSelectResponse(user, response, data.cardId);
+          });
+        } else finishSelectResponse(user, response, null);
+      });
+    });
+  });
+
+  function finishSelectResponse(user, roomUserInfo, cardId) {
+    db.query(`UPDATE rooms SET selected_response = ? WHERE id = ?;`,
+    [cardId, user.roomId], (err, result) => {
+      if (err) {
+        console.warn("Failed to update selected card for room #" + user.roomId);
+        return fn({error: "MySQL Error"});
+      }
+
+      roomUserInfo.userIds.forEach(roomUserId => {
+        if (!users.hasOwnProperty(roomUserId) || roomUserId == userId) return;
+
+        users[roomUserId].socket.emit("selectResponse", {cardId: cardId});
+      });
+    });
+  }
+
   /***************
    * Chat System *
    ***************/

public/inc/main.js

@@ -696,6 +696,28 @@ socket.on("revealResponse", (data) => {
   cardElement.removeClass("back").addClass("front");
   cardElement.children(".card-text").text(data.card.text);
   cardElement.attr("id", "response-revealed-" + data.card.id);
+
+  if (users[userId].state == UserStates.czar) {
+    $("#response-revealed-" + data.card.id).off("click").on("click", event => {
+      if (selectedCard) {
+        $("#response-revealed-" + selectedCard).removeClass("selected-card");
+      }
+      $("#response-revealed-" + data.card.id).addClass("selected-card");
+      selectedCard = data.card.id;
+
+      $("#select-winner").show();
+      $("#cur-black-card").addClass("czar-mode");
+
+      socket.emit("selectResponse", {cardId: data.card.id}, response => {
+        if (response.error) return console.warn("Failed to select response:", response.error);
+      });
+    });
+  }
+});
+
+socket.on("selectResponse", (data) => {
+  $(".selected-card").removeClass("selected-card");
+  if (data.cardId) $("#response-revealed-" + data.cardId).addClass("selected-card");
 });
 
 /********************
@@ -721,7 +743,7 @@ function addResponseCard(id, isCzar) {
 
   // Only the czar can reveal answers
   if (isCzar) {
-    $("#response-card-" + id).click(event => {
+    $("#response-card-" + id).on("click", event => {
       socket.emit("revealResponse", {position: id}, response => {
         if (response.error) return console.warn("Failed to reveal respose #" + id + ":", response.error);
       });
@@ -777,10 +799,20 @@ $("#hand").sortable({
 });
 
 $("#game-wrapper").click(event => {
-  if (!submittingCard && selectedCard && ($(event.target).is("#game-wrapper") || $(event.target).is("#hand"))) {
+  if (!submittingCard && selectedCard && ($(event.target).is("#game-wrapper") || $(event.target).is("#hand") || $(event.target).is("#response-cards"))) {
     $("#white-card-" + selectedCard).removeClass("selected-card");
+    $("#response-revealed-" + selectedCard).removeClass("selected-card");
     selectedCard = null;
-    $("#central-action").hide();
+
+    if (room.state == RoomStates.readingCards) {
+      $("#select-winner").hide();
+      $("#cur-black-card").removeClass("czar-mode");
+      socket.emit("selectResponse", {cardId: null}, response => {
+        if (response.error) return console.warn("Failed to deselect card:", response.error);
+      });
+    } else {
+      $("#central-action").hide();
+    }
   }
 })
 

public/inc/main.scss

@@ -278,10 +278,17 @@ input[type=text] {
 			margin: 10px;
 			transition: $resizeTransition;
 
-			.card-text::after {
-			  bottom: 112px;
 
+			&.selected-card {
+				border: 2px solid $contrastColor;
+				margin: 9px;
+			}
 
+			.card-text::after {
+				display: none;
+
+				// TODO: fix jumpy bottom text during transition from hover;
+			  bottom: 112px;
 
 				@media only screen and (min-width: 1450px) {
 					bottom: 3px;
@@ -292,6 +299,7 @@ input[type=text] {
 			}
 
 			&:hover {
+				transition: none;
 				.card-text::after {
 					bottom: 0;
 				}
@@ -309,6 +317,10 @@ input[type=text] {
 		@media only screen and (max-width: 1550px) {
 			.card {
 				margin: 5px;
+
+				&.selected-card {
+					margin: 4px;
+				}
 			}
 		}
 
@@ -358,7 +370,7 @@ input[type=text] {
 				transform: scale(1.15);
 			}
 
-			@media only screen and (max-width: 1450px) {
+			@media only screen and (max-width: 1450px) and (min-width: $firstTransitionWidth) {
 				transform: scale(1.25);
 				left: 28.5%;
 				&.czar-mode {

public/index.html

@@ -24,7 +24,7 @@
 </head>
 <body>
 	<div id="game-wrapper">
-		<div id="cur-black-card"></div> <!-- addClass czar-mode when select-winer is shown -->
+		<div id="cur-black-card"></div>
 		<div id="hand"></div>
 		<div id="response-cards"></div>
 		<div id="select-winner" class="action-button" style="display:none;">Select Winner</div>

setup/basecards.csv

@@ -577,7 +577,7 @@ Response,Canadian Netflix.,,,,,,,,,,,,,,,,,,,,v2.0,,,,,
 Response,Canned tuna with extra dolphin.,,KS,v1.0,v1.1,,,,,,,,,,,,,,,,,,,,,
 Response,Capturing Newt Gingrich and forcing him to dance in a monkey suit.,,,,,,v1.3,v1.4,v1.5,,,,,,,,,,,,,,,,,
 Response,Cardi B.,,,,,,,,,,,,,,,,,,,,,,,,v2.1,
-Response,Cards Against Humanity.,,KS,v1.0,v1.1,v1.2,v1.3,v1.4,v1.5,v1.5,v1.6,v1.6,v1.6,v1.6,v1.7,v1.7,v1.7,v1.7,v1.7a,v2.0,v2.0,v2.0,v2.0,v2.0,v2.1,
+Response,Cards Against Quarantine.,,KS,v1.0,v1.1,v1.2,v1.3,v1.4,v1.5,v1.5,v1.6,v1.6,v1.6,v1.6,v1.7,v1.7,v1.7,v1.7,v1.7a,v2.0,v2.0,v2.0,v2.0,v2.0,v2.1,
 Response,Cashed-up bogans.,,,,,,,,,,,,,v1.6,,,,v1.7,,,,,v2.0,,,
 Response,Casually suggesting a threesome.,,,,,,,,,,,,,,,,,,,v2.0,v2.0,v2.0,v2.0,v2.0,v2.1,
 Response,Catapults.,,KS,v1.0,v1.1,v1.2,v1.3,v1.4,v1.5,v1.5,v1.6,v1.6,v1.6,v1.6,v1.7,v1.7,v1.7,v1.7,v1.7a,v2.0,v2.0,v2.0,v2.0,v2.0,v2.1,

setup/packs.csv

@@ -592,7 +592,7 @@ Response,My worthless son.,
 Response,Neil Diamond's Greatest Hits.,
 Response,Never having sex again.,
 Response,"No clothes on, penis in vagina.",
-Response,No longer finding any Cards Against Humanity card funny.,
+Response,No longer finding any Cards Against Quarantine card funny.,
 Response,Not believing in giraffes.,
 Response,Oil!,
 Response,One unforgettable night of passion.,
@@ -1613,7 +1613,6 @@ Response,A dad with a creamy asshole.,
 Response,An average farmer with an inspiring penis.,
 Response,A tiny CEO with a chocolate-covered asshole.,
 Set,Retail Pack,RETAIL
-Prompt,How are the writers of Cards Against Humanity spending your $25?,
 Prompt,Looking to earn big bucks? Learn how to make ______ work for you!,
 ,,
 Response,A teenage boy gunning for a handjob.,

setup/setup.sql

@@ -64,6 +64,7 @@ CREATE TABLE rooms (
 	rotate_czar BOOLEAN DEFAULT FALSE,
 	cur_prompt INT,
 	state TINYINT NOT NULL DEFAULT 1,
+	selected_response INT,
 	PRIMARY KEY (id)
 );