JSFiddle - React, Tailwind, and code Playground
by Gwyn Milcote
HTML
<select id='test-event-area'></select>
<button id='test-event-btn'>Go</button>
<p id='test-event-result'></p>
JavaScript
const areas = [
{
id: 1, name: "",
events: [
"",
"",
""
]
},{
id: 2, name: "",
events: [
"",
"",
""
]
},{
id: 3, name: "Desert Stable",
events: [
"[camel spits on someone]",
"[someone falls off a camel, ooh]",
"[you're a water dragon, your skin is cracking and dry, argh... this is the worst place]",
"[sweltering heat]",
"[you have a quick drink from a trough]",
"[you sit in the shade for a while]",
"[someone's keeping a unicorn here, poor thing doesn't seem to like the heat]",
"[a massive, stern-looking marlik griffin is guarding a barn entrance. you can peek through and see the stalls, but daren't try and go in!]",
"[group of plodding marlik griffins being ridden in arena. a couple have simple reins and cloths on their backs, but most riders are tackless]",
"[two marlik griffin cubs darting around]",
"[while wading through sand, you feel something hard. pulling it out, it's shiny gold! a fragment of thick Marlik armour!]",
"[you observe a marlik griffin being washed and polished. she seems very pleased]",
"[an albino marlik griffin, how cool. white fur and cream coloured armour]",
"[a random achae griffin has turned up and is now sat on a wall, staring around.]",
"[an unsupervised toddler is chasing an achae griffin, trying to climb on its back. the griffin is clearly annoyed, but polite enough not to retaliate.]",
"[some kids being led around on achae griffins. and another kid riding a big dog! you suppose they're pretty similar, really...]",
"[aww, a baby achae griffin playing with a baby marlik. one is twice the size of the other, but not hurting them.]",
"[you sneakily eat some hay hanging down from...