From 89bffd0f62aaf2daa38f69ce2d83570b4d4540c8 Mon Sep 17 00:00:00 2001
From: Marty Sluijtman <marty.wanderer@disroot.org>
Date: Tue, 4 Jul 2023 22:27:06 +0200
Subject: [PATCH] Dynamic menu basis

---
 README.md       |  9 +++++++++
 brown-wall.html |  6 +-----
 main.js         | 29 +++++++++++++++++++++++++----
 menus.json      | 19 +++++++++++++++++++
 4 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 menus.json

diff --git a/README.md b/README.md
index e4228dd..e9baec0 100644
--- a/README.md
+++ b/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 
diff --git a/brown-wall.html b/brown-wall.html
index 10dcf22..77c352a 100644
--- a/brown-wall.html
+++ b/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">
-		<menu>
-			<h3>Genre</h3>
-			<select name="genre" id="genre">Genremenu</select>
-		</menu>
+	<div id="menu-container" class="menu-container">
 	</div>
 </body>
 <script src="main.js"></script>
diff --git a/main.js b/main.js
index a273ed9..f6a3f28 100644
--- a/main.js
+++ b/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');
-genres.forEach( genre => {
-    genreMenu.append(Object.assign( document.createElement("option"), { id:genre.toLowerCase(), innerHTML:genre }));
-});
+//const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ] }, { "name": "Genre", "items": [ "FFP", "Jiminy Cockthroat", "しひろ Cockthroat", "Spunk Gargle Weewee" ] } ];
+const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ] }, { "name": "Genre", "items": [ "FFP", "Action Adventrue", "Lobotomy aka Idlegame" ] } ];
+
+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}))
+    })
+})
\ No newline at end of file
diff --git a/menus.json b/menus.json
new file mode 100644
index 0000000..edc38e6
--- /dev/null
+++ b/menus.json
@@ -0,0 +1,19 @@
+[
+    {
+        "name": "Fruit",
+        "items": [
+            "Banana",
+            "Orange",
+            "Pineapple",
+            "Apple"
+        ]
+    },
+    {
+        "name": "Genre",
+        "items": [
+            "FFP",
+            "Action Adventrue",
+            "Lobotomy aka Idlegame"
+        ]
+    }
+]