@terrafirmagreg-team/recipe 0.1.0 → 1.2.0

package/src/hooks/calc/flow/{viewport.ts → use-viewport.ts}

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import {
   useCallback,
@@ -10,24 +11,16 @@ import {
 import { useReactFlow } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
 import type {
   AnyCalcFlowNode,
-  CalcDensity,
   CalcFlowNode,
   CalcViewMode,
 } from '@terrafirmagreg-team/recipe/lib/calc/flow';
-import type { CalcDirection } from '@terrafirmagreg-team/recipe/lib/calc/flow';
-import type { CalcGoal } from '@terrafirmagreg-team/recipe/lib/calc/tree';
 
 export function useFlowViewport({
-  goals,
   mergedNodes,
   dataset,
-  direction,
   resetGen,
   treeReady,
-  layoutKey,
-  layout,
   mode,
-  density,
   applyFocus,
   focusSeqRef,
   focusRef,
@@ -35,16 +28,11 @@ export function useFlowViewport({
   onFocusedNode,
   focusId,
 }: {
-  goals: CalcGoal[];
   mergedNodes: AnyCalcFlowNode[];
-  dataset: string;
-  direction: CalcDirection;
+  dataset: DatasetRef;
   resetGen: number;
   treeReady: boolean;
-  layoutKey: string;
-  layout: { key: string } | null;
   mode: CalcViewMode;
-  density: CalcDensity;
   applyFocus: (id: string | null) => void;
   focusSeqRef: RefObject<{ id: string; index: number } | null>;
   focusRef?: RefObject<((materialId: string) => void) | null>;
@@ -54,10 +42,9 @@ export function useFlowViewport({
 }) {
   const { setCenter, getZoom } = useReactFlow();
   const userMovedRef = useRef(false);
-  const storageKey = `calc:${dataset}`;
+  const storageKey = `calc:${dataset.id}/${dataset.version ?? ''}`;
 
-  const layoutReady = !goals.length || layout?.key === layoutKey;
-  const ready = treeReady && layoutReady;
+  const ready = treeReady;
 
   const centerOnNode = useCallback(
     (node: AnyCalcFlowNode) => {
@@ -106,16 +93,15 @@ export function useFlowViewport({
   }, [mergedNodes, focusNodeId, applyFocus, centerOnNode, onFocusedNode]);
 
   const recenterRef = useRef(false);
-  const viewSigRef = useRef(`${mode}|${density}`);
+  const viewSigRef = useRef(mode);
   useEffect(() => {
-    const sig = `${mode}|${density}`;
-    if (viewSigRef.current === sig) return;
-    viewSigRef.current = sig;
+    if (viewSigRef.current === mode) return;
+    viewSigRef.current = mode;
     recenterRef.current = true;
-  }, [mode, density]);
+  }, [mode]);
   useEffect(() => {
     if (!ready || !recenterRef.current) return;
-    const root = mergedNodes.find((entry) => entry.id === 'g0');
+    const root = mergedNodes[0];
     if (root) centerOnNode(root as AnyCalcFlowNode);
     recenterRef.current = false;
   }, [ready, mergedNodes, centerOnNode]);
@@ -127,16 +113,16 @@ export function useFlowViewport({
   const viewportConfig = useMemo(
     () => ({
       storageKey,
-      resetKey: `${storageKey}:${direction}:${resetGen}`,
+      resetKey: `${storageKey}:${resetGen}`,
       selectedId: focusId,
       userMovedRef,
-      initFocusId: goals.length ? 'g0' : null,
+      initFocusId: null,
       focusZoom: 1,
       minZoom: 0.02,
       restoreViewport: false,
       ready,
     }),
-    [storageKey, direction, resetGen, focusId, goals.length, ready],
+    [storageKey, resetGen, focusId, ready],
   );
   const shellProps = useMemo(
     () => ({ 'data-ready': ready ? ('true' as const) : ('false' as const) }),
@@ -152,3 +138,4 @@ export function useFlowViewport({
     shellProps,
   };
 }
+

package/src/hooks/calc/flow/{window.ts → use-window.ts}

@@ -84,3 +84,4 @@ export function useFlowWindow({
 
   return { computed, extraRects };
 }
+

package/src/hooks/calc/use-actions.ts

@@ -7,33 +7,29 @@ import {
   type SetStateAction,
 } from 'react';
 import { useCopyButton } from '@terrafirmagreg-team/ui/hooks/use-copy-button';
-import type { CalcGoal } from '@terrafirmagreg-team/recipe/lib/calc/tree';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 import { recipeCalcHref, recipeStackHref } from '@terrafirmagreg-team/recipe/lib/links';
 import type { Recipe } from '@terrafirmagreg-team/recipe/lib/data/dto';
 import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
 import type {
+  CalcCard,
   CalcKind,
-  CalcMaterial,
   CalcNode,
   CalculatorState,
-  CalculatorTarget,
+  CalcWire,
 } from '@terrafirmagreg-team/recipe/types/calc';
 import type { CalcFlowData } from '@terrafirmagreg-team/recipe/lib/calc/flow';
 
-const treeKeys = (selections: Record<string, string>) =>
-  Object.fromEntries(
-    Object.entries(selections).filter(([key]) => !/^g\d/.test(key)),
-  );
+let cardSeq = 0;
+const newCardId = () =>
+  `c${Date.now().toString(36)}${(cardSeq += 1).toString(36)}`;
 
 export function useCalcActions({
   dataset,
   lang,
-  selections,
+  cards,
+  wires,
   tagSelections,
-  collapsed,
-  auto,
-  goal,
-  ideal,
   persist,
   recipeDefaults,
   setRecipeDefault,
@@ -41,33 +37,28 @@ export function useCalcActions({
   encodeShare,
   flushAmounts,
   setFocusNodeId,
-  onFillNode,
+  nodes,
 }: {
-  dataset: string;
+  dataset: DatasetRef;
   lang: Lang;
-  selections: Record<string, string>;
+  cards: CalcCard[];
+  wires: CalcWire[];
   tagSelections: Record<string, string>;
-  collapsed: string[];
-  auto: string[];
-  goal: CalcGoal | null;
-  ideal: number;
   persist: (next: CalculatorState) => void;
   recipeDefaults: Record<string, string>;
   setRecipeDefault: (materialId: string, recipeId: string | null) => void;
   recipeBody: (recipeId: string) => Recipe | undefined;
   encodeShare: () => string;
-  flushAmounts: () => {
-    target: CalculatorTarget | null;
-    inventory: CalcMaterial[];
-  };
+  flushAmounts: () => CalcCard[];
   setFocusNodeId: Dispatch<SetStateAction<string | null>>;
-  onFillNode: (path: string) => void;
+  nodes: CalcNode[];
 }) {
   const { checked: shared, onClick: onShare } = useCopyButton(async () => {
     const tree = encodeShare();
+    const { id: datasetId, version } = dataset;
     try {
       const res = (await fetch(
-        `/api/share/recipe/${encodeURIComponent(dataset)}`,
+        `/api/share/recipe/${encodeURIComponent(datasetId)}${version ? `?version=${encodeURIComponent(version)}` : ''}`,
         {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
@@ -75,215 +66,110 @@ export function useCalcActions({
         },
       ).then((r) => (r.ok ? r.json() : null))) as {
         id?: string;
+        dataset?: DatasetRef;
       } | null;
       if (res?.id) {
         await navigator.clipboard.writeText(
-          `${window.location.origin}${recipeCalcHref(dataset, undefined, `s${res.id}`)}`,
+          `${window.location.origin}${recipeCalcHref(res.dataset ?? dataset, undefined, `s${res.id}`)}`,
         );
         return;
       }
     } catch {
-
     }
     await navigator.clipboard.writeText(
       `${window.location.origin}${recipeCalcHref(dataset, undefined, tree)}`,
     );
   });
 
-  const onSelectRecipe = useCallback(
-    (key: string, recipeId: string | null) => {
-      const next = { ...selections };
-      const changed = selections[key] !== recipeId;
-      if (recipeId) next[key] = recipeId;
-      else delete next[key];
-      const descendant = changed && /^g\d/.test(key);
-      if (descendant) {
-        for (const path of Object.keys(next)) {
-          if (path.startsWith(`${key}/`)) delete next[path];
-        }
-      }
+  const write = useCallback(
+    (next: Partial<Pick<CalculatorState, 'cards' | 'wires' | 'tagSelections'>>) => {
       persist({
-        ...flushAmounts(),
-        selections: next,
-        tagSelections,
-        collapsed: collapsed.filter(
-          (path) =>
-            path !== key && !(descendant && path.startsWith(`${key}/`)),
-        ),
-        auto: descendant
-          ? auto.filter((path) => !path.startsWith(`${key}/`))
-          : auto,
+        cards: next.cards ?? flushAmounts(),
+        wires: next.wires ?? wires,
+        tagSelections: next.tagSelections ?? tagSelections,
       });
     },
-    [
-      selections,
-      persist,
-      tagSelections,
-      collapsed,
-      auto,
-      flushAmounts,
-    ],
+    [flushAmounts, persist, wires, tagSelections],
   );
 
-  const onCollapseNode = useCallback(
-    (path: string) => {
-      const next = { ...selections };
-      delete next[path];
-      for (const key of Object.keys(next)) {
-        if (key.startsWith(`${path}/`)) delete next[key];
-      }
-      persist({
-        ...flushAmounts(),
-        selections: next,
-        tagSelections,
-        collapsed: collapsed.includes(path)
-          ? collapsed
-          : [...collapsed, path],
-        auto,
-      });
+  const onSelectRecipe = useCallback(
+    (cardId: string, recipeId: string | null) => {
+      if (!cards.some((row) => row.id === cardId)) return;
+      const nextCards = cards.map((row) =>
+        row.id === cardId ? { ...row, recipeId } : row,
+      );
+      const nextWires = recipeId
+        ? wires
+        : wires.filter((wire) => wire.to !== cardId);
+      write({ cards: nextCards, wires: nextWires });
     },
-    [selections, persist, tagSelections, collapsed, auto, flushAmounts],
+    [cards, wires, write],
   );
 
   const onSelectTagMember = useCallback(
     (tagId: string, memberId: string) => {
-      const next = { ...tagSelections, [tagId]: memberId };
-
-      const paths: string[] = [];
-      const walk = (n: CalcNode) => {
-        if (n.tagId === tagId && n.path) paths.push(n.path);
-        n.children.forEach(walk);
-      };
-      if (goal) walk(goal.node);
-      const hitsSelf = (key: string) =>
-        paths.some((p) => key === p || key.startsWith(`${p}/`));
-      const hitsDescendant = (key: string) =>
-        paths.some((p) => key.startsWith(`${p}/`));
-      persist({
-        ...flushAmounts(),
-        selections: paths.length
-          ? Object.fromEntries(
-              Object.entries(selections).filter(
-                ([key]) => !hitsSelf(key),
-              ),
-            )
-          : selections,
-        tagSelections: next,
-        collapsed: paths.length
-          ? collapsed.filter((path) => !hitsDescendant(path))
-          : collapsed,
-        auto: paths.length
-          ? auto.filter((path) => !hitsDescendant(path))
-          : auto,
-      });
+      write({ tagSelections: { ...tagSelections, [tagId]: memberId } });
     },
-    [
-      tagSelections,
-      persist,
-      selections,
-      collapsed,
-      auto,
-      flushAmounts,
-      goal,
-    ],
+    [tagSelections, write],
   );
 
-  const onSetTarget = useCallback(
-    (materialId: string, kind: CalcKind) => {
-      const cur = flushAmounts();
-      setFocusNodeId('g0');
-      if (cur.target?.id === materialId && cur.target.kind === kind) {
-        return;
-      }
+  const onAddCard = useCallback(
+    (materialId: string, kind: CalcKind, pos?: { x: number; y: number }) => {
+      const id = newCardId();
       persist({
-        target: { id: materialId, kind, amount: 1 },
-        inventory: cur.inventory,
-        selections: treeKeys(selections),
+        cards: [
+          ...flushAmounts(),
+          { id, materialId, kind, recipeId: null, crafts: 1, pos },
+        ],
+        wires,
         tagSelections,
-        collapsed: [],
-        auto: [],
       });
+      setFocusNodeId(id);
+      return id;
     },
-    [persist, selections, tagSelections, flushAmounts, setFocusNodeId],
+    [flushAmounts, persist, wires, tagSelections, setFocusNodeId],
   );
 
-  const onAddStock = useCallback(
-    (materialId: string, kind: CalcKind) => {
-      const cur = flushAmounts();
-      const index = cur.inventory.findIndex(
-        (row) => row.id === materialId && row.kind === kind,
-      );
-      const inventory =
-        index >= 0
-          ? cur.inventory.map((row, i) =>
-              i === index ? { ...row, amount: row.amount + 1 } : row,
-            )
-          : [...cur.inventory, { id: materialId, kind, amount: 1 }];
-      persist({
-        target: cur.target,
-        inventory,
-        selections,
-        tagSelections,
-        collapsed,
-        auto,
-      });
-    },
-    [
-      persist,
-      selections,
-      tagSelections,
-      collapsed,
-      auto,
-      flushAmounts,
-    ],
-  );
-
-  const onRemoveStock = useCallback(
-    (index: number) => {
-      const cur = flushAmounts();
+  const onSupplyInput = useCallback(
+    (cardId: string, inputIndex: number, recipeId: string | null, outputAmount?: number) => {
+      const consumerNode = nodes.find((n) => n.id === cardId);
+      const consumerCard = cards.find((row) => row.id === cardId);
+      const input = consumerNode?.inputs[inputIndex];
+      if (!consumerNode || !consumerCard || !input?.id) return null;
+      const need = Math.max(1, input.amount - input.covered);
+      const crafts = recipeId && outputAmount
+        ? Math.max(1, Math.ceil(need / outputAmount))
+        : need;
+      const base = consumerCard.pos;
+      const id = newCardId();
+      const nextWires = [
+        ...wires.filter(
+          (wire) => !(wire.to === cardId && wire.input === inputIndex),
+        ),
+        { from: id, to: cardId, input: inputIndex },
+      ];
       persist({
-        target: cur.target,
-        inventory: cur.inventory.filter((_, i) => i !== index),
-        selections,
+        cards: [
+          ...flushAmounts(),
+          {
+            id,
+            materialId: input.id,
+            kind: input.kind,
+            recipeId,
+            crafts,
+            pos: base
+              ? { x: base.x - 40, y: base.y + 140 + inputIndex * 24 }
+              : undefined,
+          },
+        ],
+        wires: nextWires,
         tagSelections,
-        collapsed,
-        auto,
       });
+      return id;
     },
-    [
-      persist,
-      selections,
-      tagSelections,
-      collapsed,
-      auto,
-      flushAmounts,
-    ],
+    [nodes, cards, wires, flushAmounts, persist, tagSelections],
   );
 
-  const onApplyIdeal = useCallback(() => {
-    const cur = flushAmounts();
-    if (!cur.target || !Number.isFinite(ideal) || ideal <= 1) return;
-    persist({
-      target: {
-        ...cur.target,
-        amount: Math.ceil(cur.target.amount * ideal),
-      },
-      inventory: cur.inventory,
-      selections,
-      tagSelections,
-      collapsed,
-      auto,
-    });
-  }, [
-    persist,
-    selections,
-    tagSelections,
-    collapsed,
-    auto,
-    flushAmounts,
-    ideal,
-  ]);
-
   const onOpenItem = useCallback(
     (materialId: string, kind: CalcKind) => {
       window.open(
@@ -295,32 +181,115 @@ export function useCalcActions({
     [dataset, lang],
   );
 
-  const onRemoveTarget = useCallback(
-    (_flowId?: string) => {
-      const cur = flushAmounts();
-      persist({
-        target: null,
-        inventory: cur.inventory,
-        selections: treeKeys(selections),
-        tagSelections,
-        collapsed: [],
-        auto: [],
+  const onRemoveCard = useCallback(
+    (cardId: string) => {
+      write({
+        cards: flushAmounts().filter((row) => row.id !== cardId),
+        wires: wires.filter(
+          (wire) => wire.from !== cardId && wire.to !== cardId,
+        ),
+      });
+    },
+    [flushAmounts, write, wires],
+  );
+
+  const onMoveCard = useCallback(
+    (cardId: string, pos: { x: number; y: number }) => {
+      write({
+        cards: flushAmounts().map((row) =>
+          row.id === cardId ? { ...row, pos } : row,
+        ),
       });
     },
-    [persist, selections, tagSelections, flushAmounts],
+    [flushAmounts, write],
+  );
+
+  const onMoveCards = useCallback(
+    (positions: Map<string, { x: number; y: number }>) => {
+      write({
+        cards: flushAmounts().map((row) => {
+          const pos = positions.get(row.id);
+          return pos ? { ...row, pos } : row;
+        }),
+      });
+    },
+    [flushAmounts, write],
+  );
+
+  const onWire = useCallback(
+    (from: string, to: string, input: number, out?: number) => {
+      if (from === to) return;
+      write({
+        wires: [
+          ...wires.filter(
+            (wire) => !(wire.to === to && wire.input === input),
+          ),
+          { from, to, input, out: out || undefined },
+        ],
+      });
+    },
+    [wires, write],
+  );
+
+  const onUnwire = useCallback(
+    (from: string, to: string, input: number, out?: number) => {
+      write({
+        wires: wires.filter(
+          (wire) =>
+            !(
+              wire.from === from &&
+              wire.to === to &&
+              wire.input === input &&
+              (wire.out ?? 0) === (out ?? 0)
+            ),
+        ),
+      });
+    },
+    [wires, write],
+  );
+
+  const onRewire = useCallback(
+    (
+      from: string,
+      to: string,
+      input: number,
+      next: { from: string; to: string; input: number; out?: number },
+    ) => {
+      if (next.from === next.to) return;
+      write({
+        wires: [
+          ...wires.filter(
+            (wire) =>
+              !(wire.from === from && wire.to === to && wire.input === input) &&
+              !(wire.to === next.to && wire.input === next.input),
+          ),
+          next,
+        ],
+      });
+    },
+    [wires, write],
+  );
+
+  const onWireAmount = useCallback(
+    (from: string, to: string, input: number, amount: number | null) => {
+      write({
+        wires: wires.map((wire) =>
+          wire.from === from && wire.to === to && wire.input === input
+            ? { ...wire, amount: amount ?? undefined }
+            : wire,
+        ),
+      });
+    },
+    [wires, write],
   );
 
   const onClear = useCallback(() => {
-    const cur = flushAmounts();
     persist({
-      target: null,
-      inventory: cur.inventory,
-      selections: {},
+      cards: [],
+      wires: [],
       tagSelections: {},
-      collapsed: [],
-      auto: [],
     });
-  }, [flushAmounts, persist]);
+  }, [persist]);
 
   const flowData = useMemo<
     Omit<
@@ -330,6 +299,10 @@ export function useCalcActions({
       | 'direction'
       | 'onRequestPicker'
       | 'onRequestMemberPicker'
+      | 'onRequestSupply'
+      | 'onCrafts'
+      | 'getRecipesForItem'
+      | 'ensureMaterial'
     >
   >(
     () => ({
@@ -337,28 +310,34 @@ export function useCalcActions({
       recipeBody,
       onSelectRecipe,
       onSelectTagMember,
-      onSetTarget,
-      onAddStock,
+      onSupplyInput,
+      onAddCard,
       onOpenItem,
+      onRemoveCard,
+      onMoveCard,
+      onWire,
+      onUnwire,
+      onRewire,
+      onWireAmount,
       recipeDefaults,
       onSetRecipeDefault: setRecipeDefault,
-      onFillNode,
-      onCollapseNode,
-      onRemoveTarget,
     }),
     [
       dataset,
       recipeBody,
       onSelectRecipe,
       onSelectTagMember,
-      onSetTarget,
-      onAddStock,
+      onSupplyInput,
+      onAddCard,
       onOpenItem,
+      onRemoveCard,
+      onMoveCard,
+      onWire,
+      onUnwire,
+      onRewire,
+      onWireAmount,
       recipeDefaults,
       setRecipeDefault,
-      onFillNode,
-      onCollapseNode,
-      onRemoveTarget,
     ],
   );
 
@@ -366,11 +345,11 @@ export function useCalcActions({
     shared,
     onShare,
     flowData,
-    onSetTarget,
-    onAddStock,
-    onRemoveStock,
-    onApplyIdeal,
-    onRemoveTarget,
+    onAddCard,
+    onRemoveCard,
+    onMoveCards,
+    onSupplyInput,
     onClear,
   };
 }
+