JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Animal-raising demo for my game. 

<p>
View animal info: <select id='demo-animal-select'></select>
<button id='demo-animal-btn'>Go</button>
<br>
View terrain info: <select id='demo-terrain-select'></select>
<button id='demo-terrain-btn'>Go</button>
</p>
<div id='demo-info-box'></div>


<button id='farm-random-btn'>Randomise</button>
<button id='farm-advance-btn'>Advance to next day</button>

<p>Add a new animal by using an item from your inventory. A box will pop up with species info, and you choose an enclosure. The new animal's name and colour will be random.</p>
<div id='farm-animal-items'></div>
<div id='farm-create-animal-popup'></div>


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


<ul>
    <li>Build up to 10 enclosures with different terrains. One species can be kept at a time, per enclosure. (Might need 'maintenance' occasionally, depending on the terrain type? Replanting vegetation, adding new material or prey for predators)</li> 
    <li>Each species has terminology, common/rare colour lists, population limit, daily breeding chance %, lifespan, and certain items needed for feeding/healing.</li>
    <li>Individual animals are created using items from inventory. Some items are specific ("Lioness" makes an adult female), others are randomised ("Royal Python" can make either sex, young or old). Colour is randomised; tiny chance to get a rare colour.<br>Animals all have a name, species, sex, age, health, belly, colour. Can be sold, fed, healed, moved to other enclosures. Adult pairs may make babies daily, with simple colour inheritance/mutation chance. Rare colours sell for 4x more.</li>
    <li>Not super realistic, of course ;) Some fantasy colours to liven up dull species, and some species are conflated into a simpler general one.</li>
</ul>

CSS

#demo-info-box {
    display: none;
    padding: 10px;
    background-color: #eee;
    border: 1px solid silver;
    margin: 15px auto;
}

/* Most action happens here. All of a user's encs are rendered/listed. */
#farm-container {}

/* Contains visual enclosure, info/options and animal list below. */
.farm-enc-container {
    padding: 5px;
    border: 1px solid #eee;
    margin: 10px auto;
}
.selected-enc {
    background-color: #eee;
    box-shadow: inset 0 0 0 1px silver;
}

/* One visual enclosure, with background and animal divs in it. */
.farm-enc {
    width: 800px;
    height: 300px;
    margin: 10px auto;
    border: 1px solid black;
    background-color: lightgreen;
    position: relative;
    cursor: pointer;
}

/* Little sprites scattered around. Positions, images will be sorted later... */
.farm-enc .enc-animal {
    position: absolute;
    width: 80px;
    height: 60px;
    border: 1px dotted blue;
    cursor: pointer;
}
/* Add crosshair to highlight an animal. */
.selected-enc-animal {
    background:
    linear-gradient(to right, #000 4px, transparent 4px) 0 0,
    linear-gradient(to right, #000 4px, transparent 4px) 0 100%,
    linear-gradient(to left, #000 4px, transparent 4px) 100% 0,
    linear-gradient(to left, #000 4px, transparent 4px) 100% 100%,
    linear-gradient(to bottom, #000 4px, transparent 4px) 0 0,
    linear-gradient(to bottom, #000 4px, transparent 4px) 100% 0,
    linear-gradient(to top, #000 4px, transparent 4px) 0 100%,
    linear-gradient(to top, #000 4px, transparent 4px) 100% 100%;
  background-size: 20px 20px;
  background-repeat: no-repeat;
}

/* Table-like list of animals in an enclosure. */
.enc-list {
    border: 1px solid grey;
    background-color: #eee;
    margin: 10px auto;
}
.enc-list .list-animal {
    border: 1px solid grey;
    background-color: #fff;
    margin: 5px;
    position: relative;
    cursor: pointer;
}
.selected-list-animal {
    color: green;
}

/* List of items that can become animals....

JavaScript

const db = {

    // They start as items in inventory.
    // Put one into an enclosure, turns into new animal.
    animals: [
        {
            id: 1, name: "Cookie", encId: 1,
            species: 1, sex: 1, stage: 1, age: 6,
            colour: 1, rare: 1, health: 80, belly: 55
        },{
            id: 2, name: "Star", encId: 1,
            species: 1, sex: 2, stage: 2, age: 6,
            colour: 3, rare: 0, health: 80, belly: 55
        },{
            id: 3, name: "Echo", encId: 2,
            species: 2, sex: 1, stage: 1, age: 6,
            colour: 1, rare: 1, health: 80, belly: 55
        },{
            id: 4, name: "Breeze", encId: 2,
            species: 2, sex: 2, stage: 2, age: 6,
            colour: 4, rare: 0, health: 80, belly: 55
        },{
            id: 5, name: "Moon", encId: 3,
            species: 3, sex: 1, stage: 1, age: 6,
            colour: 2, rare: 0, health: 80, belly: 55
        },{
            id: 6, name: "Cloud", encId: 3,
            species: 3, sex: 2, stage: 2, age: 6,
            colour: 1, rare: 1, health: 80, belly: 55
        },{
            id: 7, name: "Misty", encId: 4,
            species: 4, sex: 1, stage: 1, age: 6,
            colour: 2, rare: 0, health: 80, belly: 55
        },{
            id: 8, name: "Blaze", encId: 4,
            species: 4, sex: 2, stage: 2, age: 6,
            colour: 1, rare: 1, health: 80, belly: 55
        },{
            id: 9, name: "Whisper", encId: 4,
            species: 4, sex: 1, stage: 1, age: 6,
            colour: 3, rare: 0, health: 80, belly: 55
        },{
            id: 10, name: "Flash", encId: 4,
            species: 4, sex: 2, stage: 2, age: 6,
            colour: 2, rare: 1, health: 80, belly: 55
        }
    ],
    
    // Where groups of animals are contained.
    // Need occasional fixing. See enclosureTypes table.
    enclosures: [
        {id: 1, terrain: 1, maintenance: 80},
        {id: 2, terrain: 1, maintenance: 40},
        {id: 3, terrain: 2,...