Beta version of explain page
This commit is contained in:
Claude Brisson
141
view-webapp/src/main/sass/explain.scss
Normal file
141
view-webapp/src/main/sass/explain.scss
Normal file
@@ -0,0 +1,141 @@
|
||||
@layer pairgoth {
|
||||
/* explain section */
|
||||
|
||||
#pairing-table-wrapper {
|
||||
padding: 8em 2em 1em 2em;
|
||||
}
|
||||
#pairing-table {
|
||||
border-collapse: collapse;
|
||||
thead {
|
||||
//border-collapse: collapse;
|
||||
tr {
|
||||
&:first-child {
|
||||
min-height: 8rem;
|
||||
th:first-child {
|
||||
background: linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
|
||||
position: relative;
|
||||
min-width: 8rem;
|
||||
label.top-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
label.bottom-left {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
th:not(:first-child) {
|
||||
z-index: 5;
|
||||
width: 55px;
|
||||
height: 140px;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
> div {
|
||||
transform: translate(35px, 51px) rotate(315deg);
|
||||
width: 30px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
> span {
|
||||
background-color: rgba(0, 0, 255, 0.2) !important;
|
||||
}
|
||||
}
|
||||
> span {
|
||||
border-bottom: 1px solid gray;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
> pre {
|
||||
display: none;
|
||||
font-size: smaller;
|
||||
line-height: 1em;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 100%;
|
||||
left: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
> pre {
|
||||
display: block;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
th {
|
||||
text-align: left;
|
||||
padding-right: 1em;
|
||||
position: relative;
|
||||
> pre {
|
||||
display: none;
|
||||
font-size: smaller;
|
||||
line-height: 1em;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 100%;
|
||||
left: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 255, 0.2) !important;
|
||||
pre {
|
||||
display: block;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
td {
|
||||
height: 55px;
|
||||
border: solid 1px gray;
|
||||
position: relative;
|
||||
&.game::after {
|
||||
position: absolute;
|
||||
content: "X";
|
||||
color: blue;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.weights {
|
||||
display: none;
|
||||
font-size: smaller;
|
||||
line-height: 1em;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 100%;
|
||||
left: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 255, 0.7) !important;
|
||||
cursor: pointer;
|
||||
.weights {
|
||||
display: block;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#captures {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -570,7 +570,7 @@
|
||||
}
|
||||
|
||||
/* TODO - plenty of those elements could just use the .noprint class */
|
||||
#header, #logo, #lang, .steps, #filter-box, #reglist-mode, #footer, #unpairables, #pairing-buttons, button, #standings-params, #logout, .pairing-stats, .result-sheets, .toggle, #overview, .tables-exclusion, .button, .noprint {
|
||||
#header, #logo, #lang, .steps, #filter-box, #reglist-mode, #footer, #unpairables, #pairing-buttons, button, #standings-params, #logout, .pairing-stats, .pairing-post-actions, .toggle, #overview, .tables-exclusion, .button, .noprint {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -418,8 +418,10 @@
|
||||
padding: 0.2em 0.8em;
|
||||
}
|
||||
|
||||
.result-sheets {
|
||||
.pairing-post-actions {
|
||||
margin-top: 0.2em;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.bottom-pairing-actions {
|
||||
|
||||
114
view-webapp/src/main/webapp/explain.html
Normal file
114
view-webapp/src/main/webapp/explain.html
Normal file
@@ -0,0 +1,114 @@
|
||||
#macro(rank $rank)#if( $rank<0 )#set( $k = -$rank )${k}k#else#set( $d=$rank+1 )${d}d#end#end
|
||||
#if (!$tour)
|
||||
<div class="section">
|
||||
<h2 class="error">Invalid tournament id</h2>
|
||||
</div>
|
||||
#stop
|
||||
#end
|
||||
#set($round = $math.toInteger($!params.round))
|
||||
#if(!$round)
|
||||
#set($round = 1)
|
||||
#else
|
||||
#set($round = $math.min($math.max($round, 1), $tour.rounds))
|
||||
#end
|
||||
#if($tour.type == 'INDIVIDUAL' || $tour.type.startsWith('TEAM'))
|
||||
#set($parts = $api.get("tour/${params.id}/part"))
|
||||
#else
|
||||
#set($parts = $api.get("tour/${params.id}/team"))
|
||||
#end
|
||||
#set($pmap = $utils.toMap($parts))
|
||||
#set($roundPairing = $api.get("tour/${params.id}/pair/$round"))
|
||||
#if($roundPairing.error)
|
||||
<script type="text/javascript">
|
||||
onLoad(() => {
|
||||
showError("$roundPairing.error")
|
||||
});
|
||||
</script>
|
||||
#stop
|
||||
#end
|
||||
#set($explain = $api.get("tour/${params.id}/explain/$round"))
|
||||
<div id="pairing-table-wrapper">
|
||||
<table id="pairing-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<label class="top-right">white</label>
|
||||
<label class="bottom-left">black</label>
|
||||
</th>
|
||||
#foreach($white in $explain.paired)
|
||||
<th data-white="$white.id">
|
||||
<div>
|
||||
<span>
|
||||
$white.name $white.firstname
|
||||
</span>
|
||||
</div>
|
||||
<pre>$white.toPrettyString()</pre>
|
||||
</th>
|
||||
#end
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
#foreach($black in $explain.paired)
|
||||
<tr>
|
||||
<th data-black="$black.id">
|
||||
<div>
|
||||
<span>
|
||||
$black.name $black.firstname
|
||||
</span>
|
||||
</div>
|
||||
<pre>$black.toPrettyString()</pre>
|
||||
</th>
|
||||
#foreach($white in $explain.paired)
|
||||
#if($white.id != $black.id)
|
||||
#set($key = "$white.id-$black.id")
|
||||
#set($weights = $explain.weights[$key])
|
||||
#set($toMax = $explain.max - $weights.total)
|
||||
#set($toMin = $weights.total - $explain.min)
|
||||
#if ($toMax > $toMin)
|
||||
## total is close to min
|
||||
#set($percent = ($weights.total - $explain.min) / ($explain.low - $explain.min) * 40)
|
||||
#else
|
||||
## total is close to max
|
||||
#set($percent = 60 + ($explain.max - $weights.total) / ($explain.max - $explain.high) * 40)
|
||||
#end
|
||||
<!-- $!percent -->
|
||||
#set($game = $explain.games[$key])
|
||||
<td data-wb="$white.id-$black.id" #if($game)class="game"#end style="background-color: color-mix(in srgb, rgb(0 255 0) ${percent}%, rgb(255 0 0));">
|
||||
<div class="weights">
|
||||
<pre>$weights.toPrettyString()</pre>
|
||||
</div>
|
||||
</td>
|
||||
#else
|
||||
<td></td>
|
||||
#end
|
||||
#end
|
||||
</tr>
|
||||
#end
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="captures"></div>
|
||||
<script type="text/javascript">
|
||||
// #[[
|
||||
onLoad(() => {
|
||||
$('#header').hide();
|
||||
$('td').on('click', e => {
|
||||
const td = e.target.closest('td');
|
||||
const ids = td.data('wb')?.split(/-/);
|
||||
if (ids) {
|
||||
const white = $(`th[data-white="${ids[0]}"] div span`)?.text();
|
||||
const black = $(`th[data-white="${ids[1]}"] div span`)?.text();
|
||||
const weights = td.find('.weights pre').text();
|
||||
const captures = $('#captures')[0];
|
||||
captures.insertAdjacentHTML('beforeend', `<div>${white} vs ${black}<pre>${weights}</pre></div>`);
|
||||
}
|
||||
})
|
||||
$('th[data-white], th[data-black]').on('click', e => {
|
||||
const th = e.target.closest('th');
|
||||
const name = th.find('span').text();
|
||||
const info = th.find('pre').text();
|
||||
captures.insertAdjacentHTML('beforeend', `<div>${name}<pre>${info}</pre></div>`);
|
||||
});
|
||||
});
|
||||
// ]]#
|
||||
</script>
|
||||
@@ -3,6 +3,7 @@
|
||||
<div class="section">
|
||||
<h2 class="error">Invalid tournament id</h2>
|
||||
</div>
|
||||
#stop
|
||||
#end
|
||||
#set($round = $math.toInteger($!params.round))
|
||||
#if(!$round)
|
||||
|
||||
@@ -83,7 +83,10 @@
|
||||
#end
|
||||
</div>
|
||||
#if(!$tour.type.startsWith('TEAM'))
|
||||
<div class="result-sheets"><a href="result-sheets?id=${tour.id}&round=${round}" target="_blank" class="ui mini floating icon button">result sheets <i class="fa fa-external-link"></i></a></div>
|
||||
<div class="pairing-post-actions">
|
||||
<a href="result-sheets?id=${tour.id}&round=${round}" target="_blank" class="ui mini floating icon button">result sheets <i class="fa fa-external-link"></i></a>
|
||||
<a href="explain?id=${tour.id}&round=${round}" target="_blank" class="ui mini floating icon button">explain pairing <i class="fa fa-external-link"></i></a>
|
||||
</div>
|
||||
#end
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user