From 151ecb04c179d3ea791e0e40adfc039f685e73f6 Mon Sep 17 00:00:00 2001 From: Sebastian Hartte Date: Mon, 10 Jul 2023 00:40:53 +0200 Subject: [PATCH] Inscriber recipe layout. Pull up page title. --- src/GuideShell.tsx | 10 +++- src/assets/inscriber_arrows_bg_light.png | Bin 245 -> 0 bytes src/assets/inscriber_bottom.png | Bin 0 -> 176 bytes src/assets/inscriber_right.png | Bin 0 -> 182 bytes src/assets/inscriber_top.png | Bin 0 -> 175 bytes src/components/GuidePageTitleProvider.tsx | 11 ++++ src/components/GuidebookPageRoute.tsx | 11 +++- src/components/recipes/ChargerRecipe.tsx | 7 +-- src/components/recipes/InscriberRecipe.tsx | 19 ++++--- src/components/recipes/InscriberRecipes.tsx | 9 ++- src/components/recipes/Recipe.tsx | 10 +++- src/components/recipes/SmeltingRecipe.tsx | 10 +--- src/components/recipes/TransformRecipe.tsx | 1 + src/components/recipes/recipe.module.css | 60 +++++++++++++++++++- src/data/Guide.ts | 8 +++ src/page-compiler/compilePage.tsx | 23 +++++++- 16 files changed, 144 insertions(+), 35 deletions(-) delete mode 100644 src/assets/inscriber_arrows_bg_light.png create mode 100644 src/assets/inscriber_bottom.png create mode 100644 src/assets/inscriber_right.png create mode 100644 src/assets/inscriber_top.png create mode 100644 src/components/GuidePageTitleProvider.tsx diff --git a/src/GuideShell.tsx b/src/GuideShell.tsx index a04c9fd..d71a01b 100644 --- a/src/GuideShell.tsx +++ b/src/GuideShell.tsx @@ -3,7 +3,8 @@ import { Link, Outlet } from "react-router-dom"; import logo from "./assets/logo_00.png"; import GuideNavBar from "./GuideNavBar.tsx"; import { useGuide } from "./data/Guide.ts"; -import { useCallback, useState } from "react"; +import { ReactElement, useCallback, useState } from "react"; +import { GuidePageTitleProvider } from "./components/GuidePageTitleProvider.tsx"; function GuideShell() { const guide = useGuide(); @@ -12,6 +13,7 @@ function GuideShell() { const toggleMenu = useCallback(() => { setMenuExpanded((expanded) => !expanded); }, []); + const [pageTitle, setPageTitle] = useState(null); return (
@@ -33,12 +35,14 @@ function GuideShell() { -
{/* TODO Show title */}
+
{pageTitle}
- + + +
Minecraft {guide.gameVersion} [change] diff --git a/src/assets/inscriber_arrows_bg_light.png b/src/assets/inscriber_arrows_bg_light.png deleted file mode 100644 index c50b20828aca29dfe43d28f5dda05af02be4fb53..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 245 zcmeAS@N?(olHy`uVBq!ia0vp^dO&Q%#0(_k4l}v{Db50q$YKTtz9S&aI8~cZ8YCFt z6XFV_ySuwXLP9RdnQaDg7)yfuf*Bm1-ADs+T0LDHLn>~~y~N1olqkURfcHH|={(y* zkK{QTE?E0B3jDe_$0+dZgsD;wlHYzV`^Vt6$2m@#q3uS=jU=V`h!ZPUPE|kqHuBKB zX@`tzzjAmVjXzm-yg)|gxXGHQ7R(N|2i^7LFU%0jDE)r%U%GLfPpSKt&%Yk-71BSQ l9da=KK4XG{^^eE9nKyTs*uJ_xEf?q@22WQ%mvv4FO#pYDS{MKT diff --git a/src/assets/inscriber_bottom.png b/src/assets/inscriber_bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..2176fc28fa95e686e9f22716e5ac1bf17e63d464 GIT binary patch literal 176 zcmeAS@N?(olHy`uVBq!ia0vp^fS)vBEoI=+W%P17aUnopXO?J7O9#VQMuwn20wtPktvW!n O7(8A5T-G@yGywp~jxNjq literal 0 HcmV?d00001 diff --git a/src/assets/inscriber_right.png b/src/assets/inscriber_right.png new file mode 100644 index 0000000000000000000000000000000000000000..b6d77fb78034b36c3ebf153c051426e63d0ae59b GIT binary patch literal 182 zcmeAS@N?(olHy`uVBq!ia0vp^f_Pn|oXN7F_!c;YDy7Y~(vs~HYn-pNod-(kogx+y|q0^^r^ zsu^a13e|a=0t&wi_A76_7Vo?6?n7zYqvygW`93LR%2+#f{RtyKwulKj27;^+vr-rx c{vTv8-`lCZoVCvBAka<*Pgg&ebxsLQ0B6`c-T(jq literal 0 HcmV?d00001 diff --git a/src/assets/inscriber_top.png b/src/assets/inscriber_top.png new file mode 100644 index 0000000000000000000000000000000000000000..c76ce1eb5040e941d4db5bcc5c675880dff4409e GIT binary patch literal 175 zcmeAS@N?(olHy`uVBq!ia0vp^f void; + +const context = createContext(() => {}); + +export function useGuidePageTitleSetter() { + return useContext(context); +} + +export const GuidePageTitleProvider = context.Provider; diff --git a/src/components/GuidebookPageRoute.tsx b/src/components/GuidebookPageRoute.tsx index 37bf1ed..454ff4a 100644 --- a/src/components/GuidebookPageRoute.tsx +++ b/src/components/GuidebookPageRoute.tsx @@ -1,6 +1,7 @@ import { ExportedPage, useGuide } from "../data/Guide.ts"; import { compilePage } from "../page-compiler/compilePage.tsx"; -import { useMemo } from "react"; +import { useEffect, useMemo } from "react"; +import { useGuidePageTitleSetter } from "./GuidePageTitleProvider.tsx"; export type GuidebookPageRouteProps = { pageId: string; @@ -9,7 +10,13 @@ export type GuidebookPageRouteProps = { function GuidebookPageRoute({ pageId, page }: GuidebookPageRouteProps) { const guide = useGuide(); - return useMemo(() => compilePage(guide, pageId, page), [guide, pageId, page]); + const { title, content } = useMemo( + () => compilePage(guide, pageId, page), + [guide, pageId, page] + ); + const setPageTitle = useGuidePageTitleSetter(); + useEffect(() => setPageTitle(title), [setPageTitle, title]); + return content; } export default GuidebookPageRoute; diff --git a/src/components/recipes/ChargerRecipe.tsx b/src/components/recipes/ChargerRecipe.tsx index a839b54..0d84933 100644 --- a/src/components/recipes/ChargerRecipe.tsx +++ b/src/components/recipes/ChargerRecipe.tsx @@ -1,7 +1,7 @@ import css from "./recipe.module.css"; import RecipeIngredient from "./RecipeIngredient"; import RecipeArrow from "./RecipeArrow"; -import { ChargerRecipeInfo, useGuide } from "../../data/Guide.ts"; +import { ChargerRecipeInfo } from "../../data/Guide.ts"; import MinecraftFrame from "../MinecraftFrame.tsx"; import ItemIcon from "../ItemIcon.tsx"; @@ -10,14 +10,11 @@ export interface ChargerRecipeProps { } function ChargerRecipe({ recipe }: ChargerRecipeProps) { - const guide = useGuide(); - const resultItem = guide.getItemInfo(recipe.resultItem); - return (
- Charger: {resultItem.displayName} + Charger
diff --git a/src/components/recipes/InscriberRecipe.tsx b/src/components/recipes/InscriberRecipe.tsx index a63a5b7..a8213e8 100644 --- a/src/components/recipes/InscriberRecipe.tsx +++ b/src/components/recipes/InscriberRecipe.tsx @@ -1,31 +1,32 @@ import css from "./recipe.module.css"; import RecipeIngredient from "./RecipeIngredient"; -import RecipeArrow from "./RecipeArrow"; -import { InscriberRecipeInfo, useGuide } from "../../data/Guide.ts"; +import { InscriberRecipeInfo } from "../../data/Guide.ts"; import MinecraftFrame from "../MinecraftFrame.tsx"; import ItemIcon from "../ItemIcon.tsx"; +import topArrow from "../../assets/inscriber_top.png"; +import bottomArrow from "../../assets/inscriber_bottom.png"; +import rightArrow from "../../assets/inscriber_right.png"; export interface InscriberRecipeProps { recipe: InscriberRecipeInfo; } function InscriberRecipe({ recipe }: InscriberRecipeProps) { - const guide = useGuide(); - const resultItem = guide.getItemInfo(recipe.resultItem); - return (
- Inscriber: {resultItem.displayName} + Inscriber
-
+
+ + + +
- -
); diff --git a/src/components/recipes/InscriberRecipes.tsx b/src/components/recipes/InscriberRecipes.tsx index 6fee0eb..caef2a7 100644 --- a/src/components/recipes/InscriberRecipes.tsx +++ b/src/components/recipes/InscriberRecipes.tsx @@ -1,12 +1,17 @@ import InscriberRecipe from "./InscriberRecipe"; import css from "./recipe.module.css"; -import { useGuide } from "../../data/Guide.ts"; +import { RecipeType, useGuide } from "../../data/Guide.ts"; +import { useMemo } from "react"; function InscriberRecipes() { const guide = useGuide(); + const recipes = useMemo( + () => guide.getRecipesByType(RecipeType.InscriberRecipeType), + [guide] + ); return (
- {Object.values(guide.inscriberRecipes).map((recipe) => ( + {recipes.map((recipe) => ( ))}
diff --git a/src/components/recipes/Recipe.tsx b/src/components/recipes/Recipe.tsx index 0f5b1b3..69dfd3d 100644 --- a/src/components/recipes/Recipe.tsx +++ b/src/components/recipes/Recipe.tsx @@ -19,16 +19,20 @@ export type RecipeProps = } | { id?: never; recipe: TaggedRecipe }; +function UnsupportedRecipeType({ recipe }: { recipe: TaggedRecipe }) { + return Unsupported Recipe Type ({recipe.type}); +} + const RecipeTypeMap: Record> = { [RecipeType.CraftingRecipeType]: CraftingRecipe, [RecipeType.SmeltingRecipeType]: SmeltingRecipe, - // [RecipeType.StonecuttingRecipeType]: StonecuttingRecipe, + [RecipeType.StonecuttingRecipeType]: UnsupportedRecipeType, [RecipeType.SmithingRecipeType]: SmithingRecipe, [RecipeType.TransformRecipeType]: TransformRecipe, [RecipeType.InscriberRecipeType]: InscriberRecipe, [RecipeType.ChargerRecipeType]: ChargerRecipe, - // [RecipeType.EntropyRecipeType]: EntropyRecipe, - // [RecipeType.MatterCannonAmmoType]: MatterCannonAmmo, + [RecipeType.EntropyRecipeType]: UnsupportedRecipeType, + [RecipeType.MatterCannonAmmoType]: UnsupportedRecipeType, }; function Recipe(props: RecipeProps) { diff --git a/src/components/recipes/SmeltingRecipe.tsx b/src/components/recipes/SmeltingRecipe.tsx index 90e84fa..16766d9 100644 --- a/src/components/recipes/SmeltingRecipe.tsx +++ b/src/components/recipes/SmeltingRecipe.tsx @@ -2,7 +2,7 @@ import css from "./recipe.module.css"; import RecipeIngredient from "./RecipeIngredient"; import smelt from "./smelt.png"; import RecipeArrow from "./RecipeArrow"; -import { SmeltingRecipeInfo, useGuide } from "../../data/Guide.ts"; +import { SmeltingRecipeInfo } from "../../data/Guide.ts"; import MinecraftFrame from "../MinecraftFrame.tsx"; import ItemIcon from "../ItemIcon.tsx"; @@ -11,19 +11,15 @@ export interface SmeltingRecipeProps { } function SmeltingRecipe({ recipe }: SmeltingRecipeProps) { - const guide = useGuide(); - const resultItem = guide.getItemInfo(recipe.resultItem); - return (
- Smelting:{" "} - {resultItem.displayName} + Smelting
-
+
fire
diff --git a/src/components/recipes/TransformRecipe.tsx b/src/components/recipes/TransformRecipe.tsx index 416cd2f..9b0d5e8 100644 --- a/src/components/recipes/TransformRecipe.tsx +++ b/src/components/recipes/TransformRecipe.tsx @@ -47,6 +47,7 @@ function FluidTransformCircumstance({ fluids }: { fluids: string[] }) { {" Throw in " + fluidInfo.displayName} diff --git a/src/components/recipes/recipe.module.css b/src/components/recipes/recipe.module.css index 3f82f3e..4afc0ca 100644 --- a/src/components/recipes/recipe.module.css +++ b/src/components/recipes/recipe.module.css @@ -36,7 +36,7 @@ /* This is the title row */ .recipeBoxLayout > :first-child { - grid-column-start: span 3; + grid-column: 1 / span 3; color: #333333; display: flex; flex-direction: row; @@ -121,4 +121,60 @@ .smeltingInputBox > :last-child { border-top-left-radius: 0; border-top-right-radius: 0; -} \ No newline at end of file +} + +.inscriberGrid { + display: grid; + grid-template-columns: auto auto max-content auto; + grid-template-rows: auto auto auto; + grid-column: 1 / span 3; + align-items: center; + justify-items: center; +} + +/* top */ +.inscriberGrid > :nth-child(1) { + grid-row: 1; + grid-column: 1; +} + +/* middle */ +.inscriberGrid > :nth-child(2) { + grid-row: 2; + grid-column: 2; +} + +/* bottom */ +.inscriberGrid > :nth-child(3) { + grid-row: 3; + grid-column: 1; +} + +/* result */ +.inscriberGrid > :nth-child(4) { + grid-row: 2; + grid-column: 4; +} + +/* top arrow */ +.inscriberGrid > :nth-child(5) { + grid-row: 1; + grid-column: 2; + width: calc(17px * var(--gui-scale)); + margin-top: calc(10px * var(--gui-scale)); +} + +/* bottom arrow */ +.inscriberGrid > :nth-child(6) { + grid-row: 3; + grid-column: 2; + width: calc(17px * var(--gui-scale)); + margin-bottom: calc(10px * var(--gui-scale)); +} + +/* right arrow */ +.inscriberGrid > :nth-child(7) { + grid-row: 2; + grid-column: 3; + height: calc(16px * var(--gui-scale)); +} diff --git a/src/data/Guide.ts b/src/data/Guide.ts index dbb9515..f2ac87b 100644 --- a/src/data/Guide.ts +++ b/src/data/Guide.ts @@ -318,6 +318,14 @@ export class Guide { return this.index.recipes[recipeId]; } + getRecipesByType( + recipeType: T + ): RT[] { + return Object.values(this.index.recipes).filter( + (recipe) => recipe.type === recipeType + ) as RT[]; + } + getRecipesForItem(item: string): TaggedRecipe[] { return this.recipesForItems.get(item) ?? []; } diff --git a/src/page-compiler/compilePage.tsx b/src/page-compiler/compilePage.tsx index f705fe6..dad56e1 100644 --- a/src/page-compiler/compilePage.tsx +++ b/src/page-compiler/compilePage.tsx @@ -138,7 +138,7 @@ export function compilePage( guide: Guide, pageId: string, page: ExportedPage -): ReactNode { +): { title: ReactElement | null; content: ReactNode } { const astRoot = page.astRoot; assertNodeType(astRoot, "root"); @@ -151,5 +151,24 @@ export function compilePage( compileContentNode: (node, parent) => compileContent(context, node, parent), }; - return context.compileChildren(astRoot); + let title: ReactElement | null = null; + + // Clone root + const clonedRoot = { + ...astRoot, + children: [...astRoot.children], + }; + for (let i = 0; i < clonedRoot.children.length; i++) { + const child = clonedRoot.children[i]; + if (child.type === "heading") { + if (child.depth === 1) { + title = compileHeading(context, child); + clonedRoot.children.splice(i, 1); + } + break; + } + } + const content = context.compileChildren(clonedRoot); + + return { title, content }; }