heap_lecture_render.js

import {
  DEFAULT_POSITIONS,
  MAP_SIMULATION,
  VISUAL_THEME,
} from './heap_lecture_data.js';

function getVisualTheme() {
  return document.body.dataset.theme === 'light' ? VISUAL_THEME.light : VISUAL_THEME.dark;
}

function renderEdges(pairs, positions, highlightedNode = -1) {
  const theme = getVisualTheme();
  return pairs.map(([from, to]) => {
    const isHighlighted = highlightedNode >= 0 && (from === highlightedNode || to === highlightedNode);
    return `<line x1="${positions[from].x}" y1="${positions[from].y}" x2="${positions[to].x}" y2="${positions[to].y}" stroke="${isHighlighted ? theme.edgeHighlight : theme.edge}" stroke-width="${isHighlighted ? 2 : 1.5}"/>`;
  }).join('');
}

function renderNode(index, value, type, positions, radius = 21) {
  const theme = getVisualTheme().node[type];
  const strokeWidth = ['root', 'target', 'swap', 'compare'].includes(type) ? 2 : 1;

  return `<circle cx="${positions[index].x}" cy="${positions[index].y}" r="${radius}" fill="${theme.f}" stroke="${theme.s}" stroke-width="${strokeWidth}"/>
<text x="${positions[index].x}" y="${positions[index].y}" text-anchor="middle" dominant-baseline="central" font-size="13" font-weight="500" fill="${theme.t}">${value}</text>`;
}

function renderIndexLabel(index, positions) {
  return `<text x="${positions[index].x}" y="${positions[index].y + 30}" text-anchor="middle" font-size="9" fill="${getVisualTheme().indexLabel}" font-family="'JetBrains Mono',monospace">[${index}]</text>`;
}

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

function setVisible(element, visible) {
  element.style.display = visible ? '' : 'none';
}

export function renderTreeStep({
  svgId,
  logId,
  prevId,
  nextId,
  badgeId,
  stepContainerId,
  positions,
  simulation,
  stepIndex,
}) {
  const step = simulation.steps[stepIndex];
  const svgMarkup = step.vals.map((value, index) => {
    const nodeType = step.types[index] || (index === 0 ? 'root' : 'normal');
    return renderNode(index, value, nodeType, positions);
  }).join('');

  document.getElementById(svgId).innerHTML = renderEdges(simulation.edges, positions) + svgMarkup;
  document.getElementById(logId).textContent = step.log;
  document.getElementById(prevId).disabled = stepIndex === 0;
  document.getElementById(nextId).disabled = stepIndex === simulation.steps.length - 1;
  setVisible(document.getElementById(badgeId), stepIndex === simulation.steps.length - 1);
  updateProgress(stepContainerId, stepIndex);
}

export function renderMap(selectedIndex) {
  const { values, edges } = MAP_SIMULATION;
  const count = values.length;
  const parentIndex = selectedIndex > 0 ? Math.floor((selectedIndex - 1) / 2) : -1;
  const leftChildIndex = 2 * selectedIndex + 1 < count ? 2 * selectedIndex + 1 : -1;
  const rightChildIndex = 2 * selectedIndex + 2 < count ? 2 * selectedIndex + 2 : -1;

  const svgMarkup = renderEdges(edges, DEFAULT_POSITIONS, selectedIndex) + values.map((value, index) => {
    let nodeType = index === 0 ? 'root' : 'normal';

    if (selectedIndex >= 0) {
      if (index === selectedIndex) nodeType = 'target';
      else if (index === parentIndex) nodeType = 'compare';
      else if (index === leftChildIndex || index === rightChildIndex) nodeType = 'swap';
    }

    return `${renderNode(index, value, nodeType, DEFAULT_POSITIONS)}${renderIndexLabel(index, DEFAULT_POSITIONS)}<circle cx="${DEFAULT_POSITIONS[index].x}" cy="${DEFAULT_POSITIONS[index].y}" r="21" fill="transparent" data-map-index="${index}" style="cursor:pointer"/>`;
  }).join('');

  document.getElementById('map-svg').innerHTML = svgMarkup;
  document.getElementById('arr-display').innerHTML = values.map((value, index) => {
    let className = 'arr-val';
    if (index === selectedIndex) className += ' hi-amber';
    else if (index === parentIndex) className += ' hi-blue';
    else if (index === leftChildIndex || index === rightChildIndex) className += ' hi-coral';
    return `<div class="arr-cell"><div class="arr-idx">[${index}]</div><div class="${className}">${value}</div></div>`;
  }).join('');

  const logElement = document.getElementById('map-log');
  if (selectedIndex < 0) {
    logElement.textContent = '노드를 클릭하면 인덱스 계산 과정을 보여줍니다.';
    return;
  }

  const parentText = selectedIndex === 0
    ? '없음 (루트)'
    : `인덱스 ${parentIndex} (값: ${values[parentIndex]}) → 공식: (${selectedIndex}-1)/2 = ${parentIndex}`;
  const leftChildText = leftChildIndex >= 0
    ? `인덱스 ${leftChildIndex} (값: ${values[leftChildIndex]}) → 공식: 2×${selectedIndex}+1 = ${leftChildIndex}`
    : '없음 (리프)';
  const rightChildText = rightChildIndex >= 0
    ? `인덱스 ${rightChildIndex} (값: ${values[rightChildIndex]}) → 공식: 2×${selectedIndex}+2 = ${rightChildIndex}`
    : '없음';

  logElement.innerHTML = `선택: 인덱스 <strong class="text-amber">${selectedIndex}</strong> (값 <strong class="text-amber">${values[selectedIndex]}</strong>) &nbsp;|&nbsp; <span class="text-blue">부모: ${parentText}</span><br><span class="text-coral">왼쪽 자식: ${leftChildText}</span> &nbsp;|&nbsp; <span class="text-coral">오른쪽 자식: ${rightChildText}</span>`;
}

export function renderProblemStep(steps, stepIndex) {
  const step = steps[stepIndex];

  document.getElementById('prob-arr').innerHTML = step.heap.map((value, index) => {
    const className = `arr-val${step.hi.includes(index) ? ' hi-green' : ''}`;
    return `<div class="arr-cell"><div class="arr-idx">[${index}]</div><div class="${className}">${value}</div></div>`;
  }).join('');

  document.getElementById('prob-log').textContent = step.log;
  document.getElementById('prob-prev').disabled = stepIndex === 0;
  document.getElementById('prob-next').disabled = stepIndex === steps.length - 1;

  const countBadge = document.getElementById('prob-count');
  setVisible(countBadge, stepIndex === steps.length - 1);
  if (stepIndex === steps.length - 1) {
    countBadge.textContent = `정답: ${step.cnt}회`;
  }
}

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) => {
      link.classList.toggle('active', link.getAttribute('href') === `#${currentSection}`);
    });
  }

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