Created functions to display Faction content (for a single faction) and added the corresponding html elements. Created framework for loading content for all pages (world, augmentations, etc.) in Engine.js

css/menupages.css

@@ -91,3 +91,14 @@
 }
 
 /* Factions */
+#faction-hack-button-div, #faction-hack-text-div {
+	display:inline-block;
+}
+
+#faction-fieldwork-button-div, #faction-fieldwork-text-div {
+	display:inline-block;
+}
+
+#faction-securitywork-button-div, #faction-securitywork-text-div {
+	display:inline-block;
+}

index.html

@@ -123,8 +123,12 @@
 	</div>
 
     <!-- World -->
+	<div id="world-container">
+	</div>
 	
 	<!-- Create a program(executable) -->
+	<div id="create-program-container">
+	</div>
 	
 	<!-- Factions -->
 	<div id="factions-container">
@@ -136,11 +140,29 @@
 	<div id="faction-container">
 		<h2 id="faction-name"></h2>
 		<p id="faction-info"></p>
-		<!-- TODO Buttons -->
+		
+		<div id="faction-hack-div">
+		<div id="faction-hack-button-div"><button id="faction-hack-button"> Hacking Contracts </button></div>
+		<div id="faction-hack-text-div"><p id="faction-hack-text"></p></div>
+		</div>
+		
+		<div id="faction-fieldwork-div">
+		<div id="faction-fieldwork-button-div"><button id="faction-fieldwork-button"> Field Work </button></div>
+		<div id="faction-fieldwork-text-div"><p id="faction-fieldwork-text"></p></div>
+		</div>
+		
+		<div id="faction-securitywork-div" visibility>
+		<div id="faction-securitywork-button-div"><button id="faction-securitywork-button"> Security Work </button></div>
+		<div id="faction-securitywork-text-div"><p id="faction-securitywork-text"></p></div>
+		</div>
 	</div>
 	
-	
 	<!-- Installed augmentations -->
+	<div id="augmentations-container">
+	</div>
 	
+	<!-- Tutorial content -->
+	<div id="tutorial-container">
+	</div>
   </body>
 </html>

src/Augmentations.js

@@ -68,7 +68,16 @@ initAugmentations = function() {
 	var GrapheneBoneLacings = new Augmentation("Graphene Bone Lacings");
 	AddToAugmentations(GrapheneBoneLacings);
 	
+	var BionicSpine = new Augmentation("Bionic Spine");
+	AddToAugmentations(BionicSpine);
+	
+	var GrapheneBionicSpine = new Augmentation("Graphene Bionic Spine");
+	AddToAugmentations(GrapheneBionicSpine);
+	
 	//Labor stat augmentations
+	var SpeechProcessor = new Augmentation("Speech Processor Implant");
+	AddToAugmentations(SpeechProcessor);
+	
 	var CASIE = new Augmentation("Computer Assisted Social Interaction Enhancement");
 	AddToAugmentations(CASIE);
 	
@@ -106,6 +115,9 @@ initAugmentations = function() {
 	var ENMDMA = new Augmentation("Embedded Netburner Module Direct Memory Access Upgrade");
 	AddToAugmentations(ENMDMA);
 	
+	var Neuralstimulator = new Augmentation("Neuralstimulator");
+	AddToAugmentations(Neuralstimulator);
+	
 	//Misc augmentations
 }
 
@@ -146,11 +158,20 @@ applyAugmentations = function(aug) {
 		case "Graphene Bone Lacings":
 			//Strength defense 15%
 			break;
+		case "Bionic Spine":
+			//Everything 3%?
+			break;
+		case "Graphene Bionic Spine":
+			//Everything 5%
+			break;
 			
 		//Labor stats augmentations
 		case "Computer Assisted Social Interaction Enhancement":
 			//Charisma 10%
 			break;
+		case "Speech Processor Implant":
+			//Charisma 5%
+			break;
 
 		//Hacking augmentations
 		case "Artificial Bio-neural Network Implant":
@@ -187,7 +208,9 @@ applyAugmentations = function(aug) {
 		case "Embedded Netburner Module Direct Memory Access Upgrade":
 			//Money hacked 20%
 			break;
-		
+		case "Neuralstimulator":
+			//Hacking speed, money gained, and exp gained 10%
+			break;
 		
 		default:
 			console.log("No such augmentation!");

src/Faction.js

@@ -107,8 +107,152 @@ initFactions = function() {
 
 //Displays the HTML content for this faction
 displayFactionContent = function(faction) {
-	if (faction.isMember) {
+	var hackDiv 			= document.getElementById("faction-hack-div");
+	var fieldWorkDiv 		= document.getElementById("faction-fieldwork-div");
+	var securityWorkDiv 	= document.getElementById("faction-securitywork-div");
 	
+	var hackButton 			= document.getElementById("faction-hack-button");
+	var fieldWorkButton 	= document.getElementById("faction-fieldwork-button");
+	var securityWorkButton 	= document.getElementById("faction-securitywork-button");
+	
+	//TODO Add event listeners for the buttons
+	
+	if (faction.isMember) {
+		switch(faction.name) {
+			case "Illuminati":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "hidden";
+				break;
+			case "Daedalus":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "hidden";
+				break;
+			case "The Covenant":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "hidden";
+				break;
+			case "ECorp":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "MegaCorp":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "Bachman & Associates":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "Blade Industries":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "NWO":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "Clarke Incorporated":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "OmniTek Incorporated":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "Four Sigma":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "KuaiGong International":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "BitRunners":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "hidden";
+				securityWorkDiv.style.visibility = "hidden";
+				break;
+			case "The Black Hand":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "hidden";
+				break;
+			case "NiteSec":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "hidden";
+				securityWorkDiv.style.visibility = "hidden";
+				break;
+			case "Chongqing":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "Sector-12":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "New Tokyo":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "Aevum":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "Ishima":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "Volhaven":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "Speakers for the Dead":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "The Dark Army":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "hidden";
+				break;
+			case "The Syndicate":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "visible";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "Tian Di Hui":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "hidden";
+				securityWorkDiv.style.visibility = "visible";
+				break;
+			case "CyberSec":
+				hackDiv.style.visibility = "visible";
+				fieldWorkDiv.style.visibility = "hidden";
+				securityWorkDiv.style.visibility = "hidden";
+				break;
+			default:
+				console.log("Faction does not exist");
+				break;
+		}
 	} else {
 		console.log("Not a member of this faction, cannot display faction information");
 	}

src/engine.js

@@ -2,13 +2,16 @@ var Engine = {
 	
     //Clickable objects
     Clickables: {        
-        hackButton:     null,
-        
         //Main menu buttons
         terminalMainMenuButton:     	null,
         characterMainMenuButton:    	null,
 		scriptEditorMainMenuButton: 	null,
 		activeScriptsMainMenuButton: 	null,
+		worldMainMenuButton: 			null,
+		createProgramMainMenuButton: 	null,
+		factionsMainMenuButton: 		null,
+		augmentationsMainMenuButton: 	null,
+		tutorialMainMenuButton: 		null,
         saveMainMenuButton:         	null,
         deleteMainMenuButton:       	null,
     },
@@ -28,6 +31,11 @@ var Engine = {
         characterContent:   	null,
 		scriptEditorContent: 	null,
 		activeScriptsContent: 	null,
+		worldContent: 			null,
+		createProgramContent: 	null,
+		factionsContent: 		null,
+		augmentationsContent: 	null,
+		tutorialContent: 		null,
         
         //Character info
         characterInfo:      	null,
@@ -42,6 +50,11 @@ var Engine = {
 		CharacterInfo: 		"CharacterInfo",
 		ScriptEditor: 		"ScriptEditor",
 		ActiveScripts: 		"ActiveScripts",
+		World: 				"World",
+		CreateProgram: 		"CreateProgram",
+		Factions: 			"Factions",
+		Augmentations: 		"Augmentations",
+		Tutorial: 			"Tutorial",
 	},
 	currentPage:	null,
 
@@ -158,6 +171,11 @@ var Engine = {
         Engine.Display.characterContent.style.visibility = "hidden";
 		Engine.Display.scriptEditorContent.style.visibility = "hidden";
 		Engine.Display.activeScriptsContent.style.visibility = "hidden";
+		Engine.Display.worldContent.style.visiblity = "hidden";
+		Engine.Display.createProgramContent.style.visibility = "hidden";
+		Engine.Display.factionsContent.style.visibility = "hidden";
+		Engine.Display.augmentationsContent.style.visibility = "hidden";
+		Engine.Display.tutorialContent.style.visibility = "hidden";
     },
     
     /* Display character info */
@@ -428,6 +446,37 @@ var Engine = {
 			Engine.loadActiveScriptsContent();
 			return false;
 		});
+		
+		Engine.Clickables.worldMainMenuButton = document.getElementById("world-menu-link");
+		Engine.Clickables.worldMainMenuButton.addEventListener("click", function() {
+			Engine.loadWorldContent();
+			return false;
+		});
+		
+		Engine.Clickables.createProgramMainMenuButton = document.getElementById("create-program-menu-link");
+		Engine.Clickables.createProgramMainMenuButton.addEventListener("click", function() {
+			Engine.loadCreateProgramContent();
+			return false;
+		});
+		
+		Engine.Clickables.factionsMainMenuButton = document.getElementById("factions-menu-link");
+		Engine.Clickables.factionsMainMenuButton.addEventListener("click", function() {
+			Engine.loadFactionContent();
+			return false;
+		});
+		
+		Engine.Clickables.augmentationsMainMenuButton = document.getElementById("augmentations-menu-link");
+		Engine.Clickables.augmentationsMainMenuButton.addEventListener("click", function() {
+			Engine.loadAugmentationsContent();
+			return false;
+		});
+		
+		Engine.Clickables.tutorialMainMenuButton = document.getElementById("tutorial-menu-link");
+		Engine.Clickables.tutorialMainMenuButton.addEventListener("click", function() {
+			Engine.loadTutorialContent();
+			return false;
+		}
+		
 		//Active scripts list
 		Engine.ActiveScriptsList = document.getElementById("active-scripts-list");
 		
@@ -445,13 +494,31 @@ var Engine = {
         
         Engine.Display.terminalContent = document.getElementById("terminal-container");
 		Engine.currentPage = Engine.Page.Terminal;
+		
         Engine.Display.characterContent = document.getElementById("character-container");
 		Engine.Display.characterContent.style.visibility = "hidden";
+		
 		Engine.Display.scriptEditorContent = document.getElementById("script-editor-container");
 		Engine.Display.scriptEditorContent.style.visibility = "hidden";
+		
 		Engine.Display.activeScriptsContent = document.getElementById("active-scripts-container");
 		Engine.Display.activeScriptsContent.style.visibility = "hidden";
 		
+		Engine.Display.worldContent = document.getElementById("world-container");
+		Engine.Display.worldContent.style.visibility = "hidden";
+		
+		Engine.Display.createProgramContent = document.getElementById("create-program-container");
+		Engine.Display.createProgramContent.style.visibility = "hidden";
+		
+		Engine.Display.factionsContent = document.getElementById("factions-container");
+		Engine.Display.factionsContent.style.visibility = "hidden";
+		
+		Engine.Display.augmentationsContent = document.getElementById("augmentations-container");
+		Engine.Display.augmentationsContent.style.visiblity = "hidden";
+		
+		Engine.Display.tutorialContent = document.getElementById("tutorial-container");
+		Engine.Display.tutorialContent.style.visiblity = "hidden";
+        
         //Character info
         Engine.Display.characterInfo = document.getElementById("character-info");