\n \n \n \n \n \n \n \n \n \n {[\n { label: \"0 Goals\", key: \"0\" },\n { label: \"Over 0.5\", key: \"+0_5\" },\n { label: \"Over 1.5\", key: \"+1_5\" },\n { label: \"Over 2.5\", key: \"+2_5\" },\n { label: \"Over 3.5\", key: \"+3_5\" },\n { label: \"Over 4.5\", key: \"+4_5\" },\n { label: \"Over 5.5\", key: \"+5_5\" },\n ].map(({ label, key }) => (\n \n \n \n \n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n

\n Goals\n	\n Count\n	\n Percentage\n
{label}	\n {stats[key]}\n	\n {((stats[key] / totalEvents) * 100).toFixed(1)}%\n
BTTS	\n {stats.btts}\n	\n {((stats.btts / totalEvents) * 100).toFixed(1)}%\n
\n No BTTS\n	\n {stats.no_btts}\n	\n {((stats.no_btts / totalEvents) * 100).toFixed(1)}%\n

\n);\n\nconst StatTab = ({ label, isActive, onClick }) => (\n \n {label}\n \n);\n\nconst StatCard = ({ label, value, className = \"\" }) => (\n

{label}

{value}

\n);\n\nconst TeamStats = ({ title, leagueInfo, stats, selectedTab }) => (\n

\n Rank: {leagueInfo.rank}\n

\n\n

League Position

\n \n \n \n \n 0\n ? \"bg-green-50\"\n : \"bg-red-50\"\n }`}\n />\n

\n\n

Goals Distribution

\n \n

\n\n

\n Results Distribution\n

\n {[\n {\n label: \"Wins\",\n value: stats[selectedTab].results.wins,\n color: \"bg-green-100 text-green-700\",\n },\n {\n label: \"Draws\",\n value: stats[selectedTab].results.draws,\n color: \"bg-yellow-100 text-yellow-700\",\n },\n {\n label: \"Losses\",\n value: stats[selectedTab].results.losses,\n color: \"bg-red-100 text-red-700\",\n },\n ].map(({ label, value, color }) => (\n \n

{label}

{value}

\n {((value / stats[selectedTab].totalEvents) * 100).toFixed(1)}%\n

\n ))}\n

\n \n);\n\nconst ResultsDistribution = ({ results, totalEvents, className = \"\" }) => (\n

\n {[\n {\n label: \"Home Wins\",\n value: results.homeWins,\n color: \"bg-green-100 text-green-700\",\n },\n {\n label: \"Draws\",\n value: results.draws,\n color: \"bg-yellow-100 text-yellow-700\",\n },\n {\n label: \"Away Wins\",\n value: results.awayWins,\n color: \"bg-red-100 text-red-700\",\n },\n ].map(({ label, value, color }) => (\n \n

{label}

{value}

\n {((value / totalEvents) * 100).toFixed(1)}%\n

\n Rate: {(value / totalEvents).toFixed(2)}\n

\n ))}\n

\n \n);\n\nconst LeagueStats = ({ stats, selectedTab }) => (\n

\n Based on {stats[selectedTab].totalEvents} matches\n

\n\n

Goals Distribution

\n \n

\n\n

\n Results Distribution\n

\n \n

\n\n

\n \n \n \n

\n);\n\nfunction MatchStatsDialog({ isOpen, onClose, selectedEvent }) {\n const [selectedTab, setSelectedTab] = useState(\"all\");\n const [matchData, setMatchData] = useState(null);\n const [expandedSections, setExpandedSections] = useState({\n league: true,\n homeTeam: false,\n awayTeam: false,\n });\n\n const toggleSection = (section) => {\n setExpandedSections((prev) => ({\n ...prev,\n [section]: !prev[section],\n }));\n };\n\n useEffect(() => {\n (async () => {\n if (!selectedEvent) return;\n\n const url = new URL(window.location.href);\n const currentDate = new Date().toISOString().slice(0, 10);\n const date = url.searchParams.get(\"date\") || currentDate;\n\n const res = await axios.get(\n `https://nmsilva-fbrefeventsapi.web.val.run/api/event?link=${selectedEvent?.link}&d=${date}`\n );\n\n setMatchData(res.data);\n })();\n }, [selectedEvent?.link]);\n\n useEffect(() => {\n const handleEsc = (e) => {\n if (e.key === \"Escape\") onClose();\n };\n window.addEventListener(\"keydown\", handleEsc);\n return () => window.removeEventListener(\"keydown\", handleEsc);\n }, [onClose]);\n\n useEffect(() => {\n if (isOpen) {\n document.body.style.overflow = \"hidden\";\n } else {\n setMatchData(null);\n document.body.style.overflow = \"unset\";\n }\n return () => {\n document.body.style.overflow = \"unset\";\n };\n }, [isOpen]);\n\n if (!isOpen) return null;\n\n const tabs = [\n { id: \"all\", label: \"All Matches\" },\n { id: \"last6\", label: \"Last 6 Matches\" },\n { id: \"last12\", label: \"Last 12 Matches\" },\n ];\n\n return (\n <>\n \n\n \n

\n {matchData && (\n <>\n

\n {matchData.match.homeTeam} vs {matchData.match.awayTeam}\n

\n \n \n \n \n \n

\n\n

\n {tabs.map((tab) => (\n setSelectedTab(tab.id)}\n />\n ))}\n

\n\n

\n toggleSection(\"league\")}\n className=\"w-full flex justify-between items-center p-4 bg-gray-100 hover:bg-gray-200 transition-colors\"\n >\n

League Stats

\n \n \n \n \n {expandedSections.league && (\n

\n \n

\n )}\n

\n\n

\n toggleSection(\"homeTeam\")}\n className=\"w-full flex justify-between items-center p-4 bg-gray-100 hover:bg-gray-200 transition-colors\"\n >\n

\n {matchData.match.homeTeam} (\n {matchData.homeTeam.leagueInfo.rank})\n

\n \n \n \n \n {expandedSections.homeTeam && (\n

\n \n

\n )}\n

\n\n

\n toggleSection(\"awayTeam\")}\n className=\"w-full flex justify-between items-center p-4 bg-gray-100 hover:bg-gray-200 transition-colors\"\n >\n

\n {matchData.match.awayTeam} (\n {matchData.awayTeam.leagueInfo.rank})\n

\n \n \n \n \n {expandedSections.awayTeam && (\n

\n \n

\n )}\n

\n \n )}\n

\n \n \n );\n}\n\n// Load Handsontable from a CDN\nconst loadHandsontable = () => {\n return new Promise((resolve) => {\n const script = document.createElement(\"script\");\n script.src =\n \"https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js\";\n script.onload = () => resolve();\n document.head.appendChild(script);\n });\n};\n\nconst loadHandsontableCSS = () => {\n return new Promise((resolve) => {\n const link = document.createElement(\"link\");\n link.rel = \"stylesheet\";\n link.href =\n \"https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css\";\n link.onload = () => resolve();\n document.head.appendChild(link);\n });\n};\n\nconst EventsTable = () => {\n const [events, setEvents] = useState([]);\n const [selectedEvent, setSelectedEvent] = useState(null);\n const [favorites, setFavorites] = useState([]);\n\n // New filter states\n const defaultFilters = {\n league: \"\",\n timeFrame: \"all\", // 'all', '3h', '6h', '12h'\n onlyFavorites: false,\n teamName: \"\",\n };\n const [filters, setFilters] = useState(\n localStorage.getItem(\"filters\")\n ? JSON.parse(localStorage.getItem(\"filters\"))\n : defaultFilters\n );\n const [availableLeagues, setAvailableLeagues] = useState([]);\n const [showFilters, setShowFilters] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n\n const PANTRY_ID = \"5b5e3153-b623-4731-8370-6fc798903346\";\n const FAVORITES_BASKET = \"footballFavorites\";\n\n const url = new URL(window.location.href);\n const currentDate = new Date().toISOString().slice(0, 10);\n const [date, setDate] = useState(url.searchParams.get(\"date\") || currentDate);\n\n const hotRef = useRef(null);\n\n const loadData = async () => {\n setIsLoading(true);\n const res = await axios.get(\n `https://nmsilva-fbrefeventsapi.web.val.run/api/events?d=${date}`\n );\n const parsedData = res.data.map((event) => {\n return {\n ...event,\n timeInUnix: event.time,\n time: new Date(event.time * 1000),\n displayTime: new Date(event.time * 1000).toLocaleString(\"en-US\", {\n hour: \"numeric\",\n minute: \"numeric\",\n hour12: true,\n }),\n groupKey: event.competitionKey,\n };\n });\n setEvents(parsedData);\n\n // Extract unique leagues/competitions\n const leagues = [...new Set(parsedData.map((event) => event.groupKey))];\n setAvailableLeagues(leagues.sort());\n setIsLoading(false);\n };\n\n // Load events data\n useEffect(() => {\n (async () => {\n await loadData();\n })();\n }, [date]);\n\n // Load favorites from Pantry\n useEffect(() => {\n const loadFavorites = async () => {\n try {\n const response = await axios.get(\n `https://getpantry.cloud/apiv1/pantry/${PANTRY_ID}/basket/${FAVORITES_BASKET}`\n );\n if (response.data && response.data.favorites) {\n setFavorites(response.data.favorites);\n }\n } catch (error) {\n // If the basket doesn't exist yet, create it with empty favorites\n if (error.response && error.response.status === 400) {\n saveFavorites([]);\n } else {\n console.error(\"Error loading favorites:\", error);\n }\n }\n };\n\n loadFavorites();\n }, []);\n\n // Save favorites to Pantry\n const saveFavorites = async (newFavorites) => {\n try {\n await axios.post(\n `https://getpantry.cloud/apiv1/pantry/${PANTRY_ID}/basket/${FAVORITES_BASKET}`,\n { favorites: newFavorites }\n );\n setFavorites(newFavorites);\n } catch (error) {\n console.error(\"Error saving favorites:\", error);\n }\n };\n\n // Toggle favorite status for a league\n const toggleFavorite = (groupKey) => {\n const isFavorite = favorites.includes(groupKey);\n\n if (isFavorite) {\n // Show confirmation dialog when removing a favorite\n const confirmed = window.confirm(\n \"Are you sure you want to remove this league from favorites?\"\n );\n if (!confirmed) return;\n }\n\n const newFavorites = isFavorite\n ? favorites.filter((fav) => fav !== groupKey)\n : [...favorites, groupKey];\n\n saveFavorites(newFavorites);\n };\n\n // Apply time frame filter\n const isWithinTimeFrame = (eventTime) => {\n if (filters.timeFrame === \"all\") return true;\n\n const now = new Date();\n const eventDate = new Date(eventTime);\n const hourDiff = (eventDate - now) / (1000 * 60 * 60);\n\n if (filters.timeFrame === \"3h\") return hourDiff >= 0 && hourDiff <= 3;\n if (filters.timeFrame === \"6h\") return hourDiff >= 0 && hourDiff <= 6;\n if (filters.timeFrame === \"12h\") return hourDiff >= 0 && hourDiff <= 12;\n\n return true;\n };\n\n // Handle filter changes\n const handleFilterChange = (name, value) => {\n setFilters((prev) => ({ ...prev, [name]: value }));\n\n localStorage.setItem(\n \"filters\",\n JSON.stringify({ ...filters, [name]: value })\n );\n };\n\n // Apply all filters to events\n const filteredEvents = useMemo(\n () =>\n events\n .filter((event) => {\n // League filter\n if (filters.league && event.groupKey !== filters.league) return false;\n\n if (filters.onlyFavorites && !favorites.includes(event.groupKey)) {\n return false;\n }\n\n if (filters.custom) {\n switch (filters.custom) {\n case \"no_goals\":\n return event.goalsHome === 0 && event.goalsAway === 0;\n default:\n break;\n }\n }\n\n // Time frame filter\n if (!isWithinTimeFrame(event.time)) return false;\n\n // Team name filter\n if (\n filters.teamName &&\n !event.homeTeam\n .toLowerCase()\n .includes(filters.teamName.toLowerCase()) &&\n !event.awayTeam\n .toLowerCase()\n .includes(filters.teamName.toLowerCase())\n ) {\n return false;\n }\n\n return true;\n })\n .sort((a, b) => {\n return parseInt(a.timeInUnix) - parseInt(b.timeInUnix);\n }),\n [events, filters]\n );\n\n // Reset all filters\n const resetFilters = () => {\n setFilters(defaultFilters);\n };\n\n // Initialize Handsontable\n useEffect(() => {\n const initHandsontable = async () => {\n await loadHandsontable();\n await loadHandsontableCSS();\n\n const Handsontable = window.Handsontable;\n\n if (hotRef.current) {\n hotRef.current.destroy();\n }\n\n const headers = [\n \"Time\",\n \"Competition\",\n \"Home Team\",\n \"Away Team\",\n \"Score\",\n \"Home Goals (H)\",\n \"Away Goals (A)\",\n \"Home Goals (A)\",\n \"Away Goals (H)\",\n \"Home Goals For\",\n \"Home Goals Against\",\n \"Away Goals For\",\n \"Away Goals Against\",\n \"Home Rank\",\n \"Away Rank\",\n \"Rank Diff\",\n \"League 0Goals (%)\",\n \"Actions\", // Add new column header\n ];\n const tableData = filteredEvents.map((event) => [\n event.displayTime,\n event.groupKey,\n event.homeTeam,\n event.awayTeam,\n event.score || \"-\",\n event.processedInfo?.homeTeam?.stats?.last6?.goals?.avgHomeGoals || \"-\",\n event.processedInfo?.homeTeam?.stats?.last6?.goals?.avgAwayGoals || \"-\",\n event.processedInfo?.awayTeam?.stats?.last6?.goals?.avgHomeGoals || \"-\",\n event.processedInfo?.awayTeam?.stats?.last6?.goals?.avgAwayGoals || \"-\",\n event.processedInfo?.homeTeam?.stats?.last6?.results?.goalsFor || \"-\",\n event.processedInfo?.homeTeam?.stats?.last6?.results?.goalsAgainst ||\n \"-\",\n event.processedInfo?.awayTeam?.stats?.last6?.results?.goalsFor || \"-\",\n event.processedInfo?.awayTeam?.stats?.last6?.results?.goalsAgainst ||\n \"-\",\n event.processedInfo?.homeTeam?.leagueInfo?.rank || \"-\",\n event.processedInfo?.awayTeam?.leagueInfo?.rank || \"-\",\n Math.abs(\n event.processedInfo?.homeTeam?.leagueInfo?.rank -\n event.processedInfo?.awayTeam?.leagueInfo?.rank\n ) || \"-\",\n event.processedInfo?.leagueStats?.stats?.all?.goals?.[\"0\"] >= 0\n ? (\n (event.processedInfo.leagueStats.stats.all.goals[\"0\"] * 100) /\n event.processedInfo.leagueStats.stats.all.totalEvents\n ).toFixed(1)\n : \"-\",\n { groupKey: event.groupKey, e: event },\n ]);\n\n const actionsRenderer = (instance, td, row, col, prop, value) => {\n const container = document.createElement(\"div\");\n container.className = \"actions-container\";\n\n // Star button\n const starButton = document.createElement(\"button\");\n starButton.className = \"icon-button star-button\";\n const isFavorite = favorites.includes(value.groupKey);\n starButton.innerHTML = isFavorite\n ? `\n \n `\n : `\n \n `;\n starButton.onclick = (e) => {\n e.stopPropagation();\n\n toggleFavorite(value?.groupKey);\n };\n\n // View button\n const viewButton = document.createElement(\"button\");\n viewButton.className = \"icon-button view-button\";\n viewButton.innerHTML = `\n \n `;\n viewButton.onclick = (e) => {\n e.stopPropagation();\n\n if (!value.e.link) return;\n\n setSelectedEvent(value.e);\n };\n\n container.appendChild(starButton);\n container.appendChild(viewButton);\n td.innerHTML = \"\";\n td.appendChild(container);\n return td;\n };\n\n // Add this function to save the grid state\n const saveGridState = () => {\n if (!hotRef.current) return;\n\n const state = {\n columnOrder: hotRef.current.columnIndexMapper.getIndexesSequence(),\n sortConfig: hotRef.current.getPlugin(\"columnSorting\").getSortConfig(),\n filters: hotRef.current\n .getPlugin(\"filters\")\n .conditionCollection.exportAllConditions(),\n };\n\n localStorage.setItem(\"handsontableState\", JSON.stringify(state));\n };\n\n hotRef.current = new Handsontable(\n document.getElementById(\"handsontable\"),\n {\n data: tableData,\n colHeaders: headers,\n rowHeaders: true,\n filters: true,\n columnSorting: true,\n fixedColumnsStart: 0,\n dropdownMenu: [\n \"filter_by_condition\",\n \"filter_by_value\",\n \"filter_action_bar\",\n ],\n columns: headers.map((header, index) => ({\n // Define numeric columns for proper filtering\n type: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].includes(index)\n ? \"numeric\"\n : \"text\",\n numericFormat: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].includes(\n index\n )\n ? {\n pattern: \"0\",\n culture: \"en-US\",\n }\n : undefined,\n // Add renderer for the last column (Actions)\n ...(header === \"Actions\" && {\n renderer: actionsRenderer,\n readOnly: true,\n }),\n })),\n licenseKey: \"non-commercial-and-evaluation\", // For non-commercial use\n readOnly: true,\n // stretchH: \"all\",\n autoRowSize: true,\n autoColumnSize: true,\n wordWrap: true,\n manualColumnMove: true,\n className: \"htCenter\",\n cell: [{ row: 0, col: 0, className: \"htMiddle\" }],\n // Add persistence hooks\n afterColumnMove: () => saveGridState(),\n afterColumnSort: () => saveGridState(),\n afterFilter: () => saveGridState(),\n }\n );\n\n // Load previously saved state if it exists\n const savedState = localStorage.getItem(\"handsontableState\");\n if (savedState && hotRef.current) {\n const state = JSON.parse(savedState);\n\n if (state.columnOrder) {\n hotRef.current.columnIndexMapper.moveIndexes(state.columnOrder);\n }\n if (state.sortConfig) {\n // hotRef.current.sortColumns(state.sortConfig);\n }\n if (state.filters) {\n hotRef.current\n .getPlugin(\"filters\")\n .conditionCollection.importAllConditions(state.filters);\n hotRef.current.getPlugin(\"filters\").filter();\n }\n }\n };\n\n if (filteredEvents.length > 0) {\n initHandsontable();\n }\n\n return () => {\n if (hotRef.current) {\n // hotRef.current.destroy();\n }\n };\n }, [filteredEvents, favorites]);\n\n return (\n

\n Events -{\" \"}\n {new Date(date).toLocaleString(\"pt\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n })}\n {\n const newUrl = new URL(window.location.href);\n newUrl.searchParams.set(\"date\", e.target.value);\n window.history.pushState({}, \"\", newUrl.toString());\n setDate(e.target.value);\n }}\n className=\"border border-gray-300 rounded px-2 py-1 text-base ml-4 w-9\"\n />\n

\n {\n loadData();\n }}\n className=\"px-2 py-1 text-base ml-4 w-9\"\n >\n \n \n \n \n setShowFilters(!showFilters)}\n className={`px-4 py-2 rounded font-medium flex items-center ${\n showFilters\n ? \"bg-blue-500 hover:bg-blue-600 text-white\"\n : \"bg-gray-200 hover:bg-gray-300 text-gray-800\"\n }`}\n >\n {showFilters ? (\n \n \n \n ) : (\n \n \n \n )}\n \n

\n\n {/* Filters Section */}\n {showFilters && (\n

\n {/* League Filter */}\n

\n \n Custom Filters\n \n handleFilterChange(\"custom\", e.target.value)}\n className=\"w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n

\n\n {/* Time Frame Filter */}\n

\n \n Time Frame\n \n \n handleFilterChange(\"timeFrame\", e.target.value)\n }\n className=\"w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n \n

\n\n {/* Team Name Filter */}\n

\n \n Team Name\n \n

\n \n handleFilterChange(\"teamName\", e.target.value)\n }\n placeholder=\"Search by team...\"\n className=\"w-full p-2 pl-8 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n {/* Only Favorites Filter */}\n

\n \n \n handleFilterChange(\"onlyFavorites\", e.target.checked)\n }\n className=\"w-4 h-4 text-blue-600 rounded focus:ring-blue-500\"\n />\n \n Only Favorites\n \n \n

\n\n

\n \n Reset Filters\n \n

\n )}\n\n {/* Table Display */}\n

\n \n

\n\n {selectedEvent && (\n setSelectedEvent(null)}\n selectedEvent={selectedEvent}\n />\n )}\n

\n );\n};\n\nfunction App() {\n return (\n <>\n

\n predictz\n \n

\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n // redirect\n\n if (true) {\n return new Response(null, { status: 302, headers: { Location: \"https://nmsilva-zulubetevents.web.val.run/\" } });\n }\n \n return new Response(\n `\n \n \n Events\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n }\n );\n}\n","deleted","label",[99],"permalink","https://www.val.town/x/nmsilva/fbrefEvents/code/main.tsx","extension","actionData","errors"]