\n {/* Base size text-sm */}\n According to {bettorCount} {bettorCount === 1 ? \"person\" : \"people\"} betting {formatDollarAmount(volume)}{\" \"}\n of fake internet money\n

\n \n Disagree? Bet here.\n \n {\n setMarketData(null);\n setInputVisible(true);\n setError(null);\n }}\n className=\"text-stone-500 hover:text-stone-300 text-xs underline text-left md:text-left mt-1 md:mt-0\"\n >\n New market\n \n

\n );\n\n // --- UPDATED RENDER MARKET DETAILS ---\n const renderMarketDetails = () => {\n if (!marketData) {\n return (\n

No market data available.

{\" \"}\n {\n setInputVisible(true);\n setError(null);\n }}\n className=\"mt-4 text-stone-500 hover:text-stone-300 text-sm underline\"\n >\n Enter market\n \n

\n );\n }\n\n if (marketData.outcomeType === \"BINARY\") {\n const yesProb = marketData.probability;\n const colorClass = getColorClass(yesProb);\n return (\n

\n {/* --- MOBILE VIEW --- */}\n {/* Increased top padding (pt-5), minimal horizontal (px-1) */}\n

\n {/* pt-5 */}\n {/* Percentage: Centered in its flex area */}\n

\n {/* Increased to 90vw */}\n {formatPercentage(yesProb)}\n

\n {/* Title & Footer: Left-aligned title */}\n

\n {/* text-left */}\n {marketData.question}\n

\n \n

\n\n {/* --- DESKTOP VIEW --- */}\n {/* items-end for baseline alignment, large pb to push up */}\n

\n {/* items-end, pb-20 */}\n {/* Left Column: ensure justify-end */}\n

\n {/* justify-end */}\n

\n {marketData.question}\n

\n \n

\n {/* Right Column */}\n

\n {formatPercentage(yesProb)}\n

\n );\n } else if (marketData.outcomeType === \"MULTIPLE_CHOICE\" && marketData.answers) {\n const topAnswer = [...marketData.answers]\n .filter(answer => answer.probability !== undefined)\n .sort((a, b) => b.probability - a.probability)[0];\n if (topAnswer) {\n const colorClass = getColorClass(topAnswer.probability);\n return (\n

\n {/* --- MOBILE VIEW --- */}\n

\n {/* px-1, pt-5 */}\n {/* Percentage: Larger font */}\n

\n \n {/* Increased to 90vw */}\n {formatPercentage(topAnswer.probability)}\n

\n {/* Title, Answer & Footer: Left-aligned */}\n

\n {/* text-left */}\n {marketData.question}\n

\n {/* text-left */}\n {topAnswer.text}\n

\n \n

\n {/* --- DESKTOP VIEW --- */}\n

\n {/* items-end, pb-20 */}\n

\n {/* justify-end */}\n

\n {marketData.question}\n

\n {topAnswer.text}\n

\n \n

\n {formatPercentage(topAnswer.probability)}\n

\n \n );\n } else {\n return (\n

\n {marketData.question}\n

{\" \"}\n

Could not determine top answer.

{\" \"}\n \n

\n );\n }\n }\n\n // Fallback for other unsupported types\n return (\n

Market type \"{marketData.outcomeType}\" is not supported yet.

{\" \"}\n

\n {marketData.question}\n

{\" \"}\n \n

\n );\n };\n // --- END OF UPDATED RENDER MARKET DETAILS ---\n\n // --- Main App return structure (Keep previous version) ---\n return (\n

\n {inputVisible && (\n

Manifold Odds

\n Fetches data from the Manifold Markets API.
{\" \"}\n \n API Docs\n {\" \"}\n {\" | \"}{\" \"}\n {\n setMarketData(null);\n setInputVisible(true);\n setError(null);\n setMarketInput(\"\");\n }}\n className=\"underline hover:text-stone-400\"\n >\n Reset\n \n

\n )}\n {loading && (\n

\n )}\n {!inputVisible && marketData && !loading &&

{renderMarketDetails()}\n

}\n {!inputVisible && !marketData && !loading && (\n

{error ? \"Error loading market.\" : \"No market loaded.\"}

{\" \"}\n {error &&

{error}

}{\" \"}\n {\n setMarketData(null);\n setInputVisible(true);\n setError(null);\n }}\n className=\"mt-4 text-stone-500 hover:text-stone-300 text-sm underline\"\n >\n Enter new market\n \n

\n )}\n

\n );\n}\n\n// --- client function (Keep previous version) ---\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render(\n \n \n ,\n );\n }\n else { console.error(\"Root element not found!\"); }\n}\nif (typeof window !== \"undefined\" && typeof document !== \"undefined\") {\n if (document.readyState === \"complete\" || document.readyState === \"interactive\") { client(); }\n else { document.addEventListener(\"DOMContentLoaded\", client); }\n}\n\n// --- handler function (Keep previous version) ---\nexport default async function handler(req) {\n const url = new URL(req.url);\n const fullPath = url.pathname;\n\n // --- API Proxy Logic ---\n if (fullPath.startsWith(\"/proxy/\")) {\n try {\n const manifoldPath = fullPath.replace(\"/proxy/\", \"\");\n const queryString = url.search || \"\";\n const apiUrl = `https://manifold.markets/api/v0/${manifoldPath}${queryString}`;\n const response = await fetch(apiUrl, { headers: { \"Accept\": \"application/json\" } });\n if (!response.ok) {\n let errorBody = { message: `Manifold API returned ${response.status}` };\n const contentType = response.headers.get(\"content-type\");\n if (contentType && contentType.includes(\"application/json\")) {\n try {\n errorBody = await response.json();\n } catch (e) { /* ignore */ }\n }\n else {try {\n errorBody.message = await response.text();\n } catch (e) { /* ignore */ }}\n console.error(\"Manifold API Error:\", errorBody);\n return new Response(JSON.stringify({ error: errorBody.message || `Manifold API Error ${response.status}` }), {\n status: response.status,\n headers: { \"Content-Type\": \"application/json\", \"Access-Control-Allow-Origin\": \"*\" },\n });\n }\n const contentType = response.headers.get(\"content-type\");\n if (!contentType || !contentType.includes(\"application/json\")) {\n console.error(\"Unexpected Content-Type from Manifold:\", contentType);\n return new Response(\n JSON.stringify({ error: `Unexpected response format from Manifold API. Expected JSON, got ${contentType}` }),\n { status: 502, headers: { \"Content-Type\": \"application/json\", \"Access-Control-Allow-Origin\": \"*\" } },\n );\n }\n const data = await response.json();\n return new Response(JSON.stringify(data), {\n status: 200,\n headers: { \"Content-Type\": \"application/json\", \"Access-Control-Allow-Origin\": \"*\" },\n });\n } catch (error) {\n console.error(\"Proxy error:\", error);\n return new Response(JSON.stringify({ error: \"Failed to fetch from Manifold API via proxy: \" + error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\", \"Access-Control-Allow-Origin\": \"*\" },\n });\n }\n }\n\n // --- Serve HTML Page ---\n let title = \"Manifold Odds\";\n let description = \"View Manifold prediction market odds\";\n try {\n const decodedPath = decodeURIComponent(fullPath);\n const pathSegments = decodedPath.split(\"/\").filter(Boolean);\n if (pathSegments.length > 0 && pathSegments[0] !== \"proxy\") {\n const potentialSlug = pathSegments[pathSegments.length - 1];\n if (potentialSlug.length > 3 && !potentialSlug.match(/^[a-zA-Z0-9]{8,12}$/)) {\n const titleSlug = potentialSlug.replace(/-/g, \" \")\n .split(\" \")\n .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n .join(\" \");\n title = `${titleSlug} - Manifold Odds`;\n description = `View odds for the Manifold market: ${potentialSlug}`;\n }\n }\n } catch (e) {\n console.error(\"Error decoding path for title:\", e);\n }\n\n const html = `\n \n \n \n \n ${title}\n \n 📊\">\n \n \n \n \n \n \n \n

\n \n

📊

JavaScript is required to view Manifold Odds. Please enable it in your browser settings.

\n \n `;\n\n return new Response(html, { status: 200, headers: { \"Content-Type\": \"text/html\", \"Cache-Control\": \"no-cache\" } });\n}","deleted","label",[99],"permalink","https://www.val.town/x/dcm31/manifoldMarketViewer/code/main.tsx","extension","actionData","errors"]