Progress on the game info page.

diff --git a/xonstat/static/css/app.css b/xonstat/static/css/app.css
index 8202e04a1f8a402afd8f4ca22c1006b36ff5ad38..2b877340d2dabb88c4ae0cc356bf7e4d761889df 100644 (file)
--- a/xonstat/static/css/app.css
+++ b/xonstat/static/css/app.css
@@ -50,7 +50,7 @@ table tr td {
   font-size: 10px;
 }
 
-table thead {
+table thead, table th {
   background-color: #001021;
 }
 
@@ -216,6 +216,64 @@ table thead tr th, table thead tr td, table tr th, table tr td {
   color: gray;
 }
 
+.game {
+  margin-bottom: 1rem;
+}
+
+.game a {
+    color: #CCC;
+}
+
+.game a:hover {
+    color: #d95f00;
+    text-decoration: none;
+}
+
+.game tr {
+    background-color: #000;
+}
+
+.game tr.red {
+  background-color: #4d0000;
+}
+
+.game tr.blue {
+  background-color: #00004d;
+}
+
+.game tr.yellow {
+  background-color: #4d4d00;
+}
+
+.game tr.pink {
+  background-color: #4d004d;
+}
+
+.game tr:hover {
+    background-color: #222;
+}
+
+.teamscore {
+  text-shadow: -1px -1px 0 #222;
+  font-weight: bold;
+}
+
+.teamscore .red {
+  color: #ad0000;
+}
+
+.teamscore .blue {
+  color: #0000ad;
+}
+
+.teamscore .yellow {
+  color: #adad00;
+}
+
+.teamscore .pink {
+  color: #ad00ad;
+}
+
 .tabs-content {
   margin-bottom: 0;
 }

diff --git a/xonstat/templates/game_info.mako b/xonstat/templates/game_info.mako
index b9ab8765282b5385401386b7272deb5443e4a377..de2acf9c52c43c4a161f6d0906848e369671df8d 100644 (file)
--- a/xonstat/templates/game_info.mako
+++ b/xonstat/templates/game_info.mako
@@ -4,157 +4,159 @@
 <%namespace file="accuracy.mako" import="accuracy" />
 
 <%block name="navigation">
-${nav.nav('games')}
+  ${nav.nav('games')}
 </%block>
 
 <%block name="css">
-${parent.css()}
-<link href="/static/css/sprites.css" rel="stylesheet">
+  ${parent.css()}
+  <link href="/static/css/sprites.css" rel="stylesheet">
 </%block>
 
 <%block name="js">
-${parent.js()}
-<script>
-$(".collapse").collapse();
+  ${parent.js()}
+  <script>
+  $(".collapse").collapse();
 
-// show accordion only when loaded to prevent rollup from being seen
-$("#acc-accordion").css('display', '');
-</script>
+  // show accordion only when loaded to prevent rollup from being seen
+  $("#acc-accordion").css('display', '');
+  </script>
 </%block>
 
 <%block name="title">
-Game Information
+  Game Information
 </%block>
 
 
 % if game is None:
-<h2>Sorry, that game wasn't found!</h2>
+  <h2>Sorry, that game wasn't found!</h2>
 
 % else:
-<div class="row">
-  <h2>Game Detail</h2>
-  <div class="span8 game-detail">
-    <img width="64" height="64" src="/static/images/icons/48x48/${game.game_type_cd}.png" alt="${game.game_type_cd}"/>
-    <p>
-    Played: <span class="abstime" data-epoch="${game.epoch()}" title="${game.start_dt.strftime('%a, %d %b %Y %H:%M:%S UTC')}">${game.fuzzy_date()}</span><br />
-    Game Type: ${gametype.descr} (${game.game_type_cd})<br />
-    Server: <a href="${request.route_url("server_info", id=server.server_id)}" name="Server info page for ${server.name}">${server.name}</a><br />
-    Map: <a href="${request.route_url("map_info", id=map.map_id)}" name="Map info page for ${map.name}">${map.name}</a><br />
-    % if game.duration is not None:
-    Duration: ${"%s:%02d" % (game.duration.seconds/60, game.duration.seconds%60)}
+  <div class="row">
+
+    <div class="small-12 columns">
+      <h3>Game #${game.game_id}</h3>
+      <p>
+        <img src="/static/images/icons/24x24/${game.game_type_cd}.png" alt="${game.game_type_cd}"/> ${gametype.descr} (${game.game_type_cd})<br />
+        Played ${game.fuzzy_date()} <span class="abstime" data-epoch="${game.epoch()}" title="${game.start_dt.strftime('%a, %d %b %Y %H:%M:%S UTC')}"> <i class="fa fa-info-circle"></i></span><br />
+        Server: <a href="${request.route_url("server_info", id=server.server_id)}" name="Server info page for ${server.name}">${server.name}</a><br />
+        Map: <a href="${request.route_url("map_info", id=map.map_id)}" name="Map info page for ${map.name}">${map.name}</a><br />
+        % if game.duration is not None:
+          Duration: ${"%s:%02d" % (game.duration.seconds/60, game.duration.seconds%60)}
+        % endif
+      </p>
+    </div>
+
+    % if teamscores:
+      <div class="small-3 columns">
+        <table class="table-condensed">
+          <thead>
+            <th>Team</th>
+            <th>Score</th>
+          </thead>
+          <tbody>
+            % for ts in teamscores:
+              <tr class="${ts.team}"><td>${ts.team.capitalize()}</td><td>${ts.score}</td></tr>
+            % endfor
+          </tbody>
+        </table>
+      </div>
     % endif
-    </p>
-    <span class="clear"></span>
   </div>
-  % if teamscores:
-  <div class="span3 teamscores">
-    <table class="table table-condensed">
-    <thead>
-      <th>Team</th>
-      <th>Score</th>
-    </thead>
-    <tbody>
-    % for ts in teamscores:
-      <tr class="${ts.team}"><td>${ts.team.capitalize()}</td><td>${ts.score}</td></tr>
+
+  ##### Games that have team scores push the scoreboard table to the right by
+  ##### one column. 
+  % if len(tgstats) == len(stats_by_team):
+    % for tgstat in tgstats:
+      <div class="row">
+
+        <div class="small-1 columns teamscore">
+          <div class="teamname ${tgstat.team_html_color()}">
+            ${tgstat.team_html_color().capitalize()}
+          </div>
+          <div class="${tgstat.team_html_color()}">
+            % if game.game_type_cd == 'ctf':
+              ${tgstat.caps}
+            % elif game.game_type_cd == 'ca':
+              ${tgstat.rounds}
+            % else:
+              ${tgstat.score}
+            % endif
+          </div>
+        </div>
+
+        <div class="small-11 columns game">
+          ${scoreboard(game.game_type_cd, stats_by_team[tgstat.team], show_elo, show_latency)}
+        </div>
+      </div>
     % endfor
-    </tbody>
-    </table>
-  </div>
-  % endif
-</div>
-
-% if len(tgstats) == len(stats_by_team):
-## if we have teamscores in the db
-% for tgstat in tgstats:
-<div class="row">
-  <div class="span1 teamscore">
-  <div class="teamname ${tgstat.team_html_color()}">
-  ${tgstat.team_html_color().capitalize()}
-  </div>
-  <div class="${tgstat.team_html_color()}">
-  % if game.game_type_cd == 'ctf':
-  ${tgstat.caps}
-  % elif game.game_type_cd == 'ca':
-  ${tgstat.rounds}
-## dom -> ticks, rc -> laps, nb -> goals, as -> objectives
+
+  ##### Games that do not have team scores use the full width
   % else:
-  ${tgstat.score}
+    % for team in stats_by_team.keys():
+      <div class="row">
+        <div class="small-12 columns game">
+          ${scoreboard(game.game_type_cd, stats_by_team[team], show_elo, show_latency)}
+        </div>
+      </div>
+    % endfor
   % endif
-  </div>
-  </div>
-  <div class="span10 game">
-  ${scoreboard(game.game_type_cd, stats_by_team[tgstat.team], show_elo, show_latency)}
-  </div>
-</div>
-% endfor
-% else:
-% for team in stats_by_team.keys():
-<div class="row">
-  <div class="span12 game">
-  ${scoreboard(game.game_type_cd, stats_by_team[team], show_elo, show_latency)}
-  </div>
-</div>
-% endfor
-% endif
 
-% if len(captimes) > 0:
-<div class="row">
-  <div class="span6">
-    <h3>Best Flag Capture Times</h3>
-    <table class="table table-hover table-condensed">
-      <thead>
+  % if len(captimes) > 0:
+  <div class="row">
+    <div class="small-6 columns">
+      <h3>Best Flag Capture Times</h3>
+      <table class="table-hover table-condensed">
+        <thead>
+          <tr>
+            <th>Nick</th>
+            <th>Captime</th>
+          </tr>
+        </thead>
+        <tbody>
+        % for pgs in captimes:
         <tr>
-          <th>Nick</th>
-          <th>Captime</th>
-        </tr>
-      </thead>
-      <tbody>
-      % for pgs in captimes:
-      <tr>
-        <td>
-          % if pgs.player_id > 2:
-          <a href="${request.route_url("player_info", id=pgs.player_id)}"
-            title="Go to the info page for this player">
+          <td>
+            % if pgs.player_id > 2:
+            <a href="${request.route_url("player_info", id=pgs.player_id)}"
+              title="Go to the info page for this player">
+              <span class="nick">${pgs.nick_html_colors()|n}</span>
+            </a>
+            % else:
             <span class="nick">${pgs.nick_html_colors()|n}</span>
-          </a>
-          % else:
-          <span class="nick">${pgs.nick_html_colors()|n}</span>
-          % endif
-        </td>
-        <td>${round(float(pgs.fastest.seconds) + (pgs.fastest.microseconds/1000000.0), 2)}</td>
-      </tr>
-      % endfor
-      </tbody>
-    </table>
+            % endif
+          </td>
+          <td>${round(float(pgs.fastest.seconds) + (pgs.fastest.microseconds/1000000.0), 2)}</td>
+        </tr>
+        % endfor
+        </tbody>
+      </table>
+    </div>
   </div>
-</div>
 % endif
 
-
 % if len(pgstats) > 0 and len(pwstats) > 0:
-<div class="row">
-  <div class="span12">
-    <h3>Accuracy Information</h3>
-    <div class="accordion" id="acc-accordion" style="display:none;">
-      % for pgstat in pgstats:
-      % if pgstat.player_game_stat_id in pwstats:
-      <div class="accordion-group">
-        <div class="accordion-heading">
-          <a class="accordion-toggle" data-toggle="collapse" data-parent="#acc-accordion" href="#accuracy-${pgstat.player_game_stat_id}">
-            Accuracy for ${pgstat.nick_html_colors()|n}
-          </a>
-        </div>
-        <div id="accuracy-${pgstat.player_game_stat_id}" class="accordion-body collapse in">
-          <div class="accordion-inner">
-            ${accuracy(pwstats[pgstat.player_game_stat_id])}
-          </div>
-        </div>
+  <div class="row">
+    <div class="small-12 columns">
+      <h3>Accuracy Information</h3>
+      <div class="accordion" id="acc-accordion" style="display:none;">
+        % for pgstat in pgstats:
+          % if pgstat.player_game_stat_id in pwstats:
+            <div class="accordion-group">
+              <div class="accordion-heading">
+                <a class="accordion-toggle" data-toggle="collapse" data-parent="#acc-accordion" href="#accuracy-${pgstat.player_game_stat_id}">
+                  Accuracy for ${pgstat.nick_html_colors()|n}
+                </a>
+              </div>
+              <div id="accuracy-${pgstat.player_game_stat_id}" class="accordion-body collapse in">
+                <div class="accordion-inner">
+                  ${accuracy(pwstats[pgstat.player_game_stat_id])}
+                </div>
+              </div>
+            </div>
+          % endif
+        % endfor
       </div>
-      % endif
-      % endfor
     </div>
+    % endif
   </div>
-  % endif
-
-</div>
 % endif

diff --git a/xonstat/templates/scoreboard.mako b/xonstat/templates/scoreboard.mako
index 8c94d4336bca7bd2fd0db08030ccd6f87ad9a8a8..3d06f95298f3630a98a089214fde756b59fb3f65 100644 (file)
--- a/xonstat/templates/scoreboard.mako
+++ b/xonstat/templates/scoreboard.mako
@@ -1,25 +1,25 @@
 <%def name="scoreboard(game_type_cd, pgstats, show_elo=False, show_latency=False)">
-<table  class="table table-hover table-condensed">
+<table  class="table-hover table-condensed">
   ${scoreboard_header(game_type_cd, pgstats[0])}
   <tbody>
   % for pgstat in pgstats:
     <tr class="${pgstat.team_html_color()}">
       % if show_latency and pgstat.avg_latency is not None:
-        <td class="tdcenter">
+        <td class="text-center">
           ${int(round(pgstat.avg_latency))}
         </td>
       % elif show_latency:
-        <td class="tdcenter">-</td>
+        <td class="text-center">-</td>
       % endif
 
-      <td class="player-nick">
+      <td class="no-stretch">
         % if pgstat.player_id > 2:
           <a href="${request.route_url("player_info", id=pgstat.player_id)}"
             title="Go to the info page for this player">
-            <span class="nick">${pgstat.nick_html_colors()|n}</span>
+            <span class="small-2">${pgstat.nick_html_colors()|n}</span>
           </a>
         % else:
-          <span class="nick">${pgstat.nick_html_colors()|n}</span>
+          <span class="small-2">${pgstat.nick_html_colors()|n}</span>
         % endif
       </td>
 
@@ -48,16 +48,16 @@
 <thead>
   <tr>
     % if show_latency:
-    <th class="ping">Ping</th>
+      <th class="small-1">Ping</th>
     % endif
-    <th class="nick">Nick</th>
-    <th class="kills">Kills</th>
-    <th class="deaths">Deaths</th>
-    <th class="suicides">Suicides</th>
-    <th class="objectives">Objectives</th>
-    <th class="score">Score</th>
+    <th class="small-2">Nick</th>
+    <th>Kills</th>
+    <th>Deaths</th>
+    <th>Suicides</th>
+    <th>Objectives</th>
+    <th>Score</th>
     % if show_elo:
-    <th>Elo Change</th>
+      <th>Elo Change</th>
     % endif
   </tr>
 </thead>
@@ -67,15 +67,15 @@
 <thead>
   <tr>
     % if show_latency:
-    <th class="ping">Ping</th>
+      <th class="small-1">Ping</th>
     % endif
-    <th class="nick">Nick</th>
-    <th class="kills">Kills</th>
-    <th class="deaths">Deaths</th>
-    <th class="suicides">Suicides</th>
-    <th class="score">Score</th>
+    <th class="small-2">Nick</th>
+    <th>Kills</th>
+    <th>Deaths</th>
+    <th>Suicides</th>
+    <th>Score</th>
     % if show_elo:
-    <th>Elo Change</th>
+      <th>Elo Change</th>
     % endif
   </tr>
 </thead>
@@ -85,16 +85,16 @@
 <thead>
   <tr>
     % if show_latency:
-    <th class="ping">Ping</th>
+      <th class="small-1">Ping</th>
     % endif
-    <th class="nick">Nick</th>
-    <th class="kills">Kills</th>
-    <th class="deaths">Deaths</th>
-    <th class="captured">Captured</th>
-    <th class="released">Released</th>
-    <th class="score">Score</th>
+    <th class="small-2">Nick</th>
+    <th>Kills</th>
+    <th>Deaths</th>
+    <th>Captured</th>
+    <th>Released</th>
+    <th>Score</th>
     % if show_elo:
-    <th>Elo Change</th>
+      <th>Elo Change</th>
     % endif
   </tr>
 </thead>
@@ -104,11 +104,11 @@
 <thead>
   <tr>
     % if show_latency:
-    <th class="ping">Ping</th>
+      <th class="small-1">Ping</th>
     % endif
-    <th class="nick">Nick</th>
-    <th class="fastest">Fastest Time</th>
-    <th class="deaths">Deaths</th>
+    <th class="small-2">Nick</th>
+    <th>Fastest Time</th>
+    <th>Deaths</th>
   </tr>
 </thead>
 % endif
@@ -117,17 +117,17 @@
 <thead class="ctf ${pgstat.team_html_color()}">
   <tr>
     % if show_latency:
-    <th class="ping">Ping</th>
+      <th class="small-1">Ping</th>
     % endif
-    <th class="nick">Nick</th>
-    <th class="kills">Kills</th>
-    <th class="captures">Captures</th>
-    <th class="pickups">Pickups</th>
-    <th class="fck" title="Flag Carrier Kill">FCK</th>
-    <th class="returns">Returns</th>
-    <th class="score">Score</th>
+    <th>Nick</th>
+    <th>Kills</th>
+    <th>Captures</th>
+    <th>Pickups</th>
+    <th title="Flag Carrier Kill">FCK</th>
+    <th>Returns</th>
+    <th>Score</th>
     % if show_elo:
-    <th>Elo Change</th>
+      <th>Elo Change</th>
     % endif
   </tr>
 </thead>
@@ -137,16 +137,16 @@
 <thead class="dom ${pgstat.team_html_color()}">
   <tr>
     % if show_latency:
-    <th class="ping">Ping</th>
+      <th class="small-1">Ping</th>
     % endif
-    <th class="nick">Nick</th>
-    <th class="kills">Kills</th>
-    <th class="deaths">Deaths</th>
-    <th class="takes">Takes</th>
-    <th class="ticks">Ticks</th>
-    <th class="score">Score</th>
+    <th class="small-2">Nick</th>
+    <th>Kills</th>
+    <th>Deaths</th>
+    <th>Takes</th>
+    <th>Ticks</th>
+    <th>Score</th>
     % if show_elo:
-    <th>Elo Change</th>
+      <th>Elo Change</th>
     % endif
   </tr>
 </thead>
@@ -156,15 +156,15 @@
 <thead class="freezetag ${pgstat.team_html_color()}">
   <tr>
     % if show_latency:
-    <th class="ping">Ping</th>
+      <th class="small-1">Ping</th>
     % endif
-    <th class="nick">Nick</th>
-    <th class="kills">Kills</th>
-    <th class="deaths">Deaths</th>
-    <th class="revivals">Revivals</th>
-    <th class="score">Score</th>
+    <th class="small-2">Nick</th>
+    <th>Kills</th>
+    <th>Deaths</th>
+    <th>Revivals</th>
+    <th>Score</th>
     % if show_elo:
-    <th>Elo Change</th>
+      <th>Elo Change</th>
     % endif
   </tr>
 </thead>
@@ -174,17 +174,17 @@
 <thead>
   <tr>
     % if show_latency:
-    <th class="ping">Ping</th>
+      <th class="small-1">Ping</th>
     % endif
-    <th class="nick">Nick</th>
-    <th class="kills">Kills</th>
-    <th class="deaths">Deaths</th>
-    <th class="pickups">Pickups</th>
-    <th class="bctime">BC Time</th>
-    <th class="bckills">BC Kills</th>
-    <th class="score">Score</th>
+    <th class="small-2">Nick</th>
+    <th>Kills</th>
+    <th>Deaths</th>
+    <th>Pickups</th>
+    <th>BC Time</th>
+    <th>BC Kills</th>
+    <th>Score</th>
     % if show_elo:
-    <th>Elo Change</th>
+      <th>Elo Change</th>
     % endif
   </tr>
 </thead>
@@ -194,20 +194,18 @@
 <thead class="kh ${pgstat.team_html_color()}">
   <tr>
     % if show_latency:
-    <th class="ping">Ping</th>
+      <th class="small-1">Ping</th>
     % endif
-    <th class="nick">Nick</th>
-    <th class="kills">Kills</th>
-    <th class="deaths">Deaths</th>
-    <th class="pickups">Pickups</th>
-    <th class="caps">Captures</th>
-    <th class="losses">Losses</th>
-    <th class="pushes">Pushes</th>
-    <th class="destroys">Destroys</th>
-    <th class="kckills">KC Kills</th>
-    <th class="score">Score</th>
+    <th class="small-2">Nick</th>
+    <th>Kills</th>
+    <th>Deaths</th>
+    <th>Pickups</th>
+    <th>Captures</th>
+    <th>Losses</th>
+    <th>KC Kills</th>
+    <th>Score</th>
     % if show_elo:
-    <th>Elo Change</th>
+      <th>Elo Change</th>
     % endif
   </tr>
 </thead>
@@ -217,14 +215,14 @@
 <thead class="nb ${pgstat.team_html_color()}">
   <tr>
     % if show_latency:
-    <th class="ping">Ping</th>
+      <th class="small-1">Ping</th>
     % endif
-    <th class="nick">Nick</th>
-    <th class="goals">Goals</th>
-    <th class="faults">Faults</th>
-    <th class="score">Score</th>
+    <th class="small-2">Nick</th>
+    <th>Goals</th>
+    <th>Faults</th>
+    <th>Score</th>
     % if show_elo:
-    <th>Elo Change</th>
+      <th>Elo Change</th>
     % endif
   </tr>
 </thead>
@@ -234,12 +232,12 @@
 <thead>
   <tr>
     % if show_latency:
-    <th class="ping">Ping</th>
+      <th class="small-1">Ping</th>
     % endif
-    <th class="nick">Nick</th>
-    <th class="laps">Laps</th>
-    <th class="fastest">Fastest Lap</th>
-    <th class="time">Time</th>
+    <th class="small-2">Nick</th>
+    <th>Laps</th>
+    <th>Fastest Lap</th>
+    <th>Time</th>
   </tr>
 </thead>
 % endif
@@ -319,8 +317,6 @@
   <td>${pgstat.pickups}</td>
   <td>${pgstat.captures}</td>
   <td>${pgstat.drops}</td>
-  <td>${pgstat.pushes}</td>
-  <td>${pgstat.destroys}</td>
   <td>${pgstat.carrier_frags}</td>
 % endif