body {
    margin: 0;
    font-family: sans-serif;
  background-color:black;
}

.start-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.start-menu h1 {
    font-size: 48px;
    color: white;
    margin-bottom: 24px;
}

.start-menu p {
    font-size: 24px;
    color: white;
    margin-bottom: 48px;
}

.start-button {
    font-size: 24px;
    padding: 16px 32px;
    background-color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.game-container {
    background: url("https://i.imgur.com/ZGIgXvm.png") ;
    position: relative;
    width: 800px;
    height: 600px;
    border: 1px solid black;
    margin: 0 auto;
    filter: blur(0px);
    transition: filter 0.5s ease-in-out;
}

.game-container.blur {
    filter: blur(5px);
}

.Character {
    position: absolute;
    width: 32px;
    height: 32px;
    overflow: hidden;
}

.Character_spritesheet {
    animation: moveSpritesheet 1s steps(4) infinite;
    width: 128px;
    position: absolute;
}

.Character_shadow {
    position: absolute;
    width: 32px;
    height: 32px;
}

.pixelart {
    image-rendering: pixelated;
}

.player {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.enemy {
    position: absolute;
}

@keyframes moveSpritesheet {
    from {
        transform: translate(0px, 0px);
    }
    to {
        transform: translate(-128px, 0px);
    }
}

.Character_spritesheet.face-left {
    top: -32px;
}

.Character_spritesheet.face-right {
    top: -64px;
}

.Character_spritesheet.face-up {
    top: -96px;
}


/* pokemon size */

.enemy img {
  max-width: 40px;
  max-height: 40px;
}

const player = document.querySelector('.player');
const enemy = document.querySelector('.enemy');
const gameContainer = document.querySelector('.game-container');
const startMenu = document.querySelector('.start-menu');
const startButton = document.querySelector('.start-button');

const playerSpeed = 5;
const attackDistance = 50;

// Spawn player and enemy
spawnPlayer();
spawnEnemy();

function spawnPlayer() {
    player.style.left = '50%';
    player.style.top = '50%';
}

function spawnEnemy() {
    const x = Math.random() * (gameContainer.clientWidth - enemy.clientWidth);
    const y = Math.random() * (gameContainer.clientHeight - enemy.clientHeight);
    enemy.style.left = `${x}px`;
    enemy.style.top = `${y}px`;
}

function movePlayer(dx, dy) {
    const characterSpritesheet = player.querySelector('.Character_spritesheet');
    const newX = parseFloat(player.style.left) + dx;
    const newY = parseFloat(player.style.top) + dy;

    if (newX >= 0 && newX <= gameContainer.clientWidth - player.clientWidth) {
        player.style.left = `${newX}px`;
    }

    if (newY >= 0 && newY <= gameContainer.clientHeight - player.clientHeight) {
        player.style.top = `${newY}px`;
    }

    // remove all face-* classes
    characterSpritesheet.classList.remove('face-left', 'face-right', 'face-up');

    // add the appropriate face-* class based on movement direction
    if (dx < 0) {
        characterSpritesheet.classList.add('face-left');
    } else if (dx > 0) {
        characterSpritesheet.classList.add('face-right');
    } else if (dy < 0) {
        characterSpritesheet.classList.add('face-up');
    }
}


function attack() {
    const playerRect = player.getBoundingClientRect();
    const enemyRect = enemy.getBoundingClientRect();

    const distance = Math.sqrt(Math.pow((playerRect.x - enemyRect.x), 2) + Math.pow((playerRect.y - enemyRect.y), 2));

    if (distance <= attackDistance) {
        spawnEnemy();
    }
}

document.addEventListener('keydown', (e) => {
    switch (e.key) {
        case 'ArrowUp':
            movePlayer(0, -playerSpeed);
            break;
        case 'ArrowDown':
            movePlayer(0, playerSpeed);
            break;
        case 'ArrowLeft':
            movePlayer(-playerSpeed, 0);
            break;
        case 'ArrowRight':
            movePlayer(playerSpeed, 0);
            break;
        case 'a':
            attack();
            break;
    }
});

startButton.addEventListener('click', () => {
    // hide the start menu
    startMenu.style.display = 'none';
    
    // remove the blur effect from the game container
    gameContainer.classList.remove('blur');
    
    // set focus on the game container so keyboard events are captured
    gameContainer.focus();
});