redesign h2h player picker: single slot + Me quick-select

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WgPX3S4EZ8sL7d9KEhGjBk

src/features/players/components/league-head-to-head.tsx

@@ -1,8 +1,9 @@
-import { Stack, Text, TextInput, Box, Paper, Group, Divider, Center, ActionIcon, Badge } from "@mantine/core";
+import { Stack, Text, TextInput, Box, Paper, Group, Divider, ActionIcon, Button } from "@mantine/core";
 import { useState, useMemo } from "react";
-import { MagnifyingGlassIcon, XIcon, ArrowRightIcon } from "@phosphor-icons/react";
+import { MagnifyingGlassIcon, XIcon, ArrowRightIcon, PlusIcon } from "@phosphor-icons/react";
 import { Trans, useLingui } from "@lingui/react/macro";
 import { useAllPlayerStats } from "../queries";
+import { useAuth } from "@/contexts/auth-context";
 import { useSheet } from "@/hooks/use-sheet";
 import Sheet from "@/components/sheet/sheet";
 import PlayerHeadToHeadSheet from "./player-head-to-head-sheet";
@@ -10,16 +11,24 @@ import PlayerAvatar from "@/components/player-avatar";
 
 const LeagueHeadToHead = () => {
   const { t } = useLingui();
+  const { user } = useAuth();
   const [player1Id, setPlayer1Id] = useState<string | null>(null);
   const [player2Id, setPlayer2Id] = useState<string | null>(null);
   const [search, setSearch] = useState("");
   const { data: allPlayerStats } = useAllPlayerStats();
   const h2hSheet = useSheet();
 
+  const myName = useMemo(() => {
+    if (!user) return "";
+    const fromStats = allPlayerStats?.find((p) => p.player_id === user.id)?.player_name;
+    return fromStats || [user.first_name, user.last_name].filter(Boolean).join(" ");
+  }, [user, allPlayerStats]);
+
   const player1Name = useMemo(() => {
-    if (!player1Id || !allPlayerStats) return "";
-    return allPlayerStats.find((p) => p.player_id === player1Id)?.player_name || "";
-  }, [player1Id, allPlayerStats]);
+    if (!player1Id) return "";
+    if (user && player1Id === user.id) return myName;
+    return allPlayerStats?.find((p) => p.player_id === player1Id)?.player_name || "";
+  }, [player1Id, allPlayerStats, user, myName]);
 
   const player2Name = useMemo(() => {
     if (!player2Id || !allPlayerStats) return "";
@@ -30,21 +39,17 @@ const LeagueHeadToHead = () => {
     if (!allPlayerStats) return [];
 
     return allPlayerStats
-      .filter((stat) => {
-        if (player1Id && stat.player_id === player1Id) return false;
-        if (player2Id && stat.player_id === player2Id) return false;
-        return true;
-      })
+      .filter((stat) => stat.player_id !== player1Id)
       .filter((stat) =>
         stat.player_name.toLowerCase().includes(search.toLowerCase())
       )
       .sort((a, b) => b.matches - a.matches);
-  }, [allPlayerStats, player1Id, player2Id, search]);
+  }, [allPlayerStats, player1Id, search]);
 
   const handlePlayerClick = (playerId: string) => {
     if (!player1Id) {
       setPlayer1Id(playerId);
-    } else if (!player2Id) {
+    } else {
       setPlayer2Id(playerId);
       h2hSheet.open();
     }
@@ -52,160 +57,73 @@ const LeagueHeadToHead = () => {
 
   const handleClearPlayer1 = () => {
     setPlayer1Id(null);
-    if (player2Id) {
-      setPlayer1Id(player2Id);
-      setPlayer2Id(null);
-    }
-  };
-
-  const handleClearPlayer2 = () => {
     setPlayer2Id(null);
   };
 
-  const activeStep = !player1Id ? 1 : !player2Id ? 2 : 0;
-
   return (
     <>
       <Stack gap="md">
-        <Paper px="md" pt="md" pb="sm" withBorder shadow="sm">
-          <Stack gap="xs">
-            <Group gap="xs" wrap="nowrap">
-              <Paper
-                p="sm"
-                withBorder
-                style={{
-                  flex: 1,
-                  minHeight: 70,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  position: "relative",
-                  borderWidth: 2,
-                  borderColor: activeStep === 1 ? "var(--mantine-primary-color-filled)" : undefined,
-                  backgroundColor: player1Id && activeStep !== 1 ? "var(--mantine-color-default-hover)" : undefined,
-                  cursor: player1Id && activeStep === 0 ? "pointer" : undefined,
-                  transition: "all 150ms ease",
-                }}
-                onClick={player1Id && activeStep === 0 ? handleClearPlayer1 : undefined}
-              >
-                {player1Id ? (
-                  <>
-                    <Stack gap={4} align="center" style={{ flex: 1 }}>
-                      <PlayerAvatar name={player1Name} size={36} disableFullscreen />
-                      <Text size="xs" fw={600} ta="center" lineClamp={1}>
-                        {player1Name}
-                      </Text>
-                    </Stack>
-                    <ActionIcon
-                      variant="light"
-                      color="gray"
-                      size="xs"
-                      radius="xl"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleClearPlayer1();
-                      }}
-                      style={{ position: "absolute", top: 4, right: 4 }}
-                    >
-                      <XIcon size={10} />
-                    </ActionIcon>
-                  </>
-                ) : (
-                  <Stack gap={4} align="center">
-                    <PlayerAvatar size={36} disableFullscreen />
-                    <Text size="xs" c="dimmed" fw={500}>
-                      <Trans>Player 1</Trans>
+        <Box px="md" pt="md">
+          <Paper
+            p="sm"
+            withBorder
+            shadow="sm"
+            style={{
+              minHeight: 64,
+              display: "flex",
+              alignItems: "center",
+              borderWidth: 2,
+              borderColor: !player1Id ? "var(--mantine-primary-color-filled)" : undefined,
+              transition: "border-color 150ms ease",
+            }}
+          >
+            {player1Id ? (
+              <Group justify="space-between" wrap="nowrap" style={{ flex: 1 }}>
+                <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+                  <PlayerAvatar name={player1Name} size={36} disableFullscreen />
+                  <Box style={{ minWidth: 0 }}>
+                    <Text size="sm" fw={600} truncate>
+                      {player1Name}
                     </Text>
-                  </Stack>
-                )}
-              </Paper>
-
-              <Center>
-                <Text size="xl" fw={700} c="dimmed">
-                  <Trans>VS</Trans>
-                </Text>
-              </Center>
-
-              <Paper
-                p="sm"
-                withBorder
-                style={{
-                  flex: 1,
-                  minHeight: 70,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  position: "relative",
-                  borderWidth: 2,
-                  borderColor: activeStep === 2 ? "var(--mantine-primary-color-filled)" : undefined,
-                  backgroundColor: player2Id && activeStep !== 2 ? "var(--mantine-color-default-hover)" : undefined,
-                  cursor: player2Id && activeStep === 0 ? "pointer" : undefined,
-                  transition: "all 150ms ease",
-                }}
-                onClick={player2Id && activeStep === 0 ? handleClearPlayer2 : undefined}
-              >
-                {player2Id ? (
-                  <>
-                    <Stack gap={4} align="center" style={{ flex: 1 }}>
-                      <PlayerAvatar name={player2Name} size={36} disableFullscreen />
-                      <Text size="xs" fw={600} ta="center" lineClamp={1}>
-                        {player2Name}
-                      </Text>
-                    </Stack>
-                    <ActionIcon
-                      variant="light"
-                      color="gray"
-                      size="xs"
-                      radius="xl"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleClearPlayer2();
-                      }}
-                      style={{ position: "absolute", top: 4, right: 4 }}
-                    >
-                      <XIcon size={10} />
-                    </ActionIcon>
-                  </>
-                ) : (
-                  <Stack gap={4} align="center">
-                    <PlayerAvatar size={36} disableFullscreen />
-                    <Text size="xs" c="dimmed" fw={500}>
-                      <Trans>Player 2</Trans>
+                    <Text size="xs" c="dimmed">
+                      <Trans>Tap an opponent below to compare</Trans>
                     </Text>
-                  </Stack>
-                )}
-              </Paper>
-            </Group>
-
-            {activeStep > 0 ? (
-              <Badge
-                variant="light"
-                size="sm"
-                radius="sm"
-                fullWidth
-                styles={{ label: { textTransform: "none" } }}
-              >
-                {activeStep === 1 && <Trans>Select first player</Trans>}
-                {activeStep === 2 && <Trans>Select second player</Trans>}
-              </Badge>
-            ) : (
-              <Group justify="center">
-                <Text
-                  size="xs"
-                  c="dimmed"
-                  style={{ cursor: "pointer" }}
-                  onClick={() => {
-                    setPlayer1Id(null);
-                    setPlayer2Id(null);
-                  }}
-                  td="underline"
+                  </Box>
+                </Group>
+                <ActionIcon
+                  variant="light"
+                  color="gray"
+                  size="sm"
+                  radius="xl"
+                  onClick={handleClearPlayer1}
+                  aria-label={t`Clear selected player`}
                 >
-                  <Trans>Clear both players</Trans>
-                </Text>
+                  <XIcon size={12} />
+                </ActionIcon>
+              </Group>
+            ) : (
+              <Group justify="space-between" wrap="nowrap" style={{ flex: 1 }}>
+                <Group gap="sm" wrap="nowrap">
+                  <PlayerAvatar size={36} disableFullscreen />
+                  <Text size="sm" c="dimmed" fw={500}>
+                    <Trans>Select a player</Trans>
+                  </Text>
+                </Group>
+                {user && (
+                  <Button
+                    variant="light"
+                    size="xs"
+                    radius="xl"
+                    leftSection={<PlusIcon size={12} />}
+                    onClick={() => setPlayer1Id(user.id)}
+                  >
+                    <Trans>Me</Trans>
+                  </Button>
+                )}
               </Group>
             )}
-          </Stack>
-        </Paper>
+          </Paper>
+        </Box>
 
         <TextInput
           placeholder={t`Search players`}
@@ -230,6 +148,7 @@ const LeagueHeadToHead = () => {
                   p="md"
                   gap="sm"
                   wrap="nowrap"
+                  className="flxn-press"
                   style={{
                     cursor: "pointer",
                     transition: "background-color 150ms ease",
@@ -250,7 +169,7 @@ const LeagueHeadToHead = () => {
                     </Text>
                   </Box>
                   <ActionIcon variant="subtle" color="gray" size="lg" radius="xl">
-                    <ArrowRightIcon size={18} />
+                    {player1Id ? <ArrowRightIcon size={18} /> : <PlusIcon size={18} />}
                   </ActionIcon>
                 </Group>
                 {index < filteredPlayers.length - 1 && <Divider />}

src/locales/de/messages.po

@@ -623,9 +623,9 @@ msgstr "Logo ändern"
 msgid "Choose a player"
 msgstr "Wähle einen Spieler"
 
-#: src/features/players/components/league-head-to-head.tsx:203
-msgid "Clear both players"
-msgstr "Beide Spieler entfernen"
+#: src/features/players/components/league-head-to-head.tsx:99
+msgid "Clear selected player"
+msgstr "Ausgewählten Spieler entfernen"
 
 #: src/components/sheet/modal.tsx:35
 #: src/features/tournaments/components/started-tournament/sections/nav-grid.tsx:165
@@ -1156,7 +1156,7 @@ msgstr "Hast du schon mal mitgespielt?"
 #: src/features/bracket/components/match-dock.tsx:215
 #: src/features/matches/components/match-card.tsx:83
 #: src/features/matches/components/match-card.tsx:231
-#: src/features/players/components/league-head-to-head.tsx:264
+#: src/features/players/components/league-head-to-head.tsx:183
 #: src/features/players/components/profile/header.tsx:90
 msgid "Head to Head"
 msgstr "Direktvergleich"
@@ -1441,6 +1441,10 @@ msgstr "Matchup"
 msgid "Matchup details"
 msgstr "Matchup-Details"
 
+#: src/features/players/components/league-head-to-head.tsx:120
+msgid "Me"
+msgstr "Ich"
+
 #: src/features/admin/components/admin-page.tsx:41
 msgid "Migrate Badge Progress"
 msgstr "Abzeichen-Fortschritt migrieren"
@@ -1552,7 +1556,7 @@ msgstr "Keine Matches geplant"
 msgid "No player activity found"
 msgstr "Keine Spieleraktivität gefunden"
 
-#: src/features/players/components/league-head-to-head.tsx:223
+#: src/features/players/components/league-head-to-head.tsx:141
 msgid "No players available"
 msgstr "Keine Spieler verfügbar"
 
@@ -1561,7 +1565,7 @@ msgstr "Keine Spieler verfügbar"
 msgid "No players enrolled yet"
 msgstr "Noch keine Spieler angemeldet"
 
-#: src/features/players/components/league-head-to-head.tsx:223
+#: src/features/players/components/league-head-to-head.tsx:141
 #: src/features/players/components/player-stats-table.tsx:476
 msgid "No players found matching \"{search}\""
 msgstr "Keine Spieler gefunden, die zu \"{search}\" passen"
@@ -1771,12 +1775,10 @@ msgstr "Wiedergabesteuerung fehlgeschlagen"
 msgid "Player"
 msgstr "Spieler"
 
-#: src/features/players/components/league-head-to-head.tsx:117
 #: src/features/teams/components/team-form/players-picker.tsx:45
 msgid "Player 1"
 msgstr "Spieler 1"
 
-#: src/features/players/components/league-head-to-head.tsx:173
 #: src/features/teams/components/team-form/players-picker.tsx:53
 msgid "Player 2"
 msgstr "Spieler 2"
@@ -1980,7 +1982,7 @@ msgstr "Nach Songs suchen..."
 msgid "Search for teams to enroll..."
 msgstr "Teams zum Anmelden suchen..."
 
-#: src/features/players/components/league-head-to-head.tsx:211
+#: src/features/players/components/league-head-to-head.tsx:129
 #: src/features/players/components/player-stats-table.tsx:329
 msgid "Search players"
 msgstr "Spieler suchen"
@@ -2018,6 +2020,10 @@ msgstr "Abzeichen auswählen"
 msgid "Select a device..."
 msgstr "Gerät auswählen..."
 
+#: src/features/players/components/league-head-to-head.tsx:109
+msgid "Select a player"
+msgstr "Wähle einen Spieler"
+
 #: src/features/teams/components/team-form/song-picker.tsx:131
 msgid "Select a song to see details"
 msgstr "Song auswählen, um Details zu sehen"
@@ -2048,10 +2054,6 @@ msgstr "Enddatum auswählen"
 msgid "Select Enrollment Due Date"
 msgstr "Anmeldeschluss auswählen"
 
-#: src/features/players/components/league-head-to-head.tsx:188
-msgid "Select first player"
-msgstr "Ersten Spieler auswählen"
-
 #: src/features/tournaments/components/upcoming-tournament/enroll-team/team-selection-view.tsx:64
 msgid "Select one of your existing teams"
 msgstr "Wähle eines deiner bestehenden Teams"
@@ -2060,10 +2062,6 @@ msgstr "Wähle eines deiner bestehenden Teams"
 msgid "Select Player"
 msgstr "Spieler auswählen"
 
-#: src/features/players/components/league-head-to-head.tsx:189
-msgid "Select second player"
-msgstr "Zweiten Spieler auswählen"
-
 #: src/features/teams/components/team-form/song-picker.tsx:68
 msgid "Select Song"
 msgstr "Song auswählen"
@@ -2258,6 +2256,10 @@ msgstr "System"
 msgid "T"
 msgstr "T"
 
+#: src/features/players/components/league-head-to-head.tsx:89
+msgid "Tap an opponent below to compare"
+msgstr "Tippe unten auf einen Gegner zum Vergleichen"
+
 #: src/components/ios-install-prompt.tsx:37
 msgid "Tap Menu (⋮) → Add to Home screen"
 msgstr "Tippe auf Menü (⋮) → Zum Home-Bildschirm hinzufügen"
@@ -2547,10 +2549,6 @@ msgstr "volumePercent muss eine Zahl sein"
 msgid "vs"
 msgstr "vs"
 
-#: src/features/players/components/league-head-to-head.tsx:125
-msgid "VS"
-msgstr "VS"
-
 #: src/features/players/components/player-stats-table.tsx:131
 #: src/features/tournaments/components/tournament-stats.tsx:112
 msgid "W"

src/locales/en/messages.po

@@ -623,9 +623,9 @@ msgstr "Change Logo"
 msgid "Choose a player"
 msgstr "Choose a player"
 
-#: src/features/players/components/league-head-to-head.tsx:203
-msgid "Clear both players"
-msgstr "Clear both players"
+#: src/features/players/components/league-head-to-head.tsx:99
+msgid "Clear selected player"
+msgstr "Clear selected player"
 
 #: src/components/sheet/modal.tsx:35
 #: src/features/tournaments/components/started-tournament/sections/nav-grid.tsx:165
@@ -1156,7 +1156,7 @@ msgstr "Have you played before?"
 #: src/features/bracket/components/match-dock.tsx:215
 #: src/features/matches/components/match-card.tsx:83
 #: src/features/matches/components/match-card.tsx:231
-#: src/features/players/components/league-head-to-head.tsx:264
+#: src/features/players/components/league-head-to-head.tsx:183
 #: src/features/players/components/profile/header.tsx:90
 msgid "Head to Head"
 msgstr "Head to Head"
@@ -1441,6 +1441,10 @@ msgstr "Matchup"
 msgid "Matchup details"
 msgstr "Matchup details"
 
+#: src/features/players/components/league-head-to-head.tsx:120
+msgid "Me"
+msgstr "Me"
+
 #: src/features/admin/components/admin-page.tsx:41
 msgid "Migrate Badge Progress"
 msgstr "Migrate Badge Progress"
@@ -1552,7 +1556,7 @@ msgstr "No matches scheduled"
 msgid "No player activity found"
 msgstr "No player activity found"
 
-#: src/features/players/components/league-head-to-head.tsx:223
+#: src/features/players/components/league-head-to-head.tsx:141
 msgid "No players available"
 msgstr "No players available"
 
@@ -1561,7 +1565,7 @@ msgstr "No players available"
 msgid "No players enrolled yet"
 msgstr "No players enrolled yet"
 
-#: src/features/players/components/league-head-to-head.tsx:223
+#: src/features/players/components/league-head-to-head.tsx:141
 #: src/features/players/components/player-stats-table.tsx:476
 msgid "No players found matching \"{search}\""
 msgstr "No players found matching \"{search}\""
@@ -1771,12 +1775,10 @@ msgstr "Playback control failed"
 msgid "Player"
 msgstr "Player"
 
-#: src/features/players/components/league-head-to-head.tsx:117
 #: src/features/teams/components/team-form/players-picker.tsx:45
 msgid "Player 1"
 msgstr "Player 1"
 
-#: src/features/players/components/league-head-to-head.tsx:173
 #: src/features/teams/components/team-form/players-picker.tsx:53
 msgid "Player 2"
 msgstr "Player 2"
@@ -1980,7 +1982,7 @@ msgstr "Search for songs..."
 msgid "Search for teams to enroll..."
 msgstr "Search for teams to enroll..."
 
-#: src/features/players/components/league-head-to-head.tsx:211
+#: src/features/players/components/league-head-to-head.tsx:129
 #: src/features/players/components/player-stats-table.tsx:329
 msgid "Search players"
 msgstr "Search players"
@@ -2018,6 +2020,10 @@ msgstr "Select a badge"
 msgid "Select a device..."
 msgstr "Select a device..."
 
+#: src/features/players/components/league-head-to-head.tsx:109
+msgid "Select a player"
+msgstr "Select a player"
+
 #: src/features/teams/components/team-form/song-picker.tsx:131
 msgid "Select a song to see details"
 msgstr "Select a song to see details"
@@ -2048,10 +2054,6 @@ msgstr "Select End Date"
 msgid "Select Enrollment Due Date"
 msgstr "Select Enrollment Due Date"
 
-#: src/features/players/components/league-head-to-head.tsx:188
-msgid "Select first player"
-msgstr "Select first player"
-
 #: src/features/tournaments/components/upcoming-tournament/enroll-team/team-selection-view.tsx:64
 msgid "Select one of your existing teams"
 msgstr "Select one of your existing teams"
@@ -2060,10 +2062,6 @@ msgstr "Select one of your existing teams"
 msgid "Select Player"
 msgstr "Select Player"
 
-#: src/features/players/components/league-head-to-head.tsx:189
-msgid "Select second player"
-msgstr "Select second player"
-
 #: src/features/teams/components/team-form/song-picker.tsx:68
 msgid "Select Song"
 msgstr "Select Song"
@@ -2258,6 +2256,10 @@ msgstr "System"
 msgid "T"
 msgstr "T"
 
+#: src/features/players/components/league-head-to-head.tsx:89
+msgid "Tap an opponent below to compare"
+msgstr "Tap an opponent below to compare"
+
 #: src/components/ios-install-prompt.tsx:37
 msgid "Tap Menu (⋮) → Add to Home screen"
 msgstr "Tap Menu (⋮) → Add to Home screen"
@@ -2547,10 +2549,6 @@ msgstr "volumePercent must be a number"
 msgid "vs"
 msgstr "vs"
 
-#: src/features/players/components/league-head-to-head.tsx:125
-msgid "VS"
-msgstr "VS"
-
 #: src/features/players/components/player-stats-table.tsx:131
 #: src/features/tournaments/components/tournament-stats.tsx:112
 msgid "W"

src/locales/es/messages.po

@@ -623,9 +623,9 @@ msgstr "Cambiar logo"
 msgid "Choose a player"
 msgstr "Elige un jugador"
 
-#: src/features/players/components/league-head-to-head.tsx:203
-msgid "Clear both players"
-msgstr "Quitar ambos jugadores"
+#: src/features/players/components/league-head-to-head.tsx:99
+msgid "Clear selected player"
+msgstr "Quitar jugador seleccionado"
 
 #: src/components/sheet/modal.tsx:35
 #: src/features/tournaments/components/started-tournament/sections/nav-grid.tsx:165
@@ -1156,7 +1156,7 @@ msgstr "¿Ya has jugado antes?"
 #: src/features/bracket/components/match-dock.tsx:215
 #: src/features/matches/components/match-card.tsx:83
 #: src/features/matches/components/match-card.tsx:231
-#: src/features/players/components/league-head-to-head.tsx:264
+#: src/features/players/components/league-head-to-head.tsx:183
 #: src/features/players/components/profile/header.tsx:90
 msgid "Head to Head"
 msgstr "Cara a cara"
@@ -1441,6 +1441,10 @@ msgstr "Enfrentamiento"
 msgid "Matchup details"
 msgstr "Detalles del enfrentamiento"
 
+#: src/features/players/components/league-head-to-head.tsx:120
+msgid "Me"
+msgstr "Yo"
+
 #: src/features/admin/components/admin-page.tsx:41
 msgid "Migrate Badge Progress"
 msgstr "Migrar progreso de insignias"
@@ -1552,7 +1556,7 @@ msgstr "No hay partidos programados"
 msgid "No player activity found"
 msgstr "No se encontró actividad de jugadores"
 
-#: src/features/players/components/league-head-to-head.tsx:223
+#: src/features/players/components/league-head-to-head.tsx:141
 msgid "No players available"
 msgstr "No hay jugadores disponibles"
 
@@ -1561,7 +1565,7 @@ msgstr "No hay jugadores disponibles"
 msgid "No players enrolled yet"
 msgstr "Aún no hay jugadores inscritos"
 
-#: src/features/players/components/league-head-to-head.tsx:223
+#: src/features/players/components/league-head-to-head.tsx:141
 #: src/features/players/components/player-stats-table.tsx:476
 msgid "No players found matching \"{search}\""
 msgstr "No se encontraron jugadores que coincidan con \"{search}\""
@@ -1771,12 +1775,10 @@ msgstr "Falló el control de reproducción"
 msgid "Player"
 msgstr "Jugador"
 
-#: src/features/players/components/league-head-to-head.tsx:117
 #: src/features/teams/components/team-form/players-picker.tsx:45
 msgid "Player 1"
 msgstr "Jugador 1"
 
-#: src/features/players/components/league-head-to-head.tsx:173
 #: src/features/teams/components/team-form/players-picker.tsx:53
 msgid "Player 2"
 msgstr "Jugador 2"
@@ -1980,7 +1982,7 @@ msgstr "Buscar canciones..."
 msgid "Search for teams to enroll..."
 msgstr "Buscar equipos para inscribir..."
 
-#: src/features/players/components/league-head-to-head.tsx:211
+#: src/features/players/components/league-head-to-head.tsx:129
 #: src/features/players/components/player-stats-table.tsx:329
 msgid "Search players"
 msgstr "Buscar jugadores"
@@ -2018,6 +2020,10 @@ msgstr "Selecciona una insignia"
 msgid "Select a device..."
 msgstr "Selecciona un dispositivo..."
 
+#: src/features/players/components/league-head-to-head.tsx:109
+msgid "Select a player"
+msgstr "Selecciona un jugador"
+
 #: src/features/teams/components/team-form/song-picker.tsx:131
 msgid "Select a song to see details"
 msgstr "Selecciona una canción para ver detalles"
@@ -2048,10 +2054,6 @@ msgstr "Selecciona fecha de fin"
 msgid "Select Enrollment Due Date"
 msgstr "Selecciona fecha límite de inscripción"
 
-#: src/features/players/components/league-head-to-head.tsx:188
-msgid "Select first player"
-msgstr "Selecciona el primer jugador"
-
 #: src/features/tournaments/components/upcoming-tournament/enroll-team/team-selection-view.tsx:64
 msgid "Select one of your existing teams"
 msgstr "Selecciona uno de tus equipos existentes"
@@ -2060,10 +2062,6 @@ msgstr "Selecciona uno de tus equipos existentes"
 msgid "Select Player"
 msgstr "Selecciona jugador"
 
-#: src/features/players/components/league-head-to-head.tsx:189
-msgid "Select second player"
-msgstr "Selecciona el segundo jugador"
-
 #: src/features/teams/components/team-form/song-picker.tsx:68
 msgid "Select Song"
 msgstr "Selecciona canción"
@@ -2258,6 +2256,10 @@ msgstr "Sistema"
 msgid "T"
 msgstr "T"
 
+#: src/features/players/components/league-head-to-head.tsx:89
+msgid "Tap an opponent below to compare"
+msgstr "Toca un oponente abajo para comparar"
+
 #: src/components/ios-install-prompt.tsx:37
 msgid "Tap Menu (⋮) → Add to Home screen"
 msgstr "Toca Menú (⋮) → Agregar a pantalla de inicio"
@@ -2547,10 +2549,6 @@ msgstr "volumePercent debe ser un número"
 msgid "vs"
 msgstr "vs"
 
-#: src/features/players/components/league-head-to-head.tsx:125
-msgid "VS"
-msgstr "VS"
-
 #: src/features/players/components/player-stats-table.tsx:131
 #: src/features/tournaments/components/tournament-stats.tsx:112
 msgid "W"

src/locales/ja/messages.po

@@ -623,9 +623,9 @@ msgstr "ロゴを変更"
 msgid "Choose a player"
 msgstr "プレイヤーを選択"
 
-#: src/features/players/components/league-head-to-head.tsx:203
-msgid "Clear both players"
-msgstr "両方のプレイヤーをクリア"
+#: src/features/players/components/league-head-to-head.tsx:99
+msgid "Clear selected player"
+msgstr "選択したプレイヤーを解除"
 
 #: src/components/sheet/modal.tsx:35
 #: src/features/tournaments/components/started-tournament/sections/nav-grid.tsx:165
@@ -1156,7 +1156,7 @@ msgstr "参加したことはありますか?"
 #: src/features/bracket/components/match-dock.tsx:215
 #: src/features/matches/components/match-card.tsx:83
 #: src/features/matches/components/match-card.tsx:231
-#: src/features/players/components/league-head-to-head.tsx:264
+#: src/features/players/components/league-head-to-head.tsx:183
 #: src/features/players/components/profile/header.tsx:90
 msgid "Head to Head"
 msgstr "対戦成績"
@@ -1441,6 +1441,10 @@ msgstr "対戦カード"
 msgid "Matchup details"
 msgstr "対戦カードの詳細"
 
+#: src/features/players/components/league-head-to-head.tsx:120
+msgid "Me"
+msgstr "自分"
+
 #: src/features/admin/components/admin-page.tsx:41
 msgid "Migrate Badge Progress"
 msgstr "バッジ進捗を移行"
@@ -1552,7 +1556,7 @@ msgstr "予定されている試合はありません"
 msgid "No player activity found"
 msgstr "プレイヤーのアクティビティが見つかりません"
 
-#: src/features/players/components/league-head-to-head.tsx:223
+#: src/features/players/components/league-head-to-head.tsx:141
 msgid "No players available"
 msgstr "利用可能なプレイヤーがいません"
 
@@ -1561,7 +1565,7 @@ msgstr "利用可能なプレイヤーがいません"
 msgid "No players enrolled yet"
 msgstr "まだプレイヤーが登録されていません"
 
-#: src/features/players/components/league-head-to-head.tsx:223
+#: src/features/players/components/league-head-to-head.tsx:141
 #: src/features/players/components/player-stats-table.tsx:476
 msgid "No players found matching \"{search}\""
 msgstr "「{search}」に一致するプレイヤーが見つかりません"
@@ -1771,12 +1775,10 @@ msgstr "再生コントロールに失敗しました"
 msgid "Player"
 msgstr "プレイヤー"
 
-#: src/features/players/components/league-head-to-head.tsx:117
 #: src/features/teams/components/team-form/players-picker.tsx:45
 msgid "Player 1"
 msgstr "プレイヤー1"
 
-#: src/features/players/components/league-head-to-head.tsx:173
 #: src/features/teams/components/team-form/players-picker.tsx:53
 msgid "Player 2"
 msgstr "プレイヤー2"
@@ -1980,7 +1982,7 @@ msgstr "曲を検索..."
 msgid "Search for teams to enroll..."
 msgstr "登録するチームを検索..."
 
-#: src/features/players/components/league-head-to-head.tsx:211
+#: src/features/players/components/league-head-to-head.tsx:129
 #: src/features/players/components/player-stats-table.tsx:329
 msgid "Search players"
 msgstr "プレイヤーを検索"
@@ -2018,6 +2020,10 @@ msgstr "バッジを選択"
 msgid "Select a device..."
 msgstr "デバイスを選択..."
 
+#: src/features/players/components/league-head-to-head.tsx:109
+msgid "Select a player"
+msgstr "プレイヤーを選択"
+
 #: src/features/teams/components/team-form/song-picker.tsx:131
 msgid "Select a song to see details"
 msgstr "詳細を見るには曲を選択してください"
@@ -2048,10 +2054,6 @@ msgstr "終了日を選択"
 msgid "Select Enrollment Due Date"
 msgstr "登録締切日を選択"
 
-#: src/features/players/components/league-head-to-head.tsx:188
-msgid "Select first player"
-msgstr "1人目のプレイヤーを選択"
-
 #: src/features/tournaments/components/upcoming-tournament/enroll-team/team-selection-view.tsx:64
 msgid "Select one of your existing teams"
 msgstr "既存のチームから選択してください"
@@ -2060,10 +2062,6 @@ msgstr "既存のチームから選択してください"
 msgid "Select Player"
 msgstr "プレイヤーを選択"
 
-#: src/features/players/components/league-head-to-head.tsx:189
-msgid "Select second player"
-msgstr "2人目のプレイヤーを選択"
-
 #: src/features/teams/components/team-form/song-picker.tsx:68
 msgid "Select Song"
 msgstr "曲を選択"
@@ -2258,6 +2256,10 @@ msgstr "システム"
 msgid "T"
 msgstr "T"
 
+#: src/features/players/components/league-head-to-head.tsx:89
+msgid "Tap an opponent below to compare"
+msgstr "下の対戦相手をタップして比較"
+
 #: src/components/ios-install-prompt.tsx:37
 msgid "Tap Menu (⋮) → Add to Home screen"
 msgstr "メニュー (⋮) をタップ →「ホーム画面に追加」"
@@ -2547,10 +2549,6 @@ msgstr "volumePercentは数値である必要があります"
 msgid "vs"
 msgstr "vs"
 
-#: src/features/players/components/league-head-to-head.tsx:125
-msgid "VS"
-msgstr "VS"
-
 #: src/features/players/components/player-stats-table.tsx:131
 #: src/features/tournaments/components/tournament-stats.tsx:112
 msgid "W"