Merge branch 'main' of https://git.ambigrat.com/shenyan/physical-expo

components/match-card-league.tsx

@@ -1,6 +1,7 @@
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
+import { useAppState } from "@/context/AppStateContext";
 import { useTheme } from "@/context/ThemeContext";
 import { addFavorite, removeFavorite } from "@/lib/api";
 import { Match } from "@/types/api";
@@ -29,6 +30,7 @@ export function MatchCardLeague({
 }: MatchCardLeagueProps) {
   const router = useRouter();
   const { theme } = useTheme();
+  const { state } = useAppState();
   const [isFav, setIsFav] = useState(match.fav);
   const [loading, setLoading] = useState(false);
 
@@ -86,11 +88,21 @@ export function MatchCardLeague({
   const scoreParts = React.useMemo(() => {
     const s = (match.scoreText || "").trim();
     const m = s.match(/(\d+)\s*[-:]\s*(\d+)/);
-    if (m) return { home: m[1], away: m[2], hasScore: true };
+    if (m) {
+      const homeNum = parseInt(m[1], 10);
+      const awayNum = parseInt(m[2], 10);
+      return {
+        home: m[1],
+        away: m[2],
+        hasScore: true,
+        homeLead: Number.isFinite(homeNum) && Number.isFinite(awayNum) && homeNum > awayNum,
+        awayLead: Number.isFinite(homeNum) && Number.isFinite(awayNum) && awayNum > homeNum,
+      };
+    }
     if (s && s !== "-" && s !== "0 - 0")
-      return { home: s, away: "", hasScore: true };
+      return { home: s, away: "", hasScore: true, homeLead: false, awayLead: false };
-    if (s === "0 - 0") return { home: "0", away: "0", hasScore: true };
+    if (s === "0 - 0") return { home: "0", away: "0", hasScore: true, homeLead: false, awayLead: false };
-    return { home: "", away: "", hasScore: false };
+    return { home: "", away: "", hasScore: false, homeLead: false, awayLead: false };
   }, [match.scoreText]);
 
   const { homeRedCards, awayRedCards, homeYellowCards, awayYellowCards } = React.useMemo(() => {
@@ -123,6 +135,7 @@ export function MatchCardLeague({
   }, [(match as any).stats, (match as any).homeRedCards, (match as any).awayRedCards]);
 
   const cardBg = isDark ? "#1C1C1E" : "#F5F5F5";
+  const showCards = state.cardsSettings?.enabled !== false;
 
   return (
     <Pressable
@@ -151,8 +164,8 @@ export function MatchCardLeague({
             <ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
               {match.home || match.homeTeamName}
             </ThemedText>
-            {homeYellowCards > 0 && <View style={[styles.cardBadge, styles.yellowCard]} />}
+            {showCards && homeYellowCards > 0 && <View style={[styles.cardBadge, styles.yellowCard]} />}
-            {homeRedCards > 0 && <View style={[styles.cardBadge, styles.redCard]} />}
+            {showCards && homeRedCards > 0 && <View style={[styles.cardBadge, styles.redCard]} />}
           </View>
         </View>
 
@@ -165,8 +178,8 @@ export function MatchCardLeague({
             <ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
               {match.away || match.awayTeamName}
             </ThemedText>
-            {awayYellowCards > 0 && <View style={[styles.cardBadge, styles.yellowCard]} />}
+            {showCards && awayYellowCards > 0 && <View style={[styles.cardBadge, styles.yellowCard]} />}
-            {awayRedCards > 0 && <View style={[styles.cardBadge, styles.redCard]} />}
+            {showCards && awayRedCards > 0 && <View style={[styles.cardBadge, styles.redCard]} />}
           </View>
         </View>
       </View>
@@ -177,18 +190,35 @@ export function MatchCardLeague({
             style={[
               styles.scoreBox,
               {
-                borderColor: isLive ? "#FF9500" : scoreBorder,
+                borderColor:
+                  scoreParts.homeLead || scoreParts.awayLead ? "#FF9500" : scoreBorder,
                 backgroundColor: scoreBg,
               },
             ]}
           >
-            <ThemedText style={styles.scoreBoxText} numberOfLines={1}>
+            <View style={[styles.scoreHalf, scoreParts.homeLead && styles.scoreHalfLead]}>
-              {scoreParts.home}
+              <ThemedText
-            </ThemedText>
+                style={[
-            <View style={[styles.scoreDivider, { backgroundColor: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)" }]} />
+                  styles.scoreBoxText,
-            <ThemedText style={styles.scoreBoxText} numberOfLines={1}>
+                  scoreParts.homeLead && styles.scoreTextLead,
-              {scoreParts.away}
+                ]}
-            </ThemedText>
+                numberOfLines={1}
+              >
+                {scoreParts.home}
+              </ThemedText>
+            </View>
+            <View style={styles.scoreDivider} />
+            <View style={[styles.scoreHalf, scoreParts.awayLead && styles.scoreHalfLead]}>
+              <ThemedText
+                style={[
+                  styles.scoreBoxText,
+                  scoreParts.awayLead && styles.scoreTextLead,
+                ]}
+                numberOfLines={1}
+              >
+                {scoreParts.away}
+              </ThemedText>
+            </View>
           </View>
         ) : (
           <View style={styles.scoreBoxPlaceholder} />
@@ -292,6 +322,19 @@ const styles = StyleSheet.create({
     height: 1,
     marginVertical: 1,
   },
+  scoreHalf: {
+    width: "100%",
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6,
+  },
+  scoreHalfLead: {
+    backgroundColor: "rgba(255, 149, 0, 0.12)",
+  },
+  scoreTextLead: {
+    color: "#FF9500",
+  },
   scoreBoxPlaceholder: {
     width: 36,
     height: 54,