JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>
explore event/outcome system.

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

<div id='event-buttons'></div>

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

<button id='random-event-btn'>Random event</button> - 
<select id='select-event'></select>
<button id='test-event-btn'>Test event</button>

    <div id='create-event-form'></div>

</div>

CSS

div, button, img, select, input, textarea {
    box-sizing: border-box;
}

#container {
    width: 970px;
    margin: 20px auto;
}

#event-container {
    background-color: #eee;
    padding: 10px;
    margin: 10px 0;
}
#event-buttons {
    background-color: #eee;
    padding: 10px;
    margin: 10px 0;
    display: flex;
    justify-content: space-evenly;
}
#outcome-container {
    background-color: #eee;
    padding: 10px;
    margin: 10px 0;
}



#create-event-form {
    background-color: #eee;
    padding: 1px 20px 20px 20px;
    margin: 20px 0;
}
#create-event-form select {
    width: 80px;
}
#create-event-form input[type="number"],
#create-event-form input[type="text"] {
    width: 70px;
}
textarea {
    width: 100%;
}

.thirds {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.thirds .third {
    width: calc(33% - 5px);
    margin-top: 10px;
    background-color: #fff;
    padding: 10px;
}
.third .title {
    background-color: #ccc;
    padding: 3px 5px;
    font-weight: bold;
    text-align: center;
    margin: 8px 0;
}

JavaScript

const db = {

    areas: [
        {id: 1, name: "Beach"},
        {id: 2, name: "Forest"}
    ],

    events: [
        {
            id: 1, area: 2, name: "forest trap",
            text: "[PET] spots a trap hidden in bushes. damn humans. feels bad to leave it here...",
            btn_1: "Spring it", outcome_1: 6,
            btn_2: "Steal it", outcome_2: 8,
            btn_3: "Take it apart", outcome_3: 7
        },
        {
            id: 2, area: 1, name: "jellyfish beach",
            text: "beach covered in jellyfish.",
            btn_1: "Pick up", outcome_1: 4,
            btn_2: "Eat", outcome_2: 2
        },
        {
            id: 3, area: 0, name: "kaleidos help",
            text: "npc needs help with light spell.",
            btn_1: "Go and help", outcome_1: 1,
            btn_2: "Show off", outcome_2: 5
        },
        {
            id: 4, area: 2, name: "forest fungi",
            text: "find clusters of fungi in forest",
            btn_1: "Pick one", outcome_1: 9,
            btn_2: "Eat one", outcome_2: 8,
            btn_3: "Examine", outcome_3: 7
        },
        {
            id: 5, area: 2, name: "flowerbeds",
            text: "lovely flowerbeds someone's cultivating, and magic insects buzzing around",
            btn_1: "Admire", outcome_1: 6,
            btn_2: "Pick one", outcome_2: 8,
            btn_3: "Oh, butterfly!", outcome_3: 7
        },
        {
            id: 6, area: 2, name: "kid's insects",
            text: "kid showing off his colourful magic insect pets. which one's your fave?",
            btn_1: "Beetle!", outcome_1: 6,
            btn_2: "Butterfly!", outcome_2: 8,
            btn_3: "Dragonfly!", outcome_3: 7
        },
        {
            id: 7, area: 2, name: "fallen tree",
            text: "fallen tree blocking path. could turn and go another way, or...",
            btn_1: "Move it", outcome_1: 6,
            btn_2: "Harvest wood", outcome_2: 8,
        },
        {
            id: 8, area: 2,...