(FE) Modularise adding results card

src/ts/frontend.ts

@@ -285,47 +285,61 @@ function describeRolls(rollstats: RollStats): string {
 	return output;
 }
 
-function getResults():void {
-	// Disable 'roll' button (TODO: multiple sets of rolls)
-	$("#mainRoll").prop("disabled", true);
-	console.log("Getting results..."); // TODO: progress bar when we have multiple sets of rolls
-
-	$("#results").empty();
-	rollstats.doRolls();
-
-	$("#results").append(`<div class="card my-4">`);
+/**
+ * Set up results card that contains one set of RollStats results
+ */
+function resultsCard(rollstats: RollStats): JQuery<HTMLElement>{
+	// <div id="results"> is the general results div to append results to
+	// TODO: include class shortname in id (?)
+	$("#results").append(`<div class="card my-4" id="results-aspho-${rollstats.numDice}">`);
 	let resultsCard = $("#results").find("div.card");
 	resultsCard.append(`<div class="card-body">`);
-	let resultsCardBody = $("#results").find("div.card-body");
+	let resultsCardBody: JQuery<HTMLElement> = $("#results").find("div.card-body");
+	return resultsCardBody;
+}
 
+/**
+ * Set up results 'header' - class name (TODO) and number of dice rolled
+ */
 
+function resultsHeader(rollstats: RollStats): string {
+	// Use flexbox (d-flex) for LHS/RHS justification
 	let resultsTitle = `<div class="d-flex justify-content-between">`
-	resultsTitle += `<div class="">`
+	resultsTitle += `<div>`
 			+ bigTitle(`Asphodice Results
-					<small class="h4 text-muted">(<em><var>d=${rollstats.numDice}</var></em>)</small>`)
+					<small class="h4 text-muted">
+						(<var>d=${rollstats.numDice}</var>)
+					</small>`)
 			+ `</div>`;
-	resultsTitle += `<div class="">
+	resultsTitle += `<div>
 			<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#resultsBody" aria-expanded="true" aria-controls="collapse-resultsBody">(hide/show)</button>
 			</div>`
 	resultsTitle += `</div>`;
+	return resultsTitle;
+}
 
-	resultsCardBody.append(resultsTitle);
-	//resultsCardBody.append(bigTitle(`Asphodice Results (${rollstats.numDice})`));
-	//resultsCardBody.append(describeRolls(rollstats));
+/**
+ * Write out results 'body'. Set up in columns, the 'skeletons' of charts and tables are set up first,
+ * to be filled in afterwards
+ */
 
+function resultsBody(rollstats: RollStats): string {
 	let resultsBody = `<div id="resultsBody" class="show row resultsToggle">`;
 	resultsBody += describeRolls(rollstats);
 	resultsBody += rerollReport(rollstats) + outcomesReport(rollstats) + outcomeBalancesReport(rollstats);
 	resultsBody += `</div>`;
-	resultsCardBody.append(resultsBody);
+	return resultsBody;
+}
 
-	/*
-	resultsCardBody.append(`<div class="row">`);
-	resultsCardBody.append(rerollReport(rollstats));
-	resultsCardBody.append(outcomesReport(rollstats));
-	resultsCardBody.append(outcomeBalancesReport(rollstats));
-	resultsCardBody.append(`</div>`);
-       */
+/**
+ * Put the results together - card, head, body → fill charts and tables
+ */
+function addResults(rollstats: RollStats): void {
+	let resultsCardBody = resultsCard(rollstats);
+
+	resultsCardBody.append(resultsHeader(rollstats));
+
+	resultsCardBody.append(resultsBody(rollstats));
 
 	// Post-DOM-Construction generation
 	//
@@ -343,6 +357,17 @@ function getResults():void {
 }
 
 
+function getResults():void {
+	// Disable 'roll' button (TODO: multiple sets of rolls)
+	$("#mainRoll").prop("disabled", true);
+	console.log("Getting results..."); // TODO: progress bar when we have multiple sets of rolls
+
+	$("#results").empty();
+	rollstats.doRolls();
+	addResults(rollstats);
+}
+
+
 function setupHandlers(): void {
 	$("#mainRoll").click(getResults);
 }