(FE) Display in 3 columns

src/ts/frontend.ts

@@ -82,9 +82,12 @@ function subsubTitle(text:string): string {
  */
 
 function rerollReport(rollstats: RollStats): string {
-	let output = subTitle("Rerolls");
+	// Column structure
+	let output = `<div class="col" id="rerollCol">`;
+	// Heading
+	output += subTitle("Rerolls");
 	// Preamble (ie it looks super confusing)
-	output += "<p>This is super confusing because the colours are swapped on the legend and the chart, then the data below swaps back.</p>";
+	//output += "<p>This is super confusing because the colours are swapped on the legend and the chart, then the data below swaps back.</p>";
 	// Chart
 	output += `<canvas id="rerollsChart"></canvas>`
 
@@ -102,11 +105,15 @@ function rerollReport(rollstats: RollStats): string {
 			(${(rollstats.rerollCounts.false / rollstats.numRolls * 100).toFixed(2)} %)
 			</div>`
 	output += `</div>`
+	output += `</div>`
 	return output;
 }
 
 function outcomesReport(rollstats: RollStats): string {
-	let output = subTitle("Outcomes");
+	// Column structure
+	let output = `<div class="col" id="outcomesCol">`;
+	// Heading
+	output += subTitle("Outcomes");
 	// Preamble
 
 	// Chart
@@ -114,11 +121,16 @@ function outcomesReport(rollstats: RollStats): string {
 
 	// Table
 	output += makeTableSkeleton("outcomeTable", ["Outcome", "Count", "Percentage"]);
+
+	output += `</div>`;
 	return output;
 }
 
 function outcomeBalancesReport(rollstats: RollStats): string {
-	let output = subTitle("Outcome Balances");
+	// Column structure
+	let output = `<div class="col" id="balancesCol">`;
+	// Heading
+	output += subTitle("Outcome Balances");
 	// Preamble
 
 	// Chart
@@ -126,6 +138,7 @@ function outcomeBalancesReport(rollstats: RollStats): string {
 
 	// Table
 	output += makeTableSkeleton("balanceTable", ["Balance", "Count", "Percentage"]);
+	output += `</div>`;
 	return output;
 }
 
@@ -287,9 +300,19 @@ function getResults():void {
 
 	resultsCardBody.append(bigTitle("Asphodice Results"));
 	resultsCardBody.append(describeRolls(rollstats));
+
+	let resultsBody = `<div class="row">`;
+	resultsBody += rerollReport(rollstats) + outcomesReport(rollstats) + outcomeBalancesReport(rollstats);
+	resultsBody += `</div>`;
+	resultsCardBody.append(resultsBody);
+
+	/*
+	resultsCardBody.append(`<div class="row">`);
 	resultsCardBody.append(rerollReport(rollstats));
 	resultsCardBody.append(outcomesReport(rollstats));
 	resultsCardBody.append(outcomeBalancesReport(rollstats));
+	resultsCardBody.append(`</div>`);
+       */
 
 	// Post-DOM-Construction generation
 	//