@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

package/src/components/tree.tsx

@@ -0,0 +1,98 @@
+import 'server-only';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+import { createElement } from 'react';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { loadMergedLangMap, creativeTabName } from '@terrafirmagreg-team/dump/lib/dump/assets/lang/load';
+import { loadClientManifest } from '@terrafirmagreg-team/dump/lib/dump/client/dump';
+import { DUMP_POINTER_TTL } from '@terrafirmagreg-team/dump/lib/dump/json-reader';
+import { createAsyncCache } from '@terrafirmagreg-team/data/lib/async-cache';
+import { loadDatasetRecipeCategories } from '@terrafirmagreg-team/recipe/lib/data/category/load';
+import { keyTreeNode } from '@terrafirmagreg-team/translate/server';
+import { loadLocaleRegistry } from '@terrafirmagreg-team/translate/server';
+import { encodeQueryValue } from '@terrafirmagreg-team/translate/lib/url';
+import { recipeBasePath } from '@terrafirmagreg-team/recipe/lib/links';
+import { sectionDatasets } from '@terrafirmagreg-team/kit/lib/datasets';
+import type { DumpRecipeCategory } from '@terrafirmagreg-team/recipe/lib/data/category/dto';
+import type { SectionTrees } from '@terrafirmagreg-team/kit/types';
+
+function categoryIcon(
+  dataset: DatasetRef,
+  category: DumpRecipeCategory,
+): React.ReactNode {
+  if (!category.icon) return undefined;
+  return createElement(
+    'span',
+    { className: 'inline-flex size-4 shrink-0 items-center justify-center' },
+    createElement(Entry, {
+      dataset,
+      reference: category.icon,
+      name: category.id,
+      size: 'sm',
+      href: false,
+      tooltip: false,
+      missing: 'hide',
+    }),
+  );
+}
+
+function categoryLeaf(
+  dataset: DatasetRef,
+  category: DumpRecipeCategory,
+  map: Record<string, string>,
+): PageTree.Item {
+  return keyTreeNode({
+    type: 'page',
+    name: creativeTabName(map, category.display?.name),
+    url: `${recipeBasePath(dataset)}?type=${encodeQueryValue(category.id)}`,
+    icon: categoryIcon(dataset, category),
+    $id: `${dataset.id}/${dataset.version ?? ''}/type/${category.id}`,
+  }) as PageTree.Item;
+}
+
+const recipeTreesCache = createAsyncCache(
+  async (): Promise<SectionTrees> => buildRecipeTrees(),
+  () => 'recipe-trees',
+  DUMP_POINTER_TTL,
+);
+
+export function recipeTrees(): Promise<SectionTrees> {
+  return recipeTreesCache();
+}
+
+async function buildRecipeTrees(): Promise<SectionTrees> {
+  const { defaultLanguage } = loadLocaleRegistry();
+  const datasets = await sectionDatasets('recipe');
+  const trees: SectionTrees = {};
+  for (const { id, title: datasetTitle, languages } of datasets) {
+    for (const lang of languages ?? [defaultLanguage]) {
+      const ref = { id };
+      const map = await loadMergedLangMap(ref, lang);
+      const categories = await loadDatasetRecipeCategories(ref);
+      const types = (await loadClientManifest(ref))?.indexes.recipes.types;
+      const nonEmpty = types
+        ? new Set(
+            types
+              .filter((row) => (row.count ?? 0) > 0)
+              .map((row) => row.id),
+          )
+        : undefined;
+      const leaves = [...categories]
+        .filter((category) => !nonEmpty || nonEmpty.has(category.id))
+        .sort(
+          (a, b) =>
+            creativeTabName(map, a.display?.name).localeCompare(
+              creativeTabName(map, b.display?.name),
+            ) || a.id.localeCompare(b.id),
+        )
+        .map((category) => categoryLeaf(ref, category, map));
+      (trees[lang] ??= {})[id] = {
+        name: datasetTitle ?? id,
+        children: leaves,
+        $id: `recipe/${id}/${lang}`,
+      } satisfies PageTree.Root;
+    }
+  }
+  return trees;
+}
+

package/src/components/views/alloy/index.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { ItemRow } from '@terrafirmagreg-team/ui/components/blocks/list/row';
+import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
+import { RecipeItemHeader } from '@terrafirmagreg-team/recipe/components/views/browser/recipe-item-header';
+import { RecipeFrame } from '@terrafirmagreg-team/recipe/components/views/browser/frame';
+import { useToolRecipes } from '@terrafirmagreg-team/recipe/hooks/use-tool-recipes';
+import { toAlloyRecipe } from '@terrafirmagreg-team/recipe/lib/alloy/parse';
+import { RecipeCard } from '@terrafirmagreg-team/recipe/components/cards/card';
+import { FitBox } from '@terrafirmagreg-team/ui/components/blocks/fit-box';
+import {
+  recipeCardImageUrl,
+  recipeImageUrl,
+} from '@terrafirmagreg-team/recipe/lib/links';
+import { AlloyList } from './list';
+import { AlloyMix } from './mix';
+import type { Recipe } from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+function AlloyRecipeCard({
+  recipe,
+  session,
+}: {
+  recipe: Recipe;
+  session: RecipeSession;
+}) {
+  const [failed, setFailed] = useState(false);
+  const src =
+    recipeImageUrl(session.dataset, recipe) ??
+    recipeCardImageUrl(session.dataset, recipe.id);
+  if (!src || failed) return null;
+  return (
+    <RecipeCard
+      recipe={recipe}
+      dataset={session.dataset}
+      lang={session.lang}
+      langMap={session.langMap}
+      title={recipe.id}
+      src={src}
+      onFail={() => setFailed(true)}
+      interactive
+    />
+  );
+}
+
+export function AlloyCalculator({ session }: { session: RecipeSession }) {
+  const t = useTranslations();
+  const { value, pending } = useToolRecipes(
+    session,
+    'tfc:alloying',
+    toAlloyRecipe,
+  );
+  const activeId = session.recipeId;
+  const active =
+    value?.find(({ recipe }) => recipe.id === activeId) ??
+    (!activeId ? value?.[0] : undefined);
+  const loading = session.indexLoading || pending;
+
+  return (
+    <>
+      <AlloyList session={session} />
+      <RecipeFrame
+        session={session}
+        header={
+          active ? (
+            <RecipeItemHeader recipe={active.recipe} session={session} />
+          ) : (
+            <ItemRow layout="header" title={t('Alloys', { note: 'recipe.alloy.title' })} />
+          )
+        }
+      >
+        <div className="scrollbar-thin flex-1 space-y-5 overflow-y-auto p-2 sm:p-4">
+          {loading ? (
+            <EmptyState variant="loading" />
+          ) : value === undefined ? (
+            <EmptyState variant="missing">
+              {t('Could not load recipes. Reload the page to retry.', { note: 'recipe.alloy.load_error' })}
+            </EmptyState>
+          ) : active ? (
+            <>
+              <AlloyMix
+                key={active.recipe.id}
+                recipe={active}
+                session={session}
+              />
+              <FitBox w={active.recipe.w ?? 0}>
+                <AlloyRecipeCard
+                  key={active.recipe.id}
+                  recipe={active.recipe}
+                  session={session}
+                />
+              </FitBox>
+            </>
+          ) : (
+            <EmptyState>
+              {activeId
+                ? t('Recipe not found in this dump. Select another alloy.', {
+                    note: 'recipe.alloy.missing',
+                  })
+                : t('No matching recipes in this dump.', {
+                    note: 'recipe.alloy.empty',
+                  })}
+            </EmptyState>
+          )}
+        </div>
+      </RecipeFrame>
+    </>
+  );
+}
+

package/src/components/views/alloy/list.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { useDeferredValue, useMemo, useState } from 'react';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { ToolList } from '@terrafirmagreg-team/recipe/components/tool-list';
+import { useToolRecipes } from '@terrafirmagreg-team/recipe/hooks/use-tool-recipes';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { toAlloyRecipe } from '@terrafirmagreg-team/recipe/lib/alloy/parse';
+import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { AlloyMiniBar } from './stack-bar';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+export function AlloyList({ session }: { session: RecipeSession }) {
+  const t = useTranslations();
+  const { value } = useToolRecipes(session, 'tfc:alloying', toAlloyRecipe);
+  const [query, setQuery] = useState('');
+  const search = useDeferredValue(query.trim().toLowerCase());
+  const name = (id: string) => recipeItemName(session.names, session.lang, id);
+
+  const tree = useMemo((): PageTree.Root => {
+    const rows = !search
+      ? (value ?? [])
+      : (value ?? []).filter(({ recipe, components }) =>
+          [
+            recipe.id,
+            `${recipe.outputs[0]?.id ?? ''} ${name(
+              recipe.outputs[0]?.id ?? '',
+            )}`,
+            ...components.map(({ slot }) => `${slot.id} ${name(slot.id)}`),
+          ].some((id) => id.toLowerCase().includes(search)),
+        );
+
+    const children: PageTree.Item[] = rows.map(({ recipe, components }) => {
+      return {
+        type: 'page',
+        $id: recipe.id,
+        url: recipeHref(session.dataset, session.lang, {
+          tool: 'alloy',
+          id: recipe.id,
+          unit: session.alloyUnit,
+          tab: session.tab,
+        }),
+        name: (
+          <>
+            <Entry
+              id={recipe.outputs[0]?.id ?? recipe.id}
+              kind={recipe.outputs[0]?.kind === 'fluid' ? 'fluid' : 'item'}
+              size="sm"
+              labeled
+              href={false}
+              tooltip={false}
+              className="min-w-0 flex-1 justify-start truncate"
+            />
+            <AlloyMiniBar
+              dataset={session.dataset}
+              components={components}
+              className="ms-auto h-1.5 w-10 shrink-0"
+            />
+          </>
+        ),
+      };
+    });
+
+    return {
+      name: 'alloy',
+      $id: `alloy:${session.lang}:${search}:${rows.length}`,
+      children,
+    } as PageTree.Root;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, search, session.lang, session.dataset, session.tab]);
+
+  return (
+    <ToolList
+      tree={tree}
+      loaded={value !== undefined}
+      query={query}
+      onQuery={setQuery}
+      searchLabel={t('Search alloys', { note: 'recipe.alloy.search' })}
+      emptyLabel={t('No matching recipes in this dump.', { note: 'recipe.alloy.empty' })}
+    />
+  );
+}
+

package/src/components/views/alloy/mix/index.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { AlloyStackBar } from '@terrafirmagreg-team/recipe/components/views/alloy/stack-bar';
+import { useMixState } from '@terrafirmagreg-team/recipe/hooks/alloy/use-mix-state';
+import { MixTotal } from './total';
+import { RatioPanel } from './ratio';
+import { MixRows } from './rows';
+import { MixStatus } from './status';
+import type { AlloyRecipe } from '@terrafirmagreg-team/recipe/types/alloy';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+export function AlloyMix({
+  recipe,
+  session,
+}: {
+  recipe: AlloyRecipe;
+  session: RecipeSession;
+}) {
+  const state = useMixState(recipe, session);
+
+  return (
+    <div className="space-y-4">
+      <MixTotal state={state} components={recipe.components} />
+      <RatioPanel state={state} components={recipe.components} />
+      <AlloyStackBar
+        rows={state.mix.rows}
+        colors={state.colors}
+        label={state.mixLabel}
+      />
+      <MixRows state={state} components={recipe.components} />
+      <MixStatus state={state} />
+    </div>
+  );
+}
+

package/src/components/views/alloy/mix/ratio.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Button } from '@terrafirmagreg-team/ui/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+import { INGOT_MB } from '@terrafirmagreg-team/recipe/lib/alloy/mix';
+import type { AlloyComponent } from '@terrafirmagreg-team/recipe/types/alloy';
+import type { MixState } from '@terrafirmagreg-team/recipe/hooks/alloy/use-mix-state';
+
+export function RatioPanel({
+  state,
+  components,
+}: {
+  state: MixState;
+  components: readonly AlloyComponent[];
+}) {
+  const t = useTranslations();
+  const { ratioMix, colors, name, applyRatioMix } = state;
+
+  if (!ratioMix) return null;
+  return (
+    <div className="space-y-1.5 rounded-md border border-dashed px-3 py-2 text-sm">
+      <div className="flex items-center gap-2">
+        <span className="text-xs text-muted-foreground">
+          {t('Recipe ratio in ingots', { note: 'recipe.alloy.ratio_ingots' })}
+        </span>
+        <span className="ms-auto flex shrink-0 items-center gap-1.5">
+          {[2, 4, 8].map((mult) => {
+            const text = components
+              .map(({ slot }, i) => `${ratioMix.counts[i] * mult}×${name(slot.id)}`)
+              .join(' + ');
+            return (
+              <Tooltip key={mult}>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      variant="outline"
+                      size="xs"
+                      aria-label={`${t('Apply the recipe ratio multiplied', { note: 'recipe.alloy.hint.mult' })}: ${text}`}
+                      onClick={() => applyRatioMix(mult)}
+                    />
+                  }
+                >
+                  ×{mult}
+                </TooltipTrigger>
+                <TooltipContent>{text}</TooltipContent>
+              </Tooltip>
+            );
+          })}
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => applyRatioMix()}
+                />
+              }
+            >
+              {t('Apply', { note: 'recipe.alloy.apply' })}
+            </TooltipTrigger>
+            <TooltipContent>{t('Fill fields with the recipe ratio in whole ingots', { note: 'recipe.alloy.hint.apply' })}</TooltipContent>
+          </Tooltip>
+        </span>
+      </div>
+      <div className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5">
+        {components.map(({ slot }, i) => (
+          <span
+            key={slot.id}
+            className="inline-flex min-w-0 items-center gap-1 tabular-nums"
+          >
+            {i > 0 ? <span className="text-muted-foreground">+</span> : null}
+            <span
+              className="size-2 shrink-0 rounded-full"
+              style={{ backgroundColor: colors[i] }}
+            />
+            <span className="max-w-40 truncate" title={name(slot.id)}>
+              {ratioMix.counts[i]}×{name(slot.id)}
+            </span>
+          </span>
+        ))}
+        <span className="tabular-nums text-muted-foreground">
+          → {ratioMix.total.toLocaleString()} {t('ing.', { note: 'recipe.alloy.unit.ingot' })} (
+          {(ratioMix.total * INGOT_MB).toLocaleString()} {t('mB', { note: 'recipe.alloy.unit.mb' })})
+        </span>
+      </div>
+    </div>
+  );
+}
+

package/src/components/views/alloy/mix/rows.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Input } from '@terrafirmagreg-team/ui/components/ui/input';
+import { Button } from '@terrafirmagreg-team/ui/components/ui/button';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import { minShareMix } from '@terrafirmagreg-team/recipe/lib/alloy/mix';
+import { AlloyRangeBar } from '@terrafirmagreg-team/recipe/components/views/alloy/range-bar';
+import { Check, Minus, Plus, TrendingDown, X } from 'lucide-react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { AlloyComponent } from '@terrafirmagreg-team/recipe/types/alloy';
+import type { MixState } from '@terrafirmagreg-team/recipe/hooks/alloy/use-mix-state';
+
+export function MixRows({
+  state,
+  components,
+}: {
+  state: MixState;
+  components: readonly AlloyComponent[];
+}) {
+  const t = useTranslations();
+  const {
+    mix,
+    fix,
+    econTotal,
+    colors,
+    inputs,
+    unitLabel,
+    name,
+    format,
+    formatPercent,
+    trim,
+    setInputs,
+    stepInput,
+  } = state;
+
+  return (
+    <ul className="space-y-3">
+      {components.map(({ slot, range }, i) => {
+        const row = mix.rows[i];
+        const missing = fix?.[i];
+        const econ = range ? minShareMix(components, i, econTotal) : null;
+        return (
+          <li
+            key={slot.id}
+            className={cn(
+              'grid grid-cols-[1fr_auto] items-center gap-x-4 gap-y-1 rounded-md px-2 py-1.5 transition-colors lg:grid-cols-[minmax(0,12rem)_1fr_auto_minmax(3.5rem,auto)]',
+              row?.valid === false && 'bg-destructive/5',
+            )}
+          >
+            <span className="flex min-w-0 items-center gap-2">
+              <span
+                className="size-2.5 shrink-0 rounded-full"
+                style={{ backgroundColor: colors[i] }}
+              />
+              <Entry reference={slot.ref} labeled className="min-w-0" />
+              {row?.valid === false ? (
+                <X className="size-3.5 shrink-0 text-destructive" />
+              ) : row?.valid ? (
+                <Check className="size-3.5 shrink-0 text-green-600 dark:text-green-400" />
+              ) : (
+                <span className="size-3.5 shrink-0" aria-hidden />
+              )}
+            </span>
+            <span className="flex w-16 flex-col items-end justify-self-end text-right text-sm tabular-nums text-muted-foreground lg:order-last lg:w-20">
+              <span>{formatPercent(row?.percent ?? 0)}%</span>
+              {missing !== undefined && missing > 0 ? (
+                <span className="text-[11px] leading-tight text-destructive">
+                  +{format(missing)}
+                </span>
+              ) : null}
+            </span>
+            <span className="col-span-2 lg:col-span-1">
+              {range ? (
+                <AlloyRangeBar
+                  min={range.min}
+                  max={range.max}
+                  value={row?.percent ?? 0}
+                  color={colors[i]}
+                  label={`${t('Allowed window', { note: 'recipe.alloy.range_allowed' })}: ${formatPercent(
+                    range.min,
+                  )}–${formatPercent(range.max)}%`}
+                />
+              ) : (
+                <span className="text-xs text-muted-foreground">—</span>
+              )}
+            </span>
+            <span className="col-span-2 flex items-center justify-end gap-1 lg:col-span-1">
+              <Button
+                variant="outline"
+                size="icon-xs"
+                aria-label={`${t('Remove 1', { note: 'recipe.alloy.step.down' })} ${name(slot.id)}`}
+                onClick={() => stepInput(i, -1)}
+              >
+                <Minus />
+              </Button>
+              <Input
+                inputMode="decimal"
+                name={`alloy-${slot.id}`}
+                autoComplete="off"
+                className="w-16 justify-self-end"
+                value={inputs[i] ?? ''}
+                onChange={(event) =>
+                  setInputs((prev) =>
+                    prev.map((value, j) =>
+                      j === i ? event.target.value : value,
+                    ),
+                  )
+                }
+                aria-label={name(slot.id)}
+              />
+              <Button
+                variant="outline"
+                size="icon-xs"
+                aria-label={`${t('Add 1', { note: 'recipe.alloy.step.up' })} ${name(slot.id)}`}
+                onClick={() => stepInput(i, 1)}
+              >
+                <Plus />
+              </Button>
+              <span className="w-8 text-xs text-muted-foreground">
+                {unitLabel}
+              </span>
+              {range ? (
+                <IconButton
+                  label={`${t('Minimize', { note: 'recipe.alloy.economize' })} ${name(slot.id)}: ${t('Set this metal to the lower bound of its range; others keep the recipe ratio', { note: 'recipe.alloy.hint.economize' })}`}
+                  size="icon-xs"
+                  disabled={!econ}
+                  onClick={() =>
+                    econ && setInputs(econ.map((value) => trim(value)))
+                  }
+                >
+                  <TrendingDown />
+                </IconButton>
+              ) : (
+                <span className="size-6 shrink-0" aria-hidden />
+              )}
+            </span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+