JSFiddle - React, Tailwind, and code Playground

by yinyann

HTML

<input type="button" id="clear" value="X" />
<input type="button" id="throw" value=">>" />
<div class="un">
    <span>
        <span class="number ui-state-default">0</span> 
        <input type="checkbox" checked="checked" />
    </span>
    <span>
        <span class="number ui-state-default">0</span> 
        <input type="checkbox" checked="checked" />
    </span>

    <span>
        <span class="number ui-state-default">0</span> 
        <input type="checkbox" checked="checked" />
    </span>

</div>

CSS

.un {font-size: 3em; text-align: center; margin: 3px 3px 3px 0; padding: 1px;}

.un > span { display: inline-block; }

JavaScript

var results = ["3 blés","3 ouvriers","2 blés ou 2 ouvriers","2 ressources et 1 crâne","1 resource","7 or"]

function number(){
    var nb = Math.floor(Math.random() * 6) + 1;
    return nb;
}

var Game={
				Init : function(){
					$("#throw").on("click", function(){
						Game.RollSelectedDices();
					});
					$("#clear").on("click", function(){
						Game.Clear();
					});
				},
				RollSelectedDices : function(){
					$("div > span").each(function(){
						if($(this).find("input[type=checkbox]")[0].checked)
						{
							var mynumber = number();
							$(this).find(".number").text(mynumber);
							$(this).attr("title", results[mynumber - 1]);
						}
					});
				},
				Clear : function(){
						$("div > span").each(function(){
						$(this).find("input[type=checkbox]")[0].checked = true; 
						$(this).find(".number").text("0");
						$(this).attr("title", "");
					});
				}
			}

Game.Init();