Use HTML data attribute to record scores, cleaner & probably faster code

coffee/scores.coffee

@@ -30,12 +30,16 @@ if table.classList.contains 'match-editable'
 
         subtotal = 0
         subtotal += scores[dirty_row * w + col] for col in [0...w]
-        sub(dirty_row).innerHTML = subtotal
+        rowsub = sub dirty_row
+        rowsub.innerHTML = subtotal
+        rowsub.dataset.score = Math.floor(subtotal / w)
 
         total = if dirty_row then num tot(dirty_row - 1).innerHTML else 0
         for row in [dirty_row...h]
             total += num sub(row).innerHTML
-            tot(row).innerHTML = total
+            rowtot = tot row
+            rowtot.innerHTML = total
+            rowtot.dataset.score = Math.floor(total / ((row + 1) * w))
 
         match_total.innerHTML = total
         match_avg.innerHTML = Math.round(total / inputs.length * 10) / 10
@@ -47,7 +51,7 @@ if table.classList.contains 'match-editable'
             cb = ->
                 value = num @.value
                 if set_score col, row, value
-                    cell.className = cell.className.replace /val-\d+/, 'val-' + value
+                    cell.dataset.score = value
                     if value != 10
                         @.nextElementSibling.value = 0
                         @.parentNode.querySelector('.cross-popup')
@@ -82,6 +86,7 @@ if table.classList.contains 'match-editable'
                 localStorage.setItem 'hide-total-scores', true
             else
                 localStorage.removeItem 'hide-total-scores'
+                render 0
 
 # notes area grows automatically with each added line
 if notes = document.getElementById('notes')

sass/main.sass

@@ -67,25 +67,26 @@ $lg-width: 1200px
   $white:  #F2F2F2
 
   &.colored
-    .val-10, .val-9
+    td[data-score="10"], td[data-score="9"]
       background-color: $yellow
 
-    .val-8, .val-7
+    td[data-score="8"], td[data-score="7"]
       background-color: $red
 
-    .val-6, .val-5
+    td[data-score="6"], td[data-score="5"]
       background-color: $blue
 
-    .val-4, .val-3
+    td[data-score="4"], td[data-score="3"]
       background-color: $black
       color: white
 
-    .val-2, .val-1
+    td[data-score="2"], td[data-score="1"]
       background-color: $white
 
   &.hide-total-scores
     .row-total, .total, .match-avg, .match-total
-      color: #fff
+      background-color: white !important
+      color: white
 
   .popup-container
     position: relative
@@ -109,7 +110,7 @@ $lg-width: 1200px
       border-left-color: rgb(51, 51, 51)
       display: block
 
-  .val-10:hover .cross-popup
+  td[data-score="10"]:hover .cross-popup
     display: block
 
   &.match-editable .cross-popup

templates/match/scores.latte

@@ -32,8 +32,8 @@
     <tbody>
         <tr n:foreach="$rows as $i => $row">
             <th class="separator">{$i + 1}</th>
-            <td n:foreach="$row as $j => $arrow"
-                class="val-{$arrow} {$j == $match->arrows - 1 ? separator}">
+            <td n:foreach="$row as $j => $arrow" data-score="{$arrow}"
+                class="{$j == $match->arrows - 1 ? separator}">
                 <input type="number" name="scores[]" min="0" max="10"
                     value="{$arrow ? $arrow}">
                 <input type="hidden" name="crosses[]"
@@ -43,8 +43,8 @@
                         title="{_'Inner 10?'}">&times;</div>
                 </div>
             </td>
-            <td class="row-total">{$sum = array_sum($row)}</td>
-            <td class="total">{$total = $total + $sum}</td>
+            <td class="row-total" data-score="{floor(($sum = array_sum($row)) / $match->arrows)}">{$sum}</td>
+            <td class="total" data-score="{floor(($total = $total + $sum) / ($match->arrows * ($i + 1)))}">{$total}</td>
         </tr>
     </tbody>
     <tbody>

templates/match/view.latte

@@ -43,15 +43,15 @@
     <tbody>
         <tr n:foreach="$rows as $i => $row">
             <th class="separator">{$i + 1}</th>
-            <td n:foreach="$row as $j => $arrow"
-                class="val-{$arrow} {$j == $match->arrows - 1 ? separator}">
+            <td n:foreach="$row as $j => $arrow" data-score="{$arrow}"
+                class="{$j == $match->arrows - 1 ? separator}">
                 <input type="text" disabled value="{$arrow}">
                 <div n:if="$crosses[$i][$j]" class="popup-container">
                     <div class="cross-popup enabled" title="{_'Inner 10?'}">&times;</div>
                 </div>
             </td>
-            <td class="val-{floor(($sum = array_sum($row)) / $match->arrows)}">{$sum}</td>
-            <td class="val-{floor(($total = $total + $sum) / ($match->arrows * ($i + 1)))}">{$total}</td>
+            <td class="row-total" data-score="{floor(($sum = array_sum($row)) / $match->arrows)}">{$sum}</td>
+            <td class="total" data-score="{floor(($total = $total + $sum) / ($match->arrows * ($i + 1)))}">{$total}</td>
         </tr>
     </tbody>
     <tbody>