JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

War/Battle card game. Edited from https://codepen.io/CandiceP/pen/qgrgPO

<div id="war_container">

    <div class='third'>
        <div class='war_card cardback' id='player_1_card'>
            <span id='player_1_hand'></span>
        </div>
        You have <span id='player_1_score'>0</span> cards.
    </div>
    
    <div class='third'>
        <div id='reports'>
            Click the Play Card button to begin.
        </div>
    </div>
    
    <div class='third'>
        <div class='war_card cardback' id='player_2_card'>
            <span id='player_2_hand'></span>
        </div>
        They have <span id='player_2_score'>0</span> cards.
    </div>
    
    <div id='war_buttons'>
        <button id="btnPlay">Play Card</button>
        <button id="reset">New Game</button>
    </div>

</div>

CSS

div, img, button {
    box-sizing: border-box;
}

#war_container {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    background-color: lavender;
    text-align: center;
}

#war_container .third {
    width: 33.33%;
    padding: 20px;
}

#war_container #reports {
    border: 1px dotted purple;
    height: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#war_container .war_card {
    height: 150px;
    width: 100px;
    background-color: white;
    border: 1px solid grey;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#war_container #war_buttons {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

/* The default pattern/image, on the 'back' of a card. */
.cardback {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Barnevelder.jpg/220px-Barnevelder.jpg");
    background-size: cover;
    background-position: center;
}


.button {
  border-radius: 7px;
  border: none;
  margin: 2em .5em 0 0;
  &.-play-card {
    background-color: #00ADB5;
  }
  &.-new-game {
    background-color: #F8B500;
  }
  
}
.card {
  height: 300px;
  width: 200px;
  background-color: #fff;
  text-align: center;
  padding-top: 4em;
  border-radius: 15px;
  font-size: 24px;
 -webkit-box-shadow: 0px 4px 30px 1px rgba(0,0,0,0.52);
-moz-box-shadow: 0px 4px 30px 1px rgba(0,0,0,0.52);
box-shadow: 0px 4px 30px 1px rgba(0,0,0,0.52);
  &-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  &.-back {
    background-color: #fc3c3c;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53...

JavaScript

let suits = ["diams", "clubs", "hearts", "spades"];
let cardFace = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];
let deck = [];
let players = [[], []];
let firstRun = true;
let gameOver = false;
let playButton = document.querySelector("#btnPlay");
let resetGame = document.querySelector("#reset");
let p1 = document.querySelector("#player_1_hand");
let p2 = document.querySelector("#player_2_hand");
let s1 = document.querySelector("#player_1_score");
let s2 = document.querySelector("#player_2_score");
playButton.addEventListener('click', playGame);
resetGame.addEventListener('click', reset);
s1.innerHTML = 26;
s2.innerHTML = 26;

function playGame(){
    if(firstRun === true){
        $('.war_card').removeClass("cardback");
        firstRun = false;
        makeDeck();
        shuffleDeck(deck);
        dealCards(deck);
    }
    drawCards();
}

function reset(){
   s1.innerHTML = 26;
   s2.innerHTML = 26;
   $('.war_card').addClass("cardback").html("");
   $("#reports").html("Click the Play Card button to begin.");
}

function drawCards(){
    if(!gameOver){
        let p1Card = players[0].shift();
        let p2Card = players[1].shift();
        let cardsInPlay = [p1Card, p2Card];
    
        p1.innerHTML = placeCard(p1Card, 0);
        p2.innerHTML = placeCard(p2Card, 0);
    
        whoWon(p1Card, p2Card, cardsInPlay);
    
        s1.innerHTML = players[0].length;
        s2.innerHTML = players[1].length;
    }
}

function whoWon(p1Card, p2Card, cardsInPlay){
    //console.log(p1Card, p2Card);
    if(p1Card.cardValue > p2Card.cardValue){
        $("#reports").html("You won this round!");
        players[0] = players[0].concat(cardsInPlay);
        //console.log(players[0]);
    }else if(p1Card.cardValue < p2Card.cardValue){
        $("#reports").html("You lost this round...");
        players[1] = players[1].concat(cardsInPlay);
        //console.log(players[1]);
    }else{
        declareWar(cardsInPlay);
    }
   ...