feat!: Initial proof of concept

1 files changed, 111 insertions, 0 deletions

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0d5256d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <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>
+<style>
+#crafting-bench .slot {
+  border: 1px solid black;
+  width: 4em;
+  height: 4em;
+}
+#crafting-bench, #crafting-bench tr, #crafting-bench td {
+  user-select: none;
+}
+#crafting-bench .slot:hover {
+  border-color: red;
+}
+
+#inventory .item {
+  cursor: pointer;
+}
+
+#selected {
+  position: absolute;
+  pointer-events: none;
+  display: none;
+}
+#selected:not(:empty) {
+  display: initial;
+}
+</style>
+        <script>
+            const slots = document.getElementsByClassName('slot')
+            var firstChange = ""
+            function onSlotPress(e) {
+                if (firstChange === "") {
+                    if (e.target.innerText !== selected.innerText)
+                        firstChange = "place"
+                    else
+                        firstChange = "remove"
+                }
+
+                if (firstChange === "place") {
+                    if (e.target.innerText !== selected.innerText)
+                        e.target.innerText = selected.innerText
+                }
+                else if (firstChange === "remove") {
+                    e.target.innerText = ''
+                }
+            }
+            function onSlotEnter(e) {
+                if ((e.buttons & 1) === 1) {
+                    onSlotPress(e)
+                }
+            }
+            for (slot of slots) {
+                slot.addEventListener('mouseenter', onSlotEnter)
+                slot.addEventListener('mousedown', onSlotPress)
+            }
+            function onMouseRelease(e) {
+                firstChange = ""
+            }
+            document.addEventListener('mouseup', onMouseRelease)
+
+            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 = ''
+            }
+            document.addEventListener('mousedown', onItemRelease)
+
+            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)
+        </script>
+    </body>
+</html>