script.js

const BPM = 120;
const STEPS = 8;

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let isPlaying = false;
let intervalId = null;
let currentStep = 0;
let playDirection = 1; // 1 for forward, -1 for backward
const rows = []; // {rowEl, loadBtn, fileInput, buffer, enabled, checkboxes}
const reverseCheckboxes = []; // checkboxes for the first row to reverse playhead

document.addEventListener('DOMContentLoaded', init);

function init() {
    // Separate processing for the header row and sample rows
    const allRows = Array.from(document.querySelectorAll('.sequencer .row'));

    allRows.forEach(rowEl => {
        if (rowEl.classList.contains('header')) {
            const grid = rowEl.querySelector('.grid');
            reverseCheckboxes.push(...Array.from(grid.querySelectorAll('input[type="checkbox"]')));
        } else if (!rowEl.classList.contains('playhead-row')) {
            const loadBtn = rowEl.querySelector('.load-btn');
            const grid = rowEl.querySelector('.grid');
            const checkboxes = Array.from(grid.querySelectorAll('input[type="checkbox"]'));
            // create hidden file input for this row
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = 'audio/*';
            fileInput.style.display = 'none';
            document.body.appendChild(fileInput);
            const row = {
                rowEl, loadBtn, fileInput, buffer: null, enabled: false, checkboxes
            };
            rows.push(row);

            // clicking load button opens file picker if no sample, otherwise toggles enabled state
            loadBtn.addEventListener('click', () => {
                if (!row.buffer) {
                    fileInput.click();
                } else {
                    toggleRowEnabled(row);
                }
            });

            fileInput.addEventListener('change', async (e) => {
                const f = e.target.files && e.target.files[0];
                if (!f) return;
                const arrayBuffer = await f.arrayBuffer();
                audioCtx.decodeAudioData(arrayBuffer).then(decoded => {
                    row.buffer = decoded;
                    // mark UI: show filename in label and visually mark loadBtn active
                    const label = rowEl.querySelector('.label');
                    label.textContent = f.name;
                    row.loadBtn.classList.add('has-sample');
                    // enable the row by default after loading
                    setRowEnabled(row, true);
                }).catch(err => {
                    console.error('Decode error', err);
                });
                // clear input value so same file can be re-selected later
                fileInput.value = '';
            });
        }
    });

    // transport buttons
    const playBtn = document.querySelector('.btn.play');
    const stopBtn = document.querySelector('.btn.stop');

    playBtn.addEventListener('click', startSequencer);
    stopBtn.addEventListener('click', stopSequencer);

    // make visual spans focusable for keyboard toggle (space/enter)
    document.querySelectorAll('.step .visual').forEach(v => {
        v.tabIndex = 0;
        v.addEventListener('keydown', e => {
            if (e.key === ' ' || e.key === 'Enter') {
                e.preventDefault();
                const cb = v.parentElement.querySelector('input[type="checkbox"]');
                cb.checked = !cb.checked;
            }
        });
    });
}

function toggleRowEnabled(row) {
    setRowEnabled(row, !row.enabled);
}
function setRowEnabled(row, val) {
    row.enabled = !!val;
    if (row.enabled) {
        row.rowEl.classList.add('enabled');
        row.loadBtn.setAttribute('aria-pressed', 'true');
    } else {
        row.rowEl.classList.remove('enabled');
        row.loadBtn.setAttribute('aria-pressed', 'false');
    }
}

/* Sequencer */

function startSequencer() {
    if (isPlaying) return;
    // resume audio context on user gesture if needed
    if (audioCtx.state === 'suspended') audioCtx.resume();
    isPlaying = true;
    // compute step interval: assume 8 steps = eighth notes -> step = 60/BPM/2
    const stepSec = (60 / BPM) / 2;
    intervalId = setInterval(stepTick, stepSec * 1000);
    // ensure immediate step visual update
    currentStep = 0;
    updatePlayheadUI(currentStep);
}

function stopSequencer() {
    if (!isPlaying) return;
    isPlaying = false;
    clearInterval(intervalId);
    intervalId = null;
    // clear playhead highlight
    updatePlayheadUI(-1);
    currentStep = 0;
    playDirection = 1; // Reset play direction to forward
}

function stepTick() {
    // Check for reverse trigger in the header row
    if (reverseCheckboxes[currentStep] && reverseCheckboxes[currentStep].checked) {
        playDirection *= -1; // Reverse direction
    }

    // play sounds for current step
    rows.forEach(row => {
        if (!row.enabled) return;
        if (!row.buffer) return;
        const cb = row.checkboxes[currentStep];
        if (cb && cb.checked) {
            playBuffer(row.buffer);
        }
    });
    // animate playhead
    updatePlayheadUI(currentStep);

    // Update currentStep based on playDirection
    currentStep += playDirection;
    if (currentStep < 0) {
        currentStep = STEPS - 1;
    } else if (currentStep >= STEPS) {
        currentStep = 0;
    }
}

function playBuffer(buffer) {
    const src = audioCtx.createBufferSource();
    src.buffer = buffer;
    // simple gain envelope to avoid clicks
    const gain = audioCtx.createGain();
    gain.gain.value = 1;
    src.connect(gain).connect(audioCtx.destination);
    src.start();
    // cleanup
    src.onended = () => {
        src.disconnect();
        gain.disconnect();
    };
}

/* Playhead UI */
function updatePlayheadUI(stepIndex) {
    const dots = Array.from(document.querySelectorAll('.playhead .dot'));
    dots.forEach((d, i) => {
        if (i === stepIndex) d.classList.add('active');
        else d.classList.remove('active');
    });
}