Digital Solutions

Async Animations

What Is async? "things that dont wait for eachother"

animations.html

<!DOCTYPE html>
<html>
    <head>
        <title>Aniamtions with timeouts</title>
        <link rel="stylesheet" type="text/css" href="animations.css">
    </head>
    <body>
        Distance to cup: <span id="distance"></span>m<br>
        <button onclick="swing();" id="swingbutton">SWING</button><br>
        You swung: <span id="swing"></span>m<br>
        Score: <span id="score">0</span>
        <h3>Club selection:</h3>
        <select id="club">
            <option value="iron">Iron 20-50m range</option>
            <option value="putt">Putter 1-6m range</option>
        </select>
        <br>
        <img id="animations" height=200 width=200>
        <script src="animations.js"></script>
    </body>
</html>

animations.css

body{
    background-color: salmon;
}

animations.js

anim_swing = "https://upload.wikimedia.org/wikipedia/commons/6/6e/Golf_Swing_Animation.gif"
tee_off = "https://www.publicdomainpictures.net/pictures/100000/velka/golfer-teeing-off.jpg"
putting_gif = "https://i.gifer.com/6Tt.gif";
image_element = document.getElementById("animations");
button_element = document.getElementById("swingbutton");
image_element.src = tee_off;

distance = 100;
document.getElementById("distance").innerHTML = distance; 
score = 0;

function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } //sleepy

async function animate(pic) {
    button_element.style.display = "none"; //hide button so no spam
    image_element.src = pic; //change picture temporarily
    await sleep(4000); //4 seconds == 4000ms
    image_element.src = tee_off;  //reset
    button_element.style.display = "block"; //show button again
    if (distance == 0){ button_element.style.display = "none"; } //WINNER! XD
}

function swing(){
    score = score + 1;
    club = document.getElementById("club").value;
    if (club == "iron"){ max=50; min=20; animate(anim_swing);  }
    if (club == "putt"){ max=6; min=1; animate(putting_gif); }
    myswing = Math.floor(Math.random() * (max - min + 1)) + min;
    distance = distance - myswing;
    if (distance < 1){ distance = Math.abs(distance); }
    document.getElementById("swing").innerHTML = myswing;
    document.getElementById("distance").innerHTML = distance;
    document.getElementById("score").innerHTML = score;
}