From 547c204e88180981d8d2a7ebcd348ef3dd37669a Mon Sep 17 00:00:00 2001 From: yuchenglong Date: Wed, 21 Jan 2026 09:26:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=AF=94=E8=B5=9B=E5=8D=A1?= =?UTF-8?q?=E7=89=87=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=AF=94?= =?UTF-8?q?=E5=88=86=E9=A2=86=E5=85=88=E7=8A=B6=E6=80=81=E5=92=8C=E9=A2=9D?= =?UTF-8?q?=E5=A4=96=E7=BB=9F=E8=AE=A1=E4=BF=A1=E6=81=AF=E7=9A=84=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/match-card.tsx | 316 +++++++++++++++++++++++++------------- 1 file changed, 206 insertions(+), 110 deletions(-) diff --git a/components/match-card.tsx b/components/match-card.tsx index 0bb7756..eb0db78 100644 --- a/components/match-card.tsx +++ b/components/match-card.tsx @@ -123,12 +123,42 @@ export function MatchCard({ 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 (s && s !== "-" && s !== "0 - 0") - return { home: s, away: "", hasScore: true }; - if (s === "0 - 0" || s === "0-0") - return { home: "0", away: "0", hasScore: true }; - return { home: "", away: "", hasScore: false }; + if (m) { + const h = parseInt(m[1]); + const a = parseInt(m[2]); + return { + home: m[1], + away: m[2], + hasScore: true, + homeLead: h > a, + awayLead: a > h, + }; + } + if (s && s !== "-" && s !== "0 - 0") { + return { + home: s, + away: "", + hasScore: true, + homeLead: false, + awayLead: false, + }; + } + if (s === "0 - 0" || s === "0-0") { + return { + home: "0", + away: "0", + hasScore: true, + homeLead: false, + awayLead: false, + }; + } + return { + home: "", + away: "", + hasScore: false, + homeLead: false, + awayLead: false, + }; }, [match.scoreText]); const cardsCount = React.useMemo(() => { @@ -242,50 +272,56 @@ export function MatchCard({ }; const renderOddsRow = (bookmakerName: string, isHighlight: boolean) => { - if (!oddsSettings.enabled || !bookmakerName || odds.length === 0) - return null; - const item = odds.find((o) => o.odd_bookmakers === bookmakerName); - if (!item) return null; + if (!oddsSettings.enabled || !bookmakerName) return null; - const val1 = item.odd_1 || item.ah0_1 || "-"; - const val2 = item.odd_x || "0" || "-"; - const val3 = item.odd_2 || item.ah0_2 || "-"; + const item = odds.find((o) => o.odd_bookmakers === bookmakerName); + const hasOdds = !!item; + + const val1 = item?.odd_1 || item?.ah0_1 || "-"; + const val2 = item?.odd_x || "0" || "-"; + const val3 = item?.odd_2 || item?.ah0_2 || "-"; return ( - - - {val1} - - - - - {val2} - - - - - {val3} - - + {hasOdds ? ( + <> + + + {val1} + + + + + {val2} + + + + + {val3} + + + + ) : ( + + )} ); }; @@ -395,55 +431,90 @@ export function MatchCard({ - {/* Right: Score box + favorite */} + {/* Right: Score box + extra stats + favorite */} - {scoreParts.hasScore ? ( - + {scoreParts.hasScore ? ( + + + + {scoreParts.home} + + + + + + {scoreParts.away} + + + + ) : ( + + )} + + + + {extraStats.home !== "" || extraStats.away !== "" ? ( + + + {extraStats.home} + + + {extraStats.away} + + + ) : null} + + + + { + e.stopPropagation(); + toggleFavorite(); + }} + disabled={loading} + hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} > - - {scoreParts.home} - - - - {scoreParts.away} - - - ) : ( - - )} - - {(extraStats.home !== "" || extraStats.away !== "") && ( - - - {extraStats.home} - - - {extraStats.away} - - - )} - - { - e.stopPropagation(); - toggleFavorite(); - }} - disabled={loading} - hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} - > - - + + + @@ -505,6 +576,7 @@ const styles = StyleSheet.create({ alignItems: "center", flex: 1, minWidth: 0, + marginRight: 8, }, teamLogo: { width: 18, @@ -514,13 +586,14 @@ const styles = StyleSheet.create({ fontSize: 12, fontWeight: "600", marginLeft: 6, - flex: 1, + flexShrink: 1, minWidth: 0, }, bookmakerOddsRow: { - marginLeft: 4, + width: 98, flexDirection: "row", gap: 4, + justifyContent: "flex-end", }, oddBadge: { paddingHorizontal: 5, @@ -540,35 +613,58 @@ const styles = StyleSheet.create({ right: { flexDirection: "row", alignItems: "center", - gap: 6, + }, + scoreContainer: { + width: 25, + alignItems: "center", + }, + extraStatsContainer: { + width: 18, + alignItems: "center", + marginHorizontal: 4, + }, + favoriteContainer: { + width: 25, + alignItems: "center", }, scoreBox: { - width: 30, - height: 54, + width: 28, + height: 55, borderRadius: 8, - borderWidth: 1.5, + borderWidth: 1.2, + alignItems: "stretch", + justifyContent: "center", + overflow: "hidden", + }, + scoreHalf: { + flex: 1, alignItems: "center", justifyContent: "center", }, + scoreHalfLead: { + backgroundColor: "rgba(255, 149, 0, 0.08)", + }, scoreBoxText: { - fontSize: 20, + fontSize: 15, fontWeight: "900", }, + scoreTextLead: { + color: "#FF9500", + }, scoreDivider: { - width: "60%", + width: "100%", height: 1, backgroundColor: "rgba(0,0,0,0.06)", - marginVertical: 1, }, scoreBoxPlaceholder: { - width: 36, - height: 54, + width: 28, + height: 48, }, cardsInline: { flexDirection: "row", alignItems: "center", - gap: 4, - marginLeft: 6, + gap: 6, + marginLeft: 8, flexShrink: 0, }, cardBadge: { @@ -577,7 +673,7 @@ const styles = StyleSheet.create({ borderRadius: 3, alignItems: "center", justifyContent: "center", - paddingHorizontal: 3, + paddingHorizontal: 4, }, cardBadgeYellow: { backgroundColor: "#FFC400", @@ -588,13 +684,13 @@ const styles = StyleSheet.create({ extraStatsColumn: { alignItems: "center", justifyContent: "space-between", - height: 48, + height: 55, paddingVertical: 2, }, extraStatText: { - fontSize: 12, + fontSize: 11, fontWeight: "500", - opacity: 0.6, + opacity: 0.4, }, cardBadgeText: { fontSize: 10,