JSFiddle - React, Tailwind, and code Playground
HTML
<div>Diablo Character powa!: <span id="d3c">0</span>
</div>
<input type="button" id="killd3" name="killd3" value="Play Diablo, kill monster" />
<div id="info"></div>
<hr />
<div>MMO Character powah!: <span id="mmoc">0</span>
</div>
<input type="button" id="buyexp" name="buyexp" value="Buy expansion! (60euro)" style="display:none;" /><br />
<input type="button" id="killmmo" name="killmmo" value="Play MMO, kill monster" /><br />
<input type="button" id="killmmo2" name="killmmo" value="Play MMO, kill monster with new content" style="display:none" /><br />
<input type="button" id="killmmo3" name="killmmo" value="Play MMO, kill monster with new content" style="display:none" /><br />
<input type="button" id="killmmo4" name="killmmo" value="Play MMO, kill monster with new content" style="display:none" /><br />
<div id="info2"></div>
JavaScript
var currentd3 = parseInt($("span#d3c").text());
var currentmmo = parseInt($("#mmoc").text());
$("#killd3").click(function () {
var randomizer = Math.floor(Math.random() * currentd3 + 7) + 1;
if (randomizer > currentd3) currentd3++;
else {
$("#info").slideDown().text("Often (usually) nothing useful drops! But keep killing!!! Sometimes uber drops happen!");
}
$("span#d3c").text(currentd3);
});
$("#buyexp").click(function () {
if (currentmmo === 5) {
$("#killmmo2").show();
$("#buyexp").hide();
}
if (currentmmo === 10) {
$("#killmmo3").show();
$("#buyexp").hide();
}
if (currentmmo === 15) {
$("#killmmo4").show();
$("#buyexp").hide();
}
});
$("#killmmo, #killmmo2, #killmmo3, #killmmo4").click(function () {
currentmmo++;
if (currentmmo === 5) {
$("#killmmo").attr("disabled", "true").attr("value", "old crap content!");
$("#buyexp").show();
}
if (currentmmo === 10) {
$("#killmmo2").attr("disabled", "true").attr("value", "old crap content!");
$("#buyexp").show();
}
if (currentmmo === 15) {
$("#killmmo3").attr("disabled", "true").attr("value", "old crap content!");
$("#buyexp").show();
}
if (currentmmo !== 20) {
$("#mmoc").text(currentmmo);
$("#info2").hide();
} else {
$("#mmoc").text("Maximum powah 20 reached! No more content, no more progress.");
$("#killmmo4").attr("disabled", "true").attr("value", "old crap content!");
}
});