);
}
function CountUp({ value = 0, format, className = "" }) {
const nodeRef = useRef(null);
const currentRef = useRef(0);
const targetRef = useRef(Number(value) || 0);
const frameRef = useRef(null);
const inViewRef = useRef(false);
const [shown, setShown] = useState(0);
const [counting, setCounting] = useState(false);
targetRef.current = Number(value) || 0;
const animateTo = (target, duration, from = currentRef.current) => {
if (frameRef.current) cancelAnimationFrame(frameRef.current);
setCounting(true);
const startedAt = performance.now();
const step = (now) => {
const progress = Math.min(1, (now - startedAt) / duration);
const eased = 1 - Math.pow(1 - progress, 3);
const next = from + (target - from) * eased;
currentRef.current = next;
setShown(next);
if (progress < 1) frameRef.current = requestAnimationFrame(step);
else { currentRef.current = target; setShown(target); frameRef.current = null; setCounting(false); }
};
frameRef.current = requestAnimationFrame(step);
};
useEffect(() => {
if (inViewRef.current) animateTo(targetRef.current, 320);
}, [value]);
useEffect(() => {
const node = nodeRef.current;
if (!node) return undefined;
if (!("IntersectionObserver" in window)) {
inViewRef.current = true;
animateTo(targetRef.current, 850, 0);
return () => { if (frameRef.current) cancelAnimationFrame(frameRef.current); };
}
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
inViewRef.current = true;
animateTo(targetRef.current, 850, 0);
} else {
inViewRef.current = false;
if (frameRef.current) cancelAnimationFrame(frameRef.current);
frameRef.current = null;
currentRef.current = 0;
setShown(0);
setCounting(false);
}
}, { threshold: 0.3 });
observer.observe(node);
return () => {
observer.disconnect();
if (frameRef.current) cancelAnimationFrame(frameRef.current);
};
}, []);
const text = format ? format(shown) : Math.round(shown).toLocaleString();
const accessibleValue = format ? format(Number(value) || 0) : Math.round(Number(value) || 0).toLocaleString();
return
{displayNum}
Account {displayNum}
{account.name}
onStartTimer(account.id)} />
onStartTimer(account.id)} />
{running && ⏱ {fmtClock(liveElapsed)}}
{queued && ⏳ starts in {queuedSecsLeft}s}
{done ? "Max level" : `${into.toLocaleString()} / ${need.toLocaleString()} AP`}
{done ? "Reached" : eta ? `ETA ${fmtDate(new Date(eta.date))} (${Math.max(0, Math.ceil((new Date(eta.date) - Date.now()) / 86400000))}d left)` : "–"}
{/* First Win of the Day — prominent row */}
First win of the day
{fwReady ? "READY" : `Ready at ${fmtPKTClock(data.lastFirstWin + FIRST_WIN_COOLDOWN_MS)} PKT`}
{!running && queued &&
Timer starting in {queuedSecsLeft}s…
}
{!running && !queued &&
Copy ID or PW above — timer starts {queueDelaySeconds}s later
}
Session win time: {fmtClock(data.sessionSeconds || 0)}
{lastMatch && Last match: {lastMatch.win ? "Win" : "Loss"} · +{lastMatch.ap.toLocaleString()} AP{lastMatch.usedFirstWin ? " · first win" : ""}}
{editing && (
{ onEditSave(account.id, newAP); setEditing(false); }}
onCancel={() => setEditing(false)}
/>
)}
);
}
function GroupManager({ mode, accounts, groupsMeta, onAddGroup, onRenameGroup, onRecolorGroup, onDeleteGroup, onAddAccount, onAddAccountsBatch, onUpdateAccount, onDeleteAccount }) {
const [newGroupLabel, setNewGroupLabel] = useState("");
const [newGroupColor, setNewGroupColor] = useState(PRESET_COLORS[0]);
const groupIds = Object.keys(groupsMeta);
const [newAcc, setNewAcc] = useState({ name: "", pass: "", group: groupIds[0] || "" });
const [editingId, setEditingId] = useState(null);
const [editDraft, setEditDraft] = useState({ name: "", pass: "", group: "" });
const [bulkText, setBulkText] = useState("");
const [bulkGroup, setBulkGroup] = useState(groupIds[0] || "");
const [bulkMessage, setBulkMessage] = useState("");
const countIn = (gid) => accounts.filter((a) => a.group === gid).length;
const startEdit = (a) => { setEditingId(a.id); setEditDraft({ name: a.name, pass: a.pass, group: a.group }); };
const saveEdit = () => { onUpdateAccount(editingId, editDraft); setEditingId(null); };
return (
{mode === "groups" ? "Manage groups" : "Manage accounts"}
{mode === "groups" && <>
{groupIds.map((gid) => (
onRenameGroup(gid, e.target.value)}
style={{ background: "transparent", border: "none", color: TEXT, fontSize: 11, fontWeight: 700, width: Math.max(56, groupsMeta[gid].label.length * 7), outline: "none" }} />
({countIn(gid)})
{PRESET_COLORS.map((c) => (
))}
setNewGroupLabel(e.target.value)} style={{ ...smallInput, width: 140, textAlign: "left" }} />
{PRESET_COLORS.map((c) => (
}
{mode === "accounts" && <>
Account roster · edit, move, or copy login details
{accounts.map((a, idx) => (
{editingId === a.id ? (
<>
setEditDraft({ ...editDraft, name: e.target.value })} style={{ ...smallInput, width: 120, textAlign: "left" }} />
setEditDraft({ ...editDraft, pass: e.target.value })} style={{ ...smallInput, width: 100, textAlign: "left" }} />
) : (
<>
Account {idx + 1}{a.name}
{(groupsMeta[a.group] && groupsMeta[a.group].label) || "—"}
)}
))}
setNewAcc({ ...newAcc, name: e.target.value })} style={{ ...smallInput, width: 130, textAlign: "left" }} />
setNewAcc({ ...newAcc, pass: e.target.value })} style={{ ...smallInput, width: 110, textAlign: "left" }} />
Add multiple accounts
One per line: ID | password. Duplicate IDs and incomplete lines are skipped.