JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Style: <select id='select-ml-style'></select>

<div id='ml-container'></div>

CSS

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

/* ml = mythic list */

#ml-container {
    width: 960px;
    margin: 20px auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    background-color: #eee;
}

/* One box containing all of a Mythic's info. */
/* Trying 3 diff styles here... */
.ml-box {
    background-color: #fff;
    border: 1px solid grey;
    margin: 5px;
    position: relative;
}

.ml-box-1 {
    width: 380px;
    height: 125px;
}
.ml-box-2 {
    width: 310px;
    height: 175px;
}
.ml-box-3 {
    width: 300px;
    height: 320px;
}


.ml-box .ml-box-position {
    position: absolute;
    background-color: #eee;
}

.ml-box .ml-box-name {
    text-align: center;
    font-size: 18px;
}
.ml-box-1 .ml-box-name {
    top: 10px;
    left: 160px;
    width: 210px;
    height: 30px;
}
.ml-box-2 .ml-box-name {
    top: 10px;
    left: 10px;
    width: 290px;
    height: 30px;
}
.ml-box-3 .ml-box-name {
    top: 220px;
    left: 10px;
    width: 280px;
    height: 30px;
}

.ml-box-1 .ml-box-breed {
    top: 50px;
    left: 160px;
    width: 210px;
    height: 20px;
}
.ml-box-2 .ml-box-breed {
    top: 50px;
    left: 160px;
    width: 140px;
    height: 60px;
}
.ml-box-3 .ml-box-breed {
    top: 260px;
    left: 10px;
    width: 280px;
    height: 20px;
}

/* Small pixel sprite. */
.ml-box-1 .ml-box-image {
    top: 10px;
    left: 10px;
    width: 140px;
    height: 100px;
    border: 1px dotted grey;
    background-color: silver;
}
.ml-box-2 .ml-box-image {
    top: 40px;
    left: 10px;
    width: 140px;
    height: 100px;
    border: 1px dotted grey;
    background-color: silver;
}
.ml-box-3 .ml-box-image {
    top: 10px;
    left: 10px;
    width: 280px;
    height: 200px;
    border: 1px dotted grey;
    background-color: silver;
}

JavaScript

const mythics = [
    {
        id: 1, name: "Sir Roarington",
        sex: 1, breed: "Brythonic Dragon",
        level: 18,
        hp: 50, maxHp: 100,
        mp: 20, maxMp: 20,
        energy: 58,
        mood: 26
    },{
        id: 2, name: "Lady Fluffsworth",
        sex: 2, breed: "Byzantine Griffin",
        level: 100,
        hp: 1520, maxHp: 2700,
        mp: 380, maxMp: 400,
        energy: 99,
        mood: 73
    },{
        id: 3, name: "Scalybottom",
        sex: 2, breed: "Doxy Dragon",
        level: 10,
        hp: 120, maxHp: 200,
        mp: 20, maxMp: 40,
        energy: 49,
        mood: 14
    },{
        id: 3, name: "Goldhorn",
        sex: 1, breed: "Byzantine Griffin",
        level: 100,
        hp: 1520, maxHp: 2700,
        mp: 380, maxMp: 400,
        energy: 99,
        mood: 73
    },
];

let boxStyle = 1,
    dropdown = document.getElementById("select-ml-style"),
    html = "";
for(let i = 1; i < 4; i++){
    html += "<option>" + i + "</option>";
}
dropdown.innerHTML = html;

dropdown.addEventListener("change", function(){
    console.log("aa");
    boxStyle = dropdown.value;
    console.log(boxStyle);
    renderMythics();
});


function renderMythics(){
    let html = "";
    for(let m of mythics){
        html += renderMythic(m);
    }
    document.getElementById("ml-container").innerHTML = html;
}

function renderMythic(m){
    let html = "<div class='ml-box ml-box-" + boxStyle + "'>";
    
    html += "<div class='ml-box-position ml-box-name'>";
    html += m.name;
    html += "</div>";
    
    html += "<div class='ml-box-position ml-box-image'>";
    html += m.id;
    html += "</div>";
    
    html += "<div class='ml-box-position ml-box-breed'>";
    html += "Lv. " + m.level;
    if(m.sex == 1){
        html += " [M] ";
    }else if(m.sex == 2){
        html += " [F] ";
    }else{
        html += " [X] ";
    }
    html += m.breed;
    html += "</div>";
    
    html += "</div>";
    return html;
}

renderMythics();