@terrafirmagreg-team/recipe 0.1.0 → 1.2.0

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

@@ -1,8 +1,6 @@
 'use client';
 
 import {
-  Handle,
-  Position,
   type NodeProps,
 } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
 import { ListFilter } from 'lucide-react';
@@ -20,40 +18,19 @@ 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>) {
-  const { direction } = data;
-  const srcPos = direction === 'horizontal' ? Position.Left : Position.Top;
-  const tgtPos =
-    direction === 'horizontal' ? Position.Right : Position.Bottom;
   return (
     <div data-calc-card className="relative h-full w-full">
-      <Handle
-        type="source"
-        position={srcPos}
-        isConnectable={false}
-        className="calc-port"
-      />
-      <Handle
-        type="target"
-        position={tgtPos}
-        isConnectable={false}
-        className="calc-port"
-      />
+      <CardHandles node={data.node} interactive={false} />
       <Skeleton className="size-full rounded-md" />
     </div>
   );
 }
 
 export function CalcFarCard({ data, selected }: NodeProps<CalcFlowNode>) {
-  const {
-    node,
-    dataset,
-    mode,
-    direction,
-    recipeBody,
-    onRequestPicker,
-  } = data;
+  const { node, dataset, mode, recipeBody, onRequestPicker } = data;
   const t = useTranslations();
   const session = useCalcSession();
   const lang = session?.lang ?? 'en_us';
@@ -69,14 +46,10 @@ export function CalcFarCard({ data, selected }: NodeProps<CalcFlowNode>) {
     node.recipe != null || node.availableRecipes.length > 0;
   const stateCls = cn(
     node.cycle && 'border-red-500/70',
-    (node.catalyst || node.collapsed) &&
-      'border-dashed border-muted-foreground/50',
-    !node.cycle && !node.catalyst && node.recipe && 'border-primary/60',
+    !node.cycle && node.recipe && 'border-primary/60',
+    !node.recipe && 'border-dashed border-muted-foreground/50',
     selected && 'ring-2 ring-primary/70',
   );
-  const srcPos = direction === 'horizontal' ? Position.Left : Position.Top;
-  const tgtPos =
-    direction === 'horizontal' ? Position.Right : Position.Bottom;
   return (
     <div
       data-calc-card
@@ -85,22 +58,11 @@ export function CalcFarCard({ data, selected }: NodeProps<CalcFlowNode>) {
         stateCls,
       )}
     >
-      <Handle
-        type="source"
-        position={srcPos}
-        isConnectable={false}
-        className="calc-port"
-      />
-      <Handle
-        type="target"
-        position={tgtPos}
-        isConnectable={false}
-        className="calc-port"
-      />
+      <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.amount} /> {name}
+          <StackCount count={node.produced} /> {name}
         </span>
       </div>
       {mode === 'detailed' && body && src ? (
@@ -124,7 +86,7 @@ export function CalcFarCard({ data, selected }: NodeProps<CalcFlowNode>) {
       {pickable ? (
         <button
           type="button"
-          aria-label={t('recipe.calc.select')}
+          aria-label={t('Choose recipe', { note: 'recipe.calc.select' })}
           onClick={(event) => {
             event.stopPropagation();
             onRequestPicker(node);
@@ -139,17 +101,13 @@ export function CalcFarCard({ data, selected }: NodeProps<CalcFlowNode>) {
 }
 
 export function CalcDotCard({ data, selected }: NodeProps<CalcFlowNode>) {
-  const { node, direction } = data;
+  const { node } = data;
   const stateCls = cn(
     node.cycle && 'border-red-500/70',
-    (node.catalyst || node.collapsed) &&
-      'border-dashed border-muted-foreground/50',
-    !node.cycle && !node.catalyst && node.recipe && 'border-primary/60',
+    !node.cycle && node.recipe && 'border-primary/60',
+    !node.recipe && 'border-dashed border-muted-foreground/50',
     selected && 'ring-2 ring-primary/70',
   );
-  const srcPos = direction === 'horizontal' ? Position.Left : Position.Top;
-  const tgtPos =
-    direction === 'horizontal' ? Position.Right : Position.Bottom;
   return (
     <div
       data-calc-card
@@ -158,18 +116,8 @@ export function CalcDotCard({ data, selected }: NodeProps<CalcFlowNode>) {
         stateCls,
       )}
     >
-      <Handle
-        type="source"
-        position={srcPos}
-        isConnectable={false}
-        className="calc-port"
-      />
-      <Handle
-        type="target"
-        position={tgtPos}
-        isConnectable={false}
-        className="calc-port"
-      />
+      <CardHandles node={node} interactive={false} />
     </div>
   );
 }
+

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

@@ -1,9 +1,9 @@
 'use client';
 
 import { memo, useEffect, useState } from 'react';
+import { Minus, Plus } from 'lucide-react';
 import {
-  Handle,
-  Position,
+  useUpdateNodeInternals,
   type NodeProps,
 } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
@@ -30,10 +30,12 @@ import {
 import { recipeTitle } from '@terrafirmagreg-team/recipe/lib/data/parse';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import { CALC_NODE_W } from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import { railSpans } from '@terrafirmagreg-team/recipe/lib/calc/ports';
 import type { CalcFlowNode } from '@terrafirmagreg-team/recipe/lib/calc/flow';
 import { NodeBadges } from './badges';
-import { CycleChip, NodeChips } from './chips';
+import { NodeChips } from './chips';
 import { NodeActions } from './actions';
+import { PortRailIn, PortRailOut } from './port-rails';
 import { NodeContextMenu, NodeHoverContent } from './menu';
 
 export const CalcNodeCardFull = memo(function CalcNodeCardFull({
@@ -45,10 +47,10 @@ export const CalcNodeCardFull = memo(function CalcNodeCardFull({
     node,
     dataset,
     mode,
-    direction,
     recipeBody,
     onRequestPicker,
     onRequestMemberPicker,
+    onCrafts,
   } = data;
   const t = useTranslations();
   const session = useCalcSession();
@@ -103,72 +105,56 @@ export const CalcNodeCardFull = memo(function CalcNodeCardFull({
   }, [staged, bodyReady]);
   const cardOn = card && (!staged || bodyReady);
 
+  useEffect(
+    () => () => {
+      railSpans.delete(id);
+    },
+    [id],
+  );
+
   const skeleton =
     mode === 'detailed' && node.recipe != null && !cardOn;
   const stateCls = cn(
     node.cycle && 'border-red-500/70',
-    (node.catalyst || node.collapsed) &&
-      'border-dashed border-muted-foreground/50',
-    !node.cycle && !node.catalyst && node.recipe && 'border-primary/60',
+    !node.cycle && node.recipe && 'border-primary/60',
+    !node.recipe && 'border-dashed border-muted-foreground/50',
     selected && 'ring-2 ring-primary/70',
   );
 
-  const srcPos = direction === 'horizontal' ? Position.Left : Position.Top;
-  const tgtPos = direction === 'horizontal' ? Position.Right : Position.Bottom;
-
   const interactive = tier === 'near';
-  const cardBody = (
+  const updateNodeInternals = useUpdateNodeInternals();
+  useEffect(() => {
+    updateNodeInternals(id);
+  }, [
+    id,
+    updateNodeInternals,
+    mode,
+    interactive,
+    node.recipe?.recipeId,
+    node.inputs.length,
+    node.outputs.length,
+  ]);
+  const innerContent = (
     <div
-      data-calc-card
       className={cn(
-        'relative flex h-full w-full flex-col justify-center gap-0.5 text-xs outline-none',
-        'rounded-md border bg-card',
-        mode === 'mini' ? 'items-center px-1.5 py-1' : 'px-2 py-1',
-        stateCls,
+        'flex min-w-0 flex-1 flex-col justify-center gap-0.5 px-2 py-1',
+        mode === 'mini' ? 'items-center px-1.5' : '',
       )}
     >
-      <Handle
-        type="source"
-        position={srcPos}
-        isConnectable={false}
-        className="calc-port"
-      />
-      <Handle
-        type="target"
-        position={tgtPos}
-        isConnectable={false}
-        className="calc-port"
-      />
       {mode === 'mini' ? (
-        <div className="flex w-full flex-col items-center gap-0.5">
-          <CycleChip
-            className="w-full justify-center"
-            title={
-              node.recipe || recipes.length
-                ? t('recipe.calc.select')
-                : name
-            }
-            openLabel={t('recipe.calc.select')}
-            onOpen={
-              node.recipe || recipes.length
-                ? () => onRequestPicker(node)
-                : undefined
-            }
-            centerClassName="py-0.5"
-          >
-            <Entry
-              id={node.materialId}
-              kind={node.kind}
-              dataset={dataset}
-              lang={lang}
-              langMap={langMap}
-              name={name}
-              size="lg"
-              href={false}
-              tooltip={false}
-              badge={<StackCount count={node.amount} />}
-            />
-          </CycleChip>
+        <div className="mx-3 flex w-auto flex-col items-center gap-0.5">
+          <Entry
+            id={node.materialId}
+            kind={node.kind}
+            dataset={dataset}
+            lang={lang}
+            langMap={langMap}
+            name={name}
+            size="lg"
+            href={false}
+            tooltip="adaptive"
+            badge={<StackCount count={node.produced} />}
+          />
           <span className="w-full truncate px-0.5 text-center text-[9px] leading-tight text-muted-foreground">
             {name}
           </span>
@@ -187,7 +173,7 @@ export const CalcNodeCardFull = memo(function CalcNodeCardFull({
         </div>
       ) : (
         <>
-          <div className="flex min-w-0 items-center gap-1.5">
+          <div className="mx-1 flex min-w-0 items-center gap-1.5">
             <Entry
               id={node.materialId}
               kind={node.kind}
@@ -197,23 +183,57 @@ export const CalcNodeCardFull = memo(function CalcNodeCardFull({
               size="lg"
               labeled
               href={false}
-              tooltip={false}
-              badge={<StackCount count={node.amount} />}
+              tooltip="adaptive"
+              badge={<StackCount count={node.produced} />}
               className="min-w-0 flex-1 justify-start truncate"
             />
+            <NodeChips
+              node={node}
+              mini={false}
+              name={name}
+              category={category}
+              hasAlternatives={hasAlternatives}
+              dataset={dataset}
+              lang={lang}
+              langMap={langMap}
+              onRequestPicker={onRequestPicker}
+              onRequestMemberPicker={onRequestMemberPicker}
+            />
+          </div>
+          <div className="mx-1 flex min-w-0 items-center gap-1">
+            {interactive ? (
+              <span className="nodrag ml-auto flex shrink-0 items-center gap-0.5">
+                <button
+                  type="button"
+                  aria-label={t('Fewer crafts', { note: 'recipe.calc.crafts.down' })}
+                  className="grid size-4 place-items-center rounded border border-border bg-background text-muted-foreground hover:text-foreground"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onCrafts(id, Math.max(1, node.crafts - 1));
+                  }}
+                >
+                  <Minus className="size-2.5" />
+                </button>
+                <span
+                  className="min-w-6 text-center tabular-nums"
+                  title={t('Crafts', { note: 'recipe.calc.crafts.title' })}
+                >
+                  {node.crafts}
+                </span>
+                <button
+                  type="button"
+                  aria-label={t('More crafts', { note: 'recipe.calc.crafts.up' })}
+                  className="grid size-4 place-items-center rounded border border-border bg-background text-muted-foreground hover:text-foreground"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onCrafts(id, node.crafts + 1);
+                  }}
+                >
+                  <Plus className="size-2.5" />
+                </button>
+              </span>
+            ) : null}
           </div>
-          <NodeChips
-            node={node}
-            mini={false}
-            name={name}
-            category={category}
-            hasAlternatives={hasAlternatives}
-            dataset={dataset}
-            lang={lang}
-            langMap={langMap}
-            onRequestPicker={onRequestPicker}
-            onRequestMemberPicker={onRequestMemberPicker}
-          />
         </>
       )}
       {cardOn && body && src ? (
@@ -231,7 +251,7 @@ export const CalcNodeCardFull = memo(function CalcNodeCardFull({
             naturalW={body.w}
             naturalH={body.h}
             interactive={false}
-            slotTooltip={interactive ? 'compact' : 'none'}
+            slotTooltip={interactive ? 'adaptive' : 'none'}
             eager
             onFail={() => setImgFail(true)}
           />
@@ -246,13 +266,44 @@ export const CalcNodeCardFull = memo(function CalcNodeCardFull({
           }
         />
       ) : null}
-      {interactive ? (
-        <NodeActions
-          data={data}
-          nodeId={id}
-          onPickMissing={onRequestPicker}
-        />
-      ) : null}
+    </div>
+  );
+  const hoverBody =
+    interactive && hoverCard ? (
+      <HoverCardTrigger render={innerContent} />
+    ) : (
+      innerContent
+    );
+  const cardBody = (
+    <div
+      data-calc-card
+      className={cn(
+        'relative flex h-full w-full select-none flex-col text-xs outline-none',
+        'rounded-md border bg-card',
+        stateCls,
+      )}
+    >
+      <PortRailIn
+        node={node}
+        data={data}
+        dataset={dataset}
+        lang={lang}
+        langMap={langMap}
+        names={names}
+        connectable={interactive}
+      />
+      {hoverBody}
+      <PortRailOut
+        node={node}
+        data={data}
+        dataset={dataset}
+        lang={lang}
+        langMap={langMap}
+        names={names}
+        connectable={interactive}
+        onOpen={() => onRequestPicker(node)}
+      />
+      {interactive ? <NodeActions data={data} nodeId={id} /> : null}
       <NodeBadges node={node} />
     </div>
   );
@@ -260,9 +311,7 @@ export const CalcNodeCardFull = memo(function CalcNodeCardFull({
   return (
     <HoverCard>
       <ContextMenu>
-        <HoverCardTrigger
-          render={<ContextMenuTrigger render={cardBody} />}
-        />
+        <ContextMenuTrigger render={cardBody} />
         <NodeContextMenu data={data} lang={lang} langMap={langMap} />
       </ContextMenu>
       {hoverCard ? (
@@ -280,3 +329,4 @@ export const CalcNodeCardFull = memo(function CalcNodeCardFull({
     </HoverCard>
   );
 });
+

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

@@ -24,3 +24,4 @@ export const CalcNodeCard = memo(function CalcNodeCard(
   if (tier === 'dot') return <CalcDotCard {...props} />;
   return <CalcFarCard {...props} />;
 });
+

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

@@ -1,9 +1,9 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import {
   ExternalLink,
   ListFilter,
-  Package,
   Pin,
   PinOff,
   Plus,
@@ -24,6 +24,7 @@ import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
 import { PagedCard } from '@terrafirmagreg-team/recipe/components/cards/paged-card';
 import { recipeTitle } from '@terrafirmagreg-team/recipe/lib/data/parse';
 import type { CalcFlowData } from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import type { CalcKind } from '@terrafirmagreg-team/recipe/types/calc';
 import type { Recipe } from '@terrafirmagreg-team/recipe/lib/data/dto';
 import type { RecipeCategory } from '@terrafirmagreg-team/recipe/types';
 
@@ -39,10 +40,9 @@ export function NodeContextMenu({
   const {
     node,
     dataset,
-    onSetTarget,
-    onAddStock,
+    onAddCard,
     onOpenItem,
-    onCollapseNode,
+    onSelectRecipe,
     onRequestPicker,
     onRequestMemberPicker,
     recipeDefaults,
@@ -70,24 +70,17 @@ export function NodeContextMenu({
       <ContextMenuSeparator />
       <ContextMenuItem
         className="whitespace-nowrap"
-        onClick={() => onSetTarget(node.materialId, node.kind)}
+        onClick={() => onAddCard(node.materialId, node.kind)}
       >
         <Target />
-        {t('recipe.calc.set_target')}
-      </ContextMenuItem>
-      <ContextMenuItem
-        className="whitespace-nowrap"
-        onClick={() => onAddStock(node.materialId, node.kind)}
-      >
-        <Package />
-        {t('recipe.calc.add.stock')}
+        {t('Add card', { note: 'recipe.calc.add.goal' })}
       </ContextMenuItem>
       <ContextMenuItem
         className="whitespace-nowrap"
         onClick={() => onOpenItem(node.materialId, node.kind)}
       >
         <ExternalLink />
-        {t('recipe.calc.open.item')}
+        {t('Open item page', { note: 'recipe.calc.open.item' })}
       </ContextMenuItem>
       {node.recipe ? (
         <ContextMenuItem
@@ -104,32 +97,32 @@ export function NodeContextMenu({
           {recipeDefaults[node.materialId] === node.recipe.recipeId ? (
             <>
               <PinOff />
-              {t('recipe.calc.clear.default')}
+              {t('Unpin default recipe', { note: 'recipe.calc.clear.default' })}
             </>
           ) : (
             <>
               <Pin />
-              {t('recipe.calc.set_default')}
+              {t('Pin as default recipe', { note: 'recipe.calc.set_default' })}
             </>
           )}
         </ContextMenuItem>
       ) : null}
-      {node.recipe && node.path ? (
+      {node.recipe ? (
         <ContextMenuItem
           className="whitespace-nowrap"
-          onClick={() => onCollapseNode(node.path!)}
+          onClick={() => onSelectRecipe(node.id, null)}
         >
           <Undo2 />
-          {t('recipe.calc.remove.recipe')}
+          {t('Remove recipe', { note: 'recipe.calc.remove.recipe' })}
         </ContextMenuItem>
       ) : null}
-      {node.expandable && !node.recipe ? (
+      {!node.recipe && node.availableRecipes.length > 0 ? (
         <ContextMenuItem
           className="whitespace-nowrap"
           onClick={() => onRequestPicker(node)}
         >
           <Plus />
-          {t('recipe.calc.pick.title')}
+          {t('Pick a recipe', { note: 'recipe.calc.pick.title' })}
         </ContextMenuItem>
       ) : null}
       {node.tagId && members && members.length > 1 ? (
@@ -138,9 +131,86 @@ export function NodeContextMenu({
           onClick={() => onRequestMemberPicker(node)}
         >
           <ListFilter />
-          {t('recipe.calc.member.title')}
+          {t('Choose tag member', { note: 'recipe.calc.member.title' })}
+        </ContextMenuItem>
+      ) : null}
+    </ContextMenuContent>
+  );
+}
+
+export function PortContextMenu({
+  data,
+  node,
+  input,
+  out,
+  id,
+  kind,
+  dataset,
+  lang,
+  langMap,
+}: {
+  data: CalcFlowData;
+  node: CalcFlowData['node'];
+  input?: number;
+  out?: number;
+  id: string;
+  kind: CalcKind;
+  dataset: DatasetRef;
+  lang: string;
+  langMap?: Record<string, string>;
+}) {
+  const { onAddCard, onOpenItem, onRequestPicker, onRequestSupply } = data;
+  const t = useTranslations();
+  return (
+    <ContextMenuContent>
+      <ContextMenuGroup>
+        <ContextMenuLabel className="flex items-center gap-1.5">
+          <Entry
+            id={id}
+            kind={kind}
+            dataset={dataset}
+            lang={lang}
+            langMap={langMap}
+            size="sm"
+            labeled
+            href={false}
+            tooltip={false}
+          />
+        </ContextMenuLabel>
+      </ContextMenuGroup>
+      <ContextMenuSeparator />
+      {input != null ? (
+        <ContextMenuItem
+          className="whitespace-nowrap"
+          onClick={() => onRequestSupply(node, input)}
+        >
+          <Plus />
+          {t('Keep as external source', { note: 'recipe.calc.supply.source' })}
+        </ContextMenuItem>
+      ) : null}
+      {out === 0 && !node.recipe && node.availableRecipes.length > 0 ? (
+        <ContextMenuItem
+          className="whitespace-nowrap"
+          onClick={() => onRequestPicker(node)}
+        >
+          <ListFilter />
+          {t('Pick a recipe', { note: 'recipe.calc.pick.title' })}
         </ContextMenuItem>
       ) : null}
+      <ContextMenuItem
+        className="whitespace-nowrap"
+        onClick={() => onAddCard(id, kind)}
+      >
+        <Target />
+        {t('Add card', { note: 'recipe.calc.add.goal' })}
+      </ContextMenuItem>
+      <ContextMenuItem
+        className="whitespace-nowrap"
+        onClick={() => onOpenItem(id, kind)}
+      >
+        <ExternalLink />
+        {t('Open item page', { note: 'recipe.calc.open.item' })}
+      </ContextMenuItem>
     </ContextMenuContent>
   );
 }
@@ -209,3 +279,4 @@ export function NodeHoverContent({
     </HoverCardContent>
   );
 }
+