script.js

const allLayers = document.getElementsByClassName("layer");

const wrapper = document.getElementById("wrapper");
const menuLayer = document.getElementById("menu-layer");
const gameLayer = document.getElementById("game-layer");
  


let playerName = "";

let allUsers = [];

if(JSON.parse(localStorage.getItem("scoreboard")) != null){
    allUsers = JSON.parse(localStorage.getItem("scoreboard"));
}
console.log(allUsers);

// --------------------- MENU --------------------- 

document.getElementById("play-button").addEventListener("click", OnButtonClicked);
const nameField = document.getElementById("name-field");
const text = document.getElementById("question");
let redText = false;

let lastUser = null;
allUsers.forEach(user => {
    if(lastUser == null){
        lastUser = user;
        return;
    }
    if(lastUser.date < user.date){
        lastUser = user;
    }
});

if(lastUser != null){
    nameField.value = lastUser.name;
}

function OnButtonClicked(){
    playerName = nameField.value;

    if(playerName == "" || playerName == null){
        if(!redText){
            text.style.color = "red";
            text.style.fontSize = "25px";
        }

        return;
    }
    //menuLayer.classList.add("hidden");
    //gameLayer.classList.remove("hidden");
    changeLayer("game-layer");
    startGame();
}


// --------------------- GAME --------------------- 

const holes = document.querySelectorAll('.hole');
const scoreCount = document.querySelector('.score');
const cats = document.querySelectorAll('.cat');
const countdownBoard = document.querySelector('.countdown');
const yourScore = document.querySelector('.yourscore');

let lastHole;
let timeUp = false;
let timeLimit = 20000;
//timeLimit = 1000000;
let score = 0;
let countdown;

const catSizeMin = 55;
const catSizeMax = 85;

function pickRandomHole(holes){
    const randomHole = Math.floor(Math.random() * holes.length);
    const hole = holes[randomHole];
    if(hole === lastHole){
        return pickRandomHole(holes)
    }
    lastHole = hole;
    return hole;
}

function popOut(){
    const time = Math.random() * 1300 + 400;
    const hole = pickRandomHole(holes);
    hole.classList.add('up');
    setTimeout(function(){
        hole.classList.remove('up');
        if(!timeUp) popOut();
    },time);
}

function startGame(){
    countdown = timeLimit / 1000;
    scoreCount.textContent = "Score:" + 0;
    scoreCount.style.display = 'block';
    countdownBoard.textContent = countdown;
    timeUp = false;
    score = 0;

    setTimeout(function(){
        if(!timeUp) popOut()
    },Math.random() * 1300);

    setTimeout(() => {
        timeUp = true;
    }, timeLimit);

    let startCountdown = setInterval(function(){
        countdown -= 1;
        countdownBoard.textContent = countdown;
        if(countdown < 0){
            countdown = 0;
            clearInterval(startCountdown);
            checkHighScore();
            changeLayer("game-over-layer");
        }
    }, 1000);
}

function catWhack(e){
    score++;
    scoreCount.textContent = score;
    this.style.backgroundImage = 'url("uncannyCat.png")';
    this.style.pointerEvents = 'none';
    setTimeout(() => {
        this.style.backgroundImage = 'url("cannyCat.png")';
        this.style.pointerEvents = 'all';
    }, 800);
}

cats.forEach(cat => cat.addEventListener('click', catWhack));

// --------------------- GAME OVER --------------------- 
const scoreBoard = document.getElementById("scoreboard");
const replayBtn = document.getElementById("replay");
const menuBtn = document.getElementById("to-menu");

const nameColumn = document.getElementById("nameColumn");
const scoreColumn = document.getElementById("scoreColumn");

replayBtn.addEventListener("click", () =>{
    changeLayer("game-layer");
    startGame();
});
menuBtn.addEventListener("click", () => {
    changeLayer("menu-layer");
});

function checkHighScore(){
    let currentUser = null;
    allUsers.forEach(user => {
        if(playerName == user.name){
            currentUser = user;
            if(currentUser.score < score){
                currentUser.score = score;
            }
        
        }
    });

    if(currentUser == null){
        currentUser = {
            name: playerName,
            score: score,
            date: new Date().valueOf(),
        };
        allUsers.push(currentUser);
    }

    allUsers.sort((a, b) =>{
        if(a.score > b.score) return -1;
        else if(a.score < b.score) return 1;
        
        return 0;
    });

    scoreColumn.innerHTML = "";
    nameColumn.innerHTML = "";
    for (let i = 0; i < allUsers.length; i++) {
        let element = allUsers[i];
        let text = document.createElement("div");
        text.textContent = `${element.name}`;
        if(playerName == element.name){
            //text.textContent = `${element.name} (You)`;
            text.style.textDecoration = "underline";
        }
        nameColumn.appendChild(text);

        text = document.createElement("div");
        text.textContent = `${element.score}`;
        scoreColumn.appendChild(text);
    }

    localStorage.setItem("scoreboard", JSON.stringify(allUsers));

    yourScore.textContent = "Your score: " + score;
}

//General functions
function changeLayer(layerName){
    console.log(allLayers);
    for(var layer of allLayers) {
        if(layer.getAttribute("id") == layerName){
            layer.classList.remove("hidden");
        } else { layer.classList.add("hidden"); }
    };
}

function randRange(min, max){
    let num = Math.ceil(Math.random()*100);
    num = Math.max(num, min);
    num = Math.min(num, max);
    return num;
}