JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Enter (or randomly generate) a complete dragon genotype, and see how it'll look on any breed, sex and stage.
<p>Mostly for admin/tester use, but ordinary players can have fun too, if they manage to get their hands on genotypes, or figure out how to edit the default example ;)</p>
Genotype: <input type='text' id='tool_genotype' minlength='50' maxlength='50' value=""> 
<button id='tool_randomise'>Randomise!</button>
<br>
Breed: <select id='tool_breed'>
    <option value='1'>Basic</option>
</select> 
Sex: <select id='tool_sex'>
    <option value='1'>Male</option>
    <option value='2'>Female</option>
</select>
Stage: <select id='tool_stage'>
    <option value='1'>Egg</option>
    <option value='2'>Hatchling</option>
    <option value='3'>Juvenile</option>
    <option value='4'>Adolescent</option>
    <option value='5'>Adult</option>
</select>
<button id='tool_generate'>View!</button> 
<p>
<div id='tool_dragon_coat'>Coat will appear here...</div>
</p>
<span id='tool_genome'>Genome will be written here...</span>
<p>
<span id='tool_description'>Dragon will be described here...</span></p>

CSS

#tool_genotype {
    width: 70%;
}