%%html

<style>
@keyframes click {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

button:active {
    animation: click 0.1s;
}
</style>

<div id="score2">Score: 0</div>
<div id="highscore2">High Score: 0</div>
<button id="clicker-button2" onclick="incrementScore()">Click me!</button>

<script>
var score = 0;
var highScore = 0;

function incrementScore() {
    score += 1;
    document.getElementById('score2').innerText = "Score: " + score;
    
    // check if the current score is higher than the high score
    if (score > highScore) {
        highScore = score;
        document.getElementById('highscore2').innerText = "High Score: " + highScore;
    }
}
</script>

%%html

<style>
#clicker-button1 {
    width: 100px;
    height: 100px;
    border: none;
    outline: none;
    background: url('/home/alexkumar/vscode/fastpages-APCSP/_notebooks/monkey-head-with-pixel-art-illustration-free-vector-PhotoRoom.png-PhotoRoom.png') no-repeat;
    background-size: cover;
    cursor: pointer;
    transition: transform 0.3s;
}
</style>

<div id="score1">Score: 0</div>
<div id="highscore1">High Score: 0</div>
<button id="clicker-button1" onclick="incrementScore()"></button>

<script>
var score = 0;
var highScore = 0;
var growth = 1.0;  // The button's initial size (as a scaling factor)

function incrementScore() {
    score += 1;
    document.getElementById('score1').innerText = "Score: " + score;
    
    // check if the current score is higher than the high score
    if (score > highScore) {
        highScore = score;
        document.getElementById('highscore1').innerText = "High Score: " + highScore;
    }

    // increase the button's size by 1% for each click, up to a maximum of 50% increase
    if (growth < 3) {
        growth += 0.01;
        document.getElementById('clicker-button1').style.transform = 'scale(' + growth + ')';
    }
}
</script>