<div class="setup">
        <div class="choices"></div>
        <div class="start">
            <button onclick="startGame()">Start Spil</button>
        </div>
    </div>
    
    <div class="game">
        
        <div id="restart">
            <p id="winner">PLAYER ONE WINS</p>
            <button onclick="refreshSite()">Spil igen</button>
        </div>

        <div class="player-turn-wrapper">
            <div class="player-one">
                <h3>Player 1</h3>
                <p>Points: <span id="player-one-points">0</span></p><br>
            </div>
            <div class="turn">
                <h2 id="player-turn"></h2>
            </div>
            <div class="player-two">
                <h3>Player 2</h3>
                <p>Points: <span id="player-two-points">0</span></p><br>
            </div>
        </div>

        <div class="game-board">
            
        </div>
    </div>

:root {
    --primary: #FFCE00;
    --secondary: #FE4880;
    --dark: #212121;
    --light: #F3F3F3;
    --backside-gradient-one: #647DEE;
    --backside-gradient-two: #7F53AC;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}

.setup .choices .card__inner {
    transform: rotateY(180deg);
}

.setup .choices .card__inner.selected {
    border:5px solid green;
    border-radius: 22px;
}

.setup .start{
    width: 100%;
    display: block;
    align-items: center;
}

.setup .start button {
    width: 200px;
    height: 80px;
    background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
    color: white;
    font-size: 25px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
}

#restart {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    text-align: center;
    color: black;
    font-size: 20px;
    font-weight: 900;
    display: none;
}

#restart button {
    width: 200px;
    height: 80px;
    background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
    color: white;
    font-size: 25px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
}


.game{
    display: none;
}

.player-turn-wrapper {
    display: flex;
    justify-content: space-between;
}

.player-turn-wrapper div {
    margin: 50px;
}

.game-board, .choices {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.field {
    height: 250px;
    padding: 10px;
}

.card {
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

.card__inner {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
}

.card__inner.is-flipped {
    transform: rotateY(180deg);
}

.card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0px 3px 18px 3px rgba(0,0,0,0.2);
}

.card__face--front, .card__face--back {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__face--front {
    background-image: url("../Images/CSGO-map-picker-card-front-new.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.card__face--back {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.card__face--front h2, .card__face--back h2 {
    color: #FFF;
    font-size: 32px;
}

.card__face--back {
    transform: rotateY(180deg);
}

.animation {
    animation-name: fadeOut;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    0% {
        left: 0;
    }
    50% {
        left: 0;
    }
    100% {
        left: -110vw;
    }
}


@media only screen and (max-width: 1000px) {
    .game-board {
        grid-template-columns: 1fr 1fr 1fr;
    }
  }

var cards;
var maxSucces;
var moves = 0;
var firstCard;
var secondCard;
var firstCardData;
var secondCardDataData;
var playerTurn;
var playerTurnOne = "Player 1 turn";
var playerPointsOne = 0;
var playerPointsOneDOM = document.getElementById('player-one-points');
var playerTurnTwo = "Player 2 turn";
var playerPointsTwo = 0;
var playerPointsTwoDOM = document.getElementById('player-two-points');
var playerTurnDOM = document.getElementById('player-turn');
playerTurn = playerTurnOne;
playerTurnDOM.innerHTML = playerTurn;
var restartDOM = document.getElementById('restart');
var winner = document.getElementById('winner');
var timesOfSucces = 0;
var choices = [
    ["Inferno", "https://cdn1.dotesports.com/wp-content/uploads/2020/06/11091252/Inferno.jpg"],
    ["Mirage", "https://cdn1.dotesports.com/wp-content/uploads/2021/08/02060125/CSGO_Mirage_latest_version-1.jpg"],
    ["Nuke", "https://cdn1.dotesports.com/wp-content/uploads/2020/06/12084847/csgo-nuke-outside.jpg"],
    ["Overpass", "https://cdn1.dotesports.com/wp-content/uploads/2020/01/09112815/Csgo-de-overpass.png"],
    ["Vertigo", "https://cdn1.dotesports.com/wp-content/uploads/2022/02/02055247/vertigobsite.jpg"],
    ["Ancient", "https://cdn1.dotesports.com/wp-content/uploads/2021/05/03174829/ancient.jpg"],
    ["Anubis", "https://cdn1.dotesports.com/wp-content/uploads/2022/11/18152134/csgo-anubis.jpg"],
    ["Tuscan", "https://cdn1.dotesports.com/wp-content/uploads/2022/11/19123641/tuscan-csgo.jpg"],
    ["Breach", "https://cdn1.dotesports.com/wp-content/uploads/2022/11/19123808/breach-csgo.jpg"],
    ["Dust II", "https://cdn1.dotesports.com/wp-content/uploads/2021/07/28071308/Dust-II.jpg"],
    ["Train", "https://cdn1.dotesports.com/wp-content/uploads/2022/11/19123929/train-csgo.jpg"],
    ["Cache", "https://cdn1.dotesports.com/wp-content/uploads/2020/04/24043843/cropped-Cache1.jpg"],
    ["Agency", "https://cdn1.dotesports.com/wp-content/uploads/2022/11/19124102/agency-csgo.jpg"],
    ["Office", "https://cdn1.dotesports.com/wp-content/uploads/2022/11/19124123/office-csgo.jpg"],
];
var selected = []

function prepare() {
    choices.forEach(function (v,i) {
        $(".choices").prepend(
         '<div class="field">'+
         '<div class="card">'+
         '<div class="card__inner" data-cardname="'+i+'">'+
         '<div class="card__face card__face--back" style="background-image: url('+v[1]+');">'+
         '<h2>'+v[0]+'</h2>'+
         '</div>'+
         '</div>'+
         '</div>'+
         '</div>'
         );
     });
     $(".setup .card__inner").on("click", function () {
        $(this).toggleClass("selected");
     });
}

function SetupGame() {
    selected.forEach(function(v) {
        $(".game-board").prepend(
            '<div class="field">'+
            '<div class="card">'+
            '<div class="card__inner" data-cardname="'+choices[v][0]+'">'+
            '<div class="card__face card__face--front">'+
            '</div>'+
            '<div class="card__face card__face--back" style="background-image: url('+choices[v][1]+');">'+
            '<h2>'+choices[v][0]+'</h2>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'
            );
        $(".game-board").prepend(
            '<div class="field">'+
            '<div class="card">'+
            '<div class="card__inner" data-cardname="'+choices[v][0]+'">'+
            '<div class="card__face card__face--front">'+
            '</div>'+
            '<div class="card__face card__face--back" style="background-image: url('+choices[v][1]+');">'+
            '<h2>'+choices[v][0]+'</h2>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'
            );
    });
    $(".game").show();
    var randomCards = $(".game-board .field");
    cards = document.querySelectorAll('.game .card__inner');
    maxSucces = cards.length / 2;
    
    for(var i = 0; i < randomCards.length; i++){
        var target = Math.floor(Math.random() * randomCards.length -1) + 1;
        var target2 = Math.floor(Math.random() * randomCards.length -1) +1;
        randomCards.eq(target).before(randomCards.eq(target2));
    }
    
    for (i=0; i {
                    firstCard.classList.add('animation');
                    secondCard.classList.add('animation');
                }, 800)
            }else {
                //Failure
                if (playerTurn === playerTurnOne) {
                    playerTurn = playerTurnTwo;
                    playerTurnDOM.innerHTML = playerTurn;
                } else if (playerTurn === playerTurnTwo) {
                    playerTurn = playerTurnOne;
                    playerTurnDOM.innerHTML = playerTurn;
                }
                for (i=0; i {
                    firstCard.classList.toggle('is-flipped');
                    secondCard.classList.toggle('is-flipped');
                }, 800)
            }

            setTimeout(() => {
                for (i=0; i playerPointsTwo) {
                    winner.innerHTML = "Player one wins"
                } else if (playerPointsOne < playerPointsTwo) {
                    winner.innerHTML = "Player two wins"
                } else if (playerPointsOne === playerPointsTwo) {
                    winner.innerHTML = "DRAW";
                }
                setTimeout(() => {
                    restartDOM.style.display="block";
                }, 1500)
            }
            moves=0;
        }
    }
}

function refreshSite() {
    location.reload();
}

function startGame() {
    var selectedmaps = $(".card__inner.selected");
    selectedmaps.each(function (v) {
        selected.push($(this).attr("data-cardname"));
    });
    $(".setup").hide();
    SetupGame();
};

prepare();