Browse Source

refactor: more ResultProperties sig updating

tags/v0.3.0
bertieb 3 years ago
parent
commit
0546dc14d6
1 changed files with 44 additions and 41 deletions
  1. +44
    -41
      src/ts/frontend.ts

+ 44
- 41
src/ts/frontend.ts View File

@@ -126,8 +126,9 @@ function subsubTitle(text:string): string {
* - make number boxes * - 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 // Column structure
let output = `<div class="col" id="rerollCol">`; let output = `<div class="col" id="rerollCol">`;
// Heading // Heading
@@ -142,22 +143,22 @@ function rerollReport(rollstats: RollStats): string {
output += `<div class="row my-3 mx-auto">`; output += `<div class="row my-3 mx-auto">`;
output += `<div class="col alert alert-success"> output += `<div class="col alert alert-success">
<strong>Rerolled:</strong> <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>`; </div>`;
output += `<div class="col alert alert-warning"> output += `<div class="col alert alert-warning">
<strong>Not rerolled:</strong> <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>` </div>`
output += `</div>` output += `</div>`
output += `</div>` output += `</div>`
return output; 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 // Column structure
let output = `<div class="col" id="outcomesCol">`; let output = `<div class="col" id="outcomesCol">`;
// Heading // Heading
@@ -174,9 +175,9 @@ function outcomesReport(rollstats: RollStats): string {
return output; 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 // Column structure
let output = `<div class="col" id="balancesCol">`; let output = `<div class="col" id="balancesCol">`;
// Heading // 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?) * 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 * Rerolls
@@ -210,10 +212,10 @@ function generateCharts(rollstats: RollStats): void {
let rerollsChart = new Chart(rerollsCanvas, { let rerollsChart = new Chart(rerollsCanvas, {
type: "doughnut", type: "doughnut",
data: { data: {
labels: mapRerolledKeys(Object.keys(rollstats.rerollCounts)),
labels: mapRerolledKeys(Object.keys(resultProperties.rollstats.rerollCounts)),
datasets: [{ datasets: [{
label: "Reroll Counts", label: "Reroll Counts",
data: Object.values(rollstats.rerollCounts),
data: Object.values(resultProperties.rollstats.rerollCounts),
backgroundColor: ["#d1e7dd", "#fff3cd"], backgroundColor: ["#d1e7dd", "#fff3cd"],
//backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length), //backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length),
}], }],
@@ -237,11 +239,11 @@ function generateCharts(rollstats: RollStats): void {
let outcomesChart = new Chart(outcomesCanvas, { let outcomesChart = new Chart(outcomesCanvas, {
type: "bar", type: "bar",
data: { data: {
labels: Object.keys(rollstats.outcomeCounts),
labels: Object.keys(resultProperties.rollstats.outcomeCounts),
datasets: [{ datasets: [{
label: "Outcome Counts", 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, options: barChartOptions,
@@ -251,13 +253,13 @@ function generateCharts(rollstats: RollStats): void {
* Outcome Balances * Outcome Balances
*/ */


let bc = rollstats.balanceCounts;
let bc = resultProperties.rollstats.balanceCounts;
let keys = Object.keys(bc); let keys = Object.keys(bc);
keys.sort(function(a: string, b: string){return Number(a) - Number(b)}); keys.sort(function(a: string, b: string){return Number(a) - Number(b)});
// sort values too // sort values too
let values = []; let values = [];
for (let i = 0; i < keys.length; i++) { 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}`); let balanceCanvas: any = $(`#${balanceChartId}`);
@@ -268,7 +270,7 @@ function generateCharts(rollstats: RollStats): void {
datasets: [{ datasets: [{
label: "Outcome Balance Counts", label: "Outcome Balance Counts",
data: values, data: values,
backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length),
backgroundColor: hexColours(Object.values(resultProperties.rollstats.balanceCounts).length),
}], }],
}, },
options: barChartOptions, options: barChartOptions,
@@ -281,22 +283,23 @@ function generateCharts(rollstats: RollStats): void {
* *
* Also should be callback/event-driven. (TODO?) * Also should be callback/event-driven. (TODO?)
*/ */
function generateTables(rollstats: RollStats): void {
function generateTables(resultProperties: ResultProperties): void {
let itemId = resultProperties.itemId();
/* /*
* Outcomes * Outcomes
*/ */
let outcomesTableId = `outcomesTable-${rollstats.numDice}`;
let outcomesTableId = `outcomesTable-${itemId}`;


let oc = rollstats.outcomeCounts;
let oc = resultProperties.rollstats.outcomeCounts;
let okeys = Object.keys(oc); let okeys = Object.keys(oc);
for (var i = 0; i < okeys.length; i++) { for (var i = 0; i < okeys.length; i++) {
let tb = $(`#${outcomesTableId}`).find("tbody"); let tb = $(`#${outcomesTableId}`).find("tbody");
let outcome: Outcomes = okeys[i] as Outcomes; let outcome: Outcomes = okeys[i] as Outcomes;
let outcomeCount = rollstats.outcomeCounts[outcome];
let outcomeCount = resultProperties.rollstats.outcomeCounts[outcome];
let outcomePercent: string = ""; let outcomePercent: string = "";
if (outcomeCount) { if (outcomeCount) {
// Needed to avoid TS2532: // 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> tb.append(`<tr> <td>${outcome}</td>
<td>${outcomeCount}</td> <td>${outcomeCount}</td>
@@ -307,16 +310,16 @@ function generateTables(rollstats: RollStats): void {
/* /*
* Outcome Balance Counts * 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); let keys = Object.keys(bc);
keys.sort(function(a: string, b: string){return Number(a) - Number(b)}); keys.sort(function(a: string, b: string){return Number(a) - Number(b)});
for (var i = 0; i < keys.length; i++) { for (var i = 0; i < keys.length; i++) {
let tb = $(`#${balanceTableId}`).find("tbody"); let tb = $(`#${balanceTableId}`).find("tbody");
tb.append(`<tr> <td>${keys[i]}</td> 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>`); </tr>`);
} }


@@ -333,9 +336,9 @@ function numberWithCommas(x:number): string {
* Give some info on the dice used to generate these results * 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"); 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; return output;
} }


@@ -387,10 +390,10 @@ function resultsHeader(resultProperties: ResultProperties): string {
function resultsBody(resultProperties: ResultProperties): string { function resultsBody(resultProperties: ResultProperties): string {
let resultsBodyId = `resultsBody-${resultProperties.numDice}`; let resultsBodyId = `resultsBody-${resultProperties.numDice}`;
let resultsBody = `<div id="${resultsBodyId}" class="show row resultsToggle ${resultProperties.variantClass()}">`; 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>`; resultsBody += `</div>`;
return resultsBody; return resultsBody;
} }
@@ -414,10 +417,10 @@ function addResults(resultProperties: ResultProperties): void {
// <canvas> element // <canvas> element


// Tables // Tables
generateTables(resultProperties.rollstats);
generateTables(resultProperties);


// Charts // Charts
generateCharts(resultProperties.rollstats);
generateCharts(resultProperties);
} }


/** /**


Loading…
Cancel
Save