/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import DOMPurify from "https://esm.sh/dompurify"; import { marked } from "https://esm.sh/marked"; function App() { const [vals, setVals] = useState([]); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); const [debugInfo, setDebugInfo] = useState([]); const [username, setUsername] = useState(""); const handleValClick = (valId) => { window.open(`https://val.town/v/${valId}`, '_blank'); }; useEffect(() => { const pathname = window.location.pathname; const usernameFromPath = pathname.split('/')[1]; setUsername(usernameFromPath || 'ejfox'); // Default to 'ejfox' if no username provided const fetchVals = async () => { setLoading(true); setVals([]); setError(null); setDebugInfo([]); try { setDebugInfo(prev => [...prev, `Fetching vals for ${usernameFromPath || 'ejfox'}...`]); const response = await fetch(`/vals/${usernameFromPath || 'ejfox'}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } if (!Array.isArray(data.vals)) { throw new Error('Invalid data format: vals is not an array'); } setDebugInfo(prev => [...prev, `Fetched ${data.vals.length} vals`]); // Fetch emojis for each val with a delay for (const val of data.vals) { setDebugInfo(prev => [...prev, `Fetching emoji for ${val.name}...`]); const emoji = await fetchEmojiForName(val.name); setVals(prevVals => [...prevVals, { ...val, emoji }]); await new Promise(resolve => setTimeout(resolve, 2000)); // 2 second delay } setDebugInfo(prev => [...prev, 'All vals and emojis fetched']); } catch (error) { console.error('Error fetching vals:', error); setError(error.toString()); setDebugInfo(prev => [...prev, `Error: ${error.message}`]); } finally { setLoading(false); } }; fetchVals(); }, []); const renderMarkdown = (content) => { const rawMarkup = marked(content); const sanitizedMarkup = DOMPurify.sanitize(rawMarkup); return { __html: sanitizedMarkup }; }; return (

Vals Grid for {username}

Debug Information:

{info}

{loading && vals.length === 0 && (

)} {error && (

Error: {error}

)}

{vals.map(val => (

handleValClick(val.id)} >

{val.emoji}

{val.name}

{val.description && (

)}

))}

{!loading && vals.length === 0 && (

No vals found.

)}

); } async function fetchEmojiForName(name) { try { const response = await fetch(`/emoji/${encodeURIComponent(name)}`); if (response.ok) { const data = await response.json(); return data.emoji; } console.error('Error fetching emoji:', response.statusText); } catch (error) { console.error('Error fetching emoji:', error); } return '❓'; // Placeholder } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const url = new URL(request.url); const { pathname } = url; const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); if (pathname.startsWith("/vals/")) { const username = pathname.split("/")[2]; try { const ValTown = (await import("https://esm.sh/@valtown/sdk")).default; const token = Deno.env.get('valtown'); if (!token) { throw new Error('valtown token is not set'); } const client = new ValTown({ apiKey: token }); const user = await client.alias.username.retrieve(username); if (!user || !user.id) { throw new Error('User not found'); } // Create emoji cache table if it doesn't exist await sqlite.execute(` CREATE TABLE IF NOT EXISTS emoji_cache ( name TEXT PRIMARY KEY, emoji TEXT NOT NULL ) `); let vals = []; for await (const val of client.users.vals.list(user.id, { limit: 100 })) { vals.push(val); await new Promise(resolve => setTimeout(resolve, 2000)); // 2 second delay between fetches } return new Response(JSON.stringify({ vals }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { console.error('Server error:', error); return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } if (pathname.startsWith("/emoji/")) { const name = decodeURIComponent(pathname.split("/").pop() || ""); try { // Check cache first const cachedEmoji = await sqlite.execute('SELECT emoji FROM emoji_cache WHERE name = ?', [name]); if (cachedEmoji.rows.length > 0) { return new Response(JSON.stringify({ emoji: cachedEmoji.rows[0].emoji }), { headers: { 'Content-Type': 'application/json' } }); } // Generate new emoji using OpenAI const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const completion = await openai.chat.completions.create({ messages: [{ role: "user", content: `Generate a single emoji that best represents "${name}". Respond with only the emoji, nothing else.` }], model: "gpt-4o-mini", max_tokens: 5, }); const emoji = completion.choices[0].message.content.trim(); // Cache the result await sqlite.execute('INSERT INTO emoji_cache (name, emoji) VALUES (?, ?)', [name, emoji]); return new Response(JSON.stringify({ emoji }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { console.error('Error generating or caching emoji:', error); return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } const username = pathname.split('/')[1] || 'ejfox'; return new Response(` Vals Grid for ${username}

`, { headers: { "content-type": "text/html" }, }); } export default server;

extremePlumCaribou