better bracket, player stats in pb

2025-09-12 17:14:33 -05:00
parent e20582897f
commit a926dcde07
8 changed files with 856 additions and 46 deletions
--- a/src/features/bracket/components/match-card.tsx
+++ b/src/features/bracket/components/match-card.tsx
@@ -30,7 +30,12 @@ export const MatchCard: React.FC<MatchCardProps> = ({
      from_loser: match.home_from_loser,
      team: match.home,
      seed: match.home_seed,
-      cups: match.status === "ended" ? match.home_cups : undefined
+      cups: match.status === "ended" ? match.home_cups : undefined,
+      isWinner:
+        match.status === "ended" &&
+        match.home_cups !== undefined &&
+        match.away_cups !== undefined &&
+        match.home_cups > match.away_cups,
    }),
    [match]
  );
@@ -40,7 +45,12 @@ export const MatchCard: React.FC<MatchCardProps> = ({
      from_loser: match.away_from_loser,
      team: match.away,
      seed: match.away_seed,
-      cups: match.status === "ended" ? match.away_cups : undefined
+      cups: match.status === "ended" ? match.away_cups : undefined,
+      isWinner:
+        match.status === "ended" &&
+        match.away_cups !== undefined &&
+        match.home_cups !== undefined &&
+        match.away_cups > match.home_cups,
    }),
    [match]
  );
@@ -81,37 +91,45 @@ export const MatchCard: React.FC<MatchCardProps> = ({
  }, [match]);

  const handleFormSubmit = useCallback(
-    async (data: { home_cups: number; away_cups: number; ot_count: number }) => {
-      await end.mutate({ data: {
-        ...data,
-        matchId: match.id
-      }});
+    async (data: {
+      home_cups: number;
+      away_cups: number;
+      ot_count: number;
+    }) => {
+      await end.mutate({
+        data: {
+          ...data,
+          matchId: match.id,
+        },
+      });
      editSheet.close();
    },
    [match.id, editSheet]
  );

  const handleSpeakerClick = useCallback(() => {
-    if ('speechSynthesis' in window && match.home?.name && match.away?.name) {
+    if ("speechSynthesis" in window && match.home?.name && match.away?.name) {
      const utterance = new SpeechSynthesisUtterance(
        `${match.home.name} vs. ${match.away.name}`
      );
-      
+
      const voices = window.speechSynthesis.getVoices();
-      
-      const preferredVoice = voices.find(voice => 
-        voice.lang.startsWith('en') && 
-        voice.name.includes('Daniel')
-      ) || voices.find(voice => voice.lang.startsWith('en') && voice.default);
-      
+
+      const preferredVoice =
+        voices.find(
+          (voice) =>
+            voice.lang.startsWith("en") && voice.name.includes("Daniel")
+        ) ||
+        voices.find((voice) => voice.lang.startsWith("en") && voice.default);
+
      if (preferredVoice) {
        utterance.voice = preferredVoice;
      }
-      
+
      utterance.rate = 0.9;
      utterance.volume = 0.8;
      utterance.pitch = 1.0;
-      
+
      window.speechSynthesis.speak(utterance);
    }
  }, [match.home?.name, match.away?.name]);
@@ -157,17 +175,19 @@ export const MatchCard: React.FC<MatchCardProps> = ({
              </Text>
            )}

-            <ActionIcon
-              pos="absolute"
-              bottom={-2}
-              left={-26}
-              size="sm"
-              variant="subtle"
-              color="gray"
-              onClick={handleSpeakerClick}
-            >
-              <SpeakerHighIcon size={12} />
-            </ActionIcon>
+            {showControls && (
+              <ActionIcon
+                pos="absolute"
+                bottom={-2}
+                left={-26}
+                size="sm"
+                variant="subtle"
+                color="gray"
+                onClick={handleSpeakerClick}
+              >
+                <SpeakerHighIcon size={12} />
+              </ActionIcon>
+            )}
          </Card>
        </Indicator>

--- a/src/features/bracket/components/match-slot.tsx
+++ b/src/features/bracket/components/match-slot.tsx
@@ -1,5 +1,6 @@
 import { Flex, Text } from "@mantine/core";
 import React from "react";
+import { CrownIcon } from "@phosphor-icons/react";
 import { SeedBadge } from "./seed-badge";
 import { TeamInfo } from "@/features/teams/types";

@@ -9,6 +10,7 @@ interface MatchSlotProps {
  team?: TeamInfo;
  seed?: number;
  cups?: number;
+  isWinner?: boolean;
 }

 export const MatchSlot: React.FC<MatchSlotProps> = ({
@@ -16,25 +18,49 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
  from_loser,
  team,
  seed,
-  cups
+  cups,
+  isWinner
 }) => (
  <Flex align="stretch">
    {(seed && seed > 0) ? <SeedBadge seed={seed} /> : undefined}
-    <Flex p="4px 8px" w='100%'>
-      {team ? (
-        <Text size="xs">{team.name}</Text>
-      ) : from ? (
-        <Text c="dimmed" size="xs">
-          {from_loser ? "Loser" : "Winner"} of Match {from}
-        </Text>
-      ) : (
-        <Text c="dimmed" size="xs">
-          TBD
-        </Text>
-      )}
+    <Flex p="4px 8px" w='100%' align="center">
+      <Flex align="center" gap={4} flex={1}>
+        {team ? (
+          <>
+            <Text 
+              size={team.name.length > 12 ? (team.name.length > 18 ? '10px' : '11px') : 'xs'}
+              truncate
+              style={{ minWidth: 0, flex: 1 }}
+            >
+              {team.name}
+            </Text>
+            {isWinner && (
+              <CrownIcon
+                size={14} 
+                weight="fill"
+                style={{ 
+                  color: 'gold',
+                  marginLeft: '2px',
+                  marginTop: '-1px',
+                  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.3))',
+                  flexShrink: 0
+                }} 
+              />
+            )}
+          </>
+        ) : from ? (
+          <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
+            {from_loser ? "Loser" : "Winner"} of Match {from}
+          </Text>
+        ) : (
+          <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
+            TBD
+          </Text>
+        )}
+      </Flex>
      {
        cups !== undefined ? (
-          <Text ta='center' w={15} fw="800" ml='auto' size="xs">{cups}</Text>
+          <Text ta='center' w={15} fw="800" ml={4} size="xs">{cups}</Text>
        ) : undefined
      }
    </Flex>
--- a/src/features/matches/server.ts
+++ b/src/features/matches/server.ts
@@ -58,8 +58,8 @@ export const generateTournamentBracket = createServerFn()
            home_cups: 0,
            away_cups: 0,
            ot_count: 0,
-            home_from_lid: match.home_from_lid,
-            away_from_lid: match.away_from_lid,
+            home_from_lid: match.home_from_lid === null ? -1 : match.home_from_lid,
+            away_from_lid: match.away_from_lid === null ? -1 : match.away_from_lid,
            home_from_loser: match.home_from_loser || false,
            away_from_loser: match.away_from_loser || false,
            is_losers_bracket: false,
@@ -102,8 +102,8 @@ export const generateTournamentBracket = createServerFn()
            home_cups: 0,
            away_cups: 0,
            ot_count: 0,
-            home_from_lid: match.home_from_lid,
-            away_from_lid: match.away_from_lid,
+            home_from_lid: match.home_from_lid === null ? -1 : match.home_from_lid,
+            away_from_lid: match.away_from_lid === null ? -1 : match.away_from_lid,
            home_from_loser: match.home_from_loser || false,
            away_from_loser: match.away_from_loser || false,
            is_losers_bracket: true,
@@ -190,6 +190,8 @@ export const endMatch = createServerFn()
      // winner -> where to send match winner to, loser same
      const { winner, loser } = await pbAdmin.getChildMatches(matchId);

+      console.log(winner, loser)
+
      // reset match check
      if (winner && winner.reset) {
        const awayTeamWon = match.away === matchWinner;