heap_lecture.js

import {
  DEFAULT_POSITIONS,
  DELETE_SIMULATION,
  INSERT_POSITIONS,
  INSERT_SIMULATION,
  PROBLEM_SIMULATION,
} from './heap_lecture_data.js';
import {
  renderMap,
  renderProblemStep,
  renderTreeStep,
  setupNavScrollSpy,
} from './heap_lecture_render.js';

function createStepController(config) {
  let stepIndex = 0;

  function render() {
    config.render(stepIndex);
  }

  function next() {
    if (stepIndex < config.lastStep) {
      stepIndex += 1;
      render();
    }
  }

  function prev() {
    if (stepIndex > 0) {
      stepIndex -= 1;
      render();
    }
  }

  function reset() {
    stepIndex = 0;
    render();
  }

  document.getElementById(config.prevId).addEventListener('click', prev);
  document.getElementById(config.nextId).addEventListener('click', next);
  document.getElementById(config.resetId).addEventListener('click', reset);

  render();

  return { render };
}

function setupInsertSimulation() {
  return createStepController({
    prevId: 'ins-prev',
    nextId: 'ins-next',
    resetId: 'ins-reset',
    lastStep: INSERT_SIMULATION.steps.length - 1,
    render: (stepIndex) => renderTreeStep({
      svgId: 'ins-svg',
      logId: 'ins-log',
      prevId: 'ins-prev',
      nextId: 'ins-next',
      badgeId: 'ins-badge',
      stepContainerId: 'ins-steps',
      positions: INSERT_POSITIONS,
      simulation: INSERT_SIMULATION,
      stepIndex,
    }),
  });
}

function setupDeleteSimulation() {
  return createStepController({
    prevId: 'del-prev',
    nextId: 'del-next',
    resetId: 'del-reset',
    lastStep: DELETE_SIMULATION.steps.length - 1,
    render: (stepIndex) => renderTreeStep({
      svgId: 'del-svg',
      logId: 'del-log',
      prevId: 'del-prev',
      nextId: 'del-next',
      badgeId: 'del-badge',
      stepContainerId: 'del-steps',
      positions: DEFAULT_POSITIONS,
      simulation: DELETE_SIMULATION,
      stepIndex,
    }),
  });
}

function setupProblemSimulation() {
  return createStepController({
    prevId: 'prob-prev',
    nextId: 'prob-next',
    resetId: 'prob-reset',
    lastStep: PROBLEM_SIMULATION.length - 1,
    render: (stepIndex) => renderProblemStep(PROBLEM_SIMULATION, stepIndex),
  });
}

function setupMapSimulation() {
  let selectedIndex = -1;
  const mapSvg = document.getElementById('map-svg');

  function render() {
    renderMap(selectedIndex);
  }

  mapSvg.addEventListener('click', (event) => {
    const target = event.target.closest('[data-map-index]');
    if (!target) {
      return;
    }

    const nextIndex = Number(target.dataset.mapIndex);
    selectedIndex = selectedIndex === nextIndex ? -1 : nextIndex;
    render();
  });

  render();

  return { render };
}

const insertSimulation = setupInsertSimulation();
const deleteSimulation = setupDeleteSimulation();
const mapSimulation = setupMapSimulation();
const problemSimulation = setupProblemSimulation();

document.addEventListener('themechange', () => {
  insertSimulation.render();
  deleteSimulation.render();
  mapSimulation.render();
  problemSimulation.render();
});

setupNavScrollSpy();