/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Function to get a random emoji function getRandomEmoji() { const emojis = ['😀', '😎', '🤖', '👻', '🚀', '🌈', '🍕', '🎉', '💡', '🔥', '🌟', '🦄']; return emojis[Math.floor(Math.random() * emojis.length)]; } function App() { const [vals, setVals] = useState([]); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); const handleValClick = (valId) => { window.open(`https://val.town/v/${valId}`, '_blank'); }; useEffect(() => { fetch('/vals') .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json().then(data => { if (data.error) { throw new Error(data.error); } return data; }); }) .then(data => { if (!Array.isArray(data.vals)) { throw new Error('Invalid data format: vals is not an array'); } setVals(data.vals); setLoading(false); }) .catch(error => { console.error('Error fetching vals:', error); setError(error.toString()); setLoading(false); }); }, []); if (loading) { return

; } if (error) { return

Error: {error}

; } return (

Vals Grid

{vals.length === 0 ? (

No vals found.

) : (

{vals.map(val => (

handleValClick(val.id)} >

{getRandomEmoji()}

{val.name}

{val.description && (

{val.description}

)}

))}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { pathname } = new URL(request.url); if (pathname === "/vals") { 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 username = 'ejfox'; const user = await client.alias.username.retrieve(username); if (!user || !user.id) { throw new Error('User not found'); } let vals = []; for await (const val of client.users.vals.list(user.id, { limit: 100 })) { vals.push(val); } 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' } }); } } return new Response(` Vals Grid

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

allvals