Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-04-25 15:56:19 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix strikethrough only applying to player name, not pronouns (#2705)

Browse Source
This commit is contained in:
Kalle 2026-01-07 21:53:15 +02:00 committed by GitHub
parent beeca43d18
commit f3e1ff61c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/features/tournament-bracket/components/MatchRosters.tsx
View File

@ -5,8 +5,9 @@ import { useTournament } from "~/features/tournament/routes/to.$id";
import { tournamentTeamPage, userPage } from "~/utils/urls";
import type { TournamentMatchLoaderData } from "../loaders/to.$id.matches.$mid.server";
const INACTIVE_PLAYER_CSS =
"tournament__team-with-roster__member__inactive text-lighter-important";
const INACTIVE_PLAYER_LINK_CSS = "text-lighter-important";
const INACTIVE_PLAYER_NAME_CSS =
"tournament__team-with-roster__member__inactive";
export function MatchRosters({
teams,
}: {
@ -72,21 +73,28 @@ export function MatchRosters({
{teamOnePlayers.length > 0 ? (
<ul className="stack xs mt-2">
{teamOnePlayers.map((p) => {
const isInactive =
teamOneParticipatedPlayers.length > 0 &&
teamOneParticipatedPlayers.every(
(participatedPlayer) => p.id !== participatedPlayer.id,
);
return (
<li key={p.id}>
<Link
to={userPage(p)}
className={clsx("stack horizontal sm items-center", {
[INACTIVE_PLAYER_CSS]:
teamOneParticipatedPlayers.length > 0 &&
teamOneParticipatedPlayers.every(
(participatedPlayer) =>
p.id !== participatedPlayer.id,
),
[INACTIVE_PLAYER_LINK_CSS]: isInactive,
})}
>
<Avatar user={p} size="xxs" />
{p.username}
<span
className={clsx({
[INACTIVE_PLAYER_NAME_CSS]: isInactive,
})}
>
{p.username}
</span>
{p.pronouns ? (
<span className="text-lighter ml-1 text-xxxs">
{p.pronouns.subject}/{p.pronouns.object}
@ -131,21 +139,28 @@ export function MatchRosters({
{teamTwoPlayers.length > 0 ? (
<ul className="stack xs mt-2">
{teamTwoPlayers.map((p) => {
const isInactive =
teamTwoParticipatedPlayers.length > 0 &&
teamTwoParticipatedPlayers.every(
(participatedPlayer) => p.id !== participatedPlayer.id,
);
return (
<li key={p.id}>
<Link
to={userPage(p)}
className={clsx("stack horizontal sm items-center", {
[INACTIVE_PLAYER_CSS]:
teamTwoParticipatedPlayers.length > 0 &&
teamTwoParticipatedPlayers.every(
(participatedPlayer) =>
p.id !== participatedPlayer.id,
),
[INACTIVE_PLAYER_LINK_CSS]: isInactive,
})}
>
<Avatar user={p} size="xxs" />
{p.username}
<span
className={clsx({
[INACTIVE_PLAYER_NAME_CSS]: isInactive,
})}
>
{p.username}
</span>
{p.pronouns ? (
<span className="text-lighter ml-1 text-xxxs">
{p.pronouns.subject}/{p.pronouns.object}