feat: Implement recipe normalisation

Recipe string gets reduced to the smallest possible rectangle,
eliminating empty slots and repeated recipes in a lot of situations

1 files changed, 37 insertions, 28 deletions

diff --git a/index.html b/index.html
index cec7ce4..d61b524 100644
--- a/index.html
+++ b/index.html
@@ -112,6 +112,19 @@ table {
 }
 </style>
         <script>
+            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,plank,plank,;": "slab",
+                "plank,plank,;plank,plank,;": "crafting_table",
+            };
+        </script>
+        <script>
             const slots = document.getElementsByClassName('craftingSlot')
             var firstChange = ""
             function onSlotPress(e) {
@@ -168,30 +181,6 @@ table {
             }
             document.addEventListener('mousemove', selectedFollow)
 
-            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")
                 itemImg.classList.add("item")
@@ -207,17 +196,37 @@ table {
             }
 
             function getRecipe() {
+                var min_row = 3, max_row = 0, min_col = 3, max_col = 0
+                for (var row = 0; row < 3; ++row) {
+                    for (var col = 0; col < 3; ++col) {
+                        if (slots[row * 3 + col].src in itemMap) {
+                            if (row < min_row)
+                                min_row = row
+                            if (row > max_row)
+                                max_row = row
+                            if (col < min_col)
+                                min_col = col
+                            if (col > max_col)
+                                max_col = col
+                        }
+                    }
+                }
+
                 var result = ""
-                for (slot of slots) {
-                    if (slot.src in itemMap) {
-                        result += itemMap[slot.src]
+                for (var row = min_row; row <= max_row; ++row) {
+                    for (var col = min_col; col <= max_col; ++col) {
+                        if (slots[row * 3 + col].src in itemMap) {
+                            result += itemMap[slots[row * 3 + col].src]
+                        }
+                        result += ","
                     }
-                    result += ","
+                    result += ";"
                 }
                 return result
             }
             function onSlotSrcChanged() {
                 var recipe = getRecipe()
+                console.log(recipe)
                 if (recipe in recipesMap) {
                     craftingResult.src = itemMap[recipesMap[recipe]]
                 }