predictions

src/features/predictions/components/prediction-bracket.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from "react";
+import BracketView from "@/features/bracket/components/bracket-view";
+import { groupMatchesIntoBracket } from "@/features/bracket/utils/group";
+import { Match } from "@/features/matches/types";
+import { PicksMap } from "../types";
+import { PickResult, resolvePredictedBracket } from "../utils";
+import { PredictionMatchCard } from "./prediction-match-card";
+
+interface PredictionBracketProps {
+  matches: Match[];
+  picks: PicksMap;
+  mode: "edit" | "view";
+  perMatch?: Map<number, PickResult>;
+  activeLid?: number;
+  onActivate?: (lid: number) => void;
+}
+
+export const PredictionBracket: React.FC<PredictionBracketProps> = ({
+  matches,
+  picks,
+  mode,
+  perMatch,
+  activeLid,
+  onActivate,
+}) => {
+  const bracket = useMemo(() => groupMatchesIntoBracket(matches), [matches]);
+
+  const resolved = useMemo(
+    () => resolvePredictedBracket(matches, picks),
+    [matches, picks]
+  );
+
+  const orders = useMemo(() => {
+    const map: Record<number, number> = {};
+    bracket.winners.flat().forEach((match) => (map[match.lid] = match.order));
+    bracket.losers.flat().forEach((match) => (map[match.lid] = match.order));
+    return map;
+  }, [bracket]);
+
+  return (
+    <BracketView
+      bracket={bracket}
+      bottomOffset={110}
+      renderMatch={(match) => (
+        <PredictionMatchCard
+          match={match}
+          resolved={resolved.get(match.lid)}
+          orders={orders}
+          mode={mode}
+          result={perMatch?.get(match.lid)}
+          active={activeLid === match.lid}
+          onActivate={
+            onActivate &&
+            (!match.reset || resolved.get(match.lid)?.resetNecessary)
+              ? () => onActivate(match.lid)
+              : undefined
+          }
+        />
+      )}
+    />
+  );
+};