Prueba visor 2

\n\n\n\n"]; let gamesData = []; let currentMoveIdx = 0; let history = []; function processPGNs() { gamesData = rawPGNs.map(pgn => { let chess = new Chess(); let loaded = chess.load_pgn(pgn, { newline_char: '\n' }); if (!loaded) chess.load_pgn(pgn); let headers = chess.header(); let moveHistory = chess.history({ verbose: true }); let tempChess = new Chess(); let gameHistory = [{ board: tempChess.board(), move: '', comment: '' }]; let comments = chess.get_comments ? chess.get_comments() : []; let commentMap = {}; comments.forEach(c => { commentMap[c.fen] = c.comment; }); moveHistory.forEach(m => { tempChess.move(m); let fen = tempChess.fen(); gameHistory.push({ board: tempChess.board(), move: m.san, comment: commentMap[fen] || '' }); }); return { headers, history: gameHistory }; }); } function initViewer() { processPGNs(); let select = document.getElementById('gameSelect'); select.innerHTML = ''; gamesData.forEach((g, index) => { let option = document.createElement('option'); option.value = index; option.textContent = (g.headers.White || 'Blancas') + ' vs ' + (g.headers.Black || 'Negras') + ' (' + (g.headers.Event || 'Partida ' + (index + 1)) + ')'; select.appendChild(option); }); loadSelectedGame(); } function loadSelectedGame() { let idx = document.getElementById('gameSelect').value; let game = gamesData[idx]; history = game.history; document.getElementById('gameDetails').innerHTML = '

' + (game.headers.White || 'Blancas') + ' vs ' + (game.headers.Black || 'Negras') + '

' + '

Evento: ' + (game.headers.Event || 'Desconocido') + '

' + '

Resultado: ' + (game.headers.Result || '*') + '

'; let movesHtml = ''; for (let i = 1; i < history.length; i += 2) { let moveNum = Math.ceil(i / 2); let whiteMove = history[i] ? history[i].move : ''; let whiteComment = history[i] ? history[i].comment : ''; let blackMove = history[i + 1] ? history[i + 1].move : ''; let blackComment = history[i + 1] ? history[i + 1].comment : ''; movesHtml += '

' + '' + moveNum + '.' + '' + whiteMove + '' + (blackMove ? '' + blackMove + '' : '') + '

'; if (whiteComment) movesHtml += '

' + whiteComment + '

'; if (blackComment) movesHtml += '

' + blackComment + '

'; } document.getElementById('movesList').innerHTML = movesHtml; goToMove(0); } function renderBoard(board) { let boardEl = document.getElementById('chessboard'); boardEl.innerHTML = ''; for (let r = 0; r < 8; r++) { for (let c = 0; c < 8; c++) { let square = document.createElement('div'); square.className = 'square ' + ((r + c) % 2 === 0 ? 'light' : 'dark'); let piece = board[r][c]; if (piece) { let pieceEl = document.createElement('div'); pieceEl.className = 'piece'; pieceEl.style.backgroundImage = 'url("' + getSvgUrl(piece) + '")'; square.appendChild(pieceEl); } boardEl.appendChild(square); } } } function goToMove(index) { if (index < 0) index = 0; if (index >= history.length) index = history.length - 1; currentMoveIdx = index; renderBoard(history[currentMoveIdx].board); document.querySelectorAll('.move-btn').forEach(btn => btn.classList.remove('active')); if (currentMoveIdx > 0) { let activeBtn = document.getElementById('mb-' + currentMoveIdx); let movesContainer = document.getElementById('movesList'); if (activeBtn && movesContainer) { activeBtn.classList.add('active'); let containerRect = movesContainer.getBoundingClientRect(); let btnRect = activeBtn.getBoundingClientRect(); if (btnRect.bottom > containerRect.bottom) { movesContainer.scrollTop += (btnRect.bottom - containerRect.bottom) + 8; } else if (btnRect.top < containerRect.top) { movesContainer.scrollTop -= (containerRect.top - btnRect.top) + 8; } } } else { let movesContainer = document.getElementById('movesList'); if (movesContainer) movesContainer.scrollTop = 0; } } function nextMove() { goToMove(currentMoveIdx + 1); } function prevMove() { goToMove(currentMoveIdx - 1); } document.addEventListener('keydown', e => { if (e.key === 'ArrowRight') nextMove(); if (e.key === 'ArrowLeft') prevMove(); }); window.addEventListener('load', initViewer);