JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<select id='select-shop'></select> 
<button class='ps-open-btn'>Open Popup Shop</button>
 - 
<select id='select-dialogue'></select>
<button class='pd-open-btn'>Open Popup Dialogue</button> 
<button id='pd-randomise-btn'>Randomise settings</button>

<div id='popup-shop'></div>

<div id='popup-dialogue'></div>

<ul>
    <li><b>Weather:</b> <span id='test-weather'></span></li>
    <li><b>Time of day:</b> <span id='test-timeOfDay'></span></li>
    <li><b>Day of week:</b> <span id='test-dayOfWeek'></span></li>
    <li><b>Season:</b> <span id='test-season'></span></li>
    <li><b>Plot/campaign:</b> <span id='test-plot'></span></li>
    <li><b>Plot step:</b> <span id='test-plotStep'></span></li>
    <li><b>Umm:</b> <span id='test-umm'>?</span></li>
</ul>

CSS

div, img, button, canvas, p, a {
    box-sizing: border-box;
}
body {
    background-color: #eee;
}

/* SHOP POPUP */
/* All items in game are bought in this way. */

/* Holds the popup shop. */
#popup-shop {
    display: none;
    width: 800px;
    height: 500px;
    background-color: brown;
    background-image: url("http://corrupteddevelopment.com/wp-content/uploads/2012/01/antique-paper-texture.jpg");
    border: 2px solid black;
    position: fixed;
    top: calc(50% - 250px);
    left: calc(50% - 400px);
}

/* Inner div needed for positioning contents. */
#ps-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Show user's currencies. */
#ps-coins {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 90px;
    height: 30px;
    border: 1px solid silver;
    font-size: 20px;
}
#ps-gems {
    position: absolute;
    bottom: 5px;
    left: 110px;
    width: 90px;
    height: 30px;
    border: 1px solid silver;
    font-size: 20px;
}

/* Bar at bottom. Show item names when hover. */
#ps-bottom {
    position: absolute;
    bottom: 5px;
    left: 210px;
    width: 400px;
    height: 30px;
    font-size: 20px;
    border: 1px solid silver;
    text-align: center;
}

/* Button to close the div. */
#ps-close {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 80px;
    height: 30px;
    border: 1px solid silver;
    transition: 0.3s;
    font-size: 20px;
}
#ps-close:hover {
    cursor: pointer;
    background-color: coral;
    transition: 0.3s;
}

/* Image of the shopkeeper. */
#ps-portrait {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 140px;
    height: 100px;
    border: 1px solid silver;
}

/* Next to image, their greeting text. */
#ps-greeting {
    position: absolute;
    top: 5px;
    left: 155px;
    width: 385px;
    height: 100px;
    border: 1px solid silver;
    overflow: auto;
}

/* Shop name on right side */
#ps-name {
    position: absolute;
    top: 5px;
    right: 5px;
   ...

JavaScript

const url = "http://griffusion.elementfx.com/pics/items/";

const db = {

    items: [
        {id: 168, name: "Item 1", desc: "Desc 1"},
        {id: 169, name: "Item 2", desc: "Desc 2"},
        {id: 170, name: "Item 3", desc: "Desc 3"},
        {id: 171, name: "Item 4", desc: "Desc 4"},
        {id: 172, name: "Item 5", desc: "Desc 5"},
        {id: 173, name: "Item 6", desc: "Desc 6"},
        {id: 7, name: "Item 7", desc: "Desc 7"},
        {id: 8, name: "Item 8", desc: "Desc 8"},
        {id: 9, name: "Item 9", desc: "Desc 9"},
        {id: 10, name: "Item 10", desc: "Desc 10"},
        {id: 11, name: "Item 11", desc: "Desc 11"},
        {id: 12, name: "Item 12", desc: "Desc 12"},
        {id: 13, name: "Item 13", desc: "Desc 13"},
        {id: 14, name: "Item 14", desc: "Desc 14"},
        {id: 15, name: "Item 15", desc: "Desc 15"},
        {id: 16, name: "Item 16", desc: "Desc 16"},
        {id: 17, name: "Item 17", desc: "Desc 17"},
        {id: 18, name: "Item 1", desc: "Desc 18"}
    ],
    
    shops: [
        {
            id: 1, name: "Name 1",
            greeting: "hello"
        },{
            id: 2, name: "Name 2",
            greeting: "hi"
        },{
            id: 3, name: "Name 3",
            greeting: "good day"
        },{
            id: 4, name: "Name 4",
            greeting: "sup"
        }
    ],
    
    shopStock: [
        {itemId: 1, shopId: 1, price: 50},
        {itemId: 2, shopId: 1, price: 45},
        {itemId: 1, shopId: 2, price: 65},
        {itemId: 2, shopId: 2, price: 70},
        {itemId: 3, shopId: 2, price: 42},
        {itemId: 4, shopId: 2, price: 18},
        {itemId: 5, shopId: 2, price: 12},
        {itemId: 6, shopId: 2, price: 16},
        {itemId: 7, shopId: 2, price: 20},
        {itemId: 8, shopId: 2, price: 40},
        {itemId: 9, shopId: 2, price: 75},
        {itemId: 10, shopId: 2, price: 130},
        {itemId: 3, shopId: 3, price: 50},
        {itemId: 5, shopId: 3, price: 55},
        {itemId: 9,...