MLS Standings & Value

\n \n \n \n \n \n \n \n \n \n \n \n \n {teams.map((entry) => (\n \n \n \n \n \n \n \n \n ))}\n \n

onSort(\"overallRank\")} className=\"sortable\">\n Pts Rk{renderSortArrow(\"overallRank\")}\n	onSort(\"pointsPerMillion\")} className=\"sortable\">\n PP$1M Rk{renderSortArrow(\"pointsPerMillion\")}\n	Team	\n Value ⓘ\n	\n Pts/$1M ⓘ\n	Points
{entry.overallRank}	{entry.pp1mRank ?? \"N/A\"}	\n \n {entry.team.team_short_name \|\| entry.team.name}\n	{formatMarketValue(entry.marketValue)}	{formatPointsPerMillion(entry.pointsPerMillion)}	{entry.stats.points}

\n \n );\n}\n\nfunction App() {\n const [standings, setStandings] = useState([]);\n const [lastUpdated, setLastUpdated] = useState(\"\");\n const [rawData, setRawData] = useState(\"\");\n const [clubValues, setClubValues] = useState>({});\n const [isLoading, setIsLoading] = useState(true);\n const [errorMessage, setErrorMessage] = useState(null);\n\n const [sortCriteria, setSortCriteria] = useState(\"overallRank\");\n const [sortDirection, setSortDirection] = useState(\"asc\");\n\n const handleSort = (criteria: SortCriteria) => {\n setSortCriteria(prevCriteria => {\n setSortDirection(prevDirection => {\n if (prevCriteria === criteria) {\n return prevDirection === \"asc\" ? \"desc\" : \"asc\";\n } else {\n return criteria === \"overallRank\" ? \"asc\" : \"desc\";\n }\n });\n return criteria;\n });\n };\n\n useEffect(() => {\n setIsLoading(true);\n setErrorMessage(null);\n fetch(\"/api/standings\")\n .then((response) => response.json())\n .then((data: Standings) => {\n if (data.standings && Array.isArray(data.standings)) {\n const mergedStandings = mergeTeamIds(data.standings);\n setStandings(mergedStandings);\n setRawData(JSON.stringify(mergedStandings, null, 2));\n setLastUpdated(new Date(data.timestamp).toLocaleString());\n setIsLoading(false);\n } else {\n console.error(\"Fetched standings data is not in the expected format:\", data);\n setStandings([]);\n setRawData(JSON.stringify(data, null, 2));\n setLastUpdated(\"Error fetching base standings\");\n setErrorMessage(\"Failed to load standings data. Invalid format received.\");\n setIsLoading(false);\n }\n if (data.error) {\n console.warn(\"Server reported an error fetching standings:\", data.error);\n setErrorMessage(data.error);\n }\n })\n .catch(error => {\n console.error(\"Error fetching base standings:\", error);\n setLastUpdated(\"Error fetching base standings\");\n setRawData(`Workspace error: ${error}`);\n setErrorMessage(`Failed to load standings data: ${(error as Error).message}`);\n setIsLoading(false);\n });\n }, []);\n\n useEffect(() => {\n if (standings.length === 0) return;\n\n const fetchAllProfiles = async () => {\n const allEntries = standings.flatMap(conf => conf.entries);\n const uniqueTmIds = [\n ...new Set(allEntries.map(entry => entry.team.transfermarkt_id).filter(Boolean)),\n ] as string[];\n\n const initialValues: Record = {};\n uniqueTmIds.forEach(tmId => {\n initialValues[tmId] = undefined;\n });\n setClubValues(prev => ({ ...prev, ...initialValues }));\n\n const profilePromises = uniqueTmIds.map(tmId => fetchClubProfileFromApi(tmId));\n const results = await Promise.allSettled(profilePromises);\n\n const newClubValues: Record = {};\n results.forEach((result, index) => {\n const tmId = uniqueTmIds[index];\n if (tmId) {\n if (result.status === \"fulfilled\" && result.value) {\n newClubValues[tmId] = result.value.currentMarketValue ?? null;\n } else {\n if (result.status === \"rejected\") {\n console.error(`Failed to fetch profile for ID ${tmId}:`, result.reason);\n }\n newClubValues[tmId] = null;\n }\n }\n });\n setClubValues(prev => ({ ...prev, ...newClubValues }));\n };\n\n fetchAllProfiles();\n }, [standings]);\n\n const enrichedAndSortedTeams = useMemo((): EnrichedTeamEntry[] => {\n if (standings.length === 0) return [];\n\n const allTeamsFlat = standings.flatMap(conf => conf.entries);\n\n const teamsWithOverallRank = [...allTeamsFlat]\n .sort((a, b) => b.stats.points - a.stats.points)\n .map((entry, index) => ({\n ...entry,\n overallRank: index + 1,\n }));\n\n const teamsWithMetrics = teamsWithOverallRank.map(entry => {\n const tmId = entry.team.transfermarkt_id;\n const marketValue = tmId ? clubValues[tmId] : undefined;\n let pointsPerMillion: number | null = null;\n if (typeof marketValue === \"number\" && marketValue > 0) {\n pointsPerMillion = (entry.stats.points * 1_000_000) / marketValue;\n }\n return {\n ...entry,\n marketValue: marketValue,\n pointsPerMillion: pointsPerMillion,\n pp1mRank: null as number | null,\n teamId: entry.team.asa_id || entry.team.abbreviation,\n };\n });\n\n const teamsSortedByValue = [...teamsWithMetrics]\n .sort((a, b) => {\n const valA = typeof a.pointsPerMillion === \"number\" && Number.isFinite(a.pointsPerMillion)\n ? a.pointsPerMillion\n : -Infinity;\n const valB = typeof b.pointsPerMillion === \"number\" && Number.isFinite(b.pointsPerMillion)\n ? b.pointsPerMillion\n : -Infinity;\n return valB - valA;\n });\n\n const valueRankMap = new Map();\n teamsSortedByValue.forEach((team, index) => {\n if (typeof team.pointsPerMillion === \"number\" && Number.isFinite(team.pointsPerMillion)) {\n valueRankMap.set(team.teamId, index + 1);\n }\n });\n\n const teamsFullyEnriched = teamsWithMetrics.map(team => ({\n ...team,\n pp1mRank: valueRankMap.get(team.teamId) ?? null,\n }));\n\n const sortedTeams = [...teamsFullyEnriched].sort((a, b) => {\n let compareResult = 0;\n if (sortCriteria === \"overallRank\") {\n compareResult = a.overallRank - b.overallRank;\n } else if (sortCriteria === \"pointsPerMillion\") {\n const valA = typeof a.pointsPerMillion === \"number\" && Number.isFinite(a.pointsPerMillion)\n ? a.pointsPerMillion\n : -Infinity;\n const valB = typeof b.pointsPerMillion === \"number\" && Number.isFinite(b.pointsPerMillion)\n ? b.pointsPerMillion\n : -Infinity;\n compareResult = valB - valA;\n }\n return sortDirection === \"asc\" ? compareResult : -compareResult;\n });\n\n return sortedTeams;\n }, [standings, clubValues, sortCriteria, sortDirection]);\n\n if (isLoading && standings.length === 0) {\n return

Loading MLS Standings...

;\n }\n\n if (errorMessage && standings.length === 0) {\n return (\n

\n Error: {errorMessage}

{rawData}

\n );\n }\n\n return (\n

MLS Standings

Last updated: {lastUpdated}

\n {errorMessage &&

Warning: {errorMessage}

}\n\n {enrichedAndSortedTeams.length > 0\n ? (\n \n )\n :

{!isLoading ? \"No standings data available.\" : \"Loading data...\"}

}\n\n

Raw Merged MLS Standings Data

{rawData}

\n \n View source: Val Town\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nconst CLUB_PROFILE_CACHE_DURATION = 7 * 24 * 60 * 60 * 1000;\n\ninterface CachedClubProfile {\n timestamp: number;\n profile: ClubProfile | null;\n}\n\nasync function fetchAndCacheClubProfile_SERVER(transfermarktId: string): Promise {\n const KEY = `transfermarkt_profile_${transfermarktId}`;\n let cachedData: CachedClubProfile | null = null;\n\n try {\n cachedData = await blob.getJSON(KEY) as CachedClubProfile;\n } catch (e) {\n // Ignore\n }\n\n const now = Date.now();\n\n if (cachedData?.profile && (now - cachedData.timestamp < CLUB_PROFILE_CACHE_DURATION)) {\n return cachedData.profile;\n }\n if (cachedData?.profile === null && (now - cachedData.timestamp < 60 * 60 * 1000)) {\n return null;\n }\n\n const url = `https://transfermarkt-api.fly.dev/clubs/${transfermarktId}/profile`;\n const options = {\n method: \"GET\",\n headers: {\n \"accept\": \"application/json\",\n },\n };\n\n try {\n const response = await fetch(url, options);\n if (!response.ok) {\n console.error(`Club profile fetch failed for ${transfermarktId}: ${response.status}`);\n await blob.setJSON(KEY, { timestamp: now, profile: null });\n return null;\n }\n const result: ClubProfile = await response.json();\n\n if (result.currentMarketValue === undefined) {\n result.currentMarketValue = null;\n }\n\n await blob.setJSON(KEY, { timestamp: now, profile: result });\n return result;\n } catch (error) {\n console.error(`Error during fetch/process profile for ${transfermarktId}:`, error);\n await blob.setJSON(KEY, { timestamp: now, profile: null });\n return null;\n }\n}\n\nasync function fetchMLSStandings(): Promise {\n const KEY = \"MLSpointsPerMillion\" + \"_mls_standings\";\n let storedData: Standings | null = null;\n\n try {\n storedData = await blob.getJSON(KEY) as Standings;\n } catch (e) {\n storedData = null;\n }\n\n const now = Date.now();\n const STANDINGS_CACHE_DURATION = 24 * 60 * 60 * 1000;\n\n if (!storedData || !storedData.timestamp || now - storedData.timestamp > STANDINGS_CACHE_DURATION) {\n console.log(\"Fetching fresh MLS standings data...\");\n const url = \"https://major-league-soccer-standings.p.rapidapi.com/\";\n const apiKey = Deno.env.get(\"RAPIDAPI_KEY\") || \"641208f837msh480338fc38359a0p137904jsn60269935b0c9\";\n\n if (apiKey === \"641208f837msh480338fc38359a0p137904jsn60269935b0c9\" && !Deno.env.get(\"RAPIDAPI_KEY\")) {\n console.warn(\"Using fallback RapidAPI key for standings. Consider setting RAPIDAPI_KEY environment variable.\");\n }\n\n const options = {\n method: \"GET\",\n headers: {\n \"X-RapidAPI-Key\": apiKey,\n \"X-RapidAPI-Host\": \"major-league-soccer-standings.p.rapidapi.com\",\n },\n };\n\n try {\n const response = await fetch(url, options);\n if (!response.ok) {\n throw new Error(`Standings API request failed: ${response.status} ${await response.text()}`);\n }\n const result = await response.json();\n if (!Array.isArray(result)) {\n throw new Error(\"Standings API response is not an array as expected.\");\n }\n storedData = { timestamp: now, standings: result };\n await blob.setJSON(KEY, storedData);\n console.log(\"Successfully fetched and cached new standings data.\");\n return storedData;\n } catch (error) {\n console.error(\"Error fetching or processing MLS standings:\", error);\n if (storedData) {\n console.warn(\"Returning stale standings data due to fetch error.\");\n storedData.error = `Failed to fetch fresh standings: ${(error as Error).message}. Displaying cached data.`;\n return storedData;\n } else {\n return {\n timestamp: now,\n standings: [],\n error: `Failed to fetch MLS standings: ${(error as Error).message}`,\n };\n }\n }\n } else {\n console.log(\"Using cached MLS standings data.\");\n return storedData;\n }\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n const headers = {\n \"Content-Type\": \"application/json\",\n \"Cache-Control\": \"no-cache\",\n };\n\n if (url.pathname === \"/api/standings\") {\n const standingsData = await fetchMLSStandings();\n return new Response(JSON.stringify(standingsData), { headers, status: 200 });\n }\n\n const profileMatch = url.pathname.match(/^\\/api\\/clubProfile\\/(\\d+)$/);\n if (profileMatch) {\n const transfermarktId = profileMatch[1];\n if (!transfermarktId) {\n return new Response(JSON.stringify({ error: \"Missing club ID\" }), { headers, status: 400 });\n }\n try {\n const profileData = await fetchAndCacheClubProfile_SERVER(transfermarktId);\n if (profileData) {\n return new Response(JSON.stringify(profileData), { headers, status: 200 });\n } else {\n return new Response(JSON.stringify({ error: \"Profile not found or fetch failed\" }), { headers, status: 404 });\n }\n } catch (error) {\n console.error(`Server error fetching profile ${transfermarktId}:`, error);\n return new Response(JSON.stringify({ error: \"Internal server error\" }), { headers, status: 500 });\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n MLS Standings\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n line-height: 1.6;\n color: #333;\n max-width: 1000px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f9f9f9;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 20px;\n background-color: #fff;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n table-layout: fixed;\n}\n\nth, td {\n padding: 10px 8px;\n text-align: left;\n border-bottom: 1px solid #ddd;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nth {\n background-color: #f2f2f2;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.8em;\n color: #555;\n}\n\nth.sortable {\n cursor: pointer;\n user-select: none;\n}\n\nth.sortable:hover {\n background-color: #e8e8e8;\n}\n\n.info-icon {\n cursor: help;\n font-size: 0.9em;\n color: #777;\n margin-left: 4px;\n border-bottom: 1px dotted #777;\n}\n\n\nth:nth-child(1), td:nth-child(1) { width: 8%; text-align: center; }\nth:nth-child(2), td:nth-child(2) { width: 10%; text-align: center; }\nth:nth-child(3), td:nth-child(3) { width: 36%; white-space: normal; }\nth:nth-child(4), td:nth-child(4) { width: 15%; text-align: right; padding-right: 10px;}\nth:nth-child(5), td:nth-child(5) { width: 18%; text-align: right; padding-right: 10px;}\nth:nth-child(6), td:nth-child(6) { width: 13%; text-align: center; }\n\n\ntd {\n font-size: 0.9em;\n}\n\ntd:nth-child(3) {\n white-space: normal;\n}\n\n\ntr:hover {\n background-color: #f5f5f5;\n}\n\nimg {\n vertical-align: middle;\n margin-right: 8px;\n height: 18px;\n width: auto;\n}\n\npre {\n background-color: #2d2d2d;\n color: #f0f0f0;\n border: 1px solid #444;\n border-radius: 4px;\n padding: 15px;\n white-space: pre-wrap;\n word-wrap: break-word;\n font-family: \"Courier New\", Courier, monospace;\n font-size: 0.9em;\n max-height: 400px;\n overflow-y: auto;\n}\n\nh1, h2, h3 {\n color: #2c3e50;\n padding-bottom: 5px;\n margin-top: 30px;\n}\nh1 { font-size: 2em; border-bottom: 2px solid #eee;}\nh2 { font-size: 1.5em; border-bottom: 2px solid #eee;}\nh3 { font-size: 1.2em; margin-bottom: 10px; border-bottom: 1px solid #eee;}\n\np { margin-bottom: 15px; }\na { color: #3498db; text-decoration: none; }\na:hover { text-decoration: underline; }\nsmall { font-size: 0.8em; color: #777; }\n`;\n\nexport { client };","deleted","label","children",[],[157],{"_105":176,"_96":100,"_158":177,"_159":-5,"_160":143,"_161":102,"_163":22,"_107":178,"_101":179,"_166":180,"_168":181,"_170":22,"_171":-5,"_172":182,"_99":183},"4fcbebec-26da-11f0-8948-569c3dd06744","f88b83cc-26d6-11f0-95e1-569c3dd06744",["D",1746137953185],1,"file","---\ntitle: \"MLSpointsPerMillion\"\ndescription: \"A undefined val\"\nurl: \"https://dcm31--2458b00826d511f0961b569c3dd06744.web.val.run\"\nauthor: \"dcm31\"\ntags: [\"val-town\"]\n---\n\n## About\n\nA undefined val\n\n## HTTP Endpoint\n\nThis val is accessible via the following URL:\n\n`https://dcm31--2458b00826d511f0961b569c3dd06744.web.val.run`\n\n## Usage\n\n```typescript\n// Import this val\nimport { MLSpointsPerMillion } from \"https://esm.town/v//MLSpointsPerMillion\";\n\n// Example usage\n// ...\n```\n\n## Notes\n\n- Created: 2025-05-01\n- Last updated: 2025-05-01\n- Type: script\n- Privacy: public",[],[100],"files",[155,175],"counts",{"_188":189,"_190":191,"_192":32,"_193":194,"_197":198},"pulls",2,"branches",3,"forks","envVars",{"_195":32,"_196":32},"count","emptyCount","connections",{"_195":32,"_199":32},"unfilledCount","contents",[],{"_105":176,"_96":100,"_158":177,"_159":-5,"_160":143,"_161":102,"_163":22,"_107":203,"_101":179,"_166":180,"_168":181,"_170":22,"_171":-5,"_99":204},["D",1746137953185],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":213,"_153":218,"_184":225,"_180":226,"_200":228,"_229":-5,"_230":-5,"_231":-5,"_232":-5,"_233":234,"_193":-5},{"_105":106,"_96":97,"_107":214,"_109":-5,"_110":111,"_112":113,"_114":-5,"_115":-5,"_14":116,"_117":118,"_119":111,"_120":-5,"_121":122,"_123":32,"_16":124,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_23":215,"_137":216,"_140":217,"_152":22},["D",1746135732790],{"_94":95,"_135":136},{"_94":95,"_139":136,"_14":116},{"_101":142,"_96":44,"_105":143,"_144":106,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":97,"_151":95},[219,222],{"_105":156,"_96":157,"_158":118,"_159":-5,"_160":143,"_161":162,"_163":22,"_107":164,"_101":165,"_166":167,"_168":169,"_170":22,"_171":-5,"_172":220,"_99":221},[],[157],{"_105":176,"_96":100,"_158":177,"_159":-5,"_160":143,"_161":102,"_163":22,"_107":178,"_101":179,"_166":180,"_168":181,"_170":22,"_171":-5,"_172":223,"_99":224},[],[100],[219,222],{"_105":176,"_96":100,"_158":177,"_159":-5,"_160":143,"_161":102,"_163":22,"_107":203,"_101":179,"_166":180,"_168":181,"_170":22,"_171":-5,"_99":227},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]