From 1dcf45869554cc351ad847a04ea23ede9e554b81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Olivier=20Teuli=C3=A8re?= <ipkiss@gmail.com>
Date: Sun, 20 Jan 2013 19:34:51 +0100
Subject: [PATCH] Stats report: add "tooltips" to show the played move.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implementation heavily based on a proof of concept by Joan Montané.
---
 extras/reports/stats.css  | 19 ++++++++++++++++++-
 extras/reports/stats.tmpl | 29 ++++++++++++++++++++++-------
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/extras/reports/stats.css b/extras/reports/stats.css
index f87929e..1c5a716 100644
--- a/extras/reports/stats.css
+++ b/extras/reports/stats.css
@@ -109,6 +109,23 @@ td {
 }
 
 .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 */
diff --git a/extras/reports/stats.tmpl b/extras/reports/stats.tmpl
index 39f914f..8b8715a 100644
--- a/extras/reports/stats.tmpl
+++ b/extras/reports/stats.tmpl
@@ -47,25 +47,40 @@
             </tr>
             #for $player in $gameData.players
             <tr class="statsTable">
-                <td class="playerName">$player.name</td>
+                <td class="playerName">$player.name
                 #for $turn in $player.turns.values
                     #if $gameData.isSolo($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
-                <td class="subTopSolo">$turn.move.points</td>
+                <td class="subTopSolo">$turn.move.points
                         #end if
                     #else
                         #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)
-                <td class="subTop">$turn.move.points</td>
+                <td class="subTop">$turn.move.points
                         #elif $player.id % 2 == 1
-                <td class="normal1">$turn.move.points</td>
+                <td class="normal1">$turn.move.points
                         #else
-                <td class="normal2">$turn.move.points</td>
+                <td class="normal2">$turn.move.points
                         #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
                 #if $player.id % 2 == 1
                 <td class="normal1">$player.rawScore</td>