admin/DoC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: rediseñar tablero de cartas en sentido horizontal, añadiendo zoom y lupa cuando hay muchas cartas para poder ver toda la escala y tener control al mismo tiempo.

Browse Source
This commit is contained in:
Alexis
2026-03-26 09:43:45 +01:00
parent cf838837a0
commit 11f3fb1415
4 changed files with 82 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/BlankCardsCounter.jsx
+16 -12
View File
@@ -1,36 +1,40 @@
export default function BlankCardsCounter({ index, blankCardsCount, handleBlankCardChange }) {
return (
<div className="flex flex-col items-center my-2 w-full">
<div className="w-0.5 h-6 bg-slate-300"></div>
<div className="flex flex-col items-center relative mx-1 mb-10">
<div className="flex items-center gap-3 bg-white px-4 py-2 rounded-full shadow-sm border border-slate-200 z-10">
<span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Blancas:</span>
<div className="absolute w-full h-1 bg-slate-200 top-[40%] -translate-y-1/2 -z-10 rounded"></div>
{/* Botones de - y + */}
<div className="flex items-center gap-1 bg-white px-2 py-1.5 rounded-full shadow-sm border border-slate-200 z-10">
<button
onClick={() => handleBlankCardChange(index, -1)}
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-50 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
>-</button>
<span className="text-base font-bold w-6 text-center text-blue-600">
{blankCardsCount}
</span>
<div className="flex flex-col items-center leading-none min-w-[3rem]">
<span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1">Blancas</span>
<span className="text-base font-black text-blue-600">{blankCardsCount}</span>
</div>
<button
onClick={() => handleBlankCardChange(index, 1)}
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-50 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
>+</button>
</div>
{/* Cartas blancas */}
{blankCardsCount > 0 && (
<div className="flex flex-col items-center -space-y-4 mt-3 mb-1">
<div className="absolute top-[75px] flex flex-row items-center -space-x-4">
{Array.from({ length: blankCardsCount }).map((_, i) => (
<div
key={i}
className="w-16 h-8 bg-blue-50 border-2 border-blue-200 rounded shadow-sm opacity-80"
className="w-8 h-12 bg-white border-2 border-dashed border-slate-300 rounded shadow-sm opacity-90 transition-all hover:-translate-y-1"
style={{ zIndex: i }}
></div>
))}
</div>
)}
<div className="w-0.5 h-6 bg-slate-300"></div>
</div>
);
}