@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

package/src/hooks/calc/flow/use-window.ts

@@ -0,0 +1,87 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useStore, useStoreApi } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import { flowContentBox } from '@terrafirmagreg-team/ui/lib/canvas/geometry';
+import {
+  CALC_NODE_H,
+  CALC_NODE_W,
+  type AnyCalcFlowNode,
+} from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import type { Edge } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+
+const CALC_VIRTUAL_MIN = 350;
+
+export function useFlowWindow({
+  mergedFlow,
+  focusId,
+  draggedIds,
+}: {
+  mergedFlow: { nodes: AnyCalcFlowNode[]; edges: Edge[] };
+  focusId: string | null;
+  draggedIds: ReadonlySet<string>;
+}) {
+  const storeApi = useStoreApi();
+  const winKey = useStore((s) => {
+    const [tx, ty, z] = s.transform;
+    if (!s.width || !s.height || !z) return 'cold';
+    const w = s.width / z;
+    const h = s.height / z;
+    return `${Math.floor(-tx / z / w)}:${Math.floor(-ty / z / h)}:${Math.round(z * 4)}`;
+  });
+  const fullBox = useMemo(
+    () => flowContentBox(mergedFlow.nodes),
+    [mergedFlow.nodes],
+  );
+
+  const extraRects = useMemo(
+    () =>
+      fullBox
+        ? [
+            {
+              x: fullBox.midX,
+              y: fullBox.midY,
+              width: fullBox.width,
+              height: fullBox.height,
+            },
+          ]
+        : undefined,
+    [fullBox],
+  );
+  const computed = useMemo(() => {
+    if (mergedFlow.nodes.length <= CALC_VIRTUAL_MIN || winKey === 'cold') {
+      return mergedFlow;
+    }
+    const s = storeApi.getState();
+    const [tx, ty, z] = s.transform;
+    if (!s.width || !s.height || !z) return mergedFlow;
+    const vw = s.width / z;
+    const vh = s.height / z;
+    const left = -tx / z - vw;
+    const right = -tx / z + 2 * vw;
+    const top = -ty / z - vh;
+    const bottom = -ty / z + 2 * vh;
+    const nodes = mergedFlow.nodes.filter((node) => {
+      if (draggedIds.has(node.id) || node.id === focusId) return true;
+      const halfW = (node.width ?? CALC_NODE_W) / 2;
+      const halfH = (node.height ?? CALC_NODE_H) / 2;
+      return (
+        node.position.x + halfW >= left &&
+        node.position.x - halfW <= right &&
+        node.position.y + halfH >= top &&
+        node.position.y - halfH <= bottom
+      );
+    });
+    if (nodes.length === mergedFlow.nodes.length) return mergedFlow;
+    const ids = new Set(nodes.map((node) => node.id));
+    return {
+      nodes,
+      edges: mergedFlow.edges.filter(
+        (edge) => ids.has(edge.source) && ids.has(edge.target),
+      ),
+    };
+  }, [mergedFlow, winKey, focusId, draggedIds, storeApi]);
+
+  return { computed, extraRects };
+}
+

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

@@ -0,0 +1,355 @@
+'use client';
+
+import {
+  useCallback,
+  useMemo,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+import { useCopyButton } from '@terrafirmagreg-team/ui/hooks/use-copy-button';
+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,
+  CalcNode,
+  CalculatorState,
+  CalcWire,
+} from '@terrafirmagreg-team/recipe/types/calc';
+import type { CalcFlowData } from '@terrafirmagreg-team/recipe/lib/calc/flow';
+
+let cardSeq = 0;
+const newCardId = () =>
+  `c${Date.now().toString(36)}${(cardSeq += 1).toString(36)}`;
+
+export function useCalcActions({
+  dataset,
+  lang,
+  cards,
+  wires,
+  tagSelections,
+  persist,
+  recipeDefaults,
+  setRecipeDefault,
+  recipeBody,
+  encodeShare,
+  flushAmounts,
+  setFocusNodeId,
+  nodes,
+}: {
+  dataset: DatasetRef;
+  lang: Lang;
+  cards: CalcCard[];
+  wires: CalcWire[];
+  tagSelections: Record<string, string>;
+  persist: (next: CalculatorState) => void;
+  recipeDefaults: Record<string, string>;
+  setRecipeDefault: (materialId: string, recipeId: string | null) => void;
+  recipeBody: (recipeId: string) => Recipe | undefined;
+  encodeShare: () => string;
+  flushAmounts: () => CalcCard[];
+  setFocusNodeId: Dispatch<SetStateAction<string | null>>;
+  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(datasetId)}${version ? `?version=${encodeURIComponent(version)}` : ''}`,
+        {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ tree }),
+        },
+      ).then((r) => (r.ok ? r.json() : null))) as {
+        id?: string;
+        dataset?: DatasetRef;
+      } | null;
+      if (res?.id) {
+        await navigator.clipboard.writeText(
+          `${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 write = useCallback(
+    (next: Partial<Pick<CalculatorState, 'cards' | 'wires' | 'tagSelections'>>) => {
+      persist({
+        cards: next.cards ?? flushAmounts(),
+        wires: next.wires ?? wires,
+        tagSelections: next.tagSelections ?? tagSelections,
+      });
+    },
+    [flushAmounts, persist, wires, tagSelections],
+  );
+
+  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 });
+    },
+    [cards, wires, write],
+  );
+
+  const onSelectTagMember = useCallback(
+    (tagId: string, memberId: string) => {
+      write({ tagSelections: { ...tagSelections, [tagId]: memberId } });
+    },
+    [tagSelections, write],
+  );
+
+  const onAddCard = useCallback(
+    (materialId: string, kind: CalcKind, pos?: { x: number; y: number }) => {
+      const id = newCardId();
+      persist({
+        cards: [
+          ...flushAmounts(),
+          { id, materialId, kind, recipeId: null, crafts: 1, pos },
+        ],
+        wires,
+        tagSelections,
+      });
+      setFocusNodeId(id);
+      return id;
+    },
+    [flushAmounts, persist, wires, tagSelections, setFocusNodeId],
+  );
+
+  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({
+        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,
+      });
+      return id;
+    },
+    [nodes, cards, wires, flushAmounts, persist, tagSelections],
+  );
+
+  const onOpenItem = useCallback(
+    (materialId: string, kind: CalcKind) => {
+      window.open(
+        recipeStackHref(dataset, lang, materialId, { kind }),
+        '_blank',
+        'noopener',
+      );
+    },
+    [dataset, lang],
+  );
+
+  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,
+        ),
+      });
+    },
+    [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(() => {
+    persist({
+      cards: [],
+      wires: [],
+      tagSelections: {},
+    });
+  }, [persist]);
+
+  const flowData = useMemo<
+    Omit<
+      CalcFlowData,
+      | 'node'
+      | 'mode'
+      | 'direction'
+      | 'onRequestPicker'
+      | 'onRequestMemberPicker'
+      | 'onRequestSupply'
+      | 'onCrafts'
+      | 'getRecipesForItem'
+      | 'ensureMaterial'
+    >
+  >(
+    () => ({
+      dataset,
+      recipeBody,
+      onSelectRecipe,
+      onSelectTagMember,
+      onSupplyInput,
+      onAddCard,
+      onOpenItem,
+      onRemoveCard,
+      onMoveCard,
+      onWire,
+      onUnwire,
+      onRewire,
+      onWireAmount,
+      recipeDefaults,
+      onSetRecipeDefault: setRecipeDefault,
+    }),
+    [
+      dataset,
+      recipeBody,
+      onSelectRecipe,
+      onSelectTagMember,
+      onSupplyInput,
+      onAddCard,
+      onOpenItem,
+      onRemoveCard,
+      onMoveCard,
+      onWire,
+      onUnwire,
+      onRewire,
+      onWireAmount,
+      recipeDefaults,
+      setRecipeDefault,
+    ],
+  );
+
+  return {
+    shared,
+    onShare,
+    flowData,
+    onAddCard,
+    onRemoveCard,
+    onMoveCards,
+    onSupplyInput,
+    onClear,
+  };
+}
+

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

@@ -0,0 +1,64 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type {
+  CalcCard,
+  CalcWire,
+  CalculatorState,
+} from '@terrafirmagreg-team/recipe/types/calc';
+
+export function useCalcAmounts({
+  cards,
+  wires,
+  tagSelections,
+  persist,
+}: {
+  cards: CalcCard[];
+  wires: CalcWire[];
+  tagSelections: Record<string, string>;
+  persist: (next: CalculatorState) => void;
+}) {
+  const [pending, setPending] = useState<CalcCard[] | null>(null);
+  const amountTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(
+    () => () => {
+      if (amountTimer.current) clearTimeout(amountTimer.current);
+    },
+    [],
+  );
+
+  const flushAmounts = useCallback((): CalcCard[] => {
+    if (amountTimer.current) {
+      clearTimeout(amountTimer.current);
+      amountTimer.current = undefined;
+    }
+    if (!pending) return cards;
+    setPending(null);
+    return pending;
+  }, [pending, cards]);
+
+  const onCrafts = useCallback(
+    (cardId: string, crafts: number) => {
+      const base = pending ?? cards;
+      const next = base.map((card) =>
+        card.id === cardId ? { ...card, crafts: Math.max(1, crafts) } : card,
+      );
+      setPending(next);
+      if (amountTimer.current) clearTimeout(amountTimer.current);
+      amountTimer.current = setTimeout(() => {
+        amountTimer.current = undefined;
+        setPending(null);
+        persist({ cards: next, wires, tagSelections });
+      }, 300);
+    },
+    [pending, cards, persist, wires, tagSelections],
+  );
+
+  return {
+    displayCards: pending ?? cards,
+    flushAmounts,
+    onCrafts,
+  };
+}
+

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

@@ -0,0 +1,203 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import { encodeCalcState } from '@terrafirmagreg-team/recipe/lib/calc/tree';
+import {
+  summaryCacheFor,
+  summarizeRecipes,
+} from '@terrafirmagreg-team/recipe/lib/calc/resolve';
+import { buildScheme, schemeSummary } from '@terrafirmagreg-team/recipe/lib/calc/scheme';
+import { calcStorageKey } from '@terrafirmagreg-team/recipe/lib/calc/storage';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+import type {
+  CalcKind,
+  CalcRecipeSummary,
+} from '@terrafirmagreg-team/recipe/types/calc';
+import { useCalcStorage } from './use-storage';
+import { useCalcShare } from './use-share';
+import { useCalcMaps } from './use-maps';
+import { useCalcWorker } from './use-worker';
+import { useCalcResolver } from './use-resolver';
+import { useRecipeDefaults } from './use-defaults';
+
+export function useCalcData(session: RecipeSession) {
+  const { dataset, lang } = session;
+  const catalog = session.index;
+  const storageKey = calcStorageKey('recipe', dataset);
+  const sharePending = useCalcShare({
+    storageKey,
+    dataset,
+    lang,
+    incoming: session.tree ?? '',
+  });
+  const {
+    calcState,
+    tabs,
+    activeTabId,
+    history,
+    persist,
+    openTab,
+    openEntry,
+    closeTab,
+    newTab,
+    renameTab,
+    setTabIcon,
+    removeHistory,
+  } = useCalcStorage(storageKey);
+  const { defaults, setRecipeDefault } = useRecipeDefaults(dataset);
+  const { maps, data, applyMaps, resetMaps } = useCalcMaps();
+  const { bodyMap } = maps;
+  const {
+    outMap: dataOutMap,
+    recipeMap: dataRecipeMap,
+    tagMap: dataTagMap,
+    deadIds: dataDeadIds,
+  } = data;
+
+  const cards = useMemo(() => calcState?.cards ?? [], [calcState]);
+  const wires = useMemo(() => calcState?.wires ?? [], [calcState]);
+  const tagSelections = useMemo(
+    () => calcState?.tagSelections ?? {},
+    [calcState],
+  );
+
+  const getRecipesForItem = useCallback(
+    (materialId: string, kind: CalcKind): CalcRecipeSummary[] => {
+      if (!catalog) return [];
+      return summarizeRecipes(
+        dataOutMap,
+        dataRecipeMap,
+        catalog.types,
+        summaryCacheFor(dataOutMap, dataRecipeMap),
+        materialId,
+        kind,
+      );
+    },
+    [catalog, dataOutMap, dataRecipeMap],
+  );
+
+  const tagMembers = useCallback(
+    (tagId: string) => dataTagMap.get(tagId),
+    [dataTagMap],
+  );
+
+  const { nodes, flows } = useMemo(
+    () =>
+      buildScheme({
+        cards,
+        wires,
+        ctx: {
+          recipeMap: dataRecipeMap,
+          getRecipesForItem,
+          tagMembers,
+          tagSelections,
+          recipesResolved: (id) => dataOutMap.has(id),
+          deadIds: dataDeadIds,
+        },
+      }),
+    [
+      cards,
+      wires,
+      dataRecipeMap,
+      getRecipesForItem,
+      tagMembers,
+      tagSelections,
+      dataOutMap,
+      dataDeadIds,
+    ],
+  );
+
+  const summary = useMemo(() => schemeSummary(nodes), [nodes]);
+
+  const inputKey = useMemo(
+    () => JSON.stringify([cards, wires, tagSelections]),
+    [cards, wires, tagSelections],
+  );
+
+  const worker = useCalcWorker({
+    dataset,
+    catalog,
+    activeTabId,
+    applyMaps,
+    resetMaps,
+  });
+
+  useCalcResolver({
+    catalog,
+    inputKey,
+    cards,
+    recipeMap: dataRecipeMap,
+    worker,
+  });
+
+  const dataSettled = useMemo(() => {
+    for (const card of cards) {
+      if (!dataOutMap.has(card.materialId)) return false;
+      if (
+        card.recipeId &&
+        !dataRecipeMap.has(card.recipeId) &&
+        !dataDeadIds.has(card.recipeId)
+      ) {
+        return false;
+      }
+    }
+    return true;
+  }, [cards, dataOutMap, dataRecipeMap, dataDeadIds]);
+  const settled = dataSettled && !sharePending;
+
+  const encodeShare = useCallback(
+    () =>
+      encodeCalcState({
+        cards,
+        wires,
+        tagSelections,
+      }),
+    [cards, wires, tagSelections],
+  );
+
+  const recipeBody = useCallback(
+    (recipeId: string) => bodyMap.get(recipeId),
+    [bodyMap],
+  );
+
+  const ensureMaterial = useCallback(
+    (materialId: string) => {
+      if (dataOutMap.has(materialId)) return;
+      void worker
+        .call((api) => api.resolve({ materials: [materialId] }))
+        .catch(() => {});
+    },
+    [dataOutMap, worker],
+  );
+
+  return {
+    cards,
+    wires,
+    tagSelections,
+    tabs,
+    activeTabId,
+    history,
+    openTab,
+    openEntry,
+    closeTab,
+    newTab,
+    renameTab,
+    setTabIcon,
+    removeHistory,
+    recipeDefaults: defaults,
+    setRecipeDefault,
+    getRecipesForItem,
+    ensureMaterial,
+    tagMembers,
+    nodes,
+    flows,
+    summary,
+    persist,
+    encodeShare,
+    recipeBody,
+    settled,
+    bodiesLoaded: maps.bodyMap.size,
+    workerSettled: worker.settled,
+  };
+}
+