diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ae035a4..e61af3b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -15,6 +15,7 @@ const apiEndpoints = {
viewerEvent: '/api/viewers/event',
viewerDelete: '/api/viewers/delete',
teams: '/api/tss/leaderboard/teams?limit=100',
+ homeTeams: '/api/tss/leaderboard/teams?limit=4',
teamsHealth: '/api/tss/leaderboard/teams?limit=1',
recentGames: '/api/tss/games/recent?limit=50',
game: (gameId) => `/api/tss/games/${encodeURIComponent(gameId)}`,
@@ -910,6 +911,7 @@ function App() {
function AppContent() {
const [route, setRoute] = useState(() => parseRoute())
const [leaderboard, setLeaderboard] = useState({ status: 'idle', data: null, error: null })
+ const [homeTeams, setHomeTeams] = useState({ status: 'idle', data: null, error: null })
const [live, setLive] = useState({ status: 'idle', data: null, error: null, updatedAt: 0 })
const [uptime, setUptime] = useState({ status: 'idle', checks: [], history: [], updatedAt: null })
const [viewers, setViewers] = useState({ status: 'idle', data: null, error: null, updatedAt: null })
@@ -932,6 +934,10 @@ function AppContent() {
() => leaderboard.data?.teams || leaderboard.data?.squadrons || [],
[leaderboard.data],
)
+ const teamsToWatch = useMemo(
+ () => homeTeams.data?.teams || homeTeams.data?.squadrons || teams.slice(0, 4),
+ [homeTeams.data, teams],
+ )
const matches = live.data?.matches || []
const liveRef = useRef(live)
const navPillRef = useRef(null)
@@ -1163,7 +1169,7 @@ function AppContent() {
}, [teamQuery])
useEffect(() => {
- if (!['home', 'teams', 'team', 'battle-logs'].includes(route.page)) return
+ if (!['teams', 'team', 'battle-logs'].includes(route.page)) return
if (leaderboard.status === 'ready' || leaderboard.status === 'loading') return
const controller = new AbortController()
@@ -1181,7 +1187,25 @@ function AppContent() {
}, [leaderboard.status, route.page])
useEffect(() => {
- if (!['home', 'teams', 'team', 'battle-logs'].includes(route.page)) return
+ if (route.page !== 'home') return
+ if (homeTeams.status === 'ready' || homeTeams.status === 'loading') return
+
+ const controller = new AbortController()
+ setHomeTeams({ status: 'loading', data: null, error: null })
+
+ fetchJson(apiEndpoints.homeTeams, controller.signal)
+ .then((data) => setHomeTeams({ status: 'ready', data, error: null }))
+ .catch((error) => {
+ if (!controller.signal.aborted) {
+ setHomeTeams({ status: 'error', data: null, error: error.message })
+ }
+ })
+
+ return () => controller.abort()
+ }, [homeTeams.status, route.page])
+
+ useEffect(() => {
+ if (!['teams', 'team', 'battle-logs'].includes(route.page)) return
const controller = new AbortController()
const timer = window.setInterval(() => {
@@ -1617,6 +1641,7 @@ function AppContent() {
setTeamQuery={setTeamQuery}
teamSuggestions={teamSuggestions}
teams={teams}
+ teamsToWatch={teamsToWatch}
teamQuery={teamQuery}
/>
) : null}
@@ -2104,6 +2129,7 @@ function Landing({
setTeamQuery,
teamSuggestions,
teams,
+ teamsToWatch,
teamQuery,
}) {
const treeRef = useRef(null)
@@ -2190,15 +2216,16 @@ function Landing({
-
Team / player
+Players
+Ground
+Air
+Assists
+Score
+Deaths
+