fphammerle
/
dice


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Dice</title>

<script>

const DICE_NUM_MIN = 1;
const DICE_RAND_MIN = 1;
const DICE_RAND_MAX = 6;

function rand_int(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function rand_dice() {
    return rand_int(DICE_RAND_MIN, DICE_RAND_MAX);
}

function get_dice_num() {
    n = parseInt(document.getElementById('dice_num').value);
    if(isNaN(n) || n < DICE_NUM_MIN) {
        return 1;
    }
    return n;
}

function set_dice_num(n) {
    document.getElementById('dice_num').value = Math.max(n, DICE_NUM_MIN);
}

function increment() {
    set_dice_num(get_dice_num() + 1);
}

function decrement() {
    set_dice_num(get_dice_num() - 1);
}

function prependChild(parent_tag, child_tag) {
    parent_tag.insertBefore(child_tag, parent_tag.firstChild);
}

function roll() {
    roll_tag = document.createElement('div');
    dice_num = get_dice_num();
    for(i=0; i<dice_num; i++) {
        dice_tag = document.createElement('span');
        dice_tag.appendChild(document.createTextNode(rand_dice() + ' '));
        roll_tag.appendChild(dice_tag);
    }
    prependChild(document.getElementById('rolls'), roll_tag);
}

</script>

<style>

.src {
    font-size: 0.64em;
}

.src a {
    color: gray;
    text-decoration: none;
}

.src a:hover {
    text-decoration: underline;
}

</style>

<p>
    dices
    <input type="text" id="dice_num" align="middle"
        type="number" min="1" size="2" value="6">
    <input type="button" onclick="decrement()" value="-">
    <input type="button" onclick="increment()" value="+">
    <input type="button" onclick="roll()" value="roll">
</p>

<div id="rolls"></div>

<p class='src'><a href='https://git.hammerle.me/fphammerle/dice'>src</a></p>

</html>