Money: <span id="money">null</span><br>
Won: <span id="won">0</span><br>
Loss: <span id="loss">0</span><br>
Luckiness: <span id="luckiness">0</span><br>
Bet: <span id="bet">null</span><br><br>
Default bet: <span id="def-bet">null</span><br><br>
<button id="play" disabled>Play</button>
<button id="default-bet" disabled>Set bet to default</button>
<button id="autoplay" disabled>Autoplay</button>
<button id="stop-autoplay" disabled>Stop autoplay</button>
<br><br>
<input placeholder="Start money" id="start-money" value="100">
<script async src="https://arc.io/widget.min.js#PtWkKp1P"></script>
<button id="create-player">Create player</button><br>
<input placeholder="Bet" id="bet-input" value="1">
<button id="create-game" disabled>Create game</button><br>
<input placeholder="Default bet" id="set-def-bet" value="1">
<button id="set-def-bet-btn" disabled>Set default bet to</button>
<br><br>
1. Create player<br>
2. Create game<br>
3. Start pressing Play to research Martingale<br><br>
<canvas id="myChart" width="800" height="300"></canvas>
<style>
	#myChart {
		max-width: 800px;
		max-height: 300px;
	}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script>
	let player;
	let game;
	let history = [];
	let bets = [];
	let labels = [];
	let luckiness = [];
	let i = 0;
	let int;

	let ctx = document.getElementById('myChart').getContext('2d');
	let gi = id => document.getElementById(id);

	gi("play").onclick = () => game.play(game.bet);
	gi("create-player").onclick = () => {
		gi("create-game").disabled = false;
		player = new Player(+gi("start-money").value);
	}
	gi("create-game").onclick = () => {
		game = new Martingale(player, +gi("bet-input").value);
		gi("play").disabled = false;
		gi("default-bet").disabled = false;
		gi("set-def-bet-btn").disabled = false;
		gi("autoplay").disabled = false;
		gi("stop-autoplay").disabled = false;
	}
	gi("set-def-bet-btn").onclick = () => {
		game.defaultBet = +gi("set-def-bet").value;
		gi("def-bet").innerText = game.defaultBet;
	}
	gi("autoplay").onclick = () => {
		if(int) return;
		int = setInterval(() => {
			if(game.bet > player.money) gi("stop-autoplay").click();
			else game.play();
		}, 75);
	}
	gi("stop-autoplay").onclick = () => {
		if(int) {
			clearInterval(int);
			int = null;
		}
	}
	gi("default-bet").onclick = () => {
		game.bet = game.defaultBet;
	}
	class Player {
		constructor(money) {
			this.money = money;
			this.won = 0;
			this.loss = 0;
			this.luckiness = 0;
		}
	}
	class Martingale {
		constructor(player, bet) {
			this.player = player;
			this.defaultBet = bet;
			this.bet = bet;
			gi("def-bet").innerText = bet;
		}
		play(bet) {
			if(this.player.money < bet) throw "No money";
			let random = Math.random();
			if(random >= 0.5) {
				this.player.money += this.bet;
				this.player.won += this.bet;
				this.player.luckiness += this.bet;
				this.bet = this.defaultBet;
			} else {
				this.player.money -= this.bet;
				this.player.loss += this.bet;
				this.player.luckiness -= this.bet;
				this.bet *= 2;
			}
			bets.push(this.bet);
			history.push(this.player.money);
			luckiness.push(this.player.luckiness);
			labels.push(++i);
			if(labels.length >= 100) {
				labels.shift();
				luckiness.shift();
				history.shift();
				bets.shift();
			}
			gi("money").innerText = this.player.money;
			gi("won").innerText = this.player.won;
			gi("loss").innerText = this.player.loss;
			gi("luckiness").innerText = this.player.luckiness;
			gi("bet").innerText = `${this.bet}x`;
			ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
			new Chart(ctx, {
				type: 'line',
				data: {
					labels,
					datasets: [{
						data: history,
						label: "Money",
						borderColor: "#55ff55",
						fill: "#66ff66"
					},
					{
						data: bets,
						label: "Bet",
						borderColor: "#ff55ff",
						fill: "#ff66ff"
					},
					{
						data: luckiness,
						label: "Luckiness",
						borderColor: "#ffff55",
						fill: "#ffff55"
					}],
				},
				options: {} 
			});
		}
	}
	Chart.defaults.global.animation = 100;
</script>