3 changed files with 39 additions and 35 deletions
Split View
Diff Options
-
+3 -0package.json
-
+0 -1src/html/index.html
-
+36 -34src/ts/frontend.ts
+ 3
- 0
package.json
View File
| @@ -4,6 +4,7 @@ | |||
| "description": "Dice roller for Asphodel. Includes statistical information", | |||
| "devDependencies": { | |||
| "@types/chai": "^4.2.14", | |||
| "@types/chart.js": "^2.9.30", | |||
| "@types/jquery": "^3.5.5", | |||
| "@types/mocha": "^8.2.0", | |||
| "@types/node": "^14.14.22", | |||
| @@ -20,6 +21,8 @@ | |||
| "dependencies": { | |||
| "bootstrap": "^5.0.0-beta2", | |||
| "chai": "^4.3.0", | |||
| "chart.js": "^2.9.4", | |||
| "google-palette": "^1.1.0", | |||
| "mocha": "^8.2.1", | |||
| "ts-node": "^9.1.1" | |||
| }, | |||
+ 0
- 1
src/html/index.html
View File
| @@ -10,7 +10,6 @@ | |||
| <script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script> | |||
| <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.min.js"></script> | |||
| <script src="bundle.js" type="text/javascript"></script> | |||
| <script src="palette.js"></script> | |||
| </head> | |||
| <body> | |||
| <div class="container"> | |||
+ 36
- 34
src/ts/frontend.ts
View File
| @@ -1,7 +1,33 @@ | |||
| import { RollStats } from "./rollstats" | |||
| import { Outcomes } from "./asphodice" | |||
| import palette from "google-palette" | |||
| import { Chart } from "chart.js" | |||
| let rollstats = new RollStats(); | |||
| let barChartOptions = { scales: { | |||
| yAxes: [{ | |||
| ticks: { | |||
| beginAtZero: true, | |||
| } | |||
| }] | |||
| } | |||
| } | |||
| let rollstats = new RollStats(); | |||
| function hexColours(numColours: number): Array<string> { | |||
| return palette("cb-Set1", numColours).map( function (hex: string) { | |||
| return `#${String(hex)}`; }) | |||
| } | |||
| function buildData(): string { | |||
| let output = ""; | |||
| return output; | |||
| } | |||
| function buildCharts(): string { | |||
| let output = ""; | |||
| return output; | |||
| } | |||
| function getResults():void { | |||
| console.log("getting results"); | |||
| @@ -45,7 +71,7 @@ function getResults():void { | |||
| let okeys = Object.keys(oc); | |||
| for (var i = 0; i < okeys.length; i++) { | |||
| let tb = $("#outcomeTable").find("tbody"); | |||
| let outcome: Outcomes = okeys[i]; | |||
| let outcome: Outcomes = okeys[i] as Outcomes; | |||
| let outcomeCount = rollstats.outcomeCounts[outcome]; | |||
| let outcomePercent = (outcomeCount / rollstats.numRolls * 100).toFixed(2); | |||
| tb.append(`<tr> <td>${outcome}</td> | |||
| @@ -58,7 +84,7 @@ function getResults():void { | |||
| resultsCardBody.append(`<h3 class="card-subtitle my-2">Charts</h3>`); | |||
| resultsCardBody.append(`<h4 class="card-subtitle my-1">Outcome Balances</h4>`); | |||
| resultsCardBody.append(`<canvas id="balanceChart"></canvas>`); | |||
| let balanceCanvas = $("#balanceChart"); | |||
| let balanceCanvas: any = $("#balanceChart"); | |||
| let balanceChart = new Chart(balanceCanvas, { | |||
| type: "bar", | |||
| data: { | |||
| @@ -66,27 +92,15 @@ function getResults():void { | |||
| datasets: [{ | |||
| label: "Outcome Balance Counts", | |||
| data: Object.values(rollstats.balanceCounts), | |||
| backgroundColor: palette("tol", Object.values(rollstats.balanceCounts).length).map(function(hex) { return `#${String(hex)}`; }), | |||
| backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length), | |||
| }], | |||
| }, | |||
| options: { | |||
| title: { | |||
| text: "Balance Count Chart", | |||
| display: false, | |||
| }, | |||
| scales: { | |||
| yAxes: [{ | |||
| ticks: { | |||
| beginAtZero: true, | |||
| } | |||
| }] | |||
| } | |||
| } | |||
| options: barChartOptions, | |||
| }); | |||
| resultsCardBody.append(`<h4 class="card-subtitle my-1">Outcomes</h4>`); | |||
| resultsCardBody.append(`<canvas id="outcomesChart"></canvas>`); | |||
| let outcomesCanvas = $("#outcomesChart"); | |||
| let outcomesCanvas: any = $("#outcomesChart"); | |||
| let outcomesChart = new Chart(outcomesCanvas, { | |||
| type: "bar", | |||
| data: { | |||
| @@ -94,27 +108,15 @@ function getResults():void { | |||
| datasets: [{ | |||
| label: "Outcome Counts", | |||
| data: Object.values(rollstats.outcomeCounts), | |||
| backgroundColor: palette("tol", Object.values(rollstats.outcomeCounts).length).map(function(hex) { return `#${String(hex)}`; }), | |||
| backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length), | |||
| }], | |||
| }, | |||
| options: { | |||
| title: { | |||
| text: "Balance Count Chart", | |||
| display: false, | |||
| }, | |||
| scales: { | |||
| yAxes: [{ | |||
| ticks: { | |||
| beginAtZero: true, | |||
| } | |||
| }] | |||
| } | |||
| } | |||
| options: barChartOptions, | |||
| }); | |||
| resultsCardBody.append(`<h4 class="card-subtitle my-1">Rerolls</h4>`); | |||
| resultsCardBody.append(`<canvas id="rerollsChart"></canvas>`); | |||
| let rerollsCanvas = $("#rerollsChart"); | |||
| let rerollsCanvas: any = $("#rerollsChart"); | |||
| let rerollsChart = new Chart(rerollsCanvas, { | |||
| type: "doughnut", | |||
| data: { | |||
| @@ -122,7 +124,7 @@ function getResults():void { | |||
| datasets: [{ | |||
| label: "Reroll Counts", | |||
| data: Object.values(rollstats.rerollCounts), | |||
| backgroundColor: palette("tol", Object.values(rollstats.rerollCounts).length).map(function(hex) { return `#${String(hex)}`; }), | |||
| backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length), | |||
| }], | |||
| }, | |||
| options: { | |||