Cleanup on Latest Masters / High Scores tables (#1071)

* Show latest masters correct rank (instead of 1-10) * Better styling for latest master / high score * Remove seconds from mastered time * Remove unneeded CSS * Minor adjustments
RetroAchievements · Aug 19, 2022 · 911b4ad · 911b4ad
1 parent f03ad57
commit 911b4ad
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 17 deletions.
diff --git a/lib/database/player-game.php b/lib/database/player-game.php
@@ -373,6 +373,7 @@ function getGameTopAchievers(int $gameID, ?string $requestedBy): array
     $dbResult = s_mysql_query($query);
 
     if ($dbResult !== false) {
+        $mastersCounter = 0;
         while ($data = mysqli_fetch_assoc($dbResult)) {
             if (count($high_scores) < 10) {
                 $high_scores[] = $data;
@@ -382,6 +383,7 @@ function getGameTopAchievers(int $gameID, ?string $requestedBy): array
                 if (count($masters) == 10) {
                     array_shift($masters);
                 }
+                $data['Rank'] = ++$mastersCounter;
                 $masters[] = $data;
             } elseif (count($high_scores) == 10) {
                 break;

diff --git a/lib/render/leaderboard.php b/lib/render/leaderboard.php
@@ -268,15 +268,17 @@ function RenderTopAchieversComponent($user, array $gameTopAchievers, array $game
     // Latest Masters Tab
     echo "<div id='latestmasters' class='tabcontentscores' style=\"display: " . ($numLatestMasters >= $masteryThreshold ? "block" : "none") . "\">";
     echo "<table class='smalltable'><tbody>";
-    echo "<tr><th>Pos</th><th colspan='2' style='max-width:30%'>User</th><th>Mastery Date</th></tr>";
+    echo "<tr><th>#</th><th>User</th><th>Mastered</th></tr>";
 
     for ($i = 0; $i < $numLatestMasters; $i++) {
         if (!isset($gameLatestMasters[$i])) {
             continue;
         }
 
+        $nextRank = $gameLatestMasters[$i]['Rank'];
         $nextUser = $gameLatestMasters[$i]['User'];
-        $nextLastAward = $gameLatestMasters[$i]['LastAward'];
+        $date = date_create($gameLatestMasters[$i]['LastAward']);
+        $nextLastAward = date_format($date, "Y-m-d H:i");
 
         // Outline user if they are in the list
         if ($user !== null && $user == $nextUser) {
@@ -286,18 +288,17 @@ function RenderTopAchieversComponent($user, array $gameTopAchievers, array $game
         }
 
         echo "<td class='rank'>";
-        echo $i + 1;
-        echo "</td>";
-
-        echo "<td>";
-        echo GetUserAndTooltipDiv($nextUser, true);
+        echo $nextRank;
         echo "</td>";
 
         echo "<td class='user'>";
+        echo GetUserAndTooltipDiv($nextUser, true);
         echo GetUserAndTooltipDiv($nextUser, false);
         echo "</td>";
 
-        echo "<td>$nextLastAward</td>";
+        echo "<td class='lastaward'>";
+        echo $nextLastAward;
+        echo "</td>";
 
         echo "</tr>";
     }
@@ -307,7 +308,7 @@ function RenderTopAchieversComponent($user, array $gameTopAchievers, array $game
     // High Scores Tab
     echo "<div id='highscores' class='tabcontentscores' style=\"display: " . ($numLatestMasters >= $masteryThreshold ? "none" : "block") . "\">";
     echo "<table><tbody>";
-    echo "<tr><th>Pos</th><th colspan='2' style='max-width:30%'>User</th><th>Points</th></tr>";
+    echo "<tr><th>#</th><th>User</th><th>Total points</th></tr>";
 
     for ($i = 0; $i < $numTopAchievers; $i++) {
         if (!isset($gameTopAchievers[$i])) {
@@ -329,11 +330,8 @@ function RenderTopAchieversComponent($user, array $gameTopAchievers, array $game
         echo $i + 1;
         echo "</td>";
 
-        echo "<td>";
-        echo GetUserAndTooltipDiv($nextUser, true);
-        echo "</td>";
-
         echo "<td class='user'>";
+        echo GetUserAndTooltipDiv($nextUser, true);
         echo GetUserAndTooltipDiv($nextUser, false);
         echo "</td>";
 

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -1264,10 +1264,6 @@ pre, code, .code {
   font-size: 0.65em;
 }
 
-.awardcount > .numitems {
-  font-style: italic;
-}
-
 .badgeimg {
   border: 2px solid transparent;
   padding: 0;
@@ -1612,6 +1608,39 @@ svg > g > g:last-child { pointer-events: none }
   border: 1px solid rgb(44, 151, 250);
 }
 
+.tabcontentscores td {
+  padding: 2px 5px;
+}
+
+.tabcontentscores td.rank {
+  width: 15%;
+}
+
+.tabcontentscores td.user {
+  width: 55%;
+}
+
+.tabcontentscores td.lastaward, .tabcontentscores td.points {
+  width: 30%;
+}
+
+.tabcontentscores td.user span:first-of-type {
+  margin-right: 6px;
+}
+
+.tabcontentscores td.user span:nth-of-type(2) {
+  display: inline-block;
+  width: 0;
+}
+
+.tabcontentscores .rank {
+  font-weight: bold;
+}
+
+.tabcontentscores .lastaward {
+  font-size: 0.85em;
+}
+
 /* More info buttons */
 .info-button{
   display:block;