v0.3.3 - package minor UI improvements

Hiding of dice variants, "jump to" navigation, and updating of UI while
calculating for progress information

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "asphodice",
-	"version": "0.3.0",
+	"version": "0.3.3",
 	"description": "Dice roller for Asphodel. Includes statistical information",
 	"devDependencies": {
 		"@types/chai": "^4.2.14",

src/ts/frontend.ts

@@ -448,10 +448,14 @@ function resultsControlCard(): string {
 				data-bs-toggle="collapse" data-bs-target=".resultsToggle"
 				aria-expanded="true" aria-controls="resultsToggleAll">
 					Hide / Show All
-				</button>
-				</div>`;
+				</button>`
+
+	// Add navigation ("Jump to..") control container
+
+	resultsControl += `<div id="resultsNav" class="my-2"></div>`;
 
-	resultsControl += `</div>`;
+	resultsControl += `</div>`;	// class="card-body"
+	resultsControl += `</div>`;	// id="resultsControl"
 	return resultsControl
 }
 
@@ -470,7 +474,21 @@ function addVariantControl(controlCard: JQuery<HTMLElement>,
 			   `);
 }
 
-function getResults():void {
+/**
+ * return navigation anchor for variant, based on `cutoff`
+ * for append()ing
+ * also add horizontal separator (TODO: move this elsewhere?)
+ */
+function variantNavAnchor (cutoff: number): string {
+	return `<hr />
+	<a name="variant-c${String(cutoff)}"></a>`;
+}
+
+async function sleep (ms: number): Promise<string> {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function getResults():Promise<string>{
 	// Disable 'roll' button
 	$("#mainRoll").prop("disabled", true);
 	console.log("Getting results...");
@@ -479,13 +497,18 @@ function getResults():void {
 
 	$("#results").append(resultsControlCard);
 	let controlCardBody = $("#results").find("#resultsControl .card-body");
+	let controlCardNav = controlCardBody.find("#resultsNav");
 
+	let numDone = 0;
 
 	let maxDice = 10;
 	let cutoffStart = 6;
 	let cutoffMax = 9;
 	for (let cutoff = cutoffStart; cutoff <= cutoffMax; cutoff++) {
 		let variantControlAdded = false;
+		// Start of cutoff, add navigation anchor for variant
+		$("#results").append(variantNavAnchor(cutoff));
+		// Roll the dice for this variant
 		for (let i = 1; i < maxDice; i++) {
 			let rsSetup = { numDice: i, diceOptions: { successCutOff: cutoff } };
 			let rollstats = new RollStats(rsSetup);
@@ -501,14 +524,22 @@ function getResults():void {
 			if (!variantControlAdded) {
 				addVariantControl(controlCardBody, resultProperties);
 				variantControlAdded = true;
+
+				// also add navigation to that anchor on the control card navigation section
+				controlCardNav.append(` <a class="btn btn-primary" href="#variant-c${String(cutoff)}">Jump to ${resultProperties.diceVariant}</a> `);
+
 			}
-			$("#resultsProgress").width(`${i/maxDice*100}%`);
-			$("#resultsProgress").text(`${i/maxDice*100}%`);
+			numDone++;
+			let progress = ((numDone) / ( maxDice * cutoffMax ) * 100).toFixed(2);
+			$("#resultsProgress").width(`${progress}%`);
+			$("#resultsProgress").text(`${progress}%`);
+			await(sleep(50));
 		}
 	}
 	console.log("Results done!");
 	$("#resultsProgress").width("100%");
 	$("#resultsProgress").text("100%");
+	return "Done";
 }