Roll for Drawing!

by seanofw

HTML

<h2>Roll for Drawing!</h2>

<div class='sentence'>

<p><span class='setting fillable omittable'>______</span>
<span class='time-period fillable omittable'>______</span>,
<span class='scene fillable'>______</span>
of a <span class='species fillable'>______</span> girl<span class='omittable'>,
focusing on her <a class='focus fillable'>______</a></span>.</p>

<p class='omittable'>She feels <a class='mood fillable'>______</a>.</p>

<p>She has <a class='hair-length fillable omittable'>______</a>
<a class='hair-type fillable omittable'>______</a>
hair<a class='hair-style fillable omittable'>______</a>.</p>

<p><span class='omittable'>She is <a class='other fillable'>______</a>.</span>  <span class='omittable'>She is wearing <a class='wearing fillable'>______</a></span>, <span class='omittable'>
and is <a class='holding fillable'>______</a></span>.</p>

<div class='omittable'>Her color is <a class='color fillable'>______</a>.</div>

</div>

<button class='roll'>
Roll!
</button>

CSS

p {
  color: #222; 
}
.fillable {
  border-bottom: 1px solid #CDE;
  color: #048;
}
.sentence {
  min-height: 16em;
}

JavaScript

const settings = ['in a forest', 'in a valley', 'on the plains', 'in the desert', 'in a tower', 'in a castle', 'in her bedroom', 'in her chamber', 'on a mountain', 'in a laboratory', 'in a cavern', 'in a grassy field', 'on a high plateau', 'on a boat', 'atop a tower', 'in a dungeon', 'in a park', 'on an island', 'in her yard', 'in a garden', 'in the jungle', 'in the hills'];
const timePeriods = [
	'in Ancient Greece', 'in Ancient Rome', 'in Ancient Egypt', 'in Australia', 'in Scotland', 'in Ireland',
  'on a parallel Earth', 'on Gaia', 'on Terra', 'in a steampunk world', 'in the future',
  'in 1700s America', 'at the turn of the 1900s', 'in Victorian times', 'in Native America', 'at the World\'s Fair', 'in the Renaissance', 'in the old west', 'in modern times',
	'in a medieval/magical world', 'in a medieval/magical world', 'in a medieval/magical world', 'in a medieval/magical world', 'in a medieval/magical world',
	'in a D&D setting', 'in a D&D setting', 'in a D&D setting', 'in a D&D setting', 'in a D&D setting'
];
const scenes = ['a pinup', 'a picture', 'a portrait', 'a drawing', 'a transformation picture', 'an action shot'];
const focus = ['whole body', 'hair', 'breasts', 'upper torso', 'lower body', 'hands', 'arms', 'butt', 'face', 'back', 'legs', 'tail', 'mood', 'movement', 'clothing', 'accessories', 'eyes', 'action', 'hips', 'blend between her halves', 'fusion between her halves', 'side'];
const moods = ['happy', 'sad', 'angry', 'excited', 'joyful', 'cheerful', 'jubilant', 'merry', 'giggly', 'seductive', 'sultry', 'suggestive', 'sexy', 'racy', 'romantic', 'mournful', 'melancholic', 'irritable', 'confused', 'surprised', 'pained', 'lonely', 'nervous', 'puzzled', 'violent', 'apathetic', 'moody', 'conflicted', 'affectionate', 'good', 'great', 'terrible', 'awful', 'cranky', 'miserable', 'grumpy', 'prissy', 'fussy', 'superior', 'inferior', 'crazy', 'wistful', 'crabby', 'sulky'];
const others = ['alone', 'alone', 'alone', 'by herself', 'by herself', 'by herself',...