feat(game): adjust compare progress ux (#2314)

RetroAchievements · Apr 1, 2024 · 4aece04 · 4aece04
1 parent ce99350
commit 4aece04
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 52 deletions.
diff --git a/resources/views/components/game-progress-bar.blade.php b/resources/views/components/game-progress-bar.blade.php
@@ -1,5 +1,6 @@
 @props([
     'awardIndicator' => null, // 'unfinished' | 'beaten-softcore' | 'beaten-hardcore' | 'completed' | 'mastered' | null
+    'containerClassNames' => '',
     'hardcoreProgress' => 0,
     'maxProgress' => 100,
     'softcoreProgress' => 0,
@@ -32,22 +33,21 @@
             $tooltipLabel = "Progress: {$hardcoreProgress}/{$maxProgress} (hardcore)";
         } else if ($hardcoreProgress === 0 && $softcoreProgress > 0) {
             // Only softcore progress.
-            $tooltipLabel = "Progress: {$softcoreProgress}/{$maxProgress} (softcore only)";
+            $tooltipLabel = "Progress: {$softcoreProgress}/{$maxProgress} (softcore)";
         } else {
             // Mixed progress.
             $tooltipLabel = "Progress: {$softcoreProgress}/{$maxProgress} (softcore), {$hardcoreProgress}/{$maxProgress} (hardcore)";
         }
     }
 ?>
 
-<div class="flex items-center">
+<div class="flex items-center {{ $containerClassNames }}" title="{{ $tooltipLabel }}">
     <div
         role="progressbar"
         aria-valuemin="0"
         aria-valuemax="{{ $maxProgress }}"
         aria-valuenow="{{ $softcoreProgress }}"
         aria-label="{{ $tooltipLabel }}"
-        title="{{ $tooltipLabel }}"
         class="w-full h-1 bg-zinc-950 light:bg-zinc-300 flex space-x-px overflow-hidden {{ $awardIndicator ? 'rounded-l' : 'rounded' }}"
     >
         @if ($hardcoreProgress > 0)

diff --git a/resources/views/components/game/compare-progress.blade.php b/resources/views/components/game/compare-progress.blade.php
@@ -26,6 +26,10 @@
 
     $followedUserCompletion = PlayerGame::where('game_id', $game->ID)
         ->whereIn('user_id', $followedUserIds)
+        ->where(function ($query) {
+            $query->where('achievements_unlocked', '>', 0)
+                ->orWhere('achievements_unlocked_hardcore', '>', 0);
+        })
         ->select($fields)
         ->orderBy('achievements_unlocked_hardcore', 'DESC')
         ->orderBy('achievements_unlocked', 'DESC')
@@ -41,40 +45,43 @@
 
 <script>
 jQuery(document).ready(function onReady($) {
-  var $searchBoxCompareuser = $('.searchboxgamecompareuser');
-  $searchBoxCompareuser.autocomplete({
-    source: function (request, response) {
-      request.source = 'game-compare';
-      $.post('/request/search.php', request)
-        .done(function (data) {
-          response(data);
-        });
-    },
-    minLength: 2
-  });
-  $searchBoxCompareuser.autocomplete({
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    select: function (event, ui) {
-      return false;
-    },
-  });
-  $searchBoxCompareuser.on('autocompleteselect', function (event, ui) {
-    var placeholderUrl = "{!! $placeholderUrl !!}";
-    window.location = placeholderUrl.replace("%5Buser%5D", ui.item.label);
-    return false;
-  });
+    const $searchBoxCompareuser = $(".searchboxgamecompareuser");
+    $searchBoxCompareuser.autocomplete({
+        source(request, response) {
+            request.source = "game-compare";
+            $.post("/request/search.php", request).done(function (data) {
+                response(data);
+            });
+        },
+        minLength: 2,
+    });
+    $searchBoxCompareuser.autocomplete({
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        select(event, ui) {
+            return false;
+        },
+    });
+    $searchBoxCompareuser.on("autocompleteselect", function (event, ui) {
+        const placeholderUrl = "{!! $placeholderUrl !!}";
+        window.location = placeholderUrl.replace("%5Buser%5D", ui.item.label);
+
+        return false;
+    });
 });
 
 function selectSearchBoxUser() {
-  var $searchBoxCompareuser = $('.searchboxgamecompareuser');
-  var placeholderUrl = "{!! $placeholderUrl !!}";
-  window.location = placeholderUrl.replace("%5Buser%5D", $searchBoxCompareuser.val());
+    const $searchBoxCompareuser = $(".searchboxgamecompareuser");
+    const placeholderUrl = "{!! $placeholderUrl !!}";
+    window.location = placeholderUrl.replace(
+        "%5Buser%5D",
+        $searchBoxCompareuser.val()
+    );
 }
 </script>
 
 <div id="gamecompare" class="component">
     <h2 class="text-h3">Compare Progress</h2>
-    <div class="nicebox">
+    <div class="nicebox flex flex-col gap-y-2">
         @if ($followedUserCompletion === null)
             <p>RetroAchievements is a lot more fun with others.</p>
             @if ($user === null)
@@ -83,30 +90,41 @@ function selectSearchBoxUser() {
                 <p>Find users to follow <a href="/userList.php">here</a>!</p>
             @endif
         @elseif (empty($followedUserCompletion))
-            <p>None of your followed users have played this game</p>
+            <p>None of your followed users have unlocked any achievements for this game.</p>
         @else
             <p>Compare to a followed user:</p>
-            <table class="table-highlight"><tbody>
-            @foreach ($followedUserCompletion as $completion)
-                <?php $friend = User::find($completion['user_id']); ?>
-                <tr>
-                    <td>{!! userAvatar($friend, iconSize: 20) !!}</td>
-                    <td class="text-right">
-                        <a href="{!! route('game.compare-unlocks', ['game' => $game, 'user' => $friend->User]) !!}">
-                            {{ $completion['achievements_unlocked'] }}/{{ $completion['achievements_total'] }}
-                        </a>
-                    </td>
-                </tr>
-            @endforeach
-            </tbody></table>
+            <div class="">
+                @foreach ($followedUserCompletion as $completion)
+                    @php
+                        $friend = User::find($completion['user_id']);
+                    @endphp
+                    <div class="odd:bg-embed hover:bg-embed-highlight border border-transparent hover:border-[rgba(128,128,128,.3)] p-1 flex items-center justify-between w-full">
+                        <div>
+                            {!! userAvatar($friend, iconSize: 20) !!}
+                        </div>
 
+                        <a
+                            class="min-w-[100px] flex flex-col"
+                            href="{!! route('game.compare-unlocks', ['game' => $game, 'user' => $friend->User]) !!}"
+                        >
+                            <x-game-progress-bar
+                                containerClassNames="py-2.5"
+                                :softcoreProgress="$completion['achievements_unlocked']"
+                                :hardcoreProgress="$completion['achievements_unlocked_hardcore']"
+                                :maxProgress="$completion['achievements_total']"
+                            />
+                        </a>
+                    </div>
+                @endforeach
+            </table>
         @endif
 
-        <p class="mt-3">Compare with any user:</p>
-
-        <div class="w-full flex items-center gap-x-2">
-          <input name="compareuser" type="text" class="searchboxgamecompareuser w-full" placeholder="Enter User..." />
-          <button class="btn" onclick="selectSearchBoxUser()">Select</button>
+        <div>
+            <p>Compare with any user:</p>
+            <div class="w-full flex items-center gap-x-2">
+                <input name="compareuser" type="text" class="searchboxgamecompareuser w-full" placeholder="Enter User..." />
+                <button class="btn" onclick="selectSearchBoxUser()">Select</button>
+            </div>
         </div>
     </div>
 </div>
diff --git a/resources/views/pages-legacy/gameInfo.blade.php b/resources/views/pages-legacy/gameInfo.blade.php
@@ -1005,10 +1005,12 @@ function resize() {
         if ($user !== null && $numAchievements > 0) {
             $gameModel = Game::find($gameID);
             ?>
-            <x-game.compare-progress
-                :game="$gameModel"
-                :user="$userModel"
-            />
+            <div class="mb-4">
+                <x-game.compare-progress
+                    :game="$gameModel"
+                    :user="$userModel"
+                />
+            </div>
             <?php
         }