I'm making a simple cards game using an API, https://deckofcardsapi.com/

My problem is that I always get the same deck of cards but I consoled the deck id and each time it was different yet I still get the same cards.

JS code :

let deckId = '';
const newDeckBtn = document.getElementById('new-deck-btn');
const drawCardBtn = document.getElementById('draw-card-btn');
let cardsContainer = document.getElementById('cards-container');

newDeckBtn.addEventListener('click', () => {
    fetch('https://deckofcardsapi.com/api/deck/new/')
        .then(res => res.json())
        .then(data => {
            console.log(data.deck_id)
            deckId = data.deck_id;
        })
})

drawCardBtn.addEventListener('click', () => {
    fetch(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=2`)
        .then(res => res.json())
        .then(data => {
            console.log(data)
            for(let i = 0; i < data.cards.length; i  ) {
                cardsContainer.children[i].innerHTML = `
                <img src="${data.cards[i].image}"/>
                `
            }
            determineWinner(data.cards[0], data.cards[1])
        })
})

function determineWinner(myCard, botCard) {
    const allCards = ['1', '2', '3', '4', '5', '6', '7', 
        '8', '9', '10', 'JACK', 'QUEEN', 'KING', 'ACE'
    ];
    const myCardValue = allCards.indexOf(myCard.value); 
    const botCardValue = allCards.indexOf(botCard.value); 
    console.log(myCardValue, botCardValue)
    if (myCardValue > botCardValue) {
        console.log("I Won!!");
    } else if (botCardValue > myCardValue) {
        console.log('the Bot Won')
    } else {
        console.log('it"s War')
    }
}

HTML :

    <div class="container">
        <header class="flex header">
            <h1 class="title">cards game</h1>
            <button class="btn" id="new-deck-btn">get new deck of cards</button>
        </header>

        <main class="main flex">
            <h3 id="show-winner">start game</h3>
            <!--fix here, make the card-containers in one div alone-->
            <div>
                <div class="flex score-container">
                    <p class="my-score">My Score: <span id="my-score">0</span></p>
                    <p class="bot-score">Bot Score: <span id="bot-score">0</span></p>
                </div>

                <div class="flex" id="cards-container">
                    <div class="card-container"></div>
                    <div class="card-container"></div>
                </div>
            </div>

            <button class="btn" id="draw-card-btn">draw new card</button>
        </main>
    </div>

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

The rules are simple whoever gets higher value wins.

CodePudding user response：

According to the API's home page your first request will return a flag indicating whether the deck is shuffled or not. It turns out that your request will return the ID of a deck that is not shuffled. The JSON response is:

{
    "success": true, 
    "deck_id": "nrzpjz7k2gvc", 
    "remaining": 52, 
    "shuffled": false
}

You will want to get a deck that is shuffled. According to the API's home page you should then add /shuffle to the request:

https://deckofcardsapi.com/api/deck/new/shuffle/

And then you'll get this response:

{
    "success": true, 
    "deck_id": "nrzpjz7k2gvc", 
    "remaining": 52, 
    "shuffled": true 
}

CodePudding user response：

From the looks of the endpoints, it seems when you get the cards of the deck they are always in the same order. So in order to avoid it, you may change the endpoint from /deck/new/ to /deck/new/shuffle. This will shuffle the cards every time you fetch them.

newDeckBtn.addEventListener('click', () => {
    fetch('https://deckofcardsapi.com/api/deck/new/shuffle')
        .then(res => res.json())
        .then(data => {
            console.log(data.deck_id)
            deckId = data.deck_id;
        })
})