Stats report: add "tooltips" to show the played move.

Implementation heavily based on a proof of concept by Joan Montané.
This commit is contained in:
Olivier Teulière 2013-01-20 19:34:51 +01:00
parent 8ab4f88a59
commit 1dcf458695
2 changed files with 40 additions and 8 deletions

View file

@ -109,6 +109,23 @@ td {
} }
.legendText { .legendText {
} }
/* Tooltop handling */
.container {
position:relative
}
.infoBox {
display:none;
}
.top:hover .container .infoBox { display:block;position:absolute; top:40px;left:40px;z-index:100;left:4px;top:4px;width:auto;height:auto;padding:5px 5px 5px 83px;border:1px solid #900;background-color:#FFEFEF;box-shadow: 10px 10px 5px #888888; }
.subTop:hover .container .infoBox { display:block;position:absolute; top:40px;left:40px;z-index:100;left:4px;top:4px;width:auto;height:auto;padding:5px 5px 5px 83px;border:1px solid #900;background-color:#FFEFEF;box-shadow: 10px 10px 5px #888888; }
.topSolo:hover .container .infoBox { display:block;position:absolute; top:40px;left:40px;z-index:100;left:4px;top:4px;width:auto;height:auto;padding:5px 5px 5px 83px;border:1px solid #900;background-color:#FFEFEF;box-shadow: 10px 10px 5px #888888; }
.subSolo:hover .container .infoBox { display:block;position:absolute; top:40px;left:40px;z-index:100;left:4px;top:4px;width:auto;height:auto;padding:5px 5px 5px 83px;border:1px solid #900;background-color:#FFEFEF;box-shadow: 10px 10px 5px #888888; }
.normal1:hover .container .infoBox { display:block;position:absolute; top:40px;left:40px;z-index:100;left:4px;top:4px;width:auto;height:auto;padding:5px 5px 5px 83px;border:1px solid #900;background-color:#FFEFEF;box-shadow: 10px 10px 5px #888888; }
.normal2:hover .container .infoBox { display:block;position:absolute; top:40px;left:40px;z-index:100;left:4px;top:4px;width:auto;height:auto;padding:5px 5px 5px 83px;border:1px solid #900;background-color:#FFEFEF;box-shadow: 10px 10px 5px #888888; }
/* End of tooltip handling */

View file

@ -47,25 +47,40 @@
</tr> </tr>
#for $player in $gameData.players #for $player in $gameData.players
<tr class="statsTable"> <tr class="statsTable">
<td class="playerName">$player.name</td> <td class="playerName">$player.name
#for $turn in $player.turns.values #for $turn in $player.turns.values
#if $gameData.isSolo($turn.num, $turn.move) #if $gameData.isSolo($turn.num, $turn.move)
#if $gameData.isTop($turn.num, $turn.move) #if $gameData.isTop($turn.num, $turn.move)
<td class="topSolo">$turn.move.points</td> <td class="topSolo">$turn.move.points
#else #else
<td class="subTopSolo">$turn.move.points</td> <td class="subTopSolo">$turn.move.points
#end if #end if
#else #else
#if $gameData.isTop($turn.num, $turn.move) #if $gameData.isTop($turn.num, $turn.move)
<td class="top">$turn.move.points</td> <td class="top">$turn.move.points
#elif $gameData.isSubTop($turn.num, $turn.move) #elif $gameData.isSubTop($turn.num, $turn.move)
<td class="subTop">$turn.move.points</td> <td class="subTop">$turn.move.points
#elif $player.id % 2 == 1 #elif $player.id % 2 == 1
<td class="normal1">$turn.move.points</td> <td class="normal1">$turn.move.points
#else #else
<td class="normal2">$turn.move.points</td> <td class="normal2">$turn.move.points
#end if #end if
#end if #end if
<!-- Tooltip -->
<div class="container">
<div class="infoBox">
<table class="infoTable"><tr>
<td>Rack</td><td>$turn.rack</td>
</tr><tr>
<td>Word</td><td>$turn.move.word</td>
</tr><tr>
<td>Coords</td><td>$turn.move.coords</td>
</tr><tr>
<td>Score</td><td>$turn.move.points</td>
</tr></table>
</div>
</div>
</td>
#end for #end for
#if $player.id % 2 == 1 #if $player.id % 2 == 1
<td class="normal1">$player.rawScore</td> <td class="normal1">$player.rawScore</td>