refactor: more ResultProperties sig updating

src/ts/frontend.ts

@@ -126,8 +126,9 @@ function subsubTitle(text:string): string {
  *  - make number boxes
  */
 
-function rerollReport(rollstats: RollStats): string {
-	let rerollsChartId = `rerollsChart-${rollstats.numDice}`;
+function rerollReport(resultProperties: ResultProperties): string {
+	// TODO: this mixes structure and content, probably a good idea to separate it out
+	let rerollsChartId = `rerollsChart-${resultProperties.itemId()}`;
 	// Column structure
 	let output = `<div class="col" id="rerollCol">`;
 	// Heading
@@ -142,22 +143,22 @@ function rerollReport(rollstats: RollStats): string {
 	output += `<div class="row my-3 mx-auto">`;
 	output += `<div class="col alert alert-success">
 			<strong>Rerolled:</strong>
-			${rollstats.rerollCounts.true}
-			(${(rollstats.rerollCounts.true / rollstats.numRolls * 100).toFixed(2)} %)
+			${resultProperties.rollstats.rerollCounts.true}
+			(${(resultProperties.rollstats.rerollCounts.true / resultProperties.rollstats.numRolls * 100).toFixed(2)} %)
 			</div>`;
 	output += `<div class="col alert alert-warning">
 			<strong>Not rerolled:</strong>
-			${rollstats.rerollCounts.false}
-			(${(rollstats.rerollCounts.false / rollstats.numRolls * 100).toFixed(2)} %)
+			${resultProperties.rollstats.rerollCounts.false}
+			(${(resultProperties.rollstats.rerollCounts.false / resultProperties.rollstats.numRolls * 100).toFixed(2)} %)
 			</div>`
 	output += `</div>`
 	output += `</div>`
 	return output;
 }
 
-function outcomesReport(rollstats: RollStats): string {
-	let outcomesChartId = `outcomesChart-${rollstats.numDice}`;
-	let outcomesTableId = `outcomesTable-${rollstats.numDice}`;
+function outcomesReport(resultProperties: ResultProperties): string {
+	let outcomesChartId = `outcomesChart-${resultProperties.itemId()}`;
+	let outcomesTableId = `outcomesTable-${resultProperties.itemId()}`;
 	// Column structure
 	let output = `<div class="col" id="outcomesCol">`;
 	// Heading
@@ -174,9 +175,9 @@ function outcomesReport(rollstats: RollStats): string {
 	return output;
 }
 
-function outcomeBalancesReport(rollstats: RollStats): string {
-	let balanceChartId = `balanceChart-${rollstats.numDice}`;
-	let balanceTableId = `balanceTable-${rollstats.numDice}`;
+function outcomeBalancesReport(resultProperties: ResultProperties): string {
+	let balanceChartId = `balanceChart-${resultProperties.itemId()}`;
+	let balanceTableId = `balanceTable-${resultProperties.itemId()}`;
 	// Column structure
 	let output = `<div class="col" id="balancesCol">`;
 	// Heading
@@ -197,10 +198,11 @@ function outcomeBalancesReport(rollstats: RollStats): string {
  *
  * The more javascripty way of doing this would be a callback or a custom event (TODO?)
  */
-function generateCharts(rollstats: RollStats): void {
-	let rerollsChartId = `rerollsChart-${rollstats.numDice}`;
-	let outcomesChartId = `outcomesChart-${rollstats.numDice}`;
-	let balanceChartId = `balanceChart-${rollstats.numDice}`;
+function generateCharts(resultProperties: ResultProperties): void {
+	let itemId = resultProperties.itemId();
+	let rerollsChartId = `rerollsChart-${itemId}`;
+	let outcomesChartId = `outcomesChart-${itemId}`;
+	let balanceChartId = `balanceChart-${itemId}`;
 
 	/*
 	 * Rerolls
@@ -210,10 +212,10 @@ function generateCharts(rollstats: RollStats): void {
 	let rerollsChart = new Chart(rerollsCanvas, {
 		type: "doughnut",
 		data: {
-			labels: mapRerolledKeys(Object.keys(rollstats.rerollCounts)),
+			labels: mapRerolledKeys(Object.keys(resultProperties.rollstats.rerollCounts)),
 			datasets: [{
 				label: "Reroll Counts",
-				data: Object.values(rollstats.rerollCounts),
+				data: Object.values(resultProperties.rollstats.rerollCounts),
 				backgroundColor: ["#d1e7dd", "#fff3cd"],
 				//backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length),
 			}],
@@ -237,11 +239,11 @@ function generateCharts(rollstats: RollStats): void {
 	let outcomesChart = new Chart(outcomesCanvas, {
 		type: "bar",
 		data: {
-			labels: Object.keys(rollstats.outcomeCounts),
+			labels: Object.keys(resultProperties.rollstats.outcomeCounts),
 			datasets: [{
 				label: "Outcome Counts",
-				data: Object.values(rollstats.outcomeCounts),
-				backgroundColor: hexColours(Object.values(rollstats.outcomeCounts).length),
+				data: Object.values(resultProperties.rollstats.outcomeCounts),
+				backgroundColor: hexColours(Object.values(resultProperties.rollstats.outcomeCounts).length),
 			}],
 		},
 		options: barChartOptions,
@@ -251,13 +253,13 @@ function generateCharts(rollstats: RollStats): void {
 	 * Outcome Balances
 	 */
 
-	let bc = rollstats.balanceCounts;
+	let bc = resultProperties.rollstats.balanceCounts;
 	let keys = Object.keys(bc);
 	keys.sort(function(a: string, b: string){return Number(a) - Number(b)});
 	// sort values too
 	let values = [];
 	for (let i = 0; i < keys.length; i++) {
-		values.push(rollstats.balanceCounts[keys[i]]);
+		values.push(resultProperties.rollstats.balanceCounts[keys[i]]);
 	}
 
 	let balanceCanvas: any = $(`#${balanceChartId}`);
@@ -268,7 +270,7 @@ function generateCharts(rollstats: RollStats): void {
 			datasets: [{
 				label: "Outcome Balance Counts",
 				data: values,
-				backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length),
+				backgroundColor: hexColours(Object.values(resultProperties.rollstats.balanceCounts).length),
 			}],
 		},
 		options: barChartOptions,
@@ -281,22 +283,23 @@ function generateCharts(rollstats: RollStats): void {
  *
  * Also should be callback/event-driven. (TODO?)
  */
-function generateTables(rollstats: RollStats): void {
+function generateTables(resultProperties: ResultProperties): void {
+	let itemId = resultProperties.itemId();
 	/*
 	 * Outcomes
 	 */
-	let outcomesTableId = `outcomesTable-${rollstats.numDice}`;
+	let outcomesTableId = `outcomesTable-${itemId}`;
 
-	let oc = rollstats.outcomeCounts;
+	let oc = resultProperties.rollstats.outcomeCounts;
 	let okeys = Object.keys(oc);
 	for (var i = 0; i < okeys.length; i++) {
 		let tb = $(`#${outcomesTableId}`).find("tbody");
 		let outcome: Outcomes = okeys[i] as Outcomes;
-		let outcomeCount = rollstats.outcomeCounts[outcome];
+		let outcomeCount = resultProperties.rollstats.outcomeCounts[outcome];
 		let outcomePercent: string = "";
 		if (outcomeCount) {
 			// Needed to avoid TS2532:
-			outcomePercent = (outcomeCount / rollstats.numRolls * 100).toFixed(2);
+			outcomePercent = (outcomeCount / resultProperties.rollstats.numRolls * 100).toFixed(2);
 		}
 		tb.append(`<tr> <td>${outcome}</td>
 			  <td>${outcomeCount}</td>
@@ -307,16 +310,16 @@ function generateTables(rollstats: RollStats): void {
 	/*
 	 * Outcome Balance Counts
 	 */
-	let balanceTableId = `balanceTable-${rollstats.numDice}`;
+	let balanceTableId = `balanceTable-${itemId}`;
 
-	let bc = rollstats.balanceCounts;
+	let bc = resultProperties.rollstats.balanceCounts;
 	let keys = Object.keys(bc);
 	keys.sort(function(a: string, b: string){return Number(a) - Number(b)});
 	for (var i = 0; i < keys.length; i++) {
 		let tb = $(`#${balanceTableId}`).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>
+				<td>${resultProperties.rollstats.balanceCounts[keys[i]]}</td>
+				<td>${(resultProperties.rollstats.balanceCounts[keys[i]] / resultProperties.rollstats.numRolls * 100).toFixed(2)}</td>
 			</tr>`);
 	}
 
@@ -333,9 +336,9 @@ function numberWithCommas(x:number): string {
  * Give some info on the dice used to generate these results
  */
 
-function describeRolls(rollstats: RollStats): string {
+function describeRolls(resultsProperties: ResultProperties): string {
 	let output = subTitle("Description");
-	output += `<p>There were <strong>${rollstats.numDice}</strong> Asphodice rolled <strong>${numberWithCommas(rollstats.numRolls)}</strong> times.</p>`;
+	output += `<p>There were <strong>${resultsProperties.numDice}</strong> Asphodice rolled <strong>${numberWithCommas(resultsProperties.rollstats.numRolls)}</strong> times.</p>`;
 	return output;
 }
 
@@ -387,10 +390,10 @@ function resultsHeader(resultProperties: ResultProperties): string {
 function resultsBody(resultProperties: ResultProperties): string {
 	let resultsBodyId = `resultsBody-${resultProperties.numDice}`;
 	let resultsBody = `<div id="${resultsBodyId}" class="show row resultsToggle ${resultProperties.variantClass()}">`;
-	resultsBody += describeRolls(resultProperties.rollstats);
-	resultsBody += rerollReport(resultProperties.rollstats)
-			+ outcomesReport(resultProperties.rollstats)
-			+ outcomeBalancesReport(resultProperties.rollstats);
+	resultsBody += describeRolls(resultProperties);
+	resultsBody += rerollReport(resultProperties)
+			+ outcomesReport(resultProperties)
+			+ outcomeBalancesReport(resultProperties);
 	resultsBody += `</div>`;
 	return resultsBody;
 }
@@ -414,10 +417,10 @@ function addResults(resultProperties: ResultProperties): void {
 	// <canvas> element
 
 	// Tables
-	generateTables(resultProperties.rollstats);
+	generateTables(resultProperties);
 
 	// Charts
-	generateCharts(resultProperties.rollstats);
+	generateCharts(resultProperties);
 }
 
 /**