init
This commit is contained in:
commit
bba8d7158d
2 changed files with 254 additions and 0 deletions
24
README.md
Normal file
24
README.md
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# dice roller
|
||||
|
||||
This `html` file allows a user to perpetually add calculated dice rolls to a history list. It then encodes/compresses the entire page into an [itty.bitty](https://about.bitty.site/) url to pass between players.
|
||||
|
||||
## To Use
|
||||
|
||||
- Enter the name of the roller (the *actor*) and the reason for the roll (such as "*initiative*" or "*attack/damage*")
|
||||
- Select the number of dice to roll (max 20) and the number of sides on those dice (max 100)
|
||||
- Add a modifier (positive or negative) and apply it to the total roll or to each die rolled
|
||||
- Click the roll button and see the results added to the history
|
||||
|
||||
After each roll, a new [itty.bitty](https://github.com/alcor/itty-bitty/) link will be generated in the **Custom History** box. Click the button to copy and send it off to the next player!
|
||||
|
||||
## Link Length
|
||||
|
||||
The itty.bitty links can get [quite long](https://github.com/alcor/itty-bitty/wiki/#url-structure), so it may be prudent to use a link shortener.
|
||||
|
||||
For example, the link [to come](to come) for the `dice.html` page in this repo was generated using [asso.li](https://asso.li/), an [lstu](https://lstu.fr/) instance, with the following command (Linux):
|
||||
|
||||
```bash
|
||||
cat dice.html | lzma -9 | base64 -w0 | xargs -0 printf "https://itty.bitty.site/#Dice Roller/%s\n" | xargs -0 -I {} curl --data-urlencode "format=json" --data-urlencode "lsturl={}" https://asso.li/a | jq -r '.short'
|
||||
```
|
||||
|
||||
You can, optionally, generate such a short link with each pass to each player, as needed.
|
||||
230
dice.html
Normal file
230
dice.html
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
<!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>
|
||||
Loading…
Reference in a new issue