function solve() {


    let linksPlayerOne = document.querySelectorAll("#player1Div img");
    let linksPlayerTwo = document.querySelectorAll("#player2Div img");
    let spans = document.querySelectorAll("#result span");
    let spanLeft = spans[0];
    let spanRight = spans[2];
    let currentLeftImage = "";
    let currentRightImage = "";
    let historyDiv = document.querySelector("#history");
//Lower side
   linksPlayerTwo[0].addEventListener("click", () => {
       linksPlayerTwo[0].src = "../01_Cards/images/whiteCard.jpg";
       spanRight.textContent = linksPlayerTwo[0].name;
       currentRightImage = linksPlayerTwo[0];
       checkElement(currentLeftImage, currentRightImage);
   })

   linksPlayerTwo[1].addEventListener("click", () => {
    linksPlayerTwo[1].src = "../01_Cards/images/whiteCard.jpg";
    spanRight.textContent = linksPlayerTwo[1].name;
    currentRightImage = linksPlayerTwo[1];
    checkElement();
})

linksPlayerTwo[2].addEventListener("click", () => {
    linksPlayerTwo[2].src = "../01_Cards/images/whiteCard.jpg";
    spanRight.textContent = linksPlayerTwo[2].name;
    currentRightImage = linksPlayerTwo[2];
    checkElement();
})

linksPlayerTwo[3].addEventListener("click", () => {
    linksPlayerTwo[3].src = "../01_Cards/images/whiteCard.jpg";
    spanRight.textContent = linksPlayerTwo[3].name;
    currentRightImage = linksPlayerTwo[3];
    checkElement();
})

linksPlayerTwo[4].addEventListener("click", () => {
    linksPlayerTwo[4].src = "../01_Cards/images/whiteCard.jpg";
    spanRight.textContent = linksPlayerTwo[4].name;
    currentRightImage = linksPlayerTwo[4];
    checkElement();
})

linksPlayerTwo[5].addEventListener("click", () => {
    linksPlayerTwo[5].src = "../01_Cards/images/whiteCard.jpg";
    spanRight.textContent = linksPlayerTwo[5].name;
    currentRightImage = linksPlayerTwo[5];
    checkElement();
})

linksPlayerTwo[6].addEventListener("click", () => {
    linksPlayerTwo[6].src = "../01_Cards/images/whiteCard.jpg";
    spanRight.textContent = linksPlayerTwo[6].name;
    currentRightImage = linksPlayerTwo[6];
    checkElement();
})

linksPlayerTwo[7].addEventListener("click", () => {
    linksPlayerTwo[7].src = "../01_Cards/images/whiteCard.jpg";
    spanRight.textContent = linksPlayerTwo[7].name;
    currentRightImage = linksPlayerTwo[7];
    checkElement();
})

//Upper side
linksPlayerOne[0].addEventListener("click", () => {
    linksPlayerOne[0].src = "../01_Cards/images/whiteCard.jpg";
    spanLeft.textContent = linksPlayerOne[0].name;
    currentLeftImage = linksPlayerOne[0];
    checkElement();
    })


 linksPlayerOne[1].addEventListener("click", () => {
 linksPlayerOne[1].src = "../01_Cards/images/whiteCard.jpg";
    spanLeft.textContent = linksPlayerOne[1].name;
    currentLeftImage = linksPlayerOne[1];
    checkElement();
})


linksPlayerOne[2].addEventListener("click", () => {
    linksPlayerOne[2].src = "../01_Cards/images/whiteCard.jpg";
    spanLeft.textContent = linksPlayerOne[2].name;
    currentLeftImage = linksPlayerOne[2];
    checkElement();
})


linksPlayerOne[3].addEventListener("click", () => {
    linksPlayerOne[3].src = "../01_Cards/images/whiteCard.jpg";
    spanLeft.textContent = linksPlayerOne[3].name;
    currentLeftImage = linksPlayerOne[3];
    checkElement();
})

linksPlayerOne[4].addEventListener("click", () => {
    linksPlayerOne[4].src = "../01_Cards/images/whiteCard.jpg";
    spanLeft.textContent = linksPlayerOne[4].name;
    currentLeftImage = linksPlayerOne[4];
    checkElement();
})

linksPlayerOne[5].addEventListener("click", () => {
    linksPlayerOne[5].src = "../01_Cards/images/whiteCard.jpg";
    spanLeft.textContent = linksPlayerOne[5].name;
    currentLeftImage = linksPlayerOne[5];
    checkElement();
})

linksPlayerOne[6].addEventListener("click", () => {
    linksPlayerOne[6].src = "../01_Cards/images/whiteCard.jpg";
    spanLeft.textContent = linksPlayerOne[6].name;
    currentLeftImage = linksPlayerOne[6];
    checkElement();
})

linksPlayerOne[7].addEventListener("click", () => {
    linksPlayerOne[7].src = "../01_Cards/images/whiteCard.jpg";
    spanLeft.textContent = linksPlayerOne[7].name;
    currentLeftImage = linksPlayerOne[7];
    checkElement();
})

        //
            function checkElement(){
                if(currentLeftImage !== "" && currentRightImage !== ""){
                    if(+currentLeftImage.name < +currentRightImage.name){
                        currentLeftImage.style.border = "2px solid red";
                        currentRightImage.style.border = "2px solid green";
                    } else {
                        currentLeftImage.style.border = "2px solid green";
                        currentRightImage.style.border = "2px solid red";

                    }
                    historyDiv.append("["+spanLeft.textContent + " vs " + spanRight.textContent + "] ");
                    currentLeftImage = "";
                    currentRightImage = "";
                    setTimeout(() => {
                     spanLeft.textContent = "";
                     spanRight.textContent = "";

                    }, 2000)

            }
            }







}