@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

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

@@ -0,0 +1,189 @@
+'use client';
+
+import {
+  ArrowUp,
+  ChevronUp,
+  ChevronsUpDown,
+  Eye,
+  Info,
+  Mountain,
+  Move,
+  Scissors,
+  Settings2,
+  SquareMousePointer,
+} from 'lucide-react';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/popover';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+
+export function CalcHelp() {
+  const t = useTranslations();
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={<IconButton overlay label={t('Calculator help', { note: 'recipe.calc.help.title' })} />}
+      >
+        <Info className="size-3.5" />
+      </PopoverTrigger>
+      <PopoverContent side="bottom" align="end" className="w-80 space-y-3 p-3">
+        <section className="space-y-1.5">
+          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+            {t('Nodes', { note: 'recipe.calc.help.sec_nodes' })}
+          </h4>
+          <ul className="space-y-1.5 text-xs text-muted-foreground">
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="size-4 rounded border border-primary/60" />
+              </span>
+              {t('Resolved with a recipe', { note: 'recipe.calc.help.recipe' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="size-4 rounded border border-red-500/70" />
+              </span>
+              {t('Recipe cycle', { note: 'recipe.calc.help.cycle' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="size-3.5 rounded ring-2 ring-primary/70" />
+              </span>
+              {t('Focused node', { note: 'recipe.calc.help.focus' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="rounded border border-emerald-500/40 px-0.5 text-[10px] font-medium leading-3 text-emerald-500">
+                  +N
+                </span>
+              </span>
+              {t('Covered by another card output', { note: 'recipe.calc.help.satisfied' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <Mountain className="size-3.5 text-muted-foreground" />
+              </span>
+              {t('No recipe; raw material', { note: 'recipe.calc.help.source' })}
+            </li>
+          </ul>
+        </section>
+        <section className="space-y-1.5">
+          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+            {t('Ports', { note: 'recipe.calc.help.sec_ports' })}
+          </h4>
+          <ul className="space-y-1.5 text-xs text-muted-foreground">
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="size-3.5 rounded-sm border border-emerald-500" />
+              </span>
+              {t('Input port: click to pick a supplier or drag a wire', { note: 'recipe.calc.help.port_in' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="size-3.5 rounded-sm border border-red-400" />
+              </span>
+              {t('Output port: click to pick a recipe or drag a wire', { note: 'recipe.calc.help.port_out' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="size-3.5 rounded-sm border border-dotted border-emerald-500" />
+              </span>
+              {t('Catalyst: needed but not consumed; wire it or click to pick a supplier', { note: 'recipe.calc.help.port_cat' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <ChevronUp className="size-3.5 text-muted-foreground" />
+              </span>
+              {t('Hidden ports - scroll the rail or click the arrow', { note: 'recipe.calc.help.port_more' })}
+            </li>
+          </ul>
+        </section>
+        <section className="space-y-1.5">
+          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+            {t('Edges', { note: 'recipe.calc.help.sec_edges' })}
+          </h4>
+          <ul className="space-y-1.5 text-xs text-muted-foreground">
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <ArrowUp className="size-3.5 text-muted-foreground" />
+              </span>
+              {t('Arrows flow from ingredient to product', { note: 'recipe.calc.help.edges' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="h-0.5 w-4 rounded bg-teal-500" />
+              </span>
+              {t('Outgoing edges', { note: 'recipe.calc.help.edge_out' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="h-0.5 w-4 rounded bg-yellow-500" />
+              </span>
+              {t('Incoming edges', { note: 'recipe.calc.help.edge_in' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="h-0 w-4 border-t border-dashed border-primary/70" />
+              </span>
+              {t('Drag port to port to link; drag a wire end to retarget', { note: 'recipe.calc.help.edge_link' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="rounded border border-border bg-background px-0.5 text-[9px] leading-3 tabular-nums">
+                  16
+                </span>
+              </span>
+              {t('Flow on a wire - shows on hover; click to cap the amount', { note: 'recipe.calc.help.edge_flow' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <Scissors className="size-3.5 text-muted-foreground" />
+              </span>
+              {t('Shift + hover a wire shows x - click to delete it', { note: 'recipe.calc.help.edge_cut' })}
+            </li>
+          </ul>
+        </section>
+        <section className="space-y-1.5">
+          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+            {t('Actions', { note: 'recipe.calc.help.sec_actions' })}
+          </h4>
+          <ul className="space-y-1.5 text-xs text-muted-foreground">
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <ChevronsUpDown className="size-3.5 text-muted-foreground" />
+              </span>
+              {t('Recipe/tag member: open picker', { note: 'recipe.calc.help.chip' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <Eye className="size-3.5 text-muted-foreground" />
+              </span>
+              {t('Recipe preview', { note: 'recipe.calc.help.hover' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <SquareMousePointer className="size-3.5 text-muted-foreground" />
+              </span>
+              {t('Node context menu', { note: 'recipe.calc.help.ctx' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <Settings2 className="size-3.5 text-muted-foreground" />
+              </span>
+              {t('View modes', { note: 'recipe.calc.help.modes' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <Move className="size-3.5 text-muted-foreground" />
+              </span>
+              {t('Pan and zoom', { note: 'recipe.calc.help.nav' })}
+            </li>
+          </ul>
+        </section>
+      </PopoverContent>
+    </Popover>
+  );
+}
+

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

@@ -0,0 +1,172 @@
+'use client';
+
+import { useDeferredValue, useMemo } from 'react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
+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 { 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 { 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 { useCalcFarMode } from '@terrafirmagreg-team/recipe/hooks/calc/use-far-mode';
+
+export function Calculator({ session }: { session: RecipeSession }) {
+  const t = useTranslations();
+  const { dataset, lang } = session;
+  const [mode, setMode] = useCalcViewMode();
+  const [farCards, setFarCards] = useCalcFarMode();
+  const {
+    cards,
+    wires,
+    tagSelections,
+    tabs,
+    activeTabId,
+    history,
+    openTab,
+    openEntry,
+    closeTab,
+    newTab,
+    renameTab,
+    setTabIcon,
+    removeHistory,
+    recipeDefaults,
+    setRecipeDefault,
+    getRecipesForItem,
+    ensureMaterial,
+    nodes,
+    flows,
+    summary,
+    persist,
+    encodeShare,
+    recipeBody,
+    settled,
+  } = useCalcData(session);
+  const deferredNodes = useDeferredValue(nodes);
+  const deferredFlows = useDeferredValue(flows);
+  const deferredLangMap = useDeferredValue(session.langMap);
+  const { focusNodeRef, onFocusNode, focusNodeId, setFocusNodeId } =
+    useCalcFocus(cards);
+  const { resetGen } = useCalcReset(activeTabId);
+  const { displayCards, flushAmounts, onCrafts } = useCalcAmounts({
+    cards,
+    wires,
+    tagSelections,
+    persist,
+  });
+  const {
+    shared,
+    onShare,
+    flowData,
+    onMoveCards,
+    onClear,
+  } = useCalcActions({
+    dataset,
+    lang,
+    cards: displayCards,
+    wires,
+    tagSelections,
+    persist,
+    recipeDefaults,
+    setRecipeDefault,
+    recipeBody,
+    encodeShare,
+    flushAmounts,
+    setFocusNodeId,
+    nodes: deferredNodes,
+  });
+
+  const iconItems = useMemo(
+    () => [
+      ...(session.index?.items ?? []).map(
+        (id) => ({ id, kind: 'item' as const }),
+      ),
+      ...(session.index?.fluids ?? []).map(
+        (id) => ({ id, kind: 'fluid' as const }),
+      ),
+    ],
+    [session.index],
+  );
+
+  const data = useMemo(
+    () => ({ ...flowData, onCrafts, getRecipesForItem, ensureMaterial }),
+    [flowData, onCrafts, getRecipesForItem, ensureMaterial],
+  );
+
+  return (
+    <>
+      <LeftSidebarPortal>
+        <CalcSidebar
+          dataset={dataset}
+          lang={lang}
+          langMap={deferredLangMap}
+          summary={summary}
+          onFocus={onFocusNode}
+          trees={{
+            tabs,
+            activeId: activeTabId,
+            history,
+            iconItems,
+            onOpen: openTab,
+            onOpenEntry: openEntry,
+            onClose: closeTab,
+            onRename: renameTab,
+            onSetIcon: setTabIcon,
+            onNew: newTab,
+            onRemoveHistory: removeHistory,
+          }}
+        />
+      </LeftSidebarPortal>
+      <CalcFlow
+        nodes={deferredNodes}
+        wires={wires}
+        flows={deferredFlows}
+        cards={displayCards}
+        dataset={dataset}
+        session={session}
+        data={data}
+        mode={mode}
+        onModeChange={setMode}
+        farCards={farCards}
+        onFarCardsChange={setFarCards}
+        treeReady={settled}
+        resetGen={resetGen}
+        canvasId={activeTabId ?? undefined}
+        onRelayout={onMoveCards}
+        actions={
+          <CalcActions
+            session={session}
+            shared={shared}
+            onShare={onShare}
+            hasTargets={displayCards.length > 0}
+            onClear={onClear}
+          />
+        }
+        focusRef={focusNodeRef}
+        focusNodeId={focusNodeId}
+        onFocusedNode={() => setFocusNodeId(null)}
+        empty={
+          <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('Click an item in the catalog to add a card.', { note: 'recipe.calc.empty' })}
+              </EmptyState>
+              <CalcHistoryList
+                history={history}
+                onOpen={openEntry}
+                meta={{ dataset, lang, langMap: session.langMap }}
+              />
+            </div>
+          </div>
+        }
+      />
+    </>
+  );
+}
+

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

@@ -0,0 +1,80 @@
+'use client';
+
+import { memo, useEffect, useRef } from 'react';
+import { useStore } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import {
+  CALC_NODE_H,
+  CALC_NODE_W,
+  type AnyCalcFlowNode,
+} from '@terrafirmagreg-team/recipe/lib/calc/flow';
+
+const cssVar = (name: string, fallback: string) =>
+  getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim() || fallback;
+
+export const CalcDotOverlay = memo(function CalcDotOverlay({
+  nodes,
+  focusId,
+}: {
+  nodes: AnyCalcFlowNode[];
+  focusId: string | null;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const tx = useStore((s) => s.transform[0]);
+  const ty = useStore((s) => s.transform[1]);
+  const zoom = useStore((s) => s.transform[2]);
+  const w = useStore((s) => s.width);
+  const h = useStore((s) => s.height);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !w || !h || !zoom) return;
+    const dpr = window.devicePixelRatio || 1;
+    const pw = Math.round(w * dpr);
+    const ph = Math.round(h * dpr);
+    if (canvas.width !== pw || canvas.height !== ph) {
+      canvas.width = pw;
+      canvas.height = ph;
+    }
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, w, h);
+    const card = cssVar('--color-card', '#17171a');
+    const border = cssVar('--color-border', '#3f3f46');
+    const primary = cssVar('--color-primary', '#00c8c8');
+    const danger = cssVar('--color-red-500', '#ef4444');
+    ctx.lineWidth = 1;
+    for (const node of nodes) {
+      const nw = node.width ?? CALC_NODE_W;
+      const nh = node.height ?? CALC_NODE_H;
+      const x = (node.position.x - nw / 2) * zoom + tx;
+      const y = (node.position.y - nh / 2) * zoom + ty;
+      const rw = nw * zoom;
+      const rh = nh * zoom;
+      if (x + rw < 0 || x > w || y + rh < 0 || y > h) continue;
+      const { node: calc } = node.data;
+      const stroke =
+        node.id === focusId || calc.recipe
+          ? primary
+          : calc.cycle
+            ? danger
+            : border;
+      ctx.fillStyle = card;
+      ctx.fillRect(x, y, rw, rh);
+      ctx.strokeStyle = stroke;
+      ctx.strokeRect(x + 0.5, y + 0.5, Math.max(rw - 1, 0), Math.max(rh - 1, 0));
+    }
+  });
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden
+      className="pointer-events-none absolute inset-0 z-10"
+      style={{ width: w, height: h }}
+    />
+  );
+});
+

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

@@ -0,0 +1,152 @@
+'use client';
+
+import { useState, type KeyboardEvent } from 'react';
+import {
+  createChevronEdge,
+  type ChevronEdgePathContext,
+} from '@terrafirmagreg-team/ui/components/blocks/canvas/chevron-edge';
+import { getSmoothStepPath } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import {
+  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 { 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 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);
+    }
+    return svgPathToPoints(
+      getSmoothStepPath({
+        sourceX: ctx.sourceX,
+        sourceY: ctx.sourceY,
+        sourcePosition: ctx.sourcePosition,
+        targetX: ctx.targetX,
+        targetY: ctx.targetY,
+        targetPosition: ctx.targetPosition,
+        borderRadius: 10,
+      })[0],
+    );
+  },
+});
+