This commit is contained in:
Florine W. Dekker 2019-06-10 01:15:12 +02:00
parent e7fe9a9254
commit 77ef279b7f
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
1 changed files with 21 additions and 17 deletions

View File

@ -3,17 +3,17 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Felix W. Dekker"/> <meta name="author" content="Felix W. Dekker" />
<meta name="application-name" content="Dice probabilities"/> <meta name="application-name" content="Dice probabilities" />
<meta name="description" content="Calculates the probability of throwing a value given a combination of dice."/> <meta name="description" content="Calculates the probability of throwing a value given a combination of dice." />
<meta name="theme-color" content="#0033cc"/> <meta name="theme-color" content="#0033cc" />
<title>Dice probabilities | FWDekker</title> <title>Dice probabilities | FWDekker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous"/> integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css" <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
integrity="sha256-Ro/wP8uUi8LR71kwIdilf78atpu8bTEwrK5ZotZo+Zc=" crossorigin="anonymous"/> integrity="sha256-Ro/wP8uUi8LR71kwIdilf78atpu8bTEwrK5ZotZo+Zc=" crossorigin="anonymous" />
<style> <style>
body { body {
@ -79,6 +79,8 @@
/// ///
////// //////
const $ = query => document.querySelector(query);
const doAfterLoad = fun => { const doAfterLoad = fun => {
const oldOnLoad = window.onload || (() => { const oldOnLoad = window.onload || (() => {
}); });
@ -126,15 +128,17 @@
// Functions // Functions
inputTable.getTable = () => document.querySelector("#dieSettings tbody"); inputTable.getTable = () => $("#dieSettings tbody");
inputTable.dieRowCount = () => inputTable.getTable().querySelectorAll(".dieEyes").length;
inputTable.highestDieRowIndex = () => { inputTable.highestDieRowIndex = () => {
const table = inputTable.getTable(); const table = inputTable.getTable();
let highestDieRowIndex = -1; let highestDieRowIndex = -1;
iterateNodeList(table.getElementsByTagName("tr"), (node) => { iterateNodeList(table.getElementsByTagName("tr"), (node) => {
if (!isNaN(node.dataset.index)) if ("index" in node.dataset)
highestDieRowIndex = Math.max(highestDieRowIndex, node.dataset.index); highestDieRowIndex = Math.max(highestDieRowIndex, +node.dataset.index);
}); });
return highestDieRowIndex; return highestDieRowIndex;
@ -146,8 +150,8 @@
input.id = className + index; input.id = className + index;
input.className = className; input.className = className;
input.type = "number"; input.type = "number";
input.min = 1; input.min = "1";
input.step = 1; input.step = "1";
input.value = value; input.value = value;
input.addEventListener("keypress", (e) => { input.addEventListener("keypress", (e) => {
if (e.key === "Enter") if (e.key === "Enter")
@ -171,7 +175,7 @@
const table = inputTable.getTable(); const table = inputTable.getTable();
const newIndex = inputTable.highestDieRowIndex() + 1; const newIndex = inputTable.highestDieRowIndex() + 1;
const row = table.insertRow(newIndex); const row = table.insertRow(inputTable.dieRowCount());
row.dataset.index = newIndex; row.dataset.index = newIndex;
row.insertCell().appendChild(createNumberInput(newIndex, "dieEyes", 6)); row.insertCell().appendChild(createNumberInput(newIndex, "dieEyes", 6));
@ -204,11 +208,11 @@
// Handlers // Handlers
document.getElementById("addDieRowButton").onclick = inputTable.addDieRow; $("#addDieRowButton").onclick = inputTable.addDieRow;
// Init // Init
doAfterLoad(() => document.getElementById("addDieRowButton").click()); doAfterLoad(() => $("#addDieRowButton").click());
////// //////
@ -265,11 +269,11 @@
// Handlers // Handlers
document.getElementById("submit").onclick = outputChart.updateProbGraph; $("#submit").onclick = outputChart.updateProbGraph;
// Init // Init
const ctx = document.getElementById("probChart").getContext("2d"); const ctx = $("#probChart").getContext("2d");
const probChart = new Chart(ctx, { const probChart = new Chart(ctx, {
type: "line", type: "line",
data: {}, data: {},
@ -288,7 +292,7 @@
} }
}); });
doAfterLoad(() => document.getElementById("submit").click()); doAfterLoad(() => $("#submit").click());
</script> </script>
</body> </body>
</html> </html>