635 lines
18 KiB
TypeScript
635 lines
18 KiB
TypeScript
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}>
|
|
<View style={styles.eventInfo}>
|
|
<ThemedText
|
|
style={[styles.playerName, isDark && styles.darkText]}
|
|
numberOfLines={1}
|
|
>
|
|
{event.player || t("detail.events.goal")}
|
|
</ThemedText>
|
|
{event.detail ? (
|
|
<ThemedText
|
|
style={styles.eventDetail}
|
|
numberOfLines={1}
|
|
>
|
|
{event.detail}
|
|
</ThemedText>
|
|
) : null}
|
|
</View>
|
|
<View
|
|
style={[
|
|
styles.playerIconPlaceholder,
|
|
isDark && styles.darkItem,
|
|
]}
|
|
>
|
|
<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.goalBox}>
|
|
<View style={styles.eventInfo}>
|
|
<ThemedText
|
|
style={[styles.playerName, isDark && styles.darkText]}
|
|
numberOfLines={1}
|
|
>
|
|
{event.player}
|
|
</ThemedText>
|
|
<ThemedText
|
|
style={styles.eventDetail}
|
|
numberOfLines={1}
|
|
>
|
|
{event.detail?.includes("yellow")
|
|
? t("detail.events.yellow_card")
|
|
: t("detail.events.red_card")}
|
|
</ThemedText>
|
|
</View>
|
|
<View
|
|
style={[
|
|
styles.cardIconBox,
|
|
{
|
|
backgroundColor: event.detail?.includes("yellow")
|
|
? "#FFD700"
|
|
: "#FF3B30",
|
|
},
|
|
]}
|
|
/>
|
|
</View>
|
|
)}
|
|
{event.type === "sub" && (
|
|
<View style={styles.goalBox}>
|
|
<View style={styles.eventInfo}>
|
|
<ThemedText
|
|
style={[styles.playerName, isDark && styles.darkText]}
|
|
numberOfLines={1}
|
|
>
|
|
{event.playerIn}
|
|
</ThemedText>
|
|
<ThemedText
|
|
style={styles.eventDetail}
|
|
numberOfLines={1}
|
|
>
|
|
{`↓ ${event.playerOut}`}
|
|
</ThemedText>
|
|
</View>
|
|
<View
|
|
style={[
|
|
styles.subIconBox,
|
|
isDark && { backgroundColor: "#1B5E20" },
|
|
]}
|
|
>
|
|
<IconSymbol
|
|
name="swap-vertical"
|
|
size={14}
|
|
color="#4CD964"
|
|
/>
|
|
</View>
|
|
</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,
|
|
]}
|
|
>
|
|
<IconSymbol
|
|
name="person"
|
|
size={16}
|
|
color={isDark ? "#666" : "#BBB"}
|
|
/>
|
|
</View>
|
|
<View
|
|
style={[styles.eventInfo, { alignItems: "flex-start" }]}
|
|
>
|
|
<ThemedText
|
|
style={[styles.playerName, isDark && styles.darkText]}
|
|
numberOfLines={1}
|
|
>
|
|
{event.player || t("detail.events.goal")}
|
|
</ThemedText>
|
|
{event.detail ? (
|
|
<ThemedText
|
|
style={styles.eventDetail}
|
|
numberOfLines={1}
|
|
>
|
|
{event.detail}
|
|
</ThemedText>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
)}
|
|
{event.type === "card" && (
|
|
<View style={styles.goalBox}>
|
|
<View
|
|
style={[
|
|
styles.cardIconBox,
|
|
{
|
|
backgroundColor: event.detail?.includes("yellow")
|
|
? "#FFD700"
|
|
: "#FF3B30",
|
|
},
|
|
]}
|
|
/>
|
|
<View
|
|
style={[styles.eventInfo, { alignItems: "flex-start" }]}
|
|
>
|
|
<ThemedText
|
|
style={[styles.playerName, isDark && styles.darkText]}
|
|
numberOfLines={1}
|
|
>
|
|
{event.player}
|
|
</ThemedText>
|
|
<ThemedText
|
|
style={styles.eventDetail}
|
|
numberOfLines={1}
|
|
>
|
|
{event.detail?.includes("yellow")
|
|
? t("detail.events.yellow_card")
|
|
: t("detail.events.red_card")}
|
|
</ThemedText>
|
|
</View>
|
|
</View>
|
|
)}
|
|
{event.type === "sub" && (
|
|
<View style={styles.goalBox}>
|
|
<View
|
|
style={[
|
|
styles.subIconBox,
|
|
isDark && { backgroundColor: "#1B5E20" },
|
|
]}
|
|
>
|
|
<IconSymbol
|
|
name="swap-vertical"
|
|
size={14}
|
|
color="#4CD964"
|
|
/>
|
|
</View>
|
|
<View
|
|
style={[styles.eventInfo, { alignItems: "flex-start" }]}
|
|
>
|
|
<ThemedText
|
|
style={[styles.playerName, isDark && styles.darkText]}
|
|
numberOfLines={1}
|
|
>
|
|
{event.playerIn}
|
|
</ThemedText>
|
|
<ThemedText
|
|
style={styles.eventDetail}
|
|
numberOfLines={1}
|
|
>
|
|
{`↓ ${event.playerOut}`}
|
|
</ThemedText>
|
|
</View>
|
|
</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: 18,
|
|
},
|
|
sideContainer: {
|
|
flex: 1,
|
|
},
|
|
timePointContainer: {
|
|
width: 50,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
timeCircle: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 16,
|
|
backgroundColor: "#F8F9FA",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
zIndex: 1,
|
|
borderWidth: 1,
|
|
borderColor: "#E9ECEF",
|
|
},
|
|
timeText: {
|
|
fontSize: 11,
|
|
fontWeight: "600",
|
|
color: "#666",
|
|
},
|
|
statusPill: {
|
|
backgroundColor: "#F0F0F0",
|
|
borderWidth: 1,
|
|
borderColor: "#E0E0E0",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 6,
|
|
borderRadius: 20,
|
|
zIndex: 2,
|
|
minWidth: 100,
|
|
alignItems: "center",
|
|
},
|
|
statusText: {
|
|
fontSize: 13,
|
|
fontWeight: "bold",
|
|
color: "#333",
|
|
},
|
|
eventContent: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
homeContent: {
|
|
justifyContent: "flex-end",
|
|
paddingRight: 12,
|
|
},
|
|
awayContent: {
|
|
justifyContent: "flex-start",
|
|
paddingLeft: 12,
|
|
},
|
|
scorePill: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: "#FFF",
|
|
borderWidth: 1.5,
|
|
borderColor: "#FFD700",
|
|
borderRadius: 14,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 3,
|
|
gap: 4,
|
|
},
|
|
scoreLabel: {
|
|
fontSize: 14,
|
|
fontWeight: "bold",
|
|
},
|
|
eventInfo: {
|
|
flex: 1,
|
|
alignItems: "flex-end",
|
|
justifyContent: "center",
|
|
marginHorizontal: 8,
|
|
},
|
|
playerName: {
|
|
fontSize: 13,
|
|
fontWeight: "600",
|
|
color: "#333",
|
|
},
|
|
eventDetail: {
|
|
fontSize: 11,
|
|
color: "#999",
|
|
},
|
|
eventLabel: {
|
|
fontSize: 12,
|
|
color: "#999",
|
|
},
|
|
goalBox: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
flex: 1,
|
|
},
|
|
playerIconPlaceholder: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: 14,
|
|
backgroundColor: "#F0F0F0",
|
|
borderWidth: 1,
|
|
borderColor: "#E0E0E0",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
cardIconBox: {
|
|
width: 20,
|
|
height: 26,
|
|
borderRadius: 3,
|
|
borderWidth: 1,
|
|
borderColor: "rgba(0,0,0,0.1)",
|
|
},
|
|
subIconBox: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: 14,
|
|
backgroundColor: "#E8F5E9",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
subInText: {
|
|
fontSize: 13,
|
|
fontWeight: "600",
|
|
color: "#333",
|
|
},
|
|
subOutText: {
|
|
fontSize: 11,
|
|
color: "#999",
|
|
marginTop: 1,
|
|
},
|
|
miniCard: {
|
|
width: 6,
|
|
height: 9,
|
|
borderRadius: 1,
|
|
},
|
|
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 }],
|
|
},
|
|
});
|