JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<b>Stats</b>
<p>These numbers are used in battle, and often when doing other tasks like hauling goods, carrying out errands or building things. Each breed of Mythic begins with a set of <b>base stats</b>. More points can be gained by levelling up, attending training sessions and wearing stat-boosting equipment.</p>
<b>Primary stats - these are increased when gaining levels:</b>
<ul id='list-stats'></ul>
<b>Other stats:</b>
<ul>
    <li><b>Evasion (AVO) and accuracy (ACC)</b><br>These two numbers are calculated each turn of battle, and determine whether attacks hit or miss. If the attacker's ACC is higher than the target's AVO, it's probably a hit.<br>AVO is equally based on Agility and Perception, while ACC is mostly based on Perception. Some pieces of equipment give AVO bonuses only against physical or magic attacks; these are noted as P-AVO or M-AVO bonuses. Be aware that some weapons/spells/moves have their own ACC bonuses (naturally easy to connect) or drawbacks (naturally trickier to use). You'll want a Mythic with very good ACC to try using the latter ones.</li>
    <li><b>Anger Points (AP)</b><br>This is a meter that builds up in battle, from 0 to 100 points. Every time a Mythic is hit by an enemy attack, they'll gain some AP, which can be spent on special moves. The most expensive (and extremely powerful) moves can cost 100 AP, emptying the whole meter.</li>
</ul>

<b>Classes</b>
<p>A class is a role that brings certain benefits. A Mythic can belong to one class at a time. When levelling up, they'll gain points in certain stats and also learn unique Abilities that are linked to that class.</p>
<ul id='list-classes'></ul>

<b>Abilities</b>
<p>There are hundreds of specific techniques and enhancements for your Mythics to learn (or be born with, depending on their breed). Many can be used in battle, like spells and physical moves, or providing stat boosts. Others will come in useful when your Mythic is doing certain tasks, like crafting or mining, or running...

JavaScript

const db = {

    stats: [
        {
            id: 1, name: "Strength", shortName: "STR",
            desc: "what big muscles you have! they let you deal more damage when attacking enemies",
        },{
            id: 2, name: "Defence", shortName: "DEF",
            desc: "taking less damage from enemy attacks",
        },{
            id: 3, name: "Magic Power", shortName: "MAG",
            desc: "this makes spells stronger, dealing (or healing) more damage, and making certain effects last for more turns.",
        },{
            id: 4, name: "Magic Resistance", shortName: "RES",
            desc: "reducing the damage taken from enemy spells",
        },{        
            id: 5, name: "Agility", shortName: "AGI",
            desc: "speed is crucial, not just for winning races but also for outspeeding enemies. this stat lets you get more turns in battle, move further on the Battlefield, and improves your chances of dodging attacks. be aware that Agility is reduced if you're wearing heavy armour.",
        },{
            id: 6, name: "Perception", shortName: "PER",
            desc: "all your senses are keenly focused - you're quick-thinking, ready to react, and not missing a thing. this stat helps you to hit enemies more accurately, and get more Critical Hits. it helps with evasion too.",
        },{
            id: 7, name: "Hit Points", shortName: "HP",
            desc: "Think of this stat as a mixture of energy, health and motivation. It starts at the Mythic's maximum amount, and points are lost whenever damage is taken. If a Mythic falls to 0 HP, they can no longer fight, and they'll lose some actual Health after the battle is over. If the whole party are defeated, the battle is lost.",
        },{
            id: 8, name: "Mana Points", shortName: "MP",
            desc: "MP is the fuel for any kind of magical shenanigans. Each spell costs a certain amount of MP, and if a Mythic runs out of points, they simply can't cast any more. Similar to HP,...