diff --git a/frontend/src/components/AddLevelButton.jsx b/frontend/src/components/AddLevelButton.jsx index 555a169..67fa95f 100644 --- a/frontend/src/components/AddLevelButton.jsx +++ b/frontend/src/components/AddLevelButton.jsx @@ -1,14 +1,11 @@ export default function AddLevelButton({ handleAddLevel }) { return ( -
- -
+
); } \ No newline at end of file diff --git a/frontend/src/components/BlankCardsCounter.jsx b/frontend/src/components/BlankCardsCounter.jsx index 3048c02..b35b7ed 100644 --- a/frontend/src/components/BlankCardsCounter.jsx +++ b/frontend/src/components/BlankCardsCounter.jsx @@ -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 ( -
+
-
- - {/* Botones de - y + */} -
- +
-
- Blancas - {blankCardsCount} + {/* Línea conectora horizontal */} +
+ + {/* Botones - y + */} +
+ + +
+ Blancas + {blankCardsCount} +
+ +
- -
{/* Cartas blancas */} {blankCardsCount > 0 && ( -
- {Array.from({ length: blankCardsCount }).map((_, i) => ( -
+
+ {rows.map((row, rowIndex) => ( +
+ {row.map((_, colIndex) => ( +
+ ))} +
))}
)} diff --git a/frontend/src/components/CardEditor.jsx b/frontend/src/components/CardEditor.jsx index efb5ad7..c5e887f 100644 --- a/frontend/src/components/CardEditor.jsx +++ b/frontend/src/components/CardEditor.jsx @@ -1,40 +1,18 @@ + export default function CardEditor({ index, level, handleLevelChange, handleRemoveLevel, totalLevels, error }) { return ( -
-
+
{totalLevels > 3 && ( - + )} - {index + 1} {index + 1} - - 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' - }`} - /> -
- -
- {error && ( -

- Escribe una etiqueta -

- )} + 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'}`} />
+
{error &&

Escribe una etiqueta

}
); } \ No newline at end of file diff --git a/frontend/src/components/layout/MainLayout.jsx b/frontend/src/components/layout/MainLayout.jsx index 73cbad7..fc1996d 100644 --- a/frontend/src/components/layout/MainLayout.jsx +++ b/frontend/src/components/layout/MainLayout.jsx @@ -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 ( -
- -
-

- Método Deck of Cards +
+ {/* Cabecera */} +
+
+
+ DoC +
+

+ Deck of Cards Method

+
-
-
- - `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 - - - - `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 - -
-
- -
+ {/* Contenido principal */} +
-
); -}; \ No newline at end of file +} \ No newline at end of file diff --git a/frontend/src/components/membershipFunction/Chart.jsx b/frontend/src/components/membershipFunction/Chart.jsx index 7c0134b..9844798 100644 --- a/frontend/src/components/membershipFunction/Chart.jsx +++ b/frontend/src/components/membershipFunction/Chart.jsx @@ -5,41 +5,28 @@ export default function Chart({ baseScale, mfDefinitions, selectedTerm, colors } const scaleKeys = Object.keys(baseScale); return ( -
- - +
+ + - - + + 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 ( - - + - - + ); })} diff --git a/frontend/src/components/membershipFunction/Controls.jsx b/frontend/src/components/membershipFunction/Controls.jsx index 9b653ae..10ff96b 100644 --- a/frontend/src/components/membershipFunction/Controls.jsx +++ b/frontend/src/components/membershipFunction/Controls.jsx @@ -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 ( -
-
-

- Ajustando franjas para: "{selectedTerm}" +
+
+

+ Ajustando: "{selectedTerm}"

-
- - {/* Columna izquierda: Inicios */} -
+
+
-
-
-
- {/* Columna derecha: Fines */} -
+
-
-
-
-
); diff --git a/frontend/src/pages/AdvancedMode.jsx b/frontend/src/pages/AdvancedMode.jsx index 1ed2711..8ae287b 100644 --- a/frontend/src/pages/AdvancedMode.jsx +++ b/frontend/src/pages/AdvancedMode.jsx @@ -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 (
{/* PASO 1 */} {step === 1 && ( -
+
-
-

+
+

Paso 1: Escala de Referencia (Mesa)

- - {totalElements > 6 && ( - )}
-
- -
- {levels.map((level, index) => ( - - 3} /> - - {index < levels.length - 1 && ( - - )} - - ))} +
+
-
- -
+
+ + {levels.map((level, index) => ( + + +
+ 3} /> +
+ + {index < levels.length - 1 && ( + + )} + + ))} + +
+
+
+ + +
+ +
-
-
@@ -168,19 +184,19 @@ export default function AdvancedMode() { {/* PASO 2 */} {step === 2 && ( -
-
-

Paso 2: Modelar Conceptos Difusos

- +
+
+

Paso 2: Modelar Conceptos Difusos

+
-
+
{scaleKeys.map((name, index) => { const color = COLORS[index % COLORS.length]; const isSelected = selectedTerm === name; return ( - ); })} @@ -188,16 +204,10 @@ export default function AdvancedMode() { - -
-
diff --git a/frontend/src/routers/AppRouter.jsx b/frontend/src/routers/AppRouter.jsx index b59dc41..3259cfb 100644 --- a/frontend/src/routers/AppRouter.jsx +++ b/frontend/src/routers/AppRouter.jsx @@ -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 ( - - - - }> - } /> - } /> - - - } /> - - - + + + }> + } /> + } /> + + + ); -}; \ No newline at end of file +} \ No newline at end of file