[Dúvida] [Desafio: hora da prática] Desafios 1 e 2 (soluções alternativas) | Lógica de programação: praticando com desafios

Eu fiz algumas modificações em relação ao resultado final dos desafios, então eu acabei modificando HTML e CSS também. A minha ideia era que o desafio ficasse mais integrado com a página em si - por isso mudei de Alugados para Disponíveis, em relação ao desafio 2.

Foi interessante porque isso necessitou de mais interação com o HTML e acabei descobrindo a opção {once: true} para quando você utiliza o addEventListener, senão dava um bug em que se eu clicasse em vários jogos e confirmasse a devolução, mesmo os que eu cancelei também era modificados pq os Listeners ficam anexados pra sempre, mesmo depois da função de alterarStatus já ter sido executada.

Só tem uma questão...

Enquanto a tela de aviso da devolução aparece, o usuário ainda pode clicar em alugar e devolver, mesmo que não seja o comportamento esperado, eu queria poder bloquear o click que ativa a função alterarStatus e isso não parece ser muito trivial. Não era o ponto do desafio mas alguém sabe como resolver isso?

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluGames</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body class="body">
    <main class="container main">
        <img src="img/logo.svg" alt="Logo AluGames">
        <section class="divisor">
            <div class="divisor__line"></div>
            <img src="img/fade_bar.svg" alt="Visual bar" class="divisor__bar">
            <div class="divisor__line"></div>
        </section>
        <h1 class="page-title"><span class="page-title__emphasis">boardgames</span> disponíveis: <span
                id="disponiveis"></span></h1>
        <section class="dashboard">
            <ul class="dashboard__items">
                <li class="dashboard__alert">
                    <p class="dashboard__item__name">Você está devolvendo um jogo</p>
                    <div>
                        <button class="dashboard__alert--cancelar dashboard__item__button">Cancelar</button>
                        <button class="dashboard__alert--confirmar dashboard__item__button">Confirmar</button>
                    </div>
                </li>
                <li class="dashboard__items__item" id="game-1">
                    <div class="dashboard__item__img">
                        <img src="img/monopoly.png" alt="Capa jogo Monopoly">
                    </div>
                    <p class="dashboard__item__name">Monopoly</p>
                    <a onclick="alterarStatus(1)" href="#" class="dashboard__item__button link-btn">Alugar</a>
                </li>
                <li class="dashboard__items__item" id="game-2">
                    <div class="dashboard__item__img">
                        <img src="img/ticket_to_ride.png" alt="Capa jogo Ticket to Ride">
                    </div>
                    <p class="dashboard__item__name">Ticket to Ride</p>
                    <a onclick="alterarStatus(2)" href="#" class="dashboard__item__button link-btn">Alugar</a>
                </li>
                <li class="dashboard__items__item" id="game-3">
                    <div class="dashboard__item__img dashboard__item__img--rented">
                        <img src="img/takenoko.png" alt="Capa jogo Takenoko">
                    </div>
                    <p class="dashboard__item__name">Takenoko</p>
                    <a onclick="alterarStatus(3)" href="#"
                        class="dashboard__item__button dashboard__item__button--return link-btn">Devolver</a>
                </li>
            </ul>
        </section>
        <img src="img/hachuras.svg" alt="Visual hachuras" class="hachuras">
    </main>

    <script src="js/app.js"></script>
</body>

</html>

main.css

@import url(_reset.css);
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@600;700&display=swap");

.body {
    color: #ffffff;

    min-height: 100vh;

    background: rgb(0, 0, 0);
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(1, 8, 14, 1) 25%,
        rgba(80, 94, 255, 0.85) 50%,
        rgba(1, 8, 14, 1) 75%,
        rgba(0, 0, 0, 1) 100%
    );
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 2rem;
}

@media screen and (min-width: 1440px) {
    .body {
        padding: 2rem calc((100vw - 1086px) / 2);
    }
}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.divisor {
    display: flex;
    gap: 53px;
    align-items: center;

    margin: 88px 0px 40px;
}

.divisor__line {
    height: 1px;
    width: 282px;
    background-color: #00f4bf;
}

.page-title {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-size: 5rem;

    margin-bottom: 2.5rem;
}

.page-title__emphasis {
    color: #505eff;
}

.dashboard {
    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 2rem;
    border-width: 1px;
    border-style: solid;
    border-color: #00f4bf;

    padding: 3rem;
    width: 100%;
}

.dashboard__items {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.dashboard__alert {
    position: absolute;
    z-index: 1;
    background-color: rgba(211, 211, 211, 0.785);
    padding: 24px 32px;
    border-radius: 16px;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Inter", sans-serif;
    display: none;
    justify-content: center;
    width: 65%;
    height: 50%;
    border: 1px solid #00f4bf;
}

.dashboard__alert div {
    display: flex;
    gap: 32px;
    justify-content: center;
}

.dashboard__alert p {
    align-self: end;
    color: #01080e;
}

.dashboard__alert--cancelar,
.dashboard__alert--confirmar {
    margin-bottom: auto;
    color: #ffffff;
}

button.dashboard__alert--cancelar {
    background-color: #01080e;
}

.dashboard__items__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    font-family: "Inter", sans-serif;
}

.dashboard__item__img {
    box-shadow: 0px 0px 24px 8px rgba(24, 118, 232, 0.25);

    margin-bottom: 1rem;
}

.dashboard__item__img--rented {
    position: relative;
}

.dashboard__item__img--rented::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;

    background-color: rgba(1, 8, 14, 0.4);
}

.dashboard__item__name {
    font-weight: 600;
    font-size: 2rem;

    margin-bottom: 2.5rem;
}

.dashboard__item__button {
    display: flex;
    justify-content: center;

    font-weight: 700;
    font-size: 1.5rem;

    padding: 1rem 1.5rem;
    min-width: 13rem;

    border-radius: 1rem;

    background-color: #1875e8;
}

.dashboard__item__button--return {
    background-color: #01080e;
}

.hachuras {
    margin-top: 1.5rem;
    margin-right: 33px;
    align-self: flex-end;
}

app.js

function imprimirDisponiveis() {
    const status = document.querySelectorAll(".dashboard__item__img--rented");
    const disponiveis = document.getElementById("disponiveis");
    disponiveis.innerText = `${3 - status.length}`;
}

imprimirDisponiveis();

function alterarStatus(position) {
    const id = `game-${position}`;
    const li = document.getElementById(id);
    const div = li.querySelector("div");
    const btn = li.querySelector("a");
    if (div.classList.contains("dashboard__item__img--rented")) {
        const alerta = document.querySelector(".dashboard__alert");
        alerta.style.display = "grid";
        const cancelar = document.querySelector(".dashboard__alert--cancelar");
        cancelar.addEventListener(
            "click",
            () => {
                alerta.style.display = "none";
                imprimirDisponiveis();
            },
            { once: true }
        );
        const confirmar = document.querySelector(
            ".dashboard__alert--confirmar"
        );
        confirmar.addEventListener(
            "click",
            () => {
                alerta.style.display = "none";
                div.classList.remove("dashboard__item__img--rented");
                btn.classList.remove("dashboard__item__button--return");
                btn.innerText = "Alugar";
                imprimirDisponiveis();
            },
            { once: true }
        );
    } else {
        div.classList.add("dashboard__item__img--rented");
        btn.classList.add("dashboard__item__button--return");
        btn.innerText = "Devolver";
        imprimirDisponiveis();
    }
}