Dynamically populate value of array in a Div

Question

I'm creating an function that can shuffle and deal poker deck to user based on number of player provided by the user in a input field. I've completed the shuffling function but I'm having issue with dealing the card. How can I deal the entire deck equally based on the number_of_people value given in html, for example if the number_of_people = 3 :

Person 1 : S-Q, D-J, D-K, C-7, S-J....
Person 2 : H-6, D-X, D-A, H-2, S-6....
Person 3 : D-Q, H-5, D-8, S-2, S-8....

also if user insert more than 52 number_of_people it will still deal and display but the 53rd and above player will have an empty hand e.g :

Person 53 : 
Person 54 : 
Person 55 :

Below is my code :

HTML :

    <div class="position-ref full-height">

        <div class="content">
            <div class="title m-b-md">
                Let's Play
            </div>

            <div>
                <input id="number_of_people" type="number" max="99" placeholder="No. of People"></input>
                <button onclick="shuffleCards()">Shuffle</button>
            </div>

            <div class="results">
            </div>
        </div>

Javascript :

    // Create a function to distribute card
    function shuffleCards() {
        // Get input value
        var number_of_people = document.getElementById("number_of_people").value

        // Declare card elements
        const card_types = ["S", "D", "C", "H"];
        const card_values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "X", "J", "Q", "K",];

        // Create deck array
        let deck = [];
        
        // Validate the value inserted by user
        if (number_of_people > 0 && number_of_people !== null) {
            // Create a deck of cards
            for (let i = 0; i < card_types.length; i++) {
                for (let x = 0; x < card_values.length; x++) {
                    let card = { cardValue: card_values[x], cardTypes: card_types[i] };
                    deck.push(card);
                }
            }

            // Shuffle the cards
            for (let i = deck.length - 1; i > 0; i--) {
                let j = Math.floor(Math.random() * i);
                let temp = deck[i];
                deck[i] = deck[j];
                deck[j] = temp;
            }

            // Clear content
            $(".results").html(``);

            // Distribute the card
            for (let i = 0; i < deck.length; i++) {
                console.log(`${deck[i].cardTypes}-${deck[i].cardValue}`)
                $(".results").append( `<p>${deck[i].cardTypes}-${deck[i].cardValue}, </p>` );
            }
        }

        else {
            $(".results").html( `<h3>Input value does not exist or value is invalid</h3>` );
            return;
        }
        
    }
</script>

trincot · Accepted Answer · 2021-03-13 20:53:46Z

1

You can replace the "Distribute the cards" loop, with the following loop:

for (let person = 0; person < number_of_people; person++) {
    $(".results").append(
        $("<p>").append(
            `Person ${person+1}: `,
            deck.splice(-Math.ceil(deck.length / (number_of_people - person))).map(card =>
                `${card.cardTypes}-${card.cardValue}`
            ).join(", ")
        )
    );
}

This actually extracts the right amount of cards from the end of the deck in one go, and displays them on a single line. Since the deck of cards is shuffled, it doesn't matter from where in the deck you pull the cards, so you might as well do it like this.

A remark about your code:

if (number_of_people > 0 && number_of_people !== null) {

If the first of these two conditions is true, then the second is always true as well, so there is no need to have that second condition. Moreover, the .value property of an input element is never null, but potentially an empty string.

You should really convert the input from string to a number. For instance with the unary plus:

var number_of_people = +document.getElementById("number_of_people").value;

edited Mar 13, 2021 at 20:53

answered Mar 13, 2021 at 20:45

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M.Izzat Over a year ago

Thank you so much sir, much appreciated with the advice. this is my first time encounter with Math.ceil. will look into it as well

Collectives™ on Stack Overflow

Dynamically populate value of array in a Div

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related