Как по открытию всех пар вывести кнопку о том, что игра закончена и предложить начать её заново

(()=>{
        const input = document.querySelector('.input');
        const button = document.querySelector('.button');
        let wrapperCards = document.querySelector('.wrapper-cards');
        // создаем масcив
        let result = 4
        let newArr = new Array();
        button.onclick = () => {
            let value = +input.value;
            // очищаем .wrapper-cards
            if (document.querySelector(".card")) {
                wrapperCards.innerHTML = ''
            }
            // проверяем введеное число
            if (value % 2 == 0 && value <= 16 && value >= 4) {
                result = value;
            } else {
                result = 4;
                input.value = 4
                alert('Введите четное число от 4 до 16')
            } 
            // задаем ширину .wrapper-cards
             wrapperCards.style.width = (90 * result / 2) + 'px';
            // создаем новый масив
            for (let i = 0; i < result; i++) {
                newArr[i] = Math.trunc(i/2) + 1
            }
            // перемешиваем масив
            function shuffle(array) {
              let currentIndex = array.length, temporaryValue, randomIndex ;
          while (0 !== currentIndex) {
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;
            temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
              }
             return array;
            }
          shuffle(newArr);
            // создаем div .card
            function getListContent() {
                let fragment = new DocumentFragment();
                for (let i = 0; i < result; i++) {
                    card = document.createElement("div");
                    card.classList.add('card');
                    card.dataset.number = newArr[i];
                    fragment.append(card);
                }
                return fragment;
            }
            wrapperCards.append(getListContent());
            console.log(result)
            // находим .card
            let cardInDom = document.querySelectorAll(".card");
            // вызываем функцию по клику на .card и показываем цифру
            let temp;
            for (let card of cardInDom) {
                card.onclick = () => {
                    if (card.classList.contains("open")) return;
                    let cardValue = card.dataset.number;
                    card.innerHTML = cardValue;
                    if (temp && temp != card) {
                        if (temp.dataset.number == cardValue) {
                            temp.classList.add("open");
                            card.classList.add("open");
                            temp = null;
                            if (cardInDom.length == document.querySelectorAll(".open").length)
                              setTimeout(() => button.onclick(), 1000);
                        } else {
                            temp.innerHTML = "";
                            temp = card;
                        }
                    } else temp = card;
                };
            };
        };
})();

.wrapper-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0 auto;
    margin-top: 30px;
}
.card {
    width: 120px;
    height: 200px;
    margin-right: 35px;
    margin-bottom: 35px;
    border: 2px solid black;
    text-align: center;
    font-size: 128px;
    cursor: pointer;
    transition: 1s;    
}
.card:hover {
    box-shadow: 0 0 5px #2f2d2d;
}
.card.open {
    background-color: #DCDCDC;
}
.wrapper{
    margin: 0 auto;
    width: 445px;
}
input[type=number]{
    width:30%;
    border:2px solid #aaa;
    border-radius:4px;
    margin:8px 0;
    outline:none;
    padding:8px;
    box-sizing:border-box;
    transition:.3s;
  }
  input[type=number]:focus{
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
  }
  .button {
    text-decoration: none;
    color: 2px solid #aaa;
    display: inline-block;
    position: relative;
    padding: 15px 30px;
    border: 1px solid;
    border-image-slice: 1;
    margin: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: 2px;
    transition: .8s cubic-bezier(.165, .84, .44, 1);
    cursor: pointer;
  }
  .button:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    width: 100%;
    z-index: -1;
    color: white;
    transition: .8s cubic-bezier(.165, .84, .44, 1);
  }
  .button:hover {
    background: rgba(255, 255, 255, 0);
  }
  .button:hover:before {
    bottom: 0%;
    top: auto;
    height: 100%;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css"> 
    <title>Document</title>
    <script defer src="main.js"></script>
</head>
<body>
    <div class="wrapper">
        <input class="input" type="number" min="4" max="16" step="2">
        <button class="button">Начать игру</button>
    </div>
    <div class="wrapper-cards"></div>
</body>
</html>