(FE) add ResultProperties to tell apart roll types

src/ts/frontend.ts

@@ -4,6 +4,52 @@ import palette from "google-palette"
 import { Chart } from "chart.js"
 import "bootstrap";
 
+// TODO: more descriptive name
+interface ResultPropertyOptions {
+	rollstats: RollStats,
+	diceClass: string,
+	diceVariant: string,
+	numDice: number,
+}
+
+/**
+ * Provide properties for displaying roll results
+ *
+ *  - rollstats is an instance of a RollStatsClass
+ *  - diceClass is the shortname of a dice class (eg "aphodice")
+ *  - diceVariant is a string/number combo to disambiguate (eg "c8" for successCutOff = 8)
+ *  - numDice is the number of dice being rolled at a particular time (eg 4; NB negative numbers indicate randomised dice number though not used at present)
+ *
+ */
+class ResultProperties {
+	rollstats: RollStats;
+	diceClass: string;
+	diceVariant: string;
+	numDice: number;
+
+	constructor(rpOptions: ResultPropertyOptions) {
+		this.rollstats = rpOptions.rollstats;
+		this.diceClass = rpOptions.diceClass;
+		this.diceVariant = rpOptions.diceVariant;
+		this.numDice = rpOptions.numDice;
+	}
+
+	/**
+	 * Provide unique itemId for use in DOM elements, eg "asphodice-c6-d4"
+	 * for use in, say: <canvas id="balanceCounts-asphodice-c6-d4"></canvas>
+	 */
+	itemId(): string {
+		return `${this.diceClass}-${this.diceVariant}-${this.numDice}`;
+	}
+
+	/**
+	 * Provide 'variant class', intended use is for result card visibility group toggling
+	 */
+	variantClass(): string {
+		return `${this.diceClass}-${this.diceVariant}`;
+	}
+}
+
 let barChartOptions = { scales: {
 				yAxes: [{
 					ticks: {
@@ -410,6 +456,12 @@ function getResults():void {
 	for (let i = 1; i < maxDice; i++) {
 		let rsSetup = { numDice: i };
 		let rollstats = new RollStats(rsSetup);
+		let resultProperties = new ResultProperties({
+			rollstats: rollstats,
+			diceClass: "asphodice",
+			diceVariant: "c6",
+			numDice: i,
+		});
 		rollstats.doRolls();
 		addResults(rollstats);
 		$("#resultsProgress").width(`${i/maxDice*100}%`);