JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<link href="https://fonts.googleapis.com/css?family=Galdeano" rel="stylesheet">



<div id='result'></div>
Template: <input type='text' id='template'>
<button id='generate-btn'>Generate Name</button> | 
<button id='clear-btn'>Clear</button>

<hr>

<div id='griff-name'></div>
<button id='new-griff-name'>Generate Griff Name</button>

<p>.</p>.<p>.</p>

<div id='container'>

<h2>Which griffins can wear this item</h2>

<div id='item-table'></div>

<p>.</p>.<p>.</p>

<h2>Which items can be worn by this breed</h2>

<div id='breed-table'></div>

</div>

CSS

#result {
    max-height: 200px;
    overflow: auto;
}

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

#container {
    width: 970px;
    padding: 20px;
    font-size: 16px;
    font-family: "Galdeano";
}


    
#item-table .breed-container {
    border: 1px solid silver;
    margin: 5px 0;
    background-color: #eee;
    display: flex;
    flex-flow: row wrap;
}
#item-table .pose-container {
    width: 33.33%;
    border: 0px solid silver;
    padding: 5px;
    background-color: #fff;
    display: flex;
    align-items: center;
}


#breed-table .item-container {
    border: 1px solid silver;
    margin: 5px 0;
    background-color: #eee;
    display: flex;
    justify-content: space-between;
}
#breed-table .pose-list {
    width: 800px;
    display: flex;
}
#breed-table .pose-list .pose-container {
    width: 220px;
    border: 0px solid silver;
    padding: 5px;
    background-color: #fff;
}

JavaScript

const db = {
    items: [
        {id: 1, name: "Scarf"},
        {id: 2, name: "Cloak"},
        {id: 3, name: "Socks"},
        {id: 4, name: "Helmet"},
        {id: 5, name: "Armour"},
        {id: 6, name: "Necklace"},
    ],
    
    wearables: [
        {itemId: 1, poseId: 1},
        {itemId: 1, poseId: 2},
        {itemId: 1, poseId: 4},
        {itemId: 1, poseId: 5},
        {itemId: 1, poseId: 7},
        {itemId: 1, poseId: 12},
        {itemId: 1, poseId: 17},
        {itemId: 1, poseId: 18},
        {itemId: 2, poseId: 3},
        {itemId: 2, poseId: 4},
        {itemId: 2, poseId: 5},
        {itemId: 2, poseId: 6},
        {itemId: 2, poseId: 8},
        {itemId: 2, poseId: 10},
        {itemId: 2, poseId: 14},
        {itemId: 2, poseId: 16},
        {itemId: 3, poseId: 15},
        {itemId: 3, poseId: 11},
        {itemId: 3, poseId: 4},
        {itemId: 3, poseId: 5},
        {itemId: 3, poseId: 2},
        {itemId: 3, poseId: 8},
        {itemId: 3, poseId: 9},
        {itemId: 3, poseId: 18},
        {itemId: 3, poseId: 19},
        {itemId: 3, poseId: 20},
        {itemId: 4, poseId: 4},
        {itemId: 4, poseId: 7},
        {itemId: 4, poseId: 11},
        {itemId: 4, poseId: 12},
        {itemId: 4, poseId: 13},
        {itemId: 4, poseId: 16},
    ],
    
    breeds: [
        {id: 1, name: "Aquila"},
        {id: 2, name: "Opinicus"},
        {id: 3, name: "Hippogriff"},
        {id: 4, name: "Altero"},
        {id: 5, name: "Crystal"},
        {id: 6, name: "Heraldic"},
    ],
    
    poses: [
        {id: 1, breed: 1, name: "Standing"},
        {id: 2, breed: 1, name: "Sitting"},
        {id: 3, breed: 1, name: "Intimidating"},
        {id: 4, breed: 1, name: "Hovering"},
        {id: 5, breed: 2, name: "Posing"},
        {id: 6, breed: 2, name: "Sitting"},
        {id: 7, breed: 2, name: "Dramatic"},
        {id: 8, breed: 2, name: "Alternative"},
        {id: 9, breed: 3, name: "Standing"},
        {id: 10, breed: 3, name:...