|
@@ -0,0 +1,71 @@
|
|
|
+<!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>
|
|
|
+
|
|
|
+<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>
|
|
|
+
|
|
|
+</html>
|