Qiuz

import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { RotateCcw, Maximize2, Shuffle } from "lucide-react"; export default function RandomNummerkiezer() { const [min, setMin] = useState(1); const [max, setMax] = useState(100); const [number, setNumber] = useState(null); const [history, setHistory] = useState([]); const trekNummer = () => { const low = Math.min(Number(min), Number(max)); const high = Math.max(Number(min), Number(max)); if (!Number.isFinite(low) || !Number.isFinite(high)) return; const alle = Array.from({ length: high - low + 1 }, (_, i) => low + i); const beschikbaar = alle.filter((n) => !history.includes(n)); if (!beschikbaar.length) return; const gekozen = beschikbaar[Math.floor(Math.random() * beschikbaar.length)]; setNumber(gekozen); setHistory((h) => [gekozen, ...h]); }; const reset = () => { setNumber(null); setHistory([]); }; const fullscreen = () => { if (!document.fullscreenElement) document.documentElement.requestFullscreen?.(); else document.exitFullscreen?.(); }; const uitverkocht = Number.isFinite(Number(min)) && Number.isFinite(Number(max)) && history.length >= Math.abs(Number(max) - Number(min)) + 1; return (

Random nummerkiezer

Elk nummer wordt maar één keer gekozen.

{number === null ? (
Klaar om te starten?
) : (
{number}
)}

Getrokken

{history.length} nummer{history.length === 1 ? "" : "s"}

{history.length === 0 ? (

Nog geen nummers getrokken

) : (
{history.map((n, i) => ( {n} ))}
)}

); }