get-config.js

// // The config for the DOM setup
// const domConfig = {
//     parts: {
//         bass: {
//             controller: {
//                 type: 'dom'
//             },
//             synthesizer: {
//                 type: 'dom'
//             },
//         },
//         drum: {
//             controller: {
//                 type: 'dom'
//             },
//             synthesizer: {
//                 type: 'dom'
//             },
//         },
//         chord: {
//             controller: {
//                 type: 'dom'
//             },
//             synthesizer: {
//                 type: 'dom'
//             },
//         },
//         lead: {
//             controller: {
//                 type: 'dom'
//             },
//             synthesizer: {
//                 type: 'dom'
//             },
//         },
//     },
//     transporter: {
//         type: 'dom'
//     },
// }

// // The config for the MIDI setup
// const midiConfig = {
//     parts: {
//         bass: {
//             controller: {
//                 type: 'midi',
//                 midi: {
//                     output: 'SequencerToBassController',
//                     input: 'BassControllerToSequencer'
//                 },
//             },
//             synthesizer: {
//                 type: 'midi',
//                 midi: {
//                     output: 'SequencerToBassSynth',
//                     channel: 1
//                 },
//             },
//         },
//         drum: {
//             controller: {
//                 type: 'midi',
//                 midi: {
//                     output: 'SequencerToDrumController',
//                     input: 'DrumControllerToSequencer'
//                 },
//             },
//             synthesizer: {
//                 type: 'midi',
//                 midi: {
//                     output: 'SequencerToDrumSynth',
//                     channel: 1
//                 },
//             },
//         },
//         chord: {
//             controller: {
//                 type: 'midi',
//                 midi: {
//                     output: 'SequencerToChordController',
//                     input: 'ChordControllerToSequencer'
//                 },
//             },
//             synthesizer: {
//                 type: 'midi',
//                 midi: {
//                     output: 'SequencerToChordSynth',
//                     channel: 1
//                 },
//             },
//         },
//         lead: {
//             controller: {
//                 type: 'midi',
//                 midi: {
//                     output: 'SequencerToLeadController',
//                     input: 'LeadControllerToSequencer'
//                 },
//             },
//             synthesizer: {
//                 type: 'midi',
//                 midi: {
//                     output: 'SequencerToLeadSynth',
//                     channel: 1
//                 },
//             },
//         },
//     },
//     transporter: {
//         type: 'midi',
//         midi: {
//             output: 'SequencerToTransporter',
//             input: 'TransporterToSequencer'
//         },
//     },
// }


import MIDI_ACCESS from './midi-access.js'
import PART_NAMES from './part-names.js'
import dm from './dm.js'

// Key for storing the config object in session storage
const SESSION_STORAGE_STRING = 'config'

// The types of controllers, synthesizers, and transporters
const CONTROLLER_TYPES = ['DOM', 'MIDI', /*'WebRTC'*/]
const SYNTHESIZER_TYPES = ['DOM', 'MIDI', /*'WebAudio'*/]
const TRANSPORTER_TYPES = ['DOM', 'MIDI', /*'WebRTC'*/]

/* -------------------------------------------------------------------------- */
/*                                GET PROBLEMS                                */
/* -------------------------------------------------------------------------- */

// Saves us from o(n*m) time complexity, delivering o(n+m) instead
// NOT THAT IT MATTERS WITH n=4 AND m=2||3
const LOWER_CASE_CONTROLLER_TYPES = CONTROLLER_TYPES.map(type => type.toLowerCase())
const LOWER_CASE_SYNTHESIZER_TYPES = SYNTHESIZER_TYPES.map(type => type.toLowerCase())
const LOWER_CASE_TRANSPORTER_TYPES = TRANSPORTER_TYPES.map(type => type.toLowerCase())

function getMidiPortProblems(parentName, portName, direction) {
    const problems = []

    if (!portName) {
        return [`The ${parentName} is missing its port name`]
    }

    const hasPort = Array.from(MIDI_ACCESS[direction].values()).some(port => port.name === portName)
    if (!hasPort) {
        return [`The ${parentName} port name was not found in ${direction}`]
    }

    return problems
}

function getDuplexMidiPortProblems(parentName, inputPortName, outputPortName) {
    const problems = []

    const inputProblems = getMidiPortProblems(`${parentName} midi input`, inputPortName, 'inputs')
    problems.push(...inputProblems)

    const outputProblems = getMidiPortProblems(`${parentName} midi output`, outputPortName, 'outputs')
    problems.push(...outputProblems)

    return problems
}

function getSimplexMidiPortProblems(parentName, outputPortName, channel) {
    const problems = []

    if (!outputPortName) {
        problems.push(`The ${parentName} is missing its output port name`)
    } else {
        const outputProblems = getMidiPortProblems(parentName, outputPortName, 'outputs')
        problems.push(...outputProblems)
    }

    if (!channel) {
        problems.push(`The ${parentName} is missing its output channel`)
    } else if (channel < 1 || channel > 16) {
        problems.push(`The ${parentName}'s channel out of range`)
    }

    return problems
}

function getControllerProblems(parentName, controllerConfig) {
    // All the problems with the controller we find
    const problems = []

    if (!controllerConfig) {
        // If there is no controller, add a problem but don't bother validating it
        return [`The ${parentName} has no config`]
    }

    // The controller type
    const { type } = controllerConfig

    if (!type) {
        // If there is no type, add a problem but don't bother validating it
        return [`The ${parentName} config has no has no type`]
    }

    if (!LOWER_CASE_CONTROLLER_TYPES.includes(type)) {
        // If the type is not valid, add a problem but don't bother validating it
        return [`The ${parentName} config has an invalid type`]
    }

    if (type === 'midi') {
        // If the controller is MIDI, but there is no MIDI access, add a problem
        if (!MIDI_ACCESS) {
            problems.push(`The ${parentName} config is type "MIDI" but there is no MIDI access`)
        } else {
            problems.push(...getDuplexMidiPortProblems(parentName, controllerConfig.midi.input, controllerConfig.midi.output))
        }
    }

    return problems
}

function getSynthesizerProblems(parentName, synthesizerConfig) {
    // All the problems with the synthesizer we find
    const problems = []

    if (!synthesizerConfig) {
        // If there is no synthesizer, add a problem but don't bother validating it
        return [`The ${parentName} has no config`]
    }

    // The synthesizer type
    const { type } = synthesizerConfig

    if (!type) {
        // If there is no type, add a problem but don't bother validating it
        return [`The ${parentName} config has no has type`]
    }

    if (!LOWER_CASE_SYNTHESIZER_TYPES.includes(type)) {
        // If the type is not valid, add a problem but don't bother validating it
        return [`The ${parentName} config has an invalid type`]
    }

    if (type === 'midi') {
        // If the synthesizer is MIDI, but there is no MIDI access, add a problem
        if (!MIDI_ACCESS) {
            problems.push(`The ${parentName} is type "MIDI" but there is no MIDI access`)
        } else {
            problems.push(...getSimplexMidiPortProblems(parentName, synthesizerConfig.midi.output, synthesizerConfig.midi.channel))
        }
    }

    return problems
}

function getPartProblems(partName, partConfig) {
    // All the problems with the part we find
    const problems = []

    if (!partConfig) {
        // If there is no part, add a problem but don't bother validating it
        return [`No ${partName} config`]
    }

    // The controller and synthesizer configs for the part
    const { controller, synthesizer } = partConfig

    problems.push(...getControllerProblems(`${partName} controller`, controller))
    problems.push(...getSynthesizerProblems(`${partName} synthesizer`, synthesizer))

    return problems
}

function getPartsProblems(partsConfig) {
    // All the problems with the parts we find
    const problems = []

    if (!partsConfig) {
        // If there are no parts, add a problem but don't bother validating them
        return ['No parts config']
    }

    // Validate each part
    for (const partName of PART_NAMES) {
        const partConfig = partsConfig[partName]
        problems.push(...getPartProblems(partName, partConfig))
    }

    return problems
}

function getTransporterProblems(transporterConfig) {
    // All the problems with the transporter we find
    const problems = []

    if (!transporterConfig) {
        // If there is no transporter, add a problem but don't bother validating it
        return ['No transporter config']
    }

    // The transporter type
    const { type } = transporterConfig

    if (!type) {
        // If there is no type, add a problem but don't bother validating it
        return ['No transporter type']
    }

    if (!LOWER_CASE_TRANSPORTER_TYPES.includes(type)) {
        // If the type is not valid, add a problem but don't bother validating it
        return ['Invalid transporter type']
    }

    if (type === 'midi') {
        // If the transporter is MIDI, but there is no MIDI access, add a problem
        if (!MIDI_ACCESS) {
            problems.push('The transporter is type "MIDI" but there is no MIDI access')
        } else {
            problems.push(...getDuplexMidiPortProblems('transporter', transporterConfig.midi.input, transporterConfig.midi.output))
        }
    }

    return problems
}

function getProblems(config) {
    // All the problems with the config we find
    const problems = []

    if (typeof config !== 'object' || Object.values(config).length === 0) {
        console.debug('No config')
        return
    }

    // Get the parts and transporter from the config
    const { parts, transporter } = config

    problems.push(...getPartsProblems(parts))
    problems.push(...getTransporterProblems(transporter))

    return problems
}

/* -------------------------------------------------------------------------- */
/*                           GET CONFIG FROM STORAGE                          */
/* -------------------------------------------------------------------------- */

function getConfigFromStorage() {
    // The config is stored in sessionStorage as a JSON string
    const configString = sessionStorage.getItem(SESSION_STORAGE_STRING)

    // If there is no config in storage, return null
    if (!configString) { return null }

    try {
        // Try to parse the config from storage
        const config = JSON.parse(configString)

        const problems = getProblems(config)

        // If there are problems with the config, log them and return null
        if (problems.length) {
            console.debug('Problems:', problems)
        } else {
            // The config is valid, so return it
            return config
        }
    } catch (error) {
        // If there was an error from parsing or validating the config, log the error
        console.error(error)
    }

    // The config was invalid, so remove it from storage and return null
    sessionStorage.removeItem(SESSION_STORAGE_STRING)
    return null
}

/* -------------------------------------------------------------------------- */
/*                            GET CONFIG FROM USER                            */
/* -------------------------------------------------------------------------- */
const SELECTORS = {
    CONFIG_FORM_ID: 'config-form',
    PART_CONFIG_CLASS: 'part-config',
    TRANSPORTER_CONFIG_ID: 'transporter-config',
    TYPE_DIV_CLASS: 'type-div',
    MIDI_DIV_CLASS: 'midi-div',
    MIDI_INPUT_SELECT_CLASS: 'midi-input-select',
    MIDI_OUTPUT_SELECT_CLASS: 'midi-output-select',
    REMEMBER_CHECKBOX_ID: 'remember-config',
}

function setUpRadioButtons(typeConfig, typeSpecificConfigsObject) {
    // The radio buttons for the type
    const radioButtons = Array.from(typeConfig.div.querySelectorAll('input[type="radio"]'))

    // Add event listeners to the radio buttons
    for (const radioButton of radioButtons) {
        // Make the divs for the specific types hidden or not based on the radio button value
        for (const [type, config] of Object.entries(typeSpecificConfigsObject)) {
            radioButton.addEventListener('change', () => {
                config.div.classList[radioButton.value === type ? 'remove' : 'add']('hidden')
            })
        }
    }
}

class TypeConfig {
    constructor(name, title, types) {
        // Used in render
        this.name = name
        this.title = title
        this.types = types

        // For the config
        this.inputs = {}
        this.div = null
    }

    render() {
        // The inputs and labels for the types
        const inputsAndLabels = this.types.map(type => {
            const inputId = `${this.name}-${type}`
            const value = type.toLowerCase()
            const input = dm('input', { id: inputId, type: 'radio', name: this.name, value })
            const label = dm('label', { for: inputId }, type)
            this.inputs[value] = input
            return [input, label]
        }).flat()

        const div = this.div = dm('div', { class: SELECTORS.TYPE_DIV_CLASS }, this.title, ...inputsAndLabels)

        return div
    }

    setUp() { }

    getConfig() {
        return this.div.querySelector('input[type="radio"]:checked')?.value || null
    }
}

class DuplexMidiConfig {
    constructor() {
        // For the config
        this.inputSelect = null
        this.outputSelect = null

        // To show/hide the div based on the type
        this.div = null
    }

    render() {
        const inputSelect = this.inputSelect = dm('select', { class: SELECTORS.MIDI_INPUT_SELECT_CLASS })
        const outputSelect = this.outputSelect = dm('select', { class: SELECTORS.MIDI_OUTPUT_SELECT_CLASS })
        const div = this.div = dm('div', {}, inputSelect, ' → Here → ', outputSelect)

        return div
    }

    setUp() { }

    getConfig() {
        return {
            input: this.inputSelect.value,
            output: this.outputSelect.value,
        }
    }
}

class SimplexMidiConfig {
    constructor() {
        // For the config
        this.select = null
        this.input = null

        // To show/hide the div based on the type
        this.div = null
    }

    render() {
        const select = this.select = dm('select', { class: SELECTORS.MIDI_OUTPUT_SELECT_CLASS })
        const input = this.input = dm('input', { type: 'number', name: 'channel', min: 1, max: 16, value: 1 })
        const div = this.div = dm('div', {}, select, ' on channel ', input)

        return div
    }

    setUp() { }

    getConfig() {
        return {
            output: this.select.value,
            channel: this.input.value,
        }
    }
}

class ControllerConfig {
    constructor(name) {
        this.typeConfig = new TypeConfig(`${name}-type`, 'Controller: ', CONTROLLER_TYPES)
        this.midiConfig = new DuplexMidiConfig()
    }

    render() {
        const typeDiv = this.typeConfig.render()
        const midiConfig = this.midiConfig.render()
        const div = this.div = dm('div', {}, typeDiv, midiConfig)

        return div
    }

    setUp() {
        setUpRadioButtons(this.typeConfig, { midi: this.midiConfig })
    }

    getConfig() {
        const config = {}

        const type = config.type = this.typeConfig.getConfig()

        if (type === 'midi') {
            config.midi = this.midiConfig.getConfig()
        }

        return config
    }
}

class SynthesizerConfig {
    constructor(name) {
        this.typeConfig = new TypeConfig(`${name}-type`, 'Synthesizer: ', SYNTHESIZER_TYPES)
        this.midiConfig = new SimplexMidiConfig()
    }

    render() {
        const typeDiv = this.typeConfig.render()
        const midiConfig = this.midiConfig.render()
        const div = dm('div', {}, typeDiv, midiConfig)

        return div
    }

    setUp() {
        setUpRadioButtons(this.typeConfig, { midi: this.midiConfig })
    }

    getConfig() {
        const config = {}

        const type = config.type = this.typeConfig.getConfig()

        if (type === 'midi') {
            config.midi = this.midiConfig.getConfig()
        }

        return config
    }
}

class PartConfig {
    constructor(name) {
        this.name = name

        this.controllerConfig = new ControllerConfig(`${name}-controller`)
        this.synthesizerConfig = new SynthesizerConfig(`${name}-synthesizer`)
    }

    render() {
        const legend = dm('legend', {}, this.name.toUpperCase())
        const controllerDiv = this.controllerConfig.render()
        const hr = dm('hr')
        const synthesizerDiv = this.synthesizerConfig.render()
        const fieldset = dm('fieldset', {}, legend, controllerDiv, hr, synthesizerDiv)

        return fieldset
    }

    setUp() {
        this.controllerConfig.setUp()
        this.synthesizerConfig.setUp()
    }

    getConfig() {
        return {
            controller: this.controllerConfig.getConfig(),
            synthesizer: this.synthesizerConfig.getConfig(),
        }
    }
}

class TransporterConfig {
    constructor() {
        this.typeConfig = new TypeConfig('transporter-type', 'Type: ', TRANSPORTER_TYPES)
        this.midiConfig = new DuplexMidiConfig()
    }

    render() {
        const legend = dm('legend', {}, 'TRANSPORTER')
        const typeDiv = this.typeConfig.render()
        const midiDiv = this.midiConfig.render()
        const fieldset = dm('fieldset', { id: SELECTORS.TRANSPORTER_CONFIG_ID }, legend, typeDiv, midiDiv)

        return fieldset
    }

    setUp() {
        setUpRadioButtons(this.typeConfig, { midi: this.midiConfig })
    }

    getConfig() {
        const config = {}

        const type = config.type = this.typeConfig.getConfig()

        if (type === 'midi') {
            config.midi = this.midiConfig.getConfig()
        }

        return config
    }
}

class ProblemDiv {
    constructor() {
        this.div = null
    }

    render() {
        const div = this.div = dm('div', { class: 'problem-div' })

        return div
    }

    setUp() { }

    addProblems(problems) {
        const div = this.div

        div.innerHTML = ''

        for (const problem of problems) {
            const p = dm('p', {}, problem)
            div.appendChild(p)
        }
    }
}

class MiscellaneousDiv {
    constructor() {
        this.refreshButton = null
        this.rememberCheckbox = null
        this.problemDiv = new ProblemDiv()
    }

    render() {
        const refreshButton = this.refreshButton = dm('button', { type: 'button' }, 'Refresh MIDI Ports')
        const rememberCheckbox = this.rememberCheckbox = dm('input', { type: 'checkbox', id: SELECTORS.REMEMBER_CHECKBOX_ID })
        const rememberLabel = dm('label', { for: SELECTORS.REMEMBER_CHECKBOX_ID }, 'Remember')
        const submitButton = dm('button', { type: 'submit' }, 'Submit')
        const problemDiv = this.problemDiv.render()
        const div = dm('div', {}, refreshButton, rememberCheckbox, rememberLabel, submitButton, problemDiv)

        return div
    }

    setUp() { }
}

class ConfigForm {
    constructor() {
        // The child elements of the form
        this.partConfigs = Object.fromEntries(PART_NAMES.map(name => [name, new PartConfig(name)]))
        this.transporterConfig = new TransporterConfig()
        this.miscellaneousDiv = new MiscellaneousDiv()

        // Used to show and attach event listener to
        this.form = null
    }

    render() {
        const partFieldsets = Object.values(this.partConfigs).map(partConfig => partConfig.render())
        const transporterFieldset = this.transporterConfig.render()
        const miscellaneousDiv = this.miscellaneousDiv.render()
        const form = this.form = dm('form', { id: SELECTORS.CONFIG_FORM_ID }, ...partFieldsets, transporterFieldset, miscellaneousDiv)

        return form
    }

    setUp() {
        // Set up the parts, transporter, and miscellaneous div
        for (const partConfig of Object.values(this.partConfigs)) {
            partConfig.setUp()
        }

        this.transporterConfig.setUp()

        this.miscellaneousDiv.refreshButton.addEventListener('mousedown', this.refreshMidi.bind(this))

        // Refresh the MIDI portions
        this.refreshMidi()

        // Click the first radio buttons
        // We do this after refreshing the MIDI ports so that the MIDI radio buttons are disabled if there is no MIDI access
        this.clickAllFirstRadioButtons()

        // Show the form
        this.form.classList.remove('hidden')
    }

    getConfig() {
        return {
            parts: Object.fromEntries(Object.entries(this.partConfigs).map(([name, partConfig]) => [name, partConfig.getConfig()])),
            transporter: this.transporterConfig.getConfig(),
        }
    }

    refreshMidi() {
        // The radio buttons for the MIDI type
        const midiTypeRadioButtons = Array.from(this.form.querySelectorAll('input[type="radio"][value="midi"]'))

        // Enable/disable the MIDI radio buttons
        for (const radioButton of midiTypeRadioButtons) {
            radioButton.disabled = !MIDI_ACCESS
        }

        // If there is no MIDI access, we can't do anything else
        if (!MIDI_ACCESS) {
            return
        }

        function populateMidiSelects(selector, direction) {
            // The selects we will be populating
            const selectElements = document.getElementsByClassName(selector)

            // The names of the MIDI ports for the given direction
            const portNames = Array.from(MIDI_ACCESS[direction].values()).map(port => port.name)

            // Populate the select elements
            for (const select of selectElements) {
                // If there is a currently selected port, we want to keep it selected
                const selectedPort = select.value || portNames[0]

                // Clear the select element's children
                select.innerHTML = ''

                // Add an option for each port
                for (const port of portNames) {
                    const option = dm('option', { value: port }, port)
                    select.appendChild(option)
                }

                // If the selected port is still available, select it
                if (portNames.includes(selectedPort)) {
                    select.value = selectedPort
                }
            }
        }

        // Populate the MIDI selects
        populateMidiSelects(SELECTORS.MIDI_INPUT_SELECT_CLASS, 'inputs')
        populateMidiSelects(SELECTORS.MIDI_OUTPUT_SELECT_CLASS, 'outputs')
    }

    clickAllFirstRadioButtons() {
        // The first radio buttons for everything
        const firstRadioButtons = Array.from(this.form.querySelectorAll('input[type="radio"]:enabled:first-of-type'))

        // Click all the first radio buttons
        for (const radioButton of firstRadioButtons) {
            radioButton.click()
        }
    }

    getPromise() {
        return new Promise(resolve => {
            this.form.addEventListener('submit', event => {
                // Prevent the form from submitting
                event.preventDefault()

                // Get the config from the form
                const config = this.getConfig()

                // Get the problems with the config
                const problems = getProblems(config)

                // Add the problems to the problem div
                this.miscellaneousDiv.problemDiv.addProblems(problems)

                // If there are problems, don't resolve the promise
                if (problems.length) {
                    return
                }

                // If the user wants to remember the config, save it to session storage
                if (this.miscellaneousDiv.rememberCheckbox.checked) {
                    sessionStorage.setItem(SESSION_STORAGE_STRING, JSON.stringify(config))
                }

                // Remove the form from the DOM
                this.form.remove()

                // Resolve the promise with the config
                resolve(config)
            })
        })
    }
}

async function getConfigFromUser() {
    // The form we will be working with
    const configForm = new ConfigForm()

    // Render the form and append it to the body
    document.body.append(configForm.render())

    // Set up the event listeners and refresh the MIDI ports
    configForm.setUp()

    // Get the config from the user
    const config = await configForm.getPromise()

    // Return the config
    return config
}

/* -------------------------------------------------------------------------- */
/*                                 GET CONFIG                                 */
/* -------------------------------------------------------------------------- */

export default async function getConfig() {
    // Get the config from storage if it exists
    const configFromStorage = getConfigFromStorage()

    // If the config exists in storage, return it
    if (configFromStorage) { return configFromStorage }

    console.debug('No valid config found in storage')

    // Otherwise, get the config from the user
    return await getConfigFromUser()
}