127 lines
3.2 KiB
JavaScript
127 lines
3.2 KiB
JavaScript
// Gear list JS
|
|
// @ts-check
|
|
|
|
/**
|
|
* @typedef {{name: string, id: string, desc: string}} GearListItem
|
|
*
|
|
* @typedef {{name: string, id: string, values: GearListItem[]}} GearListSection
|
|
*
|
|
* @typedef {{bondage: 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 Object.values(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));
|
|
}
|