initial commit
This commit is contained in:
204
tools/dice_roller/index.html
Normal file
204
tools/dice_roller/index.html
Normal file
@@ -0,0 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>Dice Roller</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
touch-action: manipulation;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.input-form {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.input-form label,
|
||||
.input-form input {
|
||||
flex: 1;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
font-size: 1.2em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-form input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dice-roller {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.dice {
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.history {
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
margin: 20px 0;
|
||||
padding: 10px;
|
||||
border: 1px solid #000;
|
||||
background-color: #fff;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.clear-history {
|
||||
margin-top: 10px;
|
||||
font-size: 1.2em;
|
||||
padding: 10px;
|
||||
font-weight: normal;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
width: 95%;
|
||||
max-width: 800px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.custom-roll {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.custom-roll input,
|
||||
.custom-roll button {
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
font-size: 1.2em;
|
||||
width: 100%;
|
||||
}
|
||||
div.c1 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Dice Roller</h1>
|
||||
<form class="input-form">
|
||||
<div class="c1">
|
||||
<label for="dice">Dice</label>
|
||||
<input type="number" id="dice" name="dice" value="1">
|
||||
</div>
|
||||
<div class="c1">
|
||||
<label for="modifier">Mod</label>
|
||||
<input type="number" id="modifier" name="modifier" value="0">
|
||||
</div>
|
||||
</form>
|
||||
<div class="dice-roller">
|
||||
<button class="dice" data-sides="4">d4</button>
|
||||
<button class="dice" data-sides="6">d6</button>
|
||||
<button class="dice" data-sides="8">d8</button>
|
||||
<button class="dice" data-sides="10">d10</button>
|
||||
<button class="dice" data-sides="12">d12</button>
|
||||
<button class="dice" data-sides="20">d20</button>
|
||||
<button class="dice" data-sides="100">d100</button>
|
||||
</div>
|
||||
<div class="custom-roll">
|
||||
<input type="number" id="custom-sides" name="custom-sides" value="3" min="2">
|
||||
<button type="button" class="roll-custom-dice">Custom</button>
|
||||
</div>
|
||||
<form class="input-form">
|
||||
<button type="button" class="clear-history">Clear History</button>
|
||||
</form>
|
||||
<div class="history" id="history"></div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const diceButtons = document.querySelectorAll('.dice');
|
||||
const history = document.getElementById('history');
|
||||
const diceForm = document.querySelector('.input-form');
|
||||
const clearHistoryBtn = document.querySelector('.clear-history');
|
||||
const rollCustomDiceBtn = document.querySelector('.roll-custom-dice');
|
||||
const customSidesInput = document.getElementById('custom-sides');
|
||||
const diceSidesInput = document.querySelector('[name="dice"]');
|
||||
|
||||
diceButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const sides = parseInt(button.dataset.sides);
|
||||
let rolls = diceForm.elements.dice.value;
|
||||
let modifier = diceForm.elements.modifier.value;
|
||||
rolls = parseInt(rolls) || 1;
|
||||
modifier = parseInt(modifier) || 0;
|
||||
let rollsArray = [];
|
||||
let total = 0;
|
||||
for (let i = 0; i < rolls; i++) {
|
||||
let roll = Math.floor(Math.random() * sides) + 1;
|
||||
rollsArray.push(roll);
|
||||
total += roll;
|
||||
}
|
||||
total += modifier;
|
||||
let rollStr = `${rolls}d${sides}`;
|
||||
if (rolls > 1) {
|
||||
rollStr += ` (${rollsArray.join(', ')})`;
|
||||
}
|
||||
if (modifier !== 0) {
|
||||
rollStr += ` + ${modifier}`;
|
||||
}
|
||||
rollStr += ` = ${total}`;
|
||||
rollStr += `<br>`;
|
||||
history.innerHTML = rollStr + history.innerHTML;
|
||||
history.scrollTop = 0;
|
||||
});
|
||||
});
|
||||
|
||||
clearHistoryBtn.addEventListener('click', () => {
|
||||
history.innerHTML = '';
|
||||
});
|
||||
|
||||
rollCustomDiceBtn.addEventListener('click', () => {
|
||||
let rolls = parseInt(diceForm.elements.dice.value) || 1;
|
||||
let modifier = parseInt(diceForm.elements.modifier.value) || 0;
|
||||
let sides = parseInt(customSidesInput.value) || 10;
|
||||
let rollsArray = [];
|
||||
let total = 0;
|
||||
for (let i = 0; i < rolls; i++) {
|
||||
let roll = Math.floor(Math.random() * sides) + 1;
|
||||
rollsArray.push(roll);
|
||||
total += roll;
|
||||
}
|
||||
total += modifier;
|
||||
let rollStr = `${rolls}d${sides}`;
|
||||
if (rolls > 1) {
|
||||
rollStr += ` (${rollsArray.join(', ')})`;
|
||||
}
|
||||
if (modifier !== 0) {
|
||||
rollStr += ` + ${modifier}`;
|
||||
}
|
||||
rollStr += ` = ${total}`;
|
||||
if (rolls > 1) {
|
||||
rollStr += ` (${total - modifier})`;
|
||||
}
|
||||
rollStr += `<br>`;
|
||||
history.innerHTML = rollStr + history.innerHTML;
|
||||
history.scrollTop = 0;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<p>This tool is released under a <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0 Universal</a> license. You can copy, modify, and distribute this tool, even for commercial purposes, all without asking permission.</p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user