JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<p>Example of errand generation. New list of randomly-generated tasks every hour. There might be multiple pets who can do each task; choose one. They'll get EXP and you'll earn currency and an item, depending on the type of task. And you'll get a bit of text and a little illustration saying what happened afterward; the NPC thanking you or such.</p>
<p><button id='generate-btn'>Generate more</button></p>

<div id='errand-list'></div>

CSS

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

#errand-list {
    width: 800px;
    background-color: #eee;
    padding: 10px;
}

#errand-list .errand-task {
    border: 1px solid silver;
    background-color: #fff;
    padding: 5px;
    border-radius: 3px;
    margin: 20px 0;
}

JavaScript

const db = {

    // Parameters that can be used when generating tasks.
    // Multiple tasks can be of same type, but slightly diff.
    errandTypes: [
        {
            id: 1, name: "Artist Group",
            startText: "We need a model for our life-drawing class tonight. Please hurry!",
            endText: "Whew, thanks! You looked good and we learned a lot.",
            // Requirements.
            // End with - and the % chance of asking for them.
            
            // This type of task always wants ONE of these breeds.
            breed: "3,4,5-100",
            // 30% of the time, it'll want a male/female randomly.
            // Use 1 to specify male, and 2 for female. 3 = pick.
            sex: "3-30",
            // Default is 4 (adult/grand), can specify others.
            // Grands can do adult tasks as well as grand tasks.
            stage: "1,2,3-60",
            // Might specify age limits.
            min_age: "15,20-20",
            max_age: "70,80-20",
            // 25% chance to ask for minimum level 5-10.
            min_level: "5,10-25",
            // 5% chance to demand the pet has a custom coat.
            coat: "1-5",
            // Don't care about fertility, leave at 0.
            fertile: "0",
            // Might want a min/max amount of inbreeding.
            min_inbred: "20,30-5",
            max_inbred: "40,45-10",
            // 60% of the time, it wants minimum STR between 10-20
            stat_str: "10,20-60",
            // other stats.
            stat_def: "5,10-5",
            stat_mag: "20,30-10",
            stat_res: "30,40-2",
            stat_agi: "5,15-5",
            stat_per: "2,4-2",
            // Want ONE of these abilities.
            ability: "1,2,3-5",
            // Rewards.
            // Always get coins and ONE item from list.
            coins: "5,10", items: "2,3,6"
        },
        {
            id: 2, name: "Fisherman",
            startText: "I need some help catching fish this...