PathFiddler

Pour pas se prendre la tête avec des probas

by yinyann

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

-------- Valeur test  ---------------
<div>
    Valeur du test cible : <input type="text" id="testValue" value="0" size="2" maxlength="2" />
</div>
-----   Choisir des dés   -----------
<div id="AddDices" >
    <div><span data-diceValue="4">4</span></div>
    <div><span data-diceValue="6">6</span></div>
    <div><span data-diceValue="8">8</span></div>
    <div><span data-diceValue="10">10</span></div>
    <div><span data-diceValue="12">12</span></div>
    <div>
        
        
        +<select>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        </select>
        
        <!--<input type="button" value="Roll" onclick="javascript: IHMControls.RollDices();" /> -->
    </div>
</div>
--------  Dés choisis   -------------
<div id="diceListe"></div>
--------  Résultats   ---------------
<div id="diceResult"></div>

<input type="button" value="Calcul" onclick="javascript: IHMControls.CalculMoyenne();" />
<div style="margin-top: 20px;">
    <input type="button" value="Changer les dés" onclick="javascript: IHMControls.RazDices();" />
</div>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

#AddDices span { cursor: pointer; padding: 0 5px;}
#AddDices span:hover { border: 2px lightgrey dotted; }

JavaScript

var dice = function(d){
	this.d = d;
	this.value = 1;
	this.roll = function(){
		this.value = (Math.floor(Math.random() * this.d) + 1 );
		return this.value;
	};
};

var DicesCollection = function () {

	this.dices = [];
	this.total = 0;

	this.addDice = function(d){
		this.dices[this.dices.length] = new dice(d);
	};

	this.rollDices = function(){
	this.total = 0;
		for(var cpt = 0; cpt < this.dices.length; cpt++)
		{
			this.total += this.dices[cpt].roll();
		}
	};
    
    this.getMax = function(){
        var total = 0;
        for(var cpt = 0; cpt < this.dices.length; cpt++)
		{
			total += this.dices[cpt].d * 1 ;
		}
        return total;
    };

    this.razDices = function () {
        this.dices.length = 0;
        this.total = 0;
    };
};

var DicesChart = {
    Results : [],
    xAxis : [],
    Init : function(maxResults){
        DicesChart.Results.length = maxResults;
        DicesChart.xAxis.length = maxResults;
        for(var i = 0; i < maxResults; i++)
        {
            DicesChart.Results[i] = 0;
            DicesChart.xAxis[i] = i + 1;
        }
    },
    AddValue : function(value)
    {
        if(value > DicesChart.Results.length)
            return;
        
        DicesChart.Results[value-1] = DicesChart.Results[value-1] + 1;
    }
};

var IHMControls = {
    DicesCollection: new DicesCollection(),
    Init: function(){
        $("#AddDices span").on("click", function(){
            var span = $(this);
            var diceValue = span.attr("data-diceValue");
            
            IHMControls.DicesCollection.addDice(diceValue);
            IHMControls.RefreshDices();
        });
    },
    RollDices: function(){
        IHMControls.DicesCollection.rollDices();
        IHMControls.RefreshDices();
    },
    RazDices: function () {
        IHMControls.DicesCollection.razDices();
        $("#AddDices select").val("0");
        IHMControls.RefreshDices();
    },
    RefreshDices: function () {
        var container = $("#diceListe");
   ...