@terrafirmagreg-team/recipe 0.1.0 → 1.2.0

package/src/components/views/calc/calculator/index.tsx

@@ -6,37 +6,26 @@ import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty
 import { LeftSidebarPortal } from '@terrafirmagreg-team/ui/components/layouts/left-sidebar';
 import { CalcFlow } from '@terrafirmagreg-team/recipe/components/views/calc/flow';
 import { CalcSidebar } from '@terrafirmagreg-team/recipe/components/views/calc/sidebar';
-import { CalcTarget } from '@terrafirmagreg-team/recipe/components/views/calc/target';
 import { CalcHistoryList } from '@terrafirmagreg-team/recipe/components/views/calc/trees';
 import { CalcActions } from '@terrafirmagreg-team/recipe/components/views/calc/calculator/actions';
 import { useCalcFocus } from '@terrafirmagreg-team/recipe/hooks/calc/use-focus';
 import { useCalcReset } from '@terrafirmagreg-team/recipe/hooks/calc/use-reset';
 import { useCalcAmounts } from '@terrafirmagreg-team/recipe/hooks/calc/use-amounts';
-import { useCalcFill } from '@terrafirmagreg-team/recipe/hooks/calc/use-calc-fill';
 import { useCalcActions } from '@terrafirmagreg-team/recipe/hooks/calc/use-actions';
 import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
 import { useCalcData } from '@terrafirmagreg-team/recipe/hooks/calc/use-data';
 import { useCalcViewMode } from '@terrafirmagreg-team/recipe/hooks/calc/use-view-mode';
-import { useCalcDirection } from '@terrafirmagreg-team/recipe/hooks/calc/use-direction';
-import { useCalcEdgeStyle } from '@terrafirmagreg-team/recipe/hooks/calc/use-edge-style';
 import { useCalcFarMode } from '@terrafirmagreg-team/recipe/hooks/calc/use-far-mode';
-import { useCalcDensity } from '@terrafirmagreg-team/recipe/hooks/calc/use-density';
 
 export function Calculator({ session }: { session: RecipeSession }) {
   const t = useTranslations();
   const { dataset, lang } = session;
   const [mode, setMode] = useCalcViewMode();
-  const [direction, setDirection] = useCalcDirection();
-  const [edgeStyle, setEdgeStyle] = useCalcEdgeStyle();
   const [farCards, setFarCards] = useCalcFarMode();
-  const [density, setDensity] = useCalcDensity();
   const {
-    target,
-    inventory,
-    selections,
+    cards,
+    wires,
     tagSelections,
-    collapsed,
-    auto,
     tabs,
     activeTabId,
     history,
@@ -49,59 +38,40 @@ export function Calculator({ session }: { session: RecipeSession }) {
     removeHistory,
     recipeDefaults,
     setRecipeDefault,
-    goals,
+    getRecipesForItem,
+    ensureMaterial,
+    nodes,
+    flows,
     summary,
-    ideal,
     persist,
-    fillTree,
     encodeShare,
     recipeBody,
     settled,
   } = useCalcData(session);
-  const deferredGoals = useDeferredValue(goals);
+  const deferredNodes = useDeferredValue(nodes);
+  const deferredFlows = useDeferredValue(flows);
   const deferredLangMap = useDeferredValue(session.langMap);
   const { focusNodeRef, onFocusNode, focusNodeId, setFocusNodeId } =
-    useCalcFocus(target);
-  const { resetGen, setResetGen } = useCalcReset(activeTabId);
-  const {
-    displayTarget,
-    displayInventory,
-    flushAmounts,
-    onAmount,
-    onStockAmount,
-  } = useCalcAmounts({
-    target,
-    inventory,
-    persist,
-    selections,
+    useCalcFocus(cards);
+  const { resetGen } = useCalcReset(activeTabId);
+  const { displayCards, flushAmounts, onCrafts } = useCalcAmounts({
+    cards,
+    wires,
     tagSelections,
-    collapsed,
-    auto,
-  });
-  const { onFillNode, onAutoBuild } = useCalcFill({
-    dataset,
-    hasTarget: !!target,
-    fillTree,
-    setResetGen,
+    persist,
   });
   const {
     shared,
     onShare,
     flowData,
-    onAddStock,
-    onRemoveStock,
-    onApplyIdeal,
-    onRemoveTarget,
+    onMoveCards,
     onClear,
   } = useCalcActions({
     dataset,
     lang,
-    selections,
+    cards: displayCards,
+    wires,
     tagSelections,
-    collapsed,
-    auto,
-    goal: goals[0] ?? null,
-    ideal,
     persist,
     recipeDefaults,
     setRecipeDefault,
@@ -109,7 +79,7 @@ export function Calculator({ session }: { session: RecipeSession }) {
     encodeShare,
     flushAmounts,
     setFocusNodeId,
-    onFillNode,
+    nodes: deferredNodes,
   });
 
   const iconItems = useMemo(
@@ -124,6 +94,11 @@ export function Calculator({ session }: { session: RecipeSession }) {
     [session.index],
   );
 
+  const data = useMemo(
+    () => ({ ...flowData, onCrafts, getRecipesForItem, ensureMaterial }),
+    [flowData, onCrafts, getRecipesForItem, ensureMaterial],
+  );
+
   return (
     <>
       <LeftSidebarPortal>
@@ -132,7 +107,6 @@ export function Calculator({ session }: { session: RecipeSession }) {
           lang={lang}
           langMap={deferredLangMap}
           summary={summary}
-          target={displayTarget}
           onFocus={onFocusNode}
           trees={{
             tabs,
@@ -150,61 +124,38 @@ export function Calculator({ session }: { session: RecipeSession }) {
         />
       </LeftSidebarPortal>
       <CalcFlow
-        goals={deferredGoals}
+        nodes={deferredNodes}
+        wires={wires}
+        flows={deferredFlows}
+        cards={displayCards}
         dataset={dataset}
         session={session}
-        data={flowData}
+        data={data}
         mode={mode}
         onModeChange={setMode}
-        direction={direction}
-        onDirectionChange={setDirection}
-        edgeStyle={edgeStyle}
-        onEdgeStyleChange={setEdgeStyle}
         farCards={farCards}
         onFarCardsChange={setFarCards}
-        density={density}
-        onDensityChange={setDensity}
-
-        treeReady={settled && goals === deferredGoals}
+        treeReady={settled}
         resetGen={resetGen}
         canvasId={activeTabId ?? undefined}
+        onRelayout={onMoveCards}
         actions={
           <CalcActions
             session={session}
             shared={shared}
             onShare={onShare}
-            hasTargets={!!target}
-            onAutoBuild={onAutoBuild}
-            onClear={onClear}
-          />
-        }
-        panel={
-          <CalcTarget
-            dataset={dataset}
-            lang={lang}
-            langMap={deferredLangMap}
-            target={displayTarget}
-            inventory={displayInventory}
-            iconItems={iconItems}
-            ideal={ideal}
-            onAmount={onAmount}
-            onStockAmount={onStockAmount}
-            onRemoveTarget={onRemoveTarget}
-            onRemoveStock={onRemoveStock}
-            onAddStock={onAddStock}
-            onApplyIdeal={onApplyIdeal}
+            hasTargets={displayCards.length > 0}
             onClear={onClear}
-            onFocus={onFocusNode}
           />
         }
         focusRef={focusNodeRef}
         focusNodeId={focusNodeId}
         onFocusedNode={() => setFocusNodeId(null)}
         empty={
-          <div className="absolute inset-0 z-10 grid place-items-center overflow-auto p-4">
+          <div className="scrollbar-thin absolute inset-0 z-10 grid place-items-center overflow-auto p-4">
             <div className="flex flex-col items-center gap-4">
               <EmptyState variant="empty">
-                {t('recipe.calc.empty')}
+                {t('Click an item in the catalog to add a card.', { note: 'recipe.calc.empty' })}
               </EmptyState>
               <CalcHistoryList
                 history={history}
@@ -218,3 +169,4 @@ export function Calculator({ session }: { session: RecipeSession }) {
     </>
   );
 }
+

package/src/components/views/calc/dot-overlay.tsx

@@ -77,3 +77,4 @@ export const CalcDotOverlay = memo(function CalcDotOverlay({
     />
   );
 });
+

package/src/components/views/calc/edge.tsx

@@ -1,50 +1,152 @@
 'use client';
 
-import { createChevronEdge } from '@terrafirmagreg-team/ui/components/blocks/canvas/chevron-edge';
+import { useState, type KeyboardEvent } from 'react';
 import {
-  getBezierPath,
-  getSmoothStepPath,
-} from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+  createChevronEdge,
+  type ChevronEdgePathContext,
+} from '@terrafirmagreg-team/ui/components/blocks/canvas/chevron-edge';
+import { getSmoothStepPath } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
 import {
-  chamferedPolylinePath,
+  roundedPolylinePath,
   svgPathToPoints,
 } from '@terrafirmagreg-team/ui/lib/canvas/edge';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+import { useCalcSession } from '@terrafirmagreg-team/recipe/hooks/calc/use-session';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { formatCount } from '@terrafirmagreg-team/ui/lib/utils/format';
 import type { FlowPoint } from '@terrafirmagreg-team/ui/types/canvas';
-import type { CalcEdgeStyle } from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import type { CalcWire } from '@terrafirmagreg-team/recipe/types/calc';
+
+function EdgeAmountLabel({ ctx }: { ctx: ChevronEdgePathContext }) {
+  const wire = ctx.data?.wire as CalcWire | undefined;
+  const flow = ctx.data?.flow as number | undefined;
+  const matId = ctx.data?.matId as string | undefined;
+  const matKind = ctx.data?.matKind as 'item' | 'fluid' | undefined;
+  const dataset = ctx.data?.dataset as DatasetRef | undefined;
+  const onWireAmount = ctx.data?.onWireAmount as
+    | ((from: string, to: string, input: number, amount: number | null) => void)
+    | undefined;
+  const onUnwire = ctx.data?.onUnwire as
+    | ((from: string, to: string, input: number, out?: number) => void)
+    | undefined;
+  const session = useCalcSession();
+  const [edit, setEdit] = useState<string | null>(null);
+  if (!wire || flow == null) return null;
+  const cap = wire.amount;
+
+  const commit = () => {
+    if (edit == null) return;
+    const raw = edit.trim();
+    const value = raw === '' ? null : Math.max(0, Number(raw));
+    onWireAmount?.(
+      wire.from,
+      wire.to,
+      wire.input,
+      value != null && Number.isFinite(value) ? value : null,
+    );
+    setEdit(null);
+  };
+  const onKey = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') commit();
+    if (e.key === 'Escape') setEdit(null);
+  };
+
+  if (edit != null) {
+    return (
+      <input
+        autoFocus
+        className="calc-edge-label__input"
+        value={edit}
+        onChange={(e) => setEdit(e.target.value)}
+        onBlur={commit}
+        onKeyDown={onKey}
+        onClick={(e) => e.stopPropagation()}
+      />
+    );
+  }
+  const matName =
+    matId && session?.names
+      ? recipeItemName(session.names, session.lang, matId)
+      : matId;
+  return (
+    <button
+      type="button"
+      className="calc-edge-label"
+      title={`${matName ?? ''} ${flow}${cap != null ? ` / ${cap}` : ''}`}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (e.shiftKey) {
+          onUnwire?.(wire.from, wire.to, wire.input, wire.out);
+          return;
+        }
+        setEdit(cap != null ? String(cap) : '');
+      }}
+    >
+      {matId && matKind && dataset ? (
+        <Entry
+          id={matId}
+          kind={matKind}
+          dataset={dataset}
+          size="sm"
+          href={false}
+          tooltip={false}
+        />
+      ) : null}
+      {matName ? (
+        <span className="calc-edge-label__name">{matName}</span>
+      ) : null}
+      <span className="calc-edge-label__amount">
+        ×{formatCount(flow, 1_000)}
+        {cap != null ? `/${formatCount(cap, 1_000)}` : ''}
+      </span>
+      <span className="calc-edge-label__cut" aria-hidden>
+        ×
+      </span>
+    </button>
+  );
+}
 
 export const CalcEdge = createChevronEdge({
+  renderLabel: (ctx) => <EdgeAmountLabel ctx={ctx} />,
+  labelVisibility: 'hover',
   resolvePath: (ctx) => {
-    const route = (ctx.data?.route as CalcEdgeStyle | undefined) ?? 'default';
-    if (route === 'circuit') {
-      const points = ctx.data?.points;
-      if (Array.isArray(points) && points.length >= 2) {
-
-        return svgPathToPoints(chamferedPolylinePath(points as FlowPoint[]));
+    const points = ctx.data?.points;
+    if (Array.isArray(points) && points.length >= 2) {
+      const pts = (points as FlowPoint[]).slice();
+      const oldA = pts[0]!;
+      const oldB = pts[pts.length - 1]!;
+      pts[0] = { x: ctx.sourceX, y: ctx.sourceY };
+      pts[pts.length - 1] = { x: ctx.targetX, y: ctx.targetY };
+      if (pts.length > 2) {
+        const s2 = pts[1]!;
+        const sL = pts[pts.length - 2]!;
+        if (s2.x === oldA.x) s2.x = ctx.sourceX;
+        if (s2.y === oldA.y) s2.y = ctx.sourceY;
+        if (sL.x === oldB.x) sL.x = ctx.targetX;
+        if (sL.y === oldB.y) sL.y = ctx.targetY;
       }
+      if (
+        pts.length === 2 &&
+        pts[0].x !== pts[1].x &&
+        pts[0].y !== pts[1].y
+      ) {
+        const mid = (pts[0].x + pts[1].x) / 2;
+        pts.splice(1, 0, { x: mid, y: pts[0].y }, { x: mid, y: pts[1].y });
+      }
+      return svgPathToPoints(roundedPolylinePath(pts, 12), 8);
     }
-    const anchors = {
-      sourceX: ctx.sourceX,
-      sourceY: ctx.sourceY,
-      sourcePosition: ctx.sourcePosition,
-      targetX: ctx.targetX,
-      targetY: ctx.targetY,
-      targetPosition: ctx.targetPosition,
-    };
-    if (route === 'straight') {
-      return [
-        { x: ctx.sourceX, y: ctx.sourceY },
-        { x: ctx.targetX, y: ctx.targetY },
-      ];
-    }
-    if (route === 'default') {
-      return svgPathToPoints(getBezierPath(anchors)[0]);
-    }
-
     return svgPathToPoints(
       getSmoothStepPath({
-        ...anchors,
-        borderRadius: route === 'smoothstep' ? 10 : 0,
+        sourceX: ctx.sourceX,
+        sourceY: ctx.sourceY,
+        sourcePosition: ctx.sourcePosition,
+        targetX: ctx.targetX,
+        targetY: ctx.targetY,
+        targetPosition: ctx.targetPosition,
+        borderRadius: 10,
       })[0],
     );
   },
 });
+