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,