JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

js func test.

<div id='tab_button_container'>
    <div class='tab_button active_tab' data-tab='1'>Items</div>
    <div class='tab_button' data-tab='2'>Inventory</div>
    <div class='tab_button' data-tab='3'>Shops</div>
    <div class='tab_button' data-tab='4'>Characters</div>
    <div class='tab_button' data-tab='5'>Enemies</div>
</div>
<div id='tab_content_container'>

    <div class='tab_content tab_1'>
        
        <div id='items_table'>...</div>
     
        <div id='items_pagination' class='pagination' data-type='items'>...</div>
        
        <fieldset>
            <legend>Add an item</legend>
            Name: <input type='text' id='create_item_name' maxlength='20'>
            Desc: <input type='text' id='create_item_desc' maxlength='500'>
            Buy: <input type='number' id='create_item_buy' min='1' max='999'>
            Sell: <input type='number' id='create_item_sell' min='1' max='999'>
            <button id='create_item_btn'>Create</button>
        </fieldset>
        
        <fieldset>
            <legend>Delete an item</legend>
            ID: <input id='delete_item_id' type='number' min='1' max='999'>
            <button id='delete_item_btn'>Delete</button> 
        </fieldset>
        
    </div>
    <div class='tab_content tab_2 hidden'>
        
        <div id='inv_table'>...</div>
        
        <div id='inv_pagination' class='pagination' data-type='inv'>...</div>
        
        <fieldset>
            <legend>Give or take item from player</legend>
            ID: <input id='give_item_id' type='number' min='1'> 
            Quantity: <input id='give_item_quantity' type='number' min='1'> 
            <button class='give_item_btn' data-action='give'>Give</button> 
            <button class='give_item_btn' data-action='take'>Take</button>
        </fieldset>
    
    </div>
    <div class='tab_content tab_3 hidden'>
        
        <div id='shops_table'>...</div>
        
        <div id='shops_pagination' class='pagination'...

CSS

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

input { width: 50px; }

.hidden { display: none; }

/* Variables */
:root {
    --gold_vdark: #635B4D;
    --gold_dark: #BAA47D;
    --gold_medium: #DEC497;
    --gold_light: #F5E8D2;
    --silver: #ddd;
    --silver_medium: #a3a3a3;
    --silver_dark: #424242;
}

#tab_button_container .tab_button {
    display: inline-block;
    position: relative;
    top: 1px;
    padding: 5px 10px;
    border: 1px solid grey;
    background-color: silver;
    transition: 0.2s;
}

#tab_button_container .active_tab {
    border-bottom: 1px solid white;
    background-color: white;
    transition: 0.2s;
}

#tab_button_container .tab_button:hover {
    cursor: pointer;
    background-color: #eee;
    transition: 0.2s;
}

#tab_content_container {
    border: 1px solid grey;
    padding: 10px;
}


/*
* Forms etc are in these.
*/
fieldset {
    margin: 20px auto;
    border: 1px solid silver;
}

fieldset legend {
    border: 1px solid silver;
    padding: 5px 10px;
}

/*
* Page buttons.
*/
div.pagination {
	width: 100%;
	margin: 20px auto;
	text-align: center;
}

div.pagination button {
	margin: 2px;
	border: 1px solid var(--silver_medium);
	color: var(--silver_dark);
    background-color: #fff;
	padding: 5px 8px;
}

div.pagination button:hover {
	cursor: pointer;
	border: 1px solid var(--gold_vdark);
	background-color: var(--gold_light);
	color: var(--gold_vdark);
	text-decoration: none;
}

div.pagination button.page_current {
	border: 1px solid var(--gold_vdark);
	background-color: var(--gold_medium);
	color: var(--gold_vdark);
}

div.pagination button.page_disabled {
	border: 1px solid var(--silver_dark);
	background-color: var(--silver_medium);
	color: var(--silver_dark);
}



/* Any table. Items, party... */
.info_table {
    width: 100%;
    margin: 20px auto;
    border-collapse: collapse;
}

.info_table td {
    padding: 5px;
    border: 1px solid silver;
}

.info_table tr:nth-child(even) {
  background: #eee;
}

JavaScript

const game = {
    
    items: {
        /*
        * Array of all items used in game.
        */
        list: [
            {
                id: 1, name: "Apple", buy: 5, sell: 3,
                desc: "apple..."
            },{
                id: 2, name: "Banana", buy: 4, sell: 2,
                desc: "banana..."
            },{
                id: 3, name: "Cherry", buy: 2, sell: 1,
                desc: "cherry..."
            },{
                id: 4, name: "Mango", buy: 9, sell: 6,
                desc: "mango..."
            },{
                id: 5, name: "Raspberry", buy: 2, sell: 1,
                desc: "raspberry..."
            },{
                id: 6, name: "Orange", buy: 7, sell: 4,
                desc: "orange..."
            }
        ],
        
        currentPage: 1,
        lastID: 6,
        
        /*
        * Functions to 'search' for items.
        */
        getItemByName: function(n){
            return game.items.list.find(({name}) => name === n);
        },
        
        getItemById: function(n){
            if(n < 1 || n > game.items.list.length){
                throw "game.items.getItemById(): invalid id: " + n;
            }
            return game.items.list.find(({id}) => id === n);
        },
        
        getLastId: function(){
            return game.items.lastID; 
        },
        raiseLastId: function(){
            game.items.lastID++; 
        },
        
        /*
        * Add a new item to array.
        */
        createItem: function(data){
            game.items.list.push({
                id: game.items.getLastId() + 1,
                name: data.name,
                desc: data.desc,
                buy: data.buy,
                sell: data.sell
            });
            console.log("Created item " + data.name);
            game.items.raiseLastID();
        },
        
        /*
        * Remove an item from array.
        */
        deleteItem: function(itemId){
            let item =...