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

proceso rangos

Browse Source
This commit is contained in:
Alexis
2026-04-07 10:48:22 +02:00
parent 66c350c8a4
commit 392a1fb36c
1 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/editor/SubscaleModal.jsx
+26 -24
View File
@@ -102,49 +102,51 @@ export default function SubscaleModal({ onClose, onSave, targetInfo }) {
</div> </div>
</div> </div>
{/* HUECO ENTRE CARTAS: Representación y Controles */} {/* HUECO ENTRE CARTAS */}
{index < cardsCount - 1 && ( {index < cardsCount - 1 && (
<div className="flex flex-col items-center justify-start mx-4 mt-2 max-w-[180px]"> <div className="flex flex-col items-center justify-center mx-1 h-40 relative">
{/* Representación visual de las cartas blancas Sólidas / Fantasmas */}
<div className="flex flex-wrap justify-center gap-1 min-h-[48px] mb-4">
{Array.from({ length: blankCards[index].min }).map((_, i) => (
<div key={`solid-${i}`} className="w-7 h-10 bg-white border-2 border-slate-300 rounded shadow-sm" />
))}
{blankCards[index].isRange && Array.from({ length: blankCards[index].max - blankCards[index].min }).map((_, i) => (
<div key={`ghost-${i}`} className="w-7 h-10 bg-blue-50 border-2 border-dashed border-blue-400 rounded opacity-60 flex items-center justify-center">
<span className="text-blue-500 text-[10px] font-bold">?</span>
</div>
))}
</div>
{/* Controles de números */} {/* Controles de números */}
{blankCards[index].isRange ? ( {blankCards[index].isRange ? (
// MODO RANGO // MODO RANGO
<div className="flex gap-4 bg-blue-50/50 p-3 rounded-xl border border-blue-100 shadow-inner"> <div className="flex gap-1 items-center">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<span className="text-xs font-bold text-slate-500 mb-1">MÍN</span> <span className="text-[10px] font-bold text-slate-500 mb-1">MÍN</span>
<BlankCardsCounter index={index} blankCardsCount={blankCards[index].min} handleBlankCardChange={(idx, delta) => handleMinChange(idx, delta)} /> <BlankCardsCounter
index={index}
blankCardsCount={blankCards[index].min}
handleBlankCardChange={(idx, delta) => handleMinChange(idx, delta)}
/>
</div> </div>
{/* Guión separador para unificar visualmente el rango */}
<span className="text-slate-300 font-bold mt-3">-</span>
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<span className="text-xs font-bold text-slate-500 mb-1">MÁX</span> <span className="text-[10px] font-bold text-slate-500 mb-1">MÁX</span>
<BlankCardsCounter index={index} blankCardsCount={blankCards[index].max} handleBlankCardChange={(idx, delta) => handleMaxChange(idx, delta)} /> <BlankCardsCounter
index={index}
blankCardsCount={blankCards[index].max}
handleBlankCardChange={(idx, delta) => handleMaxChange(idx, delta)}
/>
</div> </div>
</div> </div>
) : ( ) : (
// MODO EXACTO // MODO EXACTO
<div className="flex flex-col items-center mt-2"> <div className="flex flex-col items-center">
<span className="text-xs font-bold text-slate-500 mb-1">CARTAS</span> <span className="text-[10px] font-bold text-slate-500 mb-1">CARTAS</span>
<BlankCardsCounter index={index} blankCardsCount={blankCards[index].min} handleBlankCardChange={(idx, delta) => handleExactChange(idx, delta)} /> <BlankCardsCounter
index={index}
blankCardsCount={blankCards[index].min}
handleBlankCardChange={(idx, delta) => handleExactChange(idx, delta)}
/>
</div> </div>
)} )}
{/* Botón Toggle */} {/* Botón Toggle */}
<button <button
onClick={() => toggleRangeMode(index)} onClick={() => toggleRangeMode(index)}
className="mt-3 text-xs font-semibold text-blue-600 hover:text-blue-800 hover:underline transition-colors text-center" className="absolute -bottom-6 text-[10px] font-semibold text-blue-600 hover:text-blue-800 hover:underline transition-colors text-center w-max"
> >
{blankCards[index].isRange ? "Conozco la distancia exacta" : "¿Dudas? Define un rango"} {blankCards[index].isRange ? "Conozco la distancia" : "¿Dudas? Rango"}
</button> </button>
</div> </div>