JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<div>
<label>k=<input id="k" value="3"/></label>
<label>x=<input id="x" value="3"/></label>
<label>a=<input id="a" value="6"/></label>
</div>

<div>
<label>bet=<input placeholder="your bet" id="bet" value="1" type="number" /></label>
<button id="roll">roll dice</button>
</div>

</form>

<pre id="log"></pre>

CSS

div {
  margin: 1em;
}

JavaScript

let k = document.getElementById('k');
let a = document.getElementById('a');
let x = document.getElementById('x');
let bet = document.getElementById('bet');
let log = document.getElementById('log');
let i = 0;
let lost = 0;
document.getElementById('roll').addEventListener('click', e => {
  k.readOnly = true;
  x.readOnly = true;
  a.readOnly = true;

  bet.value = Math.min(1*bet.value, 1*a.value);
  a.value -= bet.value;
  lost = 1* lost + 1*bet.value;
  if (i >= 1*x.value || bet.value * k.value <= lost) {
    a.value = 1* a.value + k.value * bet.value;
    i = 0;
    lost = 0;
    log.innerText += `+${bet.value} * ${k.value} = \$${a.value}\n`;
  } else {
    i+=1;
    log.innerText += `-${bet.value} = \$${a.value}\n`;    
  }

  e.preventDefault();
});