javascripthtmlpoker

Video Poker How to make the combinations?


I have been stuck on this for quite a while. So I thought I'd look it up. But with hours of searching I have come to ask on stack overflow as I am completely stumped.

Basically I am making a Web implementation of Jacks or Better: Video Poker. For some reason I keep getting my kings queen jacks and tens are recognized as the same value. And my full house keeps on being awarded. If my explanation isn't great then go to here or here to find out about the combinations.

If I need to send more code like the style tag I can do so, but I think this is all that is necessary. Any help is appreciated even ways to shorten down my code!

    <div id="canvas">
        <form method="post" id="play">
            <button>Play</button>
            <input id="played" type="hidden" name="postType" value="play">
        </form>
        <div id="selected"></div>
        <div id="winScreen">TYPE OF WIN!</div>
        <div id="draw" onclick="draw()">DRAW</div>
        <form action="/games/poker" method="post">
            <button id="reload" type="submit">
                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"></path>
                  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"></path>
                </svg>
              </button>
              <input id="woned" type="hidden" name="postType" value="won">
              <input id="who" type="hidden" name="won" value="None">
        </form>
        <div id="table"></div>

                <table>
                    <thead>
                        <tr style="border-color:orange; border-width:2.5px;">
                            <th>HAND</th>
                            <th>WIN</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ROYAL FLUSH</td>
                            <td>$250</td>
                        </tr>
                        <tr>
                            <td>Straight Flush</td>
                            <td>$100</td>
                        </tr>
                        <tr>
                            <td>Four of a Kind</td>
                            <td>$75</td>
                        </tr>
                        <tr>
                            <td>Full house </td>
                            <td>$50</td>
                        </tr>
                        <tr>
                            <td>Flush</td>
                            <td>$25</td>
                        </tr>
                        <tr>
                            <td>Straight</td>
                            <td>$10</td>
                        </tr>
                        <tr>
                            <td>Three of a Kind</td>
                            <td>$5</td>
                        </tr>
                        <tr>
                            <td>Two of a Kind</td>
                            <td>$2</td>
                        </tr>
                        <tr>
                            <td>Jacks or Better</td>
                            <td>$1</td>
                        </tr>
                    </tbody>
                </table>
        <div class="row stats">
            <div class="col">
                CASH: {{cash}}
            </div>
            <div class="col">
                BET: {{bet}}
            </div>
            <div class="col">
                WON: {{won}}
            </div>
        </div>
        </div>
</div>


<script>
    let postType = "{{postType}}";
    var deck = [];
    let nummies = [];
    let numOfCards = 0;
    let cardsSel = [];
    function getCard(){
        let symbol = Math.floor(Math.random() * 4) + 1;
        let type = Math.floor(Math.random() * 13) + 1;
        if (symbol == 1){
            symbol = "D";
        }
        else if (symbol == 2){
            symbol = "S";
        }
        else if (symbol == 3){
            symbol = "H";
        }
        else if (symbol == 4){
            symbol = "C";
        }

        if (type == 1){
            type = "A";
        }
        else if (type == 10){
            type="T";
        }
        else if (type == 11){
            type="J";
        }
        else if (type == 12){
            type="Q";
        }
        else if (type == 13){
            type="K";
        }
        let item = {type:"", symbol:""};
        item.type = type;
        item.symbol = symbol;
        return item;
    }
    function makeCard(){
        let card = getCard();
        card = card.type + card.symbol + ".png";
        while (containsObject(card, deck)){
            card = getCard();
            card = card.type + card.symbol + ".png";
        }
        deck.push(card);
        return card;
    }
    if (postType == "play"){
        document.querySelector("#play").style.visibility = "hidden";
        let images = [];
        for (var i = 0; i < 5; i++){
            let card = makeCard();
            images.push('<button id="noButton" onclick="selected(' + '\'' + card + '\'' + ', ' + i + ')"><img class="cards" src="' + '/static/deck/' + card + '"></button>');
        }
        document.querySelector("#table").innerHTML = images.join(" ");
    }
    function draw(){
        let images = [];
        for (var i = 0; i < 5 - numOfCards; i++){
            let card = makeCard();
            images.push('<button id="noButton"><img class="cards" src="' + '/static/deck/' + card + '"></button>');
            cardsSel.push(card.slice(0, 2));
        }
        document.querySelector("#draw").style.visibility = "hidden";
        document.querySelector("#reload").style.visibility = "visible";
        images.push(document.querySelector("#selected").innerHTML);
        document.querySelector("#selected").innerHTML = "";
        document.querySelector("#table").innerHTML = images.join(" ");

        // WIN COMBINATIONS

        // ROYAL FLUSH
        if (containsObject("AH", cardsSel) && containsObject("KH", cardsSel) && containsObject("QH", cardsSel) && containsObject("JH", cardsSel) && containsObject("TH", cardsSel)){
            winScreen("ROYAL FLUSH!");
        }
        else if (containsObject("AD", cardsSel) && containsObject("KD", cardsSel) && containsObject("QD", cardsSel) && containsObject("JD", cardsSel) && containsObject("TD", cardsSel)){
            winScreen("ROYAL FLUSH!");
        }
        else if (containsObject("AS", cardsSel) && containsObject("KS", cardsSel) && containsObject("QS", cardsSel) && containsObject("JS", cardsSel) && containsObject("TS", cardsSel)){
            winScreen("ROYAL FLUSH!");
        }
        else if (containsObject("AC", cardsSel) && containsObject("KC", cardsSel) && containsObject("QC", cardsSel) && containsObject("JC", cardsSel) && containsObject("TC", cardsSel)){
            winScreen("ROYAL FLUSH!");
        }
        let numberList = [];
        for (i = 0; i < 5; i++){
            let num = cardsSel[i][0];
            if (num == "A"){
                num = 1;
            }
            else if (num == "K"){
                num = 11;
            }
            else if (num == "Q"){
                num = 12;
            }
            else if (num == "J"){
                num = 13;
            }
            else if (num == "T"){
                num = 10;
            }
            else{
                num = parseInt(num);
            }
            numberList += num
        }
        // STRAIGHT FLUSH
        let hPossible = 0;
        let dPossible = 0;
        let sPossible = 0;
        let cPossible = 0;
        let possible = false;
        for (i = 0; i < 5; i++){
            if (cardsSel[i].indexOf("H") > -1){
                hPossible += 1;
            }
        }
        for (i = 0; i < 5; i++){
            if (cardsSel[i].indexOf("D") > -1){
                dPossible += 1;
            }
        }
        for (i = 0; i < 5; i++){
            if (cardsSel[i].indexOf("S") > -1){
                sPossible += 1;
            }
        }
        for (i = 0; i < 5; i++){
            if (cardsSel[i].indexOf("C") > -1){
                cPossible += 1;
            }
        }

        if (hPossible == 5 || dPossible == 5 || sPossible == 5 || cPossible == 5){
            possible = true;
        }

        if (possible == true){
            let outcome = false;
            let sorted = numberList.sort();
            let count = 0;

            for (i = 0; i < 5; i++){
                if (sorted[i] + 1 == sorted[i+1]){
                    count += 1;
                }
            }
            if (count == 5){
                outcome = true;
            }

            if (outcome == true){
                winScreen("STRAIGHT FLUSH!");
            }
        }

        // Four of a Kind

        for (i = 0; i < 5; i++){
            let selected = numberList[i];
            if (countObjects(numberList, selected) == 4){
                winScreen("Four of a Kind!");
            }
        }

        // Full house
        possible = 0;
        for (i = 0; i < 5; i++){
            let selected = numberList[i];
            if (countObjects(numberList, selected) == 3){
                possible += 1;
            }
            if (countObjects(numberList, selected) == 2){
                possible += 1;
            }
        }
        if (possible == 2){
            winScreen("Full House!");
        }

        // Flush
        hPossible = 0;
        dPossible = 0;
        sPossible = 0;
        cPossible = 0;
        possible = false;
        for (i = 0; i < 5; i++){
            if (cardsSel[i].indexOf("H") > -1){
                hPossible += 1;
            }
        }
        for (i = 0; i < 5; i++){
            if (cardsSel[i].indexOf("D") > -1){
                dPossible += 1;
            }
        }
        for (i = 0; i < 5; i++){
            if (cardsSel[i].indexOf("S") > -1){
                sPossible += 1;
            }
        }
        for (i = 0; i < 5; i++){
            if (cardsSel[i].indexOf("C") > -1){
                cPossible += 1;
            }
        }

        if (hPossible == 5 || dPossible == 5 || sPossible == 5 || cPossible == 5){
            possible = true;
        }

        if (possible == true){
            winScreen("Flush!");
        }

        // Straight
        possible = false;
        let sorted = numberList.sort();
        let count = 0;

        for (i = 0; i < 5; i++){
            if (sorted[i] + 1 == sorted[i+1]){
                count += 1;
            }
        }
        if (count == 5){
            possible = true;
        }

        if (possible == true){
            winScreen("STRAIGHT FLUSH!");
        }

        // WIN COMBINATIONS

    }
    function selected(card, num){
        if (containsObject(num, nummies) == false){
            nummies.push(num);
            document.querySelector("#selected").innerHTML += '<img class="cards" src="' + '/static/deck/' + card + '">';
            numOfCards += 1;
            cardsSel.push(card.slice(0, 2));
        }
    }
    function countObjects(list, object){
        var j = 0;
        for (i = 0; i < list.length; i++){
            if (list[i] == object){
                j++;
            }
        }
        return j;
    }
    function winScreen(type){
        document.querySelector("#winScreen").style.visibility = "visible";
        document.querySelector("#winScreen").innerHTML = type;
    }


    // Borrowed Scripts

    //https://stackoverflow.com/a/4587130/14214193
    function containsObject(obj, list) {
        var i;
        for (i = 0; i < list.length; i++) {
            if (list[i] === obj) {
                return true;
            }

        }
        return false;
    }
</script>

Solution

  • Here is the answer to the question. Huge thanks to stann for pointing out the area of problem. I fixed it by using two for loops instead of one as if there is 3 of the same card then possible will = 3 after the first one and after the second for loop it would equal 5.

        // Full house
        possible = 0;
        for (i = 0; i < 5; i++){
            let selected = numberList[i];
            if (countObjects(numberList, selected) == 3){
                possible += 1;
            }
        }
        for (i = 0; i < 5; i++){
            if (countObjects(numberList, selected) == 2){
                    possible += 1;
            }
        }
        if (possible == 5){
            winScreen("Full House!");
        }