added scoring system and filtered some more words

iuliuvisovan · Jan 24, 2017 · 85d42ad · 85d42ad
1 parent 4d6cb49
commit 85d42ad
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 79 deletions.
diff --git a/index.html b/index.html
@@ -16,42 +16,37 @@
 </head>
 
 <body>
-    <div class="flex-centered" data-bind="visible: !IsStarted() && !Winner() && !SomeoneRageQuit()" style="padding: 15px">
-        <h1>Hi</h1>
+    <div class="page flex-centered" data-bind="visible: !IsStarted() && !Winner() && !SomeoneRageQuit()" style="padding: 15px">
+        <h1 style="margin: 0">Hi</h1>
         <h3>Do you have a name?</h3>
         <input data-bind="textInput: CurrentPlayerName" placeholder="Yes sir. My name is..">
+        <h5 class="score-count">You have <span data-bind="text: CurrentPlayerWinCount">0</span> wins thus far.</h5>
         <br/>
-        <h3>Other players:</h3>
-        <div data-bind="foreach: Players">
-            <div class="player" data-bind="text: name"></div>
-        </div>
+        <h3 style="margin-top: 0">Other players:</h3>
+        <div data-bind='component: { name: "player-list", params: { Players: Players }}'></div>
         <h3 data-bind="visible: Players().length" style="text-align: center;">
             Great. <br/>You can wait invite more friends or <a href="#" style="color: #FF5722" data-bind="click: Go">start right now</a>.
         </h3>
     </div>
-    <div class="flex-centered" data-bind="visible: !IsStarted() && !Winner() && SomeoneRageQuit()" style="padding: 15px; display: none">
+    <div class="page flex-centered" data-bind="visible: !IsStarted() && !Winner() && SomeoneRageQuit()" style="padding: 15px; display: none">
         <h1 style="text-align: center">Your opponent left, game can't continue :(</h1>
         <input data-bind="textInput: CurrentPlayerName" placeholder="My name's'">
+        <h5 class="score-count">You have <span data-bind="text: CurrentPlayerWinCount">0</span> wins thus far.</h5>
         <br/>
-        <h3>Other players:</h3>
-        <div data-bind="foreach: Players">
-            <div class="player" data-bind="text: name"></div>
-        </div>
+       <div data-bind='component: { name: "player-list", params: { Players: Players }}'></div>
         <h3 data-bind="visible: Players().length" style="text-align: center;">
             Ok. <br/><a href="#" style="color: #FF5722" data-bind="click: Go">Go?</a>
         </h3>
     </div>
-    <div class="flex-centered" data-bind="visible: !IsStarted() && Winner() && !SomeoneRageQuit()" style="padding: 15px; display: none">
+    <div class="page flex-centered" data-bind="visible: !IsStarted() && Winner() && !SomeoneRageQuit()" style="padding: 15px; display: none">
         <h1>Game over!</h1>
         <h3 style="margin: 0">Winner:</h3>
         <h1 style="margin: 0" data-bind="text: Winner"></h1>
-        <h3>What's your name?</h3>
+        <h3>Your name:</h3>
         <input data-bind="textInput: CurrentPlayerName" placeholder="My name's'">
+        <h5 class="score-count">You have <span data-bind="text: CurrentPlayerWinCount">0</span> wins thus far.</h5>
         <br/>
-        <h3>Other players:</h3>
-        <div data-bind="foreach: Players">
-            <div class="player" data-bind="text: name"></div>
-        </div>
+        <div data-bind='component: { name: "player-list", params: { Players: Players }}'></div>
         <h3 data-bind="visible: Players().length" style="text-align: center;">
             Wanna <br/><a href="#" style="color: #FF5722" data-bind="click: Go">Go again?</a>
         </h3>
@@ -78,10 +73,10 @@ <h3 class="player-progress-name" data-bind="text: name"></h3>
                 <!-- /ko -->
             </div>
             <div class="nope" data-bind="visible: CurrentCorrectAnswer().length">
-                Nope, Google says that was a<span data-bind="visible: CurrentCorrectAnswer().startsWith('a') || CurrentCorrectAnswer().startsWith('e') || CurrentCorrectAnswer().startsWith('i')  ||  CurrentCorrectAnswer().startsWith('o')">n</span>
-                "<span style="text-shadow: 1px 1px rgba(0,0,0,0.4);" data-bind="text: CurrentCorrectAnswer"></span>".
+                Nope, Google says that was a<span data-bind="visible: CurrentCorrectAnswer().startsWith('a') || CurrentCorrectAnswer().startsWith('e') || CurrentCorrectAnswer().startsWith('i')  ||  CurrentCorrectAnswer().startsWith('o')">n</span>                "
+                <span style="text-shadow: 1px 1px rgba(0,0,0,0.4);" data-bind="text: CurrentCorrectAnswer"></span>".
             </div>
-            <div class="question-image-wrapper">   
+            <div class="question-image-wrapper">
                 <img id="questionImage" class="question-image" data-bind="attr: { src: CurrentQuestion }" /><br/>
             </div>
             <div style="display: flex;justify-content: space-between; align-items: center; margin: 212px 5px 0 0px">
@@ -96,7 +91,7 @@ <h3 id="h3WhatIsThis" style="margin: 0; background: rgba(255, 255, 255, 0.6); co
     <script src="/bower_components/socket.io-client/dist/socket.io.js"></script>
     <script src="/bower_components/knockout/dist/knockout.debug.js"></script>
     <script src="/js/levenstein.js"></script>
-    <script src="/js/whatisthis-client.js?v=22Jan2017"></script>
+    <script src="/js/whatisthis-client.js?v=24Jan2017"></script>
     <script>
         (function (i, s, o, g, r, a, m) {
             i['GoogleAnalyticsObject'] = r;

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -1,6 +1,6 @@
 body {
     margin: 0;
-    overflow: hidden;
+    overflow-x: hidden;
     font-family: 'Montserrat', sans-serif;
 }
 
@@ -21,6 +21,7 @@ input {
     padding: 15px;
     border: 1px solid #BF360C;
     margin: 10px;
+    position: relative;
 }
 
 .progress-area {
@@ -134,4 +135,19 @@ input {
     #inputCurrentAnswer {
         margin-right: 30vw;
     }
+}
+
+.score-count {
+    margin-top: 5px;
+    font-weight: 100;
+}
+
+.score-count span {
+    font-weight: 800;
+}
+
+.player-win-count {
+    color: #00BCD4;
+        position: absolute;
+    left: -66px;
 }
diff --git a/public/js/whatisthis-client.js b/public/js/whatisthis-client.js
@@ -19,6 +19,7 @@ var RushManager = function () {
         socket.emit('playerUpdated', JSON.stringify({
             name: self.CurrentPlayerName(),
             score: self.CurrentPlayerScore(),
+            winCount: self.CurrentPlayerWinCount()
         }));
     });
 
@@ -27,7 +28,12 @@ var RushManager = function () {
     self.CurrentQuestion = ko.observable('');
     self.CurrentAnswer = ko.observable('');
     self.CurrentCorrectAnswer = ko.observable('');
+    self.CurrentPlayerWinCount = ko.observable(0);
+    self.CurrentPlayerWinCount.subscribe(newValue => {
+        sessionStorage.setItem('winCount', newValue);
+    });
     self.CurrentCorrectAnswerHidden = '';
+
     self.LoadingNextImage = ko.observable(true);
     self.SomeoneRageQuit = ko.observable(false);
     self.CountDownSeconds = ko.observable(3);
@@ -76,6 +82,9 @@ var RushManager = function () {
             clearInterval(intervalCountdownSound);
             self.Loading(false);
             self.CountDownSeconds(3);
+            setTimeout(() => {
+                $("#inputCurrentAnswer").focus();
+            }, 150);
         }, 3000);
     }
 
@@ -99,8 +108,32 @@ var RushManager = function () {
             self.CurrentPlayerName(savedName);
             ga('send', 'event', 'Game', 'playerRejoin', savedName);
         }
+        var savedWinCount = sessionStorage.getItem('winCount');
+        if (savedWinCount && savedWinCount.length) {
+            self.CurrentPlayerWinCount(savedWinCount);
+            socket.emit('playerUpdated', JSON.stringify({
+                name: self.CurrentPlayerName(),
+                score: self.CurrentPlayerScore(),
+                winCount: self.CurrentPlayerWinCount()
+            }));
+        }
+
         socket.on('playerlistupdate', players => {
             self.Players(JSON.parse(players).filter(x => x.id != socket.id));
+            var currentPlayerWinCount = JSON.parse(players).find(x => x.id == socket.id).winCount;
+            if (currentPlayerWinCount < 1) {
+                var savedWinCount = sessionStorage.getItem('winCount');
+                if (savedWinCount && savedWinCount.length) {
+                    self.CurrentPlayerWinCount(savedWinCount);
+                    socket.emit('playerUpdated', JSON.stringify({
+                        name: self.CurrentPlayerName(),
+                        score: self.CurrentPlayerScore(),
+                        winCount: self.CurrentPlayerWinCount()
+                    }));
+                }
+            } else {
+                self.CurrentPlayerWinCount(currentPlayerWinCount);
+            }
         });
         socket.on('playermissed', (playerDataJson) => {
             var playerData = JSON.parse(playerDataJson);
@@ -143,8 +176,27 @@ var RushManager = function () {
             self.CurrentPlayerScore(self.CurrentPlayerScore() + 1);
             setTimeout(() => {
                 self.End();
-                self.Winner(winner);
+                if (JSON.parse(winner).socketId == socket.id)
+                    self.CurrentPlayerWinCount(self.CurrentPlayerWinCount() + 1);
+                self.Winner(JSON.parse(winner).name);
             }, 500);
         });
     }
-}
+}
+
+ko.components.register('player-list', {
+    viewModel: function (params) {
+        this.Players = params.Players;
+    },
+    template: `
+        <div data-bind="foreach: Players().sort((a,b) => { return a.winCount > b.winCount ? -1 : 1 })">
+            <div class="player">
+                <i class="player-win-count">
+                    <span>wins: </span>
+                    <b data-bind="text: winCount"></b>
+                </i>
+                <span data-bind="text: name" class="player-name"></span>
+            </div>
+        </div>
+        <i style="font-size: 12px" data-bind="visible: !Players().length">Looks like nobody's here..</i>`
+});
diff --git a/rawwords.txt b/rawwords.txt
@@ -123,7 +123,7 @@ Rushmore
 The grand canyon
 The pope
 Sydney opera
-iasi
+iași
 eiffel tower
 world trade center
 ninja
@@ -161,7 +161,6 @@ skirt
 passport
 hippo
 salami
-lizard
 wizard
 sweater
 anne frank
@@ -200,15 +199,13 @@ starfish
 ash
 wires
 valley
-plastic bag
 whiskey
 yellow
 orange juice
 tukan
 lion
 savanna
 cinderella
-dust
 ring
 airplane
 mane
@@ -473,7 +470,6 @@ ball
 gift
 machine
 shape
-tool
 wind
 pot
 sign
@@ -526,7 +522,6 @@ joint
 muscle
 red
 trip
-vegetable
 chart
 gear
 kitchen
@@ -540,7 +535,6 @@ street
 tree
 wave
 path
-ticket
 angle
 blue
 breakfast
@@ -685,7 +679,6 @@ F
 G
 I
 J
-K
 L
 M
 N
@@ -810,7 +803,6 @@ Hitler
 Vlad Tepes
 Dracula
 George Bush
-Super Mario
 Pokemon
 Minecraft
 Word of warcraft
@@ -822,7 +814,6 @@ Dota 2
 Ping pong
 Cricket
 Voleyball
-Football
 Sims
 Shrek
 Donkey
diff --git a/whatisthis-server.js b/whatisthis-server.js
@@ -24,24 +24,26 @@ module.exports = {
         io.on('connection', socket => {
             players.push({
                 id: socket.id,
-                name: '<some unknown guy>',
+                name: '<no name>',
                 score: 0,
-                questionIndex: 0
+                questionIndex: 0,
+                winCount: 0
             });
             io.emit('playerlistupdate', J(players));
             if (isGameStarted) {
                 socket.emit('go');
                 socket.emit('questionArrived', JSON.stringify({
                     question: questions[questions.length - 1].imageUrl,
                     answer: questions[questions.length - 1].word,
-                    currentPlayerScore: 0
+                    currentPlayerScore: 0,
                 }));
             }
             socket.on('playerUpdated', playerJson => {
                 var player = JSON.parse(playerJson);
                 var localPlayer = findPlayer(socket.id);
-                localPlayer.name = player.name || '<some unknown guy>';
+                localPlayer.name = player.name || '<no name>';
                 localPlayer.score = player.score;
+                localPlayer.winCount = player.winCount;
                 socket.broadcast.emit('playerlistupdate', J(players));
             });
             socket.on('disconnect', playerJson => {
@@ -82,21 +84,31 @@ module.exports = {
                 if (isRightAnswer)
                     currentPlayer.score = currentPlayer.score + 1;
                 else {
-                    io.emit('playermissed', JSON.stringify({ playerId: socket.id, playerMissedWord: response}));
+                    io.emit('playermissed', JSON.stringify({
+                        playerId: socket.id,
+                        playerMissedWord: response
+                    }));
                 }
 
                 io.emit('playerlistupdate', J(players));
                 if (currentPlayer.score > 8) {
                     isGameStarted = false;
-                    io.emit('end', currentPlayer.name);
+                    currentPlayer.winCount++;
+                    io.emit('end', JSON.stringify(currentPlayer));
+                    questions = [];
+                    populateQuestions();
                     players.forEach((player) => {
                         player.score = 0;
                         player.questionIndex = 0;
                     })
+                    io.emit('playerlistupdate', J(players));
                     return;
                 }
-                if (currentPlayer.questionIndex > questions.length - 1)
+                if (currentPlayer.questionIndex > questions.length - 5) //They ran out of questions
+                {
                     populateQuestions();
+                }
+
                 socket.emit('questionArrived', JSON.stringify({
                     question: questions[questions.length - 1 - currentPlayer.questionIndex].imageUrl,
                     answer: questions[questions.length - 1 - currentPlayer.questionIndex].word,