Convert crafting output lists to tables

html/crafting.js

@@ -233,7 +233,7 @@ function createManifest() {
         var result = "";
         var count = 0;
         for (var name in object.materials) {
-            result += "<li>" + object.materials[name] + " " + name + "</li>";
+            result += "<tr><td>" + object.materials[name] + "</td><td>" + name + "</td></tr>";
             count += 1
         }
 

html/css/main.css

@@ -1,8 +1,16 @@
 .disabled { color: gray; }
 .centered { text-align: center; }
+.crafting_output { margin-left: 10px; min-height: 400px; width: 920px; }
+.crafting_output th { background: #f8f8f8; border-left: 1px solid #bbb; font-weight: bold; padding: 10px; }
+.crafting_output td { background: #f8f8f8; border-left: 1px solid #bbb; padding: 10px; }
 .error { color: red; display: none; font-weight: bold; width: 100%; }
 .hidden { display: none; }
+.manifest { width: 100%; }
+.manifest td { border: 0; padding: 0; width: 75%; }
+.manifest td:first-child { width: 25%; }
 .padded { margin: 10px; }
+.ui-autocomplete { max-height: 400px; overflow-y: auto; overflow-x: hidden; }
+
 
 body { background: url("../images/ice.png"); margin-bottom: 100px; }
 h1 { font-family: 'Press Start 2P', cursive; font-size: 24px; margin-left: 10px; }
@@ -16,9 +24,6 @@ p { margin-left: 10px; margin-right: 10px; }
 #border_bedrock { background: url("../images/bedrock.png"); height: 32px; box-shadow: 2px 0px 4px #444; }
 #crafting { margin-bottom: 64px; }
 #crafting_error { margin-left: 10px; }
-#crafting_output { margin-left: 10px; min-height: 400px; width: 920px; }
-#crafting_output th { background: #f8f8f8; border-left: 1px solid #bbb; font-weight: bold; padding: 10px; }
-#crafting_output td { background: #f8f8f8; border-left: 1px solid #bbb; padding: 10px; }
 #crafting_selector { width: 400px; }
 #footer { background: #3E1D0A; color: white; padding-top: 10px; };
 #footer iframe { display: inline-block; }
@@ -31,5 +36,3 @@ p { margin-left: 10px; margin-right: 10px; }
 #recipebook_table td { background: #f8f8f8; border-left: 1px solid #bbb; padding: 10px; }
 #recipebook_url { width: 600px; }
 #recipebooks { margin-top: 32px; margin-bottom: 32px; }
-
-.ui-autocomplete { max-height: 400px; overflow-y: auto; overflow-x: hidden; }

html/data/industrial_craft.json

@@ -82,10 +82,6 @@
             "output": [[1, "String"]],
             "input": [[1, "Wool"]],
             "tools": ["Macerator"]
-        }, {
-            "output": [[1, "Flint"]],
-            "input": [[1, "Gravel"]],
-            "tools": ["Macerator"]
         }, {
             "output": [[1, "Induction Furnace"]],
             "input": [[7, "Copper Ingot"], [1, "Electric Furnace"], [1, "Advanced Machine Block"]],

html/index.html

@@ -47,7 +47,7 @@
           <input id="tools_included" name="tools_included" type="checkbox"></input>
           <label for="tools_included">include tools</label>
         </p>
-        <table id="crafting_output" class="hidden" cellpadding="0" cellspacing="0">
+        <table id="crafting_output" class="crafting_output hidden" cellpadding="0" cellspacing="0">
           <tr>
             <th width="25%">I already have:</th>
             <th width="25%">You'll need to find:</th>
@@ -55,9 +55,9 @@
             <th width="25%">You'll end up with:</th></tr>
           <tr>
             <td><textarea id="inventory" style="height: 100%; width: 100%" placeholder="2 Oak Log"></textarea></td>
-            <td id="missing_materials">&nbsp;</td>
+            <td><table id="missing_materials" cellpadding="0" cellspacing="0" class="manifest"></table></td>
-            <td id="crafted_items">&nbsp;</td>
+            <td><table id="crafted_items" cellpadding="0" cellspacing="0" class="manifest"></table></td>
-            <td id="leftover_materials">&nbsp;</td>
+            <td><table id="leftover_materials" cellpadding="0" cellspacing="0" class="manifest"></table></td>
           </tr>
         </table>
         <div id="crafting_error" class="error"></div>