more bracket work

src/features/bracket/components/match-card.tsx

@@ -1,72 +1,98 @@
-import { ActionIcon, Card, Text } from '@mantine/core';
-import { PlayIcon } from '@phosphor-icons/react';
-import React, { useCallback, useMemo } from 'react';
-import { MatchSlot } from './match-slot';
-import { Match } from '../types';
+import { ActionIcon, Card, Flex, Text } from "@mantine/core";
+import { PlayIcon } from "@phosphor-icons/react";
+import React, { useCallback, useMemo } from "react";
+import { MatchSlot } from "./match-slot";
+import { Match } from "@/features/matches/types";
 
 interface MatchCardProps {
   match: Match;
-  getParentMatchOrder: (parentLid: number) => number | string;
+  orders: Record<number, number>;
   onAnnounce?: (teamOne: any, teamTwo: any) => void;
 }
 
-export const MatchCard: React.FC<MatchCardProps> = ({ 
-  match, 
-  getParentMatchOrder, 
-  onAnnounce 
+export const MatchCard: React.FC<MatchCardProps> = ({
+  match,
+  orders,
+  onAnnounce,
 }) => {
+  const homeSlot = useMemo(
+    () => ({
+      from: orders[match.home_from_lid],
+      from_loser: match.home_from_loser,
+      team: match.home,
+      seed: match.home_seed,
+    }),
+    [match]
+  );
+  const awaySlot = useMemo(
+    () => ({
+      from: orders[match.away_from_lid],
+      from_loser: match.away_from_loser,
+      team: match.away,
+      seed: match.away_seed,
+    }),
+    [match]
+  );
 
-  const showAnnounce = useMemo(() => 
-    onAnnounce && match.home.team && match.away.team, 
-  [onAnnounce, match.home.team, match.away.team]);
+  const showAnnounce = useMemo(
+    () => onAnnounce && match.home && match.away,
+    [onAnnounce, match.home, match.away]
+  );
 
-  const handleAnnounce = useCallback(() => 
-    onAnnounce?.(match.home.team, match.away.team), [match.home.team, match.away.team]);
+  const handleAnnounce = useCallback(
+    () => onAnnounce?.(match.home, match.away),
+    [match.home, match.away]
+  );
 
   return (
-    <Card
-      withBorder
-      pos="relative"
-      w={200}
-      style={{ overflow: 'visible' }}
-      data-match-lid={match.lid}
-    >
-      <Card.Section withBorder p={0}>
-        <MatchSlot slot={match.home} getParentMatchOrder={getParentMatchOrder} />
-      </Card.Section>
-      
-      <Card.Section p={0} mb={-16}>
-        <MatchSlot slot={match.away} getParentMatchOrder={getParentMatchOrder} />
-      </Card.Section>
-      
-      {match.reset && (
-        <Text
-          pos="absolute"
-          top={-20}
-          left={8}
-          size="xs"
-          c="dimmed"
-          fw="bold"
-        >
-          * If necessary
-        </Text>
-      )}
-      
-      {showAnnounce && (
-        <ActionIcon
-          pos="absolute"
-          variant="filled"
-          color="green"
-          top={-20}
-          right={-12}
-          onClick={handleAnnounce}
-          bd="none"
-          style={{ boxShadow: 'none' }}
-          size="xs"
-        >
-          <PlayIcon size={12} />
-        </ActionIcon>
-      )}
-    </Card>
+    <Flex direction="row" align="center" justify="end" gap={8}>
+      <Text c="dimmed" fw="bolder">
+        {match.order}
+      </Text>
+      <Card
+        withBorder
+        pos="relative"
+        w={200}
+        style={{ overflow: "visible" }}
+        data-match-lid={match.lid}
+      >
+        <Card.Section withBorder p={0}>
+          <MatchSlot {...homeSlot} />
+        </Card.Section>
+
+        <Card.Section p={0} mb={-16}>
+          <MatchSlot {...awaySlot} />
+        </Card.Section>
+
+        {match.reset && (
+          <Text
+            pos="absolute"
+            top={-20}
+            left={8}
+            size="xs"
+            c="dimmed"
+            fw="bold"
+          >
+            * If necessary
+          </Text>
+        )}
+
+        {showAnnounce && (
+          <ActionIcon
+            pos="absolute"
+            variant="filled"
+            color="green"
+            top={-20}
+            right={-12}
+            onClick={handleAnnounce}
+            bd="none"
+            style={{ boxShadow: "none" }}
+            size="xs"
+          >
+            <PlayIcon size={12} />
+          </ActionIcon>
+        )}
+      </Card>
+    </Flex>
   );
-};
+};