@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

package/src/components/views/calc/member-picker.tsx

@@ -0,0 +1,120 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@terrafirmagreg-team/ui/components/ui/command';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { stackDisplayName } from '@terrafirmagreg-team/game/lib/entry/display';
+import type { ReferenceKind } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+
+export function CalcMemberList({
+  tagId,
+  members,
+  selected,
+  memberKind,
+  dataset,
+  lang,
+  langMap,
+  onSelect,
+}: {
+  tagId: string;
+  members: string[];
+  selected?: string;
+  memberKind?: ReferenceKind;
+  dataset: DatasetRef;
+  lang: string;
+  langMap?: Record<string, string>;
+  onSelect: (tagId: string, memberId: string) => void;
+}) {
+  const t = useTranslations();
+  return (
+    <Command label={tagId}>
+      <CommandInput placeholder={t('Search member…', { note: 'recipe.calc.member.search' })} />
+      <CommandList>
+        <CommandEmpty>{t('No results found', { note: 'recipe.search_empty' })}</CommandEmpty>
+        <CommandGroup>
+          {members.map((id) => (
+            <CommandItem
+              key={id}
+              value={id}
+              keywords={[stackDisplayName(langMap, id), id]}
+              data-checked={id === selected}
+              onSelect={() => onSelect(tagId, id)}
+            >
+              <Entry
+                id={id}
+                kind={memberKind}
+                dataset={dataset}
+                lang={lang}
+                langMap={langMap}
+                size="sm"
+                labeled
+                href={false}
+                tooltip="adaptive"
+              />
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}
+
+export function CalcMemberPicker({
+  open,
+  onOpenChange,
+  tagId,
+  members,
+  selected,
+  memberKind,
+  dataset,
+  lang,
+  langMap,
+  onSelect,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  tagId: string;
+  members: string[];
+  selected?: string;
+  memberKind?: ReferenceKind;
+  dataset: DatasetRef;
+  lang: string;
+  langMap?: Record<string, string>;
+  onSelect: (tagId: string, memberId: string) => void;
+}) {
+  const t = useTranslations();
+  return (
+    <CommandDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t('Choose tag member', { note: 'recipe.calc.member.title' })}
+      description={tagId}
+      className="sm:max-w-md"
+      commandProps={{ label: tagId }}
+    >
+      <CalcMemberList
+        tagId={tagId}
+        members={members}
+        selected={selected}
+        memberKind={memberKind}
+        dataset={dataset}
+        lang={lang}
+        langMap={langMap}
+        onSelect={(id, member) => {
+          onSelect(id, member);
+          onOpenChange(false);
+        }}
+      />
+    </CommandDialog>
+  );
+}
+

package/src/components/views/calc/node-card/actions.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Check,
+  Copy,
+  ExternalLink,
+  Layers,
+  X,
+} from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { CalcFlowNode } from '@terrafirmagreg-team/recipe/lib/calc/flow';
+
+export const CORNER_BUTTON =
+  'nodrag flex size-5 shrink-0 items-center justify-center rounded-sm border border-border bg-background text-muted-foreground shadow-sm hover:text-foreground';
+
+export function NodeActions({
+  data,
+  nodeId,
+}: {
+  data: CalcFlowNode['data'];
+  nodeId: string;
+}) {
+  const { node, onRemoveCard, onOpenItem, onRequestPicker } = data;
+  const t = useTranslations();
+  const [copied, setCopied] = useState(false);
+  const canPick = node.recipe != null || node.availableRecipes.length > 0;
+
+  return (
+    <span className="pointer-events-auto absolute -top-2 right-3 z-30 flex gap-0.5">
+      {canPick ? (
+        <Hint label={t('Pick a recipe', { note: 'recipe.calc.pick.title' })} side="top">
+          <button
+            type="button"
+            aria-label={t('Pick a recipe', { note: 'recipe.calc.pick.title' })}
+            onClick={() => onRequestPicker(node)}
+            className={CORNER_BUTTON}
+          >
+            <Layers className="size-2.5" />
+          </button>
+        </Hint>
+      ) : null}
+      <Hint label={t('Copy id', { note: 'recipe.calc.copy_id' })} side="top">
+        <button
+          type="button"
+          aria-label={t('Copy id', { note: 'recipe.calc.copy_id' })}
+          onClick={() => {
+            void navigator.clipboard.writeText(node.materialId);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+          }}
+          className={CORNER_BUTTON}
+        >
+          {copied ? (
+            <Check className="size-2.5 text-emerald-500" />
+          ) : (
+            <Copy className="size-2.5" />
+          )}
+        </button>
+      </Hint>
+      <Hint label={t('Open item page', { note: 'recipe.calc.open.item' })} side="top">
+        <button
+          type="button"
+          aria-label={t('Open item page', { note: 'recipe.calc.open.item' })}
+          onClick={() => onOpenItem(node.materialId, node.kind)}
+          className={CORNER_BUTTON}
+        >
+          <ExternalLink className="size-2.5" />
+        </button>
+      </Hint>
+      <Hint label={t('Remove card', { note: 'recipe.calc.remove.title' })} side="top">
+        <button
+          type="button"
+          aria-label={t('Remove card', { note: 'recipe.calc.remove.title' })}
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            event.stopPropagation();
+            onRemoveCard(nodeId);
+          }}
+          className={cn(CORNER_BUTTON, 'hover:text-destructive')}
+        >
+          <X className="size-3" />
+        </button>
+      </Hint>
+    </span>
+  );
+}
+

package/src/components/views/calc/node-card/badges.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Mountain, Repeat } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { formatCount } from '@terrafirmagreg-team/ui/lib/utils/format';
+import type { CalcFlowNode } from '@terrafirmagreg-team/recipe/lib/calc/flow';
+
+const CORNER_CHIP =
+  'flex shrink-0 items-center justify-center gap-0.5 rounded-sm border border-border bg-background px-0.5 py-px text-[9px] leading-none text-muted-foreground';
+
+export function NodeBadges({
+  node,
+}: {
+  node: CalcFlowNode['data']['node'];
+}) {
+  const t = useTranslations();
+  const chips: ReactNode[] = [];
+  if (node.cycle) {
+    chips.push(
+      <Hint key="cycle" label={t('Recipe cycle: the recipe needs itself upstream', { note: 'recipe.calc.hint.cycle' })} side="top">
+        <span
+          className={cn(CORNER_CHIP, 'border-red-500/40 text-red-500')}
+        >
+          <Repeat className="size-2.5" />
+        </span>
+      </Hint>,
+    );
+  }
+  if (!node.recipe && !node.availableRecipes.length && !node.loading) {
+    chips.push(
+      <Hint key="source" label={t('No recipe: taken from remainders or gathered externally', { note: 'recipe.calc.hint.source' })} side="top">
+        <span className={CORNER_CHIP}>
+          <Mountain className="size-2.5" />
+        </span>
+      </Hint>,
+    );
+  }
+  if (node.remaining < 0) {
+    chips.push(
+      <Hint key="over" label={t('Overdrawn: more is wired out than produced', { note: 'recipe.calc.overdrawn' })} side="top">
+        <span
+          className={cn(CORNER_CHIP, 'border-red-500/40 text-red-500')}
+        >
+          {formatCount(node.remaining)}
+        </span>
+      </Hint>,
+    );
+  }
+  if (!chips.length) return null;
+  return (
+    <span className="pointer-events-auto absolute right-3 -bottom-1.5 z-30 flex flex-col-reverse items-end gap-0.5">
+      {chips}
+    </span>
+  );
+}
+

package/src/components/views/calc/node-card/chips.tsx

@@ -0,0 +1,187 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import type { ReactNode } from 'react';
+import {
+  ChevronDown,
+  ListFilter,
+  Shapes,
+} from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { formatCount } from '@terrafirmagreg-team/ui/lib/utils/format';
+import type {
+  CalcFlowData,
+  CalcFlowNode,
+} from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import type { RecipeCategory } from '@terrafirmagreg-team/recipe/types';
+
+type CalcNode = CalcFlowNode['data']['node'];
+
+export function CycleChip({
+  onOpen,
+  openLabel,
+  title,
+  accent,
+  className,
+  centerClassName,
+  children,
+}: {
+  onOpen?: () => void;
+  openLabel?: string;
+  title?: string;
+  accent?: boolean;
+  className?: string;
+  centerClassName?: string;
+  children: ReactNode;
+}) {
+  const centerCls = cn(
+    'flex min-w-0 flex-1 items-center justify-center gap-1 px-0.5 py-0.5 text-[10px] text-muted-foreground outline-none',
+    onOpen && 'hover:text-foreground',
+    accent && 'text-sky-500 hover:text-sky-400',
+    centerClassName,
+  );
+  return (
+    <span
+      className={cn(
+        'flex min-w-0 items-center overflow-hidden rounded-md border bg-background',
+        accent ? 'border-sky-500/30' : 'border-border',
+        className,
+      )}
+    >
+      {onOpen ? (
+        <Hint label={title} side="top">
+          <button
+            type="button"
+            aria-label={openLabel}
+            onClick={onOpen}
+            className={centerCls}
+          >
+            {children}
+          </button>
+        </Hint>
+      ) : (
+        <Hint label={title} side="top">
+          <span className={centerCls}>{children}</span>
+        </Hint>
+      )}
+    </span>
+  );
+}
+
+export function NodeChips({
+  node,
+  mini,
+  name,
+  category,
+  hasAlternatives,
+  dataset,
+  lang,
+  langMap,
+  onRequestPicker,
+  onRequestMemberPicker,
+}: {
+  node: CalcNode;
+  mini: boolean;
+  name: string;
+  category: RecipeCategory | undefined;
+  hasAlternatives: boolean;
+  dataset: DatasetRef;
+  lang: string;
+  langMap?: Record<string, string>;
+  onRequestPicker: CalcFlowData['onRequestPicker'];
+  onRequestMemberPicker: CalcFlowData['onRequestMemberPicker'];
+}) {
+  const t = useTranslations();
+  const members = node.members;
+  const loadingChip =
+    node.loading && !node.recipe ? (
+      <Skeleton className="h-5 min-w-0 flex-1 rounded-md" />
+    ) : null;
+  return (
+    <div
+      className={cn(
+        'relative z-20 flex min-w-0 items-center gap-1 overflow-hidden',
+        mini && 'h-5 w-full',
+      )}
+    >
+      {loadingChip}
+      {!node.recipe && !loadingChip ? (
+        <CycleChip
+          className="min-w-0 flex-1 border-dashed opacity-60"
+          title={t('No recipe: taken from remainders or gathered externally', { note: 'recipe.calc.hint.source' })}
+          centerClassName="py-0.5"
+        >
+          <ListFilter className="size-3 shrink-0" />
+        </CycleChip>
+      ) : null}
+      {node.recipe ? (
+        <CycleChip
+          className="min-w-0 flex-1"
+          title={node.recipe.recipeId}
+          openLabel={t('Choose recipe', { note: 'recipe.calc.select' })}
+          onOpen={() => onRequestPicker(node)}
+        >
+          {category?.icon ? (
+            <Entry
+              dataset={dataset}
+              lang={lang}
+              langMap={langMap}
+              reference={category.icon}
+              name={node.recipe.category}
+              size="sm"
+              href={false}
+              tooltip={false}
+              missing="hide"
+            />
+          ) : (
+            <Shapes
+              className={mini ? 'size-3.5 shrink-0' : 'size-4'}
+            />
+          )}
+          {hasAlternatives ? (
+            <ChevronDown
+              className={mini ? 'size-2.5 shrink-0' : 'size-3 shrink-0'}
+            />
+          ) : null}
+        </CycleChip>
+      ) : null}
+      {node.tagId && members && members.length > 1 ? (
+        <CycleChip
+          accent
+          className="shrink-0"
+          title={
+            mini
+              ? `${node.tagId} ×${formatCount(members.length)}`
+              : node.tagId
+          }
+          openLabel={t('Choose tag member', { note: 'recipe.calc.member.title' })}
+          onOpen={() => onRequestMemberPicker(node)}
+          centerClassName="px-0.5"
+        >
+          <Entry
+            id={node.materialId}
+            kind={node.kind}
+            dataset={dataset}
+            lang={lang}
+            langMap={langMap}
+            name={name}
+            size="sm"
+            href={false}
+            tooltip={false}
+          />
+          {!mini ? (
+            <span className="shrink-0 tabular-nums">
+              ×{formatCount(members.length)}
+            </span>
+          ) : null}
+          <ChevronDown className="size-2.5 shrink-0" />
+        </CycleChip>
+      ) : null}
+    </div>
+  );
+}
+

package/src/components/views/calc/node-card/far.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import {
+  type NodeProps,
+} from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import { ListFilter } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { StackCount } from '@terrafirmagreg-team/game/components/entry/stack-count';
+import { PagedCard } from '@terrafirmagreg-team/recipe/components/cards/paged-card';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+import { useCalcSession } from '@terrafirmagreg-team/recipe/hooks/calc/use-session';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import {
+  recipeCardImageUrl,
+  recipeImageUrl,
+} from '@terrafirmagreg-team/recipe/lib/links';
+import { recipeTitle } from '@terrafirmagreg-team/recipe/lib/data/parse';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { CalcFlowNode } from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import { CORNER_BUTTON } from './actions';
+import { CardHandles } from './ports';
+
+export function CalcHiddenCard({ data }: NodeProps<CalcFlowNode>) {
+  return (
+    <div data-calc-card className="relative h-full w-full">
+      <CardHandles node={data.node} interactive={false} />
+      <Skeleton className="size-full rounded-md" />
+    </div>
+  );
+}
+
+export function CalcFarCard({ data, selected }: NodeProps<CalcFlowNode>) {
+  const { node, dataset, mode, recipeBody, onRequestPicker } = data;
+  const t = useTranslations();
+  const session = useCalcSession();
+  const lang = session?.lang ?? 'en_us';
+  const names = session?.names ?? {};
+  const langMap = session?.langMap;
+  const name = recipeItemName(names, lang, node.materialId);
+  const body = node.recipe ? recipeBody(node.recipe.recipeId) : undefined;
+  const src = body
+    ? (recipeImageUrl(dataset, body) ??
+      recipeCardImageUrl(dataset, body.id))
+    : undefined;
+  const pickable =
+    node.recipe != null || node.availableRecipes.length > 0;
+  const stateCls = cn(
+    node.cycle && 'border-red-500/70',
+    !node.cycle && node.recipe && 'border-primary/60',
+    !node.recipe && 'border-dashed border-muted-foreground/50',
+    selected && 'ring-2 ring-primary/70',
+  );
+  return (
+    <div
+      data-calc-card
+      className={cn(
+        'relative flex h-full w-full flex-col justify-center gap-0.5 rounded-md border bg-card px-2 py-1 text-xs',
+        stateCls,
+      )}
+    >
+      <CardHandles node={node} interactive={false} />
+      <div className="flex min-w-0 items-center gap-1.5">
+        <span className="size-4 shrink-0 rounded-sm border border-border bg-muted/40" />
+        <span className="min-w-0 flex-1 truncate">
+          <StackCount count={node.produced} /> {name}
+        </span>
+      </div>
+      {mode === 'detailed' && body && src ? (
+        <div className="nodrag pointer-events-none mx-auto mt-1 select-none">
+          <PagedCard
+            recipe={body}
+            dataset={dataset}
+            lang={lang}
+            langMap={langMap}
+            title={recipeTitle(body, langMap ?? {})}
+            src={src}
+            naturalW={body.w}
+            naturalH={body.h}
+            interactive={false}
+            slotTooltip="none"
+            frameOnly
+            onFail={() => {}}
+          />
+        </div>
+      ) : null}
+      {pickable ? (
+        <button
+          type="button"
+          aria-label={t('Choose recipe', { note: 'recipe.calc.select' })}
+          onClick={(event) => {
+            event.stopPropagation();
+            onRequestPicker(node);
+          }}
+          className={cn(CORNER_BUTTON, 'absolute -top-2 right-1')}
+        >
+          <ListFilter className="size-2.5" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export function CalcDotCard({ data, selected }: NodeProps<CalcFlowNode>) {
+  const { node } = data;
+  const stateCls = cn(
+    node.cycle && 'border-red-500/70',
+    !node.cycle && node.recipe && 'border-primary/60',
+    !node.recipe && 'border-dashed border-muted-foreground/50',
+    selected && 'ring-2 ring-primary/70',
+  );
+  return (
+    <div
+      data-calc-card
+      className={cn(
+        'h-full w-full overflow-hidden rounded-md border bg-card',
+        stateCls,
+      )}
+    >
+      <CardHandles node={node} interactive={false} />
+    </div>
+  );
+}
+