kinklist/gear/gear.mjs

// Gear list JS
// @ts-check

/**
 * @typedef {{name: string, id: string, desc: string}} GearListItem
 *
 * @typedef {{name: string, id: string, values: GearListItem[]}} GearListSection
 *
 * @typedef {GearListSection[]} GearList
 */

/**
 * Fetches the gear.json to be parsed seperately
 * @returns {Promise<GearList>}
 */
async function getGearList() {
    try {
        const response = await fetch("/gear/gear.json");
        const data = await response.json();
        return data;
    } catch (error) {
        console.error("Error fetching JSON:", error);
        throw "Could not load gear.json";
    }
}

/**
 * @param {GearListItem} gear
 * @param {string} group
 * @returns {HTMLLIElement}
 */
function gearToElement(gear, group) {
    let li = document.createElement("li");
    li.setAttribute("id", `gl-${group}-${gear.id}`);
    li.setAttribute("class", "gl-item");
    let heading = document.createElement("h3");
    heading.setAttribute("class", "gl-item-name");
    heading.textContent = gear.name;
    li.appendChild(heading);
    let description = document.createElement("p");
    description.setAttribute("class", "gl-item-desc");
    description.textContent = gear.desc;
    li.appendChild(description);
    return li;
}

/**
 * @param {GearListSection} gear
 * @returns {HTMLLIElement[]}
 */
function gearListToList(gear) {
    let lis = [];
    for (const item of gear.values) {
        lis.push(gearToElement(item, gear.id));
    }
    return lis;
}

/**
 * @param {GearListSection} items
 * @returns {HTMLUListElement}
 */
function bondageItemsToUl(items) {
    let ul = document.createElement("ul");
    ul.setAttribute("id", `gl-${items.id}-list`);
    ul.setAttribute("class", "gl-item-list");
    for (const i of gearListToList(items)) {
        ul.appendChild(i);
    }
    return ul;
}

/**
 * @param {string} position
 * @returns {Promise<HTMLElement>}
 */
async function generateGearListArticle(position) {
    let list = await getGearList();

    let bondageItems = document.createElement("article");
    bondageItems.setAttribute("id", position);
    let heading = document.createElement("h2");
    heading.textContent = "Gear List";
    bondageItems.appendChild(heading);

    let divider = document.createElement("hr");
    divider.setAttribute("class", "gl-divider");
    bondageItems.appendChild(divider);

    for (const section of list) {
        let listSection = buildSection(section);
        bondageItems.appendChild(listSection);

        let divider = document.createElement("hr");
        divider.setAttribute("class", "gl-divider");
        bondageItems.appendChild(divider);
    }

    return bondageItems;
}

/**
 * @param {GearListSection} items
 * @returns {HTMLElement}
 */
function buildSection(items) {
    let section = document.createElement("article");
    section.setAttribute("id", `gl-${items.id}-body`);
    let heading = document.createElement("h3");
    heading.textContent = items.name;
    section.appendChild(heading);

    let ul = bondageItemsToUl(items);

    section.appendChild(ul);
    return section;
}

/**
 * @param {string} position
 * @returns void
 */
export async function attachGearList(position) {
    document
        .getElementById(position)
        ?.replaceWith(await generateGearListArticle(position));
}