bertieb
/
dice-roller
1
0
Förgrening 0
Kod Ärenden 1 Pull-förfrågningar 0 Släpp 5 Wiki Aktiviteter
Bläddra i källkod

refactor: more ResultProperties sig updating

tags/v0.3.0
bertieb 3 år sedan
förälder
bccc86acc6
incheckning
0546dc14d6
1 ändrade filer med 44 tillägg och 41 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. +44
    -41
      src/ts/frontend.ts

+ 44
- 41
src/ts/frontend.ts Visa fil

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

/**


Skriv Förhandsgranska
Laddar…
Avbryt
Spara