Add quick-and-dirty FE

Emphasis on the dirty, not so much 'quick' ! This shows select outputs
from the default Asphodice class:
 - rerolls
 - outcome balance
 - outcomes

This information is presented in a Bootstrap card:

https://getbootstrap.com/docs/5.0/components/card/

src/html/index.html

@@ -20,7 +20,7 @@
 			<label for="numRolls">Number of Rolls</label><br />
 			<div class="input-group mb-3">
 				<span class="input-group-text" id="basic-addon-3">Roll</span>
-				<input type="number" class="form-control" id="numRolls" placeholder="100000" aria-describedby="basic-addon3">
+				<input type="number" class="form-control" id="numRolls" placeholder="100000" aria-describedby="basic-addon3" disabled>
 				<span class="input-group-text">times</span>
 			</div>
 		</form>

src/ts/frontend.ts

@@ -8,20 +8,31 @@ function getResults():void {
 	$("#results").empty();
 	rollstats.doRolls();
 	$("#results").append(`<div class="card my-4">`);
-	$("#results").append(`<div class="card-body">`);
-	$("#results").append(`<p>
-			     	<strong>Rerolled:</strong> ${rollstats.rerollCounts.true} <br/>
-				<strong>Not rerolled:</strong> ${rollstats.rerollCounts.false}
-			     </p>`);
-	$("#results").append(`<table class="table" id="balanceTable">
+	let resultsCard = $("#results").find("div.card");
+	resultsCard.append(`<div class="card-body">`);
+	let resultsCardBody = $("#results").find("div.card-body");
+	resultsCardBody.append(`<h2 class="card-title">Asphodice Results</h2>`);
+	resultsCardBody.append(`<h3 class="card-subtitle">Rerolls</h3>`);
+	resultsCardBody.append(`<div class="row my-3 mx-auto">
+			       <div class="col alert alert-success"><strong>Rerolled:</strong> ${rollstats.rerollCounts.true} (${(rollstats.rerollCounts.true / rollstats.numRolls * 100).toFixed(2)} %)</div>
+				<div class="col alert alert-warning"><strong>Not rerolled:</strong> ${rollstats.rerollCounts.false} (${(rollstats.rerollCounts.false / rollstats.numRolls * 100).toFixed(2)} %)</div>
+			     </div>`);
+
+	resultsCardBody.append(`<h3 class="card-subtitle">Outcome Balances</h3>`);
+	resultsCardBody.append(`<table class="table table-striped" id="balanceTable">
 			     <thead><td>Balance</td> <td>Count</td> <td>Percentage</td></thead>
 			     <tbody></tbody>
 			     </table>`);
-	// 
+
+	resultsCardBody.append(`<h3 class="card-subtitle">Outcomes</h3>`);
+	resultsCardBody.append(`<table class="table table-striped" id="outcomeTable">
+			     <thead><td>Outcome</td> <td>Count</td> <td>Percentage</td></thead>
+			     <tbody></tbody>
+			     </table>`);
+
 	let bc = rollstats.balanceCounts;
 	let keys = Object.keys(bc);
 	keys.sort(function(a: string, b: string){return Number(a) - Number(b)});
-	//for (let balance in rollstats.balanceCounts) {
 	for (var i = 0; i < keys.length; i++) {
 		let tb = $("#balanceTable").find("tbody");
 		tb.append(`<tr>	<td>${keys[i]}</td>
@@ -29,8 +40,19 @@ function getResults():void {
 				<td>${(rollstats.balanceCounts[keys[i]] / rollstats.numRolls * 100).toFixed(2)}</td>
 			</tr>`);
 	}
-	$("#results").append(`</div>`);
-	$("#results").append(`</div>`);
+
+	let oc = rollstats.outcomeCounts;
+	let okeys = Object.keys(oc);
+	for (var i = 0; i < okeys.length; i++) {
+		let tb = $("#outcomeTable").find("tbody");
+		let outcome: Outcomes = okeys[i];
+		let outcomeCount = rollstats.outcomeCounts[outcome];
+		let outcomePercent = (outcomeCount / rollstats.numRolls * 100).toFixed(2);
+		tb.append(`<tr> <td>${outcome}</td>
+			  <td>${outcomeCount}</td>
+			  <td>${outcomePercent}</td>
+			  </tr>`);
+	}
 }