JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='demo-tab-buttons'>
    <button class='selected-tab' data-tab='test'>Test</button>
    <button data-tab='events'>Edit Events</button>
    <button data-tab='pets'>Edit Pets</button>
    <button data-tab='locations'>Edit Locations</button>
</div>
<div class='demo-tab' id='tab-test' style='display:block;'>
    <h2>Test</h2>
    ...
</div>
<div class='demo-tab' id='tab-events'>
    <h2>Edit Events</h2>
    ...
</div><div class='demo-tab' id='tab-pets'>
    <h2>Edit Pets</h2>
    <div id='pet-table'></div>
    
</div><div class='demo-tab' id='tab-locations'>
    <h2>Edit Locations</h2>
    ...
</div>

<hr>

<div id='patrol-setup'>
    <div id='patrol-pet-info'>
        <div class='title'>Choose pet/island</div>
        <b>Pet:</b> <select id='patrol-pet-select'></select>
        <br><b>Breed:</b> <span id='patrol-pet-breed'>?</span>
        <br><b>Sex:</b> <span id='patrol-pet-sex'>?</span>
        <br>
        <b>Location:</b> <select id='patrol-location-select'></select>
    </div>
    <div id='patrol-pet-arts'>
        <div class='title'>Change pet's Arts</div>
        <div id='patrol-art-container'></div>
        <div id='patrol-art-options'>
            <button data-option='zero'>None</button>
            <button data-option='max'>All</button>
            <button data-option='random'>Random</button>
        </div>
    </div>
    <div id='patrol-pet-skills'>
        <div class='title'>Change pet's Skills</div>
        <div id='patrol-skill-container'></div>
        <div id='patrol-skill-options'>
            <button data-option='zero'>Zero</button>
            <button data-option='max'>Max</button>
            <button data-option='random'>Random</button>
        </div>
    </div>
</div>

<p>Note: test-events only added for island 1 so far. Clear a pet's skills/arts and they can be re-learned in events.<br>Events can differ based on chance, breed, sex, stats, having certain skills/arts or not. And biome, building type...</p>

<div id='patrol-container'>
   ...

CSS

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

#demo-tab-buttons {
    
}
#demo-tab-buttons button {
    background-color: silver;
    padding: 5px 10px;
    border: 1px solid grey;
    position: relative;
    top: 1px;
    left: 10px;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
}
#demo-tab-buttons button:hover {
    background-color: #ddd;
    cursor: pointer;
}
.selected-tab {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}
.demo-tab {
    display: none;
    border: 1px solid grey;
    position: relative;
    background-color: #fff;
}


#patrol-setup {
    width: 600px;
    height: 200px;
    margin: auto;
    position: relative;
    border: 1px solid silver;
    background-color: #eee;
}

#patrol-setup .title {
    text-align: center;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px solid silver;
    margin-bottom: 5px;
}

#patrol-pet-info, #patrol-pet-arts, #patrol-pet-skills {
    position: absolute;
    width: 200px;
    height: 200px;
    overflow: auto;
    padding: 5px;
    border: 1px dotted silver;
    top: 0;
}

#patrol-pet-info {
    left: 0;
}
#patrol-pet-arts {
    left: 200px;
}
#patrol-pet-skills {
    left: 400px;
}

#patrol-skill-container, #patrol-art-container {
    height: 130px;
    overflow: auto;
    padding: 5px;
    background-color: #fff;
}
#patrol-art-container .art {
    border-bottom: 1px dotted silver;
}
#patrol-skill-container .skill {
    width: 100%;
    border-bottom: 1px dotted silver;
    display: flex;
    justify-content: space-between;
}
#patrol-skill-options, #patrol-art-options {
    margin-top: 5px;
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
}
#patrol-skill-options button {
    height: 24px;
    cursor: pointer;
}


#patrol-container {
    width: 600px;
    height: 500px;
    margin: 20px auto;
    border: 1px solid silver;
    background-color: #eee;
}
#patrol-bg {
    width: 100%;
    height: 100px;
   ...

JavaScript

const db = {
    pets: [
        {id: 1, name: "Frosty", breed: 4, sex: 2},
        {id: 2, name: "Pippin", breed: 3, sex: 1},
        {id: 3, name: "Appy", breed: 1, sex: 2},
        {id: 4, name: "Sandy", breed: 2, sex: 1},
        {id: 5, name: "Scorch", breed: 7, sex: 2},
        {id: 6, name: "Pine", breed: 8, sex: 1},
        {id: 7, name: "Echo", breed: 12, sex: 2},
        {id: 8, name: "Wisp", breed: 11, sex: 1},
        {id: 9, name: "Coconut", breed: 9, sex: 2},
        {id: 10, name: "Berry", breed: 6, sex: 1}
    ],
    breeds: [
        {id: 1, name: "Minoan griffin"},
        {id: 2, name: "Scythian griffin"},
        {id: 3, name: "Heraldic griffin"},
        {id: 4, name: "Achaemenid griffin"},
        {id: 5, name: "Aquila griffin"},
        {id: 6, name: "Brythonic dragon"},
        {id: 7, name: "Tillia dragon"},
        {id: 8, name: "Cyerce dragon"},
        {id: 9, name: "Unicorn"},
        {id: 10, name: "Pegasus"},
        {id: 11, name: "Marlik griffin"},
        {id: 12, name: "Hippogriff"},
        {id: 13, name: "Hippalectryon"},
        {id: 14, name: "Sirrush dragon"},
        {id: 15, name: "Thracian pegasus"},
        {id: 16, name: "Winged lion"},
        {id: 17, name: "Hieracosphinx"},
        {id: 18, name: "Siramorg"},
        {id: 19, name: "Valravn"},
        {id: 20, name: "Peryton"},
        {id: 21, name: "Cockatrice"},
        {id: 22, name: "Fenghuang"},
        {id: 23, name: "Hippocamp"},
        {id: 24, name: "Qilin"},
        {id: 25, name: "Quetzalcoatl"}
    ],
    arts: [
        {
            id: 1, name: "Rock Climb",
            desc: "Use nimble claws/paws/hooves to climb rock walls."
        },{
            id: 2, name: "Rock Smash",
            desc: "Hit a rock in such a way that it shatters."
        },{
            id: 3, name: "Capriole",
            desc: "A flashy vertical jump, landing in same spot."
        },{
            id: 4, name: "Suplex",
            desc: "Grab large thing in hands, lift...