<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reggie's Dice Roller</title>
<style>
body {
font-family: Arial, sans-serif;
}
.button-container {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="result-label" style="font-size: 16px;">No dice in pool</div>
<div class="button-container">
<button onclick="addToPool(4)">1d4</button>
<button onclick="addToPool(6)">1d6</button>
<button onclick="addToPool(8)">1d8</button>
<button onclick="addToPool(10)">1d10</button>
<button onclick="addToPool(12)">1d12</button>
<button onclick="addToPool(20)">1d20</button>
<button onclick="clearPool()">Clear Pool</button>
<button onclick="rollDice()">Roll</button>
</div>
<div>
<label for="attackModifier">Attack Modifier:</label>
<input type="text" id="attackModifier" value="0">
<label for="damageModifier">Damage Modifier:</label>
<input type="text" id="damageModifier" value="0">
</div>
<script>
let dicePool = [];
let resultLabel = document.getElementById("result-label");
let attackModifierInput = document.getElementById("attackModifier");
let damageModifierInput = document.getElementById("damageModifier");
function addToPool(sides) {
dicePool.push(sides);
updateResultText();
}
function clearPool() {
dicePool = [];
updateResultText();
}
function rollDice() {
let results = dicePool.map(sides => [Math.floor(Math.random() * sides) + 1, sides]);
let damageDiceResults = [];
let attackRollResults = [];
results.forEach(([result, sides]) => {
if (sides === 20) {
attackRollResults.push(result);
} else {
damageDiceResults.push(result);
}
});
let attackModifier = parseInt(attackModifierInput.value) || 0;
let damageModifier = parseInt(damageModifierInput.value) || 0;
attackRollResults = attackRollResults.map(result => result + attackModifier);
let totalDamageDice = damageDiceResults.reduce((acc, result) => acc + result, 0);
let totalDamageDiceWithModifier = totalDamageDice + damageModifier;
let resultStrings = [];
if (attackRollResults.length > 0) {
resultStrings.push(`Attack Roll: ${attackRollResults.join(", ")} (Modifier: ${attackModifier})`);
}
if (damageDiceResults.length > 0) {
resultStrings.push(`Damage Dice: ${damageDiceResults.join(", ")}`);
resultStrings.push(`Total Damage with Modifier: ${totalDamageDiceWithModifier} (Modifier: ${damageModifier})`);
}
let resultString = resultStrings.join("\n");
resultLabel.innerText = resultString;
}
function updateResultText() {
let poolText = dicePool.length === 0 ? "No dice in pool" : dicePool.map(sides => `1d${sides}`).join(", ");
resultLabel.innerText = poolText;
}
</script>
</body>
</html>