Reputation: 13

I am having trouble separating my cards for war game. They both display on top of each other

I am trying to get my cards to display 2 different boxes for the cards. If I hover just right with inspector I can see both cards are there, but I am having difficulty separating the two side by side. I am mostly trying to follow a tutorial but it has you do a lot of the work on your own, and I don't want to advance until I have this completely ready for the next task it gives me. Any help is greatly appreciated

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>
            War Cards!
        </title>
        <style>
            .icard
            {
                position: absolute;
                padding: 10px;
                height: 200px;
                width: 150px;
                border: 1px solid black;
                border-radius: 15px;
                background-color: white;
                display: inline-block;
                top: 0;
                left: 0;
            }

            .hand
            {
                position: relative;
            }

            .players
            {
                float: left;
                width: 49%;
                min-height: 300px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="start"></div>
            <div id="message"></div>
            <div id="board">
                <div id="player1" class="players">
                    <div class="score"></div>
                    <div class="hand"></div>
                </div>
                <div id="player2">
                    <div class="score"></div>
                    <div class="hand"></div>
                </div>
            </div>
            <div id="action">
                <button id="btnBattle" type="button" class="btn">
                    Fight!
                </button>
            </div>
        </div>

        <script src="js/jquery-3.3.1.min.js">
        </script>
        <script>
            $('document').ready(function() {
                var suits = ["spades", "hearts", "clubs", "diams"];
                var cardFace = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];
                var cards = [];
                var players = [[], []];
                var firstRun = true;
                var gameOver = false;
                var fightButton = document.querySelector("#btnBattle");
                var p1 = document.querySelector('#player1 .hand');
                var p2 = document.querySelector('#player2 .hand');

                fightButton.addEventListener('click', battle);

                function battle()
                {
                    if (firstRun)
                    {
                        firstRun = false;
                        buildCards();
                        shuffleArray(cards);
                        dealCards(cards);
                    }
                    attack();
                    console.log('Works');
                }

                function attack()
                {
                    if(!gameOver)
                    {
                        var card1 = players[0].shift();
                        var card2 = players[1].shift();
                        var pot = [card1, card2]
                        p1.innerHTML = showCard(card1, 0);
                        p2.innerHTML = showCard(card2, 0)

                        // Check Winners
                        // Update Scores
                    }
                }

                function showCard(c, p)
                {
                    var move = p * 40;
                    var bgColor = (c.icon == 'H' || c.icon == 'D') ? 'red' : 'black';
                    var bCard = '<div class="icard" style="color:'+ bgColor +'">' + c.num + ' &' + c.suit + ';</div>';
                    console.log(c, move);
                    return bCard;
                }




                function buildCards()
                {
                    cards = [];
                    for (s in suits)
                    {
                        var suitNew = suits[s][0].toUpperCase();
                        for(n in cardFace)
                        {
                            var card = {
                                suit:suits[s],
                                num:cardFace[n],
                                cardValue:parseInt(n) +2,
                                icon:suitNew
                            }
                            cards.push(card);
                        }
                    }
                        console.log(cards);
                }

                function dealCards(array)
                {
                    for(var i = 0; i < array.length; i++)
                    {
                        // swaps between remainder 0 and 1, which signifies player[0 OR 1], and then pushes that onto parameter,(array), which
                        // is cards which is an array, at the index of for loop [i]
                        var m = i % 2;
                        players[m].push(array[i])
                        }
                    console.log(players)
                    }


                //
                // function dealCards(array)
                // {
                //     for(var i = 0; i < array.length; i++)
                //     {
                //         if(i % 2 === 0 )
                //         {
                //             players[0].push(array[i]);
                //         }
                //         else
                //         {
                //             players[1].push(array[i]);
                //         }
                //
                //     }
                //     console.log(players);
                // }
                //

                function shuffleArray(array)
                {
                    for(var x = array.length -1; x > 0; x--)
                    {

                        var ii = Math.floor(Math.random() * (x + 1))
                        var temp = array[x];
                        array[x] = array[ii];
                        array[ii] = temp;

                    }
                    console.log(cards);
                    return array;
                }
            });
        </script>

    </body>
</html>

Upvotes: 1