Finally, it works.

nko · Aug 30, 2010 · 5d2d5c5 · 5d2d5c5
1 parent 0d0a39f
commit 5d2d5c5
Show file tree

Hide file tree

Showing 8 changed files with 252 additions and 26 deletions.
diff --git a/client/index.html b/client/index.html
@@ -11,6 +11,14 @@
     <form id="voting-room-form" style="display: none;" action="/voting-room" method="post">
     </form>
     <div id="column-b">
+      <div id="message">
+        <p style="margin-bottom: 5px">So we couldn't get our app done in time and <a href="http://nodeknockout.com/">missed the deadline</a>. Too bad.
+        It was buckets of fun tho, and we do hope somebody out there will find our
+        app useful.</p>
+        <p>Watch the <a href="">screencast</a> and give it a try. Also, the source code
+        for this app is <a href="http://github.com/njo/the-node-kushes">freely available</a> under the BSD license. Make sure you also
+        check out our other <a href="http://github.com/claus/">open</a> <a href="http://github.com/rafaelcv/">source</a> <a href="http://github.com/galvez">efforts</a>.</p>
+      </div>
       <div id="add-bar" class="bar" style="background-color: #ccc;">click here to add a voting option</div>
     </div>
     <div id="column-a">

diff --git a/client/voting-room.html b/client/voting-room.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <link type="text/css" href="/css/smoothness/jquery-ui-1.8.custom.css" rel="stylesheet" />
-<link type="text/css" href="/css/index.css" rel="stylesheet" />
+<link type="text/css" href="/css/voting-room.css" rel="stylesheet" />
 <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="/js/jquery-ui-1.8.custom.min.js"></script>
 <script type="text/javascript" src="/js/socket.io.js"></script>
@@ -18,9 +18,11 @@
 <div id="logo-box" class="">no•de•vote</div>
 <div class="info-box" style="margin-top: 30px;">
   <p>lets you capture an anonymous "show of hands" during a presentation.</p>
-  <p style="margin-top: 25px;">you are currently in a voting room, vote by clicking on any of the bars, which will flash quickly to let you know your vote has been cast.</p>
+  <p style="margin-top: 25px;">
+    you are currently<br>in avoting room.<br><br>vote by clicking<br>on any of the bars.
+  </p>
 </div>
-<div class="side-button" style="margin-top: 25px;">freeze</div>
+<div id="freeze" class="side-button" style="margin-top: 25px;">freeze</div>
 </div>
 </div>
 </body>

diff --git a/pagetalk.js → nodevote.js b/pagetalk.js → nodevote.js
@@ -71,19 +71,23 @@ socket_server.on('connection', function(client) {
   poorsman_mongodb.connected_clients[client.sessionId] = {};
   client.on('message', function(message) {
     var voting_room_id = message.voting_room_id;
+    var old_message = poorsman_mongodb.connected_clients[client.sessionId];
     poorsman_mongodb.connected_clients[client.sessionId] = message;
     if(message.pick) {
-      poorsman_mongodb.voting_rooms[voting_room_id].options[message.pick].votes++; 
+      if(old_message.pick) {
+        poorsman_mongodb.voting_rooms[voting_room_id].options[old_message.pick].votes--;
+      }
+      poorsman_mongodb.voting_rooms[voting_room_id].options[message.pick].votes++;
     }
-    client.broadcast(poorsman_mongodb.voting_rooms[voting_room_id]);  
+    socket_server.broadcast(poorsman_mongodb.voting_rooms[voting_room_id]);  
   });
   client.on('disconnect', function() {
     var message = poorsman_mongodb.connected_clients[client.sessionId];
     var voting_room_id = message.voting_room_id;
     if(message.pick) {
       poorsman_mongodb.voting_rooms[voting_room_id].options[message.pick].votes--;
     }
-    client.broadcast(poorsman_mongodb.voting_rooms[voting_room_id]);
+    socket_server.broadcast(poorsman_mongodb.voting_rooms[voting_room_id]);
   });
   for(var voting_room_id in poorsman_mongodb.voting_rooms) {
     socket_server.broadcast(poorsman_mongodb.voting_rooms[voting_room_id]);

diff --git a/server.js b/server.js
@@ -1,2 +1,2 @@
 require('./support');
-require('./pagetalk');
+require('./nodevote');
diff --git a/static/css/index.css b/static/css/index.css
@@ -10,8 +10,8 @@ html {
   font-family: 'Lobster';
   font-style: normal;
   font-weight: normal;
-/*  src: local('Lobster'), url('/fonts/lobster-regular.ttf') format('truetype');*/
-  src: local('Lobster'), url('http://themes.googleusercontent.com/font?kit=X-CahsKZZcJfSyZ_tX4ptg') format('truetype');
+  src: local('Lobster'), url('/fonts/lobster-regular.ttf') format('truetype');
+/*  src: local('Lobster'), url('http://themes.googleusercontent.com/font?kit=X-CahsKZZcJfSyZ_tX4ptg') format('truetype');*/
 }
 @font-face {
   font-family: 'Old Standard TT';
@@ -117,14 +117,18 @@ body:after {
 }
 
 .bar {
+  padding: 5px 5px 5px 5px !important;
+  font-family: 'Lobster', sans-serif;
+  font-size: 35px;
+  cursor: pointer;
   width: 100%;
 }
 .bar input {
-  margin-top: 10px;
-  margin-left: 10px;
+  margin-top: 5px;
+  margin-left: 5px;
   font-family: 'Lobster', sans-serif;
   font-size: 30px;
-  width: 80%;
+  width: 90%;
   border: none;
   background: none;
 }
@@ -143,4 +147,27 @@ body:after {
 }
 #add-bar:active {
   background-color: #808080 !important;
+}
+#message {
+  color: #555;
+  font-style: italic;
+  font-size: 18px;
+  padding: 10px;
+  width: 500px;
+}
+#message a {
+  text-decoration: none;
+  font-weight: bold;
+}
+#message a:hover {
+  font-weight: bold;
+  color: #000;
+}
+#message a:active {
+  text-decoration: none;
+  font-weight: bold;
+  color: #000;
+}
+#message a:visited {
+  font-weight: bold;
 }
diff --git a/static/css/voting-room.css b/static/css/voting-room.css
@@ -0,0 +1,150 @@
+* {
+  margin: 0px;
+  padding: 0px;
+}
+html {
+  overflow-y: scroll;
+  /* Always show a vertical scrollbar in Firefox, Chrome, Safari and Opera */
+}
+@font-face {
+  font-family: 'Lobster';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Lobster'), url('/fonts/lobster-regular.ttf') format('truetype');
+/*  src: local('Lobster'), url('http://themes.googleusercontent.com/font?kit=X-CahsKZZcJfSyZ_tX4ptg') format('truetype');*/
+}
+@font-face {
+  font-family: 'Old Standard TT';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Old Standard TT'), url('http://themes.googleusercontent.com/font?kit=n6RTCDcIPWSE8UNBa4k-DFFvkgauTbNF96NzJdlwv7E') format('truetype');
+}
+body {
+	font: normal 95% helvetica, sans-serif;
+	color: #000;
+  background-color: #ececec;
+}
+
+body:after { 
+  content: "."; 
+  visibility: hidden; 
+  display: block; 
+  clear: both; 
+  height: 0px; 
+  font-size: 0px;
+}
+
+#column-a {
+  padding-top: 40px;
+  float: right;
+  z-index: -1;
+}
+
+#column-a-container {
+  position: fixed;
+  width: 0px;
+}
+
+#logo-box {
+  float: right;
+  background-color: #fc781a;
+  color: #5a2601;
+  font-family: 'Lobster', sans-serif;
+  font-size: 70px;
+  font-style: normal;
+  font-weight: 400;
+  text-shadow: none;
+  letter-spacing: -0.05em;
+  padding: 10px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  height: 90px;
+}
+
+.side-button {
+/*  -webkit-user-select: none;
+  -moz-user-select: none;
+*/  float: right;
+  text-align: right;
+  font-family: 'Lobster', sans-serif;
+  color: #8c3b02;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 400;
+  text-shadow: none;
+  letter-spacing: -0.05em;
+  padding: 10px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  width: 230px;
+  color: #8c3b02;
+  cursor: pointer;
+}
+.side-button:hover {
+  color: #5a2601;
+}
+.side-button:active {
+  color: #5a2601;
+}
+
+.info-box {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  float: right;
+  text-align: right;
+  color: #5a2601;
+  font-family: 'Lobster', sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  text-shadow: none;
+  letter-spacing: 0.00em;
+  padding: 10px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  width: 250px;
+}
+
+#column-b {
+  position: relative;
+  padding-top: 30px;
+  border-left: 2px solid #fc781a;
+  width: 60%;
+  min-height: 420px;
+  float: right;
+  overflow-x: hidden;
+  z-index: 1;
+}
+
+.bar {
+  padding: 5px 5px 5px 15px !important;
+  font-family: 'Lobster', sans-serif;
+  font-size: 35px;
+  cursor: pointer;
+  width: 100%;
+}
+.bar input {
+  margin-top: 5px;
+  margin-left: 5px;
+  font-family: 'Lobster', sans-serif;
+  font-size: 30px;
+  width: 90%;
+  border: none;
+  background: none;
+}
+.bar input:focus {
+  border: none;
+  background-color: none;
+}
+#add-bar {
+  padding: 5px;
+  font-family: 'Lobster', sans-serif;
+  font-size: 20px;
+  cursor: pointer;
+}
+#add-bar:hover {
+  background-color: #808080 !important;
+}
+#add-bar:active {
+  background-color: #808080 !important;
+}
diff --git a/static/js/index.js b/static/js/index.js
@@ -24,7 +24,7 @@ nodevote.ui.handlers['add-bar'] = {
   'click': function() {
     var color = nodevote.ui.next_random_color();
     if(color) {
-      var bar = nodevote.ui.create_bar(60, color.back);
+      var bar = nodevote.ui.create_bar(50, color.back);
       $('#add-bar').before(bar);
       bar.find('input').css('color', '#' + color.fore);
       bar.find('input').focus();

diff --git a/static/js/voting-room.js b/static/js/voting-room.js
@@ -4,45 +4,80 @@ nodevote.ui.handlers = {};
 
 nodevote.ui.create_bar = function(height, color) {
   return $(
-    '<div class="bar" style="height: ' + height + 'px; background-color: ' + color + ';">' +
+    '<div class="bar votion-option" style="height: ' + height + 'px; background-color: ' + color + ';">' +
     '</div>'
   );
 }
 
 $(document).ready(function() {
   socket_client = new io.Socket(null, {port: 80});
   socket_client.connect();
-  var on_message = function(voting_room) {
+  socket_client.on('message', function(voting_room) {
+    if(nodevote.ui.frozen) return;
+    if(voting_room.voting_room_id != nodevote.voting_room_id) return;
     console.log(voting_room.options);
-    var total_height = $(window).height()-60;
+    var total_height = $(window).height()-120;
     var total_votes = 0;
     for(var option in voting_room.options) {
       total_votes += voting_room.options[option].votes;
     }
     for(var option in voting_room.options) {
-      voting_room.options[option].votePercentage = voting_room.options[option].votes*100/total_votes;
+      if(total_votes) {
+        voting_room.options[option].votePercentage = voting_room.options[option].votes*100/total_votes;
+      }
     }
     var votePercentage;
     $('#column-b > div').remove();
     for(var option in voting_room.options) {
-      console.log('option: ' + option);
+      var height;
       votePercentage = voting_room.options[option].votePercentage;
-      if(votePercentage == 0) {
-        bar = nodevote.ui.create_bar(30, voting_room.options[option].colors.back);
-        bar.text(voting_room.options[option].title + ": 0 votes")
+      if(!votePercentage) {
+        bar = nodevote.ui.create_bar(50, voting_room.options[option].colors.back);
+        bar.attr('data-option', voting_room.options[option].title);
+        bar.text(voting_room.options[option].title + " (0 votes)")
+        bar.click(nodevote.ui.handlers['voting-option'].click);
       } else {
-        console.log('total_height*100/votePercentage: ' + total_height*100/votePercentage);
-        bar = nodevote.ui.create_bar(votePercentage*100/total_height, voting_room.options[option].colors.back);
-        bar.text(voting_room.options[option].title + ": " + voting_room.options[option].votes + " votes")
+        height = votePercentage*total_height/100;
+        if(height < 70) {
+          height = 70;
+        }
+        bar = nodevote.ui.create_bar(height, voting_room.options[option].colors.back);
+        bar.attr('data-option', voting_room.options[option].title);
+        bar.text(voting_room.options[option].title + " (" + voting_room.options[option].votes + " votes)")
+        bar.click(nodevote.ui.handlers['voting-option'].click);
       }
-      bar.css('color', '' + voting_room.options[option].colors.fore);
+      bar.css('color', voting_room.options[option].colors.fore);
       $('#column-b').append(bar);
     }
+  });
+  nodevote.ui.handlers['voting-option'] = {
+    'click': function() {
+      if(nodevote.ui.frozen) return;
+      var option = $(this).attr('data-option');
+      socket_client.send({
+        'voting_room_id': nodevote.voting_room_id,
+        'pick': option
+      });
+      console.log('sending: ' + option);
+    }
   }
-  socket_client.on('message', on_message);
   nodevote.ui.handlers['freeze'] = {
     'click': function() {
+      console.log('nodevote.ui.frozen: ' + nodevote.ui.frozen);
+      nodevote.ui.frozen = !nodevote.ui.frozen;
+      $(this).text(nodevote.ui.frozen ? "unfreeze" : "freeze");
+      if(!nodevote.ui.frozen) {
+        socket_client.send({'voting_room_id': nodevote.voting_room_id});
+      }
     }
   }
   $('#freeze').click(nodevote.ui.handlers['freeze'].click);
+  $(window).resize(function() {
+    if(nodevote.ui.resize_lock) {
+      clearTimeout(nodevote.ui.resize_lock);
+    }
+    nodevote.ui.resize_lock = setTimeout(function() {
+      socket_client.send({'voting_room_id': nodevote.voting_room_id});
+    }, 300);
+  });
 });