JSFiddle - React, Tailwind, and code Playground

by Travis Harris

HTML

<table id='form'>
<tr>
  <th>Bankroll:</th>
  <td><input type='text' id='bankroll' value='1.234'/></td>
</tr>
<tr>
  <th>Bank Above:</th>
  <td><input type='text' id='bank_above' value='1.5'/></td>
</tr>
<tr>
  <th>Min Bet:</th>
  <td><input type='text' id='min_bet' value='.005'/></td>
</tr>
<tr>
  <th>Max Bet:</th>
  <td><input type='text' id='max_bet' value='1'/></td>
</tr>
<tr>
  <th>Line:</th>
  <td><select id='line'>
<option value='blue'>Blue</option>
<option value='green'>Green</option>
<option value='yellow'>Yellow</option>
<option value='red'>Red</option>
<option value='promo'>Promo</option>
</select></td>
</tr>
<tr>
  <th>Progression:</th>
  <td><input type='text' id='progression' value='-0.25'/></td>
</tr>
<tr>
  <th colspan='2'>Promo Line (Left to middle):</th>
</tr>
<tr>
  <td colspan='2'><input type='text' id='promo0' value='2016' />
<input type='text' id='promo1' value='10' />
<input type='text' id='promo2' value='10' />
<input type='text' id='promo3' value='20.15' />
<input type='text' id='promo4' value='2.5' />
<input type='text' id='promo5' value='1.2' />
<input type='text' id='promo6' value='0.3' />
<input type='text' id='promo7' value='0.3' />
<input type='text' id='promo8' value='0.3' /></td>
</tr>
<tr>
  <td colspan='2' align='right'><button id='roll' onclick='simulate();'>Run Simulation</button></td>
</tr>
</table>
<div id='tables'>
<table id='summary'>
    <thead>
    <tr>
      <th># of bets</th>
      <th>Total Bet</th>
      <th>Balance</th>
      <th>Bank</th>
      <th>Fees Paid</th>
    </tr>
  </thead>
</table>
<table id='bets'>
</table>
<table id='rows'>
  <thead>
    <tr>
      <th>#</th>
      <th>Bet Amount</th>
      <th>Multiplier</th>
      <th>Winnings</th>
      <th>Ballance</th>
      <th>Bank</th>
    </tr>
  </thead>
</table>
</div>

CSS

body{
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size:10px;  
}
#promo0,#promo1,#promo2,#promo3,#promo4,#promo5,#promo6,#promo7,#promo8{
  width:27px;
}
#tables table td{
  text-align:center;
}
td{
    border:1px solid black;
}
table{
  margin-bottom:5px;
  border-collapse:collapse;
}
th{
  color:white;
  background-color:black;
  font-weight:bold;
  border-right:1px solid white;
  border-top:1px solid white;
}
th:last-child{
  border-right:1px solid black;
}
thead th{
  border-top:1px solid black;
}
input,select{
  font-size:inherit;
}

JavaScript

simulate = function(){
  //Config area
  var bankroll = document.getElementById('bankroll').value;
  var bank_above = document.getElementById('bank_above').value;
  var min_bet = document.getElementById('min_bet').value;
  var max_bet = document.getElementById('max_bet').value;
  var progression = document.getElementById('progression').value;
  var line = document.getElementById('line').value;
  var promo = {
    row:[
    document.getElementById('promo0').value,
    document.getElementById('promo1').value,
    document.getElementById('promo2').value,
    document.getElementById('promo3').value,
    document.getElementById('promo4').value,
    document.getElementById('promo5').value,
    document.getElementById('promo6').value,
    document.getElementById('promo7').value,
    document.getElementById('promo8').value
    ],
    min:.002,
    max:50
  };
  
  var to_delete = document.querySelectorAll('#tables table tbody,#bets thead');
  for(var k=0;k<to_delete.length;k++){
  	to_delete[k].parentNode.removeChild(to_delete[k]);
  }

  //Don't touch below here
  var blue = {
    row:[3,1.4,1.3,1.2,1.1,.2,1.1,1.1,1.1],
    min:.002,
    max:50
  };
  var green = {
    row:[22,5,3,2,1.4,1.2,1.1,1,0.4],
    min:.002,
    max:5
  };
  var yellow = {
    row:[111,38,12,5,3,1.4,1,0.5,0.3],
    min:.002,
    max:1
  };
  var red = {
    row:[999,130,24,9,4,2,.2,.2,.2],
    min:.002,
    max:.1
  };
  lines = {blue:blue,green:green,yellow:yellow,red:red,promo:promo};
  if(typeof lines[line.toLowerCase()] === 'undefined'){
    throw "Invalid Line Specified";
  }
  line = lines[line.toLowerCase()];
  var row = line.row;
  if(line.min > min_bet)min_bet = line.min;
  if(line.max < max_bet)max_bet = line.max;
  var transfer_fee = .0002;
  var min_unit = 0.00000001;
  var max_bets = 100000;
  var r = row.concat(row.slice(0,-1).reverse());
  var _r = Array.apply(null, Array(r.length)).map(Number.prototype.valueOf,0);
  var m = 1/min_unit;
  function to_units(val){
    return...