Fix bancas widget

This commit is contained in:
2025-08-29 15:49:13 -03:00
parent 1ed9a49a53
commit 3b8c6bf754
13 changed files with 152 additions and 183 deletions

View File

@@ -127,43 +127,44 @@ export const ParliamentLayout: React.FC<ParliamentLayoutProps> = ({
// Si hay un presidente y su partido tiene bancas, le quitamos una para asignarla.
if (presidenteBancada && presidenteBancada.color) {
// Encontramos el índice del último asiento que pertenece al partido del presidente.
const lastSeatIndex = finalSeatData.map(s => s.color).lastIndexOf(presidenteBancada.color);
if (lastSeatIndex !== -1) {
// Eliminamos ese asiento de la lista de asientos electorales.
finalSeatData.splice(lastSeatIndex, 1);
}
}
const renderedElements = seatElements.map((child, index) => {
// El asiento presidencial sigue siendo un caso especial
if (index === PRESIDENTE_SEAT_INDEX) {
// --- CASO ESPECIAL: ASIENTO PRESIDENCIAL ---
if (index === PRESIDENTE_SEAT_INDEX) {
return React.cloneElement(child, {
fill: presidenteBancada?.color || '#A9A9A9',
stroke: '#000000',
strokeWidth: 2,
// Le damos un tooltip genérico al presidente
'data-tooltip-id': 'seat-tooltip',
'data-tooltip-html': `<div class="seat-tooltip"><p>Presidencia de la Cámara</p></div>`
});
}
// --- LÓGICA NORMAL PARA EL RESTO DE ASIENTOS ---
// Usamos la copia modificada 'finalSeatData'. Como este array es más corto,
// el último asiento electoral no encontrará datos y quedará gris, lo cual es correcto.
const seat = finalSeatData[index];
if (!seat) {
return React.cloneElement(child, { fill: '#E0E0E0', stroke: '#ffffff', strokeWidth: 1.5 });
}
return React.cloneElement(child, {
fill: presidenteBancada?.color || '#A9A9A9',
stroke: '#000000',
strokeWidth: 2,
fill: seat.color,
stroke: '#ffffff',
strokeWidth: 1.5,
'data-tooltip-id': seat.ocupante ? 'seat-tooltip' : undefined,
'data-tooltip-html': seat.ocupante
? `<div class="seat-tooltip"><img src="${seat.ocupante.fotoUrl || '/default-avatar.png'}" alt="${seat.ocupante.nombreOcupante}" /><p>${seat.ocupante.nombreOcupante}</p></div>`
: undefined,
});
}
// La lógica ahora es simple: el asiento en el índice X del SVG
// corresponde al asiento en el índice X de los datos.
const seat = seatData[index];
if (!seat) {
return React.cloneElement(child, { fill: '#E0E0E0', stroke: '#ffffff', strokeWidth: 1.5 });
}
return React.cloneElement(child, {
fill: seat.color,
stroke: '#ffffff',
strokeWidth: 1.5,
'data-tooltip-id': seat.ocupante ? 'seat-tooltip' : undefined,
'data-tooltip-html': seat.ocupante
? `<div class="seat-tooltip"><img src="${seat.ocupante.fotoUrl || '/default-avatar.png'}" alt="${seat.ocupante.nombreOcupante}" /><p>${seat.ocupante.nombreOcupante}</p></div>`
: undefined,
});
});
return (
<svg viewBox="0 0 550 375" width={size} height={size * (375 / 550)} style={{ display: 'block', margin: 'auto' }}>