JSFiddle - React, Tailwind, and code Playground

by rudiedirkx

HTML

<pre id="time-left">?</pre>

<p>
    <button id="start">Start</button>
    <button id="move">Good move</button>
</p>

CSS

.gameover {
    background-color: red;
}

JavaScript

var startTimeLeft = 10;

var tl = document.querySelector('#time-left'),
    st = document.querySelector('#start'),
    mv = document.querySelector('#move');

var tickStart = 0;
function tick() {
    var tickSpent = (Date.now() - tickStart) / 1000,
        timeLeft = startTimeLeft - tickSpent;
    tl.textContent = Math.round(timeLeft * 10) / 10;
    if ( timeLeft > 0 ) {
        requestAnimationFrame(tick);
    }
    else {
        document.body.classList.add('gameover');
    }
}

st.onclick = function() {
    if ( !tickStart ) {
        tickStart = Date.now();
        tick();
    }
};

var moves = 0;
mv.onclick = function() {
    if ( tickStart ) {
        if ( ++moves % 5 == 0 ) {
            startTimeLeft += 5;
        }
        else {
            startTimeLeft += 1;
        }
    }
};