Colors are now also available on scores editing page

coffee/scores.coffee

@@ -43,6 +43,11 @@ $ ->
             match_total.text(sum)
             match_avg.text(Math.round(sum / count * 10) / 10)
 
+            cell = $(@).closest('td')
+            cls = cell.attr('class').replace(/\s*val-\d+\s*/, '')
+            console.log cell.attr('class'), cls
+            cell.attr('class', cls).addClass('val-' + $(@).val())
+
         inputs.filter('[value=""]:first').focus()
 
     $('textarea').on 'keyup', ->
@@ -53,3 +58,7 @@ $ ->
         if $(document).scrollTop() < desired_scroll
             $(window).scrollTop(desired_scroll)
     .keyup()
+
+    $('#toggle-colored').on 'click', ->
+        $(@).toggleClass('active')
+        $('#match').toggleClass('colored')

templates/match/scores.latte

@@ -18,7 +18,7 @@
 
 <form method="post" action="match/{$match->id}/scores">
 
-<table class="table table-bordered table-condensed match">
+<table id="match" class="table table-bordered table-condensed match {$match->discipline}">
     <thead>
         <tr>
             <th class="separator"></th>
@@ -30,7 +30,7 @@
         <tr n:foreach="$rows as $i => $row">
             <th class="separator">{$i + 1}</th>
             <td n:foreach="$row as $j => $arrow"
-                n:class="$j == $match->arrows - 1 ? separator">
+                class="val-{$arrow} {$j == $match->arrows - 1 ? separator}">
                 <input type="number" min="0" max="10" name="scores[]"
                     value="{$arrow ? $arrow}">
             </td>
@@ -64,10 +64,13 @@
     </div>
 </div>
 
-<div class="actions actions-responsive">
+<div class="btn-group actions">
+    <a href="javascript:void(0)" id="toggle-colored" class="btn btn-default"
+        title="{_'Show/hide colors'}">
+        <span class="glyphicon glyphicon-tint"></span>
+    </a>
     <button type="submit" class="btn btn-primary" title="{_'Save'}">
         <span class="glyphicon glyphicon-ok"></span>
-        <span class="text">{_'Save'}</span>
     </button>
 </div>