(feat: tabs) Add tab divs, refactor card setup

Signature of resultsCard() changes to include a targetContainer, which
takes a JQuery HTMLElement (ie one returned by a selector)

src/ts/frontend.ts

@@ -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));
 
@@ -524,14 +529,22 @@ async function getResults():Promise<string>{
 		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>`);
+					<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">`);
+
 		// Roll the dice for this variant
 		for (let i = 1; i < maxDice; i++) {
 			let rsSetup = { numDice: i, diceOptions: { successCutOff: cutoff } };