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

Upgrade template to v3

Browse Source
main
Florine W. Dekker 7 months ago
parent 8a36c27cff
commit 3f833ed302
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
4 changed files with 403 additions and 570 deletions
Show Stats Download Patch File Download Diff File

771
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
package.json
Unescape Escape View File

@ -1,6 +1,6 @@
{
"name": "dice",
"version": "1.0.18",
"version": "1.0.19",
"description": "Calculates the probability of rolling a value given a combination of dice.",
"author": "Florine W. Dekker",
"browser": "dist/bundle.js",
@ -16,18 +16,18 @@
"deploy": "grunt deploy"
},
"dependencies": {
"chart.js": "^3.7.1"
"chart.js": "^4.0.1"
},
"devDependencies": {
"grunt": "^1.4.1",
"grunt": "^1.5.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-watch": "^1.1.0",
"grunt-focus": "^1.0.0",
"grunt-text-replace": "^0.4.0",
"grunt-webpack": "^5.0.0",
"webpack": "^5.69.1",
"webpack-cli": "^4.9.2"
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0"
}
}

88
src/main/index.html
Unescape Escape View File

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

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

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

Write Preview
Loading…
Cancel
Save