v0.3.5 Add tabbed navigation for dice results

Also, hide status / control box once done as we no longer need a global
status box post-rolls (it might come back for stats?)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "asphodice",
-	"version": "0.3.3",
+	"version": "0.3.5",
 	"description": "Dice roller for Asphodel. Includes statistical information",
 	"devDependencies": {
 		"@types/chai": "^4.2.14",

src/ts/frontend.ts

@@ -102,21 +102,21 @@ function buildCharts(): string {
  * h2 wrapper
  */
 function bigTitle(text:string): string {
-	return `<h2 class="card-title">${text}</h2>`;
+	return `<h3 class="card-title">${text}</h2>`;
 }
 
 /**
  * h3 wrapper
  */
 function subTitle(text:string): string {
-	return `<h3 class="card-subtitle my-1">${text}</h3>`;
+	return `<h4 class="card-subtitle my-1">${text}</h3>`;
 }
 
 /**
  * h4 wrapper
  */
 function subsubTitle(text:string): string {
-	return `<h4 class="card-subtitle my-1">${text}</h4>`;
+	return `<h5 class="card-subtitle my-1">${text}</h4>`;
 }
 
 /**
@@ -353,13 +353,15 @@ function describeRolls(resultsProperties: ResultProperties): string {
 /**
  * Set up results card that contains one set of RollStats results
  */
-function resultsCard(resultsProperties: ResultProperties): JQuery<HTMLElement>{
+function resultsCard(resultsProperties: ResultProperties,
+		     targetContainer: JQuery<HTMLElement>)
+		     : JQuery<HTMLElement> {
 	// <div id="results"> is the general results div to append results to
 	// TODO: include class shortname in id (?)
 	let cardId = `results-${resultsProperties.itemId()}`;
 
-	$("#results").append(`<div class="card my-4" id="${cardId}">`);
-	let resultsCard = $("#results").find(`#${cardId}`);
+	targetContainer.append(`<div class="card my-4" id="${cardId}">`);
+	let resultsCard = targetContainer.find(`#${cardId}`);
 	resultsCard.append(`<div class="card-body">`);
 	let resultsCardBody: JQuery<HTMLElement> = $(`#${cardId}`).find("div.card-body");
 	return resultsCardBody;
@@ -411,7 +413,10 @@ function resultsBody(resultProperties: ResultProperties): string {
  * Put the results together - card, head, body → fill charts and tables
  */
 function addResults(resultProperties: ResultProperties): void {
-	let resultsCardBody = resultsCard(resultProperties);
+	console.log(`#tabContent-${resultProperties.diceVariant}`);
+	let targetContainer: JQuery<HTMLElement> = $(`#tabContent-${resultProperties.diceVariant}`);
+
+	let resultsCardBody = resultsCard(resultProperties, targetContainer);
 
 	resultsCardBody.append(resultsHeader(resultProperties));
 
@@ -436,7 +441,7 @@ function addResults(resultProperties: ResultProperties): void {
  * Card with status and hide-show all control
  */
 function resultsControlCard(): string {
-	let resultsControl = `<div id="resultsControl" class="card my-3 mx-2 border border-2 border-info">`;
+	let resultsControl = `<div id="resultsControl" class="card my-2 mx-2 border border-2 border-info">`;
 	resultsControl += `<h2 class="card-title mx-3 my-2">Results</h5>`;
 
 	resultsControl += `<div class="progress mx-3">
@@ -504,10 +509,49 @@ 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 my-3" 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="#tabContent-c${cutoff}"
+					type="button" role="tab">Cutoff ${cutoff}</button>
+					</li>`);
+
+		// Add tab container for this variant (<div>) -- id: #tabContent-c${cutoff}
+		// NB: first one also gets "show active" classes similar to above
+		let tabClass = (cutoff === cutoffStart) ? "tab-pane fade show active" : "tab-pane fade";
+		$(`#${tabContentId}`).append(`<div class="${tabClass}"
+						id="tabContent-c${cutoff}" role="tabpanel">`);
+
+		// Add title & hide/show all for this variant
+		$(`#tabContent-c${cutoff}`).append(`<div class="d-flex justify-content-between">
+				   ${bigTitle(`Results Set for Cutoff ${cutoff}`)}
+						<button id="variantButton-${cutoff}"
+					   class="btn btn-primary" type="button"
+					   data-bs-toggle="collapse" data-bs-target=".asphodice-c${cutoff}"
+					   aria-expanded="true" aria-controls="resultsToggleVariant">
+						Hide / Show All (c=${cutoff})
+					   </button>
+						   </div>`);
+
 		// Roll the dice for this variant
 		for (let i = 1; i < maxDice; i++) {
 			let rsSetup = { numDice: i, diceOptions: { successCutOff: cutoff } };
@@ -520,17 +564,10 @@ async function getResults():Promise<string>{
 			});
 			rollstats.doRolls();
 			addResults(resultProperties);
-			// Add control for variant if it doesn't exist
-			if (!variantControlAdded) {
-				addVariantControl(controlCardBody, resultProperties);
-				variantControlAdded = true;
-
-				// also add navigation to that anchor on the control card navigation section
-				controlCardNav.append(` <a class="btn btn-primary" href="#variant-c${String(cutoff)}">Jump to ${resultProperties.diceVariant}</a> `);
 
-			}
+			// Update progress
 			numDone++;
-			let progress = ((numDone) / ( maxDice * cutoffMax ) * 100).toFixed(2);
+			let progress = ((numDone) / ( (maxDice+2) * (cutoffMax-cutoffStart) ) * 100).toFixed(2);
 			$("#resultsProgress").width(`${progress}%`);
 			$("#resultsProgress").text(`${progress}%`);
 			await(sleep(50));
@@ -539,6 +576,11 @@ async function getResults():Promise<string>{
 	console.log("Results done!");
 	$("#resultsProgress").width("100%");
 	$("#resultsProgress").text("100%");
+
+	await(sleep(3000))
+	$("#resultsControl").hide(500);
+
+
 	return "Done";
 }