diff --git a/app/public/app.js b/app/public/app.js
index 8021c0b..5c09472 100644
--- a/app/public/app.js
+++ b/app/public/app.js
@@ -1407,7 +1407,7 @@ async function viewReader(mangaId, chapterId, startPage) {
- ${next ? `Cap. sig. ${icon('next')}` : ''}
+ ${next ? `Cap. sig. ${icon('next')}` : ''}
`
const reader = $('.reader', app)
@@ -1542,6 +1542,7 @@ async function viewReader(mangaId, chapterId, startPage) {
// al terminar solo queda la nueva. Si se pasa otra página antes de acabar, la animación se completa ya.
let turning = null // { anims, cleanup } (y move/release si sigue al dedo)
let wantDrag = false
+ let grabY = null // altura de la pantalla por la que el dedo agarró la página
// Lado por el que se mueve la hoja: el de la página que pasa (más marcado en doble página).
const turnPan = dir => (settings.dir === 'rtl' ? -1 : 1) * dir * (shown.length === 2 ? 0.3 : 0.12)
function finishTurn() {
@@ -1609,13 +1610,17 @@ async function viewReader(mangaId, chapterId, startPage) {
})
}
// Devuelve cuánto está levantada la hoja (0 a 1), para la sombra de debajo.
- function set(g, reverse) {
+ // tiltZ/tiltX: curvatura total de la hoja agarrada por arriba o por abajo. Se reparte entre las tiras, de modo
+ // que junto al lomo apenas se nota y el borde libre se lleva todo: la hoja sigue pegada al libro. Cambia de
+ // signo con la cara visible para que la parte agarrada vaya siempre por delante.
+ function set(g, reverse, tiltZ = 0, tiltX = 0) {
let prev = 0, lift = 0
angles(g, reverse).forEach((a, i) => {
const t = strips[i]
- t.s.style.transform = `${i ? `translateX(${step}px) ` : ''}rotateY(${(sgn * (a - prev)).toFixed(2)}deg)`
- prev = a
const c = Math.cos((a * Math.PI) / 180)
+ const bend = tiltZ || tiltX ? ` rotateZ(${((tiltZ * c) / N).toFixed(3)}deg) rotateX(${((tiltX * c) / N).toFixed(3)}deg)` : ''
+ t.s.style.transform = `${i ? `translateX(${step}px) ` : ''}rotateY(${(sgn * (a - prev)).toFixed(2)}deg)${bend}`
+ prev = a
// Se oscurece al inclinarse. Con un filtro en la propia cara y no con una capa negra encima: en Safari
// cada capa se compone aparte y en las uniones entre tiras asomaban líneas.
t.f.style.filter = `brightness(${(1 - (1 - c) * 0.3).toFixed(3)})`
@@ -1645,8 +1650,11 @@ async function viewReader(mangaId, chapterId, startPage) {
}
return (lo + hi) / 2
}
- return { el, set, span, solve }
+ // Punto fijo de la curvatura: el borde opuesto al agarrado (no afecta al giro sobre el eje vertical).
+ const pivot = y => strips.forEach(t => { t.s.style.transformOrigin = `${spineLeft ? 'left' : 'right'} ${y}` })
+ return { el, set, span, solve, pivot }
}
+ const GRAB_TILT_Z = 8, GRAB_TILT_X = 6 // curvatura total, en grados, de la hoja agarrada por arriba o por abajo
// drag: la página sigue al dedo; devuelve el control (move/release) en vez de animarse sola.
function turnPage(old, stage, dir, drag = false) {
// "Delante" es hacia la izquierda en izq→der (la hoja derecha pasa a la izquierda) y al revés en der→izq.
@@ -1728,7 +1736,17 @@ async function viewReader(mangaId, chapterId, startPage) {
box.append(drop, curl.el)
extra.push(drop, curl.el)
;[g0, g1] = double ? [0, 1] : curl.span(reverse)
- step = g => { drop.style.opacity = (curl.set(g, reverse) * 0.8).toFixed(3) }
+ // Agarrada por arriba o por abajo (tercio superior o inferior), esa parte va por delante: la hoja se curva
+ // sin separarse del lomo. Sin capas nuevas; es 0 al principio y al final del giro, así que cae exacta.
+ // Por el centro, como siempre.
+ const grabAt = drag && grabY != null ? (grabY - B.top - rect.t) / rect.h : 0.5
+ const grab = grabAt < 1 / 3 ? -1 : grabAt > 2 / 3 ? 1 : 0
+ if (grab) curl.pivot(grab < 0 ? 'bottom' : 'top')
+ step = g => {
+ const k = grab ? grab * Math.sin(Math.PI * Math.min(1, Math.max(0, (g - g0) / (g1 - g0 || 1)))) : 0
+ const lift = curl.set(g, reverse, (spineLeft ? 1 : -1) * (reverse ? -1 : 1) * GRAB_TILT_Z * k, GRAB_TILT_X * k)
+ drop.style.opacity = (lift * 0.8).toFixed(3)
+ }
dur = double ? 700 : 560
auto = t => g0 + (g1 - g0) * t
// El borde libre va donde lo lleva el dedo: de su sitio al lomo (una página) o al otro lado (doble);
@@ -1803,6 +1821,13 @@ async function viewReader(mangaId, chapterId, startPage) {
if (page > 0) goTo(groupOf(page - 1)[0], false, false, -1)
}
+ // En der → izq, la barra de abajo va como la lectura: el capítulo siguiente a la izquierda.
+ function syncDirUi() {
+ const rtl = isPaged() && settings.dir === 'rtl'
+ slider.dir = rtl ? 'rtl' : 'ltr'
+ $('.rbar.bottom').classList.toggle('rtl', rtl)
+ }
+
function render() {
observer?.disconnect()
const keep = lastShown()
@@ -1811,7 +1836,7 @@ async function viewReader(mangaId, chapterId, startPage) {
renderModeQuick()
box.dataset.dir = settings.dir
// En der → izq la barra de progreso también avanza de derecha a izquierda (en vertical no aplica).
- slider.dir = isPaged() && settings.dir === 'rtl' ? 'rtl' : 'ltr'
+ syncDirUi()
$('#dir').hidden = !isPaged()
if (isPaged()) {
box.innerHTML = ''
@@ -1933,7 +1958,8 @@ async function viewReader(mangaId, chapterId, startPage) {
const prev = [...shown]
finishTurn()
wantDrag = true
- try { fwd ? forward() : backward() } finally { wantDrag = false }
+ grabY = tap.y
+ try { fwd ? forward() : backward() } finally { wantDrag = false; grabY = null }
if (turning?.move) {
gesture = { type: 'turn', ctl: turning, prev, dir: fwd ? 1 : -1, x0: tap.x, k: dx < 0 ? -1 : 1, d: Math.abs(dx), v: 0, t: e.timeStamp }
turning.move(gesture.d / turning.range)
@@ -2020,7 +2046,7 @@ async function viewReader(mangaId, chapterId, startPage) {
render()
})
$('#fit').addEventListener('change', e => { settings.fit = e.target.value; savePrefs(); render() })
- $('#dir').addEventListener('change', e => { settings.dir = e.target.value; box.dataset.dir = settings.dir; slider.dir = settings.dir; savePrefs() })
+ $('#dir').addEventListener('change', e => { settings.dir = e.target.value; box.dataset.dir = settings.dir; syncDirUi(); savePrefs() })
$('#filter').addEventListener('change', e => { settings.filter = e.target.value; saveGlobal(); applyFilter() })
$('#anim').value = settings.anim
$('#anim').addEventListener('change', e => { settings.anim = e.target.value; saveGlobal() })
diff --git a/app/public/style.css b/app/public/style.css
index a9cbbe3..725155e 100644
--- a/app/public/style.css
+++ b/app/public/style.css
@@ -98,6 +98,16 @@ input:focus, select:focus { border-color: var(--accent); }
background: rgba(10, 9, 14, .9); backdrop-filter: blur(6px); transition: transform .2s; flex-wrap: wrap; }
.rbar.top { top: 0; padding-top: max(8px, env(safe-area-inset-top)); }
.rbar.bottom { bottom: 0; justify-content: center; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
+.rbar.bottom.rtl, .rbar.bottom.rtl a.btn { flex-direction: row-reverse; }
+/* Móvil: arriba la página y la barra de progreso; abajo cada botón en su extremo. */
+@media (max-width: 640px) {
+ .rbar.bottom { justify-content: space-between; }
+ .rbar.bottom #pnum { order: -2; }
+ .rbar.bottom input[type=range] { order: -1; flex: 1 1 calc(100% - 80px); max-width: none; }
+ .rbar.bottom .chnext { margin-left: auto; }
+ .rbar.bottom.rtl .chnext { margin-left: 0; margin-right: auto; }
+}
+.rbar.bottom.rtl a.btn .ic, .paged[data-dir="rtl"] .chapter-end a.primary .ic { transform: scaleX(-1); }
.reader.hide-ui .rbar.top { transform: translateY(-110%); }
.reader.hide-ui .rbar.bottom { transform: translateY(110%); }
.rbar .ttl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }