@terrafirmagreg-team/recipe 0.0.0-stage → 0.1.0

package/src/components/cards/strip-card/buttons.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { useCopyButton } from '@terrafirmagreg-team/ui/hooks/use-copy-button';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+
+export function StripCardTagPager({
+  left,
+  top,
+  dir,
+  scale,
+  disabled,
+  onClick,
+}: {
+  left: number;
+  top: number;
+  dir: -1 | 1;
+  scale: number;
+  disabled: boolean;
+  onClick: () => void;
+}) {
+  const t = useTranslations();
+  const [hover, setHover] = useState(false);
+  const arrow = `${3.5 * scale}px solid ${disabled ? 'var(--color-mc-inset)' : hover ? 'var(--color-mc-arrow-dark)' : 'var(--color-mc-arrow)'}`;
+  return (
+    <button
+      type="button"
+      aria-label={t(dir < 0 ? 'ui.prev_page' : 'ui.next_page')}
+      disabled={disabled}
+      onClick={onClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onFocus={() => setHover(true)}
+      onBlur={() => setHover(false)}
+      className="absolute flex cursor-pointer items-center justify-center border-0 p-0 outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default"
+      style={{
+        left,
+        top,
+        width: 12 * scale,
+        height: 12 * scale,
+        background: disabled ? 'var(--color-mc-dim)' : hover ? 'var(--color-mc-bright)' : 'var(--color-mc-panel)',
+        boxShadow: `inset ${scale}px ${scale}px 0 rgba(255,255,255,0.65), inset -${scale}px -${scale}px 0 rgba(0,0,0,0.45)`,
+      }}
+    >
+      <span
+        aria-hidden
+        className="block"
+        style={{
+          width: 0,
+          height: 0,
+          borderTop: `${2.5 * scale}px solid transparent`,
+          borderBottom: `${2.5 * scale}px solid transparent`,
+          ...(dir < 0 ? { borderRight: arrow } : { borderLeft: arrow }),
+        }}
+      />
+    </button>
+  );
+}
+
+export function StripCardTagCopy({
+  left,
+  top,
+  scale,
+  value,
+}: {
+  left: number;
+  top: number;
+  scale: number;
+  value: string;
+}) {
+  const t = useTranslations();
+  const [hover, setHover] = useState(false);
+  const { checked: done, onClick } = useCopyButton(() =>
+    navigator.clipboard.writeText(value),
+  );
+  const Icon = done ? Check : Copy;
+  return (
+    <button
+      type="button"
+      aria-label={t('recipe.copy_recipe_id')}
+      onClick={onClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onFocus={() => setHover(true)}
+      onBlur={() => setHover(false)}
+      className="absolute flex cursor-pointer items-center justify-center border-0 p-0 outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      style={{
+        left,
+        top,
+        width: 12 * scale,
+        height: 12 * scale,
+        background: done ? 'var(--color-mc-bright)' : hover ? 'var(--color-mc-bright)' : 'var(--color-mc-panel)',
+        boxShadow: `inset ${scale}px ${scale}px 0 rgba(255,255,255,0.65), inset -${scale}px -${scale}px 0 rgba(0,0,0,0.45)`,
+        color: done ? 'var(--color-mc-done)' : hover ? 'var(--color-mc-arrow-dark)' : 'var(--color-mc-arrow)',
+      }}
+    >
+      <Icon width={7 * scale} height={7 * scale} strokeWidth={2.5} />
+    </button>
+  );
+}

package/src/components/cards/strip-card/index.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import { Fragment, useRef, useState } from 'react';
+import { SlotHitbox } from '@terrafirmagreg-team/recipe/components/cards/slot-hitbox';
+import { recipeGlareFilter } from '@terrafirmagreg-team/recipe/components/cards/glare-filter';
+import { StripCardSprite } from '@terrafirmagreg-team/recipe/components/cards/strip-card/sprite';
+import {
+  StripCardTagCopy,
+  StripCardTagPager,
+} from '@terrafirmagreg-team/recipe/components/cards/strip-card/buttons';
+import { StripCardMember } from '@terrafirmagreg-team/recipe/components/cards/strip-card/member-cell';
+import { recipeGrid } from '@terrafirmagreg-team/recipe/lib/data/grid';
+import { recipeSlots } from '@terrafirmagreg-team/recipe/lib/recipe-slots';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { useInView } from '@terrafirmagreg-team/ui/hooks/use-in-view';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import type { EntryTooltipLevel } from '@terrafirmagreg-team/game/components/entry/tooltip';
+import type { Recipe } from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
+
+const SCALE = 2;
+
+export function StripCard({
+  recipe,
+  dataset,
+  lang,
+  langMap,
+  nav,
+  title,
+  src,
+  onFail,
+  naturalW,
+  interactive = true,
+  slotTooltip,
+  eager,
+  frameOnly,
+}: {
+  recipe: Recipe;
+  dataset: string;
+  lang: string;
+  langMap?: Record<string, string>;
+  nav?: Pick<RecipeHrefOpts, 'tab' | 'search'>;
+  title: string;
+  src: string;
+  onFail: () => void;
+  naturalW?: number;
+  naturalH?: number;
+  interactive?: boolean;
+  slotTooltip?: EntryTooltipLevel;
+  eager?: boolean;
+
+  frameOnly?: boolean;
+}) {
+  const scale = recipe.scale ?? SCALE;
+  const margin = recipe.margin ?? 0;
+  const info = recipeGrid(recipe.properties);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const observedInView = useInView(rootRef);
+  const inView = eager || observedInView;
+  const [page, setPage] = useState(0);
+  const [measured, setMeasured] = useState<{ src: string; h: number }>();
+  if (!info) return null;
+  const { grid, members } = info;
+  const pageSize = grid.cols * grid.rows;
+  const pages = Math.max(1, Math.ceil(members.length / pageSize));
+  const clamped = Math.min(page, pages - 1);
+  const shown = members.slice(clamped * pageSize, (clamped + 1) * pageSize);
+  const shownRows = Math.max(1, Math.ceil(shown.length / grid.cols));
+
+  const imgW = recipe.w ?? naturalW ?? 0;
+  const imgH = measured?.src === src ? measured.h : 0;
+  const topH = (grid.y + margin) * scale;
+  const rowH = grid.row * scale;
+  const bottomH = (grid.tail + margin) * scale;
+  const rowSrc = (margin + grid.y) * scale;
+  const bottomSrc = Math.max(0, imgH - bottomH);
+  const edgeW = margin * scale;
+  const guiW = imgW / scale - margin * 2;
+  const buttonTop = margin * scale;
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn(
+        'relative w-fit overflow-hidden rounded-sm',
+
+        measured?.src === src && 'bg-mc-panel',
+      )}
+      style={{
+        width: imgW,
+        height: topH + shownRows * rowH + bottomH,
+      }}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element -- dump asset */}
+      <img
+        src={src}
+        alt=""
+        aria-hidden
+        className="absolute h-0 w-0 opacity-0"
+        onError={onFail}
+        onLoad={(event) =>
+          setMeasured({ src, h: event.currentTarget.naturalHeight })
+        }
+      />
+      <div className="absolute inset-0" style={recipeGlareFilter}>
+        <Hint label={title}>
+          <StripCardSprite
+            src={src}
+            pos="0 0"
+            width={imgW}
+            height={topH}
+            className="absolute left-0 top-0"
+          />
+        </Hint>
+        {Array.from({ length: shownRows }, (_, rowIndex) => {
+          const cells = Math.min(
+            grid.cols,
+            shown.length - rowIndex * grid.cols,
+          );
+          return (
+            <Fragment key={rowIndex}>
+              <StripCardSprite
+                src={src}
+                pos={`0 -${rowSrc}px`}
+                width={edgeW + cells * rowH}
+                height={rowH}
+                className="absolute left-0"
+                style={{ top: topH + rowIndex * rowH }}
+              />
+              <StripCardSprite
+                src={src}
+                pos={`${edgeW - imgW}px -${rowSrc}px`}
+                width={edgeW}
+                height={rowH}
+                className="absolute right-0"
+                style={{ top: topH + rowIndex * rowH }}
+              />
+            </Fragment>
+          );
+        })}
+        {imgH > 0 && (
+          <StripCardSprite
+            src={src}
+            pos={`0 -${bottomSrc}px`}
+            width={imgW}
+            height={bottomH}
+            className="absolute bottom-0 left-0"
+          />
+        )}
+      </div>
+      {inView && !frameOnly
+        ? recipeSlots(recipe).map((widget, index) => (
+            <SlotHitbox
+              key={`${widget.id}:${index}`}
+              widget={widget}
+              dataset={dataset}
+              lang={lang}
+              langMap={langMap}
+              nav={nav}
+              scale={scale}
+              margin={margin}
+              interactive={interactive}
+              tooltipLevel={slotTooltip}
+            />
+          ))
+        : null}
+      {inView && !frameOnly
+        ? shown.map((member, index) => (
+            <StripCardMember
+              key={`${member.id}:${index}`}
+              member={member}
+              dataset={dataset}
+              lang={lang}
+              langMap={langMap}
+              nav={nav}
+              x={edgeW + (index % grid.cols) * rowH}
+              y={topH + Math.floor(index / grid.cols) * rowH}
+              pitch={rowH}
+              interactive={interactive}
+              tooltipLevel={slotTooltip}
+            />
+          ))
+        : null}
+      {pages > 1 && (
+        <>
+          <StripCardTagPager
+            left={(margin + 2) * scale}
+            top={buttonTop}
+            dir={-1}
+            scale={scale}
+            disabled={clamped <= 0}
+            onClick={() => setPage(clamped - 1)}
+          />
+          <StripCardTagPager
+            left={(margin + guiW - 14) * scale}
+            top={buttonTop}
+            dir={1}
+            scale={scale}
+            disabled={clamped + 1 >= pages}
+            onClick={() => setPage(clamped + 1)}
+          />
+        </>
+      )}
+      <StripCardTagCopy
+        left={(margin + 24) * scale}
+        top={margin * scale}
+        scale={scale}
+        value={recipe.id}
+      />
+    </div>
+  );
+}

package/src/components/cards/strip-card/member-cell.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import Link from 'next/link';
+import { EntryIcon } from '@terrafirmagreg-team/game/components/entry/icon';
+import {
+  EntryTooltip,
+  type EntryTooltipLevel,
+} from '@terrafirmagreg-team/game/components/entry/tooltip';
+import { stackDisplayName } from '@terrafirmagreg-team/game/lib/entry/display';
+import { entryHref } from '@terrafirmagreg-team/game/lib/entry/href';
+import { loadStackDisplay } from '@terrafirmagreg-team/game/lib/entry/tooltip';
+import { favoriteHover } from '@terrafirmagreg-team/recipe/lib/favorite-hover';
+import { useAsyncResult } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import type { ReferenceKind } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import type { RecipeGridMember } from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
+
+const MEMBER_KIND: Record<string, ReferenceKind> = {
+  fluid: 'fluid',
+  entity: 'entity',
+  block: 'block',
+};
+
+export function StripCardMember({
+  member,
+  dataset,
+  lang,
+  langMap,
+  nav,
+  x,
+  y,
+  pitch,
+  interactive = true,
+  tooltipLevel,
+}: {
+  member: RecipeGridMember;
+  dataset: string;
+  lang: string;
+  langMap?: Record<string, string>;
+  nav?: Pick<RecipeHrefOpts, 'tab' | 'search'>;
+  x: number;
+  y: number;
+  pitch: number;
+  interactive?: boolean;
+  tooltipLevel?: EntryTooltipLevel;
+}) {
+  const kind = MEMBER_KIND[member.kind ?? 'item'] ?? 'item';
+  const name = stackDisplayName(langMap, member.id);
+  const checkKind = kind === 'item' || kind === 'fluid' ? kind : undefined;
+  const stackPeek =
+    dataset && checkKind
+      ? loadStackDisplay.peek(dataset, member.id, checkKind)
+      : undefined;
+  const stackRes = useAsyncResult(
+    dataset && checkKind && stackPeek === undefined
+      ? async () => ({
+          key: member.id,
+          display: await loadStackDisplay(dataset, member.id, checkKind),
+        })
+      : false,
+    [dataset, member.id, checkKind, stackPeek],
+  );
+  const missingItem =
+    checkKind !== undefined &&
+    stackPeek === undefined &&
+    !stackRes.pending &&
+    stackRes.value?.key === member.id &&
+    stackRes.value.display === undefined;
+  const badges: string[] = [];
+  if (member.amount !== undefined && member.amount > 1) {
+    badges.push(`×${member.amount}`);
+  }
+  if (member.chance !== undefined && member.chance < 1) {
+    const percent = member.chance <= 1 ? member.chance * 100 : member.chance;
+    badges.push(`${Number(percent.toFixed(1))}%`);
+  }
+  const inner = (
+    <>
+      <span className="pointer-events-none flex size-full items-center justify-center">
+        <EntryIcon
+          id={member.id}
+          kind={kind}
+          dataset={dataset}
+          size={Math.max(8, pitch - 4)}
+          missing="placeholder"
+        />
+      </span>
+      {badges.length > 0 && (
+        <span
+          className="font-mc pointer-events-none absolute right-0 bottom-0 leading-none text-white [text-shadow:1px_1px_0_var(--color-mc-arrow)]"
+          style={{ fontSize: pitch / 4 }}
+        >
+          {badges.join(' ')}
+        </span>
+      )}
+    </>
+  );
+  const faceStyle = { left: x, top: y, width: pitch, height: pitch };
+  const hover = {
+    onMouseEnter: () => {
+      favoriteHover.slot =
+        kind === 'item' || kind === 'fluid'
+          ? {
+              kind: 'stack' as const,
+              id: member.id,
+              ...(kind === 'fluid' ? { ref: 'fluid' as const } : {}),
+            }
+          : undefined;
+    },
+    onMouseLeave: () => {
+      favoriteHover.slot = undefined;
+    },
+  };
+  if (!interactive) {
+    return (
+      <EntryTooltip
+        dataset={dataset}
+        id={member.id}
+        name={name}
+        kind={kind === 'fluid' ? 'fluid' : kind === 'entity' ? 'entity' : 'item'}
+        lang={lang}
+        langMap={langMap}
+        level={tooltipLevel}
+      >
+        <span
+          {...hover}
+          aria-label={name}
+          className="absolute block"
+          style={faceStyle}
+        >
+          {inner}
+        </span>
+      </EntryTooltip>
+    );
+  }
+  return (
+    <EntryTooltip
+      dataset={dataset}
+      id={member.id}
+      name={name}
+      kind={kind === 'fluid' ? 'fluid' : kind === 'entity' ? 'entity' : 'item'}
+      lang={lang}
+      langMap={langMap}
+      level={tooltipLevel}
+    >
+      <span
+        {...hover}
+        className="absolute block"
+        style={faceStyle}
+        aria-label={name}
+      >
+        {!missingItem ? (
+          <Link
+            href={entryHref(dataset, lang, { kind, id: member.id }, nav)}
+            className="absolute inset-0 block"
+          >
+            {inner}
+          </Link>
+        ) : (
+          <span className="absolute inset-0 block">{inner}</span>
+        )}
+      </span>
+    </EntryTooltip>
+  );
+}

package/src/components/cards/strip-card/sprite.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import type { CSSProperties } from 'react';
+
+export function StripCardSprite({
+  src,
+  pos,
+  width,
+  height,
+  className,
+  style,
+}: {
+  src: string;
+
+  pos: string;
+  width?: number;
+  height?: number;
+  className?: string;
+  style?: CSSProperties;
+}) {
+  return (
+    <div
+      className={className}
+      style={{
+        ...(width !== undefined ? { width } : {}),
+        ...(height !== undefined ? { height } : {}),
+        backgroundImage: `url(${src})`,
+        backgroundPosition: pos,
+        backgroundRepeat: 'no-repeat',
+        imageRendering: 'pixelated',
+        ...style,
+      }}
+    />
+  );
+}

package/src/components/mdx/recipe.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { PagedCard } from '@terrafirmagreg-team/recipe/components/cards/paged-card';
+import { FitCard } from '@terrafirmagreg-team/recipe/components/cards/fit-card';
+import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+import { useAsyncResult } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { useSectionCatalog } from '@terrafirmagreg-team/kit/hooks/use-catalog';
+import { useCurrentDataset } from '@terrafirmagreg-team/kit/hooks/use-current-dataset';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
+import { useRecipeIndex } from '@terrafirmagreg-team/recipe/hooks/use-index';
+import {
+  loadRecipeChromeClient,
+  recipeItemName,
+  resolveRecipeRows,
+} from '@terrafirmagreg-team/recipe/lib/client-index';
+import { loadClientRecipe } from '@terrafirmagreg-team/recipe/lib/client/recipe';
+import { clientDumpLang } from '@terrafirmagreg-team/game/lib/dump/client/dump';
+import { recipeTitle } from '@terrafirmagreg-team/recipe/lib/data/parse';
+import { recipeImageUrl } from '@terrafirmagreg-team/game/lib/dump/assets/urls';
+import { recipeCardImageUrl, recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+
+export function Recipe({
+  id,
+  dataset: datasetProp,
+  maxH = 360,
+}: {
+  id?: string;
+  dataset?: string;
+  maxH?: number;
+}) {
+  const catalog = useSectionCatalog();
+  const current = useCurrentDataset(catalog.recipe);
+  const dataset = datasetProp ?? current ?? catalog.recipe[0]?.id;
+  const lang = useResolvedLang();
+  const { index, indexLoading } = useRecipeIndex(dataset ?? '', lang);
+  const [failed, setFailed] = useState(false);
+
+  const { value, pending } = useAsyncResult(
+    index && dataset && id
+      ? async () => {
+          const [row] = await resolveRecipeRows(dataset, index, [id]);
+          if (!row) return { missing: true as const };
+          const [recipe, chrome, langMap] = await Promise.all([
+            loadClientRecipe(dataset, row.id, row.bucket),
+            loadRecipeChromeClient(dataset, lang),
+            clientDumpLang(dataset, lang),
+          ]);
+          const title = recipe
+            ? recipeTitle(recipe, langMap)
+            : recipeItemName(chrome.names, lang, row.out[0] ?? row.id);
+          const src =
+            (recipe ? recipeImageUrl(dataset, recipe) : undefined) ??
+            (row.image
+              ? recipeImageUrl(dataset, {
+                  modId: row.id.split(':', 1)[0],
+                  image: row.image,
+                })
+              : undefined) ??
+            recipeCardImageUrl(dataset, row.id);
+          return { row, recipe, langMap, title, src };
+        }
+      : undefined,
+    [dataset, index, id, lang],
+  );
+
+  if (!dataset || !id) return null;
+  const resolvedRow = value && 'row' in value ? value.row : undefined;
+  const type = resolvedRow ? index?.types[resolvedRow.type] : undefined;
+  const href = recipeHref(dataset, lang, { id, type });
+  if (!value && (pending || indexLoading)) {
+    return <Skeleton className="not-prose h-40 w-full max-w-112 rounded-md" />;
+  }
+  if (!value || 'missing' in value || !value.recipe) {
+    return (
+      <Link href={href} className="not-prose text-primary underline">
+        {id}
+      </Link>
+    );
+  }
+  const { row, recipe, langMap, title, src } = value;
+  return (
+    <Link
+      href={href}
+      className="not-prose mb-4 block w-fit max-w-full rounded-md"
+      title={title}
+    >
+      {src && !failed ? (
+        <FitCard w={recipe.w ?? row.d?.w ?? 0}>
+          <PagedCard
+            recipe={recipe}
+            dataset={dataset}
+            lang={lang}
+            langMap={langMap}
+            title={title}
+            src={src}
+            onFail={() => setFailed(true)}
+            naturalW={row.d?.w}
+            naturalH={row.d?.h}
+            maxH={Number(maxH) || 360}
+            interactive
+          />
+        </FitCard>
+      ) : (
+        <EmptyState variant="missing">{title}</EmptyState>
+      )}
+    </Link>
+  );
+}

package/src/components/tool-list.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { TreeContextProvider } from '@terrafirmagreg-team/ui/components/layouts/tree-context';
+import {
+  LeftSidebarPortal,
+  LeftSidebarTree,
+} from '@terrafirmagreg-team/ui/components/layouts/left-sidebar';
+import { Input } from '@terrafirmagreg-team/ui/components/ui/input';
+import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
+
+export function ToolList({
+  tree,
+  loaded,
+  query,
+  onQuery,
+  searchLabel,
+  emptyLabel,
+}: {
+  tree: PageTree.Root;
+  loaded: boolean;
+  query: string;
+  onQuery: (query: string) => void;
+  searchLabel: string;
+  emptyLabel: string;
+}) {
+  return (
+    <LeftSidebarPortal>
+      <div className="space-y-2 p-2">
+        <Input
+          type="search"
+          name="tool-search"
+          autoComplete="off"
+          aria-label={searchLabel}
+          placeholder={searchLabel}
+          value={query}
+          onChange={(event) => onQuery(event.target.value)}
+        />
+        <TreeContextProvider tree={tree}>
+          <LeftSidebarTree />
+        </TreeContextProvider>
+        {loaded && !tree.children.length ? (
+          <EmptyState>{emptyLabel}</EmptyState>
+        ) : null}
+      </div>
+    </LeftSidebarPortal>
+  );
+}