231 lines
7.3 KiB
HTML
231 lines
7.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html>
|
||
|
<head>
|
||
|
<title>Dice Roller</title>
|
||
|
<style>
|
||
|
table.steelBlueCols {
|
||
|
border: 4px solid #555555;
|
||
|
background-color: #555555;
|
||
|
width: 100%;
|
||
|
text-align: center;
|
||
|
border-collapse: collapse;
|
||
|
}
|
||
|
table.steelBlueCols td, table.steelBlueCols th {
|
||
|
border: 1px solid #555555;
|
||
|
padding: 5px 10px;
|
||
|
}
|
||
|
table.steelBlueCols tbody td {
|
||
|
font-size: 12px;
|
||
|
font-weight: bold;
|
||
|
color: #FFFFFF;
|
||
|
}
|
||
|
table.steelBlueCols td:nth-child(even) {
|
||
|
background: #398AA4;
|
||
|
}
|
||
|
table.steelBlueCols thead {
|
||
|
background: #398AA4;
|
||
|
border-bottom: 10px solid #398AA4;
|
||
|
}
|
||
|
table.steelBlueCols thead th {
|
||
|
font-size: 15px;
|
||
|
font-weight: bold;
|
||
|
color: #FFFFFF;
|
||
|
text-align: left;
|
||
|
border-left: 2px solid #398AA4;
|
||
|
}
|
||
|
table.steelBlueCols thead th:first-child {
|
||
|
border-left: none;
|
||
|
}
|
||
|
|
||
|
table.steelBlueCols tfoot td {
|
||
|
font-size: 13px;
|
||
|
}
|
||
|
table.steelBlueCols tfoot .links {
|
||
|
text-align: right;
|
||
|
}
|
||
|
table.steelBlueCols tfoot .links a{
|
||
|
display: inline-block;
|
||
|
background: #FFFFFF;
|
||
|
color: #398AA4;
|
||
|
padding: 2px 8px;
|
||
|
border-radius: 5px;
|
||
|
}
|
||
|
|
||
|
table.paleBlueRows {
|
||
|
font-family: "Lucida Console", Monaco, monospace;
|
||
|
border: 1px solid #FFFFFF;
|
||
|
width: 100%;
|
||
|
text-align: center;
|
||
|
border-collapse: collapse;
|
||
|
}
|
||
|
table.paleBlueRows td, table.paleBlueRows th {
|
||
|
border: 1px solid #FFFFFF;
|
||
|
padding: 3px 2px;
|
||
|
}
|
||
|
table.paleBlueRows tbody td {
|
||
|
font-size: 13px;
|
||
|
}
|
||
|
table.paleBlueRows tr:nth-child(even) {
|
||
|
background: #D0E4F5;
|
||
|
}
|
||
|
table.paleBlueRows thead {
|
||
|
background: #0B6FA4;
|
||
|
border-bottom: 5px solid #FFFFFF;
|
||
|
}
|
||
|
table.paleBlueRows thead th {
|
||
|
font-size: 17px;
|
||
|
font-weight: bold;
|
||
|
color: #FFFFFF;
|
||
|
text-align: center;
|
||
|
border-left: 2px solid #FFFFFF;
|
||
|
}
|
||
|
table.paleBlueRows thead th:first-child {
|
||
|
border-left: none;
|
||
|
}
|
||
|
|
||
|
table.paleBlueRows tfoot {
|
||
|
font-size: 14px;
|
||
|
font-weight: bold;
|
||
|
color: #333333;
|
||
|
background: #D0E4F5;
|
||
|
border-top: 3px solid #444444;
|
||
|
}
|
||
|
table.paleBlueRows tfoot td {
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
<table class="steelBlueCols">
|
||
|
<tr>
|
||
|
<th colspan="2" style="text-align: center; vertical-align: middle;">Roll Details</th>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Who</td>
|
||
|
<td><input type="text" name="actor" id="actor" placeholder="actor" /></td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Why</td>
|
||
|
<td><input type="text" name="reason" id="reason" placeholder="reason" /></td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Dice</td>
|
||
|
<td><input type="number" value="1" min="1" name="numd" id="numd" placeholder="num d" /></td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Sides</td>
|
||
|
<td><input type="number" value="4" min="4" name="sides" id="sides" placeholder="sides" /></td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Modifier</td>
|
||
|
<td><input type="number" name="modval" id="modval" placeholder="modifier" /></td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Applies</td>
|
||
|
<td>
|
||
|
<select name="modto" id="modto">
|
||
|
<option value="total">total</option>
|
||
|
<option value="per die">per die</option>
|
||
|
</select>
|
||
|
</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td colspan="2" style="text-align: center; vertical-align: middle;"><input type="button" value="roll" onclick="rollD()" /></td>
|
||
|
</tr>
|
||
|
</table>
|
||
|
<p align="center"><b>Custom History:</b> <input type="text" name="hist" id="hist" /> <input type="button" value="copy" onclick="copyURL()" /></p>
|
||
|
<table id="log" class="paleBlueRows">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th>Time</th>
|
||
|
<th>Actor</th>
|
||
|
<th>Reason</th>
|
||
|
<th>Roll</th>
|
||
|
<th>Modifier</th>
|
||
|
<th>Result</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
<script>
|
||
|
|
||
|
function refreshHist() {
|
||
|
var hist = document.getElementById('hist');
|
||
|
var page = "https://itty.bitty.site/#Dice%20Roller/data:text/plain;base64," + btoa(document.documentElement.outerHTML);
|
||
|
hist.value = page;
|
||
|
}
|
||
|
|
||
|
function copyURL() {
|
||
|
refreshHist()
|
||
|
const itty = document.querySelector('#hist');
|
||
|
itty.select();
|
||
|
document.execCommand('copy');
|
||
|
}
|
||
|
|
||
|
function calc(d, s, m, t) {
|
||
|
let rolls = [];
|
||
|
let modstr = "";
|
||
|
let tot = 0;
|
||
|
|
||
|
for (i = 0; i < d; i++) {
|
||
|
rolls.push(Math.floor(Math.random() * s) + 1);
|
||
|
}
|
||
|
|
||
|
switch (true) {
|
||
|
case m < 0:
|
||
|
case m > 0:
|
||
|
modstr = (parseInt(m)<0?"":"+")+m;
|
||
|
break;
|
||
|
case m == 0:
|
||
|
case m == null:
|
||
|
case m == NaN:
|
||
|
default:
|
||
|
modstr = "";
|
||
|
}
|
||
|
|
||
|
switch (t) {
|
||
|
case 'total':
|
||
|
tot = rolls.reduce((a, b) => a + b, 0) + (parseInt(m) || 0);
|
||
|
return `(${rolls.join(", ")}) ${modstr} = ${tot}`;
|
||
|
break;
|
||
|
case 'per die':
|
||
|
tot = rolls.reduce((a, b) => a + b, 0) + ((parseInt(m) || 0) * parseInt(rolls.length));
|
||
|
return `[${rolls.join(modstr + ", ")}${modstr}] = ${tot}`;
|
||
|
break;
|
||
|
default:
|
||
|
tot = rolls.reduce((a, b) => a + b, 0);
|
||
|
return `(${rolls.join(", ")}) = ${tot}`;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function rollD() {
|
||
|
var actor = document.getElementById('actor').value;
|
||
|
var numd = document.getElementById('numd').value;
|
||
|
var sides = document.getElementById('sides').value;
|
||
|
var modval = document.getElementById('modval').value;
|
||
|
var modto = document.getElementById('modto').value;
|
||
|
var reason = document.getElementById('reason').value;
|
||
|
|
||
|
if (numd > 20 || sides > 100) {
|
||
|
warn = (numd>20?"max dice 20\n":"")+(sides>100?"max sides 100":"")
|
||
|
alert(warn);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var x = calc(numd, sides, modval, modto)
|
||
|
var addlog = `<tr><td>${Date.now()}</td><td>${actor}</td><td>${reason}</td><td>${numd}d${sides}</td><td>${(parseInt(modval)<0?"":"+")+modval} ${modto}</td><td>${x}</td></tr>`
|
||
|
var tableRef = document.getElementById('log').getElementsByTagName('tbody')[0];
|
||
|
var newRow = tableRef.insertRow(tableRef.rows.length);
|
||
|
newRow.innerHTML = addlog;
|
||
|
|
||
|
refreshHist();
|
||
|
}
|
||
|
|
||
|
window.onload = refreshHist()
|
||
|
|
||
|
</script>
|
||
|
</body>
|
||
|
</html>
|