JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='switch-btns'>
    <div class='switch-btn selected-screen' data-screen='title'>Title</div>
    <div class='switch-btn' data-screen='farm'>Farm</div>
    <div class='switch-btn' data-screen='profile'>Profile</div>
    <div class='switch-btn' data-screen='studs'>Studs</div>
    <div class='switch-btn' data-screen='market'>Market</div>
    <div class='switch-btn' data-screen='records'>Records</div>
    <div class='switch-btn' data-screen='stable'>Stable</div>
    <div class='switch-btn' data-screen='program'>Program</div>
    <div class='switch-btn' data-screen='jockeys'>Jockeys</div>
    <div class='switch-btn' data-screen='track'>Racecourse</div>
    <div class='switch-btn' data-screen='race'>Race</div>
    <div class='switch-btn' data-screen='bet'>Betting</div>
    <div class='switch-btn' data-screen='result'>Result</div>
    
</div>

<div id='game-container'>

    <div id='title-screen' class='game-screen'>
        <h1>Title</h1>
        
        <p>Load a game by pasting JSON data into the Import box and clicking the button. This can be done at any time. To 'save' progress, click Export and copy the JSON from there.</p>
    </div>

    <div id='farm-screen' class='game-screen' style='display:none;'>
        <div id='farm-market' class='click' data-click='market'>Market</div>
        <div id='farm-records' class='click' data-click='records'>Records</div>
	    
        <div id='farm-signs'>
            <div class='farm-sign click' data-click='farm_m'>Mares</div>
            <div class='farm-sign click' data-click='farm_s'>Stallions</div>
            <div class='farm-sign click' data-click='farm_r'>Retired</div>
        </div>
	
	    <div id='farm-horses'></div>
    </div>

    <div id='records-screen' class='game-screen' style='display:none;'>
        <div id='record-btns'>
            <div class='record-btn click' data-click='gi'>GI Banners</div>
            <div class='record-btn click' data-click='hof'>Hall of Fame</div>
            <div...

CSS

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

#switch-btns {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 20px 0;
}
#switch-btns .switch-btn {
    background-color: #eee;
    border: 2px solid #eee;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 5px;
    transition: 0.2s;
}
#switch-btns .switch-btn:hover {
    cursor: pointer;
    border: 2px solid silver;
    transition: 0.2s;
}
#switch-btns .selected-screen {
    border: 2px solid grey;
    transition: 0.2s;
}

#game-container {
	width: 640px;
	height: 460px;
	position: relative;
	margin: 20px auto;
	box-shadow: 0 0 0 5px lightblue;
}
#game-container .game-screen {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-size: cover;
}
#game-container .game-screen > div {
	position: absolute;
    background-color: #eee;
    border: 1px dashed #ccc;
}


/* Used on several screens */

.horse-thumb {
    width: 250px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.horse-thumb:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.2);
}
.horse-thumb .horse-image {
    width: 100px;
    height: 80px;
    background-color: skyblue;
    /* center canvas */
}
.horse-thumb .horse-name {
    flex-grow: 3;
    border: 1px dotted yellow;
    font-size: 24px;
    word-wrap: break-word;
}
.horse-thumb .horse-boxes {
    width: 30px;
}
.horse-thumb .horse-boxes .horse-box {
    border: 1px dotted green;
    height: 30px;
    font-size: 24px;
    margin-bottom: 10px;
}


/* Pasture/ranch screen */

#farm-screen {
	background-image: url("");
}
#farm-market {
	width: 100px;
	height: 50px;
	top: 20px;
	left: 160px;
    border: 1px dotted red;
}
#farm-records {
    width: 100px;
	height: 50px;
	top: 20px;
	left: 20px;
    border: 1px dotted purple;
}
#farm-signs {
    width: 260px;
	height: 50px;
	top: 20px;
	left: 360px;
    display: flex;
    justify-content:...

JavaScript

const db = {

    horses: [
        {
            id: 1, name: "Northern Taste",
            sex: 1, age: 8,
            geno: {},
            ability: {}
        }
    ],
    
    ability: [
        {
            name: "Dirt",
            key: "dirt", min: 1, max: 3,
            words: ["Good", "OK", "Poor"]
        },{
            name: "Growth",
            key: "grow", min: 1, max: 3,
            words: ["Early", "Medium", "Late"]
        },{
            name: "Temperament", 
            key: "temp", min: 1, max: 5,
            words: ["Dream", "Nice", "Fine", "Tricky", "Golshi"]
        },{
            name: "Speed",
            key: "spd", min: 1, max: 3,
            words: ["Fast", "OK", "Slow"]
        },{
            name: "Stamina",
            key: "stam", min: 1, max: 3,
            words: ["Strong", "OK", "Weak"]
        },{
            name: "Distance",
            key: "dist", min: 1, max: 5,
            
        }
    ],
    
    traits: [
        {
            name: "Extension", symbol: "e", wt: "E",
			options: [
			    ["E", "(black)"], ["e", "(red)"]
			]
		},{
		    name: "Agouti", symbol: "a", wt: "A",
			options: [
			    ["A", "(yes)"], ["a", "(no)"]
			]
		},{
		    name: "Cream", symbol: "cr", wt: "cr",
			options: [
                ["Cr", "(yes)"], ["cr", "(no)"], 
                ["prl", "(pearl)"]
			]
		},{
		    name: "Grey", symbol: "g", wt: "g",
			options: [
			    ["G", "(yes)"], ["g", "(no)"]
			]
		},{
		    name: "Dapple", symbol: "d", wt: "D",
			options: [
			    ["D", "(yes)"], ["d", "(no)"]
			]
		},{
		    name: "Flaxen", symbol: "f", wt: "F",
			options: [
			    ["F", "(no)"], ["f", "(yes)"]
			]
		},{
		    name: "Liver", symbol: "lv", wt: "lv",
			options: [
			    ["Lv", "(yes)"], ["lv", "(no)"]
			]
		},{
		    name: "White", symbol: "w", wt: "w",
			options: [
			    ["W", "(solid white)"], ["Bu", "(Buchiko)"], 
				["Rn", "(roan)"], ["Tb", "(tobiano)"],
				["Spl", "(splash)"], ["w", "(none)"]
			]
		},{
		   ...