@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

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

@@ -0,0 +1,204 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import {
+  startTransition,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { proxy, wrap, type Remote } from 'comlink';
+import type {
+  CalcWorkerApi,
+  CalcWorkerFlush,
+} from '@terrafirmagreg-team/recipe/lib/calc/worker';
+import { api as localCalcApi } from '@terrafirmagreg-team/recipe/lib/calc/worker/api';
+import type { RecipeCompactIndex } from '@terrafirmagreg-team/recipe/types';
+import type { CalcMapsSlice } from './use-maps';
+
+type CalcWorkerHandle = {
+  worker: Worker | null;
+  api: Remote<CalcWorkerApi>;
+  inFlight: number;
+  rejecters: Set<(error: Error) => void>;
+};
+
+export function useCalcWorker({
+  dataset,
+  catalog,
+  activeTabId,
+  applyMaps,
+  resetMaps,
+}: {
+  dataset: DatasetRef;
+  catalog: RecipeCompactIndex | null;
+  activeTabId: string | null;
+  applyMaps: (src: CalcMapsSlice, extra?: () => void) => void;
+  resetMaps: () => void;
+}) {
+  const workerRef = useRef<CalcWorkerHandle | null>(null);
+  const [workerState, setWorkerState] = useState<'pending' | 'ready'>(
+    'pending',
+  );
+  const [generation, setGeneration] = useState(0);
+  const [workerSettled, setWorkerSettled] = useState(false);
+  const resolvedKeyRef = useRef<string | null>(null);
+
+  const minFlushEpochRef = useRef(0);
+  const [prevTab, setPrevTab] = useState(activeTabId);
+  if (prevTab !== activeTabId) {
+    setPrevTab(activeTabId);
+    setWorkerSettled(false);
+  }
+  useEffect(() => {
+    resolvedKeyRef.current = null;
+    minFlushEpochRef.current += 1;
+    const handle = workerRef.current;
+    if (handle) void handle.api.invalidate().catch(() => {});
+  }, [activeTabId]);
+
+  const applyWorkerFlush = useCallback(
+    (msg: CalcWorkerFlush) => {
+      if (msg.epoch < minFlushEpochRef.current) return;
+      applyMaps({
+        out: new Map(msg.out),
+        tag: new Map(msg.tag),
+        recipes: new Map(msg.recipes),
+        bodies: new Map(msg.bodies),
+        dead: new Set(msg.dead),
+      });
+    },
+    [applyMaps],
+  );
+
+  const bufferedFlush = useRef<CalcWorkerFlush | null>(null);
+  const flushTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const drainFlush = useCallback(() => {
+    flushTimer.current = null;
+    const msg = bufferedFlush.current;
+    bufferedFlush.current = null;
+    if (msg) applyWorkerFlush(msg);
+  }, [applyWorkerFlush]);
+  const scheduleWorkerFlush = useCallback(
+    (msg: CalcWorkerFlush) => {
+      const prev = bufferedFlush.current;
+      bufferedFlush.current = prev
+        ? {
+            out: [...prev.out, ...msg.out],
+            tag: [...prev.tag, ...msg.tag],
+            recipes: [...prev.recipes, ...msg.recipes],
+            bodies: [...prev.bodies, ...msg.bodies],
+            dead: [...prev.dead, ...msg.dead],
+            epoch: Math.max(prev.epoch, msg.epoch),
+          }
+        : msg;
+      if (flushTimer.current) return;
+      flushTimer.current = setTimeout(drainFlush, 350);
+    },
+    [drainFlush],
+  );
+
+  useEffect(() => {
+    if (!catalog) return;
+    const handle: CalcWorkerHandle = {
+      worker: null,
+      api: localCalcApi as Remote<CalcWorkerApi>,
+      inFlight: 0,
+      rejecters: new Set(),
+    };
+    const swapToLocal = () => {
+      handle.worker = null;
+      handle.api = localCalcApi as Remote<CalcWorkerApi>;
+      const error = new Error('calc worker failed');
+      for (const reject of handle.rejecters) reject(error);
+      handle.rejecters.clear();
+      bufferedFlush.current = null;
+      if (flushTimer.current) {
+        clearTimeout(flushTimer.current);
+        flushTimer.current = null;
+      }
+      resolvedKeyRef.current = null;
+      minFlushEpochRef.current = 0;
+      setGeneration((g) => g + 1);
+      void handle.api.init(dataset, catalog, scheduleWorkerFlush).catch(() => {});
+    };
+    if (typeof Worker !== 'undefined') {
+      try {
+        const worker = new Worker(
+          new URL('../../lib/calc/worker/index.ts', import.meta.url),
+          { type: 'module' },
+        );
+        worker.onerror = () => swapToLocal();
+        handle.worker = worker;
+        handle.api = wrap<CalcWorkerApi>(worker);
+      } catch {
+      }
+    }
+    handle.api
+      .init(
+        dataset,
+        catalog,
+        handle.worker ? proxy(scheduleWorkerFlush) : scheduleWorkerFlush,
+      )
+      .then(() => setWorkerState('ready'))
+      .catch(() => {});
+    workerRef.current = handle;
+    resolvedKeyRef.current = null;
+    minFlushEpochRef.current = 0;
+    resetMaps();
+    startTransition(() => setWorkerSettled(false));
+    return () => {
+      if (flushTimer.current) {
+        clearTimeout(flushTimer.current);
+        flushTimer.current = null;
+      }
+      bufferedFlush.current = null;
+      workerRef.current = null;
+      handle.worker?.terminate();
+    };
+  }, [dataset, catalog, scheduleWorkerFlush, resetMaps]);
+
+  const call = useCallback(
+    <T,>(fn: (api: Remote<CalcWorkerApi>) => Promise<T>): Promise<T> => {
+      const handle = workerRef.current;
+      if (!handle) {
+        return Promise.reject(new Error('calc worker unavailable'));
+      }
+      handle.inFlight += 1;
+      setWorkerSettled(false);
+      return new Promise<T>((resolve, reject) => {
+        handle.rejecters.add(reject);
+        fn(handle.api)
+          .then(resolve)
+          .catch(reject)
+          .finally(() => {
+            handle.rejecters.delete(reject);
+            handle.inFlight -= 1;
+            if (handle.inFlight === 0) {
+              if (flushTimer.current) {
+                clearTimeout(flushTimer.current);
+                flushTimer.current = null;
+              }
+              drainFlush();
+              setWorkerSettled(true);
+            }
+          });
+      });
+    },
+    [drainFlush],
+  );
+
+  return {
+    ref: workerRef,
+    state: workerState,
+    generation,
+    settled: workerSettled,
+    call,
+    isResolved: useCallback((key: string) => resolvedKeyRef.current === key, []),
+    markResolved: useCallback((key: string) => {
+      resolvedKeyRef.current = key;
+    }, []),
+  };
+}
+

package/src/hooks/forge/use-anvil-gui.ts

@@ -0,0 +1,16 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+import { useSyncExternalStore } from 'react';
+import {
+  dumpLocation,
+  dumpPublicUrl,
+  subscribeDumpLocations,
+} from '@terrafirmagreg-team/dump/lib/dump/paths';
+
+export const ANVIL_GUI_REL = 'assets/tfc/textures/gui/anvil.webp';
+
+export function useAnvilGui(dataset: DatasetRef): string | undefined {
+  useSyncExternalStore(subscribeDumpLocations, () => dumpLocation(dataset));
+  return dumpPublicUrl(dataset, ANVIL_GUI_REL);
+}
+

package/src/hooks/forge/use-forge-state.ts

@@ -0,0 +1,135 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  FORGE_ACTIONS,
+  forgeRulesMatch,
+} from '@terrafirmagreg-team/recipe/lib/forge/actions';
+import { solveForgeSteps } from '@terrafirmagreg-team/recipe/lib/forge/solve';
+import type { ForgeRecipe, ForgeRuleAction } from '@terrafirmagreg-team/recipe/types/forge';
+
+export type ForgeStep = {
+  id: string;
+  action: ForgeRuleAction;
+  delta: number;
+  work: number;
+};
+
+function lastActions(applied: readonly number[]): ForgeRuleAction[] {
+  return applied
+    .slice(-3)
+    .map((index) => FORGE_ACTIONS[index].action)
+    .reverse();
+}
+
+function parseWork(value: string): number | null {
+  const parsed = Number(value);
+  return Number.isInteger(parsed) && parsed >= 0 && parsed < 150
+    ? parsed
+    : null;
+}
+
+export function useForgeState(recipe: ForgeRecipe) {
+  const [startInput, setStartInput] = useState('0');
+  const [targetInput, setTargetInput] = useState('');
+  const [applied, setApplied] = useState<number[]>([]);
+  const [expanded, setExpanded] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [solving, setSolving] = useState(false);
+  const replayTimer = useRef<ReturnType<typeof setInterval> | null>(null);
+  const startWork = parseWork(startInput) ?? 0;
+  const target = targetInput === '' ? null : (parseWork(targetInput) ?? 0);
+
+  const { work, steps } = useMemo(() => {
+    let work = startWork;
+    const steps: ForgeStep[] = [];
+    for (const index of applied) {
+      const action = FORGE_ACTIONS[index];
+      work += action.delta;
+      steps.push({ ...action, work });
+    }
+    return { work, steps };
+  }, [startWork, applied]);
+  const last = lastActions(applied);
+  const finished = work === target && forgeRulesMatch(recipe.rules, last);
+
+  useEffect(
+    () => () => {
+      if (replayTimer.current) clearInterval(replayTimer.current);
+    },
+    [],
+  );
+
+  const push = (index: number) => {
+    const next = work + FORGE_ACTIONS[index].delta;
+    if (next < 0 || next >= 150 || solving) return;
+    setFailed(false);
+    setApplied((prev) => [...prev, index]);
+  };
+  const solve = () => {
+    if (solving) return;
+    const found = solveForgeSteps(
+      { work: startWork, last: [] },
+      target ?? 0,
+      recipe.rules,
+    );
+    if (!found) return setFailed(true);
+    setFailed(false);
+    setApplied([]);
+    setExpanded(false);
+    setSolving(true);
+    let i = 0;
+    replayTimer.current = setInterval(() => {
+      const step = found[i];
+      i += 1;
+      if (step === undefined) {
+        if (replayTimer.current) clearInterval(replayTimer.current);
+        replayTimer.current = null;
+        setSolving(false);
+        return;
+      }
+      setApplied((prev) => [...prev, step]);
+    }, 170);
+  };
+
+  const ruleMet = useMemo(() => {
+    const last = lastActions(applied);
+    return recipe.rules.map(
+      (rule) => applied.length > 0 && forgeRulesMatch([rule], last),
+    );
+  }, [recipe, applied]);
+
+  const setStart = (value: string | number) => {
+    setStartInput(String(value));
+    setApplied([]);
+  };
+  const setTarget = (value: string | number) => {
+    setTargetInput(String(value));
+    setFailed(false);
+  };
+
+  return {
+    startInput,
+    targetInput,
+    applied,
+    expanded,
+    failed,
+    solving,
+    target,
+    work,
+    steps,
+    last,
+    finished,
+    ruleMet,
+    push,
+    solve,
+    setStart,
+    setTarget,
+    setTargetInput,
+    setApplied,
+    setExpanded,
+  };
+}
+
+export type ForgeState = ReturnType<typeof useForgeState>;
+

package/src/hooks/forge/use-ruler.ts

@@ -0,0 +1,100 @@
+'use client';
+
+import { useRef, useState } from 'react';
+
+export const RULER = { numbersTop: 88, markerX: 13, trackBottom: 110 } as const;
+
+export function useRuler({
+  panelRef,
+  scale,
+  work,
+  target,
+  solving,
+  onWork,
+  onTarget,
+}: {
+  panelRef: React.RefObject<HTMLDivElement | null>;
+  scale: number;
+  work: number;
+  target: number | null;
+  solving: boolean;
+  onWork: (value: number) => void;
+  onTarget: (value: number) => void;
+}) {
+  const [dragging, setDragging] = useState(false);
+  const dragKind = useRef<'work' | 'target' | null>(null);
+  const applyRuler = (value: number) => {
+    if (dragKind.current === 'work') {
+      onWork(value);
+    } else {
+      onTarget(value);
+    }
+  };
+  const rulerValue = (clientX: number): number => {
+    const panel = panelRef.current?.getBoundingClientRect();
+    if (!panel) return 0;
+    const atlasX = (clientX - panel.left) / scale;
+    return Math.max(0, Math.min(149, Math.round(atlasX - RULER.markerX)));
+  };
+  const beginDrag = (
+    event: React.PointerEvent<HTMLDivElement>,
+    kind: 'work' | 'target',
+  ) => {
+    if (solving) return;
+    dragKind.current = kind;
+    applyRuler(rulerValue(event.clientX));
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+
+    }
+    setDragging(true);
+  };
+
+  const onRulerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    const value = rulerValue(event.clientX);
+    const nearWork = Math.abs(value - work) <= 4;
+    const nearTarget = target !== null && Math.abs(value - target) <= 4;
+    beginDrag(
+      event,
+      nearWork &&
+        (!nearTarget || Math.abs(value - work) <= Math.abs(value - target))
+        ? 'work'
+        : 'target',
+    );
+  };
+  const onRulerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragKind.current) return;
+    applyRuler(rulerValue(event.clientX));
+  };
+  const onRulerUp = () => {
+    dragKind.current = null;
+    setDragging(false);
+  };
+  const onHandleKey =
+    (kind: 'work' | 'target') =>
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+      event.preventDefault();
+      const step = event.shiftKey ? 10 : 1;
+      const base = kind === 'work' ? work : (target ?? 0);
+      const value = Math.max(
+        0,
+        Math.min(149, base + (event.key === 'ArrowRight' ? step : -step)),
+      );
+      if (kind === 'work') {
+        onWork(value);
+      } else {
+        onTarget(value);
+      }
+    };
+  return {
+    dragging,
+    beginDrag,
+    onRulerDown,
+    onRulerMove,
+    onRulerUp,
+    onHandleKey,
+  };
+}
+

package/src/hooks/use-add-to-calc.ts

@@ -0,0 +1,51 @@
+'use client';
+
+import { useCallback } from 'react';
+import {
+  decodeCalcState,
+  encodeCalcState,
+} from '@terrafirmagreg-team/recipe/lib/calc/tree';
+import { recipeCalcHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+export function useAddToCalc(session: RecipeSession) {
+  const { dataset, lang, tree } = session;
+  return useCallback(
+    (item: string, kind: 'item' | 'fluid') => {
+      const state = decodeCalcState(tree ?? '') ?? {
+        cards: [],
+        wires: [],
+        tagSelections: {},
+      };
+      const existing = state.cards.find(
+        (card) => card.materialId === item && card.kind === kind,
+      );
+      const cards = existing
+        ? state.cards.map((card) =>
+            card === existing
+              ? { ...card, crafts: card.crafts + 1 }
+              : card,
+          )
+        : [
+            ...state.cards,
+            {
+              id: `c${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`,
+              materialId: item,
+              kind,
+              recipeId: null,
+              crafts: 1,
+            },
+          ];
+      replaceUrlState(
+        recipeCalcHref(
+          dataset,
+          lang,
+          encodeCalcState({ ...state, cards }),
+        ),
+      );
+    },
+    [tree, dataset, lang],
+  );
+}
+

package/src/hooks/use-categories-by-id.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import type {
+  RecipeCategory,
+  RecipeCompactIndex,
+} from '@terrafirmagreg-team/recipe/types';
+
+export function useCategoriesById(
+  index: RecipeCompactIndex | null | undefined,
+): Map<string, RecipeCategory> {
+  return useMemo(
+    () =>
+      new Map<string, RecipeCategory>(
+        (index?.categories ?? []).map((row) => [row.id, row]),
+      ),
+    [index],
+  );
+}
+

package/src/hooks/use-favorite-hotkey.ts

@@ -0,0 +1,39 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useFavorites } from '@terrafirmagreg-team/recipe/hooks/use-favorites';
+import { favoriteHoverTarget } from '@terrafirmagreg-team/recipe/lib/favorite-hover';
+
+export function useFavoriteHotkey() {
+  const { toggleItem, toggleRecipe } = useFavorites();
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      const key = event.key.toLowerCase();
+      if (key !== 'a' && key !== 'ф') return;
+      const el = document.activeElement;
+      if (
+        el instanceof HTMLElement &&
+        (el.tagName === 'INPUT' ||
+          el.tagName === 'TEXTAREA' ||
+          el.isContentEditable)
+      ) {
+        return;
+      }
+      const target = favoriteHoverTarget();
+      if (!target) return;
+      event.preventDefault();
+      if (target.kind === 'recipe') {
+        toggleRecipe({
+          id: target.id,
+          type: target.type,
+          ...(target.icon ? { icon: target.icon } : {}),
+        });
+      } else {
+        toggleItem(target.id, target.ref);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [toggleItem, toggleRecipe]);
+}
+

package/src/hooks/use-favorites.ts

@@ -0,0 +1,135 @@
+'use client';
+
+import { useCallback } from 'react';
+import {
+  createStoredValue,
+  type StoredCodec,
+} from '@terrafirmagreg-team/ui/lib/utils/stored-value';
+import type { FavoriteEntry, RecipeFavorite } from '@terrafirmagreg-team/recipe/types';
+
+export type { FavoriteEntry, RecipeFavorite };
+
+const LEGACY_ITEMS_KEY = 'wiki.recipe.favorites';
+const LEGACY_RECIPES_KEY = 'wiki.recipe.favorites.recipes';
+
+function legacyEntries(): FavoriteEntry[] {
+  try {
+    const items: unknown = JSON.parse(
+      localStorage.getItem(LEGACY_ITEMS_KEY) ?? '[]',
+    );
+    const recipes: unknown = JSON.parse(
+      localStorage.getItem(LEGACY_RECIPES_KEY) ?? '[]',
+    );
+    return [
+      ...(Array.isArray(items) ? items : []).flatMap((id) =>
+        typeof id === 'string' && id
+          ? [{ kind: 'stack' as const, id }]
+          : [],
+      ),
+      ...(Array.isArray(recipes) ? recipes : []).flatMap((row) =>
+        row &&
+        typeof row === 'object' &&
+        typeof (row as RecipeFavorite).id === 'string' &&
+        typeof (row as RecipeFavorite).type === 'string'
+          ? [{ kind: 'recipe' as const, ...(row as RecipeFavorite) }]
+          : [],
+      ),
+    ];
+  } catch {
+    return [];
+  }
+}
+
+const codec: StoredCodec<FavoriteEntry[]> = {
+  read: (raw) => {
+    if (!raw) return legacyEntries();
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((entry): entry is FavoriteEntry => {
+      if (!entry || typeof entry !== 'object') return false;
+      const row = entry as FavoriteEntry;
+      if (row.kind === 'stack') return typeof row.id === 'string' && !!row.id;
+      if (row.kind === 'recipe')
+        return (
+          typeof row.id === 'string' &&
+          !!row.id &&
+          typeof row.type === 'string' &&
+          !!row.type
+        );
+      return false;
+    });
+  },
+  write: (entries) => JSON.stringify(entries),
+};
+
+const useStoredFavorites = createStoredValue('wiki.recipe.favorites.v2', codec);
+
+export function useFavorites() {
+  const [entries, setEntries] = useStoredFavorites();
+
+  const toggleItem = useCallback(
+    (itemId: string, ref?: 'item' | 'fluid') => {
+      setEntries((prev) =>
+        prev.some(
+          (entry) => entry.kind === 'stack' && entry.id === itemId,
+        )
+          ? prev.filter(
+              (entry) => !(entry.kind === 'stack' && entry.id === itemId),
+            )
+          : [
+              ...prev,
+              {
+                kind: 'stack',
+                id: itemId,
+                ...(ref && ref !== 'item' ? { ref } : {}),
+              },
+            ],
+      );
+    },
+    [setEntries],
+  );
+
+  const isFavorite = useCallback(
+    (itemId: string) =>
+      entries.some((entry) => entry.kind === 'stack' && entry.id === itemId),
+    [entries],
+  );
+
+  const toggleRecipe = useCallback(
+    (row: RecipeFavorite) => {
+      setEntries((prev) =>
+        prev.some(
+          (entry) =>
+            entry.kind === 'recipe' &&
+            entry.id === row.id &&
+            entry.type === row.type,
+        )
+          ? prev.filter(
+              (entry) =>
+                !(
+                  entry.kind === 'recipe' &&
+                  entry.id === row.id &&
+                  entry.type === row.type
+                ),
+            )
+          : [...prev, { kind: 'recipe', ...row }],
+      );
+    },
+    [setEntries],
+  );
+
+  const isRecipeFavorite = useCallback(
+    (id: string) =>
+      entries.some((entry) => entry.kind === 'recipe' && entry.id === id),
+    [entries],
+  );
+
+  return {
+    entries,
+    toggleItem,
+    isFavorite,
+    toggleRecipe,
+    isRecipeFavorite,
+  };
+}
+