439 lines
12 KiB
TypeScript
439 lines
12 KiB
TypeScript
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, fetchOdds, removeFavorite } from "@/lib/api";
|
|
import { Match, OddsItem } from "@/types/api";
|
|
import { Image } from "expo-image";
|
|
import { LinearGradient } from "expo-linear-gradient";
|
|
import { useRouter } from "expo-router";
|
|
import React, { useEffect, useState } from "react";
|
|
import { Pressable, StyleSheet, TouchableOpacity, View } from "react-native";
|
|
|
|
interface MatchCardProps {
|
|
match: Match;
|
|
onPress?: (match: Match) => void;
|
|
onFavoriteToggle?: (matchId: string, isFav: boolean) => void;
|
|
}
|
|
|
|
export function MatchCard({
|
|
match,
|
|
onPress,
|
|
onFavoriteToggle,
|
|
}: MatchCardProps) {
|
|
const router = useRouter();
|
|
const { theme } = useTheme();
|
|
const { state } = useAppState();
|
|
const [isFav, setIsFav] = useState(match.fav);
|
|
const [loading, setLoading] = useState(false);
|
|
const [odds, setOdds] = useState<OddsItem[]>(match.odds || []);
|
|
// console.log("MatchCard render:", JSON.stringify(match));
|
|
|
|
const oddsSettings = state.oddsSettings;
|
|
|
|
useEffect(() => {
|
|
if (
|
|
oddsSettings.enabled &&
|
|
oddsSettings.selectedBookmakers.length > 0 &&
|
|
!match.odds
|
|
) {
|
|
fetchOdds(match.sportId || 1, parseInt(match.id))
|
|
.then((res) => {
|
|
const matchOdds = res[match.id]?.data || [];
|
|
setOdds(matchOdds);
|
|
})
|
|
.catch((err) => console.log("Fetch match card odds error:", err));
|
|
}
|
|
}, [
|
|
oddsSettings.enabled,
|
|
oddsSettings.selectedBookmakers,
|
|
match.id,
|
|
match.odds,
|
|
]);
|
|
|
|
// 当外部传入的 match.fav 改变时，更新内部状态
|
|
useEffect(() => {
|
|
setIsFav(match.fav);
|
|
}, [match.fav]);
|
|
|
|
const isDark = theme === "dark";
|
|
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
|
const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
|
|
const borderColor = isDark ? "#2C2C2E" : "rgba(0,0,0,0.06)";
|
|
const scoreBorder = isDark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.12)";
|
|
const scoreBg = isDark ? "rgba(255,255,255,0.04)" : "rgba(255,255,255,0.6)";
|
|
|
|
const oddBadgeBg = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.03)";
|
|
|
|
const isLive = React.useMemo(() => {
|
|
return !!match.isLive;
|
|
}, [match.isLive]);
|
|
|
|
const timeLabel = React.useMemo(() => {
|
|
const raw = (match.time || "").trim();
|
|
if (!raw) return "";
|
|
if (/^\d{1,3}$/.test(raw)) return `${raw}'`;
|
|
return raw;
|
|
}, [match.time]);
|
|
|
|
const leagueShort = React.useMemo(() => {
|
|
const league = (match.leagueName || match.league || "").trim();
|
|
if (!league) return "--";
|
|
const first = league.split(/[^A-Za-z0-9]+/).filter(Boolean)[0] || league;
|
|
return first.slice(0, 3).toUpperCase();
|
|
}, [match.leagueName, match.league]);
|
|
|
|
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") return { home: "0", away: "0", hasScore: true };
|
|
return { home: "", away: "", hasScore: false };
|
|
}, [match.scoreText]);
|
|
|
|
const handlePress = () => {
|
|
if (onPress) {
|
|
onPress(match);
|
|
} else {
|
|
if (isLive) {
|
|
router.push({
|
|
pathname: "/live-detail/[id]",
|
|
params: {
|
|
id: match.id,
|
|
league_id: match.leagueId?.toString() || "",
|
|
sport_id: match.sportId?.toString() || "",
|
|
},
|
|
});
|
|
} else {
|
|
router.push(`/match-detail/${match.id}`);
|
|
}
|
|
}
|
|
};
|
|
|
|
const toggleFavorite = async () => {
|
|
if (loading) return;
|
|
setLoading(true);
|
|
const newFavState = !isFav;
|
|
try {
|
|
if (newFavState) {
|
|
await addFavorite({
|
|
matchId: parseInt(match.id),
|
|
type: "match",
|
|
typeId: match.id,
|
|
notify: true,
|
|
});
|
|
} else {
|
|
await removeFavorite({
|
|
type: "match",
|
|
typeId: match.id,
|
|
});
|
|
}
|
|
setIsFav(newFavState);
|
|
if (onFavoriteToggle) {
|
|
onFavoriteToggle(match.id, newFavState);
|
|
}
|
|
} catch (error) {
|
|
console.error("Toggle favorite error:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={handlePress}
|
|
style={({ pressed }) => [
|
|
styles.card,
|
|
{ backgroundColor: cardBg, borderColor, opacity: pressed ? 0.7 : 1 },
|
|
]}
|
|
>
|
|
{isLive && (
|
|
<LinearGradient
|
|
colors={
|
|
isDark
|
|
? ["rgba(255, 149, 0, 0.15)", "transparent"]
|
|
: ["rgba(255, 149, 0, 0.1)", "transparent"]
|
|
}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 0.5, y: 0 }}
|
|
style={StyleSheet.absoluteFill}
|
|
/>
|
|
)}
|
|
<View style={styles.row}>
|
|
{/* Left: League short + time */}
|
|
<View style={styles.left}>
|
|
<ThemedText style={styles.leagueShortText} numberOfLines={1}>
|
|
{leagueShort}
|
|
</ThemedText>
|
|
<ThemedText
|
|
style={[styles.timeText, isLive && styles.timeTextLive]}
|
|
numberOfLines={1}
|
|
>
|
|
{timeLabel}
|
|
</ThemedText>
|
|
</View>
|
|
|
|
{/* Middle: Teams & Odds */}
|
|
<View style={styles.middle}>
|
|
<View style={styles.teamContainer}>
|
|
<View style={styles.teamRow}>
|
|
{match.homeTeamLogo ? (
|
|
<Image
|
|
source={{ uri: match.homeTeamLogo }}
|
|
style={styles.teamLogo}
|
|
contentFit="contain"
|
|
/>
|
|
) : null}
|
|
<ThemedText
|
|
type="defaultSemiBold"
|
|
style={styles.teamLine}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{match.homeTeamName || match.home}
|
|
</ThemedText>
|
|
</View>
|
|
<View style={styles.teamRow}>
|
|
{match.awayTeamLogo ? (
|
|
<Image
|
|
source={{ uri: match.awayTeamLogo }}
|
|
style={styles.teamLogo}
|
|
contentFit="contain"
|
|
/>
|
|
) : null}
|
|
<ThemedText
|
|
type="defaultSemiBold"
|
|
style={styles.teamLine}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{match.awayTeamName || match.away}
|
|
</ThemedText>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Odds Section */}
|
|
{oddsSettings.enabled && odds.length > 0 && (
|
|
<View style={styles.oddsContainer}>
|
|
{oddsSettings.selectedBookmakers.map((bookmaker, idx) => {
|
|
const item = odds.find((o) => o.odd_bookmakers === bookmaker);
|
|
if (!item) return null;
|
|
// Pick 3 values to display. Using odd_1, odd_x, odd_2 for example.
|
|
// Or try to match the screenshot's 3-column style.
|
|
const val1 = item.odd_1 || item.ah0_1 || "-";
|
|
const val2 = item.odd_x || "0" || "-";
|
|
const val3 = item.odd_2 || item.ah0_2 || "-";
|
|
|
|
return (
|
|
<View key={bookmaker} style={styles.bookmakerOddsRow}>
|
|
<View
|
|
style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}
|
|
>
|
|
<ThemedText
|
|
style={[
|
|
styles.oddText,
|
|
{ color: isDark ? "#fff" : "#000" },
|
|
idx === 0 && styles.oddTextHighlight,
|
|
]}
|
|
>
|
|
{val1}
|
|
</ThemedText>
|
|
</View>
|
|
<View
|
|
style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}
|
|
>
|
|
<ThemedText
|
|
style={[
|
|
styles.oddText,
|
|
{ color: isDark ? "#fff" : "#000" },
|
|
idx === 0 && styles.oddTextHighlight,
|
|
]}
|
|
>
|
|
{val2}
|
|
</ThemedText>
|
|
</View>
|
|
<View
|
|
style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}
|
|
>
|
|
<ThemedText
|
|
style={[
|
|
styles.oddText,
|
|
{ color: isDark ? "#fff" : "#000" },
|
|
idx === 0 && styles.oddTextHighlight,
|
|
]}
|
|
>
|
|
{val3}
|
|
</ThemedText>
|
|
</View>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Right: Score box + favorite */}
|
|
<View style={styles.right}>
|
|
{scoreParts.hasScore ? (
|
|
<View
|
|
style={[
|
|
styles.scoreBox,
|
|
{ borderColor: scoreBorder, backgroundColor: scoreBg },
|
|
]}
|
|
>
|
|
<ThemedText style={styles.scoreBoxText} numberOfLines={1}>
|
|
{scoreParts.home}
|
|
</ThemedText>
|
|
<ThemedText style={styles.scoreBoxText} numberOfLines={1}>
|
|
{scoreParts.away}
|
|
</ThemedText>
|
|
</View>
|
|
) : (
|
|
<View style={styles.scoreBoxPlaceholder} />
|
|
)}
|
|
|
|
<TouchableOpacity
|
|
onPress={(e) => {
|
|
e.stopPropagation();
|
|
toggleFavorite();
|
|
}}
|
|
disabled={loading}
|
|
hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
|
|
>
|
|
<IconSymbol
|
|
name={isFav ? "star" : "star-outline"}
|
|
size={22}
|
|
color={isFav ? "#FFD700" : iconColor}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
height: 78,
|
|
paddingHorizontal: 14,
|
|
marginBottom: 12,
|
|
borderRadius: 14,
|
|
borderWidth: 1,
|
|
justifyContent: "center",
|
|
overflow: "hidden",
|
|
// iOS shadow
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 0.5 },
|
|
shadowOpacity: 0.03,
|
|
shadowRadius: 2,
|
|
// Android elevation
|
|
elevation: 1,
|
|
},
|
|
row: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 12,
|
|
},
|
|
left: {
|
|
width: 52,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 6,
|
|
},
|
|
leagueShortText: {
|
|
fontSize: 12,
|
|
fontWeight: "700",
|
|
opacity: 0.85,
|
|
},
|
|
timeText: {
|
|
fontSize: 12,
|
|
opacity: 0.55,
|
|
},
|
|
timeTextLive: {
|
|
color: "#FF3B30",
|
|
opacity: 1,
|
|
fontWeight: "bold",
|
|
},
|
|
middle: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
gap: 8,
|
|
minWidth: 0,
|
|
},
|
|
teamContainer: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
gap: 8,
|
|
minWidth: 0,
|
|
},
|
|
teamRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
},
|
|
teamLogo: {
|
|
width: 24,
|
|
height: 24,
|
|
},
|
|
teamLine: {
|
|
fontSize: 15,
|
|
lineHeight: 18,
|
|
flex: 1,
|
|
},
|
|
oddsContainer: {
|
|
gap: 8,
|
|
alignItems: "flex-end",
|
|
},
|
|
bookmakerOddsRow: {
|
|
flexDirection: "row",
|
|
gap: 4,
|
|
},
|
|
oddBadge: {
|
|
backgroundColor: "rgba(0,0,0,0.03)",
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2,
|
|
borderRadius: 6,
|
|
minWidth: 40,
|
|
alignItems: "center",
|
|
},
|
|
oddText: {
|
|
fontSize: 11,
|
|
fontWeight: "600",
|
|
opacity: 0.8,
|
|
},
|
|
oddTextHighlight: {
|
|
color: "#FF9500",
|
|
opacity: 1,
|
|
},
|
|
right: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
},
|
|
scoreBox: {
|
|
width: 44,
|
|
height: 56,
|
|
borderRadius: 10,
|
|
borderWidth: 1,
|
|
borderColor: "rgba(0,0,0,0.12)",
|
|
backgroundColor: "rgba(255,255,255,0.6)",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 6,
|
|
},
|
|
scoreBoxText: {
|
|
fontSize: 16,
|
|
fontWeight: "700",
|
|
opacity: 0.9,
|
|
},
|
|
scoreBoxPlaceholder: {
|
|
width: 44,
|
|
height: 56,
|
|
},
|
|
});
|