trying to move diagrams before json

README.md

@@ -1,5 +1,5 @@
 # megagameML
 
-The name is misleading - it's not a markup language.
+Code project that procedurally generates design specifications for Megagames as a JavaScript Object/JSON, then renders that object into a (intentionally vague) design document.
 
-To run, download and open the "-grass" html.
+See the output at https://mdeselincourt.github.io/megagameML/

index.html

@@ -63,9 +63,10 @@ <h2>Generating...</h2>
 				<span class="byline">The Megagame</span> 
 			</div>
 			<span id="mainContent">
-				...
+				Generating...
 			</span>
 			<!--
+			Used before the JS could dynamically create canvases. Retained for debugging.
 			<div id="staticCanvasDiv">
 				<canvas id="staticCanvas" width="400" height="400"></canvas> 
 			</div>

megagame.js

@@ -214,6 +214,8 @@ const RESOURCE_FUNCTIONS = ["Scoring", "Investing", "Trading"];
 				$("#mainTitle h2").html(megagame.name);
 
 				drawCharts(megagame);
+
+				outputJSON(megagame);
 			}
 
 			////////////////////////////
@@ -652,8 +654,6 @@ const RESOURCE_FUNCTIONS = ["Scoring", "Investing", "Trading"];
 
 				description += describeEconomy(mg);
 
-				description += "<h2>MegagameML:</h2><p><pre>" + syntaxHighlight(mg) + "</pre></p>";
-
 				return description;
 
 			}
@@ -821,10 +821,22 @@ const RESOURCE_FUNCTIONS = ["Scoring", "Investing", "Trading"];
 					// end of this ideology space
 				} 
 				// All ideology spaces drawn				
-
-
 
 			} // end of drawCharts
+
+			// HTML-ify the JSON and display
+			function outputJSON(mg) {
+				var description = "<h2>MegagameML:</h2><p><pre>" + syntaxHighlight(mg) + "</pre></p>";
+
+				var newHeader = document.createElement('h2');
+				var newPara = document.createElement('p');
+				var newPre = document.createElement('pre');
+
+				newPre.innerHTML = syntaxHighlight(mg);
+
+				document.getElementById('mainContent').appendChild(newCanvas); // adds the canvas to #someBox
+
+			}
 
 				////////////////////
 				// UTILITY FUNCTIONS