tools
/
dice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Upgrade template to v3

This commit is contained in:
Florine W. Dekker 2022-11-22 00:56:48 +01:00
parent 8a36c27cff
commit 3f833ed302
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
4 changed files with 90 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
package-lock.json generated
View File

Binary file not shown.

12
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "dice", "name": "dice",
"version": "1.0.18", "version": "1.0.19",
"description": "Calculates the probability of rolling a value given a combination of dice.", "description": "Calculates the probability of rolling a value given a combination of dice.",
"author": "Florine W. Dekker", "author": "Florine W. Dekker",
"browser": "dist/bundle.js", "browser": "dist/bundle.js",
@ -16,18 +16,18 @@
"deploy": "grunt deploy" "deploy": "grunt deploy"
}, },
"dependencies": { "dependencies": {
"chart.js": "^3.7.1" "chart.js": "^4.0.1"
}, },
"devDependencies": { "devDependencies": {
"grunt": "^1.4.1", "grunt": "^1.5.3",
"grunt-cli": "^1.4.3", "grunt-cli": "^1.4.3",
"grunt-contrib-clean": "^2.0.0", "grunt-contrib-clean": "^2.0.1",
"grunt-contrib-copy": "^1.0.0", "grunt-contrib-copy": "^1.0.0",
"grunt-contrib-watch": "^1.1.0", "grunt-contrib-watch": "^1.1.0",
"grunt-focus": "^1.0.0", "grunt-focus": "^1.0.0",
"grunt-text-replace": "^0.4.0", "grunt-text-replace": "^0.4.0",
"grunt-webpack": "^5.0.0", "grunt-webpack": "^5.0.0",
"webpack": "^5.69.1", "webpack": "^5.75.0",
"webpack-cli": "^4.9.2" "webpack-cli": "^5.0.0"
} }
} }

88
src/main/index.html
View File

@ -8,15 +8,21 @@
<meta name="description" content="Calculates the probability of rolling a value given a combination of dice." /> <meta name="description" content="Calculates the probability of rolling a value given a combination of dice." />
<meta name="theme-color" content="#0033cc" /> <meta name="theme-color" content="#0033cc" />
<meta name="fwd:auto:show-main" />
<meta name="fwd:nav:target" content="#nav" />
<meta name="fwd:nav:highlight-path" content="/Tools/Dice/" />
<meta name="fwd:footer:target" content="#footer" />
<meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/tools/dice/" />
<meta name="fwd:footer:version" content="v%%VERSION_NUMBER%%" />
<title>Dice probabilities | FWDekker</title> <title>Dice probabilities | FWDekker</title>
<link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" /> <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/3.x.x/template.css?v=%%VERSION_NUMBER%%" />
<link rel="stylesheet" href="https://static.fwdekker.com/lib/template/2.x.x/template.css" />
<script async src="https://stats.fwdekker.com/count.js" <script async src="https://stats.fwdekker.com/count.js"
data-goatcounter="https://stats.fwdekker.com/count"></script> data-goatcounter="https://stats.fwdekker.com/count"></script>
</head> </head>
<body> <body>
<noscript> <noscript class="fwd-js-notice">
<img src="https://stats.fwdekker.com/count?p=/tools/dice/" alt="Counting pixel" /> <img src="https://stats.fwdekker.com/count?p=/tools/dice/" alt="Counting pixel" />
<p> <p>
@ -25,56 +31,48 @@
instructions on how to enable JavaScript in your web browser</a>. instructions on how to enable JavaScript in your web browser</a>.
</p> </p>
</noscript> </noscript>
<main class="hidden"> <nav id="nav"></nav>
<div id="nav"></div> <main class="container hidden">
<div id="contents"> <div role="document">
<div id="header"></div> <section>
<header class="fwd-header">
<hgroup>
<h1><a href=".">Dice</a></h1>
<h2>Calculate the probability of rolling a value given a combination of dice.</h2>
</hgroup>
</header>
<!-- Input --> <form id="inputs">
<section class="container"> <table id="die-settings">
<div class="row"> <thead>
<div class="column"> <tr>
<form> <th>Sides per die</th>
<fieldset> <th>Number of rolls</th>
<table id="dieSettings"> <th></th>
<thead> </tr>
<tr> </thead>
<th>Sides per die</th> <tbody>
<th>Number of rolls</th> <tr>
<th></th> <td>
</tr> <button id="add-die-row-button" class="button-outline" type="button">
</thead> Add dice
<tbody> </button>
<tr> </td>
<td> </tr>
<button id="addDieRowButton" class="button-outline" type="button">Add dice </tbody>
</button> </table>
</td>
</tr>
</tbody>
</table>
<button id="submit" type="button">Recalculate</button> <button type="submit">Recalculate</button>
</fieldset> </form>
</form>
</div>
</div>
</section>
<!-- Output -->
<section class="container">
<h2>Probabilities</h2> <h2>Probabilities</h2>
<div class="row"> <canvas id="prob-chart"></canvas>
<div class="column">
<canvas id="probChart"></canvas>
</div>
</div>
</section> </section>
<footer id="footer"></footer>
</div> </div>
<div id="footer"></div>
</main> </main>
<script src="https://static.fwdekker.com/lib/template/2.x.x/template.js"></script> <script src="https://static.fwdekker.com/lib/template/3.x.x/template.js?v=%%VERSION_NUMBER%%"></script>
<!--suppress HtmlUnknownTarget --> <!--suppress HtmlUnknownTarget -->
<script src="bundle.js?v=%%VERSION_NUMBER%%"></script> <script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
</body> </body>

102
src/main/js/main.js
View File

@ -1,6 +1,6 @@
// noinspection JSUnresolvedVariable // noinspection JSUnresolvedVariable
const {$, doAfterLoad, footer, header, nav} = window.fwdekker; const {$, $a, doAfterLoad} = window.fwdekker;
import {Chart, CategoryScale, Filler, LineController, LineElement, LinearScale, PointElement, Tooltip} from "chart.js" import {CategoryScale, Chart, Filler, LinearScale, LineController, LineElement, PointElement, Tooltip} from "chart.js"
Chart.register(CategoryScale, Filler, LineController, LineElement, LinearScale, PointElement, Tooltip); Chart.register(CategoryScale, Filler, LineController, LineElement, LinearScale, PointElement, Tooltip);
@ -31,33 +31,6 @@ const rangeInclusive = (from, to) => {
return rangeArray; return rangeArray;
}; };
const iterateNodeList = (nodeList, fun) => {
for (let i = 0; i < nodeList.length; i++) {
const node = nodeList.item(i);
fun(node);
}
};
//////
///
/// Template
///
//////
doAfterLoad(() => {
$("#nav").appendChild(nav("/Tools/Dice/"));
$("#header").appendChild(header({
title: "Dice",
description: "Calculate the probability of rolling a value given a combination of dice"
}));
$("#footer").appendChild(footer({
vcsURL: "https://git.fwdekker.com/tools/dice/",
version: "v%%VERSION_NUMBER%%"
}));
$("main").classList.remove("hidden");
});
////// //////
/// ///
@ -69,15 +42,15 @@ const inputTable = {};
// Functions // Functions
inputTable.getTable = () => $("#dieSettings tbody"); inputTable.getTable = () => $("#die-settings tbody");
inputTable.dieRowCount = () => inputTable.getTable().querySelectorAll(".dieEyes").length; inputTable.dieRowCount = () => $a(".die-eyes", inputTable.getTable()).length;
inputTable.highestDieRowIndex = () => { inputTable.highestDieRowIndex = () => {
const table = inputTable.getTable(); const table = inputTable.getTable();
let highestDieRowIndex = -1; let highestDieRowIndex = -1;
iterateNodeList(table.getElementsByTagName("tr"), (node) => { $a("tr", table).forEach((node) => {
if ("index" in node.dataset) if ("index" in node.dataset)
highestDieRowIndex = Math.max(highestDieRowIndex, +node.dataset.index); highestDieRowIndex = Math.max(highestDieRowIndex, +node.dataset.index);
}); });
@ -104,10 +77,9 @@ inputTable.addDieRow = () => {
const createRemoveLink = (index, className) => { const createRemoveLink = (index, className) => {
const link = document.createElement("button"); const link = document.createElement("button");
link.id = className + index; link.id = className + index;
link.className = className + " button-clear"; link.className = className + " outline";
link.type = "button";
link.innerHTML = "Remove"; link.innerHTML = "Remove";
link.onclick = (() => inputTable.removeDieRow(index)); link.addEventListener("click", () => inputTable.removeDieRow(index));
return link; return link;
}; };
@ -118,31 +90,36 @@ inputTable.addDieRow = () => {
const row = table.insertRow(inputTable.dieRowCount()); 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, "die-eyes", 6));
row.insertCell().appendChild(createNumberInput(newIndex, "dieCount", 2)); row.insertCell().appendChild(createNumberInput(newIndex, "die-count", 2));
row.insertCell().appendChild(createRemoveLink(newIndex, "dieRemove")); row.insertCell().appendChild(createRemoveLink(newIndex, "die-remove"));
$("#dieEyes" + newIndex).focus(); if (inputTable.dieRowCount() === 1)
$(".die-remove").disabled = true;
else
$a(".die-remove").forEach((button) => button.disabled = false);
$("#die-eyes" + newIndex).focus();
}; };
inputTable.removeDieRow = index => { inputTable.removeDieRow = index => {
if (inputTable.dieRowCount() > 1) { if (inputTable.dieRowCount() > 1)
const table = inputTable.getTable(); $(`tr[data-index="${index}"]`, inputTable.getTable()).remove();
const row = table.querySelector("tr[data-index=\"" + index + "\"]");
row.parentElement.removeChild(row); if (inputTable.dieRowCount() === 1)
} $(".die-remove").disabled = true;
}; };
inputTable.getDice = () => { inputTable.getDice = () => {
const dice = []; const dice = [];
const eyesInputs = document.getElementsByClassName("dieEyes"); const countInputs = $a(".die-count");
const countInputs = document.getElementsByClassName("dieCount"); const eyesInputs = $a(".die-eyes");
for (let i = 0; i < eyesInputs.length; i++) { for (let i = 0; i < eyesInputs.length; i++) {
const count = parseInt(countInputs.item(i).value); const count = parseInt(countInputs.item(i).value);
const eyes = parseInt(eyesInputs.item(i).value);
for (let j = 0; j < count; j++) for (let j = 0; j < count; j++)
dice.push(parseInt(eyesInputs.item(i).value)); dice.push(eyes);
} }
return dice; return dice;
@ -151,9 +128,9 @@ inputTable.getDice = () => {
// Init // Init
doAfterLoad(() => { doAfterLoad(() => {
const button = $("#addDieRowButton"); const button = $("#add-die-row-button");
button.onclick = inputTable.addDieRow; button.addEventListener("click", () => inputTable.addDieRow());
button.click(); inputTable.addDieRow();
}); });
@ -190,9 +167,7 @@ outputChart.calculateDiceFrequencies = dice => {
// Calculate frequencies // Calculate frequencies
const totalRolls = rollFreqs.reduce((a, b) => a + b, 0); const totalRolls = rollFreqs.reduce((a, b) => a + b, 0);
rangeExclusive(0, rollFreqs.length).forEach(roll => { rangeExclusive(0, rollFreqs.length).forEach(roll => rollFreqs[roll] = rollFreqs[roll] / totalRolls);
rollFreqs[roll] = rollFreqs[roll] / totalRolls;
});
return rollFreqs; return rollFreqs;
@ -213,13 +188,18 @@ outputChart.updateProbGraph = () => {
// Init // Init
doAfterLoad(() => { doAfterLoad(() => {
probChart = new Chart($("#probChart").getContext("2d"), { probChart = new Chart(
type: "line", $("#prob-chart").getContext("2d"),
data: {}, {
options: {fill: true}, type: "line",
}); data: {},
options: {fill: true},
}
);
const submit = $("#submit"); $("#inputs").addEventListener("submit", (event) => {
submit.onclick = outputChart.updateProbGraph; event.preventDefault();
submit.click() outputChart.updateProbGraph();
});
outputChart.updateProbGraph();
}); });