[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" Juego De Keno Soteo De 20 Numeros del 1 a 80 Rapido y Seguro [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="app/keno-game/actions.ts" "use server" const ALL_NUMBERS = Array.from({ length: 80 }, (_, i) => i + 1) const DRAW_COUNT = 20 /** * Simula la obtención de números aleatorios verificables de un oráculo de blockchain. * En una aplicación real, esto implicaría interactuar con un contrato inteligente * o un servicio de oráculo como Chainlink VRF o un oráculo personalizado de Worldchain. * * @returns {Promise<{ success: boolean; drawnNumbers?: number[]; error?: string }>} */ export async function drawNumbersFromOracle() { try { // --- Placeholder para la integración real con un Oráculo de Blockchain --- // En una aplicación real, aquí es donde interactuarías con el oráculo. // Esto podría involucrar: // 1. Enviar una transacción a un contrato inteligente que solicite un número aleatorio. // Ej: const tx = await contract.requestRandomness(); // 2. Esperar a que la transacción se confirme en la blockchain. // Ej: await tx.wait(); // 3. Escuchar un evento del contrato inteligente que contenga el número aleatorio generado. // Ej: contract.on('RandomNumberGenerated', (requestId, randomNumber) => { ... }); // 4. O, si es un servicio API de oráculo, hacer una llamada HTTP y esperar la respuesta. // // Consideraciones clave para un oráculo de blockchain: // - **Asincronía:** Las operaciones en blockchain son asíncronas y pueden tardar. // - **Gas Fees:** Las transacciones en blockchain incurren en costos de gas. // - **Verificabilidad:** Asegurarse de que la aleatoriedad sea genuinamente verificable en la cadena. // - **Manejo de Errores:** Fallos de red, transacciones revertidas, etc. // // Para este ejemplo, continuamos simulando la generación de números aleatorios // como si vinieran de un oráculo, pero con la estructura conceptual. // ------------------------------------------------------------- // Simulación de un retraso para emular la latencia de la blockchain await new Promise((resolve) => setTimeout(resolve, 1500)) // Simula tiempo de confirmación const availableNumbers = [...ALL_NUMBERS] const verifiablyRandomNumbers: number[] = [] for (let i = 0; i < DRAW_COUNT; i++) { const randomIndex = Math.floor(Math.random() * availableNumbers.length) const drawn = availableNumbers.splice(randomIndex, 1)[0] verifiablyRandomNumbers.push(drawn) } console.log( "Números sorteados por el oráculo (simulado):", verifiablyRandomNumbers.sort((a, b) => a - b), ) return { success: true, drawnNumbers: verifiablyRandomNumbers.sort((a, b) => a - b) } } catch (error) { console.error("Error fetching numbers from oracle:", error) return { success: false, error: "Failed to draw numbers from oracle." } } } [V0_FILE]typescriptreact:file="app/keno-game/page.tsx" "use client" import { useCallback, useReducer, useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { cn } from "@/lib/utils" import { RefreshCcw, Lightbulb, User } from "lucide-react" // Importar User icon import { drawNumbersFromOracle } from "./actions" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { IDKitWidget, VerificationLevel } from "@worldcoin/idkit" // Importar IDKitWidget // --- Constantes y Tipos --- const MAX_SELECTED_NUMBERS = 10 const DRAW_COUNT = 20 const INITIAL_BALANCE = 5 const INITIAL_BET = 0.1 // Apuesta inicial ajustada al primer monto const TIP_AMOUNT = 0.5 const PRE_DRAW_ANIMATION_DURATION = 2500 // 2.5 seconds const TEMPORARY_DISPLAY_DURATION = 5000 // 5 seconds for drawn numbers to stay above controls const ALL_NUMBERS = Array.from({ length: 80 }, (_, i) => i + 1) const FIXED_BET_AMOUNTS = [0.1, 0.5, 1, 5, 20, 50] // Nuevos montos fijos para apostar const multiplierTable = { 3: 1.5, 4: 1.5, 5: 2.1, 6: 4, 7: 12, 8: 16, 9: 25, 10: 50, } interface GameResultEntry { id: number matchedCount: number winAmount: number // Net win/loss for the round betAmount: number status: "Ganada" | "Perdida" timestamp: number } // --- Máquina de Estados con useReducer --- interface GameState { status: "IDLE" | "PRE_DRAW" | "DRAWING" | "RESULTS" // Máquina de estados balance: number betAmount: number selectedNumbers: number[] // Números actualmente seleccionados en el tablero drawnNumbers: number[] // Números sorteados finales matchedNumbers: number[] // Números del usuario que coincidieron con los sorteados message: string gameHistory: GameResultEntry[] showHistory: boolean // Este estado ahora será manejado por las pestañas tipUsedThisRound: boolean finalUserPick: number[] // Guarda la selección del usuario al inicio de la ronda para cálculos showDrawnNumbersAboveControls: boolean // Nuevo estado para la posición temporal } // Acciones explícitas para cambiar el estado type GameAction = | { type: "SELECT_NUMBER"; payload: number } | { type: "SET_BET"; payload: number } | { type: "ADJUST_BET"; payload: number } // Mantener por si se quiere reintroducir | { type: "CLEAR_SELECTION" } | { type: "START_PRE_DRAW" } | { type: "START_DRAW"; payload: { userPick: number[] } } | { type: "SET_DRAW_RESULT" payload: { drawnNumbers: number[]; matchedNumbers: number[]; winAmount: number; betAmount: number } } | { type: "SET_ERROR"; payload: string } | { type: "RESET_GAME" } | { type: "TOGGLE_HISTORY" } // Este ya no será necesario directamente para la pestaña | { type: "USE_TIP" } | { type: "HIDE_DRAWN_NUMBERS_ABOVE_CONTROLS" } // Nueva acción const initialState: GameState = { status: "IDLE", balance: INITIAL_BALANCE, betAmount: INITIAL_BET, selectedNumbers: [], drawnNumbers: [], matchedNumbers: [], message: "Selecciona tus números para empezar.", gameHistory: [], showHistory: false, // No se usará directamente para la visibilidad de la pestaña tipUsedThisRound: false, finalUserPick: [], showDrawnNumbersAboveControls: false, // Inicialmente falso } function gameReducer(state: GameState, action: GameAction): GameState { switch (action.type) { case "SELECT_NUMBER": { if (state.status !== "IDLE") return state // No se puede seleccionar si no está en estado IDLE const newSelected = state.selectedNumbers.includes(action.payload) ? state.selectedNumbers.filter((n) => n !== action.payload) : [...state.selectedNumbers, action.payload] if (newSelected.length > MAX_SELECTED_NUMBERS) { return { ...state, message: `Máximo ${MAX_SELECTED_NUMBERS} números.` } } return { ...state, selectedNumbers: newSelected.sort((a, b) => a - b), message: "" } } case "SET_BET": return { ...state, betAmount: action.payload } case "ADJUST_BET": // Mantener por si se quiere reintroducir return { ...state, betAmount: Math.max(0.1, state.betAmount + action.payload) } case "CLEAR_SELECTION": return { ...state, selectedNumbers: [], message: "" } case "START_PRE_DRAW": // Deduce la apuesta aquí, antes de la animación if (state.balance < state.betAmount) { return { ...state, message: "Saldo insuficiente para esta apuesta." } } return { ...state, status: "PRE_DRAW", balance: state.balance - state.betAmount, message: "Preparando sorteo...", } case "START_DRAW": return { ...state, status: "DRAWING", finalUserPick: action.payload.userPick, // Guarda la selección del usuario selectedNumbers: [], // Limpia el tablero para la animación drawnNumbers: [], // Limpia los números sorteados previos matchedNumbers: [], // Limpia los aciertos previos message: "¡Sorteando números!", } case "SET_DRAW_RESULT": { const { drawnNumbers, matchedNumbers, winAmount, betAmount } = action.payload const netWinLoss = winAmount - betAmount const newBalance = state.balance + winAmount const newHistoryEntry: GameResultEntry = { id: Date.now(), matchedCount: matchedNumbers.length, winAmount: netWinLoss, betAmount, status: netWinLoss >= 0 ? "Ganada" : "Perdida", timestamp: Date.now(), } return { ...state, status: "RESULTS", balance: newBalance, drawnNumbers, matchedNumbers, message: winAmount > 0 ? `¡Felicidades! Acertaste ${matchedNumbers.length} y ganaste ${winAmount.toFixed(2)} WLDc` : `No hubo suerte. Acertaste ${matchedNumbers.length}.`, gameHistory: [newHistoryEntry, ...state.gameHistory].slice(0, 10), tipUsedThisRound: false, // Reinicia la propina para la siguiente ronda showDrawnNumbersAboveControls: true, // Muestra temporalmente arriba } } case "SET_ERROR": return { ...state, status: "IDLE", // Vuelve al estado IDLE en caso de error balance: state.balance + state.betAmount, // Devuelve la apuesta message: action.payload, } case "RESET_GAME": // Vuelve al estado inicial pero manteniendo el balance y el historial return { ...initialState, balance: state.balance, gameHistory: state.gameHistory, showHistory: state.showHistory, showDrawnNumbersAboveControls: false, // Asegura que esté en la posición original } case "TOGGLE_HISTORY": // Este ya no será necesario directamente para la pestaña return { ...state, showHistory: !state.showHistory } case "USE_TIP": { if ( state.tipUsedThisRound || state.balance < TIP_AMOUNT || state.status !== "IDLE" || state.selectedNumbers.length < 2 ) { return { ...state, message: "No puedes usar la propina ahora." } } return { ...state, balance: state.balance - TIP_AMOUNT, tipUsedThisRound: true, message: `¡Propina aplicada! Se garantizará 1 de tus números.`, // Cambiado el mensaje } } case "HIDE_DRAWN_NUMBERS_ABOVE_CONTROLS": return { ...state, showDrawnNumbersAboveControls: false } default: return state } } // --- Lógica de Propina Extraída a Función Pura --- /** * Aplica la lógica de la propina a un conjunto de números sorteados. * @returns Un nuevo array de números sorteados con la propina aplicada. */ function applyTipToDraw(drawnNumbers: number[], userPick: number[], drawCount: number): number[] { const finalDrawSet = new Set(drawnNumbers) const guaranteedPicks: number[] = [] // Identifica hasta 1 número del usuario que NO esté ya en los números sorteados for (const num of userPick) { if (!finalDrawSet.has(num) && guaranteedPicks.length < 1) { guaranteedPicks.push(num) } } if (guaranteedPicks.length > 0) { let currentDrawnArray = Array.from(finalDrawSet) // Encuentra números en currentDrawnArray que NO son selecciones del usuario y pueden ser reemplazados const replaceableNumbers = currentDrawnArray.filter((num) => !userPick.includes(num)) // Determina cuántos números reemplazar (ahora solo 1) const numToReplace = Math.min(guaranteedPicks.length, replaceableNumbers.length) // Elimina números reemplazables aleatorios para hacer espacio para los garantizados for (let i = 0; i < numToReplace; i++) { const randomIndex = Math.floor(Math.random() * replaceableNumbers.length) const removedNum = replaceableNumbers.splice(randomIndex, 1)[0] currentDrawnArray = currentDrawnArray.filter((n) => n !== removedNum) // Elimina del array principal } // Añade los números garantizados currentDrawnArray = [...currentDrawnArray, ...guaranteedPicks] // Asegura la unicidad y la cantidad correcta de elementos const finalResult = Array.from(new Set(currentDrawnArray)) // Rellena si faltan números o recorta si sobran while (finalResult.length < drawCount) { let newRandomNum do { newRandomNum = Math.floor(Math.random() * 80) + 1 } while (finalResult.includes(newRandomNum)) finalResult.push(newRandomNum) } while (finalResult.length > drawCount) { // Elimina un número aleatorio no garantizado si hay demasiados const nonGuaranteed = finalResult.filter((num) => !guaranteedPicks.includes(num)) if (nonGuaranteed.length > 0) { const randomIndex = Math.floor(Math.random() * nonGuaranteed.length) const numToRemove = nonGuaranteed[randomIndex] finalResult.splice(finalResult.indexOf(numToRemove), 1) } else { // Fallback: si todos están garantizados, simplemente elimina cualquiera para igualar el conteo finalResult.splice(Math.floor(Math.random() * finalResult.length), 1) } } return finalResult.sort((a, b) => a - b) } return drawnNumbers } // Componente para la tarjeta de números sorteados (reutilizable) const DrawnNumbersCardContent = ({ drawnNumbers, status }: { drawnNumbers: number[]; status: GameState["status"] }) => ( <> Números Sorteados

{Array.from({ length: DRAW_COUNT }).map((_, index) => (

{status === "DRAWING" ? "" : drawnNumbers[index] || "?"}

))}

) export default function KenoGame() { const [state, dispatch] = useReducer(gameReducer, initialState) const { status, balance, betAmount, selectedNumbers, drawnNumbers, matchedNumbers, message, gameHistory, tipUsedThisRound, finalUserPick, showDrawnNumbersAboveControls, } = state const [activeTab, setActiveTab] = useState("rules") // Estado para la pestaña activa const [worldIdVerified, setWorldIdVerified] = useState(false) // Estado para la verificación de World ID const [worldIdUser, setWorldIdUser] = useState(null) // Estado para el ID del usuario de World ID // --- Lógica de Juego controlada por useEffect para mayor claridad --- // Este efecto maneja la transición de PRE_DRAW a DRAWING useEffect(() => { if (status === "PRE_DRAW") { const userPickForDraw = [...selectedNumbers] // Captura la selección actual antes de limpiar el tablero const timer = setTimeout(() => { dispatch({ type: "START_DRAW", payload: { userPick: userPickForDraw } }) }, PRE_DRAW_ANIMATION_DURATION) return () => clearTimeout(timer) } }, [status, selectedNumbers]) // Este efecto maneja la lógica principal del sorteo cuando el estado es DRAWING useEffect(() => { if (status === "DRAWING") { const performDraw = async () => { const result = await drawNumbersFromOracle() if (result.success && result.drawnNumbers) { const finalDrawnNumbers = tipUsedThisRound ? applyTipToDraw(result.drawnNumbers, finalUserPick, DRAW_COUNT) : result.drawnNumbers const currentMatched = finalUserPick.filter((num) => finalDrawnNumbers.includes(num)) const multiplier = multiplierTable[currentMatched.length as keyof typeof multiplierTable] || 0 const winAmount = betAmount * multiplier dispatch({ type: "SET_DRAW_RESULT", payload: { drawnNumbers: finalDrawnNumbers, matchedNumbers: currentMatched, winAmount, betAmount }, }) } else { dispatch({ type: "SET_ERROR", payload: result.error || "Error en el sorteo. Se devolvió la apuesta." }) } } performDraw() } }, [status, betAmount, tipUsedThisRound, finalUserPick]) // Nuevo efecto para controlar la posición temporal de los números sorteados useEffect(() => { let timer: NodeJS.Timeout | undefined if (status === "RESULTS" && showDrawnNumbersAboveControls) { timer = setTimeout(() => { dispatch({ type: "HIDE_DRAWN_NUMBERS_ABOVE_CONTROLS" }) }, TEMPORARY_DISPLAY_DURATION) // 5 segundos return () => { if (timer) clearTimeout(timer) } } }, [status, showDrawnNumbersAboveControls, dispatch]) const handleStartGame = useCallback(() => { if (selectedNumbers.length < 1 || selectedNumbers.length > MAX_SELECTED_NUMBERS) { dispatch({ type: "SET_ERROR", payload: `Selecciona entre 1 y ${MAX_SELECTED_NUMBERS} números.` }) return } if (betAmount <= 0 || betAmount > balance) { dispatch({ type: "SET_ERROR", payload: "Cantidad de apuesta inválida o saldo insuficiente." }) return } dispatch({ type: "START_PRE_DRAW" }) }, [selectedNumbers, betAmount, balance]) const getNumberClass = useCallback( (num: number) => { const isSelected = selectedNumbers.includes(num) const isFinalPick = finalUserPick.includes(num) // Para mantener el estilo de los números seleccionados durante el sorteo const isDrawn = drawnNumbers.includes(num) const isMatched = matchedNumbers.includes(num) const classes = cn( "flex items-center justify-center w-10 h-10 rounded-full text-lg font-bold cursor-pointer transition-all duration-200 ease-in-out", "border-2 border-transparent", "hover:scale-110 hover:shadow-lg", ) // Animación de pre-sorteo para números seleccionados if (status === "PRE_DRAW" && isSelected) { return cn( classes, "bg-white text-black border-white shadow-lg shadow-white/70 animate-white-flicker", "cursor-not-allowed hover:scale-100 hover:shadow-lg", // Deshabilita efectos hover durante la animación ) } // Estilos para números después de la animación de pre-sorteo if (status === "DRAWING" || status === "RESULTS") { if (isMatched) { return cn( classes, "bg-green-700 text-white border-green-500 shadow-lg shadow-green-500/50 animate-bounce-once", "hover:bg-green-600 hover:border-green-400", ) } if (isDrawn) { return cn( classes, "bg-purple-800 text-white border-purple-600 shadow-lg shadow-purple-500/50", "hover:bg-purple-700 hover:border-purple-500", ) } if (isFinalPick) { // Muestra los números que el usuario seleccionó originalmente, incluso si no salieron sorteados return cn( classes, "bg-blue-700 text-white border-blue-500 shadow-lg shadow-blue-500/50", "hover:bg-blue-600 hover:border-blue-400", ) } } // Estilos por defecto para números no seleccionados o en estado IDLE if (isSelected) { return cn( classes, "bg-blue-700 text-white border-blue-500 shadow-lg shadow-blue-500/50", "hover:bg-blue-600 hover:border-blue-400", ) } return cn(classes, "bg-gray-800 text-gray-300", "hover:border-cyan-400 hover:text-cyan-300") }, [status, selectedNumbers, drawnNumbers, matchedNumbers, finalUserPick], ) const isGameActive = status !== "IDLE" && status !== "RESULTS" // Juego en curso (PRE_DRAW o DRAWING) const isInteractionDisabled = status !== "IDLE" // Deshabilita selección y apuesta si no está en IDLE const lastResult = gameHistory.length > 0 ? gameHistory[0] : null // Función para manejar la verificación exitosa de World ID const onWorldIdSuccess = useCallback((result: any) => { console.log("World ID Verification Success:", result) setWorldIdVerified(true) // En una aplicación real, aquí enviarías el `proof` a tu backend para verificación // y luego usarías el `nullifierHash` como un identificador de usuario. // Por simplicidad, usaremos un hash del nullifier como "ID de usuario" aquí. setWorldIdUser(result.nullifierHash.substring(0, 8) + "...") // Mostrar un fragmento del hash dispatch({ type: "SET_ERROR", payload: "¡World ID verificado! Puedes empezar a jugar." }) }, []) // Función para manejar errores de World ID const onWorldIdError = useCallback((error: any) => { console.error("World ID Verification Error:", error) setWorldIdVerified(false) setWorldIdUser(null) dispatch({ type: "SET_ERROR", payload: "Error en la verificación de World ID. Intenta de nuevo." }) }, []) return (

Keno World Master

¡Bienvenido a Keno World Master, el juego de azar más emocionante y desafiante! En este juego, podrás probar tu suerte y ganar grandes premios.

{/* World ID Integration Section */} Autenticación World ID {worldIdVerified ? (

Verificado como: {worldIdUser}

) : ( <>

Verifica tu identidad con World ID para jugar.

{({ open }) => ( )}

Necesitarás la aplicación World App para verificar tu World ID.

)} {/* Main Game Content (conditionally rendered if World ID is verified) */} {!worldIdVerified && (

Por favor, verifica tu World ID para acceder al juego.

)} {worldIdVerified && (

{/* Game Board */} Selecciona tus números

{ALL_NUMBERS.map((num) => ( ))}

{/* Controls and Results */}

{/* Betting Section */} Sección de Apuestas

Saldo Actual: {balance.toFixed(2)} WLDc

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

{/* Results Section */} Sección de Resultados

Números Acertados:{" "} {matchedNumbers.join(", ") || "Ninguno"}

{status === "RESULTS" && lastResult && (

0 ? "text-green-500" : "text-red-500")}> Acertados: {lastResult.matchedCount} | Ganancia: {lastResult.winAmount.toFixed(2)} WLDc

)} {message && (

{message}

)}

)} {/* TEMPORARY POSITION for Drawn Numbers (if active) */} {showDrawnNumbersAboveControls && worldIdVerified && ( )} {/* ORIGINAL POSITION for Drawn Numbers (if not active in temporary spot) */} {!showDrawnNumbersAboveControls && worldIdVerified && ( )} {/* Display Selected Numbers Below Drawn Numbers */} {worldIdVerified && ( Tus Números Seleccionados

{finalUserPick.join(", ") || "Ninguno"}

)} {/* Tabs for Rules, Multipliers, and History */} {worldIdVerified && ( Reglas Multiplicadores Historial Reglas del Juego

El juego se juega con 80 números, del 1 al 80.
Puedes seleccionar entre 1 y 10 números en cada apuesta.
La cantidad de números que aciertes determinará tu premio.
El juego es completamente aleatorio y justo.
**Propina:** Por {TIP_AMOUNT.toFixed(2)} WLDc, se garantiza que uno de tus números seleccionados estará en el sorteo final de 20 números.

Tabla de Multiplicadores

Acertados

Multiplicador

{Object.entries(multiplierTable).map(([matched, multiplier]) => (

{matched}

{multiplier}x

))}

Historial de las Últimas 10 Partidas {gameHistory.length === 0 ? (

Aún no hay partidas en el historial.

) : (

{gameHistory.map((entry) => (

Partida: {new Date(entry.timestamp).toLocaleTimeString()} Apostado: {entry.betAmount.toFixed(2)} WLDc

Acertados: {entry.matchedCount} 0 ? "text-green-400" : "text-red-400")} > {entry.winAmount > 0 ? "+" : ""} {entry.winAmount.toFixed(2)} WLDc

))}

)} )}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from 'next' import { GeistSans } from 'geist/font/sans' import { GeistMono } from 'geist/font/mono' import './globals.css' export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.dev', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import KenoGame from "./keno-game/page" export default function HomePage() { return } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" "use client" import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" const Accordion = AccordionPrimitive.Root const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AccordionItem.displayName = "AccordionItem" const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( svg]:rotate-180", className )} {...props} > {children} )) AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName const AccordionContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => (

{children}

)) AccordionContent.displayName = AccordionPrimitive.Content.displayName export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" "use client" import * as React from "react" import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" const AlertDialog = AlertDialogPrimitive.Root const AlertDialogTrigger = AlertDialogPrimitive.Trigger const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName const AlertDialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogHeader.displayName = "AlertDialogHeader" const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogFooter.displayName = "AlertDialogFooter" const AlertDialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName const AlertDialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName const AlertDialogAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName const AlertDialogCancel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, } ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = "Alert" const AlertTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" "use client" import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" const AspectRatio = AspectRatioPrimitive.Root export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, } ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (
) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" const Breadcrumb = React.forwardRef< HTMLElement, React.ComponentPropsWithoutRef<"nav"> & { separator?: React.ReactNode } >(({ ...props }, ref) =>
) Breadcrumb.displayName = "Breadcrumb" const BreadcrumbList = React.forwardRef< HTMLOListElement, React.ComponentPropsWithoutRef<"ol"> >(({ className, ...props }, ref) => (
)) BreadcrumbList.displayName = "BreadcrumbList" const BreadcrumbItem = React.forwardRef< HTMLLIElement, React.ComponentPropsWithoutRef<"li"> >(({ className, ...props }, ref) => (
)) BreadcrumbItem.displayName = "BreadcrumbItem" const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean } >(({ asChild, className, ...props }, ref) => { const Comp = asChild ? Slot : "a" return ( ) }) BreadcrumbLink.displayName = "BreadcrumbLink" const BreadcrumbPage = React.forwardRef< HTMLSpanElement, React.ComponentPropsWithoutRef<"span"> >(({ className, ...props }, ref) => ( )) BreadcrumbPage.displayName = "BreadcrumbPage" const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
) BreadcrumbSeparator.displayName = "BreadcrumbSeparator" const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => ( ) BreadcrumbEllipsis.displayName = "BreadcrumbElipssis" export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" 'use client' import * as React from 'react' import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react' import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker' import { cn } from '@/lib/utils' import { Button, buttonVariants } from '@/components/ui/button' function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps['variant'] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className )} captionLayout={captionLayout} formatters={{ formatMonthDropdown: date => date.toLocaleString('default', { month: 'short' }), ...formatters, }} classNames={{ root: cn('w-fit', defaultClassNames.root), months: cn( 'flex gap-4 flex-col md:flex-row relative', defaultClassNames.months ), month: cn('flex flex-col w-full gap-4', defaultClassNames.month), nav: cn( 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav ), button_previous: cn( buttonVariants({ variant: buttonVariant }), 'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous ), button_next: cn( buttonVariants({ variant: buttonVariant }), 'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next ), month_caption: cn( 'flex items-center justify-center h-[--cell-size] w-full px-[--cell-size]', defaultClassNames.month_caption ), dropdowns: cn( 'w-full flex items-center text-sm font-medium justify-center h-[--cell-size] gap-1.5', defaultClassNames.dropdowns ), dropdown_root: cn( 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root ), dropdown: cn( 'absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown ), caption_label: cn( 'select-none font-medium', captionLayout === 'label' ? 'text-sm' : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label ), table: 'w-full border-collapse', weekdays: cn('flex', defaultClassNames.weekdays), weekday: cn( 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday ), week: cn('flex w-full mt-2', defaultClassNames.week), week_number_header: cn( 'select-none w-[--cell-size]', defaultClassNames.week_number_header ), week_number: cn( 'text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number ), day: cn( 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day ), range_start: cn( 'rounded-l-md bg-accent', defaultClassNames.range_start ), range_middle: cn('rounded-none', defaultClassNames.range_middle), range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end), today: cn( 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today ), outside: cn( 'text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside ), disabled: cn( 'text-muted-foreground opacity-50', defaultClassNames.disabled ), hidden: cn('invisible', defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return (
) }, Chevron: ({ className, orientation, ...props }) => { if (orientation === 'left') { return ( ) } if (orientation === 'right') { return ( ) } return ( ) }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (
{children}
) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return ( ) }) CarouselPrevious.displayName = "CarouselPrevious" const CarouselNext = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) }) CarouselNext.displayName = "CarouselNext" export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" "use client" import * as React from "react" import * as RechartsPrimitive from "recharts" import { cn } from "@/lib/utils" // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error("useChart must be used within a ") } return context } const ChartContainer = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"] } >(({ id, className, children, config, ...props }, ref) => { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` return (
{children}
) }) ChartContainer.displayName = "Chart" const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([_, config]) => config.theme || config.color ) if (!colorConfig.length) { return null } return (