/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Color betting game configuration const COLORS = [ { name: 'Red', hex: '#FF0000' }, { name: 'Green', hex: '#00FF00' }, { name: 'Blue', hex: '#0000FF' }, { name: 'Yellow', hex: '#FFFF00' }, { name: 'Purple', hex: '#800080' }, { name: 'Orange', hex: '#FFA500' } ]; const INITIAL_BALANCE = 1000; const BET_AMOUNTS = [10, 50, 100, 250, 500]; function ColorTradingBetApp() { const [balance, setBalance] = useState(INITIAL_BALANCE); const [currentColor, setCurrentColor] = useState(null); const [betAmount, setBetAmount] = useState(50); const [selectedColor, setSelectedColor] = useState(null); const [gameHistory, setGameHistory] = useState([]); const [gameMessage, setGameMessage] = useState(''); // Simulate color generation const generateNextColor = () => { return COLORS[Math.floor(Math.random() * COLORS.length)]; }; // Start a new round const startNewRound = () => { const nextColor = generateNextColor(); setCurrentColor(nextColor); setSelectedColor(null); setGameMessage(''); }; // Handle betting const placeBet = (color) => { if (balance < betAmount) { setGameMessage('Insufficient balance!'); return; } setSelectedColor(color); setBalance(prevBalance => prevBalance - betAmount); // Determine win/loss setTimeout(() => { const isWin = color.name === currentColor.name; const winnings = isWin ? betAmount * 2 : 0; setBalance(prevBalance => prevBalance + winnings); setGameMessage( isWin ? `🎉 You won ${winnings} credits!` : `😞 You lost ${betAmount} credits. The color was ${currentColor.name}.` ); // Update game history setGameHistory(prev => [ { color: currentColor, bet: color, result: isWin ? 'win' : 'loss', amount: betAmount }, ...prev.slice(0, 4) // Keep last 5 games ]); // Prepare next round setTimeout(startNewRound, 2000); }, 1500); }; // Initialize game on component mount useEffect(() => { startNewRound(); }, []); return (

🎲 Color Trading Bet 🌈

Balance: 💰 {balance} credits

{BET_AMOUNTS.map(amount => ( ))}

{gameMessage && (

{gameMessage}

)}

{selectedColor ? '❓' : 'Next Color'}

{COLORS.map((color) => ( ))}

{gameHistory.length > 0 && (

Game History

{gameHistory.map((game, index) => (

{game.bet.name} ({game.amount} credits) {game.result === 'win' ? '✅' : '❌'}

))}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Color Trading Bet

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

Anishraj