Add preamble describing rolls

src/ts/frontend.ts

@@ -250,16 +250,39 @@ function generateTables(rollstats: RollStats): void {
 
 }
 
+/**
+ * For pretty-printing. See https://stackoverflow.com/a/2901298
+ */
+function numberWithCommas(x:number): string {
+	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+/**
+ * Give some info on the dice used to generate these results
+ */
+
+function describeRolls(rollstats: RollStats): string {
+	let output = subTitle("Description");
+	output += `<p>There were <strong>${rollstats.numDice}</strong> Asphodice rolled <strong>${numberWithCommas(rollstats.numRolls)}</strong> times.</p>`;
+	return output;
+}
+
 function getResults():void {
-	console.log("getting results");
+	// 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">`);
 	let resultsCard = $("#results").find("div.card");
 	resultsCard.append(`<div class="card-body">`);
 	let resultsCardBody = $("#results").find("div.card-body");
 
+
 	resultsCardBody.append(bigTitle("Asphodice Results"));
+	resultsCardBody.append(describeRolls(rollstats));
 	resultsCardBody.append(rerollReport(rollstats));
 	resultsCardBody.append(outcomesReport(rollstats));
 	resultsCardBody.append(outcomeBalancesReport(rollstats));
@@ -277,12 +300,10 @@ function getResults():void {
 
 	// Charts
 	generateCharts(rollstats);
-
 }
 
 
 function setupHandlers(): void {
-	console.log("adding event handler");
 	$("#mainRoll").click(getResults);
 }