{/* Sort Filters */}
{rows.map((r, i) => {
const isCurrent = currentUser && r.name === currentUser;
const medal = i === 0 ? '#FFC220' : i === 1 ? '#A6B5C5' : i === 2 ? '#E8A06E' : null;
return (
{window.ReactDOM ? window.ReactDOM.createPortal(
{t.lbRank}
{t.lbPlayer}
{t.lbPrestige}
Info
{extraColumns && }
{i + 1}
{window.TOOTH_STAGES && (() => {
const stage = window.getToothStage(r.prestigeCount || 0, r.level || 1, r.saveData);
return (i === 0 && stage.glbData) ? (
);
})()}
{(() => {
const timeSince = Date.now() - r.updatedAt;
const online = r.isOnline !== false && timeSince < 60000;
return (
);
})()}
{r.name}
{isCurrent && {t.lbYou}}
{r.clinicName ? r.clinicName : (lang === 'es' ? `Clínica de ${r.name}` : `${r.name}'s Clinic`)}
Niv. {r.level || 0}
{ window.playClickSound && window.playClickSound(); setSelectedPlayer(null); }}
/>
{selectedPlayer && (
)}
,
document.body
) : (
{ window.playClickSound && window.playClickSound(); setSelectedPlayer(null); }}
/>
);
}
function MiniStat({ label, value, icon, color }) {
return (
);
}
// ── User pill ───────────────────────────────────────────────────────────────
function UserPill({ name, onSelect, isOwn, onLogout, isOnline }) {
const [hov, setHov] = useStateG(false);
return (
);
}
// ── Admin password modal ────────────────────────────────────────────────────
function AdminPasswordModal({ lang, onSuccess, onClose }) {
const [pw, setPw] = useStateG('');
const [err, setErr] = useStateG(false);
const [show, setShow] = useStateG(false);
const handleSubmit = (e) => {
e && e.preventDefault();
if (pw === ADMIN_PASSWORD) { onSuccess(); }
else { setErr(true); setPw(''); setTimeout(() => setErr(false), 1800); }
};
return (
);
}
// ── Dental anti-bot questions ──────────────────────────────────────────────
const DENTAL_QUESTIONS = [
{
id: 1,
q_es: "¿Cuántos dientes tiene un adulto promedio sin muelas del juicio? (Ingresa número)",
q_en: "How many teeth does an average adult have without wisdom teeth? (Enter number)",
ans: ["28"]
},
{
id: 2,
q_es: "Si tienes 32 dientes y el dentista te extrae 2 molares, ¿cuántos te quedan? (Ingresa número)",
q_en: "If you have 32 teeth and the dentist extracts 2 molars, how many do you have left? (Enter number)",
ans: ["30"]
},
{
id: 3,
q_es: "Escribe la palabra 'DIENTE' en mayúsculas para continuar:",
q_en: "Type the word 'TOOTH' in capital letters to continue:",
ans: ["DIENTE", "TOOTH"]
},
{
id: 4,
q_es: "¿Cuál es el color ideal de un diente sano y limpio? (Ingresa una palabra)",
q_en: "What is the ideal color of a clean, healthy tooth? (Enter one word)",
ans: ["blanco", "white", "blancos"]
},
{
id: 5,
q_es: "¿Qué hadita te deja monedas bajo la almohada si dejas un diente de leche?",
q_en: "What fairy leaves you coins under your pillow if you leave a baby tooth?",
ans: ["hadita de los dientes", "tooth fairy", "hada", "hadita"]
}
];
// ── Gate ─────────────────────────────────────────────────────────────────────
function Gate({ lang, onLangChange, onSelectUser, onCreateUser, onAdminAccess, onLogoutDeviceUser, users, deviceUser }) {
const [name, setName] = useStateG('');
const [password, setPassword] = useStateG('');
const [showPassword, setShowPassword] = useStateG(false);
const [error, setError] = useStateG('');
const [loading, setLoading] = useStateG(false);
const [showLb, setShowLb] = useStateG(false);
const [showAdminPw, setShowAdminPw] = useStateG(false);
const lb = useCloudLeaderboard({ pollMs: 15000 });
// Anti-bot security states
const [websiteField, setWebsiteField] = useStateG('');
const [challengeQuestion, setChallengeQuestion] = useStateG(null);
const [challengeAnswer, setChallengeAnswer] = useStateG('');
const [googleSession, setGoogleSession] = useStateG(false);
const [showManualRegister, setShowManualRegister] = useStateG(false);
useEffectG(() => {
if (window.cloudFetchPlayerByAuth) {
window.cloudFetchPlayerByAuth().then(res => {
if (res.ok && res.found) {
const intentUser = localStorage.getItem('link_intent_user');
const intentPass = localStorage.getItem('link_intent_pass');
if (intentUser) {
window.cloudLinkGoogleAccount(intentUser, intentPass).then(linkRes => {
localStorage.removeItem('link_intent_user');
localStorage.removeItem('link_intent_pass');
if (linkRes.ok) {
window.cloudFetchPlayerByAuth().then(r => {
if (r.ok && r.found) onSelectUser(r.player.name, r.player, null);
});
} else {
alert(lang === 'es' ? 'Error al vincular cuenta: ' + linkRes.error : 'Error linking account: ' + linkRes.error);
onSelectUser(res.player.name, res.player, null);
}
});
} else {
onSelectUser(res.player.name, res.player, null);
}
} else if (res.ok && !res.found) {
setGoogleSession(true); // New Google User
} else if (res.error && res.error !== 'No estas autenticado con Google' && res.error !== 'Auth session missing!') {
console.log('Google Auth Error:', res.error);
}
});
}
}, [onSelectUser, lang]);
const RESERVED = (window.ADMIN_NAME || 'James').toLowerCase();
const cloudUser = useMemoG(() => {
const t = name.trim().toLowerCase();
if (!t) return null;
return (lb.scores || []).find(s => s.name.toLowerCase() === t);
}, [name, lb.scores]);
const nameReserved = useMemoG(() => name.trim().toLowerCase() === RESERVED, [name]);
// Pick a fresh question whenever registration mode is active and the name changes
useEffectG(() => {
if (name.trim() && !cloudUser) {
const q = DENTAL_QUESTIONS[Math.floor(Math.random() * DENTAL_QUESTIONS.length)];
setChallengeQuestion(q);
setChallengeAnswer('');
} else {
setChallengeQuestion(null);
setChallengeAnswer('');
}
}, [name, cloudUser]);
const handleSubmit = async (e) => {
e && e.preventDefault();
const cleanInput = name.trim();
if (!cleanInput || nameReserved || loading) return;
// Case-insensitive matching to use existing DB casing or capitalize the first letter for new users
const matchingScoreUser = (lb.scores || []).find(s => s.name.toLowerCase() === cleanInput.toLowerCase());
const cleanName = matchingScoreUser ? matchingScoreUser.name : (cleanInput.charAt(0).toUpperCase() + cleanInput.slice(1));
// 1. Honeypot check: Bots automatically fill all visible/hidden text fields
if (websiteField.trim() !== '') {
console.warn("Honeypot filled. Bot rejected.");
setError(lang === 'es' ? 'Error de red. Intenta de nuevo más tarde.' : 'Network error. Please try again later.');
return;
}
setLoading(true);
setError('');
if (cloudUser && !googleSession) {
// Intentar Logear/Continuar
if (!showPassword) {
setShowPassword(true);
setLoading(false);
return;
}
const res = await window.cloudAuthenticate(cleanName, password);
if (res.ok) {
onSelectUser(cleanName, res.player, password);
} else {
setError(lang === 'es' ? 'Contraseña incorrecta' : 'Invalid password');
}
} else {
// Intentar Registrar
if (!googleSession && !showPassword) {
setShowPassword(true);
setLoading(false);
return;
}
// 2. Dental Captcha check
if (!googleSession && challengeQuestion) {
const cleanAns = challengeAnswer.trim().toLowerCase();
const isCorrect = challengeQuestion.ans.some(a => {
const expected = a.toLowerCase().trim();
return cleanAns === expected || cleanAns.includes(expected) || expected.includes(cleanAns) && cleanAns.length >= 2;
});
if (!cleanAns || !isCorrect) {
setError(lang === 'es' ? '❌ Respuesta anti-bot incorrecta' : '❌ Incorrect anti-bot answer');
setLoading(false);
return;
}
}
onCreateUser(cleanName, googleSession ? 'oauth' : password);
}
setLoading(false);
};
// Lock icon click counter — 3 quick taps to open admin (subtle UX)
const lockTaps = React.useRef(0);
const lockTimer = React.useRef(null);
const handleLockTap = () => {
lockTaps.current += 1;
clearTimeout(lockTimer.current);
if (lockTaps.current >= 1) {
lockTaps.current = 0;
setShowAdminPw(true);
} else {
lockTimer.current = setTimeout(() => { lockTaps.current = 0; }, 1200);
}
};
return (
{/* Initial login buttons */}
{!deviceUser && !googleSession && !showManualRegister && (
)}
{/* Registration/Login Form — only if this device hasn't registered yet AND they chose a method */}
{!deviceUser && (showManualRegister || googleSession) && (
)}
{/* Public user pills */}
{deviceUser && (
{
const save = window.loadUserSave(name);
const pass = save ? save.password : null;
if (pass) {
const res = await window.cloudAuthenticate(name, pass);
if (res.ok) {
onSelectUser(name, res.player, pass);
} else {
onLogoutDeviceUser();
}
} else {
onLogoutDeviceUser();
}
}}
isOwn={true}
onLogout={onLogoutDeviceUser}
isOnline={(lb.scores || []).some(s => s.name === deviceUser && (Date.now() - s.updatedAt) < 120000)}
/>
)}
{/* Bottom row */}
{/* Discrete admin lock — tiny, subtle */}
{showLb && window.innerWidth > 768 && (
setShowLb(false)} maxWidth={640}>
)}
{ setShowAdminPw(false); onAdminAccess(); }}
onClose={() => setShowAdminPw(false)}
/>
)}
);
}
Object.assign(window, { Gate, LeaderboardPanel, LeaderboardHeader, LeaderboardBody, MiniStat, useCloudLeaderboard });
{selectedPlayer && (
)}
)}
);
}
function LeaderboardPanel({ username, lang }) {
const lb = useCloudLeaderboard({ pollMs: 15000 });
// Force sync when opening the panel
useEffectG(() => {
if (window.forcePushScore) {
window.forcePushScore();
// Wait a bit for the push to complete before refreshing
setTimeout(() => lb.refresh(), 1500);
}
}, []);
const handleRefresh = async () => {
if (window.forcePushScore) {
console.log("[Ranking] Forcing data push before refresh...");
window.forcePushScore();
// Wait a bit more to ensure Supabase has indexed the new row
await new Promise(r => setTimeout(r, 2000));
}
await lb.refresh();
};
return
{stage.glbData ? (
{name}
{displayClinic}
•
{t.prestigeTimes}
{/* Section 1: General Info */}
{/* Section 2: Click Statistics */}
{/* Section 3: Upgrades & Production */}
{!stats && (
{t.general}
{t.status}
{online ? t.online : t.offline}
{t.level}
Niv. {level || 0}
{t.teeth}
{t.totalTeeth}
{t.time}
{window.formatTime(timePlayed || 0)}
{t.started}
{stats?.startedAt || 'N/A'}
{t.clicks}
{t.totalClicks}
{stats ?
{t.clickPower}
{stats ?
{t.golden}
{stats ?
{t.diamond}
{stats ?
{t.crystal}
{stats ?
{t.upgrades}
{t.cps}
{stats ?
{t.generators}
{stats ?
{t.clickUps}
{stats ? stats.clickUpgradesCount : 'N/A'}
{t.achievements}
{stats ? stats.achievementsCount : 'N/A'}
{t.academy}
{stats ? stats.academyUpgradesCount : 'N/A'}
{lang === 'es'
? '* No hay datos de guardado sincronizados recientemente para mostrar más estadísticas.'
: '* No recently synchronized save data to show additional statistics.'}
)}
{label}
{value}
{lang === 'es' ? 'Acceso restringido' : 'Restricted access'}
{lang === 'es' ? 'Ingresa la contraseña para continuar' : 'Enter the password to continue'}
{lang === 'es' ? 'Tu perfil activo' : 'Your active profile'}
{window.APP_VERSION || 'v0.5.5-beta'}
setShowLb(false)}
>
{showAdminPw && (
e.stopPropagation()}>
{lang === 'es' ? 'Ranking Global' : 'Global Ranking'}
{showLb && window.innerWidth <= 768 && (