@terrafirmagreg-team/recipe 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,65 @@
 {
   "name": "@terrafirmagreg-team/recipe",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    "./components/*": [
+      "./src/components/*.tsx",
+      "./src/components/*.ts",
+      "./src/components/*/index.tsx",
+      "./src/components/*/index.ts"
+    ],
+    "./hooks/*": [
+      "./src/hooks/*.ts",
+      "./src/hooks/*.tsx",
+      "./src/hooks/*/index.ts",
+      "./src/hooks/*/index.tsx"
+    ],
+    "./lib/*": [
+      "./src/lib/*.ts",
+      "./src/lib/*.tsx",
+      "./src/lib/*/index.ts",
+      "./src/lib/*/index.tsx"
+    ],
+    "./types/*": "./src/types/*.ts",
+    "./types": "./src/types/index.ts",
+    "./styles.css": "./styles.css",
+    "./locales": "./src/locales.ts"
+  },
+  "dependencies": {
+    "cn": "^0.5.0",
+    "comlink": "^4.4.2",
+    "fflate": "0.8.3",
+    "fumadocs-core": "16.17.8",
+    "lucide-react": "^1.63.0",
+    "pathfinding": "0.4.18",
+    "potpack": "^2.1.0",
+    "@terrafirmagreg-team/game": "0.1.0",
+    "@terrafirmagreg-team/translate": "0.1.0",
+    "@terrafirmagreg-team/ui": "0.1.0",
+    "@terrafirmagreg-team/kit": "0.1.0"
+  },
+  "peerDependencies": {
+    "next": ">=15",
+    "react": ">=19"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.5",
+    "@types/pathfinding": "^0.1.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TerraFirmaGreg-Team/Web-Foundation.git",
+    "directory": "packages/recipe"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "styles",
+    "styles.css"
+  ]
 }

package/src/components/button-copy.tsx

@@ -0,0 +1,42 @@
+'use client';
+import { type ComponentProps, type ReactNode } from 'react';
+import { useCopyButton } from '@terrafirmagreg-team/ui/hooks/use-copy-button';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { Button } from '@terrafirmagreg-team/ui/components/ui/button';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+
+export function ButtonCopy({
+  value,
+  copy,
+  copied,
+  className,
+  title,
+  ...props
+}: Omit<ComponentProps<typeof Button>, 'value' | 'onCopy' | 'children'> & {
+  value: string;
+  copy: ReactNode;
+  copied: ReactNode;
+}) {
+  const { checked: done, onClick } = useCopyButton(() =>
+    navigator.clipboard.writeText(value),
+  );
+  const button = (
+    <Button
+      variant="ghost"
+      size="xs"
+      className={cn(
+        'shrink-0 text-2xs text-muted-foreground hover:text-foreground',
+        className,
+      )}
+      onClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick();
+      }}
+      {...props}
+    >
+      {done ? copied : copy}
+    </Button>
+  );
+  return title ? <Hint label={title}>{button}</Hint> : button;
+}

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

@@ -0,0 +1,212 @@
+'use client';
+
+import { useMemo, 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 {
+  cardStripGeo,
+  countCoveredText,
+  textInStrip,
+} from '@terrafirmagreg-team/recipe/components/cards/card/model';
+import { CardText } from '@terrafirmagreg-team/recipe/components/cards/card/text';
+import { CardSceneOverlay } from '@terrafirmagreg-team/recipe/components/cards/card/scene';
+import { CardWidgetTips } from '@terrafirmagreg-team/recipe/components/cards/card/tips';
+import { CardStrip } from '@terrafirmagreg-team/recipe/components/cards/card/strip';
+import { recipeSlots } from '@terrafirmagreg-team/recipe/lib/recipe-slots';
+import {
+  recipeMultiblock,
+  recipeSceneEntities,
+} from '@terrafirmagreg-team/recipe/lib/data/scene';
+import { dumpRelPublicUrl } from '@terrafirmagreg-team/game/lib/dump/paths';
+import { useDumpLocation } from '@terrafirmagreg-team/game/hooks/use-dump-location';
+import { useInView } from '@terrafirmagreg-team/ui/hooks/use-in-view';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { GlbEmbedViewer } from '@terrafirmagreg-team/ui/components/blocks/media/glb/viewer';
+import type { EntryTooltipLevel } from '@terrafirmagreg-team/game/components/entry/tooltip';
+import type {
+  Recipe,
+  RecipeTextWidget,
+} from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
+
+const SCALE = 2;
+
+export function RecipeCard({
+  recipe,
+  dataset,
+  lang,
+  langMap,
+  nav,
+  title,
+  src,
+  onFail,
+  naturalW,
+  naturalH,
+  interactive,
+  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;
+  useDumpLocation(dataset);
+  const margin = recipe.margin ?? 0;
+  const cardW = naturalW ?? recipe.w ?? 0;
+  const cardH = naturalH ?? recipe.h ?? 0;
+  const rootRef = useRef<HTMLDivElement>(null);
+  const observedInView = useInView(rootRef);
+  const inView = eager || observedInView;
+  const slots = useMemo(() => recipeSlots(recipe), [recipe]);
+  const contentGuiW = cardW / scale - margin * 2;
+  const innerBottomGui = cardH / scale - margin;
+  const strip = cardStripGeo(slots, contentGuiW, innerBottomGui, margin);
+  const plainSlots = strip.overflow
+    ? slots.filter((slot) => slot.role !== 'renderOnly')
+    : slots;
+  const entities = recipeSceneEntities(recipe.properties);
+  const textWidgets = recipe.widgets.filter(
+    (widget): widget is RecipeTextWidget => widget.type === 'text',
+  );
+  const stripTexts = textWidgets.filter(
+    (widget) => textInStrip(widget, strip) && !countCoveredText(widget, strip.slots),
+  );
+  const multiblock = recipeMultiblock(recipe.properties);
+  const partsTop = multiblock?.parts.length
+    ? Math.min(...multiblock.parts.map((part) => part.y)) * scale
+    : undefined;
+  const sceneHeight = Math.max(
+    (partsTop ?? cardH - margin * scale) - margin * scale,
+    0,
+  );
+  const glbUrl = multiblock?.glb
+    ? dumpRelPublicUrl(dataset, multiblock.glb)
+    : undefined;
+
+  const [imgReady, setImgReady] = useState(false);
+  const [prevImgSrc, setPrevImgSrc] = useState(src);
+  if (prevImgSrc !== src) {
+    setPrevImgSrc(src);
+    setImgReady(false);
+  }
+  return (
+    <div
+      ref={rootRef}
+      className={cn(
+        'relative w-fit overflow-hidden rounded-sm',
+        imgReady && 'bg-mc-panel',
+      )}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={src}
+        alt={title}
+        className="block"
+        width={naturalW}
+        height={naturalH}
+        loading="lazy"
+        decoding="async"
+        draggable={false}
+        onError={onFail}
+        onLoad={() => setImgReady(true)}
+        style={recipeGlareFilter}
+      />
+      {inView && interactive && glbUrl ? (
+        <div
+          className="absolute"
+          style={{
+            left: margin * scale,
+            top: margin * scale,
+            width: cardW - margin * 2 * scale,
+            height: sceneHeight,
+          }}
+        >
+          <GlbEmbedViewer bare src={glbUrl} title={title} />
+        </div>
+      ) : null}
+      {inView && !frameOnly
+        ? entities.map((entity, index) => (
+            <CardSceneOverlay
+              key={`${entity.id}:${index}`}
+              entity={entity}
+              dataset={dataset}
+              lang={lang}
+              langMap={langMap}
+              scale={scale}
+              margin={margin}
+              interactive={interactive}
+            />
+          ))
+        : null}
+      {inView && !frameOnly
+        ? plainSlots.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 && interactive ? (
+        <CardWidgetTips
+          widgets={recipe.widgets}
+          entities={entities}
+          margin={margin}
+          scale={scale}
+        />
+      ) : null}
+      {inView && strip.overflow && !frameOnly ? (
+        <CardStrip
+          geo={strip}
+          texts={stripTexts}
+          margin={margin}
+          scale={scale}
+          contentGuiW={contentGuiW}
+          dataset={dataset}
+          lang={lang}
+          langMap={langMap}
+          nav={nav}
+          interactive={interactive}
+          tooltipLevel={slotTooltip}
+        />
+      ) : null}
+      {inView
+        ? textWidgets.map((widget, index) =>
+            textInStrip(widget, strip) ? null : (
+              <CardText
+                key={`${widget.x}:${widget.y}:${index}`}
+                widget={widget}
+                offX={margin}
+                offY={margin}
+                scale={scale}
+                langMap={langMap}
+              />
+            ),
+          )
+        : null}
+    </div>
+  );
+}

package/src/components/cards/card/model.ts

@@ -0,0 +1,64 @@
+import type {
+  RecipeSlotWidget,
+  RecipeTextWidget,
+} from '@terrafirmagreg-team/recipe/lib/data/dto';
+
+export type CardStripGeo = {
+  slots: RecipeSlotWidget[];
+  top: number;
+  bottom: number;
+  right: number;
+  overflow: boolean;
+  patchBottom: number;
+  barTop: number;
+};
+
+export function cardStripGeo(
+  slots: RecipeSlotWidget[],
+  contentGuiW: number,
+  innerBottomGui: number,
+  margin: number,
+): CardStripGeo {
+  const stripSlots = slots.filter((slot) => slot.role === 'renderOnly');
+  const top = stripSlots.length
+    ? Math.min(...stripSlots.map((slot) => slot.y))
+    : 0;
+  const bottom = stripSlots.length
+    ? Math.max(...stripSlots.map((slot) => slot.y + slot.h))
+    : 0;
+  const right = stripSlots.length
+    ? Math.max(...stripSlots.map((slot) => slot.x + slot.w))
+    : 0;
+  const overflow = right > contentGuiW + 1;
+  const patchBottom = Math.min(
+    bottom + margin + 16,
+    Math.max(innerBottomGui - 1, 0),
+  );
+  const barTop = Math.min(bottom + margin + 1, Math.max(innerBottomGui - 5, 0));
+  return { slots: stripSlots, top, bottom, right, overflow, patchBottom, barTop };
+}
+
+export function countCoveredText(
+  widget: RecipeTextWidget,
+  stripSlots: RecipeSlotWidget[],
+): boolean {
+  return stripSlots.some(
+    (slot) =>
+      slot.count !== undefined &&
+      String(slot.count) === widget.text &&
+      widget.x + widget.w > slot.x &&
+      widget.x < slot.x + slot.w,
+  );
+}
+
+export function textInStrip(
+  widget: RecipeTextWidget,
+  geo: CardStripGeo,
+): boolean {
+  return (
+    geo.overflow &&
+    widget.y + widget.h > geo.top &&
+    widget.y < geo.bottom &&
+    widget.x < geo.right
+  );
+}

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

@@ -0,0 +1,105 @@
+'use client';
+
+import { EntryTooltip } from '@terrafirmagreg-team/game/components/entry/tooltip';
+import { fetchEntityTexture } from '@terrafirmagreg-team/game/lib/entry/icon-load';
+import { stackDisplayName } from '@terrafirmagreg-team/game/lib/dump/assets/lang/names';
+import { useAsyncResult } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import type {
+  RecipeSceneEntity,
+  RecipeSceneRect,
+} from '@terrafirmagreg-team/recipe/lib/data/scene';
+import type { RecipeDecorWidget } from '@terrafirmagreg-team/recipe/lib/data/dto';
+
+export function sceneEntityHit(
+  entities: RecipeSceneEntity[],
+  widget: RecipeDecorWidget,
+): boolean {
+  return entities.some((entity) => {
+    const region: RecipeSceneRect = entity.clip ?? entity;
+    return (
+      widget.x < region.x + region.w &&
+      widget.x + widget.w > region.x &&
+      widget.y < region.y + region.h &&
+      widget.y + widget.h > region.y
+    );
+  });
+}
+
+export function CardSceneOverlay({
+  entity,
+  dataset,
+  lang,
+  langMap,
+  scale,
+  margin,
+  interactive = true,
+}: {
+  entity: RecipeSceneEntity;
+  dataset: string;
+  lang: string;
+  langMap?: Record<string, string>;
+  scale: number;
+  margin: number;
+  interactive?: boolean;
+}) {
+  const baked = entity.baked === true;
+  const tex = useAsyncResult(
+    !baked && dataset
+      ? async () => ({
+          key: entity.id,
+          url: await fetchEntityTexture(dataset, entity.id),
+        })
+      : false,
+    [baked, dataset, entity.id],
+  );
+  const url =
+    tex.value && tex.value.key === entity.id ? tex.value.url : undefined;
+  const missing = !baked && !tex.pending && url == null;
+  const region = entity.clip ?? entity;
+  const body = (
+    <span
+      className="absolute block"
+      style={{
+        left: (region.x + margin) * scale,
+        top: (region.y + margin) * scale,
+        width: (region.w || 16) * scale,
+        height: (region.h || 16) * scale,
+      }}
+    >
+      {url ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={url}
+          alt=""
+          draggable={false}
+          className="pointer-events-none absolute inset-0 m-auto h-full object-contain"
+          style={{ imageRendering: 'pixelated' }}
+          loading="lazy"
+          decoding="async"
+        />
+      ) : null}
+      {missing ? (
+        <span
+          aria-hidden
+          className="font-mc pointer-events-none absolute inset-0 flex items-center justify-center text-muted-foreground"
+          style={{ fontSize: 8 * scale }}
+        >
+          ?
+        </span>
+      ) : null}
+    </span>
+  );
+  if (!interactive) return body;
+  return (
+    <EntryTooltip
+      dataset={dataset}
+      id={entity.id}
+      name={stackDisplayName(langMap, entity.id, 'entity')}
+      kind="entity"
+      lang={lang}
+      langMap={langMap}
+    >
+      {body}
+    </EntryTooltip>
+  );
+}

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

@@ -0,0 +1,196 @@
+'use client';
+
+import { Fragment, useRef, useState } from 'react';
+import { SlotHitbox } from '@terrafirmagreg-team/recipe/components/cards/slot-hitbox';
+import { CardText } from '@terrafirmagreg-team/recipe/components/cards/card/text';
+import { formatCount } from '@terrafirmagreg-team/ui/lib/utils/format';
+import type { CardStripGeo } from '@terrafirmagreg-team/recipe/components/cards/card/model';
+import type { EntryTooltipLevel } from '@terrafirmagreg-team/game/components/entry/tooltip';
+import type { RecipeTextWidget } from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
+
+export function CardStrip({
+  geo,
+  texts,
+  margin,
+  scale,
+  contentGuiW,
+  dataset,
+  lang,
+  langMap,
+  nav,
+  interactive,
+  tooltipLevel,
+}: {
+  geo: CardStripGeo;
+  texts: RecipeTextWidget[];
+  margin: number;
+  scale: number;
+  contentGuiW: number;
+  dataset: string;
+  lang: string;
+  langMap?: Record<string, string>;
+  nav?: Pick<RecipeHrefOpts, 'tab' | 'search'>;
+  interactive?: boolean;
+  tooltipLevel?: EntryTooltipLevel;
+}) {
+  const stripRef = useRef<HTMLDivElement>(null);
+  const barDrag = useRef<{ x: number; left: number } | null>(null);
+  const [stripScroll, setStripScroll] = useState(0);
+  const trackW = Math.max((contentGuiW - 8) * scale, 0);
+  const totalW = (geo.right + 2) * scale;
+  const maxScroll = Math.max(totalW - contentGuiW * scale, 1);
+  const thumbW = Math.max(
+    16,
+    trackW * Math.min(1, (contentGuiW * scale) / totalW),
+  );
+  const thumbX =
+    (stripScroll / maxScroll) * Math.max(trackW - thumbW, 0);
+  return (
+    <>
+      <div
+        aria-hidden
+        className="absolute bg-mc-panel"
+        style={{
+          left: (margin + 3) * scale,
+          top: (geo.top + margin - 1) * scale,
+          width: (contentGuiW - 6) * scale,
+          height: Math.max(geo.patchBottom - (geo.top + margin - 1), 0) * scale,
+        }}
+      />
+      <div
+        ref={stripRef}
+        className="recipe-strip absolute overflow-x-auto overflow-y-hidden select-none"
+        style={{
+          left: margin * scale,
+          top: (geo.top + margin) * scale,
+          width: contentGuiW * scale,
+          height: (geo.bottom - geo.top + 2) * scale,
+          touchAction: 'pan-y',
+        }}
+        onScroll={(event) => setStripScroll(event.currentTarget.scrollLeft)}
+        onWheel={(event) => {
+          const el = stripRef.current;
+          if (!el || event.deltaY === 0) return;
+          event.stopPropagation();
+          el.scrollLeft += event.deltaY > 0 ? 40 : -40;
+        }}
+        onDragStart={(event) => event.preventDefault()}
+      >
+        <div
+          className="relative h-full"
+          style={{
+            width: totalW,
+            transform: `translateY(${-geo.top * scale}px)`,
+          }}
+        >
+          {geo.slots.map((widget, index) => (
+            <Fragment key={`${widget.id}:${index}`}>
+              <span
+                aria-hidden
+                className="absolute bg-mc-edge"
+                style={{
+                  left: widget.x * scale,
+                  top: widget.y * scale,
+                  width: widget.w * scale,
+                  height: widget.h * scale,
+                }}
+              />
+              <SlotHitbox
+                widget={widget}
+                dataset={dataset}
+                lang={lang}
+                langMap={langMap}
+                nav={nav}
+                scale={scale}
+                margin={0}
+                interactive={interactive}
+                tooltipLevel={tooltipLevel}
+              />
+              {widget.count !== undefined && widget.count > 1 ? (
+                <span
+                  aria-hidden
+                  className="font-mc pointer-events-none absolute leading-none text-white"
+                  style={{
+                    left: widget.x * scale,
+                    top: (widget.y + widget.h - 8) * scale,
+                    width: widget.w * scale,
+                    paddingRight: scale,
+                    fontSize: 7 * scale,
+                    textAlign: 'right',
+                    textShadow: `${scale}px ${scale}px 0 var(--color-mc-arrow)`,
+                  }}
+                >
+                  {formatCount(widget.count)}
+                </span>
+              ) : null}
+            </Fragment>
+          ))}
+          {texts.map((widget, index) => (
+            <CardText
+              key={`${widget.x}:${widget.y}:${index}`}
+              widget={widget}
+              scale={scale}
+              langMap={langMap}
+            />
+          ))}
+        </div>
+      </div>
+      <div
+        className="absolute"
+        style={{
+          left: (margin + 3) * scale,
+          top: geo.barTop * scale,
+          width: (contentGuiW - 8) * scale,
+          height: 4 * scale,
+          background: 'var(--color-mc-inset)',
+          borderTop: '1px solid var(--color-mc-bevel-dark)',
+          borderBottom: '1px solid var(--color-mc-bevel-light)',
+        }}
+        onPointerDown={(event) => {
+          const el = stripRef.current;
+          if (!el || event.button !== 0) return;
+          if (event.target !== event.currentTarget) return;
+          event.preventDefault();
+          const thumbRange = Math.max(trackW - thumbW, 1);
+          const trackX =
+            event.clientX - event.currentTarget.getBoundingClientRect().left;
+          el.scrollLeft =
+            ((trackX - thumbW / 2) / thumbRange) * maxScroll;
+        }}
+      >
+        <div
+          className="absolute cursor-ew-resize"
+          style={{
+            left: thumbX,
+            top: 0,
+            bottom: 0,
+            width: thumbW,
+            background: 'var(--color-mc-paper)',
+            boxShadow: `inset 0 ${scale}px 0 var(--color-mc-shadow), inset 0 -${scale}px 0 var(--color-mc-bevel-dark)`,
+            touchAction: 'none',
+          }}
+          onPointerDown={(event) => {
+            const el = stripRef.current;
+            if (!el || event.button !== 0) return;
+            event.preventDefault();
+            event.stopPropagation();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            barDrag.current = { x: event.clientX, left: el.scrollLeft };
+          }}
+          onPointerMove={(event) => {
+            const drag = barDrag.current;
+            const el = stripRef.current;
+            if (!drag || !el) return;
+            const thumbRange = Math.max(trackW - thumbW, 1);
+            el.scrollLeft =
+              drag.left +
+              ((event.clientX - drag.x) / thumbRange) * maxScroll;
+          }}
+          onPointerUp={() => (barDrag.current = null)}
+          onPointerCancel={() => (barDrag.current = null)}
+        />
+      </div>
+    </>
+  );
+}