JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

garden mockup.
<div id='page_container'>
    <div id='my_plots'></div>
    <div id='plot_info'></div>
</div>

CSS

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

#page_container {
    background-image: url("https://www.visitcornwall.com/sites/default/files/trebah02.JPG");
    background-size: cover;
    background-attachment: fixed;
    padding: 10px;
}

/* Contains visual overview: thumbnail image, name, few details about each plant in progress. */
#my_plots {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

/* Holds basic info. Highlight the plot currently being looked-at. */
#my_plots .plot {
    display: inline-block;
    padding: 10px;
    margin: 10px;
    border: 1px solid silver;
    background-color: #fff;
    transition: 0.2s;
}

#my_plots .plot:hover {
    cursor: pointer;
    background-color: #ddd;
    transition: 0.2s;
}

#my_plots .selected_plot {
    border: 1px solid #000;
    background-color: silver;
}

/* Holds detailed info, status, options etc. */
#plot_info {
    background-color: #fff;
    border: 1px solid silver;
    padding: 10px;
}

/* Plant name and growth points, at top. */
#plot_info .title {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    font-size: 25px;
}

/* Short paragraph about plant. Under title. */
#plot_info .description {
    font-style: italic;
    text-align: center;
    margin: 10px auto;
    border: 1px solid #ddd;
    padding: 10px;
}

/* User is prompted to choose an item, to maintain the plant. Highlight the current selected item div. */
#plot_info .item_list {
    margin: 10px auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

#plot_info .item_list .item {
    padding: 10px;
    border: 1px solid #ddd;
    margin: 10px;
    transition: 0.2s;
}

/* Don't have sufficient quantity; can't select. */
#plot_info .item_list .item_disabled {
    padding: 10px;
    background-color: lightpink;
    margin: 10px;
    transition: 0.2s;
}

#plot_info .item_list .item:hover {
    cursor: pointer;
    border: 1px solid grey;
    transition:...

JavaScript

// Mockup of database.
const db = {
    
    pets: [
        {id: 1, owner: 1, name: "Choc", energy: 75, skill1: 50, skill2: 45, skill3: 37},
        {id: 2, owner: 1, name: "Bun", energy: 80, skill1: 25, skill2: 70, skill3: 18},
        {id: 3, owner: 1, name: "Leaf", energy: 100, skill1: 5, skill2: 15, skill3: 60}
    ],
    
    users: [
        {id: 1, coins: 500, gardenLimit: 6},
        {id: 2, coins: 743, gardenLimit: 7}
    ],
    
    items: [
        {id: 1, name: "Apple pips"},
        {id: 2, name: "Apple"},
        {id: 3, name: "Peach stone"},
        {id: 4, name: "Peach"},
        {id: 5, name: "Manure"},
        {id: 6, name: "Water"},
        {id: 7, name: "Leaves"},
        {id: 8, name: "Tree Bark"},
        {id: 9, name: "Pear seeds"},
        {id: 10, name: "Pear"},
        {id: 11, name: "Special"},
    ],
    
    inventory: [
        {id: 1, userId: 1, itemId: 1, quantity: 6},
        {id: 2, userId: 1, itemId: 3, quantity: 5},
        {id: 3, userId: 1, itemId: 5, quantity: 14},
        {id: 4, userId: 1, itemId: 6, quantity: 9},
        {id: 5, userId: 1, itemId: 9, quantity: 7},
    ],
    
    /*
    * Don't need table really. Just for reference.
    */
    petSkills: [
        {id: 1, name: "Botany", description: "Studying plants."},
        {id: 2, name: "Digging", description: "Dealing with terrain."},
        {id: 3, name: "Dexterity", description: "Using paws, claws or horns."}
    ],
    
    /*
    * Plants that can be grown, what materials they need
    * to set up/maintain, what they produce...
    */
    gardenProjects: [
        {
            id: 1, name: "Apple Tree", points: 80,
            description: "A fairly-easy tree that produces lovely crisp apples.",
            setupItems: "1-1,", maintainItems: "5-1,6-2",
            harvestItems: "1,2,2,2,7,8", bonusItems: "11",
            sellPrice: 180, skillsNeeded: "2-20", difficulty: 2
        },{
            id: 2, name: "Peach Tree", points: 70,
           ...