JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div>
  <label for="range">Initial chance (e.g. 1/???):</label>
  <input type="number" step="1" id="range" min="1" placeholder="Initial chance" value="500" />
</div>
<div>
  <label for="chance">Chance increase (per attempt):</label>
  <input type="number" id="chance" min="0" step="0.1" placeholder="Chance increase (per attempt)" value="1" />
</div>
<div>
  <button id="run">
    Run simulation
  </button>
</div>

<div id="target"></div>

CSS

p,
input,
label{
  display: block;
  margin: 10px 0;
  font-family: monospace;
}

#target{
  margin: 10px 0;
}

div.attempt{
  display: block;
  background-color: #aaa;
  height: 4px;
  position: relative;
}
div.attempt:nth-child(2n){
  background-color: #bbb;
}

span{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 1px solid #000;
}

JavaScript

document.getElementById('run').addEventListener('click', function(){
  
	var range = document.getElementById('range').value * 1,
      chance_increase = document.getElementById('chance').value * 1,
      _target = document.getElementById('target');
      
	_target.innerHTML = '';
  
  for(var n = 1, i = range, d = false; i > 0 && !d; i -= chance_increase, n++){
    var e = document.createElement('div'),
        m = document.createElement('span'),
        r = Math.ceil(Math.random() * range);
    e.style.width = r + 'px';
    e.className = 'attempt';
    m.style.transform = 'translateX(' + i + 'px)';
    e.appendChild(m);
    _target.appendChild(e);
    if(r >= i){
      d = true;
      _target.innerHTML += '<p>Dropped after ' + n + ' ' + (n === 1 ? 'try' : 'tries') + ' (out of ' + range + ') at chance ' + ((100 / range) + (100 - ((i / range) * 100))).toFixed(5) * 1 + '%</p>';
    }
  }

  if(!d){
    _target.innerHTML += '<p>No drop!</p>';
  }
  
});