416 lines
14 KiB
JavaScript
416 lines
14 KiB
JavaScript
const d2Btn = document.getElementById('d2-roll');
|
|
const d4Btn = document.getElementById('d4-roll');
|
|
const d6Btn = document.getElementById('d6-roll');
|
|
const d8Btn = document.getElementById('d8-roll');
|
|
const d10Btn = document.getElementById('d10-roll');
|
|
const d12Btn = document.getElementById('d12-roll');
|
|
const d20Btn = document.getElementById('d20-roll');
|
|
const d100Btn = document.getElementById('d100-roll');
|
|
const dxBtn = document.getElementById('dx-roll');
|
|
|
|
const dice = document.getElementById('last-roll-dice');
|
|
const mods = document.getElementById('last-roll-dice-with-mods');
|
|
const bonuses = document.getElementById('dice-total-with-bonuses');
|
|
const total = document.getElementById('dice-total');
|
|
const results = document.getElementById('roll-results');
|
|
const history = document.getElementById('roll-history');
|
|
const rollType = document.getElementById('roll-type');
|
|
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
d2Btn.addEventListener('click', rollD2);
|
|
d4Btn.addEventListener('click', rollD4);
|
|
d6Btn.addEventListener('click', rollD6);
|
|
d8Btn.addEventListener('click', rollD8);
|
|
d10Btn.addEventListener('click', rollD10);
|
|
d12Btn.addEventListener('click', rollD12);
|
|
d20Btn.addEventListener('click', rollD20);
|
|
d100Btn.addEventListener('click', rollD100);
|
|
dxBtn.addEventListener('click', rollDx);
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
$(document).on('click', '.mod-minus', function() {
|
|
var inputValue = $(this).closest('.input-group').find('input').val();
|
|
var newValue;
|
|
if ( inputValue ) {
|
|
newValue = parseInt(inputValue, 10) - 1;
|
|
} else {
|
|
newValue = -1;
|
|
}
|
|
$(this).closest('.input-group').find('input').val( newValue );
|
|
});
|
|
$(document).on('click', '.mod-plus', function() {
|
|
var inputValue = $(this).closest('.input-group').find('input').val();
|
|
var newValue;
|
|
if ( inputValue ) {
|
|
newValue = parseInt(inputValue, 10) + 1;
|
|
} else {
|
|
newValue = 1;
|
|
}
|
|
$(this).closest('.input-group').find('input').val( newValue );
|
|
});
|
|
$(document).on('click', '.bonus-minus', function() {
|
|
var inputValue = $(this).closest('.input-group').find('input').val();
|
|
var newValue;
|
|
if ( inputValue ) {
|
|
newValue = parseInt(inputValue, 10) - 1;
|
|
} else {
|
|
newValue = -1;
|
|
}
|
|
$(this).closest('.input-group').find('input').val( newValue );
|
|
});
|
|
$(document).on('click', '.bonus-plus', function() {
|
|
var inputValue = $(this).closest('.input-group').find('input').val();
|
|
var newValue;
|
|
if ( inputValue ) {
|
|
newValue = parseInt(inputValue, 10) + 1;
|
|
} else {
|
|
newValue = 1;
|
|
}
|
|
$(this).closest('.input-group').find('input').val( newValue );
|
|
});
|
|
$(document).on('click', '.die-minus', function() {
|
|
var inputValue = $(this).closest('.input-group').find('input').val();
|
|
var newValue;
|
|
if ( '1' == inputValue ) {
|
|
return;
|
|
}
|
|
if ( !inputValue ) {
|
|
newValue = '1';
|
|
} else {
|
|
newValue = parseInt(inputValue, 10) - 1;
|
|
}
|
|
$(this).closest('.input-group').find('input').val( newValue );
|
|
});
|
|
$(document).on('click', '.die-plus', function() {
|
|
var inputValue = $(this).closest('.input-group').find('input').val();
|
|
var newValue;
|
|
if ( inputValue ) {
|
|
newValue = parseInt(inputValue, 10) + 1;
|
|
} else {
|
|
newValue = 2;
|
|
}
|
|
$(this).closest('.input-group').find('input').val( newValue );
|
|
});
|
|
$(document).on('click', '.face-minus', function() {
|
|
var inputValue = $(this).closest('.input-group').find('input').val();
|
|
var newValue;
|
|
if ( '2' == inputValue ) {
|
|
return;
|
|
}
|
|
if ( !inputValue ) {
|
|
newValue = '2';
|
|
} else {
|
|
newValue = parseInt(inputValue, 10) - 1;
|
|
}
|
|
$(this).closest('.input-group').find('input').val( newValue );
|
|
});
|
|
$(document).on('click', '.face-plus', function() {
|
|
var inputValue = $(this).closest('.input-group').find('input').val();
|
|
var newValue;
|
|
if ( inputValue ) {
|
|
newValue = parseInt(inputValue, 10) + 1;
|
|
} else {
|
|
newValue = 3;
|
|
}
|
|
$(this).closest('.input-group').find('input').val( newValue );
|
|
});
|
|
$(document).on('click', '.history-remove', function() {
|
|
$(this).closest('tr').remove();
|
|
});
|
|
$(document).on('click', '#history-clear', function() {
|
|
$('#roll-history-table').empty();
|
|
});
|
|
});
|
|
|
|
const rollD2 = async function (event) {
|
|
event.preventDefault();
|
|
var resultDiv = document.getElementById('d2-last-roll');
|
|
var dieCount = document.getElementById('d2-die-count').value;
|
|
let rolls = [];
|
|
if ( !dieCount ) {
|
|
dieCount = 1;
|
|
}
|
|
for (let index = 0; index < dieCount; index++) {
|
|
var roll = getRandomInt( 1, 3 );
|
|
if ( roll > 1 ) {
|
|
roll = 'Heads';
|
|
} else {
|
|
roll = 'Tails';
|
|
}
|
|
rolls.push( roll );
|
|
}
|
|
resetResults();
|
|
updateLastRollDice( rolls );
|
|
rollType.innerText = 'Coin';
|
|
resultDiv.innerText = rolls.filter(result => result === 'Heads').length + ' ("Heads")';
|
|
addRollHistory();
|
|
}
|
|
|
|
const rollD4 = async function (event) {
|
|
event.preventDefault();
|
|
var resultDiv = document.getElementById('d4-last-roll');
|
|
var mod = document.getElementById('d4-mod').value;
|
|
var bonus = document.getElementById('d4-bonus').value;
|
|
var dieCount = document.getElementById('d4-die-count').value;
|
|
let rolls = [];
|
|
if ( !dieCount ) {
|
|
dieCount = 1;
|
|
}
|
|
for (let index = 0; index < dieCount; index++) {
|
|
rolls.push( getRandomInt( 1, 5 ) );
|
|
}
|
|
updateLastRoll( rolls, mod, bonus );
|
|
rollType.innerText = 'D4';
|
|
resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
|
|
addRollHistory();
|
|
}
|
|
|
|
const rollD6 = async function (event) {
|
|
event.preventDefault();
|
|
var resultDiv = document.getElementById('d6-last-roll');
|
|
var mod = document.getElementById('d6-mod').value;
|
|
var bonus = document.getElementById('d6-bonus').value;
|
|
var dieCount = document.getElementById('d6-die-count').value;
|
|
let rolls = [];
|
|
if ( !dieCount ) {
|
|
dieCount = 1;
|
|
}
|
|
for (let index = 0; index < dieCount; index++) {
|
|
rolls.push( getRandomInt( 1, 7 ) );
|
|
}
|
|
updateLastRoll( rolls, mod, bonus );
|
|
rollType.innerText = 'D6';
|
|
resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
|
|
addRollHistory();
|
|
}
|
|
|
|
const rollD8 = async function (event) {
|
|
event.preventDefault();
|
|
var resultDiv = document.getElementById('d8-last-roll');
|
|
var mod = document.getElementById('d8-mod').value;
|
|
var bonus = document.getElementById('d8-bonus').value;
|
|
var dieCount = document.getElementById('d8-die-count').value;
|
|
let rolls = [];
|
|
if ( !dieCount ) {
|
|
dieCount = 1;
|
|
}
|
|
for (let index = 0; index < dieCount; index++) {
|
|
rolls.push( getRandomInt( 1, 9 ) );
|
|
}
|
|
updateLastRoll( rolls, mod, bonus );
|
|
rollType.innerText = 'D8';
|
|
resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
|
|
addRollHistory();
|
|
}
|
|
|
|
const rollD10 = async function (event) {
|
|
event.preventDefault();
|
|
var resultDiv = document.getElementById('d10-last-roll');
|
|
var mod = document.getElementById('d10-mod').value;
|
|
var bonus = document.getElementById('d10-bonus').value;
|
|
var dieCount = document.getElementById('d10-die-count').value;
|
|
let rolls = [];
|
|
if ( !dieCount ) {
|
|
dieCount = 1;
|
|
}
|
|
for (let index = 0; index < dieCount; index++) {
|
|
rolls.push( getRandomInt( 1, 11 ) );
|
|
}
|
|
updateLastRoll( rolls, mod, bonus );
|
|
rollType.innerText = 'D10';
|
|
resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
|
|
addRollHistory();
|
|
}
|
|
|
|
const rollD12 = async function (event) {
|
|
event.preventDefault();
|
|
var resultDiv = document.getElementById('d12-last-roll');
|
|
var mod = document.getElementById('d12-mod').value;
|
|
var bonus = document.getElementById('d12-bonus').value;
|
|
var dieCount = document.getElementById('d12-die-count').value;
|
|
let rolls = [];
|
|
if ( !dieCount ) {
|
|
dieCount = 1;
|
|
}
|
|
for (let index = 0; index < dieCount; index++) {
|
|
rolls.push( getRandomInt( 1, 13 ) );
|
|
}
|
|
updateLastRoll( rolls, mod, bonus );
|
|
rollType.innerText = 'D12';
|
|
resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
|
|
addRollHistory();
|
|
}
|
|
|
|
const rollD20 = async function (event) {
|
|
event.preventDefault();
|
|
var resultDiv = document.getElementById('d20-last-roll');
|
|
var mod = document.getElementById('d20-mod').value;
|
|
var bonus = document.getElementById('d20-bonus').value;
|
|
var dieCount = document.getElementById('d20-die-count').value;
|
|
let rolls = [];
|
|
if ( !dieCount ) {
|
|
dieCount = 1;
|
|
}
|
|
for (let index = 0; index < dieCount; index++) {
|
|
rolls.push( getRandomInt( 1, 21 ) );
|
|
}
|
|
updateLastRoll( rolls, mod, bonus );
|
|
rollType.innerText = 'D20';
|
|
resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
|
|
addRollHistory();
|
|
}
|
|
|
|
const rollD100 = async function (event) {
|
|
event.preventDefault();
|
|
var resultDiv = document.getElementById('d100-last-roll');
|
|
var mod = document.getElementById('d100-mod').value;
|
|
var bonus = document.getElementById('d100-bonus').value;
|
|
var dieCount = document.getElementById('d100-die-count').value;
|
|
let rolls = [];
|
|
if ( !dieCount ) {
|
|
dieCount = 1;
|
|
}
|
|
for (let index = 0; index < dieCount; index++) {
|
|
rolls.push( getRandomInt( 1, 101 ) );
|
|
}
|
|
updateLastRoll( rolls, mod, bonus );
|
|
rollType.innerText = 'Percentile';
|
|
resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
|
|
addRollHistory();
|
|
}
|
|
|
|
const rollDx = async function (event) {
|
|
event.preventDefault();
|
|
var resultDiv = document.getElementById('dx-last-roll');
|
|
var mod = document.getElementById('dx-mod').value;
|
|
var bonus = document.getElementById('dx-bonus').value;
|
|
var faceCount = document.getElementById('dx-face-count').value;
|
|
var dieCount = document.getElementById('dx-die-count').value;
|
|
let rolls = [];
|
|
if ( !dieCount ) {
|
|
dieCount = 1;
|
|
}
|
|
if ( !faceCount ) {
|
|
faceCount = 2;
|
|
}
|
|
faceCount++;
|
|
|
|
for (let index = 0; index < dieCount; index++) {
|
|
rolls.push( getRandomInt( 1, faceCount ) );
|
|
}
|
|
|
|
updateLastRoll( rolls, mod, bonus );
|
|
rollType.innerText = 'D' + faceCount;
|
|
resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
|
|
addRollHistory();
|
|
}
|
|
|
|
function getRandomInt(min, max) {
|
|
const minCeiled = Math.ceil(min);
|
|
const maxFloored = Math.floor(max);
|
|
return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
|
|
}
|
|
|
|
function resetResults() {
|
|
dice.innerHTML = '';
|
|
mods.innerHTML = '';
|
|
bonuses.innerHTML = '';
|
|
total.innerHTML = '';
|
|
}
|
|
|
|
function updateLastRollDiceMod( rolls, mod ) {
|
|
if (!rolls) {
|
|
rolls = [];
|
|
}
|
|
if (!mod) {
|
|
mod = 0;
|
|
}
|
|
var rollsStringWithMods = '';
|
|
for (let i = 0; i < rolls.length; i++) {
|
|
rollsStringWithMods = rollsStringWithMods + '<b>' + ( parseInt( rolls[i] ) + parseInt( mod )) + '</b> (' + rolls[i] + '+' + mod + '), ';
|
|
}
|
|
mods.innerHTML = rollsStringWithMods;
|
|
}
|
|
|
|
function updateLastRollDice( rolls ) {
|
|
results.style.display = '';
|
|
if (!rolls) {
|
|
rolls = [];
|
|
}
|
|
var rollsString = rolls.join(', ');
|
|
dice.innerHTML = rollsString + ' <b>('+rolls.length+')</b>';
|
|
}
|
|
|
|
function addRollHistory() {
|
|
history.style.display = '';
|
|
var tpeValue = rollType.innerText
|
|
var diceValue = dice.innerHTML
|
|
var modsValue = mods.innerHTML
|
|
var totalValue = total.innerHTML
|
|
var bonusesValue = bonuses.innerHTML
|
|
|
|
var rollList = document.getElementById('roll-history-table');
|
|
var row = document.createElement('tr');
|
|
|
|
row.innerHTML = `
|
|
<td class="text-center">${tpeValue}</td>
|
|
<td class="text-center">${diceValue}</td>
|
|
<td class="text-center">${modsValue}</td>
|
|
<td class="text-center">${totalValue}</td>
|
|
<td class="text-center">${bonusesValue}</td>
|
|
<td class="text-right"><button class="btn btn-danger btn-sm history-remove" aria-label="Remove "><span class="glyphicon glyphicon-trash"></span></button></td>
|
|
`;
|
|
|
|
var firstRow = rollList.rows[0];
|
|
if (firstRow) {
|
|
rollList.insertBefore(row, firstRow);
|
|
} else {
|
|
rollList.appendChild(row);
|
|
}
|
|
}
|
|
|
|
function updateLastRollTotal( rolls ) {
|
|
if (!rolls) {
|
|
rolls = [];
|
|
}
|
|
var sum = rolls.reduce((total, currentValue) => total + currentValue, 0);
|
|
total.innerHTML = '<b>' + sum + '</b>';
|
|
}
|
|
|
|
function calculateTotalWithModAndBonus( rolls, mod, bonus ) {
|
|
if (!rolls) {
|
|
rolls = [];
|
|
}
|
|
if (!bonus) {
|
|
bonus = 0;
|
|
}
|
|
if (!mod) {
|
|
mod = 0;
|
|
}
|
|
|
|
var sum = rolls.reduce((total, currentValue) => total + currentValue, 0);
|
|
var sumWithMods;
|
|
if ( 0 == mod ) {
|
|
sumWithMods = sum;
|
|
} else {
|
|
sumWithMods = parseInt(sum) + ( rolls.length * parseInt(mod) );
|
|
}
|
|
var total = parseInt(sumWithMods) + parseInt(bonus);
|
|
return total;
|
|
}
|
|
|
|
function updateLastRoll( rolls, mod, bonus ) {
|
|
resetResults();
|
|
updateLastRollDice( rolls );
|
|
updateLastRollDiceMod( rolls, mod );
|
|
updateLastRollTotal( rolls );
|
|
var sum = rolls.reduce((total, currentValue) => total + currentValue, 0);
|
|
if (!bonus) {
|
|
bonus = '0';
|
|
}
|
|
if (!mod) {
|
|
mod = '0';
|
|
}
|
|
bonuses.innerHTML = '<b>' + calculateTotalWithModAndBonus( rolls, mod, bonus ) + '</b> ( '+sum+' + ( '+rolls.length+' * '+mod+' ) + '+bonus+' )';
|
|
} |