{rating.emoji}

{rating.name}

{Math.round(rating.percentage)}% CHAOTIC

{rating.description}

\n );\n}\n\nfunction SoundToggle({ isSoundOn, toggleSound }) {\n return (\n \n );\n}\n\nfunction App() {\n const [ideas, setIdeas] = useState([]);\n const [title, setTitle] = useState(\"\");\n const [description, setDescription] = useState(\"\");\n const [latestRating, setLatestRating] = useState(null);\n const [thoughtProvocation, setThoughtProvocation] = useState(getRandomThoughtProvocation());\n const [isSoundOn, setIsSoundOn] = useState(true);\n const [isTyping, setIsTyping] = useState(false);\n const soundRefs = useRef({});\n\n useEffect(() => {\n fetchIdeas();\n preloadSounds();\n }, []);\n\n function preloadSounds() {\n const sounds = {\n whoosh: 'https://maxm-imggenurl.web.val.run/short-whoosh-sound',\n upvote: 'https://maxm-imggenurl.web.val.run/short-positive-sound',\n downvote: 'https://maxm-imggenurl.web.val.run/short-negative-sound',\n tada: 'https://maxm-imggenurl.web.val.run/short-tada-sound'\n };\n\n Object.entries(sounds).forEach(([key, url]) => {\n const audio = new Audio(url);\n audio.preload = 'auto';\n soundRefs.current[key] = audio;\n });\n }\n\n function playSound(soundName) {\n if (isSoundOn && soundRefs.current[soundName]) {\n soundRefs.current[soundName].play();\n }\n }\n\n async function fetchIdeas() {\n const response = await fetch(\"/ideas\");\n const data = await response.json();\n setIdeas(data.sort((a, b) => b.votes - a.votes));\n }\n\n async function submitIdea(e) {\n e.preventDefault();\n playSound('whoosh');\n const response = await fetch(\"/ideas\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ title, description }),\n });\n const newIdea = await response.json();\n setLatestRating(calculateChaosRating(newIdea));\n setTitle(\"\");\n setDescription(\"\");\n setThoughtProvocation(getRandomThoughtProvocation());\n fetchIdeas();\n }\n\n async function vote(id, direction) {\n playSound(direction === 'up' ? 'upvote' : 'downvote');\n await fetch(`/vote/${id}/${direction}`, { method: \"POST\" });\n fetchIdeas();\n }\n\n function toggleSound() {\n setIsSoundOn(!isSoundOn);\n }\n\n function handleInputFocus() {\n setIsTyping(true);\n }\n\n function handleInputBlur() {\n setIsTyping(false);\n }\n\n return (\n

\n \n

🧠🌊 BRAIN TSUNAMI 🌊🧠

\n setTitle(e.target.value)}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n placeholder=\"YOUR MIND-BLOWING TITLE\"\n required\n />\n setDescription(e.target.value)}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n placeholder=\"DESCRIBE YOUR EARTH-SHATTERING IDEA\"\n required\n />\n \n

{thoughtProvocation}

\n \n {latestRating && }\n

\n {ideas.map((idea) => (\n

{idea.title}

{idea.description}

\n {idea.chaosRating && {}} />}\n

\n \n \n

\n ))}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const SCHEMA_VERSION = 2;\n const KEY = \"BRAIN_TSUNAMI\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_ideas_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n description TEXT NOT NULL,\n votes INTEGER DEFAULT 0,\n chaos_rating TEXT\n )\n `);\n\n const url = new URL(request.url);\n \n if (url.pathname === \"/ideas\" && request.method === \"GET\") {\n const ideas = await sqlite.execute(`SELECT * FROM ${KEY}_ideas_${SCHEMA_VERSION}`);\n return new Response(JSON.stringify(ideas.rows.map(idea => ({\n ...idea,\n chaosRating: idea.chaos_rating ? JSON.parse(idea.chaos_rating) : null\n }))), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname === \"/ideas\" && request.method === \"POST\") {\n const { title, description } = await request.json();\n const chaosRating = calculateChaosRating({ title, description });\n const result = await sqlite.execute(\n `INSERT INTO ${KEY}_ideas_${SCHEMA_VERSION} (title, description, chaos_rating) VALUES (?, ?, ?)`,\n [title, description, JSON.stringify(chaosRating)]\n );\n return new Response(JSON.stringify({ id: result.lastInsertId, title, description, chaosRating }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname.startsWith(\"/vote/\") && request.method === \"POST\") {\n const [, , id, direction] = url.pathname.split(\"/\");\n const voteChange = direction === \"up\" ? 1 : -1;\n await sqlite.execute(\n `UPDATE ${KEY}_ideas_${SCHEMA_VERSION} SET votes = votes + ? WHERE id = ?`,\n [voteChange, id]\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(`\n \n \n 🧠🌊 BRAIN TSUNAMI 🌊🧠\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\n@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');\n\n@keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@keyframes explode {\n 0% { transform: scale(0); opacity: 0; }\n 50% { transform: scale(1.2); opacity: 1; }\n 100% { transform: scale(1); opacity: 1; }\n}\n\n:root {\n --primary-color: #ff00ff;\n --secondary-color: #00ffff;\n --text-color: #ffffff;\n --background-color: #1a0033;\n}\n\nbody {\n margin: 0;\n font-family: 'Bangers', cursive;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n color: var(--text-color);\n min-height: 100vh;\n}\n\n.container {\n max-width: 800px;\n margin: 0 auto;\n padding: 30px;\n transition: filter 0.3s ease;\n}\n\n.container.typing {\n filter: brightness(0.8);\n}\n\n.title {\n font-size: 4.5rem;\n text-align: center;\n text-shadow: 3px 3px 0 var(--primary-color), 6px 6px 0 var(--secondary-color);\n animation: pulse 2s infinite;\n margin-bottom: 40px;\n}\n\n.idea-form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-bottom: 40px;\n}\n\ninput, textarea, button {\n font-family: 'Bangers', cursive;\n font-size: 1.4rem;\n padding: 15px;\n border: 3px solid var(--primary-color);\n border-radius: 10px;\n background-color: rgba(0, 0, 0, 0.6);\n color: var(--text-color);\n transition: all 0.3s ease;\n}\n\ninput::placeholder, textarea::placeholder {\n color: #ffff00;\n text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);\n}\n\ninput:focus, textarea:focus {\n outline: none;\n box-shadow: 0 0 15px var(--secondary-color);\n}\n\nbutton {\n cursor: pointer;\n background-color: var(--primary-color);\n font-size: 1.6rem;\n text-transform: uppercase;\n}\n\nbutton:hover {\n transform: scale(1.05);\n box-shadow: 0 0 15px var(--secondary-color);\n}\n\n.ideas-list {\n display: grid;\n gap: 30px;\n}\n\n.idea-card {\n background-color: rgba(0, 0, 0, 0.7);\n border-radius: 15px;\n padding: 25px;\n transition: transform 0.3s;\n box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);\n}\n\n.idea-card:hover {\n transform: translateY(-5px);\n}\n\n.vote-buttons {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n}\n\n.vote-up, .vote-down {\n flex: 1;\n margin: 0 10px;\n}\n\n.vote-up {\n background-color: #00ff00;\n}\n\n.vote-down {\n background-color: #ff0000;\n}\n\n.chaos-rating {\n background-color: rgba(255, 255, 255, 0.1);\n border-radius: 15px;\n padding: 20px;\n margin-top: 30px;\n text-align: center;\n animation: explode 0.5s ease-out;\n}\n\n.chaos-emoji {\n font-size: 4rem;\n animation: spin 2s linear infinite;\n}\n\n.chaos-name {\n font-size: 2rem;\n margin: 15px 0;\n text-shadow: 2px 2px 0 var(--primary-color);\n}\n\n.chaos-percentage {\n font-size: 2.5rem;\n margin: 15px 0;\n color: #ffff00;\n}\n\n.chaos-description {\n font-size: 1.2rem;\n font-style: italic;\n}\n\n.thought-provocation {\n margin-top: 30px;\n font-size: 1.4rem;\n text-align: center;\n color: #ffff00;\n text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);\n animation: pulse 3s infinite;\n}\n\n.sound-toggle {\n position: fixed;\n top: 20px;\n right: 20px;\n font-size: 2rem;\n background: none;\n border: none;\n cursor: pointer;\n}\n\n@media (max-width: 600px) {\n .title {\n font-size: 3.5rem;\n }\n \n .idea-card {\n padding: 20px;\n }\n \n .vote-buttons {\n flex-direction: column;\n gap: 15px;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/kamalnrf/BRAIN_TSUNAMI/code/main.tsx","extension","actionData","errors"]