Drazel Monsters

by yinyann

HTML

<div id="content">
    <select id="level">
        <option value="Level1">level 1</option>
        <option value="Level2">level 2</option>
        <option value="Level3">level 3</option>
    </select>
    <input type="button" id="tirage" value="tirage" />
    <input type="button" id="more" value="+" />
    <div class="un" >
        <div class="dices">
            <span class="ui-state-default">0</span>
            <span class="ui-state-default">0</span>
        </div>
        <div class="monster"></div>
    </div>
</div>

CSS

.dices { font-size: 3em; text-align: center; float: left;  }
.monster { clear: both;  }
.dices, .monster { display : inline-block; width: 100px; height: 90px; padding: 1px; }

JavaScript

var monsters = {
    No : { name : "rien" },
    Gork : { name: "lent" },
    Skrat : { name : "rapide" },
    Fatty : { name : "1 costaud + 2 lents" },
    Level1 : [ "No", "No", "No", "No", "No", "Gork", "Gork", "Gork", "Skrat", "Skrat", "Fatty" ],
    Level2 : [ "No", "No", "No", "Gork", "Gork", "Gork", "Gork", "Skrat", "Skrat", "Fatty", "Fatty" ],
    Level3 : [ "No", "Gork", "Gork", "Gork", "Skrat", "Skrat", "Skrat", "Skrat", "Fatty", "Fatty", "Fatty" ]
}


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

function getMonster(div) {
    var dice1 = div.find(".dices > span:nth-child(1)").text()*1;
    var dice2 = div.find(".dices > span:nth-child(2)").text()*1;
    div.find(".monster").html(monsters[monsters[$("#level").val()][dice1+dice2-2]].name);
}


$("#tirage").on("click", function(){
    $("div.dices > span").each(function(){
        $(this).text(number());
    });
    $("div.un").each(function(){ getMonster($(this)) });
});
$("#more").on("click", function(){
    $("#content").append($(".un:first").clone());
});