Calculate the average

package.json

@@ -1,7 +1,7 @@
 {
   "name": "scrummy",
   "description": "A Scrum planning and estimation game from Four Kitchens",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "scripts": {
     "start": "node scrum_cards_server.js"
   },

web/config.rb

@@ -1,5 +1,6 @@
 # Require any additional compass plugins here.
 require 'breakpoint'
+require 'singularitygs'
 
 # Set this to the root of your project when deployed:
 http_path = "/"

web/css/main.css

@@ -786,22 +786,60 @@ input[type="text"]:focus {
  * Login Form
  */
 #loginActions {
+  *zoom: 1;
   text-align: center;
 }
-#loginActions input {
-  width: 23.5%;
-  margin: 6px 0.5%;
+#loginActions:before, #loginActions:after {
+  content: " ";
+  display: table;
+}
+#loginActions:after {
+  clear: both;
+}
+@media (max-width: 679px) {
+  #loginActions input {
+    width: 48.93617%;
+    clear: right;
+    float: left;
+    margin-right: 2.12766%;
+  }
+  #loginActions input:nth-child(2n+0) {
+    margin-right: 0;
+  }
+}
+@media (min-width: 680px) {
+  #loginActions input {
+    width: 23.40426%;
+    clear: right;
+    float: left;
+    margin-right: 2.12766%;
+  }
+  #loginActions input:nth-child(4n+0) {
+    margin-right: 0;
+  }
 }
 
 /**
  * Voting Actions & Results Section
  */
+#votingActions {
+  *zoom: 1;
+}
+#votingActions:before, #votingActions:after {
+  content: " ";
+  display: table;
+}
+#votingActions:after {
+  clear: both;
+}
 #votingActions input {
-  width: 32%;
-  margin-left: 1%;
+  width: 31.42857%;
+  clear: right;
+  float: left;
+  margin-right: 2.85714%;
 }
-#votingActions input#btnReveal {
-  margin-left: 0;
+#votingActions input:nth-child(3n+0) {
+  margin-right: 0;
 }
 #votingResult.reveal #votingActions #btnReveal {
   text-shadow: #230800 1px 1px 0;
@@ -833,15 +871,22 @@ input[type="text"]:focus {
  * The shared game link box (inside the Voting actions box)
  */
 #gameLink {
+  *zoom: 1;
   display: none;
   width: 100%;
   margin-top: 3px;
   border-top: 1px solid #473c3a;
   padding-top: 3px;
 }
+#gameLink:before, #gameLink:after {
+  content: " ";
+  display: table;
+}
+#gameLink:after {
+  clear: both;
+}
 #gameLink input {
-  width: 99%;
-  margin-left: 0;
+  width: 100%;
 }
 
 #readme .text {

web/index.html

@@ -85,6 +85,10 @@ <h2>What's scrummy?</h2>
         <input type="button" id="btnReveal" value="Reveal" />
         <input type="button" id="btnReset" value="Reset" />
         <input type="button" id="btnLink" value="Game Link" />
+        <div id="average">
+          <span class="label">Average:</span>
+          <span class="result" id="averageResult">?</span>
+        </div>
         <div id="gameLink">
           <input type="text" id="txtUrl" readonly />
         </div>

web/js/scrum_cards_client.js

@@ -215,6 +215,7 @@ function clientReset(e){
   $('#votingResult .vote').text('');
   $('#votingResult .client').removeClass('voted');
   $('#votingResult').removeClass('reveal');
+  refreshAverage();
 }
 
 /**
@@ -224,20 +225,23 @@ function clientRevoke(e){
   $('#votingResult .card-text');
   $('#' + e.sid + ' .vote').text('');
   $('#' + e.sid ).removeClass('voted');
+  refreshAverage();
 }
 
 /**
  * The server has ordered clients to reveal all votes
  */
 function clientReveal(e){
   $('#votingResult').addClass('reveal');
+  refreshAverage();
 }
 
 /**
  * The server has indicated that a client has voted
  */
 function voteOccured(e){
   addVote(e.sid,e.number);
+  refreshAverage();
 }
 
 /**
@@ -266,6 +270,36 @@ function userSignedIn(e){
 
 function clientDisconnected(e){
   $('#'+e.sid).remove();
+  refreshAverage();
+}
+
+function refreshAverage() {
+  var $averageResult = $('#averageResult');
+  if (!($('#votingResult').hasClass('reveal'))) {
+    $averageResult.text('?');
+    return;
+  }
+
+  var sum = 0;
+  var count = 0;
+
+  $('#clients .vote').each(function() {
+    var value = $(this).text();
+    if ($.isNumeric(value)) {
+      var floatValue = parseFloat(value);
+      if (!isNaN(floatValue)) {
+        sum += floatValue;
+        count++;
+      }
+    }
+  });
+
+  if (count > 0) {
+    var average = sum / count;
+    $averageResult.text(average.toFixed(2));
+  } else {
+    $averageResult.text('?');
+  }
 }
 
 /*******************************************************************************

web/scss/main.scss

@@ -25,6 +25,7 @@ $red:    #D71414;
 // Include Compass Helpers
 @import "compass/css3";
 @import "breakpoint";
+@import "singularitygs";
 
 @-ms-viewport{
   width: device-width;
@@ -246,22 +247,30 @@ input {
  * Login Form
  */
 #loginActions {
+  @include clearfix();
   text-align: center;
 
-  input  {
-    width: 23.5%;
-    margin: 6px 0.5%;
+  input {
+    @include respond-to('handheld-only') {
+      @include grid-span(8,0,16, $gutter: 1/2, $output-style: 'float');
+      &:nth-child(2n+0) { margin-right: 0; }
+    }
+    @include respond-to('narrow') {
+      @include grid-span(4,0,16, $gutter: 1/2, $output-style: 'float');
+      &:nth-child(4n+0) { margin-right: 0; }
+    }
   }
 }
 
 /**
  * Voting Actions & Results Section
  */
 #votingActions {
+  @include clearfix();
+
   input {
-    width: 32%;
-    margin-left: 1%;
-    &#btnReveal { margin-left: 0; }
+    @include grid-span(4,0,12, $gutter: 1/2, $output-style: 'float');
+    &:nth-child(3n+0) { margin-right: 0; }
   }
 
   #votingResult.reveal & #btnReveal {
@@ -297,6 +306,8 @@ input {
  * The shared game link box (inside the Voting actions box)
  */
 #gameLink {
+  @include clearfix();
+
   display: none;
 
   width: 100%;
@@ -305,8 +316,7 @@ input {
   padding-top: 3px;
 
   input {
-    width: 99%;
-    margin-left: 0;
+    width: 100%;
   }
 }