nikola/pairgoth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Review paired list content layout ; ESC for unselection

Browse Source
This commit is contained in:
Claude Brisson
2024-01-18 06:57:34 +01:00
parent b261e56807
commit 897246c7a6
3 changed files with 61 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
view-webapp/src/main/sass/tour.scss
View File

@@ -202,6 +202,22 @@
} }
} }
} }
#paired {
.listitem {
position: relative;
gap: 0;
.table, .handicap {
width: 3em;
}
.black, .white {
width: 45%;
}
.levels {
width: 6em;
}
}
}
#pairing-buttons { #pairing-buttons {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;

56
view-webapp/src/main/webapp/js/main.js
View File

@@ -189,44 +189,56 @@ onLoad(() => {
// keyboard handling // keyboard handling
document.on('keyup', e => { document.on('keyup', e => {
let tab = document.location.hash;
switch (e.key) { switch (e.key) {
case 'Escape': { case 'Escape': {
if ($('#player').hasClass('shown') && $('#needle')[0].value) { if (tab === '#registration') {
if ($('#player').hasClass('shown') && $('#needle')[0].value) {
$('#needle')[0].value = ''; $('#needle')[0].value = '';
initSearch(); initSearch();
} else { } else {
close_modal(); close_modal();
}
} else if (tab === '#pairing') {
console.log('here')
$('#pairing-lists .selected.listitem').removeClass('selected');
} }
break; break;
} }
case 'ArrowDown': { case 'ArrowDown': {
if (typeof(searchResultShown) === 'function' && searchResultShown()) { if (tab === '#registration') {
let lines = $('.result-line'); if (typeof(searchResultShown) === 'function' && searchResultShown()) {
if (typeof (searchHighlight) === 'undefined') searchHighlight = 0; let lines = $('.result-line');
else ++searchHighlight; if (typeof (searchHighlight) === 'undefined') searchHighlight = 0;
searchHighlight = Math.min(searchHighlight, lines.length - 1); else ++searchHighlight;
lines.removeClass('highlighted'); searchHighlight = Math.min(searchHighlight, lines.length - 1);
lines[searchHighlight].addClass('highlighted'); lines.removeClass('highlighted');
lines[searchHighlight].addClass('highlighted');
}
} }
break; break;
} }
case 'ArrowUp': { case 'ArrowUp': {
if (typeof(searchResultShown) === 'function' && searchResultShown()) { if (tab === '#registration') {
let lines = $('.result-line'); if (typeof(searchResultShown) === 'function' && searchResultShown()) {
if (typeof (searchHighlight) === 'undefined') searchHighlight = 0; let lines = $('.result-line');
else --searchHighlight; if (typeof (searchHighlight) === 'undefined') searchHighlight = 0;
searchHighlight = Math.max(searchHighlight, 0); else --searchHighlight;
lines.removeClass('highlighted'); searchHighlight = Math.max(searchHighlight, 0);
lines[searchHighlight].addClass('highlighted'); lines.removeClass('highlighted');
lines[searchHighlight].addClass('highlighted');
}
} }
break; break;
} }
case 'Enter': { case 'Enter': {
if (typeof(searchResultShown) === 'function') { if (tab === '#registration') {
if (searchResultShown()) { if (typeof(searchResultShown) === 'function') {
fillPlayer(searchResult[searchHighlight]); if (searchResultShown()) {
} else { fillPlayer(searchResult[searchHighlight]);
$('#register')[0].click(); } else {
$('#register')[0].click();
}
} }
} }
break; break;

16
view-webapp/src/main/webapp/tour-pairing.inc.html
View File

@@ -48,11 +48,17 @@
</button> </button>
</div> </div>
<div id="paired" class="multi-select" title="white vs. black"> <div id="paired" class="multi-select" title="white vs. black">
#foreach($game in $games) #foreach($game in $games)
#set($white = $pmap[$game.w]) #set($white = $pmap[$game.w])
#set($black = $pmap[$game.b]) #set($black = $pmap[$game.b])
<div class="listitem game" data-id="$game.id"><span class="table">#$game.t</span><span class="white">#if($white)$white.name $white.firstname #rank($white.rank)#{else}BIP#end</span><span>&nbsp;</span><span class="black">#if($black)$black.name $black.firstname #rank($black.rank)#{else}BIP#end</span>#if($game.h)<span class="handicap">h$game.h</span>#end</div> <div class="listitem game" data-id="$game.id">
#end <div class="table">#$game.t</div>
<div class="white">#if($white)$white.name $white.firstname#{else}BIP#end</div>
<div class="levels">#if($white)#rank($white.rank)#end&nbsp;/&nbsp;#if($black)#rank($black.rank)#end</div>
<div class="black">#if($black)$black.name $black.firstname#{else}BIP#end</div>
<div class="handicap">#if($game.h)h$game.h#{else}&nbsp;#end</div>
</div>
#end
</div> </div>
</div> </div>
</div> </div>