10-02-2017, contact: markus.vaananen+d3random (at) gmail.com
http://chazu.arkku.net/misc/diablo/d3_random/d3_random.html

This is how my d3_random.html works. It is continuation to my earlier test project, d3_flavor.html (http://chazu.arkku.net/misc/diablo/d3_flavor/d3_flavor.html).
d3_random.html "generates" new flavor texts based on flavor texts ripped from Diablo 3. The "base texts" are Diablo 3 flavor texts with some words omitted from them. In place of the omitted words I have put elements which are filled with randomly selected new words with Javascript. The new words are in arrays inside the Javascript file. The titles of the texts are also generated.
Here I'll go into detail on the functionality of the page.


______________
Selecting which "base text" to show (updated 16-02-2017):

All my "base texts" are in an array inside the js file:

	var baseTexts = [
	'To be one with the <span class="noun"></span> is to take what you need and <span class="verb"></span> what you must.',
	
	'We are all connected in <span class="nounAbstract"></span> and in the <span class="noun"></span>. Partake of the spirits of the dead and flourish like the jungle that <span class="verb"></span> wild after the <span class="nounAbstract"></span>.',
	
	'<span class="verb capital"></span> in the fire of <span class="nounAbstract"></span>, <span class="adjective"></span> warrior.',
	
	...
	
	]


Then this code randomly selects one of the texts:

	function newBaseText() {
	var randomNumero = Math.floor(Math.random() * (baseTexts.length));
	return baseTexts[randomNumero];
	}

	$(function() {
		var elementit = $("div.flavor");
		elementit.each(function(id, object) {
			$(this).html(newBaseText());
			$(".capital").css("text-transform", "capitalize");
		})
	});	
	
In the first function, named newBaseText, we generate a random number based on the length of the baseTexts array. The second function is set to run the newBaseText script for the div with class "flavor". The function inserts the selected texts into the element and it is displayed on the page. The "capitalize" part is set to capitalize the first letter of elements with the class "capital". One of the texts above contains a randomised words as it's first letter in the sentence. I have put the class "capital" on it. This is because the words are all lower case in the arrays. If I didn't include this, some sentences would start with a lower case letter, and this is unacceptable. 
In my html I have only this:

	<div class="item">
		<div class="title">
			<span class="title1"></span> <span class="title2"></span>
		</div>
		<div class="flavor"></div>
	</div>	
	
The random texts are inserted in the "flavor" class element.
Note: My older solution to selecting the texts was having them all in the html, hiding them with css and selecting and viewing one by changing it's css with javascript. This was a bit barbaric approach, but it did work aswell.



______________
Selecting random new words to place in the texts (updated 16-02-2017):

As you can see above, the texts have <span> elements in them. These are the places we'll be selecting new words. 
First, I have word lists in my javascript file. They look like this, I shortened these examples here:

	var adjective = [
		'mighty',
		'legendary',
		'strong',
	]
	
	var noun = [
		'gladiator',
		'jungle',
		'mountain',
	]
		
	var verb = [
		'destroy',
		'conquer',
		'vanquish',
	]
		
Each word category has it's own script to pick a random word. I have a few categories for different kinds of words: adjectives, verbs, nouns, abstract nouns, titles, etc.
The code is exactly the same for every category, this is what the code for nouns look like:

	function newNoun() {
	var randomNumero = Math.floor(Math.random() * (noun.length));
	return noun[randomNumero];
	}

	$(function() {
		var elementit = $("span.noun");
		elementit.each(function(id, object) {
			$(this).text(newNoun());
		})
	});
	
We pick a random word from the array named "noun" in the exact same way as we pick which base text to show. The second function is set to select all <span> elements with the class "noun" and then run the upper function to randomise a new word for each <span> element. The word is placed in the html.

______________
Using same words in a sentence:

My first attempt to randomise words was to pick a random word and place them in the the <span> elements. The difference was that I didn't run the function for *each* <span> element. This resulted in the same word being used on every element with the same class. For example, if the base text had two "noun" classes, they both would be the same. Usually this doesn't result in good sentences.
On some cases this is feasible however, for example here:

	A *NOUN* out of place is no *NOUN* at all.

If the *NOUN* words are different words the sentence doesn't make much sense; they need to be the same.
My initial code came in handy here. I created class "nounSame" and put it in the above sentence:

	A <span class="nounSame"></span> out of place is no <span class="nounSame"></span> at all.
	
Then I used my old code:

	$(function() { /* this is for nounSame class */
		var randomNumber = Math.floor(Math.random() * (noun.length));	
		$('.nounSame').append($("<p>" + noun[randomNumber] + "</p>").html());
	});
	
With the above code we get sentences which make sense (well, at least a bit more sense):

	A warrior out of place is no warrior at all.
	
	
______________
Generating titles:

The titles consist of two parts:

	<span class="title1"></span> <span class="title2"></span>
	
Both title classes have their own code to pick words. The title arrays look like this, I shortened these here:

	var title1 = [
		'Astral',
		'Elemental',
		'Red',	
		'',
		'The',
		"Marauder's",
		'Dawn of',
		'Lord of the',
	]
	
	
	var title2 = [
		'Wisdom',
		'Hearts',
		'Tale',
		'Conquest',
		'Dominion',
		'Vengeance',
	]
	
With the title1 array containing more than just simple words we can get a variety of combinations, such as:
	Astral Hearts
	The Conquest
	Red Conquest
	Marauder's Tale
	Elemental Tale
	Lord of the Wisdom
	Dominion
	Dawn of Vengeance
	
The generated titles don't have anything to do with the actual texts which are displayed, but that's not a problem as I think it makes the whole thing a bit more "cryptic".
	

	
______________
A button to show new content (updated 16-02-2017):

Next, I wanted a button to create and show a new text. A page load generates a new text, but a button is nice to have, and I think it's a bit faster than refreshing.
I put a button in the html:
	<button class="reload-button">generate new</button>
		
I put the word list arrays and the other scripts inside a function:
	function showContent() {
	}
	
Then I put this code just outside the showContent function at the end of the js file:

	$(function() {
	$(document).ready(showContent);
	$('.reload-button').on("click", function() {
		$('.adjectiveSame, .nounSame').empty();
		showContent();
		});
	});

So, on page load the above function executes all the scripts and shows the content. 
We empty the adjectiveSame and nounSame elements. If I didn't inlcude this, those elements would show multiple randomised words, with one new for every button click. We don't want this so we empty the elements. Then we run the "showContent" function which generates and shows the new content, just as if this was a new page load.


______________
So this is all the functionality there is to this page. 
You can check out the word lists, texts list and the code from the javascript file: http://chazu.arkku.net/misc/diablo/d3_random/wordlist.js
For the gradient background I used this online gradient tool, it's very neat: http://www.colorzilla.com/gradient-editor/

Credits:
https://medium.freecodecamp.com/creating-a-bare-bones-quote-generator-with-javascript-and-html-for-absolute-beginners-5264e1725f08#.rplx824je
	
	
	
______________
UPDATES:
	
16-02-2017
Completely updated the "base text" selection system, the <li> system is gone and the html is now simple and clean. Base texts are now selected from javascript arrays the same way the new words are.
I updated this text file accordingly and removed parts talking about the old system.