convert ency ToC to JS

src/gui/Encyclopedia/encyclopedia.tw

@@ -16,41 +16,6 @@ $encyclopedia
 <<else>>
 <<switch $encyclopedia>>
 
-<<case "Table of Contents">>
-	<div class="center">
-	<h3>Introduction</h3>
-		<<= App.Encyclopedia.Dialog.linkSC("Playing Free Cities", "Playing Free Cities")>>
-	<br><br>
-	<h3>The Player Character</h3>
-		<<= App.Encyclopedia.Dialog.linkSC("Design your master", "Design Your Master")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Being in Charge", "Being in Charge")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("PC Skills", "PC Skills")>>
-	<br><br>
-	<h3>Your Slaves</h3>
-		<<= App.Encyclopedia.Dialog.linkSC("Slaves", "Slaves")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Obtaining Slaves", "Obtaining Slaves")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Slave Leaders", "Leadership Positions")>> / <<= App.Encyclopedia.Dialog.linkSC("Assignments", "Slave Assignments")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Slave Body", "Body")>> / <<= App.Encyclopedia.Dialog.linkSC("Skills", "Skills")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Slave Fetishes", "Fetishes")>> / <<= App.Encyclopedia.Dialog.linkSC("Paraphilias", "Paraphilias")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Quirks", "Quirks")>> / <<= App.Encyclopedia.Dialog.linkSC("Flaws", "Flaws")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Slave Relationships", "Relationships")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Slave Health", "Health")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Slave Pregnancy", "Pregnancy")>> / <<= App.Encyclopedia.Dialog.linkSC("Inflation", "Inflation")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Slave Modification", "Slave Modification")>>
-	<br><br>
-	<h3>Your Arcology</h3>
-		<<= App.Encyclopedia.Dialog.linkSC("The X-Series Arcology", "The X-Series Arcology")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Arcology Facilities", "Facilities")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Terrain Types", "Terrain Types")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Future Societies", "Future Societies")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("The Black Market", "The Black Market")>>
-	<br><br>
-	<h3>Extras</h3>
-		<<= App.Encyclopedia.Dialog.linkSC("Mods/Pregmod", "Mods/Pregmod")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Lore", "Lore")>>
-		<br><<= App.Encyclopedia.Dialog.linkSC("Credits", "Credits")>>
-	</div>
-
 /**********
 SLAVE SKILLS
 **********/

src/gui/Encyclopedia/encyclopediaToC.js

+App.Encyclopedia.addArticle("Table of Contents", function() {
+	const outerDiv = document.createElement("div");
+	outerDiv.classList.add("center");
+	App.UI.DOM.appendNewElement("h3", outerDiv, "Introduction");
+	lineLink(outerDiv, "Playing Free Cities", "Playing Free Cities");
+
+	App.UI.DOM.appendNewElement("h3", outerDiv, "The Player Character");
+	lineLink(outerDiv, "Design your master", "Design Your Master");
+	lineLink(outerDiv, "Being in Charge", "Being in Charge");
+	lineLink(outerDiv, "PC Skills", "PC Skills");
+
+	App.UI.DOM.appendNewElement("h3", outerDiv, "Your Slaves");
+	lineLink(outerDiv, "Slaves", "Slaves");
+	lineLink(outerDiv, "Obtaining Slaves", "Obtaining Slaves");
+	let div = document.createElement("div");
+	div.append(App.Encyclopedia.Dialog.linkDOM("Slave Leaders", "Leadership Positions"), " / ",
+		App.Encyclopedia.Dialog.linkDOM("Assignments", "Slave Assignments"));
+	outerDiv.append(div);
+	div = document.createElement("div");
+	div.append(App.Encyclopedia.Dialog.linkDOM("Slave Body", "Body"), " / ",
+		App.Encyclopedia.Dialog.linkDOM("Skills", "Skills"));
+	outerDiv.append("div");
+	div = document.createElement("div");
+	div.append(App.Encyclopedia.Dialog.linkDOM("Slave Fetishes", "Fetishes"), " / ",
+		App.Encyclopedia.Dialog.linkDOM("Paraphilias", "Paraphilias"));
+	outerDiv.append(div);
+	div = document.createElement("div");
+	div.append(App.Encyclopedia.Dialog.linkDOM("Quirks", "Quirks"), " / ",
+		App.Encyclopedia.Dialog.linkDOM("Flaws", "Flaws"));
+	outerDiv.append(div);
+	lineLink(outerDiv, "Slave Relationships", "Relationships");
+	lineLink(outerDiv, "Slave Health", "Health");
+	div = document.createElement("div");
+	div.append(App.Encyclopedia.Dialog.linkDOM("Slave Pregnancy", "Pregnancy"), " / ",
+		App.Encyclopedia.Dialog.linkDOM("Inflation", "Inflation"));
+	outerDiv.append(div);
+	lineLink(outerDiv, "Slave Modification", "Slave Modification");
+
+	App.UI.DOM.appendNewElement("h3", outerDiv, "Your Arcology");
+	lineLink(outerDiv, "The X-Series Arcology", "The X-Series Arcology");
+	lineLink(outerDiv, "Arcology Facilities", "Facilities");
+	lineLink(outerDiv, "Terrain Types", "Terrain Types");
+	lineLink(outerDiv, "Future Societies", "Future Societies");
+	lineLink(outerDiv, "The Black Market", "The Black Market");
+
+	App.UI.DOM.appendNewElement("h3", outerDiv, "Extras");
+	lineLink(outerDiv, "Mods/Pregmod", "Mods/Pregmod");
+	lineLink(outerDiv, "Lore", "Lore");
+	lineLink(outerDiv, "Credits", "Credits");
+
+	return outerDiv;
+
+	function lineLink(container, text, article) {
+		App.UI.DOM.appendNewElement("div", container, App.Encyclopedia.Dialog.linkDOM(text, article));
+	}
+}, "toc");