Dynamic menu basis

README.md

@@ -4,3 +4,12 @@
 
 Brown wall is an application with the goal of making the process of writing game
 design document more expedient.
+
+## Goal
+
+The end goal is the create an interface that can both eat and spew out JSON
+files representing a selection made from base variables contained within the
+initial JSON file.
+
+As it stands, there is a hard coded "genres" menu with a hardcoded set of
+"genres". The goal here is to generate an arbitrary set of 

brown-wall.html

@@ -10,11 +10,7 @@
 	<h1>Brown Wall</h1>
 	<h3>A wall which has been hit with a considerable amount of faeces.</h3>
 	<noscript>Enable JS to use this application.</noscript>
-	<div class="menu-container">
+	<div id="menu-container" class="menu-container">
-		<menu>
-			<h3>Genre</h3>
-			<select name="genre" id="genre">Genremenu</select>
-		</menu>
 	</div>
 </body>
 <script src="main.js"></script>

main.js

@@ -1,12 +1,33 @@
 "using strict";
 
+const fruits = [ "Apple"
+               , "Banana"
+               , "Grapefruit"
+               , "Orange"
+               ]
+
 const genres = [ "FPP"
                , "Action Adventure"
                , "Lobotomy aka Idlegame"
                , "Specticle Fighter"
                ]
 
-const genreMenu = document.getElementById('genre');
+//const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ] }, { "name": "Genre", "items": [ "FFP", "Jiminy Cockthroat", "しひろ Cockthroat", "Spunk Gargle Weewee" ] } ];
-genres.forEach( genre => {
+const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ] }, { "name": "Genre", "items": [ "FFP", "Action Adventrue", "Lobotomy aka Idlegame" ] } ];
-    genreMenu.append(Object.assign( document.createElement("option"), { id:genre.toLowerCase(), innerHTML:genre }));
+
-});
+const menuContainer = document.getElementById('menu-container');
+
+menus.forEach( menu =>{
+    const dropdownMenu = document.createElement('menu');
+    const menuTitle = Object.assign(document.createElement('h2'), {innerHTML:menu.name});
+    const dropdownSelect = document.createElement('select');
+
+    dropdownMenu.id = menu.name.toLowerCase();
+    menuContainer.append(menuTitle)
+    menuContainer.appendChild(dropdownMenu)
+    dropdownMenu.appendChild(dropdownSelect)
+
+    menu.items.forEach(item =>{
+        dropdownSelect.append(Object.assign(document.createElement('option'), {id:item.toLowerCase(), innerHTML:item}))
+    })
+})

menus.json

@@ -0,0 +1,19 @@
+[
+    {
+        "name": "Fruit",
+        "items": [
+            "Banana",
+            "Orange",
+            "Pineapple",
+            "Apple"
+        ]
+    },
+    {
+        "name": "Genre",
+        "items": [
+            "FFP",
+            "Action Adventrue",
+            "Lobotomy aka Idlegame"
+        ]
+    }
+]