507 lines
18 KiB
TypeScript
507 lines
18 KiB
TypeScript
import { ThemedText } from "@/components/themed-text";
|
|
import { MatchDetailData, Player } from "@/types/api";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { StyleSheet, View } from "react-native";
|
|
|
|
interface LineupsCardProps {
|
|
data: MatchDetailData;
|
|
isDark: boolean;
|
|
}
|
|
|
|
export function LineupsCard({ data, isDark }: LineupsCardProps) {
|
|
const { t } = useTranslation();
|
|
const { match } = data;
|
|
const bgColor = isDark ? "#1C1C1E" : "#FFF";
|
|
const borderColor = isDark ? "#2C2C2E" : "#EEE";
|
|
|
|
const players = (match as any).players || null;
|
|
|
|
if (!players || (!players.home_team && !players.away_team)) {
|
|
return null;
|
|
}
|
|
|
|
// 兼容两种结构：
|
|
// 1) home_team/away_team 直接是球员数组
|
|
// 2) home_team/away_team 是对象，包含 starting_lineups/substitutes/coaches 等
|
|
const getTeamData = (team: any) => {
|
|
const starting: any[] = [];
|
|
const subs: any[] = [];
|
|
let coachName: string | undefined;
|
|
let coachCountry: string | undefined;
|
|
|
|
if (!team) {
|
|
return { starting, subs, coachName, coachCountry };
|
|
}
|
|
|
|
if (Array.isArray(team)) {
|
|
// 旧结构：直接数组 = 首发
|
|
return { starting: team, subs, coachName, coachCountry };
|
|
}
|
|
|
|
if (Array.isArray(team.starting_lineups)) {
|
|
starting.push(...team.starting_lineups);
|
|
}
|
|
if (Array.isArray(team.substitutes)) {
|
|
subs.push(...team.substitutes);
|
|
}
|
|
if (Array.isArray(team.coaches) && team.coaches.length > 0) {
|
|
const c = team.coaches[0];
|
|
coachName = c?.coache || c?.name;
|
|
coachCountry = c?.coache_country || c?.country;
|
|
}
|
|
|
|
return { starting, subs, coachName, coachCountry };
|
|
};
|
|
|
|
const home = getTeamData(players.home_team);
|
|
const away = getTeamData(players.away_team);
|
|
|
|
const hasLineups = home.starting.length > 0 || away.starting.length > 0;
|
|
|
|
if (!hasLineups) {
|
|
return null;
|
|
}
|
|
|
|
const getPlayerNumber = (p: any, idx: number) =>
|
|
p?.player_number ?? p?.number ?? p?.playerNumber ?? idx + 1;
|
|
|
|
const getPlayerName = (p: any) =>
|
|
p?.player_name ?? p?.player ?? p?.name ?? p?.playerName ?? "";
|
|
|
|
const getPlayerPosition = (p: any) =>
|
|
p?.position ?? p?.player_type ?? p?.player_position ?? "";
|
|
|
|
const splitByPosition = (list: any[]) => {
|
|
const gk: any[] = [];
|
|
const def: any[] = [];
|
|
const mid: any[] = [];
|
|
const fwd: any[] = [];
|
|
|
|
list.forEach((p) => {
|
|
const pos = Number(p?.player_position ?? p?.positionCode ?? 0);
|
|
if (pos === 1) {
|
|
gk.push(p);
|
|
} else if (pos >= 2 && pos <= 5) {
|
|
def.push(p);
|
|
} else if (pos >= 6 && pos <= 8) {
|
|
mid.push(p);
|
|
} else if (pos >= 9 && pos <= 11) {
|
|
fwd.push(p);
|
|
} else {
|
|
// 没有合理编号的，放到中场组兜底
|
|
mid.push(p);
|
|
}
|
|
});
|
|
|
|
return { gk, def, mid, fwd };
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
|
|
<ThemedText style={styles.title}>
|
|
{t("detail.events.lineups")}
|
|
</ThemedText>
|
|
<View style={styles.content}>
|
|
{/* 主队首发 */}
|
|
{home.starting.length > 0 && (
|
|
<View style={styles.teamLineup}>
|
|
<ThemedText style={styles.teamName}>
|
|
{match.eventHomeTeam}
|
|
</ThemedText>
|
|
{(() => {
|
|
const groups = splitByPosition(home.starting.slice(0, 11));
|
|
return (
|
|
<>
|
|
{groups.gk.length > 0 && (
|
|
<View style={styles.lineGroup}>
|
|
<ThemedText style={styles.lineGroupTitle}>
|
|
{t("detail.events.lineups_goalkeepers")}
|
|
</ThemedText>
|
|
{groups.gk.map((player: Player, idx: number) => (
|
|
<View key={`home-gk-${idx}`} style={styles.playerRow}>
|
|
<ThemedText style={styles.playerNumber}>
|
|
{getPlayerNumber(player, idx)}
|
|
</ThemedText>
|
|
<ThemedText style={styles.playerName} numberOfLines={1}>
|
|
{getPlayerName(player)}
|
|
</ThemedText>
|
|
{!!getPlayerPosition(player) && (
|
|
<ThemedText style={styles.playerPosition}>
|
|
{String(getPlayerPosition(player))}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
{groups.def.length > 0 && (
|
|
<View style={styles.lineGroup}>
|
|
<ThemedText style={styles.lineGroupTitle}>
|
|
{t("detail.events.lineups_defenders")}
|
|
</ThemedText>
|
|
{groups.def.map((player: Player, idx: number) => (
|
|
<View key={`home-def-${idx}`} style={styles.playerRow}>
|
|
<ThemedText style={styles.playerNumber}>
|
|
{getPlayerNumber(player, idx)}
|
|
</ThemedText>
|
|
<ThemedText style={styles.playerName} numberOfLines={1}>
|
|
{getPlayerName(player)}
|
|
</ThemedText>
|
|
{!!getPlayerPosition(player) && (
|
|
<ThemedText style={styles.playerPosition}>
|
|
{String(getPlayerPosition(player))}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
{groups.mid.length > 0 && (
|
|
<View style={styles.lineGroup}>
|
|
<ThemedText style={styles.lineGroupTitle}>
|
|
{t("detail.events.lineups_midfielders")}
|
|
</ThemedText>
|
|
{groups.mid.map((player: Player, idx: number) => (
|
|
<View key={`home-mid-${idx}`} style={styles.playerRow}>
|
|
<ThemedText style={styles.playerNumber}>
|
|
{getPlayerNumber(player, idx)}
|
|
</ThemedText>
|
|
<ThemedText style={styles.playerName} numberOfLines={1}>
|
|
{getPlayerName(player)}
|
|
</ThemedText>
|
|
{!!getPlayerPosition(player) && (
|
|
<ThemedText style={styles.playerPosition}>
|
|
{String(getPlayerPosition(player))}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
{groups.fwd.length > 0 && (
|
|
<View style={styles.lineGroup}>
|
|
<ThemedText style={styles.lineGroupTitle}>
|
|
{t("detail.events.lineups_forwards")}
|
|
</ThemedText>
|
|
{groups.fwd.map((player: Player, idx: number) => (
|
|
<View key={`home-fwd-${idx}`} style={styles.playerRow}>
|
|
<ThemedText style={styles.playerNumber}>
|
|
{getPlayerNumber(player, idx)}
|
|
</ThemedText>
|
|
<ThemedText style={styles.playerName} numberOfLines={1}>
|
|
{getPlayerName(player)}
|
|
</ThemedText>
|
|
{!!getPlayerPosition(player) && (
|
|
<ThemedText style={styles.playerPosition}>
|
|
{String(getPlayerPosition(player))}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
</>
|
|
);
|
|
})()}
|
|
|
|
{home.coachName && (
|
|
<View style={styles.coachRow}>
|
|
<ThemedText style={styles.coachLabel}>
|
|
{t("detail.events.lineups_coach")}:
|
|
</ThemedText>
|
|
<ThemedText style={styles.coachValue}>
|
|
{home.coachName}
|
|
{home.coachCountry ? ` (${home.coachCountry})` : ""}
|
|
</ThemedText>
|
|
</View>
|
|
)}
|
|
|
|
{Array.isArray(home.subs) && home.subs.length > 0 && (
|
|
<View style={styles.subsSection}>
|
|
<ThemedText style={styles.subsTitle}>
|
|
{t("detail.events.lineups_subs")}
|
|
</ThemedText>
|
|
{home.subs.map((p: any, idx: number) => (
|
|
<View key={`home-sub-${idx}`} style={styles.playerRow}>
|
|
<ThemedText style={styles.playerNumber}>
|
|
{getPlayerNumber(p, idx)}
|
|
</ThemedText>
|
|
<ThemedText style={styles.playerName} numberOfLines={1}>
|
|
{getPlayerName(p)}
|
|
</ThemedText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
</View>
|
|
)}
|
|
{/* 客队首发 */}
|
|
{away.starting.length > 0 && (
|
|
<View style={[styles.teamLineup, { marginTop: 16 }]}>
|
|
<ThemedText style={[styles.teamName, styles.awayTeamName]}>
|
|
{match.eventAwayTeam}
|
|
</ThemedText>
|
|
{(() => {
|
|
const groups = splitByPosition(away.starting.slice(0, 11));
|
|
return (
|
|
<>
|
|
{groups.gk.length > 0 && (
|
|
<View style={styles.lineGroup}>
|
|
<ThemedText style={[styles.lineGroupTitle, styles.awayText]}>
|
|
{t("detail.events.lineups_goalkeepers")}
|
|
</ThemedText>
|
|
{groups.gk.map((player: Player, idx: number) => (
|
|
<View
|
|
key={`away-gk-${idx}`}
|
|
style={[styles.playerRow, styles.awayPlayerRow]}
|
|
>
|
|
{!!getPlayerPosition(player) && (
|
|
<ThemedText style={[styles.playerPosition, styles.awayText]}>
|
|
{String(getPlayerPosition(player))}
|
|
</ThemedText>
|
|
)}
|
|
<ThemedText
|
|
style={[styles.playerName, styles.awayText]}
|
|
numberOfLines={1}
|
|
>
|
|
{getPlayerName(player)}
|
|
</ThemedText>
|
|
<ThemedText style={[styles.playerNumber, styles.awayNumber]}>
|
|
{getPlayerNumber(player, idx)}
|
|
</ThemedText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
{groups.def.length > 0 && (
|
|
<View style={styles.lineGroup}>
|
|
<ThemedText style={[styles.lineGroupTitle, styles.awayText]}>
|
|
{t("detail.events.lineups_defenders")}
|
|
</ThemedText>
|
|
{groups.def.map((player: Player, idx: number) => (
|
|
<View
|
|
key={`away-def-${idx}`}
|
|
style={[styles.playerRow, styles.awayPlayerRow]}
|
|
>
|
|
{!!getPlayerPosition(player) && (
|
|
<ThemedText style={[styles.playerPosition, styles.awayText]}>
|
|
{String(getPlayerPosition(player))}
|
|
</ThemedText>
|
|
)}
|
|
<ThemedText
|
|
style={[styles.playerName, styles.awayText]}
|
|
numberOfLines={1}
|
|
>
|
|
{getPlayerName(player)}
|
|
</ThemedText>
|
|
<ThemedText style={[styles.playerNumber, styles.awayNumber]}>
|
|
{getPlayerNumber(player, idx)}
|
|
</ThemedText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
{groups.mid.length > 0 && (
|
|
<View style={styles.lineGroup}>
|
|
<ThemedText style={[styles.lineGroupTitle, styles.awayText]}>
|
|
{t("detail.events.lineups_midfielders")}
|
|
</ThemedText>
|
|
{groups.mid.map((player: Player, idx: number) => (
|
|
<View
|
|
key={`away-mid-${idx}`}
|
|
style={[styles.playerRow, styles.awayPlayerRow]}
|
|
>
|
|
{!!getPlayerPosition(player) && (
|
|
<ThemedText style={[styles.playerPosition, styles.awayText]}>
|
|
{String(getPlayerPosition(player))}
|
|
</ThemedText>
|
|
)}
|
|
<ThemedText
|
|
style={[styles.playerName, styles.awayText]}
|
|
numberOfLines={1}
|
|
>
|
|
{getPlayerName(player)}
|
|
</ThemedText>
|
|
<ThemedText style={[styles.playerNumber, styles.awayNumber]}>
|
|
{getPlayerNumber(player, idx)}
|
|
</ThemedText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
{groups.fwd.length > 0 && (
|
|
<View style={styles.lineGroup}>
|
|
<ThemedText style={[styles.lineGroupTitle, styles.awayText]}>
|
|
{t("detail.events.lineups_forwards")}
|
|
</ThemedText>
|
|
{groups.fwd.map((player: Player, idx: number) => (
|
|
<View
|
|
key={`away-fwd-${idx}`}
|
|
style={[styles.playerRow, styles.awayPlayerRow]}
|
|
>
|
|
{!!getPlayerPosition(player) && (
|
|
<ThemedText style={[styles.playerPosition, styles.awayText]}>
|
|
{String(getPlayerPosition(player))}
|
|
</ThemedText>
|
|
)}
|
|
<ThemedText
|
|
style={[styles.playerName, styles.awayText]}
|
|
numberOfLines={1}
|
|
>
|
|
{getPlayerName(player)}
|
|
</ThemedText>
|
|
<ThemedText style={[styles.playerNumber, styles.awayNumber]}>
|
|
{getPlayerNumber(player, idx)}
|
|
</ThemedText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
</>
|
|
);
|
|
})()}
|
|
|
|
{away.coachName && (
|
|
<View style={styles.coachRow}>
|
|
<ThemedText style={styles.coachLabel}>
|
|
{t("detail.events.lineups_coach")}:
|
|
</ThemedText>
|
|
<ThemedText style={styles.coachValue}>
|
|
{away.coachName}
|
|
{away.coachCountry ? ` (${away.coachCountry})` : ""}
|
|
</ThemedText>
|
|
</View>
|
|
)}
|
|
|
|
{Array.isArray(away.subs) && away.subs.length > 0 && (
|
|
<View style={styles.subsSection}>
|
|
<ThemedText style={[styles.subsTitle, styles.awayText]}>
|
|
{t("detail.events.lineups_subs")}
|
|
</ThemedText>
|
|
{away.subs.map((p: any, idx: number) => (
|
|
<View
|
|
key={`away-sub-${idx}`}
|
|
style={[styles.playerRow, styles.awayPlayerRow]}
|
|
>
|
|
<ThemedText style={[styles.playerName, styles.awayText]} numberOfLines={1}>
|
|
{getPlayerName(p)}
|
|
</ThemedText>
|
|
<ThemedText style={[styles.playerNumber, styles.awayNumber]}>
|
|
{getPlayerNumber(p, idx)}
|
|
</ThemedText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
margin: 16,
|
|
marginTop: 0,
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
borderWidth: 1,
|
|
elevation: 2,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
},
|
|
title: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
marginBottom: 14,
|
|
opacity: 0.7,
|
|
},
|
|
content: {
|
|
gap: 6,
|
|
},
|
|
teamLineup: {
|
|
marginTop: 8,
|
|
},
|
|
teamName: {
|
|
fontSize: 13,
|
|
fontWeight: "600",
|
|
marginBottom: 8,
|
|
opacity: 0.8,
|
|
},
|
|
awayTeamName: {
|
|
textAlign: "right",
|
|
},
|
|
playerRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingVertical: 4,
|
|
gap: 8,
|
|
},
|
|
awayPlayerRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "flex-end",
|
|
},
|
|
playerNumber: {
|
|
fontSize: 12,
|
|
fontWeight: "600",
|
|
width: 24,
|
|
textAlign: "center",
|
|
opacity: 0.6,
|
|
},
|
|
playerName: {
|
|
fontSize: 13,
|
|
fontWeight: "500",
|
|
flex: 1,
|
|
},
|
|
playerPosition: {
|
|
fontSize: 11,
|
|
fontWeight: "500",
|
|
opacity: 0.5,
|
|
textTransform: "uppercase",
|
|
},
|
|
awayText: {
|
|
textAlign: "right",
|
|
},
|
|
awayNumber: {
|
|
textAlign: "right",
|
|
},
|
|
// 每条线（守门员/后卫/中场/前锋）的容器
|
|
lineGroup: {
|
|
marginBottom: 8,
|
|
},
|
|
lineGroupTitle: {
|
|
fontSize: 12,
|
|
fontWeight: "600",
|
|
opacity: 0.7,
|
|
marginBottom: 6,
|
|
},
|
|
// 主/客队教练行
|
|
coachRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginTop: 12,
|
|
gap: 6,
|
|
},
|
|
coachLabel: {
|
|
fontSize: 12,
|
|
opacity: 0.7,
|
|
},
|
|
coachValue: {
|
|
fontSize: 12,
|
|
fontWeight: "500",
|
|
},
|
|
// 替补区
|
|
subsSection: {
|
|
marginTop: 12,
|
|
},
|
|
subsTitle: {
|
|
fontSize: 12,
|
|
opacity: 0.7,
|
|
marginBottom: 6,
|
|
},
|
|
});
|