feat: add buttons to show/hide variants en masse

src/ts/frontend.ts

@@ -455,6 +455,20 @@ function resultsControlCard(): string {
 	return resultsControl
 }
 
+/**
+ * Add control to show/hide all of particular variant to control Card
+ */
+function addVariantControl(controlCard: JQuery<HTMLElement>,
+			   resultProperties: ResultProperties): void {
+	let variantClass = resultProperties.variantClass();
+	controlCard.append(`<button id="variantButton-${variantClass}"
+			   class="btn btn-primary" type="button"
+			   data-bs-toggle="collapse" data-bs-target=".${variantClass}"
+			   aria-expanded="true" aria-controls="resultsToggleVariant">
+				Hide / Show Variant (${resultProperties.diceVariant})
+			   </button>
+			   `);
+}
 
 function getResults():void {
 	// Disable 'roll' button
@@ -464,11 +478,14 @@ function getResults():void {
 	$("#results").empty();
 
 	$("#results").append(resultsControlCard);
+	let controlCardBody = $("#results").find("#resultsControl .card-body");
+
 
 	let maxDice = 10;
 	let cutoffStart = 6;
 	let cutoffMax = 9;
 	for (let cutoff = cutoffStart; cutoff <= cutoffMax; cutoff++) {
+		let variantControlAdded = false;
 		for (let i = 1; i < maxDice; i++) {
 			let rsSetup = { numDice: i, diceOptions: { successCutOff: cutoff } };
 			let rollstats = new RollStats(rsSetup);
@@ -480,6 +497,11 @@ function getResults():void {
 			});
 			rollstats.doRolls();
 			addResults(resultProperties);
+			// Add control for variant if it doesn't exist
+			if (!variantControlAdded) {
+				addVariantControl(controlCardBody, resultProperties);
+				variantControlAdded = true;
+			}
 			$("#resultsProgress").width(`${i/maxDice*100}%`);
 			$("#resultsProgress").text(`${i/maxDice*100}%`);
 		}