From 15f3d9d357d1ac40df8718ec4338974ed7b6392d Mon Sep 17 00:00:00 2001
From: Sebastian Hartte <shartte@users.noreply.github.com>
Date: Wed, 5 Jul 2023 02:04:05 +0200
Subject: [PATCH] Somewhat improved recipe display.

---
 src/assets/slot.png                         | Bin 0 -> 123 bytes
 src/components/recipes/CraftingRecipe.tsx   |   6 ++--
 src/components/recipes/InscriberRecipe.tsx  |  18 ++++++++----
 src/components/recipes/RecipeIngredient.tsx |   7 ++---
 src/components/recipes/SmeltingRecipe.tsx   |  21 ++++++++------
 src/components/recipes/recipe.module.css    |  30 ++++++++++++--------
 src/index.css                               |   2 +-
 7 files changed, 49 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/slot.png

diff --git a/src/assets/slot.png b/src/assets/slot.png
new file mode 100644
index 0000000000000000000000000000000000000000..218df6e9ff99d80e67ac5a12b0d1ee74449ed9c7
GIT binary patch
literal 123
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1SD^+kpz+qoCO|{#S9F5M?jcysy3fAP*B&?
z#W6%<VzP<3dAfpNOH0cJ2aQQvrcRk+FfmJ%r6)`Js@bNkh9%|Y|J7v~7_?k1x^<Q=
QD+C$m>FVdQ&MBb@07-ivx&QzG

literal 0
HcmV?d00001

diff --git a/src/components/recipes/CraftingRecipe.tsx b/src/components/recipes/CraftingRecipe.tsx
index 8e2b70d..ef26978 100644
--- a/src/components/recipes/CraftingRecipe.tsx
+++ b/src/components/recipes/CraftingRecipe.tsx
@@ -16,9 +16,9 @@ function CraftingRecipe({ recipe }: CraftingRecipeProps) {
   return (
     <MinecraftFrame>
       <div className={css.recipeBoxLayout}>
-        <strong>
-          {resultItem.displayName} {recipe.shapeless ? " (Shapeless)" : null}
-        </strong>
+        <div title={resultItem.displayName}>
+          Crafting {recipe.shapeless ? " (Shapeless)" : null}
+        </div>
         <RecipeIngredientGrid {...recipe} />
         <RecipeArrow />
         <RecipeIngredient itemIds={[recipe.resultItem]} />
diff --git a/src/components/recipes/InscriberRecipe.tsx b/src/components/recipes/InscriberRecipe.tsx
index 6048ad1..d52e56e 100644
--- a/src/components/recipes/InscriberRecipe.tsx
+++ b/src/components/recipes/InscriberRecipe.tsx
@@ -2,6 +2,7 @@ import css from "./recipe.module.css";
 import RecipeIngredient from "./RecipeIngredient";
 import RecipeArrow from "./RecipeArrow";
 import { InscriberRecipeInfo, useGuide } from "../../data/Guide.ts";
+import MinecraftFrame from "../MinecraftFrame.tsx";
 
 export interface InscriberRecipeProps {
   recipe: InscriberRecipeInfo;
@@ -12,11 +13,18 @@ function InscriberRecipe({ recipe }: InscriberRecipeProps) {
   const resultItem = guide.getItemInfo(recipe.resultItem);
 
   return (
-    <div className={css.recipeBoxLayout}>
-      <strong>{resultItem.displayName}</strong>
-      <RecipeArrow />
-      <RecipeIngredient itemIds={[recipe.resultItem]} />
-    </div>
+    <MinecraftFrame>
+      <div className={css.recipeBoxLayout}>
+        <div>{resultItem.displayName}</div>
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <RecipeIngredient itemIds={recipe.top} />
+          <RecipeIngredient itemIds={recipe.middle} />
+          <RecipeIngredient itemIds={recipe.bottom} />
+        </div>
+        <RecipeArrow />
+        <RecipeIngredient itemIds={[recipe.resultItem]} />
+      </div>
+    </MinecraftFrame>
   );
 }
 
diff --git a/src/components/recipes/RecipeIngredient.tsx b/src/components/recipes/RecipeIngredient.tsx
index 2a2c67d..669924e 100644
--- a/src/components/recipes/RecipeIngredient.tsx
+++ b/src/components/recipes/RecipeIngredient.tsx
@@ -21,11 +21,8 @@ function CyclingIngredient({ itemIds }: RecipeIngredientProps) {
 function RecipeIngredient({ itemIds }: RecipeIngredientProps) {
   return (
     <div className={css.ingredientBox}>
-      {itemIds.length > 1 ? (
-        <CyclingIngredient itemIds={itemIds} />
-      ) : (
-        <ItemIcon id={itemIds[0]} />
-      )}
+      {itemIds.length > 1 && <CyclingIngredient itemIds={itemIds} />}
+      {itemIds.length === 1 && <ItemIcon id={itemIds[0]} />}
     </div>
   );
 }
diff --git a/src/components/recipes/SmeltingRecipe.tsx b/src/components/recipes/SmeltingRecipe.tsx
index 577a979..741cd4b 100644
--- a/src/components/recipes/SmeltingRecipe.tsx
+++ b/src/components/recipes/SmeltingRecipe.tsx
@@ -3,6 +3,7 @@ import RecipeIngredient from "./RecipeIngredient";
 import smelt from "./smelt.png";
 import RecipeArrow from "./RecipeArrow";
 import { SmeltingRecipeInfo, useGuide } from "../../data/Guide.ts";
+import MinecraftFrame from "../MinecraftFrame.tsx";
 
 export interface SmeltingRecipeProps {
   recipe: SmeltingRecipeInfo;
@@ -13,17 +14,19 @@ function SmeltingRecipe({ recipe }: SmeltingRecipeProps) {
   const resultItem = guide.getItemInfo(recipe.resultItem);
 
   return (
-    <div className={css.recipeBoxLayout}>
-      <strong>Smelting - {resultItem.displayName}</strong>
-      <div className={css.smeltingInputBox}>
-        <RecipeIngredient itemIds={recipe.ingredient} />
-        <div className={css.ingredientBox}>
-          <img className="item-icon" src={smelt} alt="fire" />
+    <MinecraftFrame>
+      <div className={css.recipeBoxLayout}>
+        <div>Smelting - {resultItem.displayName}</div>
+        <div className={css.smeltingInputBox}>
+          <RecipeIngredient itemIds={recipe.ingredient} />
+          <div className={css.ingredientBox}>
+            <img className="item-icon" src={smelt} alt="fire" />
+          </div>
         </div>
+        <RecipeArrow />
+        <RecipeIngredient itemIds={[recipe.resultItem]} />
       </div>
-      <RecipeArrow />
-      <RecipeIngredient itemIds={[recipe.resultItem]} />
-    </div>
+    </MinecraftFrame>
   );
 }
 
diff --git a/src/components/recipes/recipe.module.css b/src/components/recipes/recipe.module.css
index a11c9d1..a822269 100644
--- a/src/components/recipes/recipe.module.css
+++ b/src/components/recipes/recipe.module.css
@@ -1,10 +1,3 @@
-.recipeContainer > div + div {
-  margin-top: 1rem;
-}
-
-.recipeContainer + .recipeContainer {
-  margin-top: 1rem;
-}
 
 /**
  * Try to be responsive on mobile
@@ -14,6 +7,14 @@
     max-width: 100vw;
   }
 
+  .recipeContainer > div + div {
+    margin-top: 1rem;
+  }
+
+  .recipeContainer + .recipeContainer {
+    margin-top: 1rem;
+  }
+
   .recipeContainer > :first-child {
     display: flex;
     justify-content: center;
@@ -33,8 +34,10 @@
   align-items: center;
 }
 
+/* This is the title row */
 .recipeBoxLayout > :first-child {
   grid-column-start: span 3;
+  color: #333333;
 }
 
 .ingredientsBox,
@@ -42,8 +45,6 @@
 .ingredientsBoxShapeless2Col,
 .ingredientsBoxShapeless3Col {
   display: inline-grid;
-  column-gap: 5px;
-  row-gap: 5px;
   align-self: center;
   justify-self: start;
 }
@@ -78,9 +79,14 @@
 .emptyIngredientBox,
 .ingredientBox {
   display: inline-block;
-  background-color: #bbbbbb;
-  border-radius: 8px;
-  padding: 10px;
+  width: calc(18px * var(--gui-scale));
+  height: calc(18px * var(--gui-scale));
+  box-sizing: border-box;
+
+  border: calc(1px * var(--gui-scale)) solid;
+  image-rendering: pixelated;
+  border-image-source: url("../../assets/slot.png");
+  border-image-slice: 1 fill;
 }
 
 .ingredientBox:hover {
diff --git a/src/index.css b/src/index.css
index a29298f..ab87af0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -79,7 +79,7 @@ hr {
     image-rendering: pixelated;
 
     font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    font-size: 120%;
+    font-size: 20px;
     line-height: 1.5;
     font-weight: 400;