JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<p>Demo: hybrids have stats based on % of each breed in their pedigree.</p>

<b>Breeds:</b>
<div id='breed-stats'></div>
<hr>
<b>Individuals:</b>
<div id='individual-stats'></div>

CSS

div {
    box-sizing: border-box;
}

.stats-container {
    width: 300px;
    height: 150px;
    margin: 5px 0;
    border: 1px solid grey;
    background-color: #eee;
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    align-items: flex-end;
}
.stats-container .stat-container {
    width: 30px;
    padding-bottom: 5px;
    text-align: center;
    font-size: 13px;
    border: 1px dotted red;
}
.stats-container .stat-bar {
    width: 20px;
    margin: 0 auto 5px auto;
    background-color: green;
}


.heritage-container {
    width: 300px;
    border: 1px solid grey;
    background-color: #eee;
    padding: 5px;
}
.heritage-container .heritage-row {
    border: 1px dotted red;
    display: flex;
    flex-flow: row;
}
.heritage-row .heritage-name {
    width: 150px;
}
.heritage-row .heritage-bar-outer {
    position: relative;
    width: 100px;
    height: 15px;
    border: 1px solid green;
}
.heritage-row .heritage-bar-inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: green;
}

.heritage-row .heritage-percent {
    width: 50px;
    text-align: right;
}

JavaScript

const statNames = ["hp", "mp", "str", "def", "mag", "res", "agi", "fcs"];

const db = {

    breeds: [
        {
            id: 1, name: "Griffin",
            stats: {
                hp: 80,
                mp: 20,
                str: 50,
                def: 70,
                mag: 20,
                res: 80,
                agi: 30,
                fcs: 10
            }
        },{
            id: 2, name: "Dragon",
            stats: {
                hp: 20,
                mp: 80,
                str: 20,
                def: 30,
                mag: 95,
                res: 25,
                agi: 75,
                fcs: 60
            }
        }
    ],
    
    mythics: [
        {id: 1, name: "Fluffy"},
        {id: 2, name: "Echo"},
        {id: 3, name: "Honey"},
        {id: 4, name: "Storm"},
        {id: 5, name: "Rocky"}
    ],
    
    heritage: [
        {mythicId: 1, breedId: 1, percent: 100},
        {mythicId: 2, breedId: 2, percent: 100},
        {mythicId: 3, breedId: 1, percent: 50},
        {mythicId: 3, breedId: 2, percent: 50},
        {mythicId: 4, breedId: 1, percent: 75},
        {mythicId: 4, breedId: 2, percent: 25},
        {mythicId: 5, breedId: 1, percent: 25},
        {mythicId: 5, breedId: 2, percent: 75}
    ]

};

// Receive object
// Generate HTML with bars, numbers.
function renderStats(stats){
    let html = "<div class='stats-container'>";
        
    for(let name of statNames){
        html += "<div class='stat-container'>";
        
        html += "<div class='stat-bar' style='height:" + stats[name] + "px'>";
        html += stats[name];
        html += "</div>";
        
        html += name.toUpperCase();
        html += "</div>";
    }
    
    html += "</div>";
    return html;
}

// Receive array
// Generate object with 8 stats.
function generateStats(heritage){
    let breeds = [],
        stats = {};
    for(let h of heritage){
        let breed = db.breeds.find(row => row.id == h.breedId);
       ...