JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='tech-field-btns'>
    <button data-field='1'>Computers</button>
    <button data-field='2'>Construction</button>
    <button data-field='3'>Force Fields</button>
    <button data-field='4'>Planetology</button>
    <button data-field='5'>Propulsion</button>
    <button data-field='6'>Weapons</button>
</div>
<table id='tech-table'></table>

CSS

#tech-table {
    width: 100%;
    border-collapse: collapse;
}
#tech-table td {
    padding: 2px 5px;
    border: 1px solid silver;
}
#tech-table .empty-tech td {
    background-color: #eee;
}

JavaScript

const db = {

    /*
    * Playable races.
    */
    races: [
        {
            id: 1, name: "Human",
            about: "",
            techSkills: [1,1,1,1,1,1],
            starName: "Sol",
            rulerNames: ["Lasitus","",""],
            shipNames: ["",""]
        },{
            id: 2, name: "Psilon",
            about: "",
            techSkills: [1,1,1,1,1,1],
            starName: "Mentar",
            rulerNames: ["Zygot","Tachaon",""],
            shipNames: ["Star Fury","Nova","Dark Star","Star Stream","Sun Fire"]
        },{
            id: 3, name: "Mrrshan",
            about: "",
            techSkills: [1,1,1,1,1,1],
            starName: "Fierias",
            rulerNames: ["","",""],
            shipNames: ["",""]
        },{
            id: 4, name: "Meklar",
            about: "",
            techSkills: [1,1,1,1,1,1],
            starName: "uhh",
            rulerNames: ["","",""],
            shipNames: ["",""]
        },{
            id: 5, name: "Darlok",
            about: "",
            techSkills: [1,1,1,1,1,1],
            starName: "Nazin", // Fantasia?
            rulerNames: ["Narzina","Nazgur",""],
            shipNames: ["Viper","Cobra","King Cobra"]
        },{
            id: 6, name: "Bulrathi",
            about: "",
            starName: "Ursa",
            rulerNames: ["Monch","",""],
            shipNames: ["",""]
        },{
            id: 7, name: "Alkari",
            about: "",
            techSkills: [1,1,1,1,1,1],
            starName: "Altair",
            rulerNames: ["Farseer","Skylord",""],
            shipNames: ["",""]
        },{
            id: 8, name: "Silicoid",
            about: "",
            techSkills: [1,1,1,1,1,1],
            starName: "Cryslon",
            rulerNames: ["Granid","Geode","Carnax"],
            shipNames: ["",""]
        },{
            id: 9, name: "Klackon",
            about: "",
            techSkills: [1,1,1,1,1,1],
            starName: "Kholdan",
           ...