bfs_network_render.js

import {
  BFS_GRAPH_POSITIONS,
  BFS_THEME,
} from './bfs_network_data.js';

function renderMatrixCell(value, row, col, activeCell) {
  let className = '';
  if (activeCell && activeCell[0] === row && activeCell[1] === col) {
    className = value === 1 ? 'active' : 'skip';
  }
  return `<td class="${className}">${value}</td>`;
}

export function renderGraphBuild(step) {
  const matrix = [
    [1, 1, 0],
    [1, 1, 0],
    [0, 0, 1],
  ];

  document.getElementById('build-matrix').innerHTML = `
    <table class="matrix-table">
      <thead>
        <tr><th></th><th>0</th><th>1</th><th>2</th></tr>
      </thead>
      <tbody>
        ${matrix.map((row, rowIndex) => `
          <tr>
            <th>${rowIndex}</th>
            ${row.map((value, colIndex) => renderMatrixCell(value, rowIndex, colIndex, step.activeCell)).join('')}
          </tr>
        `).join('')}
      </tbody>
    </table>
  `;

  document.getElementById('build-adj').innerHTML = step.adjacency.map((values, index) => `
    <div class="adj-row">
      <div class="adj-node">graph[${index}]</div>
      <div class="adj-values">[${values.join(', ')}]</div>
    </div>
  `).join('');

  document.getElementById('build-log').textContent = step.log;
}

function renderNode(index, state) {
  const { current, visited } = state;
  let fill = BFS_THEME.nodeFill;
  let stroke = BFS_THEME.nodeStroke;
  let text = BFS_THEME.nodeText;

  if (visited[index]) {
    fill = BFS_THEME.nodeVisitedFill;
    stroke = BFS_THEME.nodeVisitedStroke;
    text = BFS_THEME.nodeVisitedText;
  }

  if (current === index) {
    fill = BFS_THEME.nodeCurrentFill;
    stroke = BFS_THEME.nodeCurrentStroke;
    text = BFS_THEME.nodeCurrentText;
  }

  return `
    <circle cx="${BFS_GRAPH_POSITIONS[index].x}" cy="${BFS_GRAPH_POSITIONS[index].y}" r="28" fill="${fill}" stroke="${stroke}" stroke-width="2"/>
    <text x="${BFS_GRAPH_POSITIONS[index].x}" y="${BFS_GRAPH_POSITIONS[index].y}" text-anchor="middle" dominant-baseline="central" font-size="18" font-weight="700" fill="${text}">${index}</text>
  `;
}

function renderEdges(edges, state) {
  return edges.map(([from, to]) => {
    const isActive = state.current === from || state.current === to;
    const stroke = isActive ? BFS_THEME.edgeActive : BFS_THEME.edge;
    return `<line x1="${BFS_GRAPH_POSITIONS[from].x}" y1="${BFS_GRAPH_POSITIONS[from].y}" x2="${BFS_GRAPH_POSITIONS[to].x}" y2="${BFS_GRAPH_POSITIONS[to].y}" stroke="${stroke}" stroke-width="2"/>`;
  }).join('');
}

export function renderTraversal(step) {
  document.getElementById('bfs-graph').innerHTML = `
    <svg class="diagram-svg" viewBox="0 0 620 180">
      ${renderEdges(step.edges, step)}
      ${[0, 1, 2].map((index) => renderNode(index, step)).join('')}
      <text x="120" y="138" text-anchor="middle" font-size="10" fill="${BFS_THEME.label}" font-family="'JetBrains Mono', monospace">0</text>
      <text x="310" y="138" text-anchor="middle" font-size="10" fill="${BFS_THEME.label}" font-family="'JetBrains Mono', monospace">1</text>
      <text x="500" y="138" text-anchor="middle" font-size="10" fill="${BFS_THEME.label}" font-family="'JetBrains Mono', monospace">2</text>
    </svg>
  `;

  document.getElementById('bfs-queue').innerHTML = step.queue.length
    ? step.queue.map((value, index) => `<div class="queue-chip ${index === 0 ? 'active' : ''}">${value}</div>`).join('')
    : '<div class="queue-chip">empty</div>';

  document.getElementById('bfs-visited').innerHTML = step.visited.map((value, index) => `
    <div class="visited-chip ${value ? 'on' : ''}">v${index}:${value ? 'T' : 'F'}</div>
  `).join('');

  document.getElementById('bfs-log').textContent = step.log;
}

export function renderNetworkCount(step) {
  document.getElementById('count-visited').innerHTML = step.visited.map((value, index) => `
    <div class="visited-chip ${value ? 'on' : ''}">v${index}:${value ? 'T' : 'F'}</div>
  `).join('');

  document.getElementById('count-networks').innerHTML = Array.from({ length: 3 }, (_, index) => `
    <div class="network-chip ${index < step.networks ? 'on' : ''}">net ${index + 1}</div>
  `).join('');

  document.getElementById('count-focus').textContent = step.focus === null ? '순회 종료' : `현재 확인 중인 정점: ${step.focus}`;
  document.getElementById('count-log').textContent = step.log;
}

export function updateStepper(stepContainerId, currentStep) {
  document.querySelectorAll(`#${stepContainerId} .ps`).forEach((element, index) => {
    element.className = `ps${index < currentStep ? ' done' : index === currentStep ? ' active' : ''}`;
  });
}

export function setStepButtons({ prevId, nextId, stepIndex, lastStep }) {
  document.getElementById(prevId).disabled = stepIndex === 0;
  document.getElementById(nextId).disabled = stepIndex === lastStep;
}

export function setupNavScrollSpy() {
  const sections = [...document.querySelectorAll('.section')];
  const links = [...document.querySelectorAll('.nav-link')];

  function syncActiveLink() {
    let currentSection = '';
    sections.forEach((section) => {
      if (window.scrollY + 80 >= section.offsetTop) {
        currentSection = section.id;
      }
    });

    links.forEach((link) => {
      const href = link.getAttribute('href');
      link.classList.toggle('active', href.startsWith('#') && href === `#${currentSection}`);
    });
  }

  window.addEventListener('scroll', syncActiveLink);
  syncActiveLink();
}