Implement centralized server data polling with context management

src/contexts/ServerContext.tsx

@@ -0,0 +1,118 @@
+import { createContext, useContext, useState, useEffect } from 'react'
+import type { ReactNode } from 'react'
+
+interface ServerInfo {
+  name: string
+  ip: string
+  port: number
+  category: 'Surf' | 'Kz' | 'Bhop'
+}
+
+interface A2SResponse {
+  appID: number
+  botCount: number
+  environment: string
+  gameDescription: string
+  gameDirectory: string
+  mapName: string
+  maxPlayers: number
+  playerCount: number
+  serverName: string
+  serverType: string
+  vac: number
+  version: string
+  visibility: number
+}
+
+export interface ServerData extends ServerInfo {
+  a2sData?: A2SResponse
+  status: 'online' | 'offline' | 'loading'
+  error?: string
+}
+
+interface ServerContextType {
+  servers: ServerData[]
+  loading: boolean
+  lastUpdated: number
+}
+
+const ServerContext = createContext<ServerContextType | undefined>(undefined)
+
+// Server list from database export
+const serverList: ServerInfo[] = [
+  { name: 'Surf 66 Tick #1', ip: '14.103.233.1', port: 27015, category: 'Surf' },
+  { name: 'Surf 66 Tick #2', ip: '14.103.233.1', port: 27016, category: 'Surf' },
+  { name: 'Surf 66 Tick #3', ip: '14.103.233.1', port: 27017, category: 'Surf' },
+  { name: 'Surf 100 Tick #1', ip: '14.103.233.1', port: 28015, category: 'Surf' },
+  { name: 'Surf 100 Tick #2', ip: '14.103.233.1', port: 28016, category: 'Surf' },
+  { name: 'Kz #1', ip: '14.103.233.1', port: 29015, category: 'Kz' },
+  { name: 'Kz #2', ip: '14.103.233.1', port: 29016, category: 'Kz' },
+  { name: 'Bhop #1', ip: '14.103.233.1', port: 30015, category: 'Bhop' },
+  { name: 'Bhop #2', ip: '14.103.233.1', port: 30016, category: 'Bhop' }
+]
+
+export function ServerProvider({ children }: { children: ReactNode }) {
+  const [servers, setServers] = useState<ServerData[]>([])
+  const [loading, setLoading] = useState(true)
+  const [lastUpdated, setLastUpdated] = useState(Date.now())
+
+  const fetchServerData = async () => {
+    const serverPromises = serverList.map(async (server) => {
+      try {
+        const response = await fetch('/api/server/statistics/a2s-query', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            serverIP: server.ip,
+            serverPort: server.port,
+            timeout: 3000
+          })
+        })
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`)
+        }
+
+        const a2sData: A2SResponse = await response.json()
+        return { ...server, a2sData, status: 'online' as const }
+      } catch (error) {
+        console.error(`Failed to fetch data for ${server.name}:`, error)
+        return { 
+          ...server, 
+          status: 'offline' as const, 
+          error: error instanceof Error ? error.message : 'Unknown error' 
+        }
+      }
+    })
+
+    const results = await Promise.all(serverPromises)
+    setServers(results)
+    setLoading(false)
+    setLastUpdated(Date.now())
+  }
+
+  // Initial fetch and polling every 2 seconds
+  useEffect(() => {
+    fetchServerData()
+
+    const interval = setInterval(() => {
+      fetchServerData()
+    }, 2000) // Poll every 2 seconds
+
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <ServerContext.Provider value={{ servers, loading, lastUpdated }}>
+      {children}
+    </ServerContext.Provider>
+  )
+}
+
+export function useServers() {
+  const context = useContext(ServerContext)
+  if (context === undefined) {
+    throw new Error('useServers must be used within a ServerProvider')
+  }
+  return context
+}