JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

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

<div id="war_container">

    <div class='half'>
        <div class='card_container' id='player_1_cards'>
            <div class='war_card cardback' id='player_1_card'>
                <span class='war_hand' id='player_1_hand'></span>
            </div>
        </div>
        You have <span id='player_1_score'>0</span> cards.
    </div>
    
    
    <div class='half'>
        <div class='card_container' id='player_2_cards'>
            <div class='war_card cardback' id='player_2_card'>
                <span class='war_hand' id='player_2_hand'></span>
            </div>
        </div>
        They have <span id='player_2_score'>0</span> cards.
    </div>
    
    <div id='war_status'></div>
    <div id='war_reports'></div>
    
    <div id='war_buttons'>
        How many cards to play? 
        <button class="war_play_btn" data-cards='1'>1</button>
        <button class="war_play_btn" data-cards='2'>2</button>
        <button class="war_play_btn" data-cards='3'>3</button>
        <button class="war_play_btn" data-cards='4'>4</button>
        <button class="war_play_btn" data-cards='5'>5</button>
        <button class="war_play_btn" data-cards='6'>6</button>
        <br><button id="war_reset_btn">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 .half {
    width: 50%;
    padding: 20px;
}

#war_container #war_reports, #war_container #war_status {
    width: 100%;
    margin: 10px auto;
    text-align: center;
}

#war_container .card_container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: space-evenly;
}

/* Card template. */
#war_container .war_card {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Open Sans', sans-serif;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
    margin: 10px;
    text-align: center;
    position: relative;
    background-size: 100% 100%;
    display: block;
}

#war_container .war_card .name {
    position: absolute;
    top: 3%;
    left: 5%;
}
#war_container .war_card .illustration {
    position: absolute;
}
#war_container .war_card .points {
    position: absolute;
    top: 3%;
    right: 5%;
}
#war_container .war_card .rarity {
    position: absolute;
    font-weight: bold;
    bottom: 3%;
    right: 5%;
}
#war_container .war_card .value {
    position: relative;
    top: 50%;
    font-weight: bold;
    font-size: 30px;
    color: #fff;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);
}


/* Sizes for cards. */
#war_container .card_full {
    width: 340px;
    height: 460px;
    font-size: 20px;
}
#war_container .card_full .illustration {
    width: 300px;
    height: 400px;
    top: 30px;
    left: 10px;
}

#war_container .card_medium {
    width: 255px;
    height: 345px;
    font-size: 18px;
}
#war_container .card_small {
    width: 170px;
    height: 230px;
    font-size: 15px;
}
#war_container .card_tiny {
    width: 102px;
    height: 138px;
    font-size: 13px;
}

/*
* Styles for elemental cards.
* Life, Void, Arcane, Sky.
* Non-elemental cards will use the default style.
*/
#war_container .card_element_1 {
...

JavaScript

let p1 = document.querySelector("#player_1_cards");
let p2 = document.querySelector("#player_2_cards");
let s1 = document.querySelector("#player_1_score");
let s2 = document.querySelector("#player_2_score");

function randomArray(array){
    return array[Math.floor(Math.random() * array.length)];
}

function randomNumber(n1, n2){
    if(n1 == n2){ return n1; }
    var min = n1; var max = n2;
    if(n1 > n2){ min = n2; max = n1; }
    return Math.floor(Math.random()*(max-min+1)+min);
}


/*
* Stuff to be used/looked up in any game.
*/
const warData = {
    /*
    * The four elements a card can have.
    */
    elements: [
        {name: "No Element", desc: "This card is not affiliated."},
        {name: "Life", desc: "(Life elemental description.)"},
        {name: "Void", desc: "(Void elemental description."},
        {name: "Arcane", desc: "(Arcane elemental description.)"},
        {name: "Sky", desc: "(Sky elemental description.)"},
    ],
    
    /*
    * The range of faces a card can have.
    * Some are simple 'points' cards,
    * others can be boosters/multipliers/etc...
    */
    faces: [
        // Could use this for ACEO/decorative cards?
        // No purpose.
        {type: 1, value: 0},
        // Simple point-value cards.
        {type: 2, value: 1},
        {type: 2, value: 2},
        {type: 2, value: 3},
        {type: 2, value: 4},
        {type: 2, value: 5},
        {type: 2, value: 6},
        {type: 2, value: 7},
        {type: 2, value: 8},
        {type: 2, value: 9},
        {type: 2, value: 10},
        {type: 2, value: 11},
        {type: 2, value: 12},
        {type: 2, value: 13},
        {type: 2, value: 14},
        // These have no value themselves.
        // They multiply the total value of other cards.
        {type: 3, value: 1.2},
        {type: 3, value: 1.4},
        // Boost the value of other cards of same element.
        {type: 4, value: 1.5},
        {type: 4, value: 2},
    ],
    
    /*
    * More info on the...