实现直播详情页
This commit is contained in:
yuchenglong
534
components/live-detail/events-timeline.tsx
Normal file
534
components/live-detail/events-timeline.tsx
Normal file
@@ -0,0 +1,534 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { LiveScoreMatch } from "@/types/api";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { StyleSheet, Switch, View } from "react-native";
|
||||
|
||||
interface EventItem {
|
||||
time: string;
|
||||
type: "goal" | "card" | "sub" | "status";
|
||||
side: "home" | "away" | "center";
|
||||
player?: string;
|
||||
playerIn?: string;
|
||||
playerOut?: string;
|
||||
detail?: string;
|
||||
score?: string;
|
||||
isPenalty?: boolean;
|
||||
}
|
||||
|
||||
interface EventsTimelineProps {
|
||||
match: LiveScoreMatch;
|
||||
isDark: boolean;
|
||||
}
|
||||
|
||||
export function EventsTimeline({ match, isDark }: EventsTimelineProps) {
|
||||
const { t } = useTranslation();
|
||||
const [showSub, setShowSub] = useState(true);
|
||||
const [showCard, setShowCard] = useState(true);
|
||||
|
||||
// Parse and merge events
|
||||
const events: EventItem[] = [];
|
||||
|
||||
// 1. Goals
|
||||
match.goalscorers?.forEach((g) => {
|
||||
const isHome = !!g.home_scorer;
|
||||
events.push({
|
||||
time: g.time,
|
||||
type: "goal",
|
||||
side: isHome ? "home" : "away",
|
||||
player: isHome ? g.home_scorer : g.away_scorer,
|
||||
detail: isHome ? g.home_assist : g.away_assist,
|
||||
score: g.score,
|
||||
isPenalty: g.info?.toLowerCase().includes("penalty"),
|
||||
});
|
||||
});
|
||||
|
||||
// 2. Cards
|
||||
match.cards?.forEach((c) => {
|
||||
const isHome = !!c.home_fault;
|
||||
events.push({
|
||||
time: c.time,
|
||||
type: "card",
|
||||
side: isHome ? "home" : "away",
|
||||
player: isHome ? c.home_fault : c.away_fault,
|
||||
detail: c.card, // "yellow card" or "red card"
|
||||
});
|
||||
});
|
||||
|
||||
// 3. Substitutes
|
||||
match.substitutes?.forEach((s) => {
|
||||
const isHome = Array.isArray(s.home_scorer) ? false : !!s.home_scorer?.in;
|
||||
const isAway = Array.isArray(s.away_scorer) ? false : !!s.away_scorer?.in;
|
||||
|
||||
if (isHome) {
|
||||
const h = s.home_scorer as any;
|
||||
events.push({
|
||||
time: s.time,
|
||||
type: "sub",
|
||||
side: "home",
|
||||
playerIn: h.in,
|
||||
playerOut: h.out,
|
||||
});
|
||||
}
|
||||
if (isAway) {
|
||||
const a = s.away_scorer as any;
|
||||
events.push({
|
||||
time: s.time,
|
||||
type: "sub",
|
||||
side: "away",
|
||||
playerIn: a.in,
|
||||
playerOut: a.out,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 4. Status items
|
||||
events.push({
|
||||
time: "0",
|
||||
type: "status",
|
||||
side: "center",
|
||||
detail: t("detail.events.start"),
|
||||
});
|
||||
|
||||
if (match.event_halftime_result) {
|
||||
events.push({
|
||||
time: "45",
|
||||
type: "status",
|
||||
side: "center",
|
||||
detail: `${t("detail.events.ht")} ${match.event_halftime_result}`,
|
||||
});
|
||||
}
|
||||
|
||||
// Sort by time (Descending - Newer at top)
|
||||
const sortedEvents = events.sort((a, b) => {
|
||||
const timeA = parseInt(a.time.replace("'", "")) || 0;
|
||||
const timeB = parseInt(b.time.replace("'", "")) || 0;
|
||||
return timeB - timeA;
|
||||
});
|
||||
|
||||
const filteredEvents = sortedEvents.filter((ev) => {
|
||||
if (ev.type === "sub") return showSub;
|
||||
if (ev.type === "card") return showCard;
|
||||
return true;
|
||||
});
|
||||
|
||||
return (
|
||||
<ThemedView style={[styles.container, isDark && styles.darkContainer]}>
|
||||
<View style={styles.timelineWrapper}>
|
||||
<View style={[styles.centerLine, isDark && styles.darkLine]} />
|
||||
|
||||
{filteredEvents.map((event, index) => (
|
||||
<View key={index} style={styles.eventRow}>
|
||||
{/* Home Side */}
|
||||
<View style={styles.sideContainer}>
|
||||
{event.side === "home" && (
|
||||
<View style={[styles.eventContent, styles.homeContent]}>
|
||||
{event.type === "goal" && (
|
||||
<View style={styles.goalBox}>
|
||||
<ThemedText style={styles.eventLabel}>
|
||||
{event.isPenalty
|
||||
? t("detail.events.penalty_goal")
|
||||
: t("detail.events.goal")}
|
||||
</ThemedText>
|
||||
<View
|
||||
style={[
|
||||
styles.playerIconPlaceholder,
|
||||
isDark && styles.darkItem,
|
||||
isDark && { borderColor: "#333" },
|
||||
]}
|
||||
>
|
||||
<IconSymbol
|
||||
name="person"
|
||||
size={16}
|
||||
color={isDark ? "#666" : "#BBB"}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={[styles.scorePill, isDark && styles.darkItem]}
|
||||
>
|
||||
<IconSymbol
|
||||
name="football"
|
||||
size={12}
|
||||
color={isDark ? "#FFF" : "#000"}
|
||||
/>
|
||||
<ThemedText
|
||||
style={[styles.scoreLabel, isDark && styles.darkText]}
|
||||
>
|
||||
{event.score}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
{event.type === "card" && (
|
||||
<View
|
||||
style={[
|
||||
styles.cardPill,
|
||||
isDark && styles.darkItem,
|
||||
{ borderColor: isDark ? "#333" : "#EEE" },
|
||||
]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.miniCard,
|
||||
{
|
||||
backgroundColor: event.detail?.includes("yellow")
|
||||
? "#FFD700"
|
||||
: "#FF3B30",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{event.type === "sub" && (
|
||||
<View style={styles.subBox}>
|
||||
<ThemedText
|
||||
style={[styles.subInText, isDark && styles.darkText]}
|
||||
>
|
||||
{event.playerIn}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.subOutText}>
|
||||
{event.playerOut}
|
||||
</ThemedText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Time Point */}
|
||||
<View style={styles.timePointContainer}>
|
||||
{event.type !== "status" ? (
|
||||
<View style={[styles.timeCircle, isDark && styles.darkItem]}>
|
||||
<ThemedText
|
||||
style={[styles.timeText, isDark && styles.darkText]}
|
||||
>
|
||||
{`${event.time}'`}
|
||||
</ThemedText>
|
||||
</View>
|
||||
) : (
|
||||
<View
|
||||
style={[
|
||||
styles.statusPill,
|
||||
isDark && styles.darkItem,
|
||||
isDark && { borderColor: "#333" },
|
||||
]}
|
||||
>
|
||||
<ThemedText
|
||||
style={[styles.statusText, isDark && styles.darkText]}
|
||||
>
|
||||
{event.detail}
|
||||
</ThemedText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Away Side */}
|
||||
<View style={styles.sideContainer}>
|
||||
{event.side === "away" && (
|
||||
<View style={[styles.eventContent, styles.awayContent]}>
|
||||
{event.type === "goal" && (
|
||||
<View style={styles.goalBox}>
|
||||
<View
|
||||
style={[styles.scorePill, isDark && styles.darkItem]}
|
||||
>
|
||||
<ThemedText
|
||||
style={[styles.scoreLabel, isDark && styles.darkText]}
|
||||
>
|
||||
{event.score}
|
||||
</ThemedText>
|
||||
<IconSymbol
|
||||
name="football"
|
||||
size={12}
|
||||
color={isDark ? "#FFF" : "#000"}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.playerIconPlaceholder,
|
||||
isDark && styles.darkItem,
|
||||
isDark && { borderColor: "#333" },
|
||||
]}
|
||||
>
|
||||
<IconSymbol
|
||||
name="person"
|
||||
size={16}
|
||||
color={isDark ? "#666" : "#BBB"}
|
||||
/>
|
||||
</View>
|
||||
<ThemedText style={styles.eventLabel}>
|
||||
{event.isPenalty
|
||||
? t("detail.events.penalty_goal")
|
||||
: t("detail.events.goal")}
|
||||
</ThemedText>
|
||||
</View>
|
||||
)}
|
||||
{event.type === "card" && (
|
||||
<View
|
||||
style={[
|
||||
styles.cardPill,
|
||||
isDark && styles.darkItem,
|
||||
{ borderColor: isDark ? "#333" : "#EEE" },
|
||||
]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.miniCard,
|
||||
{
|
||||
backgroundColor: event.detail?.includes("yellow")
|
||||
? "#FFD700"
|
||||
: "#FF3B30",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{event.type === "sub" && (
|
||||
<View style={styles.subBox}>
|
||||
<ThemedText
|
||||
style={[
|
||||
styles.subInText,
|
||||
isDark && styles.darkText,
|
||||
{ textAlign: "left" },
|
||||
]}
|
||||
>
|
||||
{event.playerIn}
|
||||
</ThemedText>
|
||||
<ThemedText
|
||||
style={[styles.subOutText, { textAlign: "left" }]}
|
||||
>
|
||||
{event.playerOut}
|
||||
</ThemedText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Footer Controls */}
|
||||
<View style={[styles.footer, isDark && { borderTopColor: "#333" }]}>
|
||||
<ThemedText style={styles.footerLabel}>
|
||||
{t("detail.events.toggle_visibility")}
|
||||
</ThemedText>
|
||||
<View style={styles.footerSwitches}>
|
||||
<View style={styles.switchItem}>
|
||||
<IconSymbol name="swap-vertical" size={16} color="#4CAF50" />
|
||||
<Switch
|
||||
value={showSub}
|
||||
onValueChange={setShowSub}
|
||||
trackColor={{ false: "#DDD", true: "#3b5998" }}
|
||||
thumbColor="#FFF"
|
||||
style={styles.miniSwitch}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.switchItem}>
|
||||
<View
|
||||
style={[
|
||||
styles.miniCard,
|
||||
{ backgroundColor: "#FFD700", width: 8, height: 12 },
|
||||
]}
|
||||
/>
|
||||
<Switch
|
||||
value={showCard}
|
||||
onValueChange={setShowCard}
|
||||
trackColor={{ false: "#DDD", true: "#3b5998" }}
|
||||
thumbColor="#FFF"
|
||||
style={styles.miniSwitch}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 16,
|
||||
borderRadius: 20,
|
||||
backgroundColor: "#FFF",
|
||||
padding: 16,
|
||||
paddingBottom: 30,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 10,
|
||||
elevation: 2,
|
||||
},
|
||||
darkContainer: {
|
||||
backgroundColor: "#1E1E20",
|
||||
shadowOpacity: 0,
|
||||
elevation: 0,
|
||||
},
|
||||
darkItem: {
|
||||
backgroundColor: "#2C2C2E",
|
||||
borderColor: "#38383a",
|
||||
},
|
||||
darkText: {
|
||||
color: "#FFF",
|
||||
},
|
||||
timelineWrapper: {
|
||||
position: "relative",
|
||||
alignItems: "center",
|
||||
},
|
||||
centerLine: {
|
||||
position: "absolute",
|
||||
width: 1,
|
||||
height: "100%",
|
||||
backgroundColor: "#F0F0F0",
|
||||
top: 0,
|
||||
},
|
||||
darkLine: {
|
||||
backgroundColor: "#333",
|
||||
},
|
||||
eventRow: {
|
||||
flexDirection: "row",
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
marginVertical: 12,
|
||||
},
|
||||
sideContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
timePointContainer: {
|
||||
width: 60,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
timeCircle: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
backgroundColor: "#FFF",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
zIndex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: "#F0F0F0",
|
||||
},
|
||||
timeText: {
|
||||
fontSize: 12,
|
||||
fontWeight: "500",
|
||||
color: "#333",
|
||||
},
|
||||
statusPill: {
|
||||
position: "absolute",
|
||||
backgroundColor: "#FFF",
|
||||
borderWidth: 1,
|
||||
borderColor: "#E0E0E0",
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 15,
|
||||
zIndex: 2,
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
eventContent: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
homeContent: {
|
||||
justifyContent: "flex-end",
|
||||
paddingRight: 10,
|
||||
},
|
||||
awayContent: {
|
||||
justifyContent: "flex-start",
|
||||
paddingLeft: 10,
|
||||
},
|
||||
scorePill: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#FFF",
|
||||
borderWidth: 1.5,
|
||||
borderColor: "#FFD700",
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 2,
|
||||
gap: 4,
|
||||
},
|
||||
scoreLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
eventLabel: {
|
||||
fontSize: 12,
|
||||
color: "#999",
|
||||
},
|
||||
goalBox: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
},
|
||||
playerIconPlaceholder: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
backgroundColor: "#EEE",
|
||||
borderWidth: 1,
|
||||
borderColor: "#DDD",
|
||||
},
|
||||
cardPill: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
borderWidth: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#FFF",
|
||||
},
|
||||
miniCard: {
|
||||
width: 10,
|
||||
height: 14,
|
||||
borderRadius: 2,
|
||||
},
|
||||
subBox: {
|
||||
alignItems: "flex-end",
|
||||
},
|
||||
subInText: {
|
||||
fontSize: 12,
|
||||
color: "#333",
|
||||
fontWeight: "500",
|
||||
},
|
||||
subOutText: {
|
||||
fontSize: 10,
|
||||
color: "#999",
|
||||
},
|
||||
penaltyIcon: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
backgroundColor: "#4B77FF",
|
||||
borderRadius: 2,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
footer: {
|
||||
marginTop: 30,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: "#F0F0F0",
|
||||
paddingTop: 16,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
footerLabel: {
|
||||
fontSize: 12,
|
||||
color: "#999",
|
||||
},
|
||||
footerSwitches: {
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
},
|
||||
switchItem: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
},
|
||||
miniSwitch: {
|
||||
transform: [{ scaleX: 0.7 }, { scaleY: 0.7 }],
|
||||
},
|
||||
});
|
||||
90
components/live-detail/live-league-info.tsx
Normal file
90
components/live-detail/live-league-info.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { LiveScoreMatch } from "@/types/api";
|
||||
import React from "react";
|
||||
import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
|
||||
|
||||
interface LiveLeagueInfoProps {
|
||||
match: LiveScoreMatch;
|
||||
}
|
||||
|
||||
export function LiveLeagueInfo({ match }: LiveLeagueInfoProps) {
|
||||
// Force dark style for this component to match the header design language
|
||||
const bgColor = "#121212";
|
||||
const borderColor = "rgba(255,255,255,0.1)";
|
||||
const textColor = "#FFF";
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.container,
|
||||
{ backgroundColor: bgColor, borderBottomColor: borderColor },
|
||||
]}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.left}>
|
||||
{match.league_logo ? (
|
||||
<Image
|
||||
source={{ uri: match.league_logo }}
|
||||
style={styles.leagueLogo}
|
||||
/>
|
||||
) : (
|
||||
<View style={[styles.fallbackLogo, { backgroundColor: "#333" }]}>
|
||||
<IconSymbol name="trophy-outline" size={14} color="#AAA" />
|
||||
</View>
|
||||
)}
|
||||
<ThemedText style={[styles.leagueName, { color: textColor }]}>
|
||||
{match.league_name}
|
||||
</ThemedText>
|
||||
</View>
|
||||
<View style={styles.right}>
|
||||
<ThemedText style={styles.roundText}>
|
||||
{match.league_round || ""}
|
||||
</ThemedText>
|
||||
<IconSymbol name="chevron-forward" size={16} color="#888" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
left: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
leagueLogo: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
resizeMode: "contain",
|
||||
marginRight: 8,
|
||||
},
|
||||
fallbackLogo: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: 8,
|
||||
},
|
||||
leagueName: {
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
},
|
||||
right: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
roundText: {
|
||||
fontSize: 12,
|
||||
color: "#888",
|
||||
marginRight: 8,
|
||||
},
|
||||
});
|
||||
113
components/live-detail/live-match-tabs.tsx
Normal file
113
components/live-detail/live-match-tabs.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
|
||||
|
||||
interface LiveMatchTabsProps {
|
||||
activeTab: string;
|
||||
onTabChange: (tab: string) => void;
|
||||
isDark: boolean;
|
||||
}
|
||||
|
||||
export function LiveMatchTabs({
|
||||
activeTab,
|
||||
onTabChange,
|
||||
isDark,
|
||||
}: LiveMatchTabsProps) {
|
||||
const { t } = useTranslation();
|
||||
const containerBg = isDark ? "#121212" : "#F5F5F5";
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: "detail",
|
||||
label: t("detail.tabs.info"),
|
||||
icon: "document-text-outline",
|
||||
},
|
||||
{ id: "stats", label: t("detail.tabs.stats"), icon: "stats-chart-outline" },
|
||||
{ id: "odds", label: t("detail.tabs.odds"), icon: "cash-outline" },
|
||||
{ id: "lineup", label: t("detail.tabs.lineup"), icon: "shirt-outline" },
|
||||
{
|
||||
id: "analysis",
|
||||
label: t("detail.tabs.analysis"),
|
||||
icon: "pie-chart-outline",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: containerBg }]}>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
>
|
||||
{tabs.map((tab) => {
|
||||
const isActive = activeTab === tab.id;
|
||||
const activeColor = "#FF9800"; // 橙色
|
||||
const inactiveColor = isDark ? "#AAA" : "#666";
|
||||
const inactiveBg = isDark
|
||||
? "rgba(255,255,255,0.05)"
|
||||
: "rgba(0,0,0,0.03)";
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={tab.id}
|
||||
onPress={() => onTabChange(tab.id)}
|
||||
style={[
|
||||
styles.tabBtn,
|
||||
{
|
||||
backgroundColor: isActive
|
||||
? isDark
|
||||
? "#2C2C2E"
|
||||
: "#FFF"
|
||||
: inactiveBg,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<IconSymbol
|
||||
name={tab.icon as any}
|
||||
size={16}
|
||||
color={isActive ? activeColor : inactiveColor}
|
||||
style={{ marginRight: 6 }}
|
||||
/>
|
||||
<ThemedText
|
||||
style={[
|
||||
styles.tabLabel,
|
||||
{
|
||||
color: isActive ? activeColor : inactiveColor,
|
||||
fontWeight: isActive ? "700" : "500",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{tab.label}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingVertical: 8,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: 16,
|
||||
gap: 10,
|
||||
alignItems: "center",
|
||||
},
|
||||
tabBtn: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: 15,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 20,
|
||||
},
|
||||
tabLabel: {
|
||||
fontSize: 14,
|
||||
includeFontPadding: false,
|
||||
},
|
||||
});
|
||||
201
components/live-detail/live-score-header.tsx
Normal file
201
components/live-detail/live-score-header.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { LiveScoreMatch } from "@/types/api";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { useRouter } from "expo-router";
|
||||
import React from "react";
|
||||
import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
|
||||
|
||||
interface LiveScoreHeaderProps {
|
||||
match: LiveScoreMatch;
|
||||
topInset: number;
|
||||
}
|
||||
|
||||
export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<LinearGradient
|
||||
colors={["#521e10", "#0e0e10"]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={[styles.container, { paddingTop: Math.max(topInset, 10) }]}
|
||||
>
|
||||
{/* Top Bar */}
|
||||
<View style={styles.topBar}>
|
||||
<View style={styles.leftContainer}>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.back()}
|
||||
style={styles.iconBtn}
|
||||
>
|
||||
<IconSymbol name="chevron-back" size={28} color="#FFF" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.statusContainer}>
|
||||
<ThemedText style={styles.statusText}>
|
||||
{match.event_status || "Live"}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.rightActions}>
|
||||
<TouchableOpacity style={styles.iconBtn}>
|
||||
<IconSymbol name="notifications-outline" size={24} color="#FFF" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.iconBtn}>
|
||||
<IconSymbol name="star-outline" size={24} color="#FFF" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Score Section */}
|
||||
<View style={styles.scoreRow}>
|
||||
<View style={styles.teamInfo}>
|
||||
<View style={styles.logoContainer}>
|
||||
<Image
|
||||
source={{ uri: match.home_team_logo }}
|
||||
style={styles.teamLogo}
|
||||
/>
|
||||
</View>
|
||||
<ThemedText style={styles.teamName} numberOfLines={2}>
|
||||
{match.event_home_team}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.centerScore}>
|
||||
<View style={styles.scoreBox}>
|
||||
<ThemedText style={styles.scoreValue}>
|
||||
{match.event_final_result?.replace(" - ", "-") || "0-0"}
|
||||
</ThemedText>
|
||||
</View>
|
||||
<ThemedText style={styles.timeText}>{match.event_time}</ThemedText>
|
||||
{match.goalscorers && match.goalscorers.length > 0 && (
|
||||
<View style={styles.lastGoalContainer}>
|
||||
<IconSymbol name="football-outline" size={12} color="#FFF" />
|
||||
<ThemedText style={styles.lastGoalText}>
|
||||
{match.goalscorers[match.goalscorers.length - 1].home_scorer ||
|
||||
match.goalscorers[match.goalscorers.length - 1].away_scorer}
|
||||
</ThemedText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.teamInfo}>
|
||||
<View style={styles.logoContainer}>
|
||||
<Image
|
||||
source={{ uri: match.away_team_logo }}
|
||||
style={styles.teamLogo}
|
||||
/>
|
||||
</View>
|
||||
<ThemedText style={styles.teamName} numberOfLines={2}>
|
||||
{match.event_away_team}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingBottom: 24,
|
||||
},
|
||||
topBar: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingHorizontal: 16,
|
||||
marginBottom: 20,
|
||||
},
|
||||
leftContainer: {
|
||||
width: 60,
|
||||
},
|
||||
rightActions: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-end",
|
||||
width: 80,
|
||||
},
|
||||
iconBtn: {
|
||||
padding: 6,
|
||||
marginLeft: 4,
|
||||
},
|
||||
statusContainer: {
|
||||
backgroundColor: "rgba(255,255,255,0.1)",
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
},
|
||||
statusText: {
|
||||
color: "#FFF",
|
||||
fontWeight: "600",
|
||||
fontSize: 14,
|
||||
},
|
||||
scoreRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
teamInfo: {
|
||||
alignItems: "center",
|
||||
width: "30%",
|
||||
},
|
||||
logoContainer: {
|
||||
width: 70,
|
||||
height: 70,
|
||||
marginBottom: 10,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
teamLogo: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
resizeMode: "contain",
|
||||
},
|
||||
teamName: {
|
||||
color: "#FFF",
|
||||
fontSize: 14,
|
||||
fontWeight: "700",
|
||||
textAlign: "center",
|
||||
lineHeight: 18,
|
||||
},
|
||||
centerScore: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "40%",
|
||||
paddingTop: 10,
|
||||
},
|
||||
scoreBox: {
|
||||
backgroundColor: "#FFF",
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 14,
|
||||
marginBottom: 8,
|
||||
minWidth: 100,
|
||||
alignItems: "center",
|
||||
},
|
||||
scoreValue: {
|
||||
color: "#000",
|
||||
fontSize: 30,
|
||||
fontWeight: "700",
|
||||
lineHeight: 30,
|
||||
letterSpacing: 1,
|
||||
},
|
||||
timeText: {
|
||||
color: "#FF4444",
|
||||
fontWeight: "700",
|
||||
fontSize: 14,
|
||||
marginBottom: 4,
|
||||
},
|
||||
lastGoalContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginTop: 4,
|
||||
opacity: 0.9,
|
||||
},
|
||||
lastGoalText: {
|
||||
color: "#FFF",
|
||||
fontSize: 10,
|
||||
marginLeft: 4,
|
||||
},
|
||||
});
|
||||
122
components/live-detail/odds-card.tsx
Normal file
122
components/live-detail/odds-card.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { LiveScoreMatch } from "@/types/api";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { StyleSheet, View } from "react-native";
|
||||
|
||||
interface OddsCardProps {
|
||||
match: LiveScoreMatch;
|
||||
isDark: boolean;
|
||||
}
|
||||
|
||||
export function OddsCard({ match, isDark }: OddsCardProps) {
|
||||
const { t } = useTranslation();
|
||||
// 提取队名缩写或前3个字母
|
||||
const homeAbbr =
|
||||
match.event_home_team?.substring(0, 3).toUpperCase() || "HOME";
|
||||
const awayAbbr =
|
||||
match.event_away_team?.substring(0, 3).toUpperCase() || "AWAY";
|
||||
|
||||
return (
|
||||
<ThemedView style={[styles.container, isDark && styles.darkContainer]}>
|
||||
<View style={styles.header}>
|
||||
<ThemedText style={styles.title}>
|
||||
{t("detail.odds_card.title")}
|
||||
</ThemedText>
|
||||
<View style={styles.badge}>
|
||||
<ThemedText style={styles.badgeText}>bet365</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.row}>
|
||||
<View style={[styles.item, isDark && styles.darkItem]}>
|
||||
<ThemedText style={styles.team}>{homeAbbr}</ThemedText>
|
||||
<ThemedText style={styles.odds}>-0.93</ThemedText>
|
||||
</View>
|
||||
<View style={[styles.item, isDark && styles.darkItem]}>
|
||||
<ThemedText style={styles.team}>HDP</ThemedText>
|
||||
<ThemedText style={styles.odds}>0/0.5</ThemedText>
|
||||
</View>
|
||||
<View style={[styles.item, isDark && styles.darkItem]}>
|
||||
<ThemedText style={styles.team}>{awayAbbr}</ThemedText>
|
||||
<ThemedText style={styles.odds}>0.72</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<ThemedText style={styles.disclaimer}>
|
||||
{t("detail.odds_card.disclaimer")}
|
||||
</ThemedText>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 16,
|
||||
borderRadius: 20,
|
||||
padding: 20,
|
||||
backgroundColor: "#FFF",
|
||||
marginBottom: 16,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 10,
|
||||
elevation: 2,
|
||||
},
|
||||
darkContainer: {
|
||||
backgroundColor: "#1E1E20",
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 18,
|
||||
fontWeight: "500",
|
||||
},
|
||||
badge: {
|
||||
backgroundColor: "#1E4D40",
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 8,
|
||||
},
|
||||
badgeText: {
|
||||
color: "#FFF",
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
row: {
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
},
|
||||
item: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F8F8F8",
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 14,
|
||||
},
|
||||
darkItem: {
|
||||
backgroundColor: "rgba(255,255,255,0.05)",
|
||||
},
|
||||
team: {
|
||||
fontSize: 16,
|
||||
fontWeight: "500",
|
||||
},
|
||||
odds: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
color: "#FF9800",
|
||||
},
|
||||
disclaimer: {
|
||||
fontSize: 12,
|
||||
color: "#BBB",
|
||||
marginTop: 20,
|
||||
textAlign: "center",
|
||||
},
|
||||
});
|
||||
81
components/live-detail/other-info-card.tsx
Normal file
81
components/live-detail/other-info-card.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { LiveScoreMatch } from "@/types/api";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { StyleSheet, View } from "react-native";
|
||||
|
||||
interface OtherInfoCardProps {
|
||||
match: LiveScoreMatch;
|
||||
isDark: boolean;
|
||||
}
|
||||
|
||||
export function OtherInfoCard({ match, isDark }: OtherInfoCardProps) {
|
||||
const { t } = useTranslation();
|
||||
const iconColor = isDark ? "#888" : "#999";
|
||||
|
||||
// 模拟气象数据，因为当前 API 响应中未直接包含这些字段
|
||||
const weather = {
|
||||
temp: "25°C",
|
||||
wind: "3.4m/s",
|
||||
humidity: "31%",
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemedView style={[styles.container, isDark && styles.darkContainer]}>
|
||||
<ThemedText style={styles.title}>
|
||||
{t("detail.other_info.title")}
|
||||
</ThemedText>
|
||||
|
||||
<View style={styles.infoRow}>
|
||||
<IconSymbol name="thermometer-outline" size={24} color={iconColor} />
|
||||
<ThemedText style={styles.infoText}>{weather.temp}</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoRow}>
|
||||
<IconSymbol name="leaf-outline" size={24} color={iconColor} />
|
||||
<ThemedText style={styles.infoText}>{weather.wind}</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoRow}>
|
||||
<IconSymbol name="water-outline" size={24} color={iconColor} />
|
||||
<ThemedText style={styles.infoText}>{weather.humidity}</ThemedText>
|
||||
</View>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 16,
|
||||
borderRadius: 20,
|
||||
backgroundColor: "#FFF",
|
||||
padding: 20,
|
||||
marginBottom: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 10,
|
||||
elevation: 2,
|
||||
},
|
||||
darkContainer: {
|
||||
backgroundColor: "#1E1E20",
|
||||
shadowOpacity: 0,
|
||||
elevation: 0,
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
color: "#666",
|
||||
marginBottom: 20,
|
||||
},
|
||||
infoRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 15,
|
||||
marginBottom: 16,
|
||||
},
|
||||
infoText: {
|
||||
fontSize: 18,
|
||||
fontWeight: "500",
|
||||
},
|
||||
});
|
||||
704
components/live-detail/stats-card.tsx
Normal file
704
components/live-detail/stats-card.tsx
Normal file
@@ -0,0 +1,704 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { LiveScoreMatch } from "@/types/api";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Image,
|
||||
Modal,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Switch,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
interface StatsCardProps {
|
||||
match: LiveScoreMatch;
|
||||
isDark: boolean;
|
||||
}
|
||||
|
||||
export function StatsCard({ match, isDark }: StatsCardProps) {
|
||||
const { t } = useTranslation();
|
||||
const [flagSwitch, setFlagSwitch] = useState(true);
|
||||
const [cardSwitch, setCardSwitch] = useState(true);
|
||||
const [showInfo, setShowInfo] = useState(false);
|
||||
|
||||
// 从 statistics 中提取数据
|
||||
const stats = match.statistics || [];
|
||||
const getStatValue = (type: string) => {
|
||||
const stat = stats.find((s) => s.type === type);
|
||||
return stat
|
||||
? { home: stat.home, away: stat.away }
|
||||
: { home: "0", away: "0" };
|
||||
};
|
||||
|
||||
const possession = getStatValue("Ball Possession");
|
||||
const corners = getStatValue("Corners");
|
||||
const yellowCards = getStatValue("Yellow Cards");
|
||||
|
||||
// 解析控球率数值 (例如 "53%" -> 53)
|
||||
const homePossession =
|
||||
parseInt(possession.home.toString().replace("%", "")) || 50;
|
||||
const awayPossession =
|
||||
parseInt(possession.away.toString().replace("%", "")) || 50;
|
||||
|
||||
// 用随机数据模拟压力曲线
|
||||
const generateData = () => {
|
||||
return Array.from({ length: 90 }, (_, i) => ({
|
||||
time: i,
|
||||
home: Math.sin(i / 5) * 20 + Math.random() * 10,
|
||||
away: Math.cos(i / 4) * 15 + Math.random() * 12,
|
||||
}));
|
||||
};
|
||||
|
||||
const chartData = generateData();
|
||||
|
||||
const iconTintColor = isDark ? "#888" : "#CCC";
|
||||
const switchBg = isDark ? "#2C2C2E" : "#F0F0F0";
|
||||
|
||||
return (
|
||||
<ThemedView style={[styles.container, isDark && styles.darkContainer]}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<View style={styles.headerLeft}>
|
||||
<ThemedText style={styles.title}>
|
||||
{t("detail.stats_card.title")}
|
||||
</ThemedText>
|
||||
<TouchableOpacity onPress={() => setShowInfo(true)}>
|
||||
<IconSymbol
|
||||
name="information-circle-outline"
|
||||
size={16}
|
||||
color={iconTintColor}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.switches}>
|
||||
<View style={[styles.switchWrapper, { backgroundColor: switchBg }]}>
|
||||
<IconSymbol name="flag" size={14} color="#4CAF50" />
|
||||
<Switch
|
||||
value={flagSwitch}
|
||||
onValueChange={setFlagSwitch}
|
||||
trackColor={{ false: "#DDD", true: "#EEE" }}
|
||||
thumbColor={flagSwitch ? "#A5D6A7" : "#FFF"}
|
||||
style={styles.smallSwitch}
|
||||
/>
|
||||
</View>
|
||||
<View style={[styles.switchWrapper, { backgroundColor: switchBg }]}>
|
||||
<View style={[styles.miniCard, { backgroundColor: "#FFD700" }]} />
|
||||
<Switch
|
||||
value={cardSwitch}
|
||||
onValueChange={setCardSwitch}
|
||||
trackColor={{ false: "#DDD", true: "#3b5998" }}
|
||||
thumbColor="#FFF"
|
||||
style={styles.smallSwitch}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Momentum Chart Area */}
|
||||
<View style={styles.chartWrapper}>
|
||||
<View style={styles.teamLogos}>
|
||||
<Image
|
||||
source={{ uri: match.home_team_logo }}
|
||||
style={styles.chartLogo}
|
||||
/>
|
||||
<Image
|
||||
source={{ uri: match.away_team_logo }}
|
||||
style={[styles.chartLogo, { marginTop: 12 }]}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.chartArea}>
|
||||
{/* 背景色带 */}
|
||||
<LinearGradient
|
||||
colors={["rgba(59, 89, 152, 0.05)", "rgba(255, 171, 0, 0.05)"]}
|
||||
style={styles.bgGradient}
|
||||
/>
|
||||
|
||||
{/* 网格线和时间刻度 */}
|
||||
<View style={styles.gridContainer}>
|
||||
{["0'", "15'", "30'", "HT", "60'", "75'", "90'"].map((label, i) => (
|
||||
<View key={i} style={styles.gridLine}>
|
||||
<View style={styles.line} />
|
||||
<ThemedText style={styles.gridLabel}>{label}</ThemedText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 压力曲线模拟 (使用密集的小条形模拟波形) */}
|
||||
<View style={styles.waveContainer}>
|
||||
{chartData.map((d, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<View
|
||||
style={[
|
||||
styles.waveBar,
|
||||
{
|
||||
left: `${(i / 90) * 100}%`,
|
||||
height: Math.abs(d.home),
|
||||
bottom: "50%",
|
||||
backgroundColor: "rgba(59, 89, 152, 0.8)",
|
||||
borderTopLeftRadius: 1,
|
||||
borderTopRightRadius: 1,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
styles.waveBar,
|
||||
{
|
||||
left: `${(i / 90) * 100}%`,
|
||||
height: Math.abs(d.away),
|
||||
top: "50%",
|
||||
backgroundColor: "rgba(255, 171, 0, 0.8)",
|
||||
borderBottomLeftRadius: 1,
|
||||
borderBottomRightRadius: 1,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 比赛事件标记 (假点位) */}
|
||||
<View style={[styles.eventMarker, { left: "12%", top: "10%" }]}>
|
||||
<View style={[styles.square, { backgroundColor: "#FFD700" }]} />
|
||||
</View>
|
||||
<View style={[styles.eventMarker, { left: "55%", top: "10%" }]}>
|
||||
<View style={[styles.square, { backgroundColor: "#FFD700" }]} />
|
||||
</View>
|
||||
<View style={[styles.eventMarker, { left: "65%", top: "10%" }]}>
|
||||
<View style={[styles.square, { backgroundColor: "#FF4444" }]} />
|
||||
</View>
|
||||
<View style={[styles.eventMarker, { left: "52%", bottom: "25%" }]}>
|
||||
<View style={styles.goalBox}>
|
||||
<IconSymbol name="football-outline" size={10} color="#000" />
|
||||
<View
|
||||
style={[
|
||||
styles.square,
|
||||
{
|
||||
backgroundColor: "#FFD700",
|
||||
width: 8,
|
||||
height: 10,
|
||||
borderRadius: 1,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Time Progress Slider */}
|
||||
<View style={styles.sliderContainer}>
|
||||
<ThemedText style={styles.currentTime}>46:53</ThemedText>
|
||||
<View style={styles.trackContainer}>
|
||||
<View style={[styles.track, isDark && { backgroundColor: "#333" }]} />
|
||||
<View style={[styles.filledTrack, { width: "55%" }]} />
|
||||
<View style={[styles.thumb, { left: "0%" }]} />
|
||||
<View style={[styles.thumb, { left: "55%" }]} />
|
||||
<View
|
||||
style={[
|
||||
styles.thumb,
|
||||
{ left: "100%", backgroundColor: isDark ? "#555" : "#333" },
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.trackLabels}>
|
||||
<ThemedText style={styles.trackLabel}>0:00</ThemedText>
|
||||
<ThemedText style={styles.trackLabel}>HT</ThemedText>
|
||||
<ThemedText style={styles.trackLabel}>FT</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Possession & Stats Bar */}
|
||||
<View style={styles.possessionSection}>
|
||||
<ThemedText style={styles.possessionTitle}>
|
||||
{t("detail.stats_card.possession")}
|
||||
</ThemedText>
|
||||
<View style={styles.possessionBarRow}>
|
||||
<View
|
||||
style={[
|
||||
styles.posBar,
|
||||
{
|
||||
flex: homePossession,
|
||||
backgroundColor: "#3b5998",
|
||||
borderTopLeftRadius: 10,
|
||||
borderBottomLeftRadius: 10,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: match.home_team_logo }}
|
||||
style={styles.posLogo}
|
||||
/>
|
||||
<ThemedText style={styles.posValue}>{homePossession}%</ThemedText>
|
||||
</View>
|
||||
<View style={{ width: 4 }} />
|
||||
<View
|
||||
style={[
|
||||
styles.posBar,
|
||||
{
|
||||
flex: awayPossession,
|
||||
backgroundColor: "#FFAB00",
|
||||
borderTopRightRadius: 10,
|
||||
borderBottomRightRadius: 10,
|
||||
flexDirection: "row-reverse",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: match.away_team_logo }}
|
||||
style={styles.posLogo}
|
||||
/>
|
||||
<ThemedText style={styles.posValue}>{awayPossession}%</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.miniStatsRow}>
|
||||
<View style={[styles.miniStatBadge, isDark && styles.darkStatBadge]}>
|
||||
<ThemedText style={styles.miniStatText}>{corners.home}</ThemedText>
|
||||
<IconSymbol name="flag" size={14} color="#FFAB00" />
|
||||
<ThemedText style={styles.miniStatText}>{corners.away}</ThemedText>
|
||||
</View>
|
||||
<View style={[styles.miniStatBadge, isDark && styles.darkStatBadge]}>
|
||||
<ThemedText style={styles.miniStatText}>
|
||||
{yellowCards.home}
|
||||
</ThemedText>
|
||||
<View style={styles.yellowCardIcon} />
|
||||
<ThemedText style={styles.miniStatText}>
|
||||
{yellowCards.away}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Momentum Info Modal */}
|
||||
<Modal
|
||||
visible={showInfo}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setShowInfo(false)}
|
||||
>
|
||||
<Pressable
|
||||
style={styles.modalOverlay}
|
||||
onPress={() => setShowInfo(false)}
|
||||
>
|
||||
<ThemedView
|
||||
style={[styles.modalContent, isDark && styles.darkModalContent]}
|
||||
>
|
||||
<ThemedText style={styles.modalTitle}>
|
||||
{t("detail.stats_card.info_title")}
|
||||
</ThemedText>
|
||||
|
||||
<ThemedText style={styles.modalDesc}>
|
||||
{t("detail.stats_card.info_desc")}
|
||||
</ThemedText>
|
||||
|
||||
<View style={styles.bulletPoint}>
|
||||
<ThemedText style={styles.bulletText}>
|
||||
• {t("detail.stats_card.point1")}
|
||||
</ThemedText>
|
||||
</View>
|
||||
<View style={styles.bulletPoint}>
|
||||
<ThemedText style={styles.bulletText}>
|
||||
• {t("detail.stats_card.point2")}
|
||||
</ThemedText>
|
||||
</View>
|
||||
<View style={styles.bulletPoint}>
|
||||
<ThemedText style={styles.bulletText}>
|
||||
• {t("detail.stats_card.point3")}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.teamInfoRow}>
|
||||
<Image
|
||||
source={{ uri: match.home_team_logo }}
|
||||
style={styles.miniLogo}
|
||||
/>
|
||||
<View style={styles.wavePlaceholder}>
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<View
|
||||
key={i}
|
||||
style={[
|
||||
styles.waveDot,
|
||||
{
|
||||
backgroundColor: "#3b5998",
|
||||
marginTop: i % 2 === 0 ? 0 : 6,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<ThemedText style={styles.teamDesc} numberOfLines={1}>
|
||||
{match.event_home_team}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.teamInfoRow}>
|
||||
<Image
|
||||
source={{ uri: match.away_team_logo }}
|
||||
style={styles.miniLogo}
|
||||
/>
|
||||
<View style={styles.wavePlaceholder}>
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<View
|
||||
key={i}
|
||||
style={[
|
||||
styles.waveDot,
|
||||
{
|
||||
backgroundColor: "#FFAB00",
|
||||
marginTop: i % 2 === 0 ? 6 : 0,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<ThemedText style={styles.teamDesc} numberOfLines={1}>
|
||||
{match.event_away_team}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.closeButton}
|
||||
onPress={() => setShowInfo(false)}
|
||||
>
|
||||
<ThemedText style={styles.closeButtonText}>
|
||||
{t("detail.stats_card.close")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</ThemedView>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 16,
|
||||
borderRadius: 20,
|
||||
padding: 16,
|
||||
backgroundColor: "#FFF",
|
||||
marginBottom: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 10,
|
||||
elevation: 2,
|
||||
},
|
||||
darkContainer: {
|
||||
backgroundColor: "#1E1E20",
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: 24,
|
||||
},
|
||||
headerLeft: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 18,
|
||||
fontWeight: "500",
|
||||
color: "#666",
|
||||
},
|
||||
switches: {
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
},
|
||||
switchWrapper: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F0F0F0",
|
||||
borderRadius: 15,
|
||||
paddingLeft: 8,
|
||||
paddingRight: 2,
|
||||
height: 30,
|
||||
},
|
||||
smallSwitch: {
|
||||
transform: [{ scaleX: 0.6 }, { scaleY: 0.6 }],
|
||||
},
|
||||
miniCard: {
|
||||
width: 10,
|
||||
height: 14,
|
||||
borderRadius: 2,
|
||||
},
|
||||
chartWrapper: {
|
||||
flexDirection: "row",
|
||||
height: 140,
|
||||
marginBottom: 10,
|
||||
},
|
||||
teamLogos: {
|
||||
width: 40,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingBottom: 20,
|
||||
},
|
||||
chartLogo: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
},
|
||||
chartArea: {
|
||||
flex: 1,
|
||||
position: "relative",
|
||||
marginLeft: 8,
|
||||
},
|
||||
bgGradient: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 30,
|
||||
borderRadius: 4,
|
||||
},
|
||||
gridContainer: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
gridLine: {
|
||||
height: "100%",
|
||||
alignItems: "center",
|
||||
},
|
||||
line: {
|
||||
width: 1,
|
||||
height: "100%",
|
||||
backgroundColor: "#F0F0F0",
|
||||
marginBottom: 4,
|
||||
},
|
||||
gridLabel: {
|
||||
fontSize: 12,
|
||||
color: "#000",
|
||||
fontWeight: "500",
|
||||
},
|
||||
waveContainer: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 30,
|
||||
},
|
||||
waveBar: {
|
||||
position: "absolute",
|
||||
width: 1.5,
|
||||
},
|
||||
eventMarker: {
|
||||
position: "absolute",
|
||||
alignItems: "center",
|
||||
},
|
||||
square: {
|
||||
width: 12,
|
||||
height: 16,
|
||||
borderRadius: 2,
|
||||
},
|
||||
goalBox: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 2,
|
||||
backgroundColor: "#FFF",
|
||||
padding: 2,
|
||||
borderRadius: 4,
|
||||
borderWidth: 1,
|
||||
borderColor: "#E0E0E0",
|
||||
},
|
||||
sliderContainer: {
|
||||
marginTop: 20,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
currentTime: {
|
||||
fontSize: 14,
|
||||
color: "#4CAF50",
|
||||
fontWeight: "700",
|
||||
textAlign: "center",
|
||||
marginBottom: 4,
|
||||
marginLeft: "10%", // Offset roughly
|
||||
},
|
||||
trackContainer: {
|
||||
height: 20,
|
||||
justifyContent: "center",
|
||||
position: "relative",
|
||||
},
|
||||
track: {
|
||||
height: 3,
|
||||
backgroundColor: "#EEE",
|
||||
borderRadius: 2,
|
||||
},
|
||||
filledTrack: {
|
||||
position: "absolute",
|
||||
height: 3,
|
||||
backgroundColor: "#3b5998",
|
||||
borderRadius: 2,
|
||||
},
|
||||
thumb: {
|
||||
position: "absolute",
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
backgroundColor: "#3b5998",
|
||||
borderWidth: 2,
|
||||
borderColor: "#FFF",
|
||||
marginLeft: -5,
|
||||
},
|
||||
trackLabels: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 8,
|
||||
},
|
||||
trackLabel: {
|
||||
fontSize: 12,
|
||||
color: "#666",
|
||||
fontWeight: "500",
|
||||
},
|
||||
possessionSection: {
|
||||
marginTop: 24,
|
||||
alignItems: "center",
|
||||
},
|
||||
possessionTitle: {
|
||||
fontSize: 16,
|
||||
color: "#666",
|
||||
marginBottom: 12,
|
||||
},
|
||||
possessionBarRow: {
|
||||
flexDirection: "row",
|
||||
height: 36,
|
||||
width: "100%",
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
posBar: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 12,
|
||||
gap: 8,
|
||||
},
|
||||
posLogo: {
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: 10,
|
||||
backgroundColor: "#FFF",
|
||||
},
|
||||
posValue: {
|
||||
color: "#FFF",
|
||||
fontSize: 14,
|
||||
fontWeight: "700",
|
||||
},
|
||||
miniStatsRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
gap: 12,
|
||||
marginTop: 16,
|
||||
},
|
||||
miniStatBadge: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F5F5F5",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 20,
|
||||
gap: 8,
|
||||
minWidth: 80,
|
||||
justifyContent: "center",
|
||||
},
|
||||
darkStatBadge: {
|
||||
backgroundColor: "#2C2C2E",
|
||||
},
|
||||
miniStatText: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
},
|
||||
yellowCardIcon: {
|
||||
width: 10,
|
||||
height: 14,
|
||||
backgroundColor: "#FFD700",
|
||||
borderRadius: 2,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 20,
|
||||
},
|
||||
modalContent: {
|
||||
width: "100%",
|
||||
backgroundColor: "#FFF",
|
||||
borderRadius: 24,
|
||||
padding: 24,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 20,
|
||||
elevation: 10,
|
||||
},
|
||||
darkModalContent: {
|
||||
backgroundColor: "#1E1E20",
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: "700",
|
||||
marginBottom: 16,
|
||||
},
|
||||
modalDesc: {
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
marginBottom: 16,
|
||||
},
|
||||
bulletPoint: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
bulletText: {
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
},
|
||||
teamInfoRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginTop: 16,
|
||||
gap: 12,
|
||||
},
|
||||
miniLogo: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
},
|
||||
wavePlaceholder: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
width: 40,
|
||||
height: 20,
|
||||
gap: 2,
|
||||
},
|
||||
waveDot: {
|
||||
width: 4,
|
||||
height: 4,
|
||||
borderRadius: 2,
|
||||
},
|
||||
teamDesc: {
|
||||
flex: 1,
|
||||
fontSize: 14,
|
||||
color: "#666",
|
||||
},
|
||||
closeButton: {
|
||||
backgroundColor: "#4B77FF",
|
||||
borderRadius: 12,
|
||||
paddingVertical: 12,
|
||||
alignItems: "center",
|
||||
marginTop: 24,
|
||||
alignSelf: "flex-end",
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
closeButtonText: {
|
||||
color: "#FFF",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
});
|
||||
@@ -9,9 +9,10 @@ import { Pressable, StyleSheet, View } from "react-native";
|
||||
|
||||
interface MatchCardProps {
|
||||
match: Match;
|
||||
onPress?: (match: Match) => void;
|
||||
}
|
||||
|
||||
export function MatchCard({ match }: MatchCardProps) {
|
||||
export function MatchCard({ match, onPress }: MatchCardProps) {
|
||||
const router = useRouter();
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
@@ -20,7 +21,11 @@ export function MatchCard({ match }: MatchCardProps) {
|
||||
const borderColor = isDark ? "#38383A" : "#E5E5EA";
|
||||
|
||||
const handlePress = () => {
|
||||
router.push(`/match-detail/${match.id}`);
|
||||
if (onPress) {
|
||||
onPress(match);
|
||||
} else {
|
||||
router.push(`/match-detail/${match.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user