JSFiddle - React, Tailwind, and code Playground

HTML

Don't hit the "Result" button above this message. That's just a jsfiddle thing, it reloads the page.<br><br>

<b>You win when x is Infinity.</b><br><br>

<button id="buy-char" class="btn btn-primary">Buy character (1000)</button>

<div>x: <span id="x-display">0</span></div>

Characters used: <span id="chars-used">3</span>/<span id="chars-total">3</span><br>
Forbidden: [<span id="forbidden"></span>, another x]<br>

<textarea id="code">x++</textarea>

<div id="error"></div>

CSS

body {
    padding: 10px
}

JavaScript

var true_x = 0
var chars = 3
var $buy_char = $('#buy-char')
var last_code = 'x++'
var forbidden = ['e', 'E', '*', '/', '5', '6', '7', '8', '9']
var game_loop

init()

function init() {
    $buy_char.on('click', buyChar)
    $('#forbidden').text(forbidden.join(', '))
    $('#code').on('keydown', handleKey).on('keyup', handleKey)
    game_loop = setInterval(update, 1)
}

function buyChar() {
    var price = Math.pow(10, chars)
    if (true_x < price) {return}
    
    chars++
    true_x -= price
    $buy_char.text('Buy character (' + (price * 10) + ')')
    $('#chars-total').text(chars)
}

function handleKey(e) {
    var code = $('#code').val()
    
    code = code.replace(/[eE*\/5-9]/g, '')
    code = code.length ? (code[0] + code.substring(1).replace(/x/g, '')) : ''
    
    if (code.length > chars) {
        code = code.substring(0, chars)
	}
    
    $('#code').val(code)
    
    $('#chars-used').text(code.length)
}

function update() {
    handleKey()

    try {
        var x = true_x
        var code = $('#code').val()
        eval(code)
        true_x = x
        $('#error').text('')
    }
    catch (e) {
        $('#error').text(e.toString())
    }
    
    if (true_x == Infinity) {
        alert('You win!')
        clearInterval(game_loop)
    }
    
    $('#x-display').text(true_x)
}