@terrafirmagreg-team/recipe 0.1.0 → 1.2.0

package/src/components/views/calc/node-card/port-cells.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+import {
+  Handle,
+  Position,
+} from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/context-menu';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { CalcFlowData } from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import type {
+  CalcNode,
+  CalcNodeInput,
+  CalcOutput,
+} from '@terrafirmagreg-team/recipe/types/calc';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import { PortContextMenu } from './menu';
+import { formatPortCount, PortCount } from './ports';
+
+interface CellProps {
+  index: number;
+  node: CalcNode;
+  data: CalcFlowData;
+  dataset: DatasetRef;
+  lang: Lang;
+  langMap?: Record<string, string>;
+  names: Record<string, Record<string, string>>;
+  connectable: boolean;
+}
+
+export function OutputCell({
+  out,
+  index,
+  node,
+  data,
+  dataset,
+  lang,
+  langMap,
+  names,
+  connectable,
+  onOpen,
+}: CellProps & {
+  out: CalcOutput;
+  onOpen?: () => void;
+}) {
+  const name = recipeItemName(names, lang, out.id);
+  const count = out.remaining;
+  const qty = formatPortCount(count, out.kind);
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger
+        onContextMenu={(e) => e.stopPropagation()}
+        render={
+          <Handle
+            type="source"
+            id={index === 0 ? 'out' : `out-${index}`}
+            position={Position.Right}
+            isConnectable={connectable}
+            isConnectableEnd={connectable}
+            className={cn(
+              'calc-port calc-port--out',
+              out.remaining < 0 && 'calc-port--over',
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (index === 0) onOpen?.();
+            }}
+          >
+            <span className="calc-port-inner">
+              <Entry
+                id={out.id}
+                kind={out.kind}
+                dataset={dataset}
+                lang={lang}
+                langMap={langMap}
+                name={`${name} ×${qty}`}
+                size="sm"
+                href={false}
+                tooltip="adaptive"
+              />
+              <PortCount value={count} kind={out.kind} />
+            </span>
+          </Handle>
+        }
+      />
+      <PortContextMenu
+        data={data}
+        node={node}
+        out={index}
+        id={out.id}
+        kind={out.kind}
+        dataset={dataset}
+        lang={lang}
+        langMap={langMap}
+      />
+    </ContextMenu>
+  );
+}
+
+export function InputCell({
+  inp,
+  index,
+  node,
+  data,
+  dataset,
+  lang,
+  langMap,
+  names,
+  connectable,
+}: CellProps & {
+  inp: CalcNodeInput;
+}) {
+  const id = inp.id;
+  const name = id ? recipeItemName(names, lang, id) : (inp.tagId ?? '?');
+  const uncovered = Math.max(0, inp.amount - inp.covered);
+  const qty = formatPortCount(uncovered, inp.kind);
+  const state = inp.wired
+    ? uncovered <= 0
+      ? 'full'
+      : 'partial'
+    : 'open';
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger
+        onContextMenu={(e) => e.stopPropagation()}
+        render={
+          <Handle
+            type="target"
+            id={`in-${index}`}
+            position={Position.Left}
+            isConnectable={connectable}
+            isConnectableEnd={connectable}
+            className={cn(
+              'calc-port',
+              'calc-port--in',
+              inp.catalyst && 'calc-port--cat',
+              `calc-port--${state}`,
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (id) data.ensureMaterial(id);
+              data.onRequestSupply(node, index);
+            }}
+          >
+            <span className="calc-port-inner">
+              {id ? (
+                <Entry
+                  id={id}
+                  kind={inp.kind}
+                  dataset={dataset}
+                  lang={lang}
+                  langMap={langMap}
+                  name={`${name} ×${qty}`}
+                  size="sm"
+                  href={false}
+                  tooltip="adaptive"
+                />
+              ) : (
+                <span className="text-[9px]">?</span>
+              )}
+              <PortCount value={uncovered} kind={inp.kind} />
+            </span>
+          </Handle>
+        }
+      />
+      {id ? (
+        <PortContextMenu
+          data={data}
+          node={node}
+          input={index}
+          id={id}
+          kind={inp.kind}
+          dataset={dataset}
+          lang={lang}
+          langMap={langMap}
+        />
+      ) : null}
+    </ContextMenu>
+  );
+}
+

package/src/components/views/calc/node-card/port-rails.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useUpdateNodeInternals } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import {
+  PORT_STEP,
+  railSpans,
+} from '@terrafirmagreg-team/recipe/lib/calc/ports';
+import type { CalcFlowData } from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import type { CalcNode } from '@terrafirmagreg-team/recipe/types/calc';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import { GhostHandle } from './ports';
+import { InputCell, OutputCell } from './port-cells';
+
+function useRailWindow(total: number, nodeId: string, side: 'in' | 'out') {
+  const [el, setEl] = useState<HTMLDivElement | null>(null);
+  const [rows, setRows] = useState(0);
+  const [offset, setOffset] = useState(0);
+  const updateNodeInternals = useUpdateNodeInternals();
+  useLayoutEffect(() => {
+    if (!el) return;
+    const measure = () =>
+      setRows(Math.max(1, Math.floor(el.clientHeight / PORT_STEP)));
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [el]);
+  const paged = total > rows;
+  const start = Math.min(offset, Math.max(0, total - 1));
+  let end = total;
+  if (paged) {
+    end = start + rows;
+    for (let i = 0; i < 3; i += 1) {
+      const marks = (start > 0 ? 1 : 0) + (end < total ? 1 : 0);
+      const next = Math.min(total, start + Math.max(1, rows - marks));
+      if (next === end) break;
+      end = next;
+    }
+  }
+  const above = paged ? start : 0;
+  const below = paged ? total - end : 0;
+  const scroll = useCallback(
+    (dir: number) =>
+      setOffset((cur) => Math.min(Math.max(0, cur + dir), total - 1)),
+    [total],
+  );
+  const onWheel = useCallback(
+    (e: React.WheelEvent) => {
+      if (!paged) return;
+      scroll(e.deltaY > 0 ? 1 : -1);
+    },
+    [paged, scroll],
+  );
+  useEffect(() => {
+    updateNodeInternals(nodeId);
+  }, [nodeId, updateNodeInternals, start, end, rows, total]);
+  useEffect(() => {
+    railSpans.set(nodeId, {
+      ...railSpans.get(nodeId),
+      ...(side === 'in'
+        ? { inStart: start, inRows: rows }
+        : { outStart: start, outRows: rows }),
+    });
+  }, [nodeId, side, start, rows]);
+  return { ref: setEl, start, end, above, below, paged, scroll, onWheel };
+}
+
+interface RailProps {
+  node: CalcNode;
+  data: CalcFlowData;
+  dataset: DatasetRef;
+  lang: Lang;
+  langMap?: Record<string, string>;
+  names: Record<string, Record<string, string>>;
+  connectable?: boolean;
+}
+
+export function PortRailIn({
+  node,
+  data,
+  dataset,
+  lang,
+  langMap,
+  names,
+  connectable = true,
+}: RailProps) {
+  const {
+    ref,
+    start,
+    end,
+    above,
+    below,
+    scroll,
+    onWheel,
+  } = useRailWindow(node.inputs.length, node.id, 'in');
+  if (!node.inputs.length) return null;
+  const slice = node.inputs.slice(start, end);
+  return (
+    <div
+      ref={ref}
+      className="calc-rail calc-rail--in nodrag nowheel"
+      onWheel={onWheel}
+    >
+      {above > 0 ? (
+        <button
+          type="button"
+          className="calc-port calc-port--more"
+          onClick={(e) => {
+            e.stopPropagation();
+            scroll(-1);
+          }}
+        >
+          {node.inputs.slice(0, above).map((inp, i) => (
+            <GhostHandle key={i} type="target" id={`in-${i}`} />
+          ))}
+          <ChevronUp className="size-2.5" />
+          <span>+{above}</span>
+        </button>
+      ) : null}
+      {slice.map((inp, i) => (
+        <InputCell
+          key={start + i}
+          inp={inp}
+          index={start + i}
+          node={node}
+          data={data}
+          dataset={dataset}
+          lang={lang}
+          langMap={langMap}
+          names={names}
+          connectable={connectable}
+        />
+      ))}
+      {below > 0 ? (
+        <button
+          type="button"
+          className="calc-port calc-port--more"
+          onClick={(e) => {
+            e.stopPropagation();
+            scroll(1);
+          }}
+        >
+          {node.inputs.slice(end).map((inp, i) => (
+            <GhostHandle
+              key={end + i}
+              type="target"
+              id={`in-${end + i}`}
+            />
+          ))}
+          <ChevronDown className="size-2.5" />
+          <span>+{below}</span>
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export function PortRailOut({
+  node,
+  data,
+  dataset,
+  lang,
+  langMap,
+  names,
+  connectable = true,
+  onOpen,
+}: RailProps & { onOpen?: () => void }) {
+  const {
+    ref,
+    start,
+    end,
+    above,
+    below,
+    scroll,
+    onWheel,
+  } = useRailWindow(node.outputs.length, node.id, 'out');
+  if (!node.outputs.length) return null;
+  const slice = node.outputs.slice(start, end);
+  return (
+    <div
+      ref={ref}
+      className="calc-rail calc-rail--out nodrag nowheel"
+      onWheel={onWheel}
+    >
+      {above > 0 ? (
+        <button
+          type="button"
+          className="calc-port calc-port--more"
+          onClick={(e) => {
+            e.stopPropagation();
+            scroll(-1);
+          }}
+        >
+          {node.outputs.slice(0, above).map((out, i) => (
+            <GhostHandle
+              key={i}
+              type="source"
+              id={i === 0 ? 'out' : `out-${i}`}
+            />
+          ))}
+          <ChevronUp className="size-2.5" />
+          <span>+{above}</span>
+        </button>
+      ) : null}
+      {slice.map((out, i) => (
+        <OutputCell
+          key={`${out.kind}:${out.id}:${start + i}`}
+          out={out}
+          index={start + i}
+          node={node}
+          data={data}
+          dataset={dataset}
+          lang={lang}
+          langMap={langMap}
+          names={names}
+          connectable={connectable}
+          onOpen={onOpen}
+        />
+      ))}
+      {below > 0 ? (
+        <button
+          type="button"
+          className="calc-port calc-port--more"
+          onClick={(e) => {
+            e.stopPropagation();
+            scroll(1);
+          }}
+        >
+          {node.outputs.slice(end).map((out, i) => (
+            <GhostHandle
+              key={end + i}
+              type="source"
+              id={`out-${end + i}`}
+            />
+          ))}
+          <ChevronDown className="size-2.5" />
+          <span>+{below}</span>
+        </button>
+      ) : null}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,86 @@
+'use client';
+
+import { Handle, Position } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import { formatCount } from '@terrafirmagreg-team/ui/lib/utils/format';
+import { PORT_OUT } from '@terrafirmagreg-team/recipe/lib/calc/ports';
+import type {
+  CalcKind,
+  CalcNode,
+} from '@terrafirmagreg-team/recipe/types/calc';
+
+export function formatPortCount(value: number, kind: CalcKind): string {
+  if (kind === 'fluid') {
+    if (Math.abs(value) >= 1_000)
+      return `${Math.round((value / 1000) * 100) / 100}`;
+    return `${Math.round(value)}`;
+  }
+  return formatCount(value, 1_000);
+}
+
+export function PortCount({ value, kind }: { value: number; kind: CalcKind }) {
+  const text = formatPortCount(value, kind);
+  return (
+    <span
+      className="calc-port-count"
+      data-len={text.length >= 5 ? 'xl' : text.length >= 4 ? 'l' : undefined}
+      title={String(value)}
+    >
+      {text}
+    </span>
+  );
+}
+
+export function CardHandles({
+  node,
+  interactive,
+}: {
+  node: CalcNode;
+  interactive: boolean;
+}) {
+  return (
+    <>
+      {node.outputs.map((out, index) => (
+        <Handle
+          key={`out-${index}`}
+          type="source"
+          id={index === 0 ? 'out' : `out-${index}`}
+          position={Position.Right}
+          isConnectable={interactive}
+          className="calc-port calc-port--ghost"
+          style={{ right: -PORT_OUT, top: '50%' }}
+        />
+      ))}
+      {node.inputs.map((inp, index) => (
+        <Handle
+          key={index}
+          type="target"
+          id={`in-${index}`}
+          position={Position.Left}
+          isConnectable={interactive}
+          className="calc-port calc-port--ghost"
+          style={{ left: -PORT_OUT, top: '50%' }}
+        />
+      ))}
+    </>
+  );
+}
+
+export function GhostHandle({
+  id,
+  type,
+}: {
+  id: string;
+  type: 'source' | 'target';
+}) {
+  return (
+    <Handle
+      type={type}
+      id={id}
+      position={type === 'source' ? Position.Right : Position.Left}
+      isConnectable={false}
+      className="calc-port calc-port--ghost"
+      style={{ position: 'absolute', inset: 0, width: 'auto', height: 'auto' }}
+    />
+  );
+}
+

package/src/components/views/calc/recipe-picker/body.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState, type ReactNode } from 'react';
 import { Sparkles } from 'lucide-react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useCategoriesById } from '@terrafirmagreg-team/recipe/hooks/use-categories-by-id';
 import { useFitPages } from '@terrafirmagreg-team/ui/hooks/page/use-fit-pages';
 import {
   DialogHeader,
@@ -19,7 +20,7 @@ import { RecipeTypeTabs } from '@terrafirmagreg-team/recipe/components/views/bro
 import { PlaceHeader } from '@terrafirmagreg-team/recipe/components/views/browser/place-header';
 import { WorkstationRail } from '@terrafirmagreg-team/recipe/components/views/browser/workstation-rail';
 import type { CalcFlowData } from '@terrafirmagreg-team/recipe/lib/calc/flow';
-import type { RecipeCategory, RecipeSession } from '@terrafirmagreg-team/recipe/types';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
 import { PickerFooter } from './footer';
 
 export function PickerBody({
@@ -29,6 +30,7 @@ export function PickerBody({
   onSelectTagMember,
   recipeDefaults,
   onSetRecipeDefault,
+  actions,
   close,
 }: {
   node: CalcFlowData['node'];
@@ -37,6 +39,7 @@ export function PickerBody({
   onSelectTagMember: CalcFlowData['onSelectTagMember'];
   recipeDefaults: CalcFlowData['recipeDefaults'];
   onSetRecipeDefault: CalcFlowData['onSetRecipeDefault'];
+  actions?: ReactNode;
   close: () => void;
 }) {
   const t = useTranslations();
@@ -66,13 +69,7 @@ export function PickerBody({
           ?.category ??
         recipes.find((row) => row.recipeId === defaultRecipeId)?.category ??
         categories[0]);
-  const categoriesById = useMemo(
-    () =>
-      new Map<string, RecipeCategory>(
-        (index?.categories ?? []).map((row) => [row.id, row]),
-      ),
-    [index],
-  );
+  const categoriesById = useCategoriesById(index);
   const rows = useMemo(
     () =>
       recipes
@@ -105,7 +102,8 @@ export function PickerBody({
     setPage(next);
   };
   const custom =
-    !!node.recipe && node.recipe.recipeId !== recipes[0]?.recipeId;
+    !!node.recipe &&
+    node.recipe.recipeId !== (defaultRecipeId ?? recipes[0]?.recipeId);
   const members =
     node.tagId && node.members && node.members.length > 1
       ? node.members
@@ -137,14 +135,18 @@ export function PickerBody({
               variant="outline"
               className="ms-auto shrink-0"
               onClick={() => {
-                onSelectRecipe(node.materialId, null);
+                onSelectRecipe(
+                  node.id,
+                  defaultRecipeId ?? recipes[0]?.recipeId ?? null,
+                );
                 close();
               }}
             >
               <Sparkles className="size-3.5" />
-              {t('recipe.calc.auto.title')}
+              {t('Default recipe', { note: 'recipe.calc.auto.title' })}
             </Button>
           ) : null}
+          {actions}
         </DialogTitle>
       </DialogHeader>
       <RecipeFrame
@@ -178,12 +180,12 @@ export function PickerBody({
           boxRef={boxRef}
           maxH={list.box.h}
           maxW={list.box.w}
-          empty={t('recipe.empty_type')}
+          empty={t('No recipes of this type.', { note: 'recipe.empty_type' })}
           onSwipe={(dir) =>
             goPage((list.page + dir + list.pages) % Math.max(list.pages, 1))
           }
           onPick={(recipeId) => {
-            onSelectRecipe(node.materialId, recipeId);
+            onSelectRecipe(node.id, recipeId);
             close();
           }}
           defaultMaterial={node.materialId}
@@ -202,3 +204,4 @@ export function PickerBody({
     </>
   );
 }
+

package/src/components/views/calc/recipe-picker/footer.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { useState } from 'react';
 import { ListFilter } from 'lucide-react';
@@ -25,7 +26,7 @@ export function PickerFooter({
 }: {
   node: CalcFlowData['node'];
   members: string[] | undefined;
-  dataset: string;
+  dataset: DatasetRef;
   lang: Lang;
   langMap?: Record<string, string>;
   recipeDefaults: CalcFlowData['recipeDefaults'];
@@ -67,7 +68,7 @@ export function PickerFooter({
                 onClick={() => setMemberPickerOpen(true)}
               >
                 <ListFilter className="size-3.5" />
-                {t('recipe.calc.member.title')}
+                {t('Choose tag member', { note: 'recipe.calc.member.title' })}
               </Button>
             </>
           ) : null}
@@ -89,7 +90,7 @@ export function PickerFooter({
                   )
                 }
               />
-              {t('recipe.calc.set_default')}
+              {t('Pin as default recipe', { note: 'recipe.calc.set_default' })}
             </label>
           ) : null}
         </div>
@@ -127,3 +128,4 @@ export function PickerFooter({
     </>
   );
 }
+

package/src/components/views/calc/recipe-picker/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { ReactNode } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -17,6 +18,7 @@ export function CalcRecipePicker({
   onSelectTagMember,
   recipeDefaults,
   onSetRecipeDefault,
+  actions,
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -26,6 +28,7 @@ export function CalcRecipePicker({
   onSelectTagMember: CalcFlowData['onSelectTagMember'];
   recipeDefaults: CalcFlowData['recipeDefaults'];
   onSetRecipeDefault: CalcFlowData['onSetRecipeDefault'];
+  actions?: ReactNode;
 }) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -38,6 +41,7 @@ export function CalcRecipePicker({
             onSelectTagMember={onSelectTagMember}
             recipeDefaults={recipeDefaults}
             onSetRecipeDefault={onSetRecipeDefault}
+            actions={actions}
             close={() => onOpenChange(false)}
           />
         ) : null}
@@ -45,3 +49,4 @@ export function CalcRecipePicker({
     </Dialog>
   );
 }
+