Add improvements to quiz bunny

4 files changed, 52 insertions, 24 deletions

diff --git a/src/quiz-bunny/index.html b/src/quiz-bunny/index.html
index 127db65..9b0a6db 100644
--- a/src/quiz-bunny/index.html
+++ b/src/quiz-bunny/index.html
@@ -20,14 +20,14 @@
             </h1>
             <div>
                 <div>
-                    <input style="width: 340px;" type="text" placeholder="username" v-model="username">
+                    <input style="width: 390px;" type="text" placeholder="username" v-model="username">
                 </div>
                 <div>
                     <input style="width: 100%;" type="button" value="Host game" v-on:click="hostGame"
                         :disabled="username.length == 0">
                 </div>
                 <div>
-                    <input type="text" placeholder="game code" v-model="gameCode" style="width: 250px;"
+                    <input type="text" placeholder="game code" v-model="gameCode" style="width: 300px;"
                         v-on:keyup.enter="joinGame">
                     <input type="button" value="Join game" v-on:click="joinGame"
                         :disabled="username.length == 0 || gameCode.length == 0">
@@ -47,6 +47,7 @@
                 </div>
             </div>
             <div v-else>
+                <h1>{{game.round+1}}/{{game.maxRound}}</h1>
                 <div v-if="game.state == STATES.TYPING" class="typing">
                     <h1>Answer:</h1>
                     <h2>{{game.prompt}}</h2>
@@ -82,9 +83,20 @@
                 <div v-if="game.state == STATES.WAITING" class="waiting">
                     <h1>Results:</h1>
                     <h2>{{game.prompt}}</h2>
-                    <div v-for="(answer, i) in game.answers">
-                        <span>{{answer.text}}</span><span>{{answer.voteCount}} votes</span>
-                    </div>
+                    <table>
+                        <tr>
+                            <th>Answer</th>
+                            <th>Author</th>
+                            <th>Votes</th>
+                            <th>Endorsements</th>
+                        </tr>
+                        <tr v-for="(answer, i) in game.answers">
+                            <td>{{answer.text}}</td>
+                            <td>{{answer.name}}</td>
+                            <td>{{answer.voteCount}}</td>
+                            <td><p v-for="name in answer.voteNames">{{name}}</p></td>
+                        </tr>
+                    </table>
                     <input type="button" value="Ready" v-on:click="ready" :disabled="game.ready">
                     <div class="readyList">
                         <h4>Waiting:</h4>
diff --git a/src/quiz-bunny/prompts.js b/src/quiz-bunny/prompts.js
index c6326cd..6531ead 100644
--- a/src/quiz-bunny/prompts.js
+++ b/src/quiz-bunny/prompts.js
@@ -30,7 +30,7 @@ var prompts = [
     "What is @'s favorite TV show?",
     "If @ was the host of a reality TV show, what would it be about?",
     "What is the last song @ listened to?",
-    "What is @'s go to restaurant owner?",
+    "What is @'s go to restaurant order?",
     "What would @ cook for a dinner party?",
     "What is the coolest thing @ has done?",
     "What is at the top of @'s grocery list?",
diff --git a/src/quiz-bunny/server.js b/src/quiz-bunny/server.js
index 80c50c3..47aa6c2 100644
--- a/src/quiz-bunny/server.js
+++ b/src/quiz-bunny/server.js
@@ -34,7 +34,8 @@ function setUpRoutes(server, models, jwtFunctions, database) {
         return {
             host: hostCookie,
             players: [{ cookie: hostCookie, name: hostName }],
-            gameCode: gameCode
+            gameCode: gameCode,
+            maxRound: 8
         }
     }
     // adds a player to a game object
@@ -54,8 +55,8 @@ function setUpRoutes(server, models, jwtFunctions, database) {
     }
     function getPlayerNames(players) {
         // return players.map(player => player.name)
-        return players.map(player => { 
-            return {name: player.name, ready: player.ready}
+        return players.map(player => {
+            return { name: player.name, ready: player.ready }
         })
     }
     // Turn the game into a public game object (no cookies, etc.)
@@ -74,7 +75,9 @@ function setUpRoutes(server, models, jwtFunctions, database) {
                 name: username,
                 gameCode: game.gameCode,
                 gameStarted: game.gameStarted,
-                state: game.state
+                state: game.state,
+                round: game.round,
+                maxRound: game.maxRound
             }
             if (game.state == STATES.TYPING) {
                 newGame.submitted = game.answers.some(answer => answer.cookie == cookie)
@@ -83,7 +86,7 @@ function setUpRoutes(server, models, jwtFunctions, database) {
                     var playerWithCookie = game.players.find(p => {
                         return p.name == player.name
                     })
-                    if(game.answers.some(answer => answer.cookie == playerWithCookie.cookie)){
+                    if (game.answers.some(answer => answer.cookie == playerWithCookie.cookie)) {
                         player.ready = true
                     } else {
                         player.ready = false
@@ -103,7 +106,12 @@ function setUpRoutes(server, models, jwtFunctions, database) {
                 })
             } else if (game.state == STATES.WAITING) {
                 newGame.answers = game.answers.map(answer => {
-                    return { text: answer.text, voteCount: answer.votes.length }
+                    return {
+                        text: answer.text,
+                        voteCount: answer.votes.length,
+                        voteNames: answer.votes.map(vote => vote.name),
+                        name: findPlayerByCookie(game, answer.cookie).name
+                    }
                 })
                 newGame.prompt = game.prompts[game.round]
                 var game = findGameByCookie(cookie)
@@ -114,7 +122,7 @@ function setUpRoutes(server, models, jwtFunctions, database) {
                     return { name: player.name, score: player.score }
                 })
                 // sort
-                scores.sort((a,b) => b.score - a.score); 
+                scores.sort((a, b) => b.score - a.score);
                 newGame.scores = scores
             }
 
@@ -131,9 +139,9 @@ function setUpRoutes(server, models, jwtFunctions, database) {
         }
         return a;
     }
-    function getRandomPlayer(stack, playersList){
-        if(stack.length == 0){
-            for(var i = 0; i < playersList.length; i++){
+    function getRandomPlayer(stack, playersList) {
+        if (stack.length == 0) {
+            for (var i = 0; i < playersList.length; i++) {
                 stack.push(playersList[i])
             }
             shuffle(stack)
@@ -144,13 +152,15 @@ function setUpRoutes(server, models, jwtFunctions, database) {
     function getPrompts(playerNames, size) {
         var gamePrompts = []
         var stack = []
-        for(var i = 0; i < size; i++){
+        while (gamePrompts.length < size) {
             var randomIndex = Math.floor(Math.random() * prompts.length)
-            var prompt =  prompts[randomIndex]
-            while(prompt.includes("@")){
+            var prompt = prompts[randomIndex]
+            while (prompt.includes("@")) {
                 prompt = prompt.replace("@", getRandomPlayer(stack, playerNames))
             }
-            gamePrompts.push(prompt)
+            if (gamePrompts.indexOf(prompt) == -1) {
+                gamePrompts.push(prompt)
+            }
         }
         return gamePrompts
     }
@@ -160,7 +170,7 @@ function setUpRoutes(server, models, jwtFunctions, database) {
         if (game && game.players.length >= 2) {
             game.gameStarted = true
             var playerNames = game.players.map(player => player.name)
-            game.prompts = getPrompts(playerNames, 8)
+            game.prompts = getPrompts(playerNames, game.maxRound)
             game.round = 0;
             game.players.forEach(player => {
                 player.score = 0
@@ -346,7 +356,7 @@ function setUpRoutes(server, models, jwtFunctions, database) {
         } else {
             var game = findGameByCookie(cookie)
             game.players = game.players.filter(player => player.cookie != cookie)
-            if(game.players.length == 0){
+            if (game.players.length == 0) {
                 games = games.filter(g => g != game)
             }
             res.status(200).send()
diff --git a/src/quiz-bunny/static/styles.css b/src/quiz-bunny/static/styles.css
index 45da568..327011f 100644
--- a/src/quiz-bunny/static/styles.css
+++ b/src/quiz-bunny/static/styles.css
@@ -1,6 +1,6 @@
 body {
     background-image: url("/quiz-bunny/bunny.jpg");
-    background-position: center;
+    background-position: center top;
     background-repeat: no-repeat;
 }
 h1, h2, h3, h4, li, span {
@@ -8,9 +8,15 @@ h1, h2, h3, h4, li, span {
     color: white;
 }
 
+td, th{
+    text-align: left;
+    background-color: white;
+    color: black;
+}
+
 .center{
     margin: auto;
-    width: 350px;
+    width: 400px;
     padding: 10px;
 }
 input {