{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "penalty-upload", "title": "Penalty Upload", "description": "File upload as a penalty kick. Pick your spot, beat the keeper, and the goal fills up as the progress bar.", "dependencies": [ "lucide-react" ], "files": [ { "path": "components/ui/penalty-upload.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, Plus, Upload, X } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst FILE_W = 46\nconst FILE_H = 58\n// The goal mouth: left and width in % of the pitch, top and height in px.\nconst GOAL = { left: 24, width: 52, top: 140, height: 130 }\nconst GOAL_LINE = GOAL.top + GOAL.height\n\n// Markings are projected from one camera, CAMERA yards behind the goal line.\n// Depths are real (six-yard box, spot at 12, area at 18); widths are squeezed to fit.\nconst CAMERA = 96\nconst VANISH_Y = -330\nconst near = (depth: number) => CAMERA / (CAMERA - depth)\n/** Screen y of a point on the grass `depth` yards out from the goal line. */\nconst groundY = (depth: number) =>\n VANISH_Y + (GOAL_LINE - VANISH_Y) * near(depth)\n/** A box `half` wide (% of the pitch, at the goal line) and `depth` yards deep. */\nconst box = (half: number, depth: number) => {\n const y = (groundY(depth) - GOAL_LINE).toFixed(1)\n const reach = half * near(depth)\n return `M${50 - half} 0 ${(50 - reach).toFixed(1)} ${y}H${(50 + reach).toFixed(1)}L${50 + half} 0`\n}\nconst AREA_H = groundY(18) - GOAL_LINE\nconst AREA_HALF = 40 // the six-yard box starts at the posts, the area well outside\nconst MARKINGS = `M${50 - AREA_HALF} 0H${50 + AREA_HALF}${box(GOAL.width / 2, 6)}${box(AREA_HALF, 18)}`\nconst MARK_Y = groundY(12) // the penalty spot\nconst MARK = { width: 96, height: 26 } // a circle on the grass, seen at this angle\n\nconst SPOT = { x: 50, y: MARK_Y - FILE_H / 2 + 6, scale: 1, turn: 0, ms: 450 }\nconst KEEPER_HOME = { x: 50, y: GOAL_LINE - 44, tilt: 0 }\nconst SWAY_MS = 650\nconst FLIGHT_MS = 420\nconst READ_CHANCE = 0.42 // how often the keeper dives the right way\n\nexport type PenaltyUploadHandle = {\n /** Takes a kick that scores; false if no file was ready. `miss` has it saved. */\n shoot: (options?: { miss?: boolean }) => boolean\n /** Puts files on the spot, as if the user had picked them. */\n add: (files: File[]) => void\n}\n\nexport type PenaltyUploadProps = {\n /** Files that ended up in the back of the net. */\n value?: File[]\n onValueChange?: (files: File[]) => void\n /** Uploads a scored file. `report(0..1)` fills the goal; reject to rule it out. */\n onUpload?: (\n file: File,\n report: (progress: number) => void,\n ) => Promise\n accept?: string\n /** Largest file allowed, in bytes. */\n maxSize?: number\n multiple?: boolean\n disabled?: boolean\n title?: string\n description?: string\n className?: string\n}\n\ntype Queued = { id: number; file: File }\ntype Mood = 'idle' | 'miss' | 'uploading' | 'done' | 'error'\ntype Tone = 'idle' | 'active' | 'miss' | 'done' | 'error'\ntype Outcome = 'goal' | 'saved' | 'wide' | 'over' | 'post' | 'bar'\n\nconst TONES: Record<\n Tone,\n { icon: typeof Upload; panel: string; chip: string }\n> = {\n idle: { icon: Upload, panel: 'border-border', chip: 'bg-blue-600' },\n active: {\n icon: Upload,\n panel: 'border-blue-500 ring-4 ring-blue-500/10',\n chip: 'bg-blue-600',\n },\n miss: {\n icon: X,\n panel: 'border-orange-400 ring-4 ring-orange-400/15',\n chip: 'bg-orange-500',\n },\n done: {\n icon: Check,\n panel: 'border-emerald-500 ring-4 ring-emerald-500/15',\n chip: 'bg-emerald-600',\n },\n error: {\n icon: X,\n panel: 'border-red-500 ring-4 ring-red-500/15',\n chip: 'bg-red-600',\n },\n}\n\nconst CALLS: Record, [string[], string]> = {\n saved: [\n ['Saved!', 'Denied!', 'Not today'],\n 'The keeper kept it out. Take it again.',\n ],\n wide: [['Wide!', 'Row Z'], 'That missed the goal. Take it again.'],\n over: [['Over the bar!', 'Into orbit'], 'Keep it down. Take it again.'],\n post: [['Off the post!'], 'So close. Take it again.'],\n bar: [['Off the bar!'], 'So close. Take it again.'],\n}\n\n/** Where a shot at (u, v) ends up: u runs 0..1 post to post, v 0..1 bar to ground. */\nfunction judge(\n u: number,\n v: number,\n): Exclude | 'target' {\n if (v < -0.05) return 'over'\n if (u < -0.02 || u > 1.02) return 'wide'\n if (u < 0.02 || u > 0.98) return 'post'\n if (v < 0.05) return 'bar'\n return 'target'\n}\n\nfunction Keeper({ className }: { className?: string }) {\n return (\n \n {/* legs apart, socks, boots on the bottom edge (the goal line) */}\n \n \n \n \n \n \n {/* bent arms, hands up */}\n \n \n \n \n \n {/* neck, jersey, collar, number */}\n \n \n \n \n 1\n \n {/* head */}\n \n \n \n \n \n \n )\n}\n\nfunction badgeColor(ext: string) {\n if (ext === 'pdf') return 'fill-orange-500'\n if (/^(png|jpe?g|gif|webp|svg|avif)$/.test(ext)) return 'fill-violet-500'\n if (/^(xlsx?|csv)$/.test(ext)) return 'fill-emerald-500'\n if (/^(docx?|txt|md)$/.test(ext)) return 'fill-blue-500'\n return 'fill-slate-500'\n}\n\nfunction FileIcon({ name, className }: { name: string; className?: string }) {\n const ext = /\\.([a-z0-9]{1,4})$/i.exec(name)?.[1].toLowerCase() ?? 'file'\n return (\n \n \n \n \n \n {ext.toUpperCase()}\n \n \n )\n}\n\nfunction formatBytes(bytes: number) {\n if (bytes < 1024) return `${bytes} B`\n if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`\n return `${(bytes / 1024 / 1024).toFixed(1)} MB`\n}\n\nfunction accepts(file: File, accept?: string) {\n if (!accept) return true\n return accept.split(',').some((raw) => {\n const rule = raw.trim().toLowerCase()\n if (rule.startsWith('.')) return file.name.toLowerCase().endsWith(rule)\n if (rule.endsWith('/*')) return file.type.startsWith(rule.slice(0, -1))\n return file.type === rule\n })\n}\n\nfunction simulateUpload(_file: File, report: (progress: number) => void) {\n return new Promise((resolve) => {\n const started = performance.now()\n const tick = () => {\n const progress = Math.min(1, (performance.now() - started) / 1400)\n report(progress)\n if (progress < 1) requestAnimationFrame(tick)\n else resolve()\n }\n requestAnimationFrame(tick)\n })\n}\n\nconst clamp = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), max)\n\nlet nextId = 0\n\nexport const PenaltyUpload = React.forwardRef<\n PenaltyUploadHandle,\n PenaltyUploadProps\n>(function PenaltyUpload(\n {\n value,\n onValueChange,\n onUpload,\n accept,\n maxSize,\n multiple = false,\n disabled = false,\n title = 'Upload a file',\n description,\n className,\n },\n ref,\n) {\n const pitchRef = React.useRef(null)\n const aimRef = React.useRef(null)\n const inputRef = React.useRef(null)\n const netId = React.useId()\n\n const [queue, setQueue] = React.useState([])\n const [inner, setInner] = React.useState([])\n const [mood, setMood] = React.useState('idle')\n const [notice, setNotice] = React.useState({ title: '', text: '' })\n const [progress, setProgress] = React.useState(0)\n const [stage, setStage] = React.useState<'ready' | 'flying' | 'net'>('ready')\n const [ball, setBall] = React.useState(SPOT)\n const [keeper, setKeeper] = React.useState(KEEPER_HOME)\n const [keeperGone, setKeeperGone] = React.useState(false)\n const [sway, setSway] = React.useState(1)\n const [dropping, setDropping] = React.useState(false)\n const [attempts, setAttempts] = React.useState(0)\n const [results, setResults] = React.useState([])\n\n const files = value ?? inner\n const active = queue[0]\n\n const alive = React.useRef(true)\n const timers = React.useRef(new Set>())\n const moodTimer = React.useRef>(undefined)\n const snapshot = {\n active,\n files,\n value,\n onValueChange,\n onUpload,\n accept,\n maxSize,\n multiple,\n mood,\n stage,\n attempts,\n keeperGone,\n }\n const latest = React.useRef(snapshot)\n React.useEffect(() => {\n latest.current = snapshot\n })\n\n const later = (fn: () => void, ms: number) => {\n const id = setTimeout(() => {\n timers.current.delete(id)\n fn()\n }, ms)\n timers.current.add(id)\n return id\n }\n\n /** Shows a mood for a while, then goes back to idle. */\n const flash = (next: Mood, ms: number) => {\n clearTimeout(moodTimer.current)\n setMood(next)\n moodTimer.current = later(\n () => setMood((current) => (current === next ? 'idle' : current)),\n ms,\n )\n }\n\n const commit = (next: File[]) => {\n if (latest.current.value === undefined) setInner(next)\n latest.current.onValueChange?.(next)\n }\n\n const respot = () => {\n setBall(SPOT)\n setKeeper(KEEPER_HOME)\n setStage('ready')\n }\n\n const upload = async (entry: Queued) => {\n clearTimeout(moodTimer.current)\n setMood('uploading')\n setProgress(0)\n const send = latest.current.onUpload ?? simulateUpload\n // Thinned out: a report every frame restarts the fill transition before it moves.\n let shownAt = 0\n try {\n await send(entry.file, (amount) => {\n const now = performance.now()\n if (!alive.current || (amount < 1 && now - shownAt < 150)) return\n shownAt = now\n setProgress(clamp(amount, 0, 1))\n })\n } catch (error) {\n if (!alive.current) return\n setNotice({\n title: 'Ruled out by VAR',\n text:\n error instanceof Error && error.message\n ? error.message\n : 'The upload failed. Take it again.',\n })\n flash('error', 2600)\n respot()\n return\n }\n if (!alive.current) return\n setMood('done')\n commit(\n latest.current.multiple\n ? [...latest.current.files, entry.file]\n : [entry.file],\n )\n later(() => {\n setQueue((items) => items.filter((item) => item.id !== entry.id))\n setMood('idle')\n }, 1500)\n }\n\n /** Kicks at (u, v) of the goal mouth; see judge(). */\n const kick = (u: number, v: number, rigged?: 'goal' | 'save') => {\n const { active: entry, stage, keeperGone, attempts } = latest.current\n if (!entry || stage !== 'ready' || disabled) return false\n latest.current.stage = 'flying' // a second click must not kick again\n if (!rigged) {\n // Nobody hits exactly what they aim at.\n u += (Math.random() - 0.5) * 0.07\n v += (Math.random() - 0.5) * 0.14\n }\n v = Math.min(v, 0.92)\n\n const landing = judge(u, v)\n const side = u < 0.36 ? -1 : u > 0.64 ? 1 : 0\n const elsewhere = [-1, 0, 1].filter((s) => s !== side)\n const readsIt = rigged ? rigged === 'save' : Math.random() < READ_CHANCE\n const dive = keeperGone\n ? null\n : readsIt\n ? side\n : elsewhere[Math.floor(Math.random() * elsewhere.length)]\n // Even a keeper who guesses right cannot reach the top corners.\n const topCorner = v < 0.26 && Math.abs(u - 0.5) > 0.34\n const outcome: Outcome =\n landing !== 'target'\n ? landing\n : dive === side && !topCorner\n ? 'saved'\n : 'goal'\n\n const x = GOAL.left + u * GOAL.width\n const y = GOAL.top + v * GOAL.height\n clearTimeout(moodTimer.current)\n setMood('idle')\n setStage('flying')\n setAttempts((n) => n + 1)\n setBall({ x, y, scale: 0.5, turn: 320, ms: FLIGHT_MS })\n\n if (dive !== null) {\n later(() => {\n if (dive === 0) {\n setKeeper({ ...KEEPER_HOME, y: KEEPER_HOME.y - (v < 0.4 ? 18 : 0) })\n } else if (dive === side) {\n setKeeper({ x: x - dive * 9, y: clamp(y, 168, 250), tilt: dive * 72 })\n } else {\n setKeeper({\n x: 50 + dive * GOAL.width * 0.3,\n y: 240,\n tilt: dive * 72,\n })\n }\n }, 70)\n }\n\n later(() => {\n setResults((list) => [...list, outcome === 'goal'])\n if (outcome === 'goal') {\n setStage('net')\n void upload(entry)\n return\n }\n const [titles, text] = CALLS[outcome]\n setNotice({ title: titles[attempts % titles.length], text })\n flash('miss', 1700)\n const inward = u < 0.5 ? 1 : -1\n const rebound = { y: 326, scale: 0.8, turn: 560, ms: 500 }\n setBall(\n {\n over: { x, y: -70, scale: 0.35, turn: 640, ms: 500 },\n wide: {\n x: x - inward * 34,\n y: y - 30,\n scale: 0.4,\n turn: 640,\n ms: 500,\n },\n saved: { ...rebound, x: x - inward * 12, y: 318 },\n post: { ...rebound, x: x + inward * 12 },\n bar: { ...rebound, x: x + inward * 12 },\n }[outcome],\n )\n later(respot, 1100)\n }, FLIGHT_MS)\n return true\n }\n\n const add = (incoming: File[]) => {\n const accepted: Queued[] = []\n for (const file of incoming) {\n const { accept, maxSize, mood } = latest.current\n const problem = !accepts(file, accept)\n ? 'is not a file type this goal takes.'\n : maxSize && file.size > maxSize\n ? `is over the ${formatBytes(maxSize)} limit.`\n : null\n if (!problem) {\n accepted.push({ id: nextId++, file })\n } else if (mood !== 'uploading' && mood !== 'done') {\n setNotice({\n title: 'Not in the squad',\n text: `${file.name} ${problem}`,\n })\n flash('error', 2600)\n }\n }\n if (accepted.length === 0) return\n const many = latest.current.multiple\n const inNet = latest.current.stage === 'net'\n setQueue((items) => {\n if (many) return [...items, ...accepted]\n // One file at a time: a new pick replaces the one still on the spot.\n return inNet && items.length > 0 ? [items[0], accepted[0]] : [accepted[0]]\n })\n }\n\n React.useImperativeHandle(ref, () => ({\n shoot: (options) =>\n options?.miss ? kick(0.78, 0.6, 'save') : kick(0.86, 0.22, 'goal'),\n add,\n }))\n\n React.useEffect(() => {\n alive.current = true\n const pending = timers.current\n return () => {\n alive.current = false\n pending.forEach(clearTimeout)\n pending.clear()\n }\n }, [])\n\n // A new file at the head of the queue goes on the spot, keeper back in goal.\n const activeId = active?.id\n React.useEffect(() => {\n respot()\n setKeeperGone(false)\n setAttempts(0)\n }, [activeId])\n\n // The keeper shuffles along the line while waiting.\n const waiting = stage === 'ready' && activeId !== undefined && !keeperGone\n React.useEffect(() => {\n if (!waiting) return\n const id = setInterval(() => setSway((s) => -s), SWAY_MS)\n return () => clearInterval(id)\n }, [waiting])\n\n const toPitch = (event: { clientX: number; clientY: number }) => {\n const pitch = pitchRef.current\n if (!pitch) return { x: 50, y: 0 }\n const box = pitch.getBoundingClientRect()\n return {\n x: ((event.clientX - box.left) / box.width) * 100,\n y: ((event.clientY - box.top) / box.height) * pitch.offsetHeight,\n }\n }\n\n const browse = () => inputRef.current?.click()\n\n const canKick = Boolean(active) && stage === 'ready' && !disabled\n const name = active?.file.name ?? 'The file'\n let heading = title\n let text =\n description ??\n (active ? 'Click a spot in the goal to shoot.' : 'Drop a file or pick one.')\n if (mood === 'miss' || mood === 'error') {\n heading = notice.title\n text = notice.text\n } else if (mood === 'uploading') {\n heading = 'GOAL!'\n text = `Uploading ${name}`\n } else if (mood === 'done') {\n heading = 'Back of the net'\n text =\n attempts > 1\n ? `${name} went in on kick ${attempts}.`\n : `${name} went in with the first kick.`\n } else if (dropping) {\n text = 'Drop it, then beat the keeper.'\n } else if (keeperGone && active) {\n text = 'The keeper went home. Open goal.'\n }\n\n const tone: Tone =\n mood === 'uploading' || (mood === 'idle' && dropping) ? 'active' : mood\n const Chip = TONES[tone].icon\n const filled = mood === 'uploading' ? progress : mood === 'done' ? 1 : 0\n const made = results.filter(Boolean).length\n const lastFive = results.slice(-5)\n const keeperX = keeperGone ? 124 : waiting ? 50 + sway * 5 : keeper.x\n\n return (\n \n {\n if (disabled || !event.dataTransfer.types.includes('Files')) return\n event.preventDefault()\n setDropping(true)\n }}\n onDragLeave={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node | null))\n setDropping(false)\n }}\n onDrop={(event) => {\n if (disabled) return\n event.preventDefault()\n setDropping(false)\n add(Array.from(event.dataTransfer.files))\n }}\n >\n
\n \n \n \n
\n
\n
\n \n {heading}\n
\n \n {Array.from({ length: 5 }, (_, i) => (\n \n ))}\n
\n \n \n {text}\n {mood === 'uploading' ? (\n \n {` · ${Math.round(progress * 100)}%`}\n \n ) : null}\n \n \n \n \n\n {/* Goal: net, progress fill, then posts and bar on top. */}\n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* Goal line, six-yard box and penalty area. */}\n \n \n \n {active ? (\n \n ) : null}\n\n \n \n \n\n {/* Where the pointer can aim: the goal plus room to miss. */}\n {\n const aim = aimRef.current\n if (!aim || event.pointerType === 'touch') return\n const point = toPitch(event)\n aim.style.left = `${point.x}%`\n aim.style.top = `${point.y}px`\n aim.style.opacity = '1'\n }}\n onPointerLeave={() => {\n if (aimRef.current) aimRef.current.style.opacity = '0'\n }}\n onClick={(event) => {\n const point = toPitch(event)\n if (aimRef.current) aimRef.current.style.opacity = '0'\n kick(\n (point.x - GOAL.left) / GOAL.width,\n (point.y - GOAL.top) / GOAL.height,\n )\n }}\n />\n \n \n \n\n {active ? (\n <>\n \n \n kick(\n Math.random() < 0.5 ? 0.14 : 0.86,\n 0.3 + Math.random() * 0.5,\n )\n }\n className=\"absolute z-30 rounded-md outline-offset-4 outline-blue-600 ease-out focus-visible:outline-2 motion-reduce:transition-none\"\n style={{\n width: FILE_W,\n height: FILE_H,\n left: `${ball.x}%`,\n top: ball.y,\n transform: `translate(-50%, -50%) scale(${ball.scale}) rotate(${ball.turn}deg)`,\n transitionProperty: 'left, top, transform',\n transitionDuration: `${ball.ms}ms`,\n }}\n >\n \n \n \n
\n {active.file.name}\n
\n
\n {formatBytes(active.file.size)}\n {queue.length > 1 ? ` · ${queue.length - 1} more waiting` : ''}\n
\n \n \n ) : (\n <>\n {/* The picker is the penalty spot itself, with the + on its centre. */}\n \n \n \n \n \n \n Pick a file\n \n \n )}\n \n\n \n \n {results.length > 0\n ? `${made}/${results.length} scored`\n : 'No kicks yet'}\n \n \n {attempts >= 3 && canKick && !keeperGone ? (\n setKeeperGone(true)}\n className=\"underline underline-offset-4 hover:text-foreground\"\n >\n Send the keeper home\n \n ) : null}\n {active ? (\n \n {multiple ? 'Add files' : 'Change file'}\n \n ) : null}\n \n \n\n {files.length > 0 ? (\n
    \n {files.map((file, index) => (\n \n \n {file.name}\n \n {formatBytes(file.size)}\n \n commit(files.filter((_, i) => i !== index))}\n className=\"flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground\"\n >\n \n \n \n ))}\n
\n ) : null}\n\n {\n add(Array.from(event.target.files ?? []))\n event.target.value = ''\n }}\n />\n \n )\n})\n", "type": "registry:ui" } ], "categories": [ "funny", "upload" ], "type": "registry:ui" }