Show team flag on user display

app/Http/Controllers/BeatmapsController.php

@@ -24,7 +24,7 @@
 class BeatmapsController extends Controller
 {
     const DEFAULT_API_INCLUDES = ['beatmapset.ratings', 'failtimes', 'max_combo'];
-    const DEFAULT_SCORE_INCLUDES = ['user', 'user.country', 'user.cover'];
+    const DEFAULT_SCORE_INCLUDES = ['user', 'user.country', 'user.cover', 'user.team'];
 
     public function __construct()
     {
@@ -74,7 +74,7 @@ private static function beatmapScores(string $id, ?string $scoreTransformerType,
             'type' => $type,
             'user' => $currentUser,
         ]);
-        $scores = $esFetch->all()->loadMissing(['beatmap', 'user.country', 'processHistory']);
+        $scores = $esFetch->all()->loadMissing(['beatmap', 'user.country', 'user.team', 'processHistory']);
         $userScore = $esFetch->userBest();
         $scoreTransformer = new ScoreTransformer($scoreTransformerType);
 

app/Http/Controllers/Forum/TopicsController.php

@@ -396,6 +396,7 @@ public function show($id)
             'user.country',
             'user.rank',
             'user.supporterTagPurchases',
+            'user.team',
             'user.userGroups',
         ]);
 

app/Http/Controllers/RankingController.php

@@ -174,7 +174,7 @@ public function index($mode, $type)
             $table = (new $class())->getTable();
             $ppColumn = $class::ppColumn();
             $stats = $class
-                ::with(['user', 'user.country'])
+                ::with(['user', 'user.country', 'user.team'])
                 ->where($ppColumn, '>', 0)
                 ->whereHas('user', function ($userQuery) {
                     $userQuery->default();
@@ -307,6 +307,7 @@ public function kudosu()
         $page = min(get_int(request('page')) ?? 1, $maxPage);
 
         $scores = User::default()
+            ->with('team')
             ->orderBy('osu_kudostotal', 'desc')
             ->paginate(static::PAGE_SIZE, ['*'], 'page', $page, $maxResults);
 

app/Http/Controllers/UsersController.php

@@ -931,6 +931,7 @@ private function showUserIncludes()
             'statistics.country_rank',
             'statistics.rank',
             'statistics.variants',
+            'team',
             'user_achievements',
         ];
 

app/Models/DeletedUser.php

@@ -7,6 +7,7 @@
 
 class DeletedUser extends User
 {
+    public null $team = null;
     public $user_avatar = null;
     public $username = '[deleted user]';
 

app/Models/Multiplayer/Room.php

@@ -676,7 +676,7 @@ public function startPlay(User $user, PlaylistItem $playlistItem, int $buildId)
 
     public function topScores()
     {
-        return $this->userHighScores()->forRanking()->with('user.country');
+        return $this->userHighScores()->forRanking()->with(['user.country', 'user.team']);
     }
 
     private function assertHostRoomAllowance()

app/Models/Spotlight.php

@@ -96,7 +96,7 @@ public function ranking(string $mode)
         // These models will not have the correct table name set on them
         // as they get overriden when Laravel hydrates them.
         return $this->userStats($mode)
-            ->with(['user', 'user.country'])
+            ->with(['user', 'user.country', 'user.team'])
             ->whereHas('user', function ($userQuery) {
                 $model = new User();
                 $userQuery

app/Models/User.php

@@ -37,6 +37,7 @@
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\HasOne;
+use Illuminate\Database\Eloquent\Relations\HasOneThrough;
 use Illuminate\Database\QueryException;
 use Laravel\Passport\HasApiTokens;
 use League\OAuth2\Server\Exception\OAuthServerException;
@@ -127,7 +128,7 @@
  * @property-read Collection<Store\Address> $storeAddresses
  * @property-read Collection<UserDonation> $supporterTagPurchases
  * @property-read Collection<UserDonation> $supporterTags
- * @property-read TeamMember|null $teamMembership
+ * @property-read Team|null $team
  * @property-read Collection<OAuth\Token> $tokens
  * @property-read Collection<Forum\TopicWatch> $topicWatches
  * @property-read Collection<UserAchievement> $userAchievements
@@ -297,9 +298,16 @@ public function userCountryHistory(): HasMany
         return $this->hasMany(UserCountryHistory::class);
     }
 
-    public function teamMembership(): HasOne
+    public function team(): HasOneThrough
     {
-        return $this->hasOne(TeamMember::class, 'user_id');
+        return $this->hasOneThrough(
+            Team::class,
+            TeamMember::class,
+            'user_id',
+            'id',
+            'user_id',
+            'team_id',
+        );
     }
 
     public function getAuthPassword()
@@ -958,7 +966,7 @@ public function getAttribute($key)
             'storeAddresses',
             'supporterTagPurchases',
             'supporterTags',
-            'teamMembership',
+            'team',
             'tokens',
             'topicWatches',
             'userAchievements',

app/Transformers/CurrentUserTransformer.php

@@ -16,6 +16,7 @@ public function __construct()
             'friends',
             'groups',
             'is_admin',
+            'team',
             'unread_pm_count',
             'user_preferences',
         ];

app/Transformers/TeamTransformer.php

@@ -0,0 +1,23 @@
+<?php
+
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+declare(strict_types=1);
+
+namespace App\Transformers;
+
+use App\Models\Team;
+
+class TeamTransformer extends TransformerAbstract
+{
+    public function transform(Team $team): array
+    {
+        return [
+            'id' => $team->getKey(),
+            'logo' => $team->logo()->url(),
+            'name' => $team->name,
+            'short_name' => $team->short_name,
+        ];
+    }
+}

app/Transformers/UserCompactTransformer.php

@@ -19,9 +19,11 @@ class UserCompactTransformer extends TransformerAbstract
         'country',
         'cover',
         'groups',
+        'team',
     ];
 
     const CARD_INCLUDES_PRELOAD = [
+        'team',
         'userGroups',
     ];
 
@@ -92,6 +94,7 @@ class UserCompactTransformer extends TransformerAbstract
         'statistics',
         'statistics_rulesets',
         'support_level',
+        'team',
         'unread_pm_count',
         'user_achievements',
         'user_preferences',
@@ -454,6 +457,13 @@ public function includeSupportLevel(User $user)
         return $this->primitive($user->supportLevel());
     }
 
+    public function includeTeam(User $user)
+    {
+        return ($team = $user->team) === null
+            ? $this->null()
+            : $this->item($team, new TeamTransformer());
+    }
+
     public function includeUnreadPmCount(User $user)
     {
         // legacy pm has been turned off

resources/css/bem-index.less

@@ -157,6 +157,7 @@
 @import "bem/fileupload";
 @import "bem/fixed-bar";
 @import "bem/flag-country";
+@import "bem/flag-team";
 @import "bem/floating-toolbar";
 @import "bem/floating-toolbar-button";
 @import "bem/follow-mapper";

resources/css/bem/beatmap-scoreboard-table.less

@@ -184,12 +184,9 @@
     }
 
     &--user-link {
-      .link-inverted();
-      .link-hover({
-        text-decoration: underline;
-      });
-
       position: absolute;
+      display: flex;
+      gap: 5px;
     }
 
     &--zero {
@@ -221,4 +218,11 @@
       opacity: 1;
     }
   }
+
+  &__user-link {
+    .link-inverted();
+    .link-hover({
+      text-decoration: underline;
+    });
+  }
 }

resources/css/bem/flag-team.less

@@ -0,0 +1,10 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.flag-team {
+  height: 1em;
+  width: 2em;
+  display: inline-block;
+  background-size: contain;
+  border-radius: min(0.25em, @border-radius-large);
+}

resources/css/bem/profile-info.less

@@ -123,7 +123,7 @@
 
   &__flags {
     display: flex;
-    gap: 5px;
+    gap: 10px;
     margin-top: 10px;
     font-size: 15px; // icon size
 

resources/css/bem/ranking-page-table.less

@@ -105,6 +105,12 @@
     margin-left: 10px;
   }
 
+  &__flags {
+    display: inline-flex;
+    gap: 10px;
+    font-size: @flag-size-medium; // icon size
+  }
+
   &__user-link {
     display: flex;
     align-items: center;

resources/js/beatmapsets-show/scoreboard/table-row.tsx

@@ -2,10 +2,12 @@
 // See the LICENCE file in the repository root for full licence text.
 
 import FlagCountry from 'components/flag-country';
+import FlagTeam from 'components/flag-team';
 import Mod from 'components/mod';
 import { PlayDetailMenu } from 'components/play-detail-menu';
 import ScoreValue from 'components/score-value';
 import ScoreboardTime from 'components/scoreboard-time';
+import UserLink from 'components/user-link';
 import BeatmapJson from 'interfaces/beatmap-json';
 import { SoloScoreJsonForBeatmap } from 'interfaces/solo-score-json';
 import { route } from 'laroute';
@@ -113,14 +115,18 @@ export default class ScoreboardTableRow extends React.Component<Props> {
           </TdLink>
         ) : (
           <td className={`${bn}__cell u-relative`}>
-            <a
-              className={`${bn}__cell-content ${bn}__cell-content--user-link js-usercard`}
-              data-user-id={score.user.id}
-              href={route('users.show', { mode: this.props.beatmap.mode, user: score.user.id })}
-            >
-              {score.user.username}
-            </a>
-
+            <span className={`${classWithModifiers(`${bn}__cell-content`, 'user-link')}`}>
+              {score.user.team != null &&
+                <a className='u-contents' href={route('teams.show', { id: score.user.team.id })}>
+                  <FlagTeam team={score.user.team} />
+                </a>
+              }
+              <UserLink
+                className={`${bn}__user-link`}
+                mode={this.props.beatmap.mode}
+                user={score.user}
+              />
+            </span>
             <a className={`${bn}__cell-content`} href={this.scoreUrl} />
           </td>
         )}

resources/js/beatmapsets-show/scoreboard/top-card.tsx

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 import FlagCountry from 'components/flag-country';
+import FlagTeam from 'components/flag-team';
 import Mod from 'components/mod';
 import ScorePin from 'components/score-pin';
 import ScoreValue from 'components/score-value';
@@ -94,6 +95,15 @@ export default class TopCard extends React.PureComponent<Props> {
                     modifiers='flat'
                   />
                 </a>
+
+                {this.props.score.user.team != null &&
+                  <a
+                    className='u-hover'
+                    href={route('teams.show', { team: this.props.score.user.team.id })}
+                  >
+                    <FlagTeam team={this.props.score.user.team} />
+                  </a>
+                }
               </div>
             </div>
           </div>

resources/js/components/flag-team.tsx

@@ -0,0 +1,15 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import TeamJson from 'interfaces/team-json';
+import * as React from 'react';
+
+export default function FlagTeam({ team }: { team: TeamJson }) {
+  return (
+    <span
+      className='flag-team'
+      style={{ backgroundImage: `url('${team.logo}')` }}
+      title={team.name}
+    />
+  );
+}

resources/js/components/user-card.tsx

@@ -14,6 +14,7 @@ import { trans } from 'utils/lang';
 import { present } from 'utils/string';
 import { giftSupporterTagUrl } from 'utils/url';
 import FlagCountry from './flag-country';
+import FlagTeam from './flag-team';
 import FollowUserMappingButton from './follow-user-mapping-button';
 import { PopupMenuPersistent } from './popup-menu-persistent';
 import { ReportReportable } from './report-reportable';
@@ -226,6 +227,15 @@ export class UserCard extends React.PureComponent<Props, State> {
           <FlagCountry country={this.user.country} />
         </a>
 
+        {this.user.team != null && (
+          <a
+            className='user-card__icon user-card__icon--flag'
+            href={route('teams.show', { team: this.user.team.id })}
+          >
+            <FlagTeam team={this.user.team} />
+          </a>
+        )}
+
         {this.props.mode === 'card' && (
           <>
             {this.user.is_supporter && (

resources/js/interfaces/team-json.ts

@@ -0,0 +1,9 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+export default interface TeamJson {
+  id: number;
+  logo: string | null;
+  name: string;
+  short_name: string;
+}

resources/js/interfaces/user-json.ts

@@ -6,6 +6,7 @@ import DailyChallengeUserStatsJson from './daily-challenge-user-stats-json';
 import ProfileBannerJson from './profile-banner';
 import RankHighestJson from './rank-highest-json';
 import RankHistoryJson from './rank-history-json';
+import TeamJson from './team-json';
 import UserAccountHistoryJson from './user-account-history-json';
 import UserAchievementJson from './user-achievement-json';
 import UserBadgeJson from './user-badge-json';
@@ -66,6 +67,7 @@ interface UserJsonAvailableIncludes {
   statistics: UserStatisticsJson;
   statistics_rulesets: UserStatisticsRulesetsJson;
   support_level: number;
+  team: TeamJson;
   unread_pm_count: number;
   user_achievements: UserAchievementJson[];
   user_preferences: UserPreferencesJson;