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();
});