Somewhat improved recipe display.

AppliedEnergistics · Jul 5, 2023 · 15f3d9d · 15f3d9d
1 parent 7eeda19
commit 15f3d9d
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 35 deletions.
diff --git a/src/assets/slot.png b/src/assets/slot.png
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,17 +34,17 @@
   align-items: center;
 }
 
+/* This is the title row */
 .recipeBoxLayout > :first-child {
   grid-column-start: span 3;
+  color: #333333;
 }
 
 .ingredientsBox,
 .ingredientsBoxShapeless1Col,
 .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
@@ -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;