feat: Add headings with mojangles font, minor renaming

https://archive.org/details/minecraft-seven

2 files changed, 38 insertions, 21 deletions

diff --git a/index.html b/index.html
index 5343c47..cec7ce4 100644
--- a/index.html
+++ b/index.html
@@ -2,29 +2,47 @@
 <html>
     <head>
         <title>Minecraft Crafting</title>
+        <style>
+@font-face {
+  font-family: mojangles;
+  src: url("./mojangles.woff2") format("woff2");
+}
+body {
+  font-family: mojangles;
+  background-color: black;
+}
+h2:first-child {
+  margin-top: 0;
+}
+h2 {
+  font-weight: normal;
+}
+        </style>
     </head>
     <body>
         <article>
+            <h2>Crafting</h2>
             <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>
+                        <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><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>
+                        <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><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>
+                        <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"><img id="craftingResult" src="/" draggable="false"></div>
+                <div class="result slot"><img id="craftingResult" src="/" draggable="false"></div>
             </section>
+            <h2>Inventory</h2>
             <table>
                 <tr id="inventory">
                 </tr>
@@ -32,9 +50,6 @@
             <img id="selected" src="/" />
         </article>
 <style>
-body {
-  background-color: black;
-}
 article {
   background-color: #c6c6c6;
   max-width: 40em;
@@ -54,17 +69,18 @@ article {
 img, #crafting-grid td {
   width: 3em;
   height: 3em;
-  border: none;
   vertical-align: center;
 }
 img[src$="/"] {
   opacity: 0;
 }
+table {
+  border-spacing: 1px;
+}
 #crafting-grid {
   background-color: #c6c6c6;
-  border-spacing: 1px;
 }
-#crafting-grid td, .result {
+.slot {
   border-left: 2px solid #373737;
   border-top: 2px solid #373737;
   border-right: 2px solid white;
@@ -96,7 +112,7 @@ img[src$="/"] {
 }
 </style>
         <script>
-            const slots = document.getElementsByClassName('slot')
+            const slots = document.getElementsByClassName('craftingSlot')
             var firstChange = ""
             function onSlotPress(e) {
                 if (firstChange === "") {
@@ -179,6 +195,7 @@ img[src$="/"] {
             for (item in itemMap) {
                 var itemImg = document.createElement("img")
                 itemImg.classList.add("item")
+                itemImg.classList.add("slot")
                 itemImg.draggable = false
                 itemImg.src = itemMap[item]
                 var itemTD = document.createElement("td")
@@ -189,7 +206,7 @@ img[src$="/"] {
                 itemMap[itemMap[key]] = key
             }
 
-            function getCraft() {
+            function getRecipe() {
                 var result = ""
                 for (slot of slots) {
                     if (slot.src in itemMap) {
@@ -200,9 +217,9 @@ img[src$="/"] {
                 return result
             }
             function onSlotSrcChanged() {
-                var craft = getCraft()
-                if (craft in recipesMap) {
-                    craftingResult.src = itemMap[recipesMap[craft]]
+                var recipe = getRecipe()
+                if (recipe in recipesMap) {
+                    craftingResult.src = itemMap[recipesMap[recipe]]
                 }
                 else {
                     craftingResult.src = "/"
diff --git a/mojangles.woff2 b/mojangles.woff2
new file mode 100644
index 0000000..95c4390
--- /dev/null
+++ b/mojangles.woff2