<div id="game-container">
    <div id="pint-glass">
        <div id="beer-fill"></div>
    </div>
    <button id="stop-button">Stop</button>
    <div id="result"></div>
</div>

#game-container {
    text-align: center;
    margin-top: 50px;
}

#pint-glass {
    width: 100px;
    height: 200px;
    border: 5px solid #000;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

#beer-fill {
    width: 100%;
    height: 0%;
    background-color: #FFD700;
    position: absolute;
    bottom: 0;
}

#stop-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

#result {
    margin-top: 20px;
    font-size: 18px;
}

let fillInterval;
let fillPercentage = 0;

function startFilling() {
    fillInterval = setInterval(() => {
        fillPercentage += 1;
        document.getElementById('beer-fill').style.height = fillPercentage + '%';

        if (fillPercentage >= 100) {
            clearInterval(fillInterval);
            document.getElementById('result').innerText = "You spilled it!";
        }
    }, 100); // Adjust the speed as necessary
}

document.getElementById('stop-button').addEventListener('click', function () {
    clearInterval(fillInterval);
    if (fillPercentage === 100) {
        document.getElementById('result').innerText = "Perfect pint!";
    } else {
        document.getElementById('result').innerText = `You stopped at ${fillPercentage}%. Try again!`;
    }
});

startFilling(); // Start filling automatically when the page loads