bfs_network.js

import {
  BFS_TRAVERSAL_STEPS,
  GRAPH_BUILD_STEPS,
  NETWORK_COUNT_STEPS,
} from './bfs_network_data.js';
import {
  renderGraphBuild,
  renderNetworkCount,
  renderTraversal,
  setStepButtons,
  setupNavScrollSpy,
  updateStepper,
} from './bfs_network_render.js';

function createStepper(config) {
  let stepIndex = 0;

  function render() {
    config.render(config.steps[stepIndex]);
    setStepButtons({
      prevId: config.prevId,
      nextId: config.nextId,
      stepIndex,
      lastStep: config.steps.length - 1,
    });
    updateStepper(config.stepperId, stepIndex);
  }

  document.getElementById(config.prevId).addEventListener('click', () => {
    if (stepIndex > 0) {
      stepIndex -= 1;
      render();
    }
  });

  document.getElementById(config.nextId).addEventListener('click', () => {
    if (stepIndex < config.steps.length - 1) {
      stepIndex += 1;
      render();
    }
  });

  document.getElementById(config.resetId).addEventListener('click', () => {
    stepIndex = 0;
    render();
  });

  render();

  return { render };
}

const buildStepper = createStepper({
  steps: GRAPH_BUILD_STEPS,
  prevId: 'build-prev',
  nextId: 'build-next',
  resetId: 'build-reset',
  stepperId: 'build-steps',
  render: renderGraphBuild,
});

const bfsStepper = createStepper({
  steps: BFS_TRAVERSAL_STEPS,
  prevId: 'bfs-prev',
  nextId: 'bfs-next',
  resetId: 'bfs-reset',
  stepperId: 'bfs-steps',
  render: renderTraversal,
});

const countStepper = createStepper({
  steps: NETWORK_COUNT_STEPS,
  prevId: 'count-prev',
  nextId: 'count-next',
  resetId: 'count-reset',
  stepperId: 'count-steps',
  render: renderNetworkCount,
});

document.addEventListener('themechange', () => {
  buildStepper.render();
  bfsStepper.render();
  countStepper.render();
});

setupNavScrollSpy();