Smarter dropdown search

Author: hognej

app/routes/compare-players.$player1Id.$player2Id.tsx

@@ -27,10 +27,20 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
   const player1 = players.find((player) => player.id === player1Id);
   const player2 = players.find((player) => player.id === player2Id);
 
-  const playerOptions = players.map((player) => ({
-    value: player.id,
-    label: player.name,
-  }));
+  const playerOptions = players
+    .sort((a, b) => {
+      // Sort inactive players to the bottom
+      if (a.inactive && !b.inactive) return 1;
+      if (!a.inactive && b.inactive) return -1;
+      // Then sort by number of games
+      const aGames = a.matchesAsWinner.length + a.matchesAsLoser.length;
+      const bGames = b.matchesAsWinner.length + b.matchesAsLoser.length;
+      return bGames - aGames;
+    })
+    .map((player) => ({
+      value: player.id,
+      label: `${player.name} (${player.matchesAsWinner.length + player.matchesAsLoser.length} kamper)${player.inactive ? ' ❌' : ''}`,
+    }));
 
   const player1WinStats =
     player1 && player2 ? findPlayerWinStats(player1, player2) : undefined;

app/routes/profile.$profileId.tsx

@@ -55,17 +55,31 @@ export default function Index() {
     .filter((player) => !player.inactive)
     .sort((p1, p2) => p2.currentTeamELO - p1.currentTeamELO);
 
-  const playerOptions = players.map((player) => ({
-    value: player.id,
-    label: player.name,
-  }));
+  const playerOptions = players
+    .sort((a, b) => {
+      // Sort inactive players to the bottom
+      if (a.inactive && !b.inactive) return 1;
+      if (!a.inactive && b.inactive) return -1;
+      // Then sort by number of games
+      const aGames = a.matchesAsWinner.length + a.matchesAsLoser.length;
+      const bGames = b.matchesAsWinner.length + b.matchesAsLoser.length;
+      return bGames - aGames;
+    })
+    .map((player) => ({
+      value: player.id,
+      label: `${player.name} (${player.matchesAsWinner.length + player.matchesAsLoser.length} kamper)${player.inactive ? ' ❌' : ''}`,
+    }));
 
   const numberOfWins = player ? player.matchesAsWinner.length : 0;
   const numberOfLosses = player ? player.matchesAsLoser.length : 0;
   const numberOfMatches = numberOfWins + numberOfLosses;
   const winPercentage = (numberOfWins / numberOfMatches) * 100;
 
-  const findLongestWinStreak = (eloLogs) => {
+  interface EloLog {
+    elo: number;
+  }
+
+  const findLongestWinStreak = (eloLogs: EloLog[]): number => {
     if (eloLogs.length === 0) return 0;
 
     const logs = [...eloLogs].reverse();

app/routes/team-profile.$teamId.tsx

@@ -35,10 +35,24 @@ export default function Index() {
   );
   const topFiveTeamIds = teamsSortedOnELODesc.slice(0, 5).map((t) => t.id);
 
-  const teamOptions = teams.map((team) => ({
-    value: team.id,
-    label: team.name,
-  }));
+  const teamOptions = teams
+    .sort((a, b) => {
+      // Sort teams with inactive players to the bottom
+      const aHasInactive = a.players.some((player) => player.inactive);
+      const bHasInactive = b.players.some((player) => player.inactive);
+      if (aHasInactive && !bHasInactive) return 1;
+      if (!aHasInactive && bHasInactive) return -1;
+      // Then sort by number of games
+      const aMatches =
+        a.teamMatchesAsWinner.length + a.teamMatchesAsLoser.length;
+      const bMatches =
+        b.teamMatchesAsWinner.length + b.teamMatchesAsLoser.length;
+      return bMatches - aMatches;
+    })
+    .map((team) => ({
+      value: team.id,
+      label: `${team.players.map((p) => p.name).join(' & ')} (${team.teamMatchesAsWinner.length + team.teamMatchesAsLoser.length} kamper)${team.players.some((p) => p.inactive) ? ' ❌' : ''}`,
+    }));
 
   const numberOfWins = team ? team.teamMatchesAsWinner.length : 0;
   const numberOfLosses = team ? team.teamMatchesAsLoser.length : 0;