feat: Create result slot and check items against known recipes

1 files changed, 65 insertions, 24 deletions

diff --git a/index.html b/index.html
index 2d43ea5..5343c47 100644
--- a/index.html
+++ b/index.html
@@ -5,23 +5,26 @@
     </head>
     <body>
         <article>
-            <table id="crafting-bench">
-                <tr>
-                    <td><img id="1" class="slot" src="/" draggable="false"></td>
-                    <td><img id="2" class="slot" src="/" draggable="false"></td>
-                    <td><img id="3" class="slot" src="/" draggable="false"></td>
-                </tr>
-                <tr>
-                    <td><img id="4" class="slot" src="/" draggable="false"></td>
-                    <td><img id="5" class="slot" src="/" draggable="false"></td>
-                    <td><img id="6" class="slot" src="/" draggable="false"></td>
-                </tr>
-                <tr>
-                    <td><img id="7" class="slot" src="/" draggable="false"></td>
-                    <td><img id="8" class="slot" src="/" draggable="false"></td>
-                    <td><img id="9" class="slot" src="/" draggable="false"></td>
-                </tr>
-            </table>
+            <section id="crafting-table">
+                <table id="crafting-grid">
+                    <tr>
+                        <td><img id="1" class="slot" src="/" draggable="false"></td>
+                        <td><img id="2" class="slot" src="/" draggable="false"></td>
+                        <td><img id="3" class="slot" src="/" draggable="false"></td>
+                    </tr>
+                    <tr>
+                        <td><img id="4" class="slot" src="/" draggable="false"></td>
+                        <td><img id="5" class="slot" src="/" draggable="false"></td>
+                        <td><img id="6" class="slot" src="/" draggable="false"></td>
+                    </tr>
+                    <tr>
+                        <td><img id="7" class="slot" src="/" draggable="false"></td>
+                        <td><img id="8" class="slot" src="/" draggable="false"></td>
+                        <td><img id="9" class="slot" src="/" draggable="false"></td>
+                    </tr>
+                </table>
+                <div class="result"><img id="craftingResult" src="/" draggable="false"></div>
+            </section>
             <table>
                 <tr id="inventory">
                 </tr>
@@ -44,7 +47,11 @@ article {
   border-radius: 3px;
 }
 
-img, #crafting-bench td {
+#crafting-table {
+  width: 20em;
+  margin: 0 auto;
+}
+img, #crafting-grid td {
   width: 3em;
   height: 3em;
   border: none;
@@ -53,11 +60,11 @@ img, #crafting-bench td {
 img[src$="/"] {
   opacity: 0;
 }
-#crafting-bench {
+#crafting-grid {
   background-color: #c6c6c6;
   border-spacing: 1px;
 }
-#crafting-bench td {
+#crafting-grid td, .result {
   border-left: 2px solid #373737;
   border-top: 2px solid #373737;
   border-right: 2px solid white;
@@ -65,13 +72,20 @@ img[src$="/"] {
   background-color: #8b8b8b;
   padding: 0.15em;
 }
-#crafting-bench td:hover {
+#crafting-grid td:hover {
   background-color: #c6c6c6;
 }
-#crafting-bench, #crafting-bench tr, #crafting-bench td {
+#crafting-grid, #crafting-grid tr, #crafting-grid td {
   user-select: none;
 }
 
+.result {
+  width: fit-content;
+  height: fit-content;
+  float: right;
+  margin-top: -7.2em;
+}
+
 #inventory .item {
   cursor: pointer;
 }
@@ -119,7 +133,7 @@ img[src$="/"] {
 
             const items = document.getElementsByClassName('item')
             function onItemPress(e) {
-                if (e.target.id !== "")
+                if (e.target.id !== "" && e.target.id !== "crafting-table")
                     return;
                 console.log(e.target.src)
                 if (e.target.src === undefined || e.target.src === "/" || e.target.src.endsWith("html")) {
@@ -140,6 +154,27 @@ img[src$="/"] {
 
             var itemMap = {
                 "plank": "https://minecraft.wiki/images/Oak_Planks.png",
+                "button": "https://minecraft.wiki/images/archive/20260728031107!Oak_Button_JE5.png",
+                "slab": "https://minecraft.wiki/images/Oak_Slab_JE3_BE2.png",
+                "crafting_table": "https://minecraft.wiki/images/Crafting_Table_JE4_BE3.png",
+            };
+            var recipesMap = {
+                "plank,,,,,,,,,": "button",
+                ",plank,,,,,,,,": "button",
+                ",,plank,,,,,,,": "button",
+                ",,,plank,,,,,,": "button",
+                ",,,,plank,,,,,": "button",
+                ",,,,,plank,,,,": "button",
+                ",,,,,,plank,,,": "button",
+                ",,,,,,,plank,,": "button",
+                ",,,,,,,,plank,": "button",
+                "plank,plank,plank,,,,,,,": "slab",
+                ",,,plank,plank,plank,,,,": "slab",
+                ",,,,,,plank,plank,plank,": "slab",
+                "plank,plank,,plank,plank,,,,,": "crafting_table",
+                ",plank,plank,,plank,plank,,,,": "crafting_table",
+                ",,,plank,plank,,plank,plank,,": "crafting_table",
+                ",,,,plank,plank,,plank,plank,": "crafting_table",
             };
             for (item in itemMap) {
                 var itemImg = document.createElement("img")
@@ -165,7 +200,13 @@ img[src$="/"] {
                 return result
             }
             function onSlotSrcChanged() {
-                console.log(getCraft())
+                var craft = getCraft()
+                if (craft in recipesMap) {
+                    craftingResult.src = itemMap[recipesMap[craft]]
+                }
+                else {
+                    craftingResult.src = "/"
+                }
             }
         </script>
     </body>