import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; function randomColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return { r, g, b, css: `rgb(${r}, ${g}, ${b})` }; } export default function ColorGuessingGame() { const [target, setTarget] = useState(randomColor()); const [options, setOptions] = useState([]); const [message, setMessage] = useState("Pick the color that matches the RGB value"); const [score, setScore] = useState(0); const generateOptions = () => { const correctIndex = Math.floor(Math.random() * 6); const arr = new Array(6).fill(null).map(() => randomColor()); arr[correctIndex] = target; setOptions(arr); }; useEffect(() => { generateOptions(); // eslint-disable-next-line }, [target]); const handleGuess = (opt) => { if (opt.css === target.css) { setMessage("Correct! 🎉"); setScore((s) => s + 1); setTimeout(() => { setTarget(randomColor()); setMessage("Pick the color that matches the RGB value"); }, 900); } else { setMessage("Try again"); } }; const resetGame = () => { setScore(0); setTarget(randomColor()); setMessage("Pick the color that matches the RGB value"); }; return (

Color Guessing Game

RGB({target.r}, {target.g}, {target.b})

{options.map((opt, i) => ( handleGuess(opt)} className="h-20 rounded-xl shadow-inner" style={{ backgroundColor: opt.css }} /> ))}

{message}

Score: {score}

); }

Kronyx

Game

Inspired by Kronyx?