(feat: tabs) Set up tabs and content divs

src/ts/frontend.ts

@@ -504,10 +504,34 @@ async function getResults():Promise<string>{
 	let maxDice = 10;
 	let cutoffStart = 6;
 	let cutoffMax = 9;
+
+	/**
+	 * At present, add variants (success cutoffs) to different tabs
+	 * note: this may change to separating classes by tabs
+	 *
+	 * ref: https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
+	 */
+
+	// Add tab navigation container (<ul>) -- id: #resultTabs
+	let navId = "resultTabs";
+	$("#results").append(`<ul class="nav nav-tabs" id="${navId}" role="tablist"></ul>`);
+
+	// Add tab content container (<div>) -- id: #resultTabContent
+	let tabContentId = "resultTabContent"
+	$("#results").append(`<div class="tab-content" id="${tabContentId}">`)
+
 	for (let cutoff = cutoffStart; cutoff <= cutoffMax; cutoff++) {
 		let variantControlAdded = false;
 		// Start of cutoff, add navigation anchor for variant
 		$("#results").append(variantNavAnchor(cutoff));
+		// Add navigation for this variant (<li>)
+		// NB: first one gets 'active', otherwise it doesn't
+		let buttonClass = (cutoff === cutoffStart) ? "nav-link active" : "nav-link";
+		$(`#${navId}`).append(`<li class="nav-item" role="presentation">
+				     <button class="${buttonClass}" id="tab-nav-c${cutoff}"
+				     data-bs-toggle="tab" data-bs-target="#tab-content-c${cutoff}"
+				     type="button" role="tab">Cutoff ${cutoff}</button>
+				     </li>`);
 		// Roll the dice for this variant
 		for (let i = 1; i < maxDice; i++) {
 			let rsSetup = { numDice: i, diceOptions: { successCutOff: cutoff } };