Create interface to tag inner 10 scores

coffee/scores.coffee

@@ -43,6 +43,10 @@ if table = document.querySelector '.match-editable'
                 value = num @.value
                 if set_score col, row, value
                     cell.className = cell.className.replace /val-\d+/, 'val-' + value
+                    if value != 10
+                        @.nextElementSibling.value = 0
+                        @.parentNode.querySelector('.cross-popup')
+                            .classList.remove 'enabled'
             input.addEventListener 'change', cb
             input.addEventListener 'keyup', cb
         )(i % w, Math.floor i / w)
@@ -50,6 +54,12 @@ if table = document.querySelector '.match-editable'
     render 0
     table.querySelector('input[value=""]')?.focus()
 
+    table.addEventListener 'click', (e) ->
+        if e.target.classList.contains 'cross-popup'
+            v = if e.target.classList.toggle 'enabled' then 1 else 0
+            e.target.parentNode.previousElementSibling.value = v
+            e.target.parentNode.parentNode.children[0].focus()
+
 # notes area grows automatically with each added line
 if notes = document.getElementById('notes')
     cb = ->

locale/nl_NL/LC_MESSAGES/archery.po

@@ -237,3 +237,6 @@ msgstr "1 resultaat"
 
 msgid "%d results"
 msgstr "%d resultaten"
+
+msgid "Inner 10?"
+msgstr "Kruis?"

routes/match.php

@@ -186,9 +186,12 @@ $app->post('/match', function () use ($app, $db, $user) {
         $values = $form->getValues();
 
         $values->created_at = str_replace('T', ' ', $values->created_at) . ':00';
-        $values->scores = pack_scores(array_fill(0, $values->turns * $values->arrows, 0));
         $values->user_id = $user->getId();
 
+        $zeroes = array_fill(0, $values->turns * $values->arrows, 0);
+        $values->scores = pack_scores($zeroes);
+        $values->crosses = pack_crosses($zeroes);
+
         $match = $db->table('match')->insert($values);
 
         if (isset($_POST['tags'])) {
@@ -205,6 +208,7 @@ $app->post('/match', function () use ($app, $db, $user) {
 $app->post('/match/:id/scores', function ($id) use ($app, $db) {
     find_match($id)->update(array(
         'scores' => pack_scores(array_map('intval', $_POST['scores'])),
+        'crosses' => pack_crosses(array_map('intval', $_POST['crosses'])),
         'notes' => $_POST['notes']
     ));
     $app->redirect(ROOT_URL . '/match/' . $id);

sass/main.sass

@@ -83,6 +83,41 @@ $lg-width: 1200px
     .val-2, .val-1
       background-color: $white
 
+  .popup-container
+    position: relative
+    width: 100%
+
+  .cross-popup
+    position: absolute
+    height: 100%
+    padding: 0 5px
+    font: normal 38px/34px Courier New
+    color: rgb(210, 210, 210)
+    top: -28px
+    right: -6px
+    border: 1px solid rgb(197, 197, 197)
+    height: 34px
+    cursor: default
+    display: none
+
+    &.enabled
+      color: rgb(51, 51, 51)
+      border-left-color: rgb(51, 51, 51)
+      display: block
+
+  .val-10:hover .cross-popup
+    display: block
+
+  &.match-editable .cross-popup
+    cursor: pointer
+
+  input[type=number]::-webkit-inner-spin-button,
+  input[type=number]::-webkit-outer-spin-button
+    -webkit-appearance: none
+    -moz-appearance: none
+    appearance: none
+    margin: 0
+
 .panel textarea
   border: none
   outline: none

templates/match/scores.latte

 {extends '../layout.latte'}
 
+{var $narrows = $match->turns * $match->arrows}
 {var $rows = array_chunk(unpack_scores($match->scores), $match->arrows)}
+{var $crosses = array_chunk(unpack_crosses($match->crosses, $narrows), $match->arrows)}
 {var $total = 0}
 {var $arrow_cols = array(3 => 4, 4 => 5, 5 => 5, 6 => 6, 7 => 6)}
 {var $cols = isset($arrow_cols[$match->arrows]) ? $arrow_cols[$match->arrows] : 4}
@@ -32,8 +34,14 @@
             <th class="separator">{$i + 1}</th>
             <td n:foreach="$row as $j => $arrow"
                 class="val-{$arrow} {$j == $match->arrows - 1 ? separator}">
-                <input type="number" min="0" max="10" name="scores[]"
+                <input type="number" name="scores[]" min="0" max="10"
                     value="{$arrow ? $arrow}">
+                <input type="hidden" name="crosses[]"
+                    value="{$crosses[$i][$j]}">
+                <div class="popup-container">
+                    <div class="cross-popup {$crosses[$i][$j] ? enabled}"
+                        title="{_'Inner 10?'}">&times;</div>
+                </div>
             </td>
             <td class="row-total">{$sum = array_sum($row)}</td>
             <td class="total">{$total = $total + $sum}</td>
@@ -47,8 +55,8 @@
             </th>
             <td>
                 <span class="match-total">{$total}</span><br>
-                <span class="match-avg" title="{$total / ($match->turns * $match->arrows)|number:4}">
-                    {$total / ($match->turns * $match->arrows)|number:1}
+                <span class="match-avg" title="{$total / $narrows|number:4}">
+                    {$total / $narrows|number:1}
                 </span>
             </td>
         </tr>

templates/match/view.latte

 {extends '../layout.latte'}
 
+{var $narrows = $match->turns * $match->arrows}
 {var $rows = array_chunk(unpack_scores($match->scores), $match->arrows)}
+{var $crosses = array_chunk(unpack_crosses($match->crosses, $narrows), $match->arrows)}
 {var $total = 0}
 {var $arrow_cols = array(3 => 4, 4 => 5, 5 => 5, 6 => 6, 7 => 6)}
 {var $cols = isset($arrow_cols[$match->arrows]) ? $arrow_cols[$match->arrows] : 4}
@@ -44,6 +46,9 @@
             <td n:foreach="$row as $j => $arrow"
                 class="val-{$arrow} {$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>

util.php

@@ -113,8 +113,11 @@ function pack_crosses($crosses) {
 }
 
 function unpack_crosses($bitmap, $limit=0) {
+    if ($bitmap === null)
+        return array_fill(0, $limit, 0);
+
     $crosses = array();
-    foreach($bitmap as $c) {
+    foreach(str_split($bitmap) as $c) {
         for ($i = 7; $i >= 0; $i--) {
             $crosses[] = intval(!!(ord($c) & (1 << $i)));
             if (count($crosses) == $limit)
@@ -124,19 +127,16 @@ function unpack_crosses($bitmap, $limit=0) {
     return $crosses;
 }
 
-function show_crosses($bitmap) {
-    foreach($bitmap as $c) {
-        for ($i = 7; $i >= 0; $i--)
-            echo intval(!!(ord($c) & (1 << $i)));
-
-        echo ' ';
-    }
-    echo "\n";
-}
-
-//show_crosses("\x0b\xff\x00\x08");
-show_crosses(pack_crosses(array(1, 0, 1, 0, 0, 0, 0, 0)));
-exit;
+// TODO: remove
+//function show_crosses($bitmap) {
+//    foreach(str_split($bitmap) as $c) {
+//        for ($i = 7; $i >= 0; $i--)
+//            echo intval(!!(ord($c) & (1 << $i)));
+//
+//        echo ' ';
+//    }
+//    echo "\n<br>\n";
+//}
 
 function match_arrows($row) {
     return sprintf('%d &times; %d', $row->turns, $row->arrows);