JSFiddle - React, Tailwind, and code Playground

by whizzball1

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="container">
    <ul class="nav nav-tabs" id="myTab">
        <li><a href="#home" data-toggle="tab">Home</a>

        </li>
        <li><a href="#atoms" data-toggle="tab">Atoms</a>

        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="home">
             <h1>Periodic Alchemy <small>An Incremental</small></h1>

            <button id="save" type="button" class="btn btn-primary">Save your game.</button>
            <button id="load" type="button" class="btn btn-primary">Load your game.</button>
            <hr></hr>
            <button id="up_quark" type="button" class="btn btn-primary">Click me to create an up quark.</button>
            <hr></hr>
            <button id="electron" type="button" class="btn btn-primary">Click me to create an electron.</button>
            <hr></hr>
            <button id="down_quark" type="button" class="btn btn-primary">Click me to create a down quark.</button>
            <hr></hr>
            <button id="proton" type="button" class="btn btn-primary">Create a proton for 2 up quarks and one down quark.</button>
            <hr></hr>
            <button id="neutron" type="button" class="btn btn-primary">Create a neutron for 2 down quarks and one up quark.</button>
            <hr></hr>
            <p>Up Quarks: <span id="total_up_quark_clicks">0</span>

                <br />Electrons: <span id="total_electron_clicks">0</span>

                <br />Down Quarks: <span id="total_down_quark_clicks">0</span>

                <br />Up Quarks per <small id="time_period">1.00</small> second: <span id="up_quarks_per_second">0</span>
Electrons per <small id="time_period">1.00</small> second: <span id="electrons_per_second">0</span>
Down Quarks per <small id="time_period">1.00</small> second:...

JavaScript

var player = {
    upQuarkClicks: 0,
    electronClicks: 0,
    downQuarkClicks: 0,
    auto_up_quark_clicks: 0,
    auto_electron_clicks: 0,
    auto_down_quark_clicks: 0,
    auto_proton_clicks: 0,
    auto_neutron_clicks: 0,
    up_quark_click_cost: 15,
    electron_click_cost: 15,
    down_quark_click_cost: 15,
    proton_click_cost: 15,
    neutron_click_cost: 15,
    upgrade_up_quark_1_cost: 50,
    upgrade_electron_1_cost: 50,
    upgrade_down_quark_1_cost: 50,
    auto_up_quark_clicks_amount: 1,
    auto_electron_clicks_amount: 1,
    auto_down_quark_clicks_amount: 1,
    auto_proton_clicks_amount: 1,
    auto_neutron_clicks_amount: 1,
    upgrade_up_quark_click_1_bought: "False",
    upgrade_electron_click_1_bought: "False",
    upgrade_down_quark_click_1_bought: "False",
    proton_up_quark_cost: 2,
    proton_down_quark_cost: 1,
    neutron_up_quark_cost: 1,
    neutron_down_quark_cost: 2,
    protonClicks: 0,
    neutronClicks: 0,
    hydrogen2DeuteriumClicks: 0,
    hydrogen1ProtiumClicks: 0,
    hydrogen3TritiumClicks: 0,
    helium3Clicks: 0,
    helium4Clicks: 0,
    lithium6Clicks: 0,
    lithium7Clicks: 0
};

function set_cookie(cookie_name, value) {
    expiry = new Date();
    expiry.setTime(new Date().getTime() + (10 * 60 * 1000));
    var c_value = escape(btoa(JSON.stringify(value))) +
        "; expires=" + expiry.toUTCString();
    document.cookie = cookie_name + "=" + c_value;
}

function get_cookie(cookie_name) {
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + cookie_name + "=");
    if (c_start == -1) {
        c_start = c_value.indexOf(cookie_name + "=");
    }
    if (c_start == -1) return false;
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);
    if (c_end == -1) {
        c_end = c_value.length;
    }
    c_value = atob(unescape(c_value.substring(c_start, c_end)));
    return JSON.parse(c_value);
}

function update_view() {
    update_total_clicks();
    var...