(FE) Make results panels collapsible

Also include bootstrap.js to make collapsing actually work, and change order of links in head to ensure js is included in the 'correct' order
3 jaren geleden · 295c9a73f7
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -4,9 +4,9 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Asphodel Dice Roller</title>
 		<link rel="stylesheet" href="asphotheme.css">
 		<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
 		<script src="bundle.js" type="text/javascript"></script>
 		<link rel="stylesheet" href="asphotheme.css">
 	</head>
 	<body>
 		<div class="container">
--- a/src/ts/frontend.ts
+++ b/src/ts/frontend.ts
@@ -2,6 +2,7 @@ import { RollStats } from "./rollstats"
 import { Outcomes } from "./asphodice"
 import palette from "google-palette"
 import { Chart } from "chart.js"
 import "bootstrap";

 let barChartOptions = { scales: {
 				yAxes: [{
@@ -298,10 +299,22 @@ function getResults():void {
 	let resultsCardBody = $("#results").find("div.card-body");


 	resultsCardBody.append(bigTitle("Asphodice Results"));
 	resultsCardBody.append(describeRolls(rollstats));
 	let resultsTitle = `<div class="d-flex justify-content-between">`
 	resultsTitle += `<div class="">`
 			+ bigTitle(`Asphodice Results
 					<small class="h4 text-muted">(<em><var>d=${rollstats.numDice}</var></em>)</small>`)
 			+ `</div>`;
 	resultsTitle += `<div class="">
 			<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#resultsBody" aria-expanded="true" aria-controls="collapse-resultsBody">(hide/show)</button>
 			</div>`
 	resultsTitle += `</div>`;

 	resultsCardBody.append(resultsTitle);
 	//resultsCardBody.append(bigTitle(`Asphodice Results (${rollstats.numDice})`));
 	//resultsCardBody.append(describeRolls(rollstats));

 	let resultsBody = `<div class="row">`;
 	let resultsBody = `<div id="resultsBody" class="show row resultsToggle">`;
 	resultsBody += describeRolls(rollstats);
 	resultsBody += rerollReport(rollstats) + outcomesReport(rollstats) + outcomeBalancesReport(rollstats);
 	resultsBody += `</div>`;
 	resultsCardBody.append(resultsBody);