From 030283f602221619fe169d86c1881893d9ed0177 Mon Sep 17 00:00:00 2001
From: mdeselincourt <m.de.selincourt@googlemail.com>
Date: Sat, 20 Oct 2018 17:18:16 +0100
Subject: [PATCH] trying to move diagrams before json

---
 README.md   |  4 ++--
 index.html  |  3 ++-
 megagame.js | 20 ++++++++++++++++----
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index b0bc0f1..79d44ef 100644
--- a/README.md
+++ b/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/
diff --git a/index.html b/index.html
index b07a7b1..9296db6 100644
--- a/index.html
+++ b/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>
diff --git a/megagame.js b/megagame.js
index 89e63bd..fdc7edd 100644
--- a/megagame.js
+++ b/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