dice-roller/src/ts/frontend.ts

import { RollStats } from "./rollstats"
import { Outcomes } from "./asphodice"

let rollstats = new RollStats();                                                                                    

function getResults():void {
	console.log("getting results");
	$("#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">
			     <thead><td>Balance</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>
			  	<td>${rollstats.balanceCounts[keys[i]]}</td>
				<td>${(rollstats.balanceCounts[keys[i]] / rollstats.numRolls * 100).toFixed(2)}</td>
			</tr>`);
	}
	$("#results").append(`</div>`);
	$("#results").append(`</div>`);
}


function setupHandlers(): void {
	console.log("adding event handler");
	$("#mainRoll").click(getResults);
}

document.addEventListener("DOMContentLoaded", setupHandlers);