JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<div class="container">
<h1><small>Incre</small>MENTAL!</h1>
    <button id="click" type="button" class="btn btn-primary btn-lg btn-block">CLICK ME</button>
    <hr>
    <p>
    Clicks: <span id="total_clicks">0</span><br />
    Clicks per <small id="time_period">1.00</small> second: <span id="clicks_per_second">0</span>
    </p>
    <h3>Buy</h3>
    <table class="table">
        <tr>
          <td>Autoclicker</td>
          <td><span id="autoclicker_level">lvl 0</span></td>
          <td><button id="buy_click" type="button" class="btn btn-success">Buy for 1</button></td>
        </tr>
        <tr>
          <td>Speed up by 10%</td>
          <td><span id="speed_level">lvl 0</span></td>
          <td><button id="upgrade_speed" type="button" class="btn btn-success">Buy for 100</button></td>
        </tr>
        <tr>
          <td>Increase Clicks Increment</td>
          <td></td>
          <td><button id="increase_clicks" type="button" class="btn btn-success">Buy for 100</button></td>
        </tr>
    </table>
</div>

CSS

.container {
  padding:5px 30px 30px 30px;
  margin:30px;
  border:solid white 1px;
  border-radius:5px;
  /*background-color:#e6e6e6;*/
  text-align:center;
}

.btn-success, .btn-danger {
  width:200px;
}

JavaScript

//variables
var clicks = 0; //increment this by one every click
var auto_clicks = 0; //automatically click once per second
var cost = 1; //the cost of this should increase exponentially
var upgrade_speed = 0; //the level of the speed up upgrade
var click_rate = 1000; //ms between each autoclick
var interval_auto; //storing our interval here so we can update it
var click_increment = 1; //how many clicks per click
//functions

function update_total_clicks() { //updates the number of clicks   
    var e = document.getElementById("total_clicks");
    e.innerHTML = clicks;
}

function buy_something(c, button) {
    if (clicks < c) {
        button.className = 'btn btn-danger';
        setTimeout(function() {
            var e = document.getElementsByClassName("btn-danger")[0];
            e.className = 'btn btn-success';
        }, 1000);
        return false;
    }
    clicks -= c;
    return true;
}

function update_workers() {
    var e2 = document.getElementById("time_period");
    e2.innerHTML = parseFloat(click_rate / 1000.0).toFixed(2);
    clearInterval(interval_auto);
    interval_auto = setInterval(function() {
        clicks += auto_clicks;
        update_total_clicks();
    }, click_rate);
}
//click events
document.getElementById("click").onclick = function() {
    clicks = parseFloat(clicks) + parseFloat(click_increment);
    update_total_clicks(); //updates the text
};
document.getElementById("buy_click").onclick = function() {
    if (!buy_something(cost, this)) return;
    auto_clicks++;
    cost = Math.pow(2, auto_clicks); //new cost
    update_total_clicks();
    var e = document.getElementById("clicks_per_second");
    e.innerHTML = auto_clicks;
    var e2 = document.getElementById("buy_click");
    e2.innerHTML = 'Buy for ' + cost;
    var e2 = document.getElementById("autoclicker_level");
    e2.innerHTML = 'lvl  ' + auto_clicks;
};
document.getElementById("upgrade_speed").onclick = function() {
    var upgrade_cost = (Math.pow(3, upgrade_speed))...