feat: Use images instead of text, improve styling

1 files changed, 110 insertions, 49 deletions

diff --git a/index.html b/index.html
index 0d5256d..2d43ea5 100644
--- a/index.html
+++ b/index.html
@@ -4,42 +4,73 @@
         <title>Minecraft Crafting</title>
     </head>
     <body>
-        <table id="crafting-bench">
-            <tr>
-                <td id="1" class="slot"></td>
-                <td id="2" class="slot"></td>
-                <td id="3" class="slot"></td>
-            </tr>
-            <tr>
-                <td id="4" class="slot"></td>
-                <td id="5" class="slot"></td>
-                <td id="6" class="slot"></td>
-            </tr>
-            <tr>
-                <td id="7" class="slot"></td>
-                <td id="8" class="slot"></td>
-                <td id="9" class="slot"></td>
-            </tr>
-        </table>
-        <table id="inventory">
-            <tr>
-                <td class="item">M</td>
-                <td class="item">B</td>
-            </tr>
-        </table>
-        <div id="selected"></div>
+        <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>
+            <table>
+                <tr id="inventory">
+                </tr>
+            </table>
+            <img id="selected" src="/" />
+        </article>
 <style>
-#crafting-bench .slot {
-  border: 1px solid black;
-  width: 4em;
-  height: 4em;
+body {
+  background-color: black;
+}
+article {
+  background-color: #c6c6c6;
+  max-width: 40em;
+  margin: 0 auto;
+  padding: 1em;
+  border-left:   0.3em solid white;
+  border-top:    0.3em solid white;
+  border-right:  0.3em solid #555;
+  border-bottom: 0.3em solid #555;
+  border-radius: 3px;
+}
+
+img, #crafting-bench td {
+  width: 3em;
+  height: 3em;
+  border: none;
+  vertical-align: center;
+}
+img[src$="/"] {
+  opacity: 0;
+}
+#crafting-bench {
+  background-color: #c6c6c6;
+  border-spacing: 1px;
+}
+#crafting-bench td {
+  border-left: 2px solid #373737;
+  border-top: 2px solid #373737;
+  border-right: 2px solid white;
+  border-bottom: 2px solid white;
+  background-color: #8b8b8b;
+  padding: 0.15em;
+}
+#crafting-bench td:hover {
+  background-color: #c6c6c6;
 }
 #crafting-bench, #crafting-bench tr, #crafting-bench td {
   user-select: none;
 }
-#crafting-bench .slot:hover {
-  border-color: red;
-}
 
 #inventory .item {
   cursor: pointer;
@@ -48,10 +79,6 @@
 #selected {
   position: absolute;
   pointer-events: none;
-  display: none;
-}
-#selected:not(:empty) {
-  display: initial;
 }
 </style>
         <script>
@@ -59,18 +86,21 @@
             var firstChange = ""
             function onSlotPress(e) {
                 if (firstChange === "") {
-                    if (e.target.innerText !== selected.innerText)
+                    if (e.target.src !== selected.src)
                         firstChange = "place"
                     else
                         firstChange = "remove"
                 }
 
                 if (firstChange === "place") {
-                    if (e.target.innerText !== selected.innerText)
-                        e.target.innerText = selected.innerText
+                    if (e.target.src !== selected.src) {
+                        e.target.src = selected.src
+                        onSlotSrcChanged()
+                    }
                 }
                 else if (firstChange === "remove") {
-                    e.target.innerText = ''
+                    e.target.src = "/"
+                    onSlotSrcChanged()
                 }
             }
             function onSlotEnter(e) {
@@ -89,23 +119,54 @@
 
             const items = document.getElementsByClassName('item')
             function onItemPress(e) {
-                selected.innerText = e.target.innerText
-            }
-            for (item of items) {
-                item.addEventListener('mousedown', onItemPress)
-            }
-            function onItemRelease(e) {
-                console.log(e.target)
-                if (e.target.nodeName === "HTML" || e.target.nodeName === "BODY")
-                    selected.innerText = ''
+                if (e.target.id !== "")
+                    return;
+                console.log(e.target.src)
+                if (e.target.src === undefined || e.target.src === "/" || e.target.src.endsWith("html")) {
+                    selected.src = "/"
+                }
+                else {
+                    selected.src = e.target.src
+                    selectedFollow(e)
+                }
             }
-            document.addEventListener('mousedown', onItemRelease)
+            document.addEventListener('mousedown', onItemPress)
 
             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)
+
+            var itemMap = {
+                "plank": "https://minecraft.wiki/images/Oak_Planks.png",
+            };
+            for (item in itemMap) {
+                var itemImg = document.createElement("img")
+                itemImg.classList.add("item")
+                itemImg.draggable = false
+                itemImg.src = itemMap[item]
+                var itemTD = document.createElement("td")
+                itemTD.appendChild(itemImg)
+                inventory.appendChild(itemTD);
+            }
+            for (key in itemMap) {
+                itemMap[itemMap[key]] = key
+            }
+
+            function getCraft() {
+                var result = ""
+                for (slot of slots) {
+                    if (slot.src in itemMap) {
+                        result += itemMap[slot.src]
+                    }
+                    result += ","
+                }
+                return result
+            }
+            function onSlotSrcChanged() {
+                console.log(getCraft())
+            }
         </script>
     </body>
 </html>