-
- {hasUserLinked(placementUser) ? ( - {data.names.primary} - ) : ( - data.names.primary - )}{" "} - {t("common:xsearch.placements")} -
- {data.names.aliases.length > 0 ? ( -
- {t("common:xsearch.aliases")} {data.names.aliases.join(", ")}
-
- ) : null}
+
+
+ {!hasUserLinked(placementUser) ? + {hasUserLinked(placementUser) ? ( + {data.names.primary} + ) : ( + data.names.primary + )}{" "} + {t("common:xsearch.placements")} +
+ {data.names.aliases.length > 0 ? ( +
+ {t("common:xsearch.aliases")} {data.names.aliases.join(", ")}
+
+ ) : null}
+
-
+
+
+
+ {member.username}
+
+
{member.pronouns ? (
{member.pronouns.subject}/{member.pronouns.object}
diff --git a/app/features/tournament-lfg/loaders/to.$id.looking.server.ts b/app/features/tournament-lfg/loaders/to.$id.looking.server.ts
index 091246234..641acd0ae 100644
--- a/app/features/tournament-lfg/loaders/to.$id.looking.server.ts
+++ b/app/features/tournament-lfg/loaders/to.$id.looking.server.ts
@@ -1,7 +1,9 @@
import type { LoaderFunctionArgs } from "react-router";
+import * as R from "remeda";
import type { Pronouns } from "~/db/tables";
import { getUser } from "~/features/auth/core/user.server";
import { tournamentFromDBCached } from "~/features/tournament-bracket/core/Tournament.server";
+import * as UserCardRepository from "~/features/user-card/UserCardRepository.server";
import type { MainWeaponId } from "~/modules/in-game-lists/types";
import type { SerializeFrom } from "~/utils/remix";
import { parseParams } from "~/utils/remix.server";
@@ -83,8 +85,16 @@ async function lookingMode({
ownGroup,
});
+ const cardUserIds = R.unique([
+ ...groups.flatMap((group) => group.members.map((member) => member.id)),
+ ...(ownTeam?.members ?? []).map((member) => member.id),
+ ]);
+
return {
mode: "looking" as const,
+ ...(await UserCardRepository.userCards({
+ userIds: cardUserIds,
+ })),
groups: otherGroups,
ownGroup,
ownTeam,
@@ -130,6 +140,9 @@ async function subsMode({
return {
mode: "subs" as const,
+ ...(await UserCardRepository.userCards({
+ userIds: subs.map((sub) => sub.userId),
+ })),
subs,
hasOwnSubPost: subs.some((sub) => sub.userId === user?.id),
tournamentId,
diff --git a/app/features/tournament-lfg/routes/to.$id.looking.tsx b/app/features/tournament-lfg/routes/to.$id.looking.tsx
index 8791a61a0..aea6d7d9f 100644
--- a/app/features/tournament-lfg/routes/to.$id.looking.tsx
+++ b/app/features/tournament-lfg/routes/to.$id.looking.tsx
@@ -3,7 +3,7 @@ import { Mic, Trash } from "lucide-react";
import * as React from "react";
import { Flipper } from "react-flip-toolkit";
import { useTranslation } from "react-i18next";
-import { Link, useFetcher, useLoaderData } from "react-router";
+import { useFetcher, useLoaderData } from "react-router";
import { Avatar } from "~/components/Avatar";
import { SendouButton } from "~/components/elements/Button";
import { SendouDialog } from "~/components/elements/Dialog";
@@ -16,16 +16,20 @@ import {
} from "~/components/elements/Tabs";
import { FormWithConfirm } from "~/components/FormWithConfirm";
import { WeaponImage } from "~/components/Image";
+import { NoteAvatar } from "~/components/NoteAvatar";
import { Placeholder } from "~/components/Placeholder";
import { SubmitButton } from "~/components/SubmitButton";
import { useUser } from "~/features/auth/core/user";
import { IS_Q_LOOKING_MOBILE_BREAKPOINT } from "~/features/sendouq/q-constants";
import { useTournament } from "~/features/tournament/routes/to.$id";
+import {
+ UserCard,
+ useUserCardData,
+} from "~/features/user-card/components/UserCard";
import { SendouForm } from "~/form/SendouForm";
import { useHydrated } from "~/hooks/useHydrated";
import { useMainContentWidth } from "~/hooks/useMainContentWidth";
import type { SendouRouteHandle } from "~/utils/remix.server";
-import { userPage } from "~/utils/urls";
import { LFGGroupCard } from "../components/LFGGroupCard";
import {
type LookingLoaderData,
@@ -43,7 +47,7 @@ export { loader };
import styles from "./to.$id.looking.module.css";
export const handle: SendouRouteHandle = {
- i18n: ["q", "tournament", "forms", "common"],
+ i18n: ["q", "tournament", "forms", "common", "user"],
};
export default function TournamentLFGShell() {
@@ -285,6 +289,7 @@ function SubCard({ sub }: { sub: SubEntry }) {
const { t } = useTranslation(["common", "tournament"]);
const user = useUser();
const tournament = useTournament();
+ const cardData = useUserCardData(sub.userId);
const infos = [
@@ -322,10 +327,18 @@ function SubCard({ sub }: { sub: SubEntry }) {
return (
-
+
+
+
+
+
+
+
+ {sub.username}
+
+
{infos}
{sub.weapons ? (
diff --git a/app/features/tournament-match/loaders/to.$id.matches.$mid.server.ts b/app/features/tournament-match/loaders/to.$id.matches.$mid.server.ts
index 8f11b732e..c94ae4db0 100644
--- a/app/features/tournament-match/loaders/to.$id.matches.$mid.server.ts
+++ b/app/features/tournament-match/loaders/to.$id.matches.$mid.server.ts
@@ -11,6 +11,7 @@ import * as PickBan from "~/features/tournament-bracket/core/PickBan";
import { tournamentFromDBCached } from "~/features/tournament-bracket/core/Tournament.server";
import { matchPageParamsSchema } from "~/features/tournament-bracket/tournament-bracket-schemas.server";
import { tournamentTeamToActiveRosterUserIds } from "~/features/tournament-bracket/tournament-bracket-utils";
+import * as UserCardRepository from "~/features/user-card/UserCardRepository.server";
import * as UserRepository from "~/features/user-page/UserRepository.server";
import { Status } from "~/modules/brackets-model";
import { cache, IN_MILLISECONDS, ttl } from "~/utils/cache.server";
@@ -218,6 +219,12 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
!isLeagueRoundLocked(tournament, match.roundId);
return {
+ ...(await UserCardRepository.userCards({
+ userIds: match.players.map((p) => p.id),
+ include: {
+ friendCode: isParticipant || isSiteStaff || isTournamentStaff,
+ },
+ })),
match: hasPermsToSeeChat ? match : { ...match, chatCode: undefined },
results,
reportedWeapons,
diff --git a/app/features/tournament-match/routes/to.$id.matches.$mid.tsx b/app/features/tournament-match/routes/to.$id.matches.$mid.tsx
index 92329cb78..b3ade903b 100644
--- a/app/features/tournament-match/routes/to.$id.matches.$mid.tsx
+++ b/app/features/tournament-match/routes/to.$id.matches.$mid.tsx
@@ -15,7 +15,7 @@ import { tournamentMatchWebsocketRoom } from "../tournament-match-utils";
export { action, loader };
export const handle: SendouRouteHandle = {
- i18n: ["q"],
+ i18n: ["q", "user"],
};
export default function TournamentMatchPage() {
diff --git a/app/features/tournament/TournamentRepository.server.ts b/app/features/tournament/TournamentRepository.server.ts
index de27605bf..4f01164f8 100644
--- a/app/features/tournament/TournamentRepository.server.ts
+++ b/app/features/tournament/TournamentRepository.server.ts
@@ -421,6 +421,39 @@ export async function findChildTournaments(parentTournamentId: number) {
}));
}
+/** Child division tournaments of a league sign-up, with their name and finalized status. */
+export function findChildTournamentsForDivCalc(parentTournamentId: number) {
+ return db
+ .selectFrom("Tournament")
+ .innerJoin("CalendarEvent", "Tournament.id", "CalendarEvent.tournamentId")
+ .select([
+ "Tournament.id as tournamentId",
+ "CalendarEvent.name",
+ "Tournament.isFinalized",
+ ])
+ .where("Tournament.parentTournamentId", "=", parentTournamentId)
+ .execute();
+}
+
+/**
+ * User ids eligible for a LUTI division placement in the given tournament: they have a result, were
+ * on a team that did not drop out, and played at least one match.
+ */
+export function findLeagueDivParticipantUserIds(tournamentId: number) {
+ return db
+ .selectFrom("TournamentResult")
+ .innerJoin(
+ "TournamentTeam",
+ "TournamentTeam.id",
+ "TournamentResult.tournamentTeamId",
+ )
+ .select("TournamentResult.userId")
+ .distinct()
+ .where("TournamentResult.tournamentId", "=", tournamentId)
+ .where("TournamentTeam.droppedOut", "=", 0)
+ .execute();
+}
+
export async function findTOSetMapPoolById(tournamentId: number) {
return (
await db
diff --git a/app/features/user-card/UserCardRepository.server.test.ts b/app/features/user-card/UserCardRepository.server.test.ts
new file mode 100644
index 000000000..4e34aafea
--- /dev/null
+++ b/app/features/user-card/UserCardRepository.server.test.ts
@@ -0,0 +1,161 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { db } from "~/db/sql";
+import { dbInsertUsers, dbReset, withNoUser, withUserId } from "~/utils/Test";
+import * as UserCardRepository from "./UserCardRepository.server";
+
+describe("UserCardRepository.userCards", () => {
+ beforeEach(async () => {
+ await dbInsertUsers(2);
+ });
+
+ afterEach(() => {
+ dbReset();
+ });
+
+ it("returns an empty map when given no user ids", async () => {
+ const { userCards } = await withNoUser(() =>
+ UserCardRepository.userCards({
+ userIds: [],
+ }),
+ );
+
+ expect(userCards.size).toBe(0);
+ });
+
+ it("keys cards by user id and builds the stats array from db fields", async () => {
+ await db
+ .updateTable("User")
+ .set({
+ div: "1",
+ unverifiedPeakXP: JSON.stringify({
+ overall: 3000,
+ takoroka: 3000,
+ tentatek: null,
+ }),
+ })
+ .where("id", "=", 1)
+ .execute();
+ await db.insertInto("PlusTier").values({ userId: 1, tier: 2 }).execute();
+
+ const { userCards } = await withNoUser(() =>
+ UserCardRepository.userCards({
+ userIds: [1, 2],
+ }),
+ );
+
+ expect(userCards.size).toBe(2);
+
+ const card = userCards.get(1);
+ expect(card?.id).toBe(1);
+ expect(card?.freeAgentPostId).toBeNull();
+
+ const statTypes = card?.stats.map((stat) => stat.type) ?? [];
+ expect(statTypes).toContain("XP");
+ expect(statTypes).toContain("DIV");
+ expect(statTypes).toContain("PLUS");
+
+ expect(card?.stats.find((stat) => stat.type === "XP")).toMatchObject({
+ type: "XP",
+ values: [{ isVerified: false, region: "JPN", points: 3000 }],
+ });
+ expect(card?.stats.find((stat) => stat.type === "DIV")).toMatchObject({
+ type: "DIV",
+ value: "1",
+ });
+ expect(card?.stats.find((stat) => stat.type === "PLUS")).toMatchObject({
+ type: "PLUS",
+ value: 2,
+ });
+
+ // user 2 has none of the optional fields -> no stats
+ expect(userCards.get(2)?.stats).toHaveLength(0);
+ });
+
+ it("persists edited card fields and surfaces hidden stats", async () => {
+ await db.insertInto("PlusTier").values({ userId: 1, tier: 2 }).execute();
+
+ await withUserId(1, () =>
+ UserCardRepository.updateOwnCard({
+ shortBio: "hello",
+ bannerPresetImg: "#ff4655",
+ bannerImgId: null,
+ unverifiedPeakXP: { overall: 2500, takoroka: null, tentatek: 2500 },
+ hiddenCardStats: ["XP"],
+ }),
+ );
+
+ const { userCards } = await withUserId(1, () =>
+ UserCardRepository.userCards({
+ userIds: [1],
+ }),
+ );
+ const card = userCards.get(1);
+
+ expect(card?.shortBio).toBe("hello");
+ expect(card?.banner).toMatchObject({ type: "COLOR", hexCode: "#ff4655" });
+ // the hidden stat is filtered out of `stats` at query time
+ expect(card?.stats.find((stat) => stat.type === "XP")).toBeUndefined();
+ expect(card?.stats.find((stat) => stat.type === "PLUS")).toMatchObject({
+ type: "PLUS",
+ value: 2,
+ });
+
+ const extras = await UserCardRepository.cardEditExtras(1);
+ expect(extras.hiddenCardStats).toEqual(["XP"]);
+ });
+
+ it("keeps hidden stats in `stats` when includeHiddenStats is set", async () => {
+ await db.insertInto("PlusTier").values({ userId: 1, tier: 2 }).execute();
+
+ await withUserId(1, () =>
+ UserCardRepository.updateOwnCard({
+ shortBio: null,
+ bannerPresetImg: null,
+ bannerImgId: null,
+ unverifiedPeakXP: { overall: 2500, takoroka: null, tentatek: 2500 },
+ hiddenCardStats: ["XP"],
+ }),
+ );
+
+ const { userCards } = await withUserId(1, () =>
+ UserCardRepository.userCards({
+ userIds: [1],
+ includeHiddenStats: true,
+ }),
+ );
+ const card = userCards.get(1);
+
+ expect(card?.stats.find((stat) => stat.type === "XP")).toMatchObject({
+ type: "XP",
+ values: [{ isVerified: false, region: "WEST", points: 2500 }],
+ });
+ });
+
+ it("produces a URL banner when an uploaded banner image is set", async () => {
+ const image = await db
+ .insertInto("UnvalidatedUserSubmittedImage")
+ .values({ url: "banner.webp", submitterUserId: 1, validatedAt: 1 })
+ .returning("id")
+ .executeTakeFirstOrThrow();
+
+ await withUserId(1, () =>
+ UserCardRepository.updateOwnCard({
+ shortBio: null,
+ bannerPresetImg: null,
+ bannerImgId: image.id,
+ unverifiedPeakXP: null,
+ hiddenCardStats: [],
+ }),
+ );
+
+ const { userCards } = await withUserId(1, () =>
+ UserCardRepository.userCards({
+ userIds: [1],
+ }),
+ );
+
+ const banner = userCards.get(1)?.banner;
+ expect(banner?.type).toBe("URL");
+ expect(banner).toHaveProperty("url");
+ });
+});
diff --git a/app/features/user-card/UserCardRepository.server.ts b/app/features/user-card/UserCardRepository.server.ts
new file mode 100644
index 000000000..d0b3dde0b
--- /dev/null
+++ b/app/features/user-card/UserCardRepository.server.ts
@@ -0,0 +1,563 @@
+import { sub } from "date-fns";
+import type { Expression, ExpressionBuilder } from "kysely";
+import { sql } from "kysely";
+import { jsonBuildObject, jsonObjectFrom } from "kysely/helpers/sqlite";
+import { db } from "~/db/sql";
+import type {
+ CustomTheme,
+ HideableUserCardStat,
+ PeakXP,
+ Tables,
+ XRankPlacementRegion,
+} from "~/db/tables";
+import { actorId, actorIdOrNull } from "~/features/auth/core/user.server";
+import { cachedFullUserLeaderboard } from "~/features/leaderboards/core/leaderboards.server";
+import { LFG } from "~/features/lfg/lfg-constants";
+import * as Seasons from "~/features/mmr/core/Seasons";
+import { TIERS } from "~/features/mmr/mmr-constants";
+import type { TieredSkill } from "~/features/mmr/tiered.server";
+import { userSkills } from "~/features/mmr/tiered.server";
+import type { StageId } from "~/modules/in-game-lists/types";
+import { dateToDatabaseTimestamp } from "~/utils/dates";
+import {
+ commonUserObjectFields,
+ concatUserSubmittedImagePrefix,
+} from "~/utils/kysely.server";
+import { PRESET_COLORS } from "../tier-list-maker/tier-list-maker-constants";
+import type {
+ UserCardData,
+ UserCardStat,
+ UserCardStatXPValue,
+} from "./user-card-types";
+
+/**
+ * Loads `UserCardData` for many users at once, keyed by user id. The single batched DB query (see
+ * {@link userCardDataJsonObject}) is merged with the in-memory SEASON caches (tier from
+ * `userSkills`, leaderboard placement from `cachedFullUserLeaderboard`) in this app-layer enrich
+ * pass, producing the fully-formed `stats` array each card renders. The acting user viewing the
+ * cards (resolved from request context via `actorIdOrNull()`, or `null` when anonymous) scopes the
+ * per-viewer `privateNote`.
+ *
+ * Designed to be spread into a route loader (`{ ...(await userCards(...)) }`) so the `UserCard`
+ * component can resolve its own data from the route tree by id.
+ */
+export async function userCards({
+ userIds,
+ include,
+ includeHiddenStats = false,
+}: {
+ userIds: Array;
+ /** Opt-in fields skipped from the query by default; defaults to `false` each. */
+ include?: { friendCode?: boolean };
+ /**
+ * Keep stats the user has hidden in the resolved `stats` array. Off by default so hidden stat
+ * values never reach a viewer; the edit page opts in to render (and un-hide) its own toggles.
+ */
+ includeHiddenStats?: boolean;
+}): Promise<{ userCards: Map }> {
+ if (userIds.length === 0) return { userCards: new Map() };
+
+ const viewerId = actorIdOrNull();
+
+ // a user's card surfaces the better of their last two finished seasons (see bestSeasonResult)
+ const [rows, seasonResults] = await Promise.all([
+ db
+ .selectFrom("User")
+ .select((eb) =>
+ userCardDataJsonObject(eb, { viewerId, include }).as("cardData"),
+ )
+ .where("User.id", "in", userIds)
+ .execute(),
+ Promise.all(
+ Seasons.allFinished()
+ .slice(0, 2)
+ .map((season) => seasonResult(season, userIds)),
+ ),
+ ]);
+
+ const userCards = new Map();
+ for (const { cardData } of rows) {
+ userCards.set(
+ cardData.id,
+ enrichUserCardData(
+ cardData,
+ bestSeasonResult(cardData.id, seasonResults),
+ includeHiddenStats,
+ ),
+ );
+ }
+
+ return { userCards };
+}
+
+/**
+ * Raw card fields the edit form needs that are not part of {@link UserCardData}: the uploaded banner
+ * image (id + preview url, for the image field's default value), the self-reported peak XP, and the
+ * hidden stat types (to pre-check the visibility toggles).
+ */
+export async function cardEditExtras(userId: number) {
+ const row = await db
+ .selectFrom("User")
+ .select((eb) => [
+ "User.bannerImgId",
+ "User.unverifiedPeakXP",
+ "User.hiddenCardStats",
+ bannerImageUrl(eb).as("bannerImageUrl"),
+ ])
+ .where("User.id", "=", userId)
+ .executeTakeFirst();
+
+ return {
+ bannerImgId: row?.bannerImgId ?? null,
+ bannerImageUrl: row?.bannerImageUrl ?? null,
+ unverifiedPeakXP: row?.unverifiedPeakXP ?? null,
+ hiddenCardStats: row?.hiddenCardStats ?? [],
+ };
+}
+
+/** Updates the editable user card fields of the acting user (their own card). */
+export function updateOwnCard(args: {
+ shortBio: string | null;
+ bannerPresetImg: string | null;
+ bannerImgId: number | null;
+ unverifiedPeakXP: PeakXP | null;
+ hiddenCardStats: Array;
+}) {
+ const userId = actorId();
+ return db.transaction().execute(async (trx) => {
+ // a removed or replaced uploaded banner is no longer referenced by anything,
+ // so its submitted image row is cleaned up (mirrors custom avatar handling)
+ const current = await trx
+ .selectFrom("User")
+ .select("User.bannerImgId")
+ .where("id", "=", userId)
+ .executeTakeFirst();
+ if (current?.bannerImgId && current.bannerImgId !== args.bannerImgId) {
+ await trx
+ .deleteFrom("UnvalidatedUserSubmittedImage")
+ .where("id", "=", current.bannerImgId)
+ .where("UnvalidatedUserSubmittedImage.submitterUserId", "=", userId)
+ .execute();
+ }
+
+ await trx
+ .updateTable("User")
+ .set({
+ shortBio: args.shortBio,
+ bannerPresetImg: args.bannerPresetImg,
+ bannerImgId: args.bannerImgId,
+ unverifiedPeakXP: args.unverifiedPeakXP
+ ? JSON.stringify(args.unverifiedPeakXP)
+ : null,
+ hiddenCardStats:
+ args.hiddenCardStats.length > 0
+ ? JSON.stringify(args.hiddenCardStats)
+ : null,
+ })
+ .where("id", "=", userId)
+ .execute();
+ });
+}
+
+/** SQLite `case` expression mapping `User.id % PRESET_COLORS.length` to a preset banner color. */
+const BANNER_PRESET_COLOR_CASE = `case "User"."id" % ${PRESET_COLORS.length}\n${PRESET_COLORS.map(
+ (color, index) => `when ${index} then '${color}'`,
+).join("\n")}\nend`;
+
+/**
+ * Kysely expression building the JSON object for all DB-resident `UserCard` fields of a single user.
+ * Designed to be composed both standalone (one user) and inside a batched list query (see
+ * {@link userCards}). `"User"` must be in scope at the call site.
+ *
+ * SEASON stats (tier + leaderboard placement) are NOT included here — they live in the in-memory
+ * `userSkills`/leaderboard caches and are merged in an app-layer enrich pass. `banner` is returned as
+ * loosely-typed fields (narrow to the discriminated union there). `friendCode` is opt-in via
+ * `include.friendCode` (defaults to off, resolving to `null`) so callers that never surface it skip
+ * the extra correlated subquery.
+ */
+function userCardDataJsonObject(
+ eb: ExpressionBuilder,
+ {
+ viewerId,
+ include,
+ }: {
+ viewerId: number | null;
+ include?: { friendCode?: boolean };
+ },
+) {
+ return jsonBuildObject({
+ ...commonUserObjectFields(eb),
+ shortBio: eb.ref("User.shortBio"),
+ div: eb.ref("User.div"),
+ customTheme: sql`IIF(COALESCE("User"."patronTier", 0) >= 2, "User"."customTheme", null)`,
+ hiddenCardStats: eb.ref("User.hiddenCardStats"),
+ banner: bannerJson(eb),
+ friendCode: include?.friendCode
+ ? friendCodeScalar(eb)
+ : sql`null`,
+ privateNote: privateNoteJson(eb, viewerId),
+ freeAgentPostId: freeAgentPostIdScalar(eb),
+ plusTier: plusTierScalar(eb),
+ xpVerified: xpVerifiedJson(eb),
+ xpUnverified: xpUnverifiedJson(),
+ });
+}
+
+type RawUserCardData =
+ ReturnType extends Expression
+ ? T
+ : never;
+
+/**
+ * Loosely-typed banner. A supporter-uploaded image (`User.bannerImgId`) takes precedence and yields
+ * a `URL` banner; otherwise it is pulled from the `User.bannerPresetImg` column ("hex code or stage
+ * id") where a numeric value is a stage id (`STAGE`) and anything else a `COLOR` hex code. When both
+ * are null (no explicit choice) a preset color is derived from the user id. Narrow to the
+ * `{ URL | COLOR | STAGE }` union in the enrich pass.
+ */
+function bannerJson(eb: ExpressionBuilder) {
+ return jsonBuildObject({
+ type: sql<"URL" | "COLOR" | "STAGE">`
+ case
+ when "User"."bannerImgId" is not null then 'URL'
+ when "User"."bannerPresetImg" GLOB '[0-9]*' then 'STAGE'
+ else 'COLOR'
+ end`,
+ url: bannerImageUrl(eb),
+ hexCode: sql`
+ case
+ when "User"."bannerPresetImg" is null then (${sql.raw(BANNER_PRESET_COLOR_CASE)})
+ when "User"."bannerPresetImg" GLOB '[0-9]*' then null
+ else "User"."bannerPresetImg"
+ end`,
+ stageId: sql<
+ number | null
+ >`iif("User"."bannerPresetImg" GLOB '[0-9]*', CAST("User"."bannerPresetImg" AS INTEGER), null)`,
+ });
+}
+
+/** Full URL of the supporter-uploaded banner image (resolved from `User.bannerImgId`), or null. */
+function bannerImageUrl(eb: ExpressionBuilder) {
+ return concatUserSubmittedImagePrefix(
+ eb
+ .selectFrom("UserSubmittedImage")
+ .select("UserSubmittedImage.url")
+ .whereRef("UserSubmittedImage.id", "=", "User.bannerImgId")
+ .$asScalar(),
+ ).$castTo();
+}
+
+function friendCodeScalar(eb: ExpressionBuilder) {
+ return eb
+ .selectFrom("UserFriendCode")
+ .select("UserFriendCode.friendCode")
+ .whereRef("UserFriendCode.userId", "=", "User.id")
+ .orderBy("UserFriendCode.createdAt", "desc")
+ .limit(1)
+ .$asScalar();
+}
+
+function privateNoteJson(
+ eb: ExpressionBuilder,
+ viewerId: number | null,
+) {
+ if (viewerId === null) {
+ return sql | null>`null`;
+ }
+
+ return jsonObjectFrom(
+ eb
+ .selectFrom("PrivateUserNote")
+ .select([
+ "PrivateUserNote.text",
+ "PrivateUserNote.sentiment",
+ "PrivateUserNote.updatedAt",
+ ])
+ .where("PrivateUserNote.authorId", "=", viewerId)
+ .whereRef("PrivateUserNote.targetId", "=", "User.id"),
+ );
+}
+
+/**
+ * Id of the user's most recent non-expired "looking for team" LFG post, which marks them as a free
+ * agent. `null` when they have no such post. Mirrors the LFG page's freshness cutoff so the id always
+ * points at a post that is still listed there.
+ */
+function freeAgentPostIdScalar(eb: ExpressionBuilder) {
+ return eb
+ .selectFrom("LFGPost")
+ .select("LFGPost.id")
+ .whereRef("LFGPost.authorId", "=", "User.id")
+ .where("LFGPost.type", "=", "PLAYER_FOR_TEAM")
+ .where(
+ "LFGPost.updatedAt",
+ ">",
+ dateToDatabaseTimestamp(
+ sub(new Date(), { days: LFG.POST_FRESHNESS_DAYS }),
+ ),
+ )
+ .orderBy("LFGPost.updatedAt", "desc")
+ .limit(1)
+ .$asScalar();
+}
+
+function plusTierScalar(eb: ExpressionBuilder) {
+ return eb
+ .selectFrom("PlusTier")
+ .select("PlusTier.tier")
+ .whereRef("PlusTier.userId", "=", "User.id")
+ .$asScalar();
+}
+
+/** Single highest X Rank power placement (verified XP). */
+function xpVerifiedJson(eb: ExpressionBuilder) {
+ return jsonObjectFrom(
+ eb
+ .selectFrom("XRankPlacement")
+ .innerJoin(
+ "SplatoonPlayer",
+ "SplatoonPlayer.id",
+ "XRankPlacement.playerId",
+ )
+ .whereRef("SplatoonPlayer.userId", "=", "User.id")
+ .select([
+ sql`"XRankPlacement"."power"`.as("points"),
+ "XRankPlacement.region",
+ ])
+ .orderBy("XRankPlacement.power", "desc")
+ .limit(1),
+ );
+}
+
+/**
+ * Self-reported peak XP from the `User.unverifiedPeakXP` column. Has exactly one of `tentatek` /
+ * `takoroka` defined, which decides the region (`tentatek` = `WEST`, `takoroka` = `JPN`); `points`
+ * is that region's value.
+ */
+function xpUnverifiedJson() {
+ return sql<{ points: number; region: XRankPlacementRegion } | null>`
+ iif(
+ "User"."unverifiedPeakXP" is null,
+ null,
+ json_object(
+ 'points', "User"."unverifiedPeakXP" ->> '$.overall',
+ 'region', iif("User"."unverifiedPeakXP" ->> '$.tentatek' is not null, 'WEST', 'JPN')
+ )
+ )
+ `;
+}
+
+type SeasonResult = {
+ skills: Record;
+ placementsByUserId: Map;
+};
+
+/**
+ * Resolves one finished season's data for the requested users. `userSkills` is a synchronous
+ * in-memory cache, so we read tiers first and only fetch the (DB-backed) leaderboard when at least
+ * one requested user reached Leviathan+ that season—placements are surfaced for that rank only, so
+ * the common case of regular users never touches the leaderboard cache at all.
+ */
+async function seasonResult(
+ season: number,
+ userIds: Array,
+): Promise {
+ const skills = userSkills(season).userSkills;
+
+ const anyLeviathanPlus = userIds.some((id) => {
+ const skill = skills[id];
+ return (
+ skill !== undefined && !skill.approximate && isLeviathanPlus(skill.tier)
+ );
+ });
+
+ const placementsByUserId = anyLeviathanPlus
+ ? await finishedSeasonPlacements(season)
+ : new Map();
+
+ return { skills, placementsByUserId };
+}
+
+const placementsBySeason = new Map>();
+
+/**
+ * Leaderboard placements of a finished season, keyed by user id. Cached for the process lifetime:
+ * a finished season's leaderboard is immutable, matching how `userSkills` already holds finished
+ * seasons' tiers permanently. This keeps cards off `cachedFullUserLeaderboard`'s TTL, whose
+ * synchronous rebuild would otherwise stall the first Leviathan+ card render after a quiet period.
+ */
+async function finishedSeasonPlacements(
+ season: number,
+): Promise> {
+ const cached = placementsBySeason.get(season);
+ if (cached) return cached;
+
+ const placements = new Map(
+ (await cachedFullUserLeaderboard(season)).map((entry) => [
+ entry.id,
+ entry.placementRank,
+ ]),
+ );
+ placementsBySeason.set(season, placements);
+
+ return placements;
+}
+
+const isLeviathanPlus = (tier: TieredSkill["tier"]) =>
+ tier.name === "LEVIATHAN" && tier.isPlus;
+
+/**
+ * Comparable strength of a tier (higher = better). Based on the tier's position in `TIERS` rather
+ * than the raw ordinal, because each season sets its own ordinal thresholds—the same ordinal can
+ * map to different tiers across seasons—so only the tier itself is comparable. `isPlus` (top half of
+ * a tier) breaks ties within the same tier name.
+ */
+const tierStrength = (tier: TieredSkill["tier"]) => {
+ const index = TIERS.findIndex((t) => t.name === tier.name);
+ return (TIERS.length - index) * 2 + (tier.isPlus ? 1 : 0);
+};
+
+/**
+ * Reduces a user's results across the last two finished seasons into the single result their card
+ * shows: the highest tier they reached (ignoring `approximate` tiers, which lack enough matches to
+ * count), and—only when that includes the very top Leviathan+ rank—their best (lowest) leaderboard
+ * placement among the Leviathan+ seasons.
+ */
+function bestSeasonResult(
+ userId: number,
+ seasonResults: Array,
+): { seasonSkill: TieredSkill | undefined; seasonTop: number | null } {
+ let seasonSkill: TieredSkill | undefined;
+ let seasonTop: number | null = null;
+
+ for (const { skills, placementsByUserId } of seasonResults) {
+ const skill = skills[userId];
+ if (!skill || skill.approximate) continue;
+
+ if (
+ !seasonSkill ||
+ tierStrength(skill.tier) > tierStrength(seasonSkill.tier)
+ ) {
+ seasonSkill = skill;
+ }
+
+ if (isLeviathanPlus(skill.tier)) {
+ const placement = placementsByUserId.get(userId);
+ if (
+ typeof placement === "number" &&
+ (seasonTop === null || placement < seasonTop)
+ ) {
+ seasonTop = placement;
+ }
+ }
+ }
+
+ return { seasonSkill, seasonTop };
+}
+
+function enrichUserCardData(
+ cardData: RawUserCardData,
+ {
+ seasonSkill,
+ seasonTop,
+ }: { seasonSkill: TieredSkill | undefined; seasonTop: number | null },
+ includeHiddenStats: boolean,
+): UserCardData {
+ const hiddenStats: Array =
+ cardData.hiddenCardStats ?? [];
+
+ const stats = userCardStats({
+ div: cardData.div,
+ plusTier: cardData.plusTier,
+ xpVerified: cardData.xpVerified,
+ xpUnverified: cardData.xpUnverified,
+ seasonSkill,
+ seasonTop,
+ });
+
+ return {
+ id: cardData.id,
+ username: cardData.username,
+ discordId: cardData.discordId,
+ discordAvatar: cardData.discordAvatar,
+ customUrl: cardData.customUrl,
+ customAvatarUrl: cardData.customAvatarUrl,
+ shortBio: cardData.shortBio,
+ customTheme: cardData.customTheme,
+ banner: enrichBanner(cardData.banner),
+ friendCode: cardData.friendCode,
+ freeAgentPostId: cardData.freeAgentPostId,
+ privateNote: cardData.privateNote,
+ stats: includeHiddenStats
+ ? stats
+ : stats.filter((stat) => !hiddenStats.includes(stat.type)),
+ };
+}
+
+function enrichBanner(
+ banner: RawUserCardData["banner"],
+): UserCardData["banner"] {
+ if (banner.type === "URL" && banner.url) {
+ return { type: "URL", url: banner.url };
+ }
+
+ if (banner.type === "STAGE") {
+ return { type: "STAGE", stageId: banner.stageId as StageId };
+ }
+
+ return { type: "COLOR", hexCode: banner.hexCode ?? "" };
+}
+
+function userCardStats({
+ div,
+ plusTier,
+ xpVerified,
+ xpUnverified,
+ seasonSkill,
+ seasonTop,
+}: {
+ div: string | null;
+ plusTier: number | null;
+ xpVerified: { points: number; region: XRankPlacementRegion } | null;
+ xpUnverified: { points: number; region: XRankPlacementRegion } | null;
+ seasonSkill: TieredSkill | undefined;
+ seasonTop: number | null;
+}): Array {
+ const stats: Array = [];
+
+ const xpValues: Array = [];
+ if (xpUnverified) {
+ xpValues.push({
+ isVerified: false,
+ region: xpUnverified.region,
+ points: xpUnverified.points,
+ });
+ }
+ if (xpVerified) {
+ xpValues.push({
+ isVerified: true,
+ region: xpVerified.region,
+ points: xpVerified.points,
+ });
+ }
+ if (xpValues.length > 0) {
+ stats.push({ type: "XP", values: xpValues });
+ }
+
+ if (seasonSkill && !seasonSkill.approximate) {
+ stats.push({ type: "SEASON", value: seasonSkill.tier, top: seasonTop });
+ }
+
+ if (typeof plusTier === "number") {
+ stats.push({ type: "PLUS", value: plusTier });
+ }
+
+ if (div) {
+ stats.push({ type: "DIV", value: div });
+ }
+
+ return stats;
+}
diff --git a/app/features/user-card/actions/user-card.edit.server.ts b/app/features/user-card/actions/user-card.edit.server.ts
new file mode 100644
index 000000000..3533a74fd
--- /dev/null
+++ b/app/features/user-card/actions/user-card.edit.server.ts
@@ -0,0 +1,108 @@
+import { type ActionFunction, redirect } from "react-router";
+import type { HideableUserCardStat } from "~/db/tables";
+import { requireUser } from "~/features/auth/core/user.server";
+import * as XRankPlacementRepository from "~/features/top-search/XRankPlacementRepository.server";
+import { parseFormDataWithImages } from "~/form/parse.server";
+import { userPage } from "~/utils/urls";
+import * as UserCardRepository from "../UserCardRepository.server";
+import { updateUserCardSchema } from "../user-card-schemas";
+import { maxUnverifiedXp } from "../user-card-utils";
+
+export const action: ActionFunction = async ({ request }) => {
+ const user = requireUser();
+
+ const returnTo = safeReturnTo(
+ new URL(request.url).searchParams.get("returnTo"),
+ );
+
+ const result = await parseFormDataWithImages({
+ request,
+ schema: updateUserCardSchema,
+ });
+
+ if (!result.success) {
+ return { fieldErrors: result.fieldErrors };
+ }
+
+ const data = result.data;
+
+ if (data.unverifiedXpPoints) {
+ const hasLinkedPlayer =
+ await XRankPlacementRepository.isPlayerLinkedByUserId(user.id);
+ const max = maxUnverifiedXp({
+ division: data.unverifiedXpDivision,
+ hasLinkedPlayer,
+ });
+ if (data.unverifiedXpPoints > max) {
+ return {
+ fieldErrors: { unverifiedXpPoints: "forms:errors.unverifiedXpTooHigh" },
+ };
+ }
+ }
+
+ const isSupporter = Boolean(user.roles?.includes("SUPPORTER"));
+
+ await UserCardRepository.updateOwnCard({
+ shortBio: data.shortBio || null,
+ ...resolveBanner({ ...data, isSupporter }),
+ unverifiedPeakXP: data.unverifiedXpPoints
+ ? {
+ overall: data.unverifiedXpPoints,
+ tentatek:
+ data.unverifiedXpDivision === "WEST"
+ ? data.unverifiedXpPoints
+ : null,
+ takoroka:
+ data.unverifiedXpDivision === "JPN"
+ ? data.unverifiedXpPoints
+ : null,
+ }
+ : null,
+ hiddenCardStats: resolveHiddenStats(data),
+ });
+
+ throw redirect(returnTo ?? userPage(user));
+};
+
+function safeReturnTo(value: string | null) {
+ if (!value) return null;
+ if (!value.startsWith("/") || value.startsWith("//")) return null;
+
+ return value;
+}
+
+function resolveBanner({
+ bannerType,
+ bannerColor,
+ bannerStageId,
+ bannerImage,
+ isSupporter,
+}: {
+ bannerType: "COLOR" | "STAGE" | "URL";
+ bannerColor: string;
+ bannerStageId: number;
+ bannerImage: number | null;
+ isSupporter: boolean;
+}): { bannerPresetImg: string | null; bannerImgId: number | null } {
+ switch (bannerType) {
+ case "STAGE":
+ return { bannerPresetImg: String(bannerStageId), bannerImgId: null };
+ case "URL":
+ return {
+ bannerPresetImg: null,
+ bannerImgId: isSupporter ? bannerImage : null,
+ };
+ default:
+ return { bannerPresetImg: bannerColor, bannerImgId: null };
+ }
+}
+
+function resolveHiddenStats(data: {
+ hideXp: boolean;
+ hideDiv: boolean;
+}): Array {
+ return [
+ data.hideXp ? ("XP" as const) : null,
+ data.hideDiv ? ("DIV" as const) : null,
+ ].filter((stat) => stat !== null);
+}
diff --git a/app/features/sendouq-match/components/AddPrivateNoteDialog.tsx b/app/features/user-card/components/AddPrivateNoteDialog.tsx
similarity index 66%
rename from app/features/sendouq-match/components/AddPrivateNoteDialog.tsx
rename to app/features/user-card/components/AddPrivateNoteDialog.tsx
index e2d5a9462..0eef1a194 100644
--- a/app/features/sendouq-match/components/AddPrivateNoteDialog.tsx
+++ b/app/features/user-card/components/AddPrivateNoteDialog.tsx
@@ -6,37 +6,57 @@ import { FormMessage } from "~/components/FormMessage";
import { Label } from "~/components/Label";
import { SubmitButton } from "~/components/SubmitButton";
import type { Tables } from "~/db/tables";
-import type { SQMatchGroup } from "~/features/sendouq/core/SendouQ.server";
import { SENDOUQ } from "~/features/sendouq/q-constants";
-import { preferenceEmojiUrl } from "~/utils/urls";
+import { preferenceEmojiUrl, userCardNotePage } from "~/utils/urls";
+type PrivateNote = Pick;
+
+/**
+ * Modal for adding/editing the viewer's private note about a user, posting to the
+ * `/user-card/:id/note` resource route. Closes once the fetcher settles (save succeeds →
+ * automatic revalidation refreshes the card). Clearing the text with a neutral sentiment and saving
+ * deletes the note (handled by the route). Rendered wherever a `UserCard` lives.
+ */
export function AddPrivateNoteDialog({
- aboutUser,
- close,
+ userId,
+ username,
+ note,
+ onClose,
}: {
- aboutUser?: Pick<
- SQMatchGroup["members"][number],
- "id" | "username" | "privateNote"
- >;
- close: () => void;
+ userId: number;
+ username: string;
+ note: PrivateNote | null;
+ onClose: () => void;
}) {
const { t } = useTranslation(["q", "common"]);
const fetcher = useFetcher();
- if (!aboutUser) return null;
+ const wasSubmittingRef = React.useRef(false);
+ React.useEffect(() => {
+ if (fetcher.state !== "idle") {
+ wasSubmittingRef.current = true;
+ } else if (wasSubmittingRef.current) {
+ wasSubmittingRef.current = false;
+ if ((fetcher.data as { ok?: boolean } | undefined)?.ok) {
+ onClose();
+ }
+ }
+ }, [fetcher.state, fetcher.data, onClose]);
return (
-
-
-
-
+
+
-
+
{t("common:actions.save")}
@@ -105,9 +125,9 @@ function Textarea({ initialValue }: { initialValue?: string | null }) {
const [value, setValue] = React.useState(initialValue ?? "");
return (
-
+