|
@@ -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); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|