/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // List of popular movies const movies = [ "The Shawshank Redemption", "The Godfather", "The Dark Knight", "12 Angry Men", "Schindler's List", "The Lord of the Rings", "Pulp Fiction", "Forrest Gump", "Inception", "The Matrix", "Goodfellas", "Star Wars", "One Flew Over the Cuckoo's Nest", "Apocalypse Now", "The Silence of the Lambs", "Gladiator", "The Departed", "Saving Private Ryan", "Titanic", "The Green Mile", "Jurassic Park", "The Lion King", "Back to the Future", "Raiders of the Lost Ark", "Alien", "Blade Runner", "The Terminator", "Die Hard", "The Princess Bride", "E.T. the Extra-Terrestrial", "Jaws", "The Wizard of Oz", "Casablanca", "Citizen Kane", "Gone with the Wind", "Psycho", "Vertigo", "North by Northwest", "Rear Window", "Singin' in the Rain", "It's a Wonderful Life", "Some Like It Hot", "The Bridge on the River Kwai", "Lawrence of Arabia", "Dr. Strangelove", "2001: A Space Odyssey", "A Clockwork Orange", "The Godfather Part II", "Taxi Driver", "Rocky", "Annie Hall", "Alien", "The Deer Hunter", "Raging Bull", "Blade Runner", "The Thing", "E.T. the Extra-Terrestrial", "Gandhi", "Terms of Endearment", "Amadeus", "The Breakfast Club", "Back to the Future", "Platoon", "Stand by Me", "The Princess Bride", "Full Metal Jacket", "Good Morning, Vietnam", "Die Hard", "Who Framed Roger Rabbit", "Cinema Paradiso", "When Harry Met Sally...", "Do the Right Thing", "Goodfellas", "Dances with Wolves", "The Silence of the Lambs", "Beauty and the Beast", "Reservoir Dogs", "Unforgiven", "Jurassic Park", "Schindler's List", "The Lion King", "Forrest Gump", "The Shawshank Redemption", "Pulp Fiction", "The Usual Suspects", "Se7en", "Toy Story", "Fargo", "Trainspotting", "The English Patient", "Good Will Hunting", "L.A. Confidential", "Titanic", "Saving Private Ryan", "The Truman Show", "Shakespeare in Love", "The Matrix", "American Beauty", "The Sixth Sense", "Fight Club", "Being John Malkovich", "The Green Mile", "Gladiator", "Memento", "Crouching Tiger, Hidden Dragon", "Amelie", "A Beautiful Mind", "The Lord of the Rings: The Fellowship of the Ring", "Spirited Away", "City of God", "The Pianist", "Lost in Translation", "The Lord of the Rings: The Return of the King", "Eternal Sunshine of the Spotless Mind", "Million Dollar Baby", "The Incredibles", "Batman Begins", "Brokeback Mountain", "The Departed", "Pan's Labyrinth", "There Will Be Blood", "No Country for Old Men", "Wall-E", "The Dark Knight", "Slumdog Millionaire", "Up", "The Hurt Locker", "Avatar", ]; function App() { const [description, setDescription] = useState(""); const [options, setOptions] = useState([]); const [correctMovie, setCorrectMovie] = useState(""); const [selectedMovie, setSelectedMovie] = useState(""); const [gameState, setGameState] = useState("loading"); useEffect(() => { fetchNewGame(); }, []); const fetchNewGame = async () => { setGameState("loading"); const response = await fetch("/new-game"); const data = await response.json(); setDescription(data.description); setOptions(data.options); setCorrectMovie(data.correctMovie); setSelectedMovie(""); setGameState("playing"); }; const handleGuess = (movie) => { setSelectedMovie(movie); setGameState(movie === correctMovie ? "won" : "lost"); }; if (gameState === "loading") { return

; } return (

Movie Guessing Game

{description}

{options.map((movie) => ( ))}

{gameState !== "playing" && (

{gameState === "won" ? "Congratulations! You guessed correctly!" : `Sorry, the correct movie was "${correctMovie}".`}

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { if (request.url.endsWith("/new-game")) { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const correctMovie = movies[Math.floor(Math.random() * movies.length)]; const prompt = `Give a rhyming vague description of the movie "${correctMovie}" without mentioning any character names, actor names, or the movie title. The description should be 4 to 8 lines long.`; const completion = await openai.chat.completions.create({ messages: [{ role: "user", content: prompt }], model: "gpt-4o-mini", max_tokens: 100, }); const description = completion.choices[0].message.content.trim(); const options = [correctMovie]; while (options.length < 8) { const randomMovie = movies[Math.floor(Math.random() * movies.length)]; if (!options.includes(randomMovie)) { options.push(randomMovie); } } options.sort(() => Math.random() - 0.5); return new Response(JSON.stringify({ description, options, correctMovie }), { headers: { "Content-Type": "application/json" }, }); } return new Response( ` Movie Guessing Game

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: 'Courier New', monospace; line-height: 1.6; color: #e0e0e0; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #121212; background-image: radial-gradient(#ffffff33 1px, transparent 1px), radial-gradient(#ffffff33 1px, transparent 1px); background-size: 50px 50px; background-position: 0 0, 25px 25px; } .container { background-color: #1e1e1e; border-radius: 10px; padding: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } h1 { text-align: center; color: #bb86fc; text-shadow: 0 0 10px #bb86fc66; } .description { background-color: #2d2d2d; border-left: 5px solid #03dac6; padding: 10px; margin-bottom: 20px; white-space: pre-line; box-shadow: 0 0 10px #03dac633; } .options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; } button { background-color: #3700b3; color: #e0e0e0; border: none; padding: 10px; border-radius: 5px; cursor: pointer; transition: all 0.3s; box-shadow: 0 0 10px #3700b333; } button:hover { background-color: #5600e8; box-shadow: 0 0 15px #5600e866; } button:disabled { background-color: #4a4a4a; cursor: not-allowed; box-shadow: none; } .result { text-align: center; margin-top: 20px; color: #cf6679; } .source-link { text-align: center; margin-top: 20px; } .source-link a { color: #03dac6; text-decoration: none; } .source-link a:hover { text-decoration: underline; } `; export default server;

randomMovieQuiz

Version 6