JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

<h2>Catching minigame</h2>

<button id='random-btn'>Randomise</button>

<div id='catch-beasts'>[generate]</div>

<div id='catch-warning'>[select a beast]</div>

<div id='catch-report'>To begin, select a beast and an action.</div>

<div id='catch-actions'>
    <button class='catch-action-btn feed-btn' data-action='1'>Throw food</button>
    <button class='catch-action-btn' data-action='2'>Tempt with food</button>
    <button class='catch-action-btn' data-action='3'>Calm spell</button>
    <button class='catch-action-btn' data-action='4'>Sleep spell</button>
    <button class='catch-action-btn' data-action='1'>Scare away</button>
    <button class='catch-action-btn' data-action='1'>Deter spell</button>
    <button class='catch-action-btn' data-action='1'>Make odd noise</button>
    <button class='catch-action-btn' data-action='1'>sth</button>
    <button class='catch-action-btn' data-action='1'>Throw food</button>
    <button class='catch-action-btn' data-action='1'>Throw food</button>
    <button class='catch-action-btn' data-action='1'>Throw food</button>
    <button class='catch-action-btn' data-action='1'>Throw food</button>
</div>


<h2>How to catch beasts</h2>

<p>While exploring, your party may encounter a beast - or two, three, four at once! Get ready for some strategy...</p>

<p>Each beast has a counter for 'co-operation points', beween 0 and 100. You choose actions to hopefully raise these points, making the desired beast(s) calmer and more interested in you. One target-beast is chosen at a time, although some actions may affect multiple other beasts. This is a turn-based challenge with no time limit, so take as long as you want.</p>

<p>If a beast has 80+ points, you can try to capture it. If successful it will be sent away to the [stable]. Failed attempts will take points away, and the beast might flee or attack you. For the best chance, try to raise the beast to 100 points before catching.</p>

<p>Some species are easy to lure....

CSS

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

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

ul li {
    margin-bottom: 5px;
}

#catch-beasts {
    width: 800px;
    height: 200px;
    margin: 20px auto;
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    align-items: center;
    border: 1px solid black;
    background-color: green;
}
#catch-beasts .catch-beast {
    border: 1px dotted white;
    border-radius: 2px;
    text-align: center;
    padding: 5px;
    transition: 0.2s;
}
#catch-beasts .catch-beast:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.2s;
}
#catch-beasts .selected-beast {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid #fff;
}

#catch-beasts .catch-beast img {
    width: 150px;
    height: 120px;
    border: 1px dotted black;
}

#catch-warning {
    display: none;
    text-align: center;
    border: 1px solid silver;
    padding: 5px 10px;
    margin-bottom: 5px;
}
#catch-report {
    background-color: silver;
    padding: 5px 10px;
    text-align: center;
    margin: 10px auto;
}

JavaScript

const db = {

    species: [
        {
            id: 1, name: "Spiny Cockatrice",
            fear: 0, anger: 2,
            fightChance: 50, spellChance: 20,
            feedItem: 1, giftItem: 1
        },{
            id: 2, name: "Fairydragon",
            fear: 2, anger: 0,
            fightChance: 10, spellChance: 40
        },{
            id: 3, name: "Docile Cockatrice",
            fear: 0, anger: 0,
            fightChance: 40, spellChance: 10
        },{
            id: 4, name: "Big Nasty Dragon",
            fear: 0, anger: 3,
            fightChance: 98, spellChance: 40
        },{
            id: 5, name: "Brocaded Lop",
            fear: 3, anger: 0,
            fightChance: 40, spellChance: 5
        },{
            id: 6, name: "Midnight Unicorn",
            fear: 1, anger: 1,
            fightChance: 70, spellChance: 60
        },{
            id: 7, name: "Silver Pegasus",
            fear: 1, anger: 0,
            fightChance: 80, spellChance: 20
        },{
            id: 8, name: "Mirrorflight",
            fear: 1, anger: 2,
            fightChance: 90, spellChance: 90
        },{
            id: 9, name: "Rain Gem Horse",
            fear: 0, anger: 0,
            fightChance: 60, spellChance: 20
        },{
            id: 10, name: "Finch Griffin",
            fear: 0, anger: 0,
            fightChance: 20, spellChance: 5
        }
    ],
    
    actions: [
        {
            id: 1, name: "Throw Food",
            desc: "You throw a tasty little morsel. Most beasts like this, though already-terrified ones may be scared further.",
            type: "feed", target: "single",
            mpCost: 0
        },
        {
            id: 2, name: "Tempt With Food",
            desc: "You levitate a piece of food around, gently teasing the beast and holding its attention. If it dares to grab the food, it'll be much happier.",
            type: "feed", target: "single",
            mpCost: 0
        },
        {
            id: 3, name:...