Sign In to Submit Picks

\n \n

\n );\n}\n\n// ---- Draft Locked Banner ----\n\nfunction DraftLockedBanner() {\n return (\n \n The draft has been executed — your picks are locked.{\" \"}\n \n View Results\n \n \n );\n}\n\n// ---- Pick Interface ----\n\nfunction PickInterface(\n { user, onLogout }: { user: UserInfo; onLogout: () => void },\n) {\n const [ranked, setRanked] = useState([]); // ADPs in ranked order\n const [saveStatus, setSaveStatus] = useState<\n \"idle\" | \"saving\" | \"saved\" | \"error\"\n >(\"idle\");\n const [saveMessage, setSaveMessage] = useState(\"\");\n const [loaded, setLoaded] = useState(false);\n const [loadError, setLoadError] = useState(\"\");\n\n // Drag state — supports both reorder within right column AND drag from left to right.\n // dragSource: \"left\" means dragging a new player from available list,\n // \"right\" means reordering within ranked list.\n const dragSource = useRef<\"left\" | \"right\" | null>(null);\n const dragAdp = useRef(null); // ADP of player being dragged (for left→right)\n const dragFromIndex = useRef(null); // index in ranked list (for reorder)\n const dragOverIndex = useRef(null);\n const [draggingIdx, setDraggingIdx] = useState(null);\n const [dragOverIdx, setDragOverIdx] = useState(null);\n const [draggingFromLeft, setDraggingFromLeft] = useState(null); // ADP being dragged from left\n\n const isLocked = user.draftExecuted || window.__DRAFT_EXECUTED__;\n\n // Load existing picks on mount\n useEffect(() => {\n apiGet(\"/api/picks\")\n .then((data) => {\n if (data?.picks) setRanked(data.picks);\n setLoaded(true);\n })\n .catch((err) => {\n setLoadError(err.message || \"Failed to load picks\");\n setLoaded(true);\n });\n }, []);\n\n const rankedSet = new Set(ranked);\n const available = PLAYERS.filter((p) => !rankedSet.has(p.adp));\n\n const addPlayer = (adp: number, atIndex?: number) => {\n if (isLocked) return;\n setRanked((prev) => {\n if (prev.includes(adp)) return prev;\n if (atIndex !== undefined && atIndex >= 0) {\n const next = [...prev];\n next.splice(atIndex, 0, adp);\n return next;\n }\n return [...prev, adp];\n });\n setSaveStatus(\"idle\");\n };\n\n const removePlayer = (adp: number) => {\n if (isLocked) return;\n setRanked((prev) => prev.filter((a) => a !== adp));\n setSaveStatus(\"idle\");\n };\n\n const moveUp = (index: number) => {\n if (isLocked || index === 0) return;\n setRanked((prev) => {\n const next = [...prev];\n [next[index - 1], next[index]] = [next[index], next[index - 1]];\n return next;\n });\n setSaveStatus(\"idle\");\n };\n\n const moveDown = (index: number) => {\n if (isLocked) return;\n setRanked((prev) => {\n if (index >= prev.length - 1) return prev;\n const next = [...prev];\n [next[index], next[index + 1]] = [next[index + 1], next[index]];\n return next;\n });\n setSaveStatus(\"idle\");\n };\n\n // --- Drag from LEFT column (add to right at drop position) ---\n const handleLeftDragStart = (adp: number) => {\n if (isLocked) return;\n dragSource.current = \"left\";\n dragAdp.current = adp;\n setDraggingFromLeft(adp);\n };\n\n // --- Drag within RIGHT column (reorder) ---\n const handleRightDragStart = (index: number) => {\n if (isLocked) return;\n dragSource.current = \"right\";\n dragFromIndex.current = index;\n setDraggingIdx(index);\n };\n\n // --- Shared: drag over a ranked item ---\n const handleRankedDragEnter = (index: number) => {\n dragOverIndex.current = index;\n setDragOverIdx(index);\n };\n\n // --- Shared: drop on the right column body (for appending when dropping on empty space) ---\n const handleRightColumnDrop = (e: React.DragEvent) => {\n e.preventDefault();\n if (dragSource.current === \"left\" && dragAdp.current !== null) {\n // Dropped on the column but not on a specific item — append to end\n if (dragOverIndex.current === null) {\n addPlayer(dragAdp.current);\n }\n }\n resetDragState();\n };\n\n // --- Shared: drag end ---\n const handleDragEnd = () => {\n if (isLocked) {\n resetDragState();\n return;\n }\n\n const source = dragSource.current;\n const overIdx = dragOverIndex.current;\n\n if (source === \"left\") {\n // Dragging from available list into ranked list\n const adp = dragAdp.current;\n if (adp !== null && overIdx !== null) {\n addPlayer(adp, overIdx);\n } else if (adp !== null) {\n // Dropped on the column area but not a specific item — append\n addPlayer(adp);\n }\n } else if (source === \"right\") {\n // Reorder within ranked list\n const from = dragFromIndex.current;\n if (from !== null && overIdx !== null && from !== overIdx) {\n setRanked((prev) => {\n const next = [...prev];\n const [removed] = next.splice(from, 1);\n const adjustedTo = overIdx > from ? overIdx - 1 : overIdx;\n next.splice(adjustedTo, 0, removed);\n return next;\n });\n setSaveStatus(\"idle\");\n }\n }\n\n resetDragState();\n };\n\n const resetDragState = () => {\n dragSource.current = null;\n dragAdp.current = null;\n dragFromIndex.current = null;\n dragOverIndex.current = null;\n setDraggingIdx(null);\n setDragOverIdx(null);\n setDraggingFromLeft(null);\n };\n\n const savePicks = async () => {\n setSaveStatus(\"saving\");\n try {\n await apiPost(\"/api/picks\", { picks: ranked });\n setSaveStatus(\"saved\");\n setSaveMessage(\n `Saved ${ranked.length} pick${ranked.length !== 1 ? \"s\" : \"\"}`,\n );\n } catch (err: any) {\n setSaveStatus(\"error\");\n setSaveMessage(err.message || \"Save failed\");\n }\n };\n\n if (!loaded) return

Loading your picks...

;\n\n if (loadError) {\n return (\n

Failed to load picks: {loadError}

\n );\n }\n\n return (\n

\n {/* User bar */}\n

\n {user.teamName}\n {user.email}\n

\n \n

\n\n {/* Draft locked banner */}\n {isLocked && }\n\n {/* Instructions */}\n {!isLocked && (\n

\n How it works:{\" \"}\n Drag players from the left into your rankings on the right, or click\n to add. Reorder with arrow buttons or drag within the list. Your{\" \"}\n #1 ranked player{\" \"}\n is your first-round nomination. If you don't get them (conflict with\n another manager), your #2 becomes your next nomination, and so on.\n
\n
\n Tip:{\" \"}\n You don't have to rank all 30. Unranked players default to ADP order\n as a fallback. But the more you rank, the more control you have — if\n your top picks are all contested, your next nomination will be the\n highest-ADP player you didn't explicitly rank.\n

\n )}\n\n {/* Two-column layout */}\n

\n {/* Left: available players */}\n

\n Available Players\n {available.length} remaining\n

\n {available.length === 0\n ? (\n

All players ranked!

\n )\n : (\n available.map((p) => (\n addPlayer(p.adp)}\n draggable={!isLocked}\n onDragStart={() => handleLeftDragStart(p.adp)}\n onDragEnd={handleDragEnd}\n style={isLocked\n ? { opacity: 0.5, cursor: \"not-allowed\" }\n : {}}\n >\n

ADP {p.adp}

{p.name}

\n {p.team} · {p.position}\n

\n {!isLocked &&

›

}\n

\n ))\n )}\n

\n\n {/* Right: ranked picks */}\n e.preventDefault()}\n onDrop={handleRightColumnDrop}\n >\n

\n My Rankings\n {ranked.length} selected\n

\n {ranked.length === 0\n ? (\n e.preventDefault()}\n onDrop={(e) => {\n e.preventDefault();\n if (\n dragSource.current === \"left\" && dragAdp.current !== null\n ) {\n addPlayer(dragAdp.current);\n }\n resetDragState();\n }}\n >\n

\n {isLocked\n ? \"No players were ranked\"\n : \"Drag players here or click them on the left\"}\n

\n )\n : (\n ranked.map((adp, index) => {\n const p = playerMap.get(adp)!;\n const isDragging = draggingIdx === index;\n const isDragOver = dragOverIdx === index &&\n ((dragSource.current === \"right\" && draggingIdx !== null &&\n draggingIdx !== index) ||\n dragSource.current === \"left\");\n return (\n handleRightDragStart(index)}\n onDragEnter={() => handleRankedDragEnter(index)}\n onDragEnd={handleDragEnd}\n onDragOver={(e) => e.preventDefault()}\n >\n {!isLocked && (\n

\n ⋮⋮\n

\n )}\n

{index + 1}

ADP {p.adp}

{p.name}

\n {p.team} · {p.position}\n

\n {!isLocked && (\n <>\n

\n {\n e.stopPropagation();\n moveUp(index);\n }}\n disabled={index === 0}\n title=\"Move up\"\n >\n ▲\n \n {\n e.stopPropagation();\n moveDown(index);\n }}\n disabled={index === ranked.length - 1}\n title=\"Move down\"\n >\n ▼\n \n

\n {\n e.stopPropagation();\n removePlayer(adp);\n }}\n title=\"Remove\"\n >\n ×\n \n \n )}\n

\n );\n })\n )}\n \n \n \n\n {/* Save bar */}\n {!isLocked && (\n

\n \n {saveStatus === \"idle\" && ranked.length > 0 && \"Unsaved changes\"}\n {saveStatus === \"idle\" && ranked.length === 0 &&\n \"Add players to your rankings\"}\n {saveStatus === \"saving\" && \"Saving...\"}\n {saveStatus === \"saved\" && saveMessage}\n {saveStatus === \"error\" && saveMessage}\n

\n \n Save Rankings\n \n \n )}\n \n );\n}\n\n// ---- App Root ----\n\nfunction App() {\n const [user, setUser] = useState(null);\n const [checking, setChecking] = useState(true);\n\n useEffect(() => {\n apiGet(\"/api/me\")\n .then((data) => {\n if (data) setUser(data);\n })\n .catch(() => {})\n .finally(() => setChecking(false));\n }, []);\n\n const handleLogout = async () => {\n await fetch(\"/api/logout\", { method: \"POST\" });\n setUser(null);\n };\n\n if (checking) return

;\n\n return (\n

\n NPB Draft 2026\n

Rank your player nominations for the first-round lottery

\n {user\n ? \n : }\n

\n );\n}\n\n// ---- Mount ----\n\ncreateRoot(document.getElementById(\"root\")!).render();","deleted","label",[178,159],"frontend","permalink","https://www.val.town/x/clintr/npb-draft/code/frontend/app.tsx","extension","actionData","errors"]