JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<p>mockup.</p>


<p>Pet:</p>
<ul>
    <li>Breed: <select id='select-breed'></select></li>
    <li>Trait: <select id='select-trait'></select></li>     <li>Element: <select id='select-element'></select></li>
    <li>Personality: <select id='select-personality'></select></li>
    <li>Level: <input type='number' id='select-level' min='1' max='50' value='1'></li>
</ul>

<p>Enemy type: <select id='select-enemy'></select></p>
    
<p>Select a move:</p>
<div id='battle-move-btns'></div>

CSS

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

#battle-move-btns {
    width: 520px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
#battle-move-btns .battle-move-btn {
    width: 160px;
    margin: 3px 0;
    background-color: #eee;
    border: 1px solid silver;
    padding: 3px 5px;
}
#battle-move-btns .battle-move-btn:hover {
    cursor: pointer;
    background-color: silver;
    border: 1px solid grey;
}

JavaScript

const db = {

    breeds: [
        {id: 1, name: "Aquila"},
        {id: 2, name: "Opinicus"},
        {id: 3, name: "Minoan"},
        {id: 4, name: "Mycenaean"},
        {id: 5, name: "Water"},
        {id: 6, name: "Water"},
        {id: 7, name: "Water"},
        {id: 8, name: "Water"}
    ],
    
    elements: [
        {id: 1, name: "Water"},
        {id: 2, name: "Water"},
        {id: 3, name: "Water"},
        {id: 4, name: "Water"},
        {id: 5, name: "Water"},
        {id: 6, name: "Water"},
        {id: 7, name: "Water"},
        {id: 8, name: "Water"}
    ],
    
    personalities: [
        {id: 1, name: "Water"},
        {id: 2, name: "Water"},
        {id: 3, name: "Water"},
        {id: 4, name: "Water"},
        {id: 5, name: "Water"},
        {id: 6, name: "Water"},
        {id: 7, name: "Water"},
        {id: 8, name: "Water"}
    ],

    traits: [
        {id: 1, name: "Water"},
        {id: 2, name: "Water"},
        {id: 3, name: "Water"},
        {id: 4, name: "Water"},
        {id: 5, name: "Water"},
        {id: 6, name: "Water"},
        {id: 7, name: "Water"},
        {id: 8, name: "Water"}
    ],

    skills: [
        {id: 1, name: ""}
    ],
    
    // Moves are unlocked by points in skills.
    // [skill, points needed, move]
    skill_moves: [
    
    ],
    
    moves: [
        {id: 1, name: "Scratch"},
        {id: 2, name: "Bite"},
        {id: 3, name: "Horn Charge"},
        {id: 4, name: "Slam"},
        {id: 5, name: "Heal 1", mpCost: 5},
        {id: 6, name: "Heal 2", mpCost: 12},
        {id: 7, name: "Heal 3", mpCost: 20},
        {id: 8, name: "Flash", mpCost: 3},
        {id: 9, name: "Illuminate", mpCost: 6},
        {id: 10, name: "Kaleidos", mpCost: 12},
        {id: 11, name: "Poison", mpCost: 8},
        {id: 12, name: "Terrify", mpCost: 5},
        {id: 13, name: "Vampire", mpCost: 12},
        {id: 14, name: "Dust Storm", mpCost: 6},
        {id: 15, name: "Quake", mpCost: 10},
        {id: 16, name:...