feat: improve match table

messages/en.json

@@ -75,5 +75,55 @@
     "custom": "Custom",
     "chess": "Chess",
     "badminton": "Badminton"
+  },
+  "achievements": {
+    "wins-1": "First Win",
+    "wins-10": "10 Wins",
+    "wins-50": "50 Wins",
+    "wins-100": "100 Wins",
+    "wins-500": "500 Wins",
+    "wins-1000": "1000 Wins",
+    "elo-range": "Exkarlibur",
+    "elo-minus300": "It's evolving, just backwards!",
+    "elo-100": "Getting better",
+    "elo-200": "Look mom, no hands!",
+    "elo-300": "Whenever I need expert advice, I talk to myself",
+    "elo-400": "Call me Magnus Carlsen",
+    "elo-500": "Kneel before me, mortals!",
+    "consecutive-wins-5": "I am inevitable",
+    "consecutive-wins-10": "Behold!",
+    "consecutive-losses-10": "Are you even trying?",
+    "matches-1": "First Match",
+    "matches-10": "10 Matches",
+    "matches-50": "50 Matches",
+    "matches-100": "100 Matches",
+    "matches-500": "500 Matches",
+    "matches-1000": "I haven't left this place for years",
+    "score-1": "First point",
+    "score-10": "10 Points",
+    "score-100": "100 Points",
+    "score-1000": "1000 Points",
+    "score-2500": "2500 Points",
+    "score-5000": "5000 Points",
+    "underdog": "Underdog",
+    "badday": "Bad days happen",
+    "david": "David",
+    "goliath": "Goliath",
+    "weekend-match": "Everyday is work day",
+    "night-match": "Night shift",
+    "xmas-match": "Merry Christmas",
+    "daily-matches-5": "No-stress-day",
+    "daily-matches-10": "Are you even working?",
+    "daily-wins-5": "Probably getting paid for this",
+    "daily-wins-10": "Suffering from success",
+    "hangover": "Berliner Luft",
+    "contributor": "I'm doing my part",
+    "daily-o-clock": "No daily today?",
+    "threesome": "Have a threesome",
+    "bad-threesome": "Bad threesome",
+    "leap-year": "Take a leap",
+    "trick-or-treat": "Trick or treat",
+    "diff-max": "Dominator",
+    "diff-min": "Das tapfere Schneiderlein"
   }
 }

src/app/[locale]/(home)/recent-matches.tsx

@@ -1,51 +1,115 @@
 "use client";
 
+import { Rating } from "@/components/rating";
 import { RatingChange } from "@/components/rating-change";
+import { Score } from "@/components/score";
 import { TimeDistance } from "@/components/time-distance";
 import { getRecentLeagueMatches } from "@/db/model/match";
+import { Achievement, Team } from "@/db/schema";
+import { Link } from "@/lib/navigation";
 import {
   Table,
   TableBody,
   TableCell,
   TableColumn,
   TableHeader,
   TableRow,
+  Tooltip,
 } from "@nextui-org/react";
+import { useTranslations } from "next-intl";
 
 interface RecentMatchesProps {
   matches: Awaited<ReturnType<typeof getRecentLeagueMatches>>;
 }
 
+function MatchTableTeam({
+  team,
+  matchRating,
+  matchRatingChange,
+  matchAchievements,
+  score,
+  win,
+}: {
+  team: Team;
+  matchRating: number;
+  matchRatingChange: number;
+  matchAchievements: Achievement[];
+  score: number;
+  win: boolean;
+}) {
+  const emoji = win ? (
+    "🏆"
+  ) : score === 0 ? (
+    "✂️"
+  ) : (
+    <span className="opacity-25" style={{ filter: "grayscale(100%)" }}>
+      😔
+    </span>
+  );
+  const t = useTranslations("achievements");
+  const achievements = matchAchievements.map(a => t(a.achievement)).join(", ");
+
+  return (
+    <div className="flex gap-3 items-center">
+      <div className="text-2xl min-w-8 text-center">{emoji}</div>
+      <div>
+        <p>
+          <Link href={`/teams/${team.id}`}>{team.name}</Link>{" "}
+        </p>
+        <div className="text-default-400 flex gap-3 whitespace-nowrap overflow-hidden text-ellipsis w-64">
+          <p>
+            <Rating rating={matchRating} />{" "}
+            <RatingChange change={matchRatingChange} />
+          </p>
+          <p className="text-ellipsis overflow-hidden">
+            <Tooltip content={achievements}>
+              <span>{achievements}</span>
+            </Tooltip>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function RecentMatches({ matches }: RecentMatchesProps) {
   return (
     <Table aria-label="Recent Matches">
       <TableHeader>
         <TableColumn width="30%">Team 1</TableColumn>
-        <TableColumn width="5%">Result</TableColumn>
+        <TableColumn width="10%">Result</TableColumn>
         <TableColumn width="30%">Team 2</TableColumn>
         <TableColumn width="20%">Date</TableColumn>
       </TableHeader>
       <TableBody items={matches}>
         {match => (
           <TableRow key={match.id}>
             <TableCell>
-              {match.team1.name}{" "}
-              {match.achievements
-                .filter(a => a.teamId === match.team1Id)
-                .map(a => a.achievement)
-                .join(", ")}
-              <RatingChange change={match.team1RatingChange} />
+              <MatchTableTeam
+                team={match.team1}
+                matchRating={match.team1Rating}
+                matchRatingChange={match.team1RatingChange}
+                matchAchievements={match.achievements.filter(
+                  a => a.teamId === match.team1Id,
+                )}
+                score={match.score1}
+                win={match.score1 > match.score2}
+              />
             </TableCell>
             <TableCell>
-              {match.score1} {match.score2}
+              <Score score={match.score1} /> : <Score score={match.score2} />
             </TableCell>
             <TableCell>
-              {match.team2.name}{" "}
-              {match.achievements
-                .filter(a => a.teamId === match.team2Id)
-                .map(a => a.achievement)
-                .join(", ")}
-              <RatingChange change={match.team2RatingChange} />
+              <MatchTableTeam
+                team={match.team2}
+                matchRating={match.team2Rating}
+                matchRatingChange={match.team2RatingChange}
+                matchAchievements={match.achievements.filter(
+                  a => a.teamId === match.team2Id,
+                )}
+                score={match.score2}
+                win={match.score2 > match.score1}
+              />
             </TableCell>
             <TableCell>
               <TimeDistance date={match.createdAt} />

src/components/rating.tsx

@@ -0,0 +1,3 @@
+export function Rating({ rating }: { rating: number }) {
+  return <>{Math.round(rating)}</>;
+}

src/components/score.tsx

@@ -0,0 +1,7 @@
+export function Score({ score }: { score: number }) {
+  return (
+    <span className="border rounded p-1 bg-gray-50 dark:bg-gray-900 dark:border-gray-700 font-light mr-1">
+      {score}
+    </span>
+  );
+}

src/db/schema.ts

@@ -168,6 +168,8 @@ export const achievements = pgTable(
   }),
 );
 
+export type Achievement = typeof achievements.$inferSelect;
+
 export const achievementsRelations = relations(
   achievements,
   ({ one, many }) => ({