videogamena ES6

Trying to upgrade the code to be nicer. http://jsben.ch/7sDHK

by MegaScience

HTML

<div id="siteName"><span class="small line1">The</span><br/>
<span class="line2">Video Game</span><br/>
<span class="blue"><span class="line3">Name</span><br/>
<span class="line4">Generator</span></span></div>
<div id="gameText">Loading...</div>
<button id="generateButton">Generate</button>
<label id="toggleWindow"><input id="toggleCheckbox" type="checkbox" checked="checked"/> Don't pick similar terms (e.g. Nighttime Night Nightmare)</label>

CSS

@import url(//fonts.googleapis.com/css?family=VT323);
body {
    background-color: black;
    color: white;
    text-align: center;
    font-family: "Tahoma", "Verdana", "Arial", sans-serif;
    font-size: 64px;
}
#siteName {
    font-family: 'VT323';
    text-transform: uppercase;
}
#siteName span.small {
    font-size: 32px;
}
#siteName span.blue {
    color: #069FFF;
}
#siteName span.line1 {
    line-height: 0px;
}
#siteName span.line2 {
    font-size: 58px;
}
#siteName span.line3 {
    font-size: 148px;
    line-height: 74px;
}
#siteName span.line4 {
    font-size: 64px;
}
#gameText {
    font-size: 64px;
    font-weight: 700;
    min-height: 160px;
}
#generateButton {
    background-color: #00A5FF;
    margin: 10px;
    border: none;
    font-family: 'VT323';
    font-size: 64px;
    text-transform: uppercase;
}
#generateButton:active {
    color: black;
    padding: 0 8px 0 8px;
}
#generateButton:not(.bDown):hover {
    color: white;
}
#toggleWindow {
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: 16px;
    background-color: black;
    border-radius: 0 10px 0 0;
    padding: 3px;
}

JavaScript

const generateStorage = {
	elem: {},
  titleHistory: [],
  init: function () {
  	this.elem.gameText = document.getElementById('gameText');
    this.elem.button = document.getElementById('generateButton');
    this.elem.toggleCheck = document.getElementById('toggleCheckbox');
    this.insertGame(true);
    this.elem.button.onmousedown = elem => elem.target.classList.add('bDown');
    this.elem.button.onmouseup = elem => elem.target.classList.remove('bDown');
    this.elem.button.onclick = this.insertGame.bind(this, false);
  },
  insertGame: function (init) {
  	let gameName;
  	if(init) gameName = 'Click below to generate a video game name';
    else {
    	gameName = this.generateGameName().join(' ');
      this.titleHistory.push(gameName);
    }
    this.elem.gameText.innerHTML = gameName;
	},
  generateGameName: function () {
    //var allowSimilarWords = false;
    const aSWords = this.elem.toggleCheck.checked;
    const fCall = word => !filterWords.includes(word);
    let fragments = ['', '', ''];
    let filterWords = [];
    for(const index of fragments.keys()) {
      //let adjustedList = filterWords.length ? $wordLists[index].filter(word => filterWords.some(fWord => word !== fWord)) : $wordLists[index];
      let adjustedList = filterWords.length ? $wordLists[index].filter(fCall) : $wordLists[index];
      let wordInfo = adjustedList[Math.floor(Math.random() * adjustedList.length)];
      fragments[index] = wordInfo.word;
      if(!aSWords && 'filters' in wordInfo) filterWords = filterWords.concat(wordInfo.filters, wordInfo.word);
      else filterWords = filterWords.concat(wordInfo.word);
    }
    return fragments;
  }
};

const $wordLists = [
  [{ word: "3D" },
	{ word: "8-Bit" },
	{ word: "A Boy and His" },
	{ word: "Action" },
	{ word: "Advanced", filters: ["Advance"] },
	{ word: "Adventures of the", filters: ["Adventure"] },
	{ word: "Aero" },
	{ word: "African", filters: ["in Africa"] },
	{ word: "Alcoholic" },
	{ word: "Alien" },
	{ word:...