@terrafirmagreg-team/recipe 0.0.0-stage → 0.1.0

package/src/components/cards/card/text.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { McText } from '@terrafirmagreg-team/game/components/entry/mc-text';
+import { dumpTextString } from '@terrafirmagreg-team/game/lib/dump/assets/lang/names';
+import type { RecipeTextWidget } from '@terrafirmagreg-team/recipe/lib/data/dto';
+
+export function CardText({
+  widget,
+  offX = 0,
+  offY = 0,
+  scale,
+  langMap,
+}: {
+  widget: RecipeTextWidget;
+  offX?: number;
+  offY?: number;
+  scale: number;
+  langMap?: Record<string, string>;
+}) {
+  const content = widget.component
+    ? dumpTextString(langMap ?? {}, widget.component) || widget.text
+    : widget.text;
+  if (!content) return null;
+  const rgb = widget.color === undefined ? 0xffffff : widget.color & 0xffffff;
+  const shadowRgb = ((rgb & 0xfcfcfc) >> 2) & 0xffffff;
+  const shadowed = widget.shadow === true;
+  return (
+    <span
+      className="font-mc pointer-events-none absolute leading-none whitespace-pre"
+      style={{
+        left: (widget.x + offX) * scale,
+        top: (widget.y + offY) * scale,
+        fontSize: Math.max(6, (widget.h - 1 || 8) * scale),
+        color: `#${rgb.toString(16).padStart(6, '0')}`,
+        ...(shadowed
+          ? {
+              textShadow: `${scale}px ${scale}px 0 #${shadowRgb.toString(16).padStart(6, '0')}`,
+            }
+          : {}),
+      }}
+    >
+      <McText text={content} />
+    </span>
+  );
+}

package/src/components/cards/card/tips.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { McText } from '@terrafirmagreg-team/game/components/entry/mc-text';
+import { sceneEntityHit } from '@terrafirmagreg-team/recipe/components/cards/card/scene';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+import type {
+  RecipeDecorWidget,
+  RecipeWidget,
+} from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { RecipeSceneEntity } from '@terrafirmagreg-team/recipe/lib/data/scene';
+
+export function CardWidgetTips({
+  widgets,
+  entities,
+  margin,
+  scale,
+}: {
+  widgets: RecipeWidget[];
+  entities: RecipeSceneEntity[];
+  margin: number;
+  scale: number;
+}) {
+  return widgets
+    .filter(
+      (widget): widget is RecipeDecorWidget =>
+        widget.type === 'widget' && (widget.tooltip?.length ?? 0) > 0,
+    )
+    .map((widget, index) => {
+      const panel = sceneEntityHit(entities, widget);
+      const hit = panel
+        ? {
+            left: (widget.x + widget.w - 10 + margin) * scale,
+            top: (widget.y + 1 + margin) * scale,
+            width: 9 * scale,
+            height: 9 * scale,
+          }
+        : {
+            left: (widget.x + margin) * scale,
+            top: (widget.y + margin) * scale,
+            width: widget.w * scale,
+            height: widget.h * scale,
+          };
+      return (
+        <Tooltip key={`tip:${index}`}>
+          <TooltipTrigger
+            render={<span className="absolute block" style={hit} />}
+          />
+          <TooltipContent className="flex-col items-start gap-0.5 p-3 text-sm whitespace-pre-wrap">
+            {(widget.tooltip ?? []).map((line, lineIndex) => (
+              <p key={lineIndex}>
+                <McText text={line} />
+              </p>
+            ))}
+          </TooltipContent>
+        </Tooltip>
+      );
+    });
+}

package/src/components/cards/default-item.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Pin, PinOff } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { ContextMenuItem } from '@terrafirmagreg-team/ui/components/ui/context-menu';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import {
+  readRecipeDefaults,
+  subscribeRecipeDefaults,
+  writeRecipeDefault,
+} from '@terrafirmagreg-team/recipe/lib/calc/defaults';
+export function RecipeDefaultMenuItem({
+  dataset,
+  materialId,
+  recipeId,
+}: {
+  dataset: string;
+  materialId?: string;
+  recipeId: string;
+}) {
+  const t = useTranslations();
+  const [pinned, setPinned] = useState(
+    () => materialId != null && readRecipeDefaults(dataset)[materialId] === recipeId,
+  );
+  useEffect(
+    () =>
+      subscribeRecipeDefaults(() => {
+        if (materialId != null) {
+          setPinned(readRecipeDefaults(dataset)[materialId] === recipeId);
+        }
+      }),
+    [dataset, materialId, recipeId],
+  );
+  if (!materialId) return null;
+  return (
+    <ContextMenuItem
+      onClick={() => writeRecipeDefault(dataset, materialId, pinned ? null : recipeId)}
+    >
+      {pinned ? <PinOff /> : <Pin />}
+      {t(pinned ? 'recipe.calc.clear.default' : 'recipe.calc.set_default')}
+    </ContextMenuItem>
+  );
+}

package/src/components/cards/fit-card.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useRef, type ReactNode } from 'react';
+import { useElementSize } from '@terrafirmagreg-team/ui/hooks/use-element-size';
+
+export function FitCard({
+  w,
+  children,
+}: {
+  w: number;
+  children: ReactNode;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { w: avail } = useElementSize(ref);
+  const fit = w > 0 && avail > 0 ? Math.min(1, avail / w) : 1;
+  return (
+    <div ref={ref} className="w-full">
+      <div
+        className="mx-auto w-fit"
+        style={fit < 1 ? { zoom: fit } : undefined}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/cards/glare-filter.tsx

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'react';
+
+export const RECIPE_GLARE_FILTER_ID = 'recipe-glare-cut';
+
+export const recipeGlareFilter: CSSProperties = {
+  filter: `url(#${RECIPE_GLARE_FILTER_ID})`,
+};
+
+export function RecipeGlareFilter() {
+  return (
+    <svg aria-hidden className="absolute size-0 overflow-hidden">
+      <defs>
+        <filter
+          id={RECIPE_GLARE_FILTER_ID}
+          colorInterpolationFilters="sRGB"
+        >
+          <feColorMatrix
+            type="matrix"
+            values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -2.946 -9.912 -1.001 13.44 0"
+          />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0.03 1" />
+          </feComponentTransfer>
+        </filter>
+      </defs>
+    </svg>
+  );
+}

package/src/components/cards/paged-card.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { useMemo, useRef, useState, type ComponentProps } from 'react';
+import { RecipeCard } from './card';
+import { SlotHitbox } from './slot-hitbox';
+import { StripCard } from './strip-card';
+import { recipeGlareFilter } from './glare-filter';
+import { recipeGrid } from '@terrafirmagreg-team/recipe/lib/data/grid';
+import { recipeSlots } from '@terrafirmagreg-team/recipe/lib/recipe-slots';
+import { PagerArrow } from '@terrafirmagreg-team/ui/components/blocks/page/pager';
+import { useInView } from '@terrafirmagreg-team/ui/hooks/use-in-view';
+import { useSwipe } from '@terrafirmagreg-team/ui/hooks/use-swipe';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+const FALLBACK_PITCH = 18;
+
+type RecipeCardProps = ComponentProps<typeof RecipeCard>;
+
+export function PagedCard({
+  maxH,
+  ...props
+}: RecipeCardProps & { maxH?: number }) {
+  const { recipe, naturalH, naturalW, src, title, onFail } = props;
+  const scale = recipe.scale ?? 2;
+  const margin = recipe.margin ?? 0;
+  const natural = naturalH ?? 0;
+  const rootRef = useRef<HTMLDivElement>(null);
+  const observedInView = useInView(rootRef);
+  const inView = props.eager || observedInView;
+  const [page, setPage] = useState(0);
+
+  const [imgReady, setImgReady] = useState(false);
+  const [prevSrc, setPrevSrc] = useState(src);
+  if (prevSrc !== src) {
+    setPrevSrc(src);
+    setImgReady(false);
+  }
+
+  const slots = useMemo(() => recipeSlots(recipe), [recipe]);
+  const visibleH = maxH ? Math.floor(maxH) : 0;
+  const overflow = visibleH > 0 && natural > visibleH;
+
+  const pinTop = useMemo(() => {
+    if (!overflow) return 0;
+    const tops = slots
+      .filter((slot) => slot.role === 'output')
+      .map((slot) => ((slot.y ?? 0) + margin) * scale);
+    const min = tops.length ? Math.min(...tops) : 0;
+    return min > 0 && min < visibleH ? min : 0;
+  }, [slots, scale, margin, overflow, visibleH]);
+
+  const rows = useMemo(
+    () =>
+      [
+        ...new Set(
+          slots
+            .map((slot) => ((slot.y ?? 0) + margin) * scale)
+            .filter((y) => y >= pinTop),
+        ),
+      ].sort((a, b) => a - b),
+    [slots, scale, margin, pinTop],
+  );
+
+  const pitchPx = useMemo(() => {
+    let min = 0;
+    for (let i = 1; i < rows.length; i += 1) {
+      const delta = rows[i] - rows[i - 1];
+      if (delta > 0 && (min === 0 || delta < min)) min = delta;
+    }
+    return min || FALLBACK_PITCH * scale;
+  }, [rows, scale]);
+
+  const capH = Math.max(margin, 1) * scale;
+  const memberH = overflow
+    ? Math.max(
+        pitchPx,
+        Math.floor((visibleH - pinTop - capH) / pitchPx) * pitchPx,
+      )
+    : 0;
+
+  const starts = useMemo(() => {
+    if (!overflow) return [0];
+    const maxStart = Math.max(pinTop, natural - memberH - capH);
+    const stride = Math.max(pitchPx, Math.floor(memberH / pitchPx) * pitchPx);
+    const out = [pinTop];
+    let start = pinTop;
+    while (start < maxStart) {
+      const row = rows.find((y) => y > start && y + pitchPx > start + memberH);
+      const next = Math.min(row ?? start + stride, maxStart);
+      if (next <= start) break;
+      out.push(next);
+      start = next;
+    }
+    return out;
+  }, [overflow, natural, memberH, capH, pinTop, rows, pitchPx]);
+
+  const pages = starts.length;
+  const clamped = Math.min(page, pages - 1);
+  const swipe = useSwipe((dir) =>
+    setPage((p) => Math.max(0, Math.min(pages - 1, p + dir))),
+  );
+
+  if (recipeGrid(recipe.properties)) {
+    return <StripCard {...props} />;
+  }
+  if (!overflow) return <RecipeCard {...props} />;
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn(
+        'relative w-fit overflow-hidden rounded-sm',
+        imgReady && 'bg-mc-panel',
+      )}
+      style={{ height: pinTop + memberH + capH }}
+      {...swipe}
+      onWheel={(event) => {
+        if (event.deltaY === 0) return;
+        const next = clamped + (event.deltaY > 0 ? 1 : -1);
+        if (next < 0 || next >= pages) return;
+        event.stopPropagation();
+        setPage(next);
+      }}
+    >
+      {pinTop > 0 && (
+        <div
+          className="relative w-fit overflow-hidden"
+          style={{ height: pinTop }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element -- dump asset */}
+          <img
+            src={src}
+            alt={title}
+            className="block"
+            width={naturalW}
+            height={natural}
+            loading="lazy"
+            decoding="async"
+            onError={onFail}
+            style={recipeGlareFilter}
+          />
+          {inView && !props.frameOnly
+            ? slots
+                .filter(
+                  (widget) => ((widget.y ?? 0) + margin) * scale < pinTop,
+                )
+                .map((widget, index) => (
+                  <SlotHitbox
+                    key={`${widget.id}:${index}`}
+                    widget={widget}
+                    dataset={props.dataset}
+                    lang={props.lang}
+                    langMap={props.langMap}
+                    nav={props.nav}
+                    scale={scale}
+                    margin={margin}
+                    interactive={props.interactive}
+                    tooltipLevel={props.slotTooltip}
+                  />
+                ))
+            : null}
+        </div>
+      )}
+      <div className="overflow-hidden" style={{ height: memberH }}>
+        <div style={{ transform: `translateY(${-starts[clamped]}px)` }}>
+          <RecipeCard {...props} />
+        </div>
+      </div>
+      <div className="overflow-hidden" style={{ height: capH }}>
+        {/* eslint-disable-next-line @next/next/no-img-element -- dump asset */}
+        <img
+          src={src}
+          alt=""
+          aria-hidden
+          className="block"
+          width={naturalW}
+          height={natural}
+          style={{
+            transform: `translateY(${-(natural - capH)}px)`,
+            ...recipeGlareFilter,
+          }}
+          loading="lazy"
+          decoding="async"
+          onLoad={() => setImgReady(true)}
+        />
+      </div>
+      {pages > 1 && (
+        <div
+          className="absolute right-1.5 top-1.5 flex items-center gap-0.5 rounded-lg bg-background/80 px-0.5 py-0.5"
+          onClick={(event) => event.stopPropagation()}
+        >
+          <PagerArrow
+            dir={-1}
+            variant="ghost"
+            size="icon-xs"
+            disabled={clamped <= 0}
+            onClick={() =>
+              setPage((p) => Math.max(0, Math.min(p, pages - 1) - 1))
+            }
+          />
+          <span
+            className={cn(
+              'px-0.5 text-2xs tabular-nums text-muted-foreground',
+            )}
+          >
+            {clamped + 1}/{pages}
+          </span>
+          <PagerArrow
+            dir={1}
+            variant="ghost"
+            size="icon-xs"
+            disabled={clamped + 1 >= pages}
+            onClick={() =>
+              setPage((p) => Math.min(pages - 1, Math.min(p, pages - 1) + 1))
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/cards/slot-hitbox.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import Link from 'next/link';
+import { ENTRY_CYCLE_MS, EntryIcon } from '@terrafirmagreg-team/game/components/entry/icon';
+import {
+  EntryTooltip,
+  type EntryTooltipLevel,
+} from '@terrafirmagreg-team/game/components/entry/tooltip';
+import { useCycleIndex } from '@terrafirmagreg-team/ui/hooks/use-cycle-index';
+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 { RecipeSlotWidget } from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
+
+const SCALE = 2;
+
+const TAG_REF_KIND: Record<string, ReferenceKind> = {
+  block: 'blockTag',
+  fluid: 'fluidTag',
+  entity: 'entityTag',
+};
+
+function widgetRefKind(widget: RecipeSlotWidget): ReferenceKind {
+  if (widget.kind === 'tag') {
+    return TAG_REF_KIND[widget.tagKind ?? 'item'] ?? 'itemTag';
+  }
+  return widget.kind === 'fluid' ? 'fluid' : 'item';
+}
+
+function stackFavoriteProps(widget: RecipeSlotWidget) {
+  const refKind = widgetRefKind(widget);
+  const stackable =
+    (refKind === 'item' || refKind === 'fluid') &&
+    !widget.id.startsWith('#');
+  return {
+    onMouseEnter: () => {
+      favoriteHover.slot = stackable
+        ? {
+            kind: 'stack',
+            id: widget.id,
+            ...(refKind === 'fluid' ? { ref: 'fluid' as const } : {}),
+          }
+        : undefined;
+    },
+    onMouseLeave: () => {
+      favoriteHover.slot = undefined;
+    },
+  };
+}
+
+export function SlotHitbox({
+  widget,
+  dataset,
+  lang,
+  langMap,
+  nav,
+  scale = SCALE,
+  margin = 0,
+  interactive = true,
+  tooltipLevel,
+}: {
+  widget: RecipeSlotWidget;
+  dataset: string;
+  lang: string;
+  langMap?: Record<string, string>;
+  nav?: Pick<RecipeHrefOpts, 'tab' | 'search'>;
+  scale?: number;
+  margin?: number;
+  interactive?: boolean;
+
+  tooltipLevel?: EntryTooltipLevel;
+}) {
+  const name = stackDisplayName(langMap, widget.id);
+  const kind =
+    widget.kind === 'fluid' || widget.kind === 'tag' ? widget.kind : 'item';
+  const checkKind = kind === 'tag' || !interactive ? undefined : kind;
+  const stackPeek =
+    dataset && checkKind && widget.id
+      ? loadStackDisplay.peek(dataset, widget.id, checkKind)
+      : undefined;
+  const stackRes = useAsyncResult(
+    dataset && checkKind && widget.id && stackPeek === undefined
+      ? async () => ({
+          key: widget.id,
+          display: await loadStackDisplay(dataset, widget.id, checkKind),
+        })
+      : false,
+    [dataset, widget.id, checkKind, stackPeek],
+  );
+  const missingItem =
+    checkKind !== undefined &&
+    stackPeek === undefined &&
+    !stackRes.pending &&
+    stackRes.value?.key === widget.id &&
+    stackRes.value.display === undefined;
+  const iconSize = Math.max(8, Math.min(widget.w - 2, 16) * scale);
+  const hover = stackFavoriteProps(widget);
+  const alternatives = widget.alternatives;
+  const [altIndex] = useCycleIndex(alternatives?.length ?? 0, {
+    enabled: interactive !== false && (alternatives?.length ?? 0) > 1,
+    intervalMs: ENTRY_CYCLE_MS,
+  });
+  const iconId =
+    alternatives && alternatives.length > 0
+      ? (alternatives[altIndex] ?? alternatives[0]!)
+      : widget.id;
+  const iconKind = alternatives?.length
+    ? widget.tagKind === 'fluid' || widget.tagKind === 'block'
+      ? widget.tagKind
+      : undefined
+    : widgetRefKind(widget);
+  const icon = (
+    <span className="pointer-events-none flex size-full items-center justify-center">
+      {alternatives && alternatives.length > 1 ? (
+        <span
+          aria-hidden
+          className="absolute bg-mc-inset"
+          style={{ inset: scale }}
+        />
+      ) : null}
+      <EntryIcon
+        id={iconId}
+        kind={iconKind}
+        dataset={dataset}
+        size={iconSize}
+        missing="placeholder"
+      />
+    </span>
+  );
+  const pos = {
+    left: (widget.x + margin) * scale,
+    top: (widget.y + margin) * scale,
+    width: widget.w * scale,
+    height: widget.h * scale,
+  };
+  if (!interactive) {
+
+    if (tooltipLevel === 'none') {
+      return (
+        <span
+          aria-label={name}
+          className="absolute block"
+          style={pos}
+        >
+          {icon}
+        </span>
+      );
+    }
+    return (
+      <EntryTooltip
+        dataset={dataset}
+        id={widget.id}
+        name={name}
+        kind={kind === 'tag' ? 'item' : kind}
+        lang={lang}
+        langMap={langMap}
+        level={tooltipLevel}
+      >
+        <span
+          {...hover}
+          aria-label={name}
+          className="absolute block"
+          style={pos}
+        >
+          {icon}
+        </span>
+      </EntryTooltip>
+    );
+  }
+  return (
+    <EntryTooltip
+      dataset={dataset}
+      id={widget.id}
+      name={name}
+      kind={kind === 'tag' ? 'item' : kind}
+      lang={lang}
+      langMap={langMap}
+      level={tooltipLevel}
+    >
+      <span
+        {...hover}
+        className="absolute block"
+        style={pos}
+        aria-label={name}
+      >
+        {!missingItem ? (
+          <Link
+            href={entryHref(
+              dataset,
+              lang,
+              {
+                kind: widgetRefKind(widget),
+                id: widget.id.startsWith('#') ? widget.id.slice(1) : widget.id,
+              },
+              nav,
+            )}
+            className="absolute inset-0 block"
+          >
+            {icon}
+          </Link>
+        ) : (
+          <span className="absolute inset-0 block">{icon}</span>
+        )}
+      </span>
+    </EntryTooltip>
+  );
+}