实现直播详情页
This commit is contained in:
yuchenglong
@@ -7,6 +7,7 @@ import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useAppState } from "@/context/AppStateContext";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { fetchLeagues, fetchSports, fetchTodayMatches } from "@/lib/api";
|
||||
import { League, Match, Sport } from "@/types/api";
|
||||
@@ -27,6 +28,9 @@ export default function HomeScreen() {
|
||||
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
||||
const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
|
||||
|
||||
const { state, updateSportId, updateDate, updateLeagueKey, updateTimezone } =
|
||||
useAppState();
|
||||
|
||||
const [sports, setSports] = useState<Sport[]>([]);
|
||||
const [leagues, setLeagues] = useState<League[]>([]);
|
||||
const [matches, setMatches] = useState<Match[]>([]);
|
||||
@@ -36,18 +40,25 @@ export default function HomeScreen() {
|
||||
|
||||
const deviceTimeZone = useMemo(() => {
|
||||
try {
|
||||
console.log("deviceTimeZone", Intl.DateTimeFormat().resolvedOptions().timeZone);
|
||||
console.log(
|
||||
"deviceTimeZone",
|
||||
Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
);
|
||||
return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
|
||||
} catch {
|
||||
return "UTC";
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Selection States
|
||||
// 默认足球
|
||||
const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
|
||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
const [selectedLeagueKey, setSelectedLeagueKey] = useState<string | null>(null);
|
||||
// 初始化时同步设备时区到 Context
|
||||
useEffect(() => {
|
||||
updateTimezone(deviceTimeZone);
|
||||
}, [deviceTimeZone]);
|
||||
|
||||
// Selection States - 从 Context 读取
|
||||
const selectedSportId = state.selectedSportId;
|
||||
const selectedDate = state.selectedDate;
|
||||
const selectedLeagueKey = state.selectedLeagueKey;
|
||||
const [filterMode, setFilterMode] = useState<"time" | "league">("time"); // 时间或联赛模式
|
||||
|
||||
// Modal Visibilities
|
||||
@@ -103,14 +114,78 @@ export default function HomeScreen() {
|
||||
const apiList = await fetchSports();
|
||||
// 创建8个运动的完整列表
|
||||
const defaultSports: Sport[] = [
|
||||
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{
|
||||
id: 1,
|
||||
name: "football",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "basketball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "tennis",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "cricket",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "baseball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "badminton",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "snooker",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "volleyball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
];
|
||||
|
||||
// 合并API返回的运动和默认列表
|
||||
@@ -135,17 +210,80 @@ export default function HomeScreen() {
|
||||
console.error(e);
|
||||
// API失败时使用默认8个运动
|
||||
const defaultSports: Sport[] = [
|
||||
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{
|
||||
id: 1,
|
||||
name: "football",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "basketball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "tennis",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "cricket",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "baseball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "badminton",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "snooker",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "volleyball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
];
|
||||
setSports(defaultSports);
|
||||
setSelectedSportId(1);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -167,7 +305,11 @@ export default function HomeScreen() {
|
||||
const loadMatches = async (sportId: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const list = await fetchTodayMatches(sportId, selectedDate, deviceTimeZone);
|
||||
const list = await fetchTodayMatches(
|
||||
sportId,
|
||||
selectedDate,
|
||||
deviceTimeZone
|
||||
);
|
||||
setMatches(list);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -196,7 +338,7 @@ export default function HomeScreen() {
|
||||
};
|
||||
|
||||
const handleLeagueSelect = (leagueKey: string) => {
|
||||
setSelectedLeagueKey(leagueKey);
|
||||
updateLeagueKey(leagueKey);
|
||||
console.log("Selected league:", leagueKey);
|
||||
};
|
||||
|
||||
@@ -286,7 +428,8 @@ export default function HomeScreen() {
|
||||
<IconSymbol name="trophy-outline" size={18} color={iconColor} />
|
||||
<ThemedText style={styles.filterText} numberOfLines={1}>
|
||||
{selectedLeagueKey
|
||||
? leagues.find(l => l.key === selectedLeagueKey)?.name || t("home.select_league")
|
||||
? leagues.find((l) => l.key === selectedLeagueKey)?.name ||
|
||||
t("home.select_league")
|
||||
: t("home.select_league")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
@@ -327,7 +470,7 @@ export default function HomeScreen() {
|
||||
title={t("home.select_sport")}
|
||||
options={sportOptions}
|
||||
selectedValue={selectedSportId}
|
||||
onSelect={setSelectedSportId}
|
||||
onSelect={updateSportId}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -336,7 +479,7 @@ export default function HomeScreen() {
|
||||
visible={showCalendarModal}
|
||||
onClose={() => setShowCalendarModal(false)}
|
||||
selectedDate={selectedDate}
|
||||
onSelectDate={setSelectedDate}
|
||||
onSelectDate={updateDate}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,245 +1,84 @@
|
||||
import { HomeHeader } from "@/components/home-header";
|
||||
import { LeagueModal } from "@/components/league-modal";
|
||||
import { MatchCard } from "@/components/match-card";
|
||||
import { SelectionModal } from "@/components/selection-modal";
|
||||
import { CalendarModal } from "@/components/simple-calendar";
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useAppState } from "@/context/AppStateContext";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { fetchLeagues, fetchSports, fetchTodayMatches } from "@/lib/api";
|
||||
import { League, Match, Sport } from "@/types/api";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { fetchLiveScore } from "@/lib/api";
|
||||
import { LiveScoreMatch, Match } from "@/types/api";
|
||||
import { useRouter } from "expo-router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { ActivityIndicator, FlatList, StyleSheet, View } from "react-native";
|
||||
|
||||
export default function HomeScreen() {
|
||||
export default function LiveScreen() {
|
||||
const router = useRouter();
|
||||
const { theme } = useTheme();
|
||||
|
||||
const { t } = useTranslation();
|
||||
const isDark = theme === "dark";
|
||||
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
||||
const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
|
||||
const { state } = useAppState();
|
||||
|
||||
const [sports, setSports] = useState<Sport[]>([]);
|
||||
const [leagues, setLeagues] = useState<League[]>([]);
|
||||
const [matches, setMatches] = useState<Match[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const deviceTimeZone = useMemo(() => {
|
||||
try {
|
||||
return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
|
||||
} catch {
|
||||
return "UTC";
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Selection States
|
||||
// 默认足球
|
||||
const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
|
||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
const [selectedLeagueKey, setSelectedLeagueKey] = useState<string | null>(null);
|
||||
const [filterMode, setFilterMode] = useState<"time" | "league">("time"); // 时间或联赛模式
|
||||
|
||||
// Modal Visibilities
|
||||
const [showSportModal, setShowSportModal] = useState(false);
|
||||
const [showCalendarModal, setShowCalendarModal] = useState(false);
|
||||
const [showLeagueModal, setShowLeagueModal] = useState(false);
|
||||
|
||||
// Load Sports and Leagues
|
||||
useEffect(() => {
|
||||
loadSports();
|
||||
loadLeagues();
|
||||
}, []);
|
||||
loadLiveMatches();
|
||||
// 每30秒自动刷新一次实时比分
|
||||
const interval = setInterval(loadLiveMatches, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, [state.selectedSportId, state.selectedLeagueKey, state.timezone]);
|
||||
|
||||
// Load Matches when sport or date changes
|
||||
useEffect(() => {
|
||||
if (selectedSportId !== null) {
|
||||
loadMatches(selectedSportId);
|
||||
const loadLiveMatches = async () => {
|
||||
if (!state.selectedSportId) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
}, [selectedSportId, selectedDate]);
|
||||
|
||||
// Load Leagues when sport changes
|
||||
useEffect(() => {
|
||||
if (selectedSportId !== null) {
|
||||
loadLeagues();
|
||||
}
|
||||
}, [selectedSportId]);
|
||||
|
||||
const loadSports = async () => {
|
||||
try {
|
||||
const apiList = await fetchSports();
|
||||
// 创建8个运动的完整列表
|
||||
const defaultSports: Sport[] = [
|
||||
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
];
|
||||
|
||||
// 合并API返回的运动和默认列表
|
||||
const sportsMap = new Map<number, Sport>();
|
||||
apiList.forEach((sport) => {
|
||||
sportsMap.set(sport.id, sport);
|
||||
});
|
||||
|
||||
// 补充默认运动到8个
|
||||
defaultSports.forEach((sport) => {
|
||||
if (!sportsMap.has(sport.id)) {
|
||||
sportsMap.set(sport.id, sport);
|
||||
}
|
||||
});
|
||||
|
||||
const allSports = Array.from(sportsMap.values())
|
||||
.sort((a, b) => a.id - b.id)
|
||||
.slice(0, 8);
|
||||
|
||||
setSports(allSports);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
// API失败时使用默认8个运动
|
||||
const defaultSports: Sport[] = [
|
||||
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
];
|
||||
setSports(defaultSports);
|
||||
setSelectedSportId(1);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载联赛
|
||||
const loadLeagues = async () => {
|
||||
try {
|
||||
if (selectedSportId !== null) {
|
||||
const list = await fetchLeagues(selectedSportId, "");
|
||||
setLeagues(list);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const loadMatches = async (sportId: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Pass selectedDate if API supported it
|
||||
const list = await fetchTodayMatches(sportId, undefined, deviceTimeZone);
|
||||
setMatches(list);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
const liveData = await fetchLiveScore(
|
||||
state.selectedSportId,
|
||||
state.selectedLeagueKey ? parseInt(state.selectedLeagueKey) : undefined,
|
||||
state.timezone
|
||||
);
|
||||
|
||||
// 检查返回的数据是否为空或无效
|
||||
if (!liveData || !Array.isArray(liveData)) {
|
||||
console.warn("LiveScore returned invalid data:", liveData);
|
||||
setMatches([]);
|
||||
return;
|
||||
}
|
||||
|
||||
// 将 LiveScoreMatch 转换为 Match 格式
|
||||
const converted: Match[] = liveData.map((item: LiveScoreMatch) => ({
|
||||
id: item.event_key.toString(),
|
||||
league: item.league_name,
|
||||
time: item.event_time,
|
||||
home: item.event_home_team,
|
||||
away: item.event_away_team,
|
||||
meta: item.event_status,
|
||||
scoreText: item.event_final_result || "0 - 0",
|
||||
fav: false,
|
||||
leagueId: item.league_key,
|
||||
sportId: state.selectedSportId ?? undefined,
|
||||
isLive: true,
|
||||
}));
|
||||
|
||||
setMatches(converted);
|
||||
} catch (error) {
|
||||
console.error("Load live matches error:", error);
|
||||
setMatches([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const currentSport = sports.find((s) => s.id === selectedSportId);
|
||||
|
||||
// 获取当前运动的国际化名称
|
||||
const getSportName = (sport: Sport | undefined): string => {
|
||||
if (!sport) return t("home.select_sport");
|
||||
const sportKeyMap: { [key: number]: string } = {
|
||||
1: "football",
|
||||
2: "basketball",
|
||||
3: "tennis",
|
||||
4: "cricket",
|
||||
5: "baseball",
|
||||
6: "badminton",
|
||||
7: "snooker",
|
||||
8: "volleyball",
|
||||
};
|
||||
const sportKey = sportKeyMap[sport.id] || sport.name.toLowerCase();
|
||||
return t(`sports.${sportKey}`, { defaultValue: sport.name });
|
||||
};
|
||||
|
||||
const handleLeagueSelect = (leagueKey: string) => {
|
||||
setSelectedLeagueKey(leagueKey);
|
||||
console.log("Selected league:", leagueKey);
|
||||
};
|
||||
|
||||
const renderHeader = () => (
|
||||
<View style={styles.filterContainer}>
|
||||
{/* Time/League Filter Toggle */}
|
||||
<TouchableOpacity
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
onPress={() => setFilterMode(filterMode === "time" ? "league" : "time")}
|
||||
>
|
||||
<IconSymbol
|
||||
name={filterMode === "time" ? "time-outline" : "trophy-outline"}
|
||||
size={18}
|
||||
color={iconColor}
|
||||
/>
|
||||
<ThemedText style={styles.filterText}>
|
||||
{filterMode === "time" ? t("home.time") : t("home.league")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Sport Selector */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.filterBtn,
|
||||
styles.mainFilterBtn,
|
||||
{ backgroundColor: filterBg },
|
||||
]}
|
||||
onPress={() => setShowSportModal(true)}
|
||||
>
|
||||
<IconSymbol name="football-outline" size={18} color={iconColor} />
|
||||
<ThemedText style={styles.filterText}>
|
||||
{getSportName(currentSport)}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Date/League Selector */}
|
||||
{filterMode === "time" ? (
|
||||
<TouchableOpacity
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
onPress={() => setShowCalendarModal(true)}
|
||||
>
|
||||
<ThemedText style={styles.dateDayText}>
|
||||
{selectedDate.getDate()}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.dateMonthText}>
|
||||
{selectedDate.getHours()}:
|
||||
{selectedDate.getMinutes().toString().padStart(2, "0")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
onPress={() => setShowLeagueModal(true)}
|
||||
>
|
||||
<IconSymbol name="trophy-outline" size={18} color={iconColor} />
|
||||
<ThemedText style={styles.filterText} numberOfLines={1}>
|
||||
{selectedLeagueKey
|
||||
? leagues.find(l => l.key === selectedLeagueKey)?.name || t("home.select_league")
|
||||
: t("home.select_league")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<HomeHeader />
|
||||
|
||||
{renderHeader()}
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.center}>
|
||||
<ActivityIndicator size="large" color={Colors[theme].tint} />
|
||||
@@ -249,7 +88,21 @@ export default function HomeScreen() {
|
||||
<FlatList
|
||||
data={matches}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => <MatchCard match={item} />}
|
||||
renderItem={({ item }) => (
|
||||
<MatchCard
|
||||
match={item}
|
||||
onPress={(m) => {
|
||||
router.push({
|
||||
pathname: "/live-detail/[id]",
|
||||
params: {
|
||||
id: m.id,
|
||||
league_id: m.leagueId?.toString() || "",
|
||||
sport_id: m.sportId?.toString() || "",
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
contentContainerStyle={styles.listContent}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.center}>
|
||||
@@ -258,49 +111,6 @@ export default function HomeScreen() {
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
<SelectionModal
|
||||
visible={showSportModal}
|
||||
onClose={() => setShowSportModal(false)}
|
||||
title={t("home.select_sport")}
|
||||
options={sports.map((s) => {
|
||||
const sportKeyMap: { [key: number]: string } = {
|
||||
1: "football",
|
||||
2: "basketball",
|
||||
3: "tennis",
|
||||
4: "cricket",
|
||||
5: "baseball",
|
||||
6: "badminton",
|
||||
7: "snooker",
|
||||
8: "volleyball",
|
||||
};
|
||||
const sportKey = sportKeyMap[s.id] || s.name.toLowerCase();
|
||||
return {
|
||||
id: s.id,
|
||||
label: s.name, // 保留原始名称用于图标识别
|
||||
value: s.id,
|
||||
icon: s.icon,
|
||||
};
|
||||
})}
|
||||
selectedValue={selectedSportId}
|
||||
onSelect={setSelectedSportId}
|
||||
/>
|
||||
|
||||
<CalendarModal
|
||||
visible={showCalendarModal}
|
||||
onClose={() => setShowCalendarModal(false)}
|
||||
selectedDate={selectedDate}
|
||||
onSelectDate={setSelectedDate}
|
||||
/>
|
||||
|
||||
<LeagueModal
|
||||
visible={showLeagueModal}
|
||||
onClose={() => setShowLeagueModal(false)}
|
||||
leagues={leagues}
|
||||
selectedLeagueKey={selectedLeagueKey}
|
||||
onSelect={handleLeagueSelect}
|
||||
/>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
@@ -315,44 +125,6 @@ const styles = StyleSheet.create({
|
||||
alignItems: "center",
|
||||
paddingTop: 50,
|
||||
},
|
||||
filterContainer: {
|
||||
flexDirection: "row",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
gap: 12,
|
||||
},
|
||||
filterBtn: {
|
||||
flex: 1,
|
||||
height: 44, // Increased from 36
|
||||
flexDirection: "column", // Stacked logic for Date, or Row for others
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 8, // Rounded corners
|
||||
// iOS shadow
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 2,
|
||||
// Android elevation
|
||||
elevation: 2,
|
||||
},
|
||||
mainFilterBtn: {
|
||||
flex: 2, // Wider for sport
|
||||
flexDirection: "row",
|
||||
gap: 8,
|
||||
},
|
||||
filterText: {
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
},
|
||||
dateDayText: {
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
dateMonthText: {
|
||||
fontSize: 10,
|
||||
opacity: 0.6,
|
||||
},
|
||||
listContent: {
|
||||
padding: 16,
|
||||
paddingTop: 8,
|
||||
|
||||
@@ -8,6 +8,7 @@ import { StatusBar } from "expo-status-bar";
|
||||
import "react-native-reanimated";
|
||||
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { AppStateProvider } from "@/context/AppStateContext";
|
||||
import { ThemeProvider } from "@/context/ThemeContext";
|
||||
import { useColorScheme } from "@/hooks/use-color-scheme";
|
||||
import "@/i18n"; // Initialize i18n
|
||||
@@ -19,7 +20,9 @@ export const unstable_settings = {
|
||||
export default function RootLayout() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<RootLayoutNav />
|
||||
<AppStateProvider>
|
||||
<RootLayoutNav />
|
||||
</AppStateProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -75,6 +78,13 @@ function RootLayoutNav() {
|
||||
headerShown: false,
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="live-detail/[id]"
|
||||
options={{
|
||||
animation: "slide_from_right",
|
||||
headerShown: false,
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
|
||||
</NavigationThemeProvider>
|
||||
|
||||
156
app/live-detail/[id].tsx
Normal file
156
app/live-detail/[id].tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { EventsTimeline } from "@/components/live-detail/events-timeline";
|
||||
import { LiveLeagueInfo } from "@/components/live-detail/live-league-info";
|
||||
import { LiveMatchTabs } from "@/components/live-detail/live-match-tabs";
|
||||
import { LiveScoreHeader } from "@/components/live-detail/live-score-header";
|
||||
import { OddsCard } from "@/components/live-detail/odds-card";
|
||||
import { OtherInfoCard } from "@/components/live-detail/other-info-card";
|
||||
import { StatsCard } from "@/components/live-detail/stats-card";
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { fetchLiveScore } from "@/lib/api";
|
||||
import { LiveScoreMatch } from "@/types/api";
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
|
||||
export default function LiveDetailScreen() {
|
||||
const { id, league_id, sport_id } = useLocalSearchParams<{
|
||||
id: string;
|
||||
league_id: string;
|
||||
sport_id: string;
|
||||
}>();
|
||||
const { theme } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const insets = useSafeAreaInsets();
|
||||
const isDark = theme === "dark";
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [match, setMatch] = useState<LiveScoreMatch | null>(null);
|
||||
const [activeTab, setActiveTab] = useState("detail"); // Default to detail to show all data
|
||||
|
||||
useEffect(() => {
|
||||
loadLiveDetail();
|
||||
}, [id, league_id]);
|
||||
|
||||
const loadLiveDetail = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// Fetch live scores for the league
|
||||
const sportId = parseInt(sport_id || "1");
|
||||
const leagueId = parseInt(league_id || "0");
|
||||
|
||||
const liveData = await fetchLiveScore(sportId, leagueId);
|
||||
|
||||
if (liveData && Array.isArray(liveData)) {
|
||||
// Find the specific match
|
||||
const found = liveData.find((m) => m.event_key.toString() === id);
|
||||
if (found) {
|
||||
setMatch(found);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ThemedView style={styles.center}>
|
||||
<ActivityIndicator size="large" color={Colors[theme].tint} />
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
if (!match) {
|
||||
return (
|
||||
<ThemedView style={styles.center}>
|
||||
<ThemedText>{t("detail.not_found")}</ThemedText>
|
||||
<TouchableOpacity style={styles.retryButton} onPress={loadLiveDetail}>
|
||||
<ThemedText style={styles.retryText}>{t("detail.retry")}</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const renderTabContent = () => {
|
||||
switch (activeTab) {
|
||||
case "stats":
|
||||
return <StatsCard match={match} isDark={isDark} />;
|
||||
case "odds":
|
||||
return <OddsCard match={match} isDark={isDark} />;
|
||||
case "detail":
|
||||
return (
|
||||
<>
|
||||
<OddsCard match={match} isDark={isDark} />
|
||||
<StatsCard match={match} isDark={isDark} />
|
||||
<EventsTimeline match={match} isDark={isDark} />
|
||||
<OtherInfoCard match={match} isDark={isDark} />
|
||||
</>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<ThemedText style={{ opacity: 0.5 }}>
|
||||
{t("detail.empty_stats")}
|
||||
</ThemedText>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<ScrollView
|
||||
bounces={false}
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingBottom: insets.bottom + 20 }}
|
||||
>
|
||||
<LiveScoreHeader match={match} topInset={insets.top} />
|
||||
<LiveLeagueInfo match={match} />
|
||||
<LiveMatchTabs
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
isDark={isDark}
|
||||
/>
|
||||
|
||||
{renderTabContent()}
|
||||
</ScrollView>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
center: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 20,
|
||||
minHeight: 200,
|
||||
},
|
||||
retryButton: {
|
||||
marginTop: 20,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 10,
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 8,
|
||||
},
|
||||
retryText: {
|
||||
color: "#FFF",
|
||||
fontWeight: "600",
|
||||
},
|
||||
});
|
||||
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 (
|
||||
|
||||
@@ -8,6 +8,7 @@ export const API_ENDPOINTS = {
|
||||
COUNTRIES: "/v1/api/countries",
|
||||
LEAGUES: "/v1/api/leagues",
|
||||
MATCHES_TODAY: "/v1/api/matches/today",
|
||||
LIVESCORE: "/v1/api/livescore",
|
||||
UPCOMING_MATCHES: "/v1/api/matches/upcoming",
|
||||
MATCH_DETAIL: (id: string) => `/v1/api/matches/${id}`,
|
||||
ODDS: "/v1/api/odds",
|
||||
|
||||
67
context/AppStateContext.tsx
Normal file
67
context/AppStateContext.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import React, { createContext, ReactNode, useContext, useState } from "react";
|
||||
|
||||
interface AppState {
|
||||
selectedSportId: number | null;
|
||||
selectedDate: Date;
|
||||
selectedLeagueKey: string | null;
|
||||
timezone: string;
|
||||
}
|
||||
|
||||
interface AppStateContextType {
|
||||
state: AppState;
|
||||
updateSportId: (sportId: number | null) => void;
|
||||
updateDate: (date: Date) => void;
|
||||
updateLeagueKey: (leagueKey: string | null) => void;
|
||||
updateTimezone: (timezone: string) => void;
|
||||
}
|
||||
|
||||
const AppStateContext = createContext<AppStateContextType | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
export function AppStateProvider({ children }: { children: ReactNode }) {
|
||||
const [state, setState] = useState<AppState>({
|
||||
selectedSportId: 1, // 默认足球
|
||||
selectedDate: new Date(),
|
||||
selectedLeagueKey: null,
|
||||
timezone: "UTC",
|
||||
});
|
||||
|
||||
const updateSportId = (sportId: number | null) => {
|
||||
setState((prev) => ({ ...prev, selectedSportId: sportId }));
|
||||
};
|
||||
|
||||
const updateDate = (date: Date) => {
|
||||
setState((prev) => ({ ...prev, selectedDate: date }));
|
||||
};
|
||||
|
||||
const updateLeagueKey = (leagueKey: string | null) => {
|
||||
setState((prev) => ({ ...prev, selectedLeagueKey: leagueKey }));
|
||||
};
|
||||
|
||||
const updateTimezone = (timezone: string) => {
|
||||
setState((prev) => ({ ...prev, timezone }));
|
||||
};
|
||||
|
||||
return (
|
||||
<AppStateContext.Provider
|
||||
value={{
|
||||
state,
|
||||
updateSportId,
|
||||
updateDate,
|
||||
updateLeagueKey,
|
||||
updateTimezone,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</AppStateContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAppState() {
|
||||
const context = useContext(AppStateContext);
|
||||
if (!context) {
|
||||
throw new Error("useAppState must be used within AppStateProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -43,6 +43,8 @@
|
||||
"info": "Details",
|
||||
"stats": "Statistics",
|
||||
"odds": "Odds",
|
||||
"lineup": "Lineup",
|
||||
"analysis": "Analysis",
|
||||
"h2h": "H2H",
|
||||
"chat": "Chat"
|
||||
},
|
||||
@@ -68,13 +70,35 @@
|
||||
"empty_odds": "No odds data",
|
||||
"empty_h2h": "No H2H data",
|
||||
"empty_chat": "Chat is not available",
|
||||
"odds_card": {
|
||||
"title": "Match Odds",
|
||||
"disclaimer": "18+. Please gamble responsibly. Odds are subject to change."
|
||||
},
|
||||
"stats_card": {
|
||||
"title": "Statistics",
|
||||
"possession": "Possession",
|
||||
"info_title": "Momentum Explanation",
|
||||
"info_desc": "The momentum chart reflects the attacking pressure and threat level of the two teams during different periods of the match.",
|
||||
"point1": "The upper waves represent the home team, and the lower waves represent the away team.",
|
||||
"point2": "The height of the waves depends on attacking intensity, possession time, and shot threat.",
|
||||
"point3": "The more intense the solid line fluctuates, the higher the attacking frequency in that period.",
|
||||
"close": "Close"
|
||||
},
|
||||
"other_info": {
|
||||
"title": "Other Info"
|
||||
},
|
||||
"events": {
|
||||
"goals": "Goals",
|
||||
"cards": "Cards",
|
||||
"substitutes": "Substitutes",
|
||||
"lineups": "Lineups",
|
||||
"red_card": "RED",
|
||||
"yellow_card": "YELLOW"
|
||||
"yellow_card": "YELLOW",
|
||||
"start": "Match Started",
|
||||
"ht": "HT",
|
||||
"goal": "Goal",
|
||||
"penalty_goal": "Penalty Goal",
|
||||
"toggle_visibility": "Toggle timeline events"
|
||||
}
|
||||
},
|
||||
"selection": {
|
||||
|
||||
@@ -43,6 +43,8 @@
|
||||
"info": "详情",
|
||||
"stats": "统计数据",
|
||||
"odds": "赔率",
|
||||
"lineup": "阵容",
|
||||
"analysis": "数据分析",
|
||||
"h2h": "交锋往绩",
|
||||
"chat": "聊天"
|
||||
},
|
||||
@@ -68,13 +70,35 @@
|
||||
"empty_odds": "暂无赔率数据",
|
||||
"empty_h2h": "暂无交锋数据",
|
||||
"empty_chat": "聊天功能暂未开启",
|
||||
"odds_card": {
|
||||
"title": "比赛赔率",
|
||||
"disclaimer": "18+. 请负责任地赌博。赔率可能会变动。"
|
||||
},
|
||||
"stats_card": {
|
||||
"title": "统计数据",
|
||||
"possession": "控球率",
|
||||
"info_title": "势头说明",
|
||||
"info_desc": "势头图反映了两支球队在比赛不同时间段的进攻压力和威胁度。",
|
||||
"point1": "上方波浪代表主队，下方代表客队。",
|
||||
"point2": "波浪的高度取决于进攻强度、控球时间和射门威胁。",
|
||||
"point3": "实线波动越剧烈，代表该时段进攻频率越高。",
|
||||
"close": "关闭"
|
||||
},
|
||||
"other_info": {
|
||||
"title": "其他信息"
|
||||
},
|
||||
"events": {
|
||||
"goals": "进球",
|
||||
"cards": "红黄牌",
|
||||
"substitutes": "换人",
|
||||
"lineups": "首发阵容",
|
||||
"red_card": "红牌",
|
||||
"yellow_card": "黄牌"
|
||||
"yellow_card": "黄牌",
|
||||
"start": "比赛开始",
|
||||
"ht": "半场",
|
||||
"goal": "进球",
|
||||
"penalty_goal": "点球进球",
|
||||
"toggle_visibility": "显示/隐藏时间线事件"
|
||||
}
|
||||
},
|
||||
"selection": {
|
||||
|
||||
56
lib/api.ts
56
lib/api.ts
@@ -4,6 +4,7 @@ import {
|
||||
ApiResponse,
|
||||
Country,
|
||||
League,
|
||||
LiveScoreMatch,
|
||||
Match,
|
||||
MatchDetailData,
|
||||
OddsData,
|
||||
@@ -138,23 +139,56 @@ export const fetchMatchDetail = async (
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchLiveScore = async (
|
||||
sportId: number,
|
||||
leagueId?: number,
|
||||
timezone?: string
|
||||
): Promise<LiveScoreMatch[]> => {
|
||||
try {
|
||||
const params: { sport_id: number; league_id?: number; timezone?: string } =
|
||||
{
|
||||
sport_id: sportId,
|
||||
};
|
||||
|
||||
if (leagueId) {
|
||||
params.league_id = leagueId;
|
||||
}
|
||||
|
||||
if (timezone) {
|
||||
params.timezone = timezone;
|
||||
}
|
||||
|
||||
const response = await apiClient.get<ApiResponse<LiveScoreMatch[]>>(
|
||||
API_ENDPOINTS.LIVESCORE,
|
||||
{ params }
|
||||
);
|
||||
|
||||
if (response.data.code === 0) {
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
throw new Error(response.data.message);
|
||||
} catch (error) {
|
||||
console.error("Fetch livescore error:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchUpcomingMatches = async (
|
||||
sportId: number,
|
||||
leagueKey: string,
|
||||
limit: number = 50
|
||||
): Promise<UpcomingMatch[]> => {
|
||||
try {
|
||||
const response =
|
||||
await apiClient.get<ApiResponse<ApiListResponse<UpcomingMatch>>>(
|
||||
API_ENDPOINTS.UPCOMING_MATCHES,
|
||||
{
|
||||
params: {
|
||||
sport_id: sportId,
|
||||
leagueKey,
|
||||
limit,
|
||||
},
|
||||
}
|
||||
);
|
||||
const response = await apiClient.get<
|
||||
ApiResponse<ApiListResponse<UpcomingMatch>>
|
||||
>(API_ENDPOINTS.UPCOMING_MATCHES, {
|
||||
params: {
|
||||
sport_id: sportId,
|
||||
leagueKey,
|
||||
limit,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.data.code === 0) {
|
||||
return response.data.data.list;
|
||||
|
||||
69
types/api.ts
69
types/api.ts
@@ -17,6 +17,75 @@ export interface Match {
|
||||
meta?: string;
|
||||
scoreText: string;
|
||||
fav: boolean;
|
||||
leagueId?: number;
|
||||
sportId?: number;
|
||||
isLive?: boolean;
|
||||
}
|
||||
|
||||
export interface LiveScoreMatch {
|
||||
event_key: number;
|
||||
event_date: string;
|
||||
event_time: string;
|
||||
event_home_team: string;
|
||||
home_team_key: number;
|
||||
home_team_logo: string;
|
||||
event_away_team: string;
|
||||
away_team_key: number;
|
||||
away_team_logo: string;
|
||||
event_final_result: string;
|
||||
event_halftime_result: string;
|
||||
event_status: string;
|
||||
event_live: string;
|
||||
league_key: number;
|
||||
league_name: string;
|
||||
league_logo: string;
|
||||
league_round: string;
|
||||
league_season: string;
|
||||
country_name: string;
|
||||
country_logo: string;
|
||||
event_country_key: number;
|
||||
goalscorers?: {
|
||||
time: string;
|
||||
home_scorer: string;
|
||||
home_scorer_id: string;
|
||||
home_assist: string;
|
||||
home_assist_id: string;
|
||||
score: string;
|
||||
away_scorer: string;
|
||||
away_scorer_id: string;
|
||||
away_assist: string;
|
||||
away_assist_id: string;
|
||||
info: string;
|
||||
info_time: string;
|
||||
}[];
|
||||
cards?: {
|
||||
time: string;
|
||||
home_fault: string;
|
||||
card: string;
|
||||
away_fault: string;
|
||||
info: string;
|
||||
home_player_id: string;
|
||||
away_player_id: string;
|
||||
info_time: string;
|
||||
}[];
|
||||
substitutes?: {
|
||||
time: string;
|
||||
home_scorer:
|
||||
| { in: string; out: string; in_id: number; out_id: number }
|
||||
| any[];
|
||||
away_scorer:
|
||||
| { in: string; out: string; in_id: number; out_id: number }
|
||||
| any[];
|
||||
info: string;
|
||||
info_time: string;
|
||||
score: string;
|
||||
}[];
|
||||
lineups?: unknown;
|
||||
statistics?: {
|
||||
type: string;
|
||||
home: string;
|
||||
away: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
|
||||
Reference in New Issue
Block a user