JSFiddle - React, Tailwind, and code Playground

Farm Minigame Interface

by Entoarox

HTML

<script>
    console.clear()
</script>
<div id="page-content" class=".page_games-farm-index">
<section data-percent="15/100" style="width:960px;" id="experience">
    <div style="width:15%"></div>
</section>
<section style="width:960px;" id="seeds">
    <div data-crop="1" tabindex="-1">
        <span>Tomato</span>
        <span></span>
        <span>10 Mins</span>
        <span>0.002</span>
    </div>
    <div data-crop="2" tabindex="-1">
        <span>Potato</span>
        <span></span>
        <span>1 Hour</span>
        <span>0.012</span>
    </div>
    <div data-crop="3" tabindex="-1">
        <span>Carrot</span>
        <span></span>
        <span>2 Hours</span>
        <span>0.024</span>
    </div>
    <div data-crop="4" tabindex="-1">
        <span>Artichoke</span>
        <span></span>
        <span>6 Hours</span>
        <span>0.072</span>
    </div>
    <div data-crop="5" tabindex="-1">
        <span>Strawberry</span>
        <span></span>
        <span>12 Hours</span>
        <span>0.144</span>
    </div>
    <div data-crop="6" tabindex="-1">
        <span>Cucumber</span>
        <span></span>
        <span>1 Day</span>
        <span>0.288</span>
    </div>
    <div data-crop="7" tabindex="-1">
        <span>Corn</span>
        <span></span>
        <span>2 days</span>
        <span>0.576</span>
    </div>
    <span>Select field to plant or click here to cancel.</span>
</section>
<section id="farm">
<div data-crop="1" data-stage="0">
<div data-speed="75" data-progress="0"></div>
</div>
<div data-crop="2" data-stage="0">
<div data-speed="100" data-progress="0"></div>
</div>
<div data-crop="3" data-stage="0">
<div data-speed="125" data-progress="0"></div>
</div>
<div data-crop="4" data-stage="0">
<div data-speed="150" data-progress="0"></div>
</div>
<div data-crop="5" data-stage="0">
<div data-speed="175" data-progress="0"></div>
</div>
<div data-crop="6" data-stage="0">
<div data-speed="200" data-progress="0"></div>
</div>
<div data-crop="7"...

CSS

section
{
    position:relative;
    border-radius:10px;
    box-shadow:1px 1px 5px #000;
    padding:5px;
    margin:5px;
}
section::after
{
    content:"";
    display:block;
    clear:both;
}
h1
{
    margin:-7px -7px 5px;
    padding:7px 7px 0;
    border-bottom:1px solid #ccc;
}
input[type="button"],input[type="submit"],.button,article.shop a
{
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAB4CAYAAAA60zj6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAxMzowODoyMCAxNDoxMTozMIs2lsQAAAGdSURBVEhL5ZW7TsNAEEXt8JIAQYcEBSU/kAZHoqHOF5Cehh+j5o/SULmLeSPCnH2M92VBYQQSV7rx5OrO2N6dHVcl1Ov1+tbFCsQbFysmwueUg+JLyt9N541OJYiAeORiBeKhixWIuy5W1MK5DXtw9wz/WSyC9Rzuurqu34wioCbbuskfMSyEcy+yteBRuEL0+w0Qu0Hnl+kPwsz5JNSaEKgT1yuKoHijqKZP15phujpZCL8YtqaszuVsNruwWtXK/ynOFG1J/JEtHluULV6Gh+vEXeMT1zTNAdfiMSyi3HXCaxv2wHnnYgXPuUqJ2KUcdH5fHLsmbzSVIALimYsViMcuVrBK5zbsgZilc/cMG8I94XtI0rPxi3Nb+BES574wAuKODXsgFp8gw+Br5s0gnXblYgXOsbpODFtcJxLMhQuj2plnPmfsIIcfMCWMSFeEovlEFp2DIlMGaDo1mUeg6DSDK63J0NK7hzX1OX3NKN07o3Rf08w9Zh1N26Iw85h9OI0QAjHDXxRle5cuVqRdd8/PRLqug14Aha6rqk+ulRnNCTRm9wAAAABJRU5ErkJggg==");
    background-position:0 -3px;
    height:24px;
    line-height:24px;
    display:inline-block;
    margin:0;
    padding:0;
    background-color:#800;
    border:1px solid #800;
    font-size:12pt;
    color:#fff;
    text-decoration:none;
    font-family:Arial;
    text-align:center;
    border-radius:5px;
    box-shadow:1px 1px 3px #000;
}
input[type="button"]:hover,input[type="submit"]:hover,.button:hover,article.shop a:hover
{
    background-position:0 -63px;
}
input[type="button"]:disabled,input[type="submit"]:disabled,.button.disabled,article.shop a:not([href])
{
    background-position:0 -3px!important;
    opacity:.5;
}
/******************************************************/
/******************************************************/
/******************************************************/
/*
    CSS unique to the...

JavaScript

var a = $('#farm div[data-crop]:not([data-crop="0"])'),
    z=0;
window.doGrowth = function (crop,parent) {
    var progress = 1 + (+crop.attr('data-progress')),
        speed = +(crop.attr('data-speed'));
    crop.attr('data-progress', progress);
    if (progress < 100) {
        // Crop growth
        if(!crop.hasClass('stage2'))
           parent.attr('data-stage',Math.floor(progress/33));
        setTimeout(function () {
            doGrowth(crop,parent)
        }, speed);
    } else if (!crop.hasClass('stage2')) {
        // Start crop death
        parent.attr('data-stage',3);
        crop.addClass('stage2');
        crop.attr('data-progress', 0);
        setTimeout(function () {
            doGrowth(crop,parent)
        }, speed);
    } else {
        // Crop growth & death finished
        parent.attr('data-stage',4);
        setTimeout(function () {
            crop.attr('data-progress', crop.attr('data-start'));
            crop.attr('data-speed', crop.attr('data-remember'));
            crop.removeClass('stage2');
            parent.attr('data-stage',0);
            doGrowth(crop,parent);
        }, 5000);
    }
}
window.startGrowth = function () {
    if(z>0)return;
    z=a.length;
    a.each(function () {
        var parent = $(this),crop=parent.children();
        crop.attr('data-start', crop.attr('data-progress'));
        crop.attr('data-progress', crop.attr('data-progress') - 1);
        doGrowth(crop,parent);
    });
}
startGrowth();