feat(card)!: modernize game and hub tooltips (#1700)

* feat: modernize game and hub tooltips * chore: fix test * docs: write a lot of words * chore: lint * chore: more fixes * chore: update test * chore: attempt to fix ci * fix: address pr feedback * chore: lint * fix: address pr feedback * fix: address pr feedback * fix: address pr feedback * fix: address pr feedback * fix: address pr feedback * chore: lint * chore: commit excluded change * chore: lint * chore: fix merge conflicts
RetroAchievements · Aug 10, 2023 · cf01c14 · cf01c14
1 parent 52b20a4
commit cf01c14
Show file tree

Hide file tree

Showing 29 changed files with 996 additions and 182 deletions.
diff --git a/app/Community/AppServiceProvider.php b/app/Community/AppServiceProvider.php
@@ -14,6 +14,7 @@
 use App\Community\Commands\SyncTickets;
 use App\Community\Commands\SyncUserRelations;
 use App\Community\Commands\SyncVotes;
+use App\Community\Components\UserCard;
 use App\Community\Models\AchievementComment;
 use App\Community\Models\AchievementSetClaim;
 use App\Community\Models\Comment;
@@ -36,6 +37,7 @@
 use App\Community\Models\UserRelation;
 use App\Community\Models\Vote;
 use Illuminate\Database\Eloquent\Relations\Relation;
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -98,6 +100,8 @@ public function boot(): void
         TriggerTicketComment::disableSearchSyncing();
         UserComment::disableSearchSyncing();
 
+        Blade::component('user-card', UserCard::class);
+
         // Livewire::component('forum-topics', ForumTopics::class);
         //
         // Livewire::component('achievement.comments', AchievementComments::class);

diff --git a/app/View/Components/Community/UserCard.php → app/Community/Components/UserCard.php b/app/View/Components/Community/UserCard.php → app/Community/Components/UserCard.php
@@ -2,12 +2,12 @@
 
 declare(strict_types=1);
 
-namespace App\View\Components\Community;
+namespace App\Community\Components;
 
 use App\Community\Enums\Rank;
 use App\Community\Enums\RankType;
 use App\Site\Enums\Permissions;
-use App\Site\Models\User as UserModel;
+use App\Site\Models\User;
 use App\Support\Cache\CacheKey;
 use Illuminate\Contracts\View\View;
 use Illuminate\Support\Carbon;
@@ -55,11 +55,10 @@ private function getUsername(string|array $user): ?string
 
     private function getUserData(string $username): ?array
     {
-        return Cache::store('array')->remember(
+        return Cache::store('array')->rememberForever(
             CacheKey::buildUserCardDataCacheKey($username),
-            Carbon::now()->addMonths(3),
             function () use ($username): ?array {
-                $foundUser = UserModel::firstWhere('User', $username);
+                $foundUser = User::firstWhere('User', $username);
 
                 return $foundUser ? $foundUser->toArray() : null;
             }

diff --git a/app/Helpers/render/game.php b/app/Helpers/render/game.php
@@ -2,15 +2,14 @@
 
 use App\Site\Enums\Permissions;
 use Illuminate\Support\Facades\Blade;
-use Illuminate\Support\Facades\Cache;
 
 function gameAvatar(
     int|string|array $game,
     ?bool $label = null,
     bool|string|null $icon = null,
     int $iconSize = 32,
     string $iconClass = 'badgeimg',
-    bool|string|array $tooltip = true,
+    bool $tooltip = true,
     ?string $context = null,
     ?string $title = null,
 ): string {
@@ -36,19 +35,14 @@ function gameAvatar(
         if ($icon === null) {
             $icon = media_asset($game['GameIcon'] ?? $game['ImageIcon']);
         }
-
-        // pre-render tooltip
-        if (!is_string($tooltip)) {
-            $tooltip = $tooltip !== false ? $game : false;
-        }
     }
 
     return avatar(
         resource: 'game',
         id: $id,
         label: $label !== false && ($label || !$icon) ? $label : null,
         link: route('game.show', $id),
-        tooltip: is_array($tooltip) ? renderGameCard($tooltip) : $tooltip,
+        tooltip: $tooltip,
         iconUrl: $icon !== false && ($icon || !$label) ? $icon : null,
         iconSize: $iconSize,
         iconClass: $iconClass,
@@ -163,46 +157,18 @@ function renderGameBreadcrumb(array|int $data, bool $addLinkToLastCrumb = true):
     return $html;
 }
 
-function renderGameCard(int|array $game): string
+function renderGameCard(int|array $game, ?string $targetUsername): string
 {
-    $id = is_int($game) ? $game : ($game['GameID'] ?? $game['ID'] ?? null);
+    $gameId = is_int($game) ? $game : ($game['GameID'] ?? $game['ID'] ?? null);
 
-    if (empty($id)) {
+    if (empty($gameId)) {
         return __('legacy.error.error');
     }
 
-    $data = [];
-    if (is_array($game)) {
-        $data = $game;
-    }
-
-    if (empty($data)) {
-        $data = Cache::store('array')->rememberForever('game:' . $id . ':card-data', fn () => getGameData($id));
-    }
-
-    if (empty($data)) {
-        return '';
-    }
-
-    $gameName = renderGameTitle($data['GameTitle'] ?? $data['Title'] ?? '');
-    $consoleName = $data['Console'] ?? $data['ConsoleName'] ?? '';
-    $icon = $data['GameIcon'] ?? $data['ImageIcon'] ?? null;
-
-    $tooltip = "<div class='tooltip-body flex items-start' style='max-width: 400px'>";
-    $tooltip .= "<img style='margin-right:5px' src='" . media_asset($icon) . "' width='64' height='64' />";
-    $tooltip .= "<div>";
-    $tooltip .= "<b>$gameName</b><br>";
-    $tooltip .= $consoleName;
-
-    $mastery = $game['Mastery'] ?? null;
-    if (!empty($mastery)) {
-        $tooltip .= "<div>$mastery</div>";
-    }
-
-    $tooltip .= "</div>";
-    $tooltip .= "</div>";
-
-    return $tooltip;
+    return Blade::render('<x-game-card :gameId="$gameId" :targetUsername="$targetUsername" />', [
+        'gameId' => $gameId,
+        'targetUsername' => $targetUsername,
+    ]);
 }
 
 function RenderGameSort(bool $isFullyFeaturedGame, ?int $flag, int $officialFlag, int $gameID, ?int $sortBy): void

diff --git a/app/Helpers/render/site-award.php b/app/Helpers/render/site-award.php
@@ -31,7 +31,7 @@ function SeparateAwards(array $userAwards): array
     return [$gameAwards, $eventAwards, $siteAwards];
 }
 
-function RenderSiteAwards(array $userAwards): void
+function RenderSiteAwards(array $userAwards, string $awardsOwnerUsername): void
 {
     [$gameAwards, $eventAwards, $siteAwards] = SeparateAwards($userAwards);
 
@@ -75,11 +75,11 @@ function RenderSiteAwards(array $userAwards): void
     usort($groups, fn ($a, $b) => $a[0] - $b[0]);
 
     foreach ($groups as $group) {
-        RenderAwardGroup($group[1], $group[2]);
+        RenderAwardGroup($group[1], $group[2], $awardsOwnerUsername);
     }
 }
 
-function RenderAwardGroup(array $awards, string $title): void
+function RenderAwardGroup(array $awards, string $title, string $awardsOwnerUsername): void
 {
     $numItems = count($awards);
     $numHidden = 0;
@@ -139,7 +139,7 @@ function RenderAwardGroup(array $awards, string $title): void
     $imageSize = 48;
     foreach ($awards as $award) {
         if ($award['DisplayOrder'] >= 0) {
-            RenderAward($award, $imageSize);
+            RenderAward($award, $imageSize, $awardsOwnerUsername);
         }
     }
     echo "</div>";
@@ -160,7 +160,7 @@ function RenderCounter(string $icon, string $text, int $numItems, int $numHidden
     return $counter;
 }
 
-function RenderAward(array $award, int $imageSize, bool $clickable = true): void
+function RenderAward(array $award, int $imageSize, string $ownerUsername, bool $clickable = true): void
 {
     $awardType = $award['AwardType'];
     $awardType = (int) $awardType;
@@ -186,7 +186,7 @@ function RenderAward(array $award, int $imageSize, bool $clickable = true): void
         $award['GameID'] = $award['AwardData'];
         $award['Mastery'] = "<br clear=all>$awarded";
 
-        echo "<div>" . gameAvatar($award, label: false, iconSize: $imageSize, context: 'mastery', iconClass: $imgclass) . "</div>";
+        echo "<div>" . gameAvatar($award, label: false, iconSize: $imageSize, context: $ownerUsername, iconClass: $imgclass) . "</div>";
 
         return;
     }

diff --git a/app/Helpers/render/user.php b/app/Helpers/render/user.php
@@ -66,7 +66,7 @@ class: 'inline whitespace-nowrap',
 
 function renderUserCard(string|array $user): string
 {
-    return Blade::render('<x-community.user-card :user="$user" />', [
+    return Blade::render('<x-user-card :user="$user" />', [
         'user' => $user,
     ]);
 }
@@ -90,8 +90,11 @@ function getCompletedAndIncompletedSetsCounts(array $userCompletedGamesList): ar
     return ['completedSetsCount' => $completedSetsCount, 'incompletedSetsCount' => $incompletedSetsCount];
 }
 
-function RenderCompletedGamesList(array $userCompletedGamesList, bool $isInitiallyHidingCompletedSets = false): void
-{
+function RenderCompletedGamesList(
+    array $userCompletedGamesList,
+    string $username,
+    bool $isInitiallyHidingCompletedSets = false,
+): void {
     echo "<div id='completedgames' class='component' >";
 
     echo "<h3>Completion Progress</h3>";
@@ -143,10 +146,10 @@ function RenderCompletedGamesList(array $userCompletedGamesList, bool $isInitial
         echo "<tr class='$isCompletedClassName'>";
 
         echo "<td>";
-        echo gameAvatar($userCompletedGamesList[$i], label: false);
+        echo gameAvatar($userCompletedGamesList[$i], label: false, context: $username);
         echo "</td>";
         echo "<td class='smaller'>";
-        echo gameAvatar($userCompletedGamesList[$i], icon: false);
+        echo gameAvatar($userCompletedGamesList[$i], icon: false, context: $username);
         echo "</td>";
         echo "<td>";
 

diff --git a/app/Platform/AppServiceProvider.php b/app/Platform/AppServiceProvider.php
@@ -31,6 +31,7 @@
 use App\Platform\Commands\UpdatePlayerMetrics;
 use App\Platform\Commands\UpdatePlayerPoints;
 use App\Platform\Commands\UpdatePlayerRanks;
+use App\Platform\Components\GameCard;
 use App\Platform\Models\Achievement;
 use App\Platform\Models\Badge;
 use App\Platform\Models\BadgeStage;
@@ -53,6 +54,7 @@
 use App\Platform\Models\System;
 use Illuminate\Console\Scheduling\Schedule;
 use Illuminate\Database\Eloquent\Relations\Relation;
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -153,6 +155,8 @@ public function boot(): void
         Leaderboard::disableSearchSyncing();
         System::disableSearchSyncing();
 
+        Blade::component('game-card', GameCard::class);
+
         // Livewire::component('achievement-grid', AchievementGrid::class);
         // Livewire::component('achievement-player-grid', AchievementPlayerGrid::class);
         // Livewire::component('badge-grid', BadgeGrid::class);