fix: arreglar errores menores y ajustes visuales
This commit is contained in:
Alexis
@@ -1,14 +1,11 @@
|
||||
export default function AddLevelButton({ handleAddLevel }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center mx-2 my-4">
|
||||
<button
|
||||
onClick={handleAddLevel}
|
||||
className="w-44 h-60 border-4 border-dashed border-slate-300 rounded-2xl flex flex-col items-center justify-center gap-2 text-slate-400 font-semibold hover:bg-blue-50 hover:border-blue-400 hover:text-blue-500 transition-all active:scale-[0.98] group"
|
||||
>
|
||||
<div className="flex flex-col items-center mx-2 my-2">
|
||||
<button onClick={handleAddLevel} className="w-40 h-52 border-4 border-dashed border-slate-300 rounded-2xl flex flex-col items-center justify-center gap-2 text-slate-400 font-semibold hover:bg-blue-50 hover:border-blue-400 hover:text-blue-500 transition-all active:scale-[0.98] group">
|
||||
<span className="text-4xl font-light leading-none group-hover:scale-110 transition-transform">+</span>
|
||||
<span className="text-sm uppercase tracking-widest font-bold text-center px-4">Añadir Carta</span>
|
||||
<span className="text-xs uppercase tracking-widest font-bold text-center px-4">Añadir Carta</span>
|
||||
</button>
|
||||
<div className="h-6 mt-3"></div>
|
||||
<div className="h-6 mt-2"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,36 +1,51 @@
|
||||
export default function BlankCardsCounter({ index, blankCardsCount, handleBlankCardChange }) {
|
||||
|
||||
const maxCardsPerRow = 7;
|
||||
const rows = [];
|
||||
for (let i = 0; i < blankCardsCount; i += maxCardsPerRow) {
|
||||
rows.push(Array.from({ length: Math.min(maxCardsPerRow, blankCardsCount - i) }));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center relative mx-1 mb-10">
|
||||
<div className="flex flex-col items-center mx-1 my-2 z-10 w-32">
|
||||
|
||||
<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-50 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
|
||||
>-</button>
|
||||
<div className="relative w-full h-52 flex flex-col items-center justify-center shrink-0">
|
||||
|
||||
<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>
|
||||
{/* Línea conectora horizontal */}
|
||||
<div className="absolute w-[calc(100%+2rem)] h-1 bg-slate-200 top-[50%] -translate-y-1/2 z-0 rounded"></div>
|
||||
|
||||
{/* Botones - 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 relative">
|
||||
<button
|
||||
onClick={() => handleBlankCardChange(index, -1)}
|
||||
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 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-50 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
|
||||
>+</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleBlankCardChange(index, 1)}
|
||||
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="absolute top-[75px] flex flex-row items-center -space-x-4">
|
||||
{Array.from({ length: blankCardsCount }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
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 className="flex flex-col items-center gap-y-3 w-full justify-center -mt-16 relative z-0">
|
||||
{rows.map((row, rowIndex) => (
|
||||
<div key={rowIndex} className="flex flex-row items-center justify-center -space-x-4">
|
||||
{row.map((_, colIndex) => (
|
||||
<div
|
||||
key={`${rowIndex}-${colIndex}`}
|
||||
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: colIndex }}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,40 +1,18 @@
|
||||
|
||||
export default function CardEditor({ index, level, handleLevelChange, handleRemoveLevel, totalLevels, error }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center mx-2 my-4">
|
||||
<div className={`relative w-44 h-60 bg-white border-2 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.08)] flex flex-col items-center justify-center transition-transform hover:-translate-y-2 hover:shadow-[0_12px_40px_rgb(0,0,0,0.12)] group ${
|
||||
<div className="flex flex-col items-center mx-2 my-2">
|
||||
<div className={`relative w-40 h-52 bg-white border-2 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.08)] flex flex-col items-center justify-center transition-transform hover:-translate-y-2 hover:shadow-[0_12px_40px_rgb(0,0,0,0.12)] group ${
|
||||
error ? 'border-red-400 shadow-red-100' : 'border-slate-200'
|
||||
}`}>
|
||||
{totalLevels > 3 && (
|
||||
<button
|
||||
onClick={() => handleRemoveLevel(index)}
|
||||
className="absolute -top-3 -right-3 w-8 h-8 bg-white text-slate-400 rounded-full border border-slate-200 flex items-center justify-center font-bold hover:bg-red-500 hover:text-white hover:border-red-500 transition-colors z-10 opacity-0 group-hover:opacity-100 shadow-sm"
|
||||
title="Eliminar carta"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<button onClick={() => handleRemoveLevel(index)} className="absolute -top-3 -right-3 w-8 h-8 bg-white text-slate-400 rounded-full border border-slate-200 flex items-center justify-center font-bold hover:bg-red-500 hover:text-white hover:border-red-500 transition-colors z-10 opacity-0 group-hover:opacity-100 shadow-sm" title="Eliminar carta">×</button>
|
||||
)}
|
||||
|
||||
<span className="absolute top-3 left-4 text-sm font-black text-slate-300">{index + 1}</span>
|
||||
<span className="absolute bottom-3 right-4 text-sm font-black text-slate-300 rotate-180">{index + 1}</span>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Etiqueta..."
|
||||
value={level}
|
||||
onChange={(e) => handleLevelChange(index, e.target.value)}
|
||||
className={`w-10/12 text-center text-xl font-bold text-slate-700 bg-transparent border-b-2 border-dashed outline-none pb-1 ${
|
||||
error ? 'border-red-300 focus:border-red-500 placeholder:text-red-200' : 'border-slate-300 focus:border-blue-500'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-6 mt-3">
|
||||
{error && (
|
||||
<p className="text-red-500 text-sm font-semibold animate-pulse">
|
||||
Escribe una etiqueta
|
||||
</p>
|
||||
)}
|
||||
<input type="text" placeholder="Etiqueta..." value={level} onChange={(e) => handleLevelChange(index, e.target.value)} className={`w-10/12 text-center text-lg font-bold text-slate-700 bg-transparent border-b-2 border-dashed outline-none pb-1 ${error ? 'border-red-300 focus:border-red-500 placeholder:text-red-200' : 'border-slate-300 focus:border-blue-500'}`} />
|
||||
</div>
|
||||
<div className="h-6 mt-2">{error && <p className="text-red-500 text-xs font-semibold animate-pulse">Escribe una etiqueta</p>}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,49 +1,24 @@
|
||||
import { Outlet, NavLink } from 'react-router-dom';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
|
||||
export const MainLayout = () => {
|
||||
export default function MainLayout() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 p-8 font-sans text-slate-800 flex flex-col items-center">
|
||||
|
||||
<header className="text-center mb-8 flex flex-col items-center gap-6">
|
||||
<h1 className="text-4xl font-extrabold text-slate-900 tracking-tight">
|
||||
Método <span className="text-blue-600">Deck of Cards</span>
|
||||
<div className="min-h-screen bg-slate-50 font-sans text-slate-900">
|
||||
{/* Cabecera */}
|
||||
<header className="bg-white border-b border-slate-200 sticky top-0 z-50 shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 h-14 flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center shadow-inner">
|
||||
<span className="text-white font-black text-xl leading-none">DoC</span>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-slate-800">
|
||||
Deck of Cards Method
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex justify-center mb-10 w-full">
|
||||
<div className="bg-slate-200/60 p-1.5 rounded-2xl flex gap-2 shadow-inner">
|
||||
<NavLink
|
||||
to="/basico"
|
||||
className={({ isActive }) =>
|
||||
`px-8 py-3 rounded-xl font-bold transition-all duration-300 ${
|
||||
isActive
|
||||
? 'bg-white text-blue-600 shadow-md transform scale-105'
|
||||
: 'text-slate-500 hover:text-slate-700 hover:bg-slate-300/50'
|
||||
}`
|
||||
}
|
||||
>
|
||||
DoC Básico
|
||||
</NavLink>
|
||||
|
||||
<NavLink
|
||||
to="/avanzado"
|
||||
className={({ isActive }) =>
|
||||
`px-8 py-3 rounded-xl font-bold transition-all duration-300 ${
|
||||
isActive
|
||||
? 'bg-white text-blue-600 shadow-md transform scale-105'
|
||||
: 'text-slate-500 hover:text-slate-700 hover:bg-slate-300/50'
|
||||
}`
|
||||
}
|
||||
>
|
||||
DoC-MF Avanzado
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="w-full flex flex-col items-center">
|
||||
{/* Contenido principal */}
|
||||
<main className="max-w-7xl mx-auto px-4 py-6">
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
@@ -5,41 +5,28 @@ export default function Chart({ baseScale, mfDefinitions, selectedTerm, colors }
|
||||
const scaleKeys = Object.keys(baseScale);
|
||||
|
||||
return (
|
||||
<div className="w-full bg-slate-50/50 rounded-2xl border border-slate-200 p-4 mb-10">
|
||||
<ResponsiveContainer width="99%" height={450}>
|
||||
<ComposedChart margin={{ top: 30, right: 30, left: 20, bottom: 20 }}>
|
||||
<div className="w-full bg-slate-50/50 rounded-2xl border border-slate-200 p-2 mb-6">
|
||||
<ResponsiveContainer width="99%" height={320}>
|
||||
<ComposedChart margin={{ top: 20, right: 30, left: 10, bottom: 10 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
||||
<XAxis type="number" dataKey="x" domain={[0, 1]} ticks={[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]} tick={{ fill: '#475569', fontWeight: 600 }} />
|
||||
<YAxis domain={[0, 1]} tick={{ fill: '#475569' }} />
|
||||
<XAxis type="number" dataKey="x" domain={[0, 1]} ticks={[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]} tick={{ fill: '#475569', fontWeight: 600, fontSize: 12 }} />
|
||||
<YAxis domain={[0, 1]} tick={{ fill: '#475569', fontSize: 12 }} />
|
||||
<Tooltip formatter={(value) => typeof value === 'number' ? value.toFixed(2) : value} />
|
||||
|
||||
{scaleKeys.map((name, index) => {
|
||||
const val = baseScale[name];
|
||||
const mf = mfDefinitions[name];
|
||||
if (!mf) return null;
|
||||
|
||||
const color = colors[index % colors.length];
|
||||
const isSelected = selectedTerm === name;
|
||||
|
||||
const trapezeData = [
|
||||
{ x: mf.supportStart, y: 0 },
|
||||
{ x: mf.coreStart, y: 1 },
|
||||
{ x: mf.coreEnd, y: 1 },
|
||||
{ x: mf.supportEnd, y: 0 },
|
||||
];
|
||||
const trapezeData = [ { x: mf.supportStart, y: 0 }, { x: mf.coreStart, y: 1 }, { x: mf.coreEnd, y: 1 }, { x: mf.supportEnd, y: 0 } ];
|
||||
|
||||
return (
|
||||
<React.Fragment key={`mf-${name}`}>
|
||||
<ReferenceLine x={val} stroke={color} strokeDasharray="4 4" strokeWidth={isSelected ? 2 : 1} label={{ position: 'top', value: name, fill: color, fontWeight: isSelected ? '900' : 'normal' }} />
|
||||
|
||||
<ReferenceLine x={val} stroke={color} strokeDasharray="4 4" strokeWidth={isSelected ? 2 : 1} label={{ position: 'top', value: name, fill: color, fontWeight: isSelected ? '900' : 'normal', fontSize: 12 }} />
|
||||
<ReferenceArea x1={mf.supportStart} x2={mf.supportEnd} fill={color} fillOpacity={isSelected ? 0.3 : 0.05} />
|
||||
<ReferenceArea x1={mf.coreStart} x2={mf.coreEnd} fill={color} fillOpacity={isSelected ? 0.6 : 0.15} />
|
||||
|
||||
<Line
|
||||
data={trapezeData} dataKey="y" type="linear" stroke={color} strokeWidth={isSelected ? 4 : 2}
|
||||
dot={isSelected ? { r: 6, fill: color, stroke: '#fff', strokeWidth: 2 } : false}
|
||||
activeDot={false} isAnimationActive={false}
|
||||
/>
|
||||
<Line data={trapezeData} dataKey="y" type="linear" stroke={color} strokeWidth={isSelected ? 4 : 2} dot={isSelected ? { r: 5, fill: color, stroke: '#fff', strokeWidth: 2 } : false} activeDot={false} isAnimationActive={false} />
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -4,10 +4,7 @@ export default function Controls({ selectedTerm, currentMf, selectedColor, baseS
|
||||
const scaleKeys = Object.keys(baseScale);
|
||||
const selectedIndex = scaleKeys.indexOf(selectedTerm);
|
||||
|
||||
let prevCoreEnd = 0;
|
||||
let prevSupportEnd = 0;
|
||||
let nextCoreStart = 1;
|
||||
let nextSupportStart = 1;
|
||||
let prevCoreEnd = 0, prevSupportEnd = 0, nextCoreStart = 1, nextSupportStart = 1;
|
||||
|
||||
if (selectedIndex > 0) {
|
||||
const prevTerm = scaleKeys[selectedIndex - 1];
|
||||
@@ -21,52 +18,42 @@ export default function Controls({ selectedTerm, currentMf, selectedColor, baseS
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white p-8 rounded-2xl border border-slate-200 shadow-lg relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-2" style={{ backgroundColor: selectedColor }}></div>
|
||||
<h3 className="text-2xl font-bold text-slate-800 mb-6 flex items-center gap-3">
|
||||
Ajustando franjas para: <span style={{ color: selectedColor }}>"{selectedTerm}"</span>
|
||||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-md relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-1.5" style={{ backgroundColor: selectedColor }}></div>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center gap-2">
|
||||
Ajustando: <span style={{ color: selectedColor }}>"{selectedTerm}"</span>
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
|
||||
{/* Columna izquierda: Inicios */}
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
|
||||
<span>Inicio del Núcleo (Límite: {prevSupportEnd.toFixed(2)})</span>
|
||||
<span style={{ color: selectedColor }}>{currentMf.coreStart.toFixed(3)}</span>
|
||||
<label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
|
||||
<span>Inicio del Núcleo (Límite: {prevSupportEnd.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.coreStart.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={prevSupportEnd} max={nextCoreStart} step="0.001" value={currentMf.coreStart} onChange={(e) => updateCurrentMf('coreStart', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor }} />
|
||||
<input type="range" min={prevSupportEnd} max={nextCoreStart} step="0.001" value={currentMf.coreStart} onChange={(e) => updateCurrentMf('coreStart', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor }} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
|
||||
<span>Inicio del Soporte (Límite: {prevCoreEnd.toFixed(2)})</span>
|
||||
<span style={{ color: selectedColor }}>{currentMf.supportStart.toFixed(3)}</span>
|
||||
<label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
|
||||
<span>Inicio del Soporte (Límite: {prevCoreEnd.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.supportStart.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={prevCoreEnd} max={nextCoreStart} step="0.001" value={currentMf.supportStart} onChange={(e) => updateCurrentMf('supportStart', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor, opacity: 0.7 }} />
|
||||
<input type="range" min={prevCoreEnd} max={nextCoreStart} step="0.001" value={currentMf.supportStart} onChange={(e) => updateCurrentMf('supportStart', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor, opacity: 0.7 }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Columna derecha: Fines */}
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
|
||||
<span>Fin del Núcleo (Límite: {nextSupportStart.toFixed(2)})</span>
|
||||
<span style={{ color: selectedColor }}>{currentMf.coreEnd.toFixed(3)}</span>
|
||||
<label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
|
||||
<span>Fin del Núcleo (Límite: {nextSupportStart.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.coreEnd.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={prevCoreEnd} max={nextSupportStart} step="0.001" value={currentMf.coreEnd} onChange={(e) => updateCurrentMf('coreEnd', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor }} />
|
||||
<input type="range" min={prevCoreEnd} max={nextSupportStart} step="0.001" value={currentMf.coreEnd} onChange={(e) => updateCurrentMf('coreEnd', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor }} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex justify-between text-sm font-bold text-slate-600 mb-2">
|
||||
<span>Fin del Soporte (Límite: {nextCoreStart.toFixed(2)})</span>
|
||||
<span style={{ color: selectedColor }}>{currentMf.supportEnd.toFixed(3)}</span>
|
||||
<label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
|
||||
<span>Fin del Soporte (Límite: {nextCoreStart.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.supportEnd.toFixed(3)}</span>
|
||||
</label>
|
||||
<input type="range" min={prevCoreEnd} max={nextCoreStart} step="0.001" value={currentMf.supportEnd} onChange={(e) => updateCurrentMf('supportEnd', e.target.value)} className="w-full cursor-pointer" style={{ accentColor: selectedColor, opacity: 0.7 }} />
|
||||
<input type="range" min={prevCoreEnd} max={nextCoreStart} step="0.001" value={currentMf.supportEnd} onChange={(e) => updateCurrentMf('supportEnd', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor, opacity: 0.7 }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import CriterionInput from '../components/CriterionInput';
|
||||
import CardEditor from '../components/CardEditor';
|
||||
import BlankCardsCounter from '../components/BlankCardsCounter';
|
||||
@@ -22,6 +22,28 @@ export default function AdvancedMode() {
|
||||
// Estado para controlar la lupa (Zoom)
|
||||
const [isZoomActive, setIsZoomActive] = useState(true);
|
||||
|
||||
// Medición exacta con Refs
|
||||
const containerRef = useRef(null);
|
||||
const tableRef = useRef(null);
|
||||
const [dimensions, setDimensions] = useState({ container: 1000, table: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const updateMeasurements = () => {
|
||||
if (containerRef.current && tableRef.current) {
|
||||
setDimensions({
|
||||
container: containerRef.current.offsetWidth,
|
||||
table: tableRef.current.scrollWidth
|
||||
});
|
||||
}
|
||||
};
|
||||
const timeoutId = setTimeout(updateMeasurements, 50);
|
||||
window.addEventListener('resize', updateMeasurements);
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
window.removeEventListener('resize', updateMeasurements);
|
||||
};
|
||||
}, [levels, blankCards, step]);
|
||||
|
||||
// Estados Fase 2 (Franjas)
|
||||
const [baseScale, setBaseScale] = useState({});
|
||||
const [selectedTerm, setSelectedTerm] = useState(null);
|
||||
@@ -56,7 +78,6 @@ export default function AdvancedMode() {
|
||||
} catch (error) { alert("Error: " + error); } finally { setIsLoading(false); }
|
||||
};
|
||||
|
||||
// Manejadores de Franjas
|
||||
const updateCurrentMf = (field, value) => {
|
||||
if (!selectedTerm) return;
|
||||
let numValue = parseFloat(value);
|
||||
@@ -64,7 +85,6 @@ export default function AdvancedMode() {
|
||||
setMfDefinitions(prev => {
|
||||
const scaleKeys = Object.keys(baseScale);
|
||||
const selectedIndex = scaleKeys.indexOf(selectedTerm);
|
||||
|
||||
let prevCoreEnd = 0, prevSupportEnd = 0, nextCoreStart = 1, nextSupportStart = 1;
|
||||
|
||||
if (selectedIndex > 0) {
|
||||
@@ -100,66 +120,62 @@ export default function AdvancedMode() {
|
||||
const scaleKeys = Object.keys(baseScale);
|
||||
const selectedColor = COLORS[scaleKeys.indexOf(selectedTerm) % COLORS.length] || '#2563eb';
|
||||
|
||||
const totalElements = levels.length;
|
||||
const dynamicScale = totalElements > 6 ? 6.2 / totalElements : 1;
|
||||
const currentScale = isZoomActive ? Math.max(0.4, dynamicScale) : 1;
|
||||
const needsZoom = dimensions.table > dimensions.container;
|
||||
const dynamicScale = needsZoom ? (dimensions.container / dimensions.table) * 0.95 : 1;
|
||||
const currentScale = isZoomActive && needsZoom ? dynamicScale : 1;
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col items-center">
|
||||
|
||||
{/* PASO 1 */}
|
||||
{step === 1 && (
|
||||
<div className="w-full bg-white p-8 rounded-3xl shadow-sm border border-slate-200 mb-12 flex flex-col items-center animate-fade-in overflow-hidden">
|
||||
<div className="w-full bg-white p-6 rounded-2xl shadow-sm border border-slate-200 mb-6 flex flex-col items-center animate-fade-in relative overflow-visible">
|
||||
|
||||
<div className="flex justify-between items-center w-full mb-8 border-b pb-4">
|
||||
<h2 className="text-2xl font-bold text-slate-800">
|
||||
<div className="flex justify-between items-center w-full mb-4 border-b pb-3 relative z-30">
|
||||
<h2 className="text-xl font-bold text-slate-800">
|
||||
Paso 1: Escala de Referencia (Mesa)
|
||||
</h2>
|
||||
|
||||
{totalElements > 6 && (
|
||||
<button
|
||||
onClick={() => setIsZoomActive(!isZoomActive)}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-xl font-bold transition-all shadow-sm border-2 ${
|
||||
isZoomActive
|
||||
? 'bg-blue-50 border-blue-200 text-blue-700 hover:bg-blue-100'
|
||||
: 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">{isZoomActive ? '🔍' : '🖼️'}</span>
|
||||
{isZoomActive ? 'Ver de cerca' : 'Ajustar mesa a la pantalla'}
|
||||
{needsZoom && (
|
||||
<button onClick={() => setIsZoomActive(!isZoomActive)} className={`flex items-center gap-2 px-3 py-1.5 rounded-lg font-bold transition-all shadow-sm border text-sm ${isZoomActive ? 'bg-blue-50 border-blue-200 text-blue-700' : 'bg-white border-slate-200 text-slate-600'}`}>
|
||||
<span>{isZoomActive ? '🔍' : '🖼️'}</span>
|
||||
{isZoomActive ? 'Ver de cerca (Scroll)' : 'Ajustar mesa'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<CriterionInput criterionName={criterionName} setCriterionName={handleCriterionChange} error={errors.criterion} />
|
||||
|
||||
<div className={`w-full mt-6 flex ${!isZoomActive ? 'overflow-x-auto pb-12 justify-start px-4' : 'overflow-hidden justify-center'}`}>
|
||||
|
||||
<div
|
||||
className={`flex flex-row items-center min-w-max px-2 transition-transform duration-500 ease-out ${isZoomActive ? 'origin-top' : 'origin-top-left'}`}
|
||||
style={{
|
||||
transform: `scale(${currentScale})`,
|
||||
marginBottom: isZoomActive && currentScale < 1 ? `-${(1 - currentScale) * 350}px` : '0px'
|
||||
}}
|
||||
>
|
||||
{levels.map((level, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<CardEditor index={index} level={level} handleLevelChange={handleLevelChange} handleRemoveLevel={handleRemoveLevel} totalLevels={levels.length} error={errors.levels[index]} canRemove={levels.length > 3} />
|
||||
|
||||
{index < levels.length - 1 && (
|
||||
<BlankCardsCounter index={index} blankCardsCount={blankCards[index]} handleBlankCardChange={handleBlankCardChange} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
<div ref={containerRef} className={`w-full mt-6 transition-all relative ${!isZoomActive && needsZoom ? 'overflow-x-auto flex justify-start pb-8 pt-8 px-4' : 'overflow-hidden flex justify-center pb-8 pt-8'}`}>
|
||||
<div className={`flex flex-row items-start min-w-max transition-transform duration-500 ease-out px-4 origin-top`} style={{ transform: `scale(${currentScale})`, marginBottom: isZoomActive && currentScale < 1 ? `-${(1 - currentScale) * 300}px` : '0px' }}>
|
||||
|
||||
<div className="w-6 h-1 bg-slate-200 mx-1 top-[40%]"></div>
|
||||
<AddLevelButton handleAddLevel={handleAddLevel} />
|
||||
</div>
|
||||
<div ref={tableRef} className="flex flex-row items-start relative px-10 overflow-visible">
|
||||
|
||||
{levels.map((level, index) => (
|
||||
<React.Fragment key={index}>
|
||||
|
||||
<div className="flex flex-col items-center mx-2 my-2 relative z-20">
|
||||
<CardEditor index={index} level={level} handleLevelChange={handleLevelChange} handleRemoveLevel={handleRemoveLevel} totalLevels={levels.length} error={errors.levels[index]} canRemove={levels.length > 3} />
|
||||
</div>
|
||||
|
||||
{index < levels.length - 1 && (
|
||||
<BlankCardsCounter index={index} blankCardsCount={blankCards[index]} handleBlankCardChange={handleBlankCardChange} />
|
||||
)}
|
||||
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
<div className="mx-1 my-2 h-52 flex items-center justify-center">
|
||||
<div className="w-10 h-1 bg-slate-200 rounded"></div>
|
||||
</div>
|
||||
|
||||
<AddLevelButton handleAddLevel={handleAddLevel} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-lg mt-12 pt-8 border-t-2 border-slate-200 flex flex-col items-center z-20 relative bg-white">
|
||||
<button onClick={handleGenerateBaseScale} disabled={isLoading} className={`w-full py-4 text-white text-xl font-bold rounded-xl shadow-lg transition-all active:scale-[0.98] ${isLoading ? 'bg-slate-400 cursor-not-allowed' : 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700'}`}>
|
||||
<div className="w-full max-w-lg mt-2 pt-6 border-t border-slate-200 flex flex-col items-center z-20 relative bg-white">
|
||||
<button onClick={handleGenerateBaseScale} disabled={isLoading} className={`w-full py-3 text-white text-lg font-bold rounded-xl shadow-md transition-all active:scale-[0.98] ${isLoading ? 'bg-slate-400 cursor-not-allowed' : 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700'}`}>
|
||||
{isLoading ? 'Calculando...' : 'Generar Gráfica Continua'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -168,19 +184,19 @@ export default function AdvancedMode() {
|
||||
|
||||
{/* PASO 2 */}
|
||||
{step === 2 && (
|
||||
<div className="w-full max-w-6xl bg-white p-10 rounded-3xl shadow-sm border border-slate-200 animate-fade-in">
|
||||
<div className="flex justify-between items-center mb-8 border-b pb-4">
|
||||
<h2 className="text-2xl font-bold text-slate-800">Paso 2: Modelar Conceptos Difusos</h2>
|
||||
<button onClick={() => setStep(1)} className="text-slate-500 hover:text-blue-600 font-semibold underline">← Volver a las cartas</button>
|
||||
<div className="w-full max-w-6xl bg-white p-6 rounded-2xl shadow-sm border border-slate-200 animate-fade-in relative overflow-visible">
|
||||
<div className="flex justify-between items-center mb-6 border-b pb-3">
|
||||
<h2 className="text-xl font-bold text-slate-800">Paso 2: Modelar Conceptos Difusos</h2>
|
||||
<button onClick={() => setStep(1)} className="text-slate-500 hover:text-blue-600 text-sm font-semibold underline">← Volver a las cartas</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
||||
<div className="flex flex-wrap justify-center gap-3 mb-6">
|
||||
{scaleKeys.map((name, index) => {
|
||||
const color = COLORS[index % COLORS.length];
|
||||
const isSelected = selectedTerm === name;
|
||||
return (
|
||||
<button key={name} onClick={() => setSelectedTerm(name)} style={isSelected ? { backgroundColor: color, borderColor: color, color: '#fff' } : { borderColor: color, color: '#475569' }} className={`px-6 py-3 rounded-xl font-bold border-2 transition-all duration-300 flex flex-col items-center shadow-sm hover:shadow-md ${isSelected ? 'transform scale-105' : 'bg-white opacity-80 hover:opacity-100'}`}>
|
||||
<span>{name}</span><span className="text-xs font-normal opacity-80">(X: {baseScale[name].toFixed(2)})</span>
|
||||
<button key={name} onClick={() => setSelectedTerm(name)} style={isSelected ? { backgroundColor: color, borderColor: color, color: '#fff' } : { borderColor: color, color: '#475569' }} className={`px-5 py-2 rounded-lg font-bold border-2 transition-all duration-300 flex flex-col items-center shadow-sm hover:shadow-md ${isSelected ? 'transform scale-105' : 'bg-white opacity-80 hover:opacity-100'}`}>
|
||||
<span>{name}</span><span className="text-[10px] font-normal opacity-80">(X: {baseScale[name].toFixed(2)})</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@@ -188,16 +204,10 @@ export default function AdvancedMode() {
|
||||
|
||||
<Chart baseScale={baseScale} mfDefinitions={mfDefinitions} selectedTerm={selectedTerm} colors={COLORS} />
|
||||
|
||||
<Controls
|
||||
selectedTerm={selectedTerm}
|
||||
currentMf={mfDefinitions[selectedTerm]}
|
||||
selectedColor={selectedColor}
|
||||
baseScale={baseScale}
|
||||
mfDefinitions={mfDefinitions}
|
||||
updateCurrentMf={updateCurrentMf}
|
||||
/>
|
||||
<div className="w-full mt-12 flex justify-center">
|
||||
<button onClick={handleFinalSubmit} className="px-12 py-4 bg-slate-900 text-white text-xl font-bold rounded-xl shadow-lg hover:bg-black hover:shadow-xl transition-all">
|
||||
<Controls selectedTerm={selectedTerm} currentMf={mfDefinitions[selectedTerm]} selectedColor={selectedColor} baseScale={baseScale} mfDefinitions={mfDefinitions} updateCurrentMf={updateCurrentMf} />
|
||||
|
||||
<div className="w-full mt-8 flex justify-center">
|
||||
<button onClick={handleFinalSubmit} className="px-10 py-3 bg-slate-900 text-white text-lg font-bold rounded-xl shadow-md hover:bg-black hover:shadow-lg transition-all">
|
||||
Guardar Todo el Espectro Difuso
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,16 @@
|
||||
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import BasicMode from '../pages/BasicMode';
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import MainLayout from '../components/layout/MainLayout';
|
||||
import AdvancedMode from '../pages/AdvancedMode';
|
||||
import { MainLayout } from '../components/layout/MainLayout';
|
||||
|
||||
export const AppRouter = () => {
|
||||
export function AppRouter() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
|
||||
<Route element={<MainLayout />}>
|
||||
<Route path="/basico" element={<BasicMode />} />
|
||||
<Route path="/avanzado" element={<AdvancedMode />} />
|
||||
</Route>
|
||||
|
||||
<Route path="/*" element={<Navigate to="/basico" />} />
|
||||
|
||||
</Routes>
|
||||
</Router>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<MainLayout />}>
|
||||
<Route index element={<AdvancedMode />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user