{lang === 'es' ? 'Historial de Versiones' : 'Version History'}
{versions.map((v, i) => (
{v.v}
{v.date && {v.date}}
))}
);
}
function LegalModal({ onClose, lang }) {
const content = {
title: lang === 'es' ? 'Aviso Legal y Privacidad' : 'Legal Notice & Privacy',
sections: [
{
title: lang === 'es' ? '1. Privacidad de la Información' : '1. Information Privacy',
body: lang === 'es'
? 'El juego no utiliza, almacena ni recopila datos sensibles, confidenciales o privados de clínicas, pacientes, colaboradores ni de ninguna entidad relacionada con Healthatom o sus filiales. Toda la interacción del usuario se procesa sin vincularse a expedientes médicos o administrativos reales.'
: 'The game does not use, store, or collect sensitive, confidential, or private data of clinics, patients, collaborators, or any entity related to Healthatom or its affiliates. All user interaction is processed without linking to real medical or administrative records.'
},
{
title: lang === 'es' ? '2. Naturaleza del Contenido' : '2. Nature of the Content',
body: lang === 'es'
? 'Toda la información, mecánicas y elementos educativos presentes en el juego tienen un propósito estrictamente de aprendizaje y entretenimiento. Dicho contenido ha sido elaborado a partir de información de carácter general y extraída de fuentes y documentación públicas pertenecientes a Healthatom, Medlink, Dentalink y Gerty.'
: 'All information, mechanics, and educational elements present in the game have a strict learning and entertainment purpose. Such content has been developed from general information and extracted from public sources and documentation belonging to Healthatom, Medlink, Dentalink, and Gerty.'
},
{
title: lang === 'es' ? '3. Comunicaciones y Datos Personales' : '3. Communications & Personal Data',
body: lang === 'es'
? 'Garantizamos que el juego en ningún momento enviará ningún tipo de correo electrónico (email) ni solicitará información personal, de contacto, ubicación o financiera a ningún jugador. La experiencia está diseñada íntegramente para preservar el anonimato y la seguridad digital del usuario en todo momento.'
: 'We guarantee that the game will at no time send any kind of email or request personal, contact, location, or financial information from any player. The experience is entirely designed to preserve the anonymity and digital security of the user at all times.'
},
{
title: lang === 'es' ? '4. Gratuidad del Servicio' : '4. Free Service',
body: lang === 'es'
? '"ToothClicker" ha sido concebido, diseñado y publicado para ser disfrutado de forma cien por ciento (100%) gratuita. No existen compras ocultas, suscripciones, microtransacciones ni requerimientos de pago bajo ninguna circunstancia, garantizando un acceso equitativo para todos.'
: '"ToothClicker" has been conceived, designed, and published to be enjoyed one hundred percent (100%) for free. There are no hidden purchases, subscriptions, microtransactions, or payment requirements under any circumstances, ensuring equitable access for all.'
}
]
};
return (
{content.title}
{content.sections.map((sec, i) => (
{sec.title}
{sec.body}
))}
{lang === 'es'
? 'Al utilizar esta aplicación, reconoces haber leído y comprendido este aviso legal, aceptando que el propósito de esta plataforma es puramente lúdico y educativo.'
: 'By using this application, you acknowledge having read and understood this legal notice, accepting that the purpose of this platform is purely playful and educational.'}
);
}
function GameTour({ step, lang, onNext, onPrev, onClose, dontShowAgain, onToggleShowAgain }) {
const t = window.STRINGS[lang];
const [closing, setClosing] = React.useState(false);
React.useEffect(() => {
setClosing(false);
}, [step]);
const steps = [
{
targetId: null,
title: { es: '¡Bienvenido a Tooth Clicker!', en: 'Welcome to Tooth Clicker!' },
desc: { es: 'Prepárate para convertirte en el magnate dental definitivo. 🦷✨', en: 'Get ready to become the ultimate dental tycoon. 🦷✨' }
},
{
targetId: 'main-tooth-target',
title: { es: '¡Dale caña!', en: 'Go for it!' },
desc: { es: 'Haz click en este diente para empezar a recolectar piezas. ¡Cada click cuenta!', en: 'Click on this tooth to start collecting pieces. Every click counts!' }
},
{
targetId: 'game-tabs-tour',
title: { es: 'Progreso constante', en: 'Constant progress' },
desc: { es: 'Aquí es donde ocurre la magia. Compra clínicas, desbloquea mejoras locas y presume de tus logros dentales.', en: 'This is where the magic happens. Buy clinics, unlock crazy upgrades, and show off your dental achievements.' }
},
{
targetId: 'tab-prestige',
title: { es: 'Poder ancestral', en: 'Ancient power' },
desc: { es: '¿Listo para el siguiente nivel? El prestigio te da bonus permanentes que te harán imparable.', en: 'Ready for the next level? Prestige gives you permanent bonuses that will make you unstoppable.' }
},
{
targetId: 'tab-leaderboard',
title: { es: 'La cima te espera', en: 'The top awaits' },
desc: { es: 'Mira cómo te comparas con otros dentistas de todo el mundo en tiempo real.', en: 'See how you compare with other dentists around the world in real time.' }
},
{
targetId: 'manual-tour-trigger',
title: { es: 'Siempre aquí para ayudarte', en: 'Always here to help' },
desc: { es: 'Si alguna vez necesitas repasar algo, puedes volver a iniciar este tour haciendo click en este icono de ayuda. ¡A cepillar!', en: 'If you ever need to review anything, you can restart this tour by clicking this help icon. Happy brushing!' }
}
];
const current = steps[step];
if (!current) return null;
const [rect, setRect] = React.useState(null);
React.useLayoutEffect(() => {
if (current.targetId) {
const el = document.getElementById(current.targetId);
if (el) {
setRect(el.getBoundingClientRect());
} else {
setRect(null);
}
} else {
setRect(null);
}
}, [step, current.targetId]);
const handleClose = () => {
setClosing(true);
setTimeout(onClose, 250);
};
const modalStyle = rect ? {
position: 'fixed',
left: rect.left + rect.width / 2,
top: rect.bottom + 20,
transform: 'translateX(-50%)',
zIndex: 10000,
width: 320
} : {
position: 'fixed',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
zIndex: 10000,
width: 380
};
// Adjust for edges
if (rect) {
if (modalStyle.left - 160 < 20) modalStyle.left = 180;
if (modalStyle.left + 160 > window.innerWidth - 20) modalStyle.left = window.innerWidth - 180;
if (modalStyle.top + 200 > window.innerHeight - 20) modalStyle.top = rect.top - 220;
}
return (
{/* Blurred and dimmed overlay with a hole cut out */}
{/* Highlight border and glow */}
{rect && (
)}
{/* Modal Container: Handles fixed positioning if rect exists, else flex centering handles it */}
{lang === 'es' ? `Paso ${step + 1} de ${steps.length}` : `Step ${step + 1} of ${steps.length}`}
