Show previous games on focused pairable

view-webapp/src/main/sass/main.scss

@@ -308,7 +308,7 @@
   }
 
   .hidden {
-    display: none;
+    display: none !important;
   }
 
   .roundbox {

view-webapp/src/main/sass/tour.scss

@@ -91,6 +91,7 @@
 
   #players-list {
     max-width: 95vw;
+    font-size: smaller;
     #players {
       tr.filtered {
         display: none;
@@ -331,6 +332,7 @@
       gap: 1em;
       cursor: pointer;
       user-select: none;
+      font-size: smaller;
       &:hover {
         background-color: rgba(50, 50, 50, .2);
       }
@@ -377,7 +379,7 @@
     gap: 1em;
     max-width: max(10em, 20vw);
   }
-  #unpairables {
+  #unpairables, #previous_games {
     display: flex;
     flex-flow: column nowrap;
     min-height: 10vh;
@@ -424,6 +426,7 @@
   }
 
   #results-list {
+    font-size: smaller;
     text-align: center;
     .player, .result {
       background-color: unset;
@@ -481,6 +484,7 @@
     }
   }
   #standings-container {
+    font-size: smaller;
     max-width: 95vw;
   }
 

view-webapp/src/main/webapp/js/main.js

@@ -362,3 +362,14 @@ onLoad(() => {
     });
   }
 });
+
+// Element.clearChildren method
+if( typeof Element.prototype.clearChildren === 'undefined' ) {
+  Object.defineProperty(Element.prototype, 'clearChildren', {
+    configurable: true,
+    enumerable: false,
+    value: function() {
+      while(this.firstChild) this.removeChild(this.lastChild);
+    }
+  });
+}

view-webapp/src/main/webapp/js/tour-pairing.inc.js

@@ -108,12 +108,38 @@ function updatePairable() {
     });
 }
 
+function showOpponents(player) {
+  let id = player.data('id');
+  let games = $(`#standings-table tbody tr[data-id="${id}"] .game-result`)
+  if (games.length) {
+    let title = `${$('#previous_games_prefix').text()}${player.innerText.replace('\n', ' ')}${$('#previous_games_postfix').text()}`;
+    $('#unpairables').addClass('hidden');
+    $('#previous_games')[0].setAttribute('title', title);
+    $('#previous_games')[0].clearChildren();
+    $('#previous_games').removeClass('hidden');
+    for (let r = 0; r < activeRound; ++r) {
+      let game = games[r]
+      let opponent = game.getAttribute('title');
+      if (!opponent) opponent = '';
+      let result = game.text().replace(/^\d+/, '');
+      let listitem = `<div data-id="${id}" class="listitem"><span>R${r+1}</span><span>${opponent}</span><span>${result}</span></div>`
+      $('#previous_games')[0].insertAdjacentHTML('beforeend', listitem);
+    }
+  }
+}
+
+function hideOpponents() {
+  $('#unpairables').removeClass('hidden');
+  $('#previous_games').addClass('hidden');
+}
+
 onLoad(()=>{
   // note - this handler is also in use for lists on Mac Mahon super groups and teams pages
   $('.listitem').on('click', e => {
     let listitem = e.target.closest('.listitem');
     let box = e.target.closest('.multi-select');
-    if (e.shiftKey && typeof(focused) !== 'undefined') {
+    let focusedBox = focused ? focused.closest('.multi-select') : undefined;
+    if (e.shiftKey && typeof(focused) !== 'undefined' && box.getAttribute('id') === focusedBox.getAttribute('id')) {
       let from = focused.index('.listitem');
       let to = listitem.index('.listitem');
       if (from > to) {
@@ -130,10 +156,12 @@ onLoad(()=>{
       if (e.detail === 1) {
         // single click
         focused = listitem.toggleClass('selected').attr('draggable', listitem.hasClass('selected'));
+        if (box.getAttribute('id') === 'pairables') showOpponents(focused)
       } else if (listitem.closest('#pairing-lists')) {
         // on pairing page
         if (listitem.closest('#paired')) {
           // double click
+          hideOpponents()
           focused = listitem.attr('draggable', listitem.hasClass('selected'));
           editGame(focused);
         } else if (listitem.closest('#pairables')) {
@@ -203,10 +231,11 @@ onLoad(()=>{
         }
       });
   });
-  $('.multi-select').on('dblclick', e => {
+  document.on('dblclick', e => {
-    let box = e.target.closest('.multi-select');
     if (!e.target.closest('.listitem')) {
-      box.find('.listitem').removeClass('selected');
+      $('.listitem').removeClass('selected');
+      focused = undefined;
+      hideOpponents()
     }
   });
   $('#update-pairable').on('click', e => {

view-webapp/src/main/webapp/tour-pairing.inc.html

@@ -44,6 +44,9 @@
           <div data-id="$part.id" class="listitem unpairable"><span class="name">$part.name#if($part.firstname) $part.firstname#end</span><span>#rank($part.rank)#if($part.country) $part.country#end</span></div>
 #end
         </div>
+        <div id="previous_games" class="hidden multi-select">
+
+        </div>
       </div>
       <div id="pairing-right">
         <div class="pairing-buttons">
@@ -185,3 +188,8 @@
     </form>
   </div>
 </div>
+
+## For dynamic texts to be translated, they must be somewhere in the html source.
+## TODO - gather all "text only" nodes like this somewhere
+<div id="previous_games_prefix" class="hidden">Games of </div>
+<div id="previous_games_postfix" class="hidden"></div>

view-webapp/src/main/webapp/tour-standings.inc.html

@@ -73,7 +73,7 @@
       </thead>
       <tbody>
 #foreach($part in $standings)
-        <tr>
+        <tr data-id="$part.id">
           <td>$part.num</td>
           <td>$part.place</td>
           <td>$esc.html($part.name)#if($part.firstname) $esc.html($part.firstname)#end</td>
@@ -86,6 +86,8 @@
     #set($opp_num = $math.toLong($rst))
     #if($opp_num)
       #set($opponent = $!smap[$opp_num])
+    #else
+      #set($opponent = false)
     #end
     #if($rst.contains('+'))
       #set($rst = "<b>$rst</b>")