// La descarga del móvil, con sección propia y justo debajo de la portada. // // El .apk es lo más pedido desde que el juego llegó a Android, y hasta ahora // estaba escondido dentro de un popup, detrás de un botón que hablaba del // launcher. Aquí tiene su sitio: un botón grande, el peso por delante y los // tres pasos que de verdad frenan a la gente —el aviso de Android por instalar // algo que no viene de Play es donde se abandona la instalación—. // // El peso, la fecha y la versión NO van escritos a mano: salen de // /download/meta.json (que se los pregunta a R2) y del manifiesto del canal. Si // alguna de las dos peticiones falla, la sección sigue entera y solo se queda // sin la ficha: lo único que no puede faltar nunca es el botón. function AndroidSection() { const { t, tl, lang } = useI18n(); const [meta, setMeta] = React.useState(null); const [manifiesto, setManifiesto] = React.useState(null); React.useEffect(() => { let vivo = true; const pedir = (url, poner) => fetch(url) .then((r) => (r.ok ? r.json() : null)) .then((d) => { if (vivo && d) poner(d); }) .catch(() => {}); pedir('/download/meta.json', (d) => d.android && setMeta(d.android)); pedir('/updates/android/manifest.json', setManifiesto); return () => { vivo = false; }; }, []); // La versión solo se enseña si el manifiesto habla DEL FICHERO QUE HAY. // El manifiesto describe la versión que toca anunciar; el .apk de la raíz es // el último que se subió. Normalmente son la misma build, pero si alguna vez // no lo fueran, poner un número de versión al lado de un fichero que no le // corresponde es peor que no poner ninguno. El tamaño los ata: si cuadra, es // el mismo binario. const binario = (manifiesto?.binary ?? []).find((b) => String(b?.name || '').endsWith('.apk')); const version = meta && binario && binario.size === meta.size ? manifiesto.version : null; const cuando = meta?.updated ? formatearFecha(meta.updated, lang) : null; return (

{/* La descarga */}

{t('android.cardTitle')}

{t('android.req')}

{/* El botón se pinta siempre, con datos o sin ellos. */} {t('android.cta')} {meta && · {formatearPeso(meta.size, lang)}}

{meta?.file ?? 'PiratePrivateLoot.apk'}

{version && {t('android.version', { version })}} {cuando && {t('android.updated', { date: cuando })}}

{t('android.warn')}

{t('android.desktop')} {t('android.desktopCta')}

{/* Cómo se instala */}

{t('android.stepsTitle')}

{tl('android.steps').map((s, i) => (

{i + 1}

{s.title}

{s.body}

))}

{tl('android.notes').map((n, i) => (

))}

); } const andS = { // Va pegada a la portada, así que se separa con luz propia en vez de con aire: // el mismo recurso que usan Loguetown y la galería. section: { background: 'linear-gradient(180deg, rgba(192,138,43,.09), transparent 62%)', borderTop: '1px solid var(--line-soft)', }, panel: { display: 'flex', flexDirection: 'column', gap: 14, padding: 28, background: 'linear-gradient(180deg, var(--bg2), var(--bg1))', borderColor: 'var(--gold)', }, req: { fontSize: 11.5, color: 'var(--tx-lo)', letterSpacing: '.06em', marginTop: 4 }, // El botón principal de la página: más alto y más ancho que el resto. cta: { padding: '18px 26px', fontSize: 14.5, gap: 11, marginTop: 4 }, peso: { fontFamily: 'var(--f-mono)', fontSize: 12.5, opacity: .82, letterSpacing: 0 }, ficha: { fontSize: 11.5, color: 'var(--gold-hi)', wordBreak: 'break-all', marginTop: -4 }, sub: { display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' }, aviso: { fontSize: 13, color: 'var(--tx-lo)', lineHeight: 1.55 }, pie: { display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', justifyContent: 'space-between', marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--line-soft)', }, paso: { display: 'grid', gridTemplateColumns: '46px 1fr', gap: 16, alignItems: 'start', background: 'var(--bg1)', border: '1px solid var(--line-soft)', borderRadius: 'var(--r)', padding: '18px 20px', }, pasoN: { fontSize: 30, color: 'var(--gold)', lineHeight: 1, textAlign: 'center' }, pasoBody: { color: 'var(--tx-md)', fontSize: 14, lineHeight: 1.6, margin: 0 }, notas: { display: 'flex', flexDirection: 'column', gap: 9, paddingTop: 16, marginTop: 3, borderTop: '1px solid var(--line-soft)', }, nota: { display: 'flex', gap: 9, alignItems: 'flex-start', color: 'var(--tx-md)', fontSize: 13.5, lineHeight: 1.55 }, }; // AndroidSection y no Android: los WebView de Android inyectan un `window.Android` // por convención (addJavascriptInterface), y pisarlo sería un fallo silencioso y // muy raro de diagnosticar. window.AndroidSection = AndroidSection;