fphammerle
/
dice


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!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('img');
        dice_value = rand_dice();
        dice_tag.alt = dice_value;
        dice_tag.src = 'img/dice/' + dice_value + '.svg';
        roll_tag.appendChild(dice_tag);
    }
    prependChild(document.getElementById('rolls'), roll_tag);
}

</script>

<style>

footer {
    color: gray;
    font-size: 0.64em;
    margin-top: 1em;
}

footer a {
    color: gray;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

#rolls div {
    margin-top: 0.4em;
}

#rolls img {
    height: 3em;
    margin-right: 0.4em;
}

</style>

<p>
    dices
    <input id="dice_num" type="number" min="1" max="32" 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>

<footer>
    <a href='https://git.hammerle.me/fphammerle/dice'>src</a>
    | icons from
    <a href="https://www.flaticon.com/authors/freepik" title="Freepik">flaticon:freepik</a>
</footer>

</html>