feat: Implement clicking on result, mobile device support, better item removing logic, reorganise HEAD main

1 files changed, 90 insertions, 38 deletions

diff --git a/index.html b/index.html
index d61b524..61622a0 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Minecraft Crafting</title>
         <style>
 @font-face {
@@ -22,26 +23,30 @@ h2 {
     <body>
         <article>
             <h2>Crafting</h2>
-            <section id="crafting-table">
-                <table id="crafting-grid">
-                    <tr>
-                        <td class="slot"><img id="1" class="craftingSlot" src="/" draggable="false"></td>
-                        <td class="slot"><img id="2" class="craftingSlot" src="/" draggable="false"></td>
-                        <td class="slot"><img id="3" class="craftingSlot" src="/" draggable="false"></td>
-                    </tr>
-                    <tr>
-                        <td class="slot"><img id="4" class="craftingSlot" src="/" draggable="false"></td>
-                        <td class="slot"><img id="5" class="craftingSlot" src="/" draggable="false"></td>
-                        <td class="slot"><img id="6" class="craftingSlot" src="/" draggable="false"></td>
-                    </tr>
-                    <tr>
-                        <td class="slot"><img id="7" class="craftingSlot" src="/" draggable="false"></td>
-                        <td class="slot"><img id="8" class="craftingSlot" src="/" draggable="false"></td>
-                        <td class="slot"><img id="9" class="craftingSlot" src="/" draggable="false"></td>
-                    </tr>
-                </table>
-                <div class="result slot"><img id="craftingResult" src="/" draggable="false"></div>
-            </section>
+            <table id="crafting-table">
+                <tr>
+                    <td><table id="crafting-grid">
+                        <tr>
+                            <td id="slot1" class="slot"><img id="craftingSlot1" class="craftingSlot" src="/" draggable="false"></td>
+                            <td id="slot2" class="slot"><img id="craftingSlot2" class="craftingSlot" src="/" draggable="false"></td>
+                            <td id="slot3" class="slot"><img id="craftingSlot3" class="craftingSlot" src="/" draggable="false"></td>
+                        </tr>
+                        <tr>
+                            <td id="slot4" class="slot"><img id="craftingSlot4" class="craftingSlot" src="/" draggable="false"></td>
+                            <td id="slot5" class="slot"><img id="craftingSlot5" class="craftingSlot" src="/" draggable="false"></td>
+                            <td id="slot6" class="slot"><img id="craftingSlot6" class="craftingSlot" src="/" draggable="false"></td>
+                        </tr>
+                        <tr>
+                            <td id="slot7" class="slot"><img id="craftingSlot7" class="craftingSlot" src="/" draggable="false"></td>
+                            <td id="slot8" class="slot"><img id="craftingSlot8" class="craftingSlot" src="/" draggable="false"></td>
+                            <td id="slot9" class="slot"><img id="craftingSlot9" class="craftingSlot" src="/" draggable="false"></td>
+                        </tr>
+                    </table></td>
+                    <td>
+                        <div id="result"><div class="slot"><img id="craftingResult" src="/" draggable="false"></div></div>
+                    </td>
+                </tr>
+            </table>
             <h2>Inventory</h2>
             <table>
                 <tr id="inventory">
@@ -61,6 +66,13 @@ article {
   border-bottom: 0.3em solid #555;
   border-radius: 3px;
 }
+img {
+  object-fit: contain;
+  user-select: none;
+}
+img[src$="/"] {
+  opacity: 0;
+}
 
 #crafting-table {
   width: 20em;
@@ -71,14 +83,12 @@ img, #crafting-grid td {
   height: 3em;
   vertical-align: center;
 }
-img[src$="/"] {
-  opacity: 0;
-}
 table {
   border-spacing: 1px;
 }
 #crafting-grid {
   background-color: #c6c6c6;
+  padding: 1em;
 }
 .slot {
   border-left: 2px solid #373737;
@@ -88,18 +98,16 @@ table {
   background-color: #8b8b8b;
   padding: 0.15em;
 }
-#crafting-grid td:hover {
+.slot:hover {
   background-color: #c6c6c6;
 }
 #crafting-grid, #crafting-grid tr, #crafting-grid td {
   user-select: none;
 }
 
-.result {
-  width: fit-content;
-  height: fit-content;
+#result {
   float: right;
-  margin-top: -7.2em;
+  padding: 1em;
 }
 
 #inventory .item {
@@ -113,18 +121,34 @@ 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",
+                "oak_planks": "https://minecraft.wiki/images/Oak_Planks.png",
+                "oak_button": "https://minecraft.wiki/images/archive/20260728031107!Oak_Button_JE5.png",
+                "oak_slab": "https://minecraft.wiki/images/Oak_Slab_JE3_BE2.png",
                 "crafting_table": "https://minecraft.wiki/images/Crafting_Table_JE4_BE3.png",
+                "oak_door": "https://minecraft.wiki/images/Oak_Door_JE8.png",
+                "bowl": "https://minecraft.wiki/images/Bowl_JE2_BE2.png",
+                "stick": "https://minecraft.wiki/images/Stick_JE1_BE1.png",
+                "wooden_pickaxe": "https://minecraft.wiki/images/Wooden_Pickaxe_JE3_BE3.png",
+                "wooden_hoe": "https://minecraft.wiki/images/Wooden_Hoe_JE3_BE3.png",
+                "chest": "https://minecraft.wiki/images/Chest_(S)_JE2.png",
             };
             var recipesMap = {
-                "plank,;": "button",
-                "plank,plank,plank,;": "slab",
-                "plank,plank,;plank,plank,;": "crafting_table",
+                "oak_planks,;": "oak_button",
+                "oak_planks,oak_planks,oak_planks,;": "oak_slab",
+                "oak_planks,oak_planks,;oak_planks,oak_planks,;": "crafting_table",
+                "oak_planks,oak_planks,;oak_planks,oak_planks,;oak_planks,oak_planks,;": "oak_door",
+                "oak_planks,,oak_planks,;,oak_planks,,;": "bowl",
+                "oak_planks,;oak_planks,;": "stick",
+                "oak_planks,oak_planks,oak_planks,;,stick,,;,stick,,;": "wooden_pickaxe",
+                "oak_planks,oak_planks,;,stick,;,stick,;": "wooden_hoe",
+                "oak_planks,oak_planks,;stick,,;stick,,;": "wooden_hoe",
+                "oak_planks,oak_planks,oak_planks,;oak_planks,,oak_planks,;oak_planks,oak_planks,oak_planks,;": "chest",
             };
         </script>
         <script>
+            /*
+             * Placing and removing from crafting grid
+             */
             const slots = document.getElementsByClassName('craftingSlot')
             var firstChange = ""
             function onSlotPress(e) {
@@ -146,6 +170,7 @@ table {
                     onSlotSrcChanged()
                 }
             }
+            // Allows dragging item
             function onSlotEnter(e) {
                 if ((e.buttons & 1) === 1) {
                     onSlotPress(e)
@@ -160,12 +185,17 @@ table {
             }
             document.addEventListener('mouseup', onMouseRelease)
 
+            /*
+             * Selecting and deselecting item
+             */
             const items = document.getElementsByClassName('item')
             function onItemPress(e) {
-                if (e.target.id !== "" && e.target.id !== "crafting-table")
+                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")) {
+                }
+                if (e.target.src === undefined || e.target.src.endsWith("/") || e.target.src.endsWith("html")) {
                     selected.src = "/"
                 }
                 else {
@@ -175,12 +205,18 @@ table {
             }
             document.addEventListener('mousedown', onItemPress)
 
+            /*
+             * Moving selected item with cursor
+             */
             function selectedFollow(e) {
                 selected.style.top  = (e.clientY - selected.clientHeight / 2) + 'px'
                 selected.style.left = (e.clientX - selected.clientWidth / 2) + 'px'
             }
             document.addEventListener('mousemove', selectedFollow)
 
+            /*
+             * List available items
+             */
             for (item in itemMap) {
                 var itemImg = document.createElement("img")
                 itemImg.classList.add("item")
@@ -191,6 +227,10 @@ table {
                 itemTD.appendChild(itemImg)
                 inventory.appendChild(itemTD);
             }
+
+            /*
+             * Check recipe against available ones
+             */
             for (key in itemMap) {
                 itemMap[itemMap[key]] = key
             }
@@ -224,9 +264,9 @@ table {
                 }
                 return result
             }
+
             function onSlotSrcChanged() {
                 var recipe = getRecipe()
-                console.log(recipe)
                 if (recipe in recipesMap) {
                     craftingResult.src = itemMap[recipesMap[recipe]]
                 }
@@ -234,6 +274,18 @@ table {
                     craftingResult.src = "/"
                 }
             }
+
+            /*
+             * Taking result
+             */
+            function onResultPress(e) {
+                if (!craftingResult.src.endsWith("/")) {
+                    for (var slot of slots)
+                        slot.src = "/"
+                    craftingResult.src = "/"
+                }
+            }
+            craftingResult.addEventListener('mousedown', onResultPress)
         </script>
     </body>
 </html>