@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

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

@@ -0,0 +1,134 @@
+'use client';
+
+import { FolderTree, History, Plus } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import {
+  LeftSidebarFolder,
+  LeftSidebarFolderContent,
+  LeftSidebarFolderTrigger,
+} from '@terrafirmagreg-team/ui/components/layouts/left-sidebar';
+import type { CalcTreeEntry } from '@terrafirmagreg-team/recipe/lib/calc/storage';
+import type { EntryMeta, IconItem } from '@terrafirmagreg-team/recipe/lib/calc/meta';
+import { rowClass, rowIdle } from '@terrafirmagreg-team/recipe/lib/calc/meta';
+import { HistoryRow, TabRow } from './rows';
+
+export function CalcHistoryList({
+  history,
+  onOpen,
+  meta,
+}: {
+  history: CalcTreeEntry[];
+  onOpen: (entry: CalcTreeEntry) => void;
+  meta: EntryMeta;
+}) {
+  const t = useTranslations();
+  if (!history.length) return null;
+  return (
+    <div className="flex w-64 max-w-full flex-col gap-1">
+      <p className="px-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+        {t('History', { note: 'recipe.calc.history' })}
+      </p>
+      <ul className="flex flex-col">
+        {history.slice(0, 5).map((entry) => (
+          <HistoryRow
+            key={entry.id}
+            entry={entry}
+            onOpen={onOpen}
+            meta={meta}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function CalcTrees({
+  tabs,
+  activeId,
+  history,
+  onOpen,
+  onOpenEntry,
+  onClose,
+  onRename,
+  onSetIcon,
+  onNew,
+  onRemoveHistory,
+  meta,
+}: {
+  tabs: CalcTreeEntry[];
+  activeId: string | null;
+  history: CalcTreeEntry[];
+  onOpen: (id: string) => void;
+  onOpenEntry: (entry: CalcTreeEntry) => void;
+  onClose: (id: string) => void;
+  onRename: (id: string, name: string) => void;
+  onSetIcon?: (id: string, icon: IconItem) => void;
+  onNew: () => void;
+  onRemoveHistory: (id: string) => void;
+  meta: EntryMeta;
+}) {
+  const t = useTranslations();
+  if (!tabs.length && !history.length) return null;
+  return (
+    <div className="mb-1 flex flex-col gap-1 border-b border-border pb-2">
+      {tabs.length ? (
+        <LeftSidebarFolder collapsible defaultOpen>
+          <LeftSidebarFolderTrigger className="gap-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
+            <FolderTree className="size-3.5" />
+            {t('Schemes', { note: 'recipe.calc.trees' })}
+          </LeftSidebarFolderTrigger>
+          <LeftSidebarFolderContent>
+            <ul className="flex flex-col">
+              {tabs.map((tab) => (
+                <TabRow
+                  key={tab.id}
+                  entry={tab}
+                  active={tab.id === activeId}
+                  onOpen={onOpen}
+                  onClose={onClose}
+                  onRename={onRename}
+                  onSetIcon={onSetIcon}
+                  meta={meta}
+                />
+              ))}
+              <li>
+                <button
+                  type="button"
+                  onClick={onNew}
+                  className={`${rowClass} ${rowIdle}`}
+                >
+                  <Plus className="size-4 shrink-0" />
+                  <span className="min-w-0 flex-1 text-start">
+                    {t('New scheme', { note: 'recipe.calc.new_tab' })}
+                  </span>
+                </button>
+              </li>
+            </ul>
+          </LeftSidebarFolderContent>
+        </LeftSidebarFolder>
+      ) : null}
+      {history.length ? (
+        <LeftSidebarFolder collapsible defaultOpen>
+          <LeftSidebarFolderTrigger className="gap-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
+            <History className="size-3.5" />
+            {t('History', { note: 'recipe.calc.history' })}
+          </LeftSidebarFolderTrigger>
+          <LeftSidebarFolderContent>
+            <ul className="flex flex-col">
+              {history.map((entry) => (
+                <HistoryRow
+                  key={entry.id}
+                  entry={entry}
+                  onOpen={onOpenEntry}
+                  onRemove={onRemoveHistory}
+                  meta={meta}
+                />
+              ))}
+            </ul>
+          </LeftSidebarFolderContent>
+        </LeftSidebarFolder>
+      ) : null}
+    </div>
+  );
+}
+

package/src/components/views/calc/trees/label.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { Workflow } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import type { CalcTreeEntry } from '@terrafirmagreg-team/recipe/lib/calc/storage';
+import type { EntryMeta } from '@terrafirmagreg-team/recipe/lib/calc/meta';
+
+export function TreeIcon({
+  entry,
+  dataset,
+  lang,
+  langMap,
+}: { entry: CalcTreeEntry } & EntryMeta) {
+  const card = entry.state.cards?.[0];
+  const ref = entry.icon ?? (card && { id: card.materialId, kind: card.kind });
+  if (!ref) return <Workflow className="size-4 shrink-0" />;
+  return (
+    <Entry
+      id={ref.id}
+      kind={ref.kind}
+      dataset={dataset}
+      lang={lang}
+      langMap={langMap}
+      size="sm"
+      href={false}
+      tooltip={false}
+      className="shrink-0"
+    />
+  );
+}
+
+export function TreeLabel({
+  entry,
+  langMap,
+}: { entry: CalcTreeEntry } & EntryMeta) {
+  const t = useTranslations();
+  const card = entry.state.cards?.[0];
+  const text =
+    entry.name ??
+    (card ? langMap?.[card.materialId] || card.materialId : undefined) ??
+    t('Untitled scheme', { note: 'recipe.calc.tab.untitled' });
+  return (
+    <span className="min-w-0 flex-1 truncate text-start">
+      {text}
+    </span>
+  );
+}
+
+export function TreeDate({
+  savedAt,
+  lang,
+}: {
+  savedAt: number;
+  lang: string;
+}) {
+  const stamp = new Intl.DateTimeFormat(lang.replace(/_/g, '-'), {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(savedAt);
+  return (
+    <span className="shrink-0 text-xs tabular-nums text-muted-foreground/70">
+      {stamp}
+    </span>
+  );
+}
+

package/src/components/views/calc/trees/rows.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { useState } from 'react';
+import { Check, Pencil, X } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import { Input } from '@terrafirmagreg-team/ui/components/ui/input';
+import type { CalcTreeEntry } from '@terrafirmagreg-team/recipe/lib/calc/storage';
+import type { EntryMeta, IconItem } from '@terrafirmagreg-team/recipe/lib/calc/meta';
+import { rowClass, rowIdle } from '@terrafirmagreg-team/recipe/lib/calc/meta';
+import { TreeDate, TreeIcon, TreeLabel } from './label';
+import { IconPicker } from './icon-picker';
+
+export function TabRow({
+  entry,
+  active,
+  onOpen,
+  onClose,
+  onRename,
+  onSetIcon,
+  meta,
+}: {
+  entry: CalcTreeEntry;
+  active: boolean;
+  onOpen: (id: string) => void;
+  onClose: (id: string) => void;
+  onRename: (id: string, name: string) => void;
+  onSetIcon?: (id: string, icon: IconItem) => void;
+  meta: EntryMeta;
+}) {
+  const t = useTranslations();
+  const [editing, setEditing] = useState(false);
+  const [name, setName] = useState(entry.name ?? '');
+  const commit = () => {
+    setEditing(false);
+    onRename(entry.id, name);
+  };
+  return (
+    <li className="group flex items-center gap-0.5">
+      {editing ? (
+        <span className="flex min-w-0 flex-1 items-center gap-1.5 px-2 py-0.5">
+          <TreeIcon entry={entry} {...meta} />
+          <Input
+            autoFocus
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') commit();
+              if (event.key === 'Escape') setEditing(false);
+            }}
+            onBlur={commit}
+            className="h-6 px-1.5 text-xs"
+            placeholder={t('Rename', { note: 'recipe.calc.rename' })}
+          />
+          <IconButton label={t('Rename', { note: 'recipe.calc.rename' })} onClick={commit}>
+            <Check className="size-3.5" />
+          </IconButton>
+        </span>
+      ) : (
+        <button
+          type="button"
+          onClick={() => onOpen(entry.id)}
+          className={`${rowClass} ${
+            active
+              ? 'bg-accent font-medium text-accent-foreground'
+              : rowIdle
+          }`}
+        >
+          <TreeIcon entry={entry} {...meta} />
+          <TreeLabel entry={entry} {...meta} />
+        </button>
+      )}
+      {!editing && (
+        <>
+          {meta.iconItems && onSetIcon ? (
+            <IconPicker
+              items={meta.iconItems}
+              meta={meta}
+              onPick={(icon) => onSetIcon(entry.id, icon)}
+            />
+          ) : null}
+          <IconButton
+            label={t('Rename', { note: 'recipe.calc.rename' })}
+            className="opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={() => {
+              setName(entry.name ?? '');
+              setEditing(true);
+            }}
+          >
+            <Pencil className="size-3.5" />
+          </IconButton>
+          <IconButton
+            label={t('Close scheme', { note: 'recipe.calc.close_tab' })}
+            className="opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={() => onClose(entry.id)}
+          >
+            <X className="size-3.5" />
+          </IconButton>
+        </>
+      )}
+    </li>
+  );
+}
+
+export function HistoryRow({
+  entry,
+  onOpen,
+  onRemove,
+  meta,
+}: {
+  entry: CalcTreeEntry;
+  onOpen: (entry: CalcTreeEntry) => void;
+  onRemove?: (id: string) => void;
+  meta: EntryMeta;
+}) {
+  const t = useTranslations();
+  return (
+    <li className="group flex items-center gap-0.5">
+      <button
+        type="button"
+        onClick={() => onOpen(entry)}
+        className={`${rowClass} ${rowIdle}`}
+      >
+        <TreeIcon entry={entry} {...meta} />
+        <TreeLabel entry={entry} {...meta} />
+        <TreeDate savedAt={entry.savedAt} lang={meta.lang} />
+      </button>
+      {onRemove && (
+        <IconButton
+          label={t('Remove from history', { note: 'recipe.calc.remove.history' })}
+          className="opacity-0 transition-opacity group-hover:opacity-100"
+          onClick={() => onRemove(entry.id)}
+        >
+          <X className="size-3.5" />
+        </IconButton>
+      )}
+    </li>
+  );
+}
+

package/src/components/views/forge/gui.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import type { CSSProperties } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { ForgeRule, ForgeRuleAction } from '@terrafirmagreg-team/recipe/types/forge';
+
+const ATLAS_SIZE = 256;
+
+export type GuiRect = { x: number; y: number; w: number; h: number };
+
+function spriteStyle(
+  gui: string,
+  { x, y, w, h }: GuiRect,
+  scale: number,
+): CSSProperties {
+  return {
+    width: w * scale,
+    height: h * scale,
+    imageRendering: 'pixelated',
+    backgroundImage: `url(${gui})`,
+    backgroundSize: `${ATLAS_SIZE * scale}px ${ATLAS_SIZE * scale}px`,
+    backgroundPosition: `-${x * scale}px -${y * scale}px`,
+  };
+}
+
+function maskStyle(
+  gui: string,
+  { x, y, w, h }: GuiRect,
+  scale: number,
+): CSSProperties {
+  const size = `${ATLAS_SIZE * scale}px ${ATLAS_SIZE * scale}px`;
+  const position = `-${x * scale}px -${y * scale}px`;
+  return {
+    width: w * scale,
+    height: h * scale,
+    maskImage: `url(${gui})`,
+    maskSize: size,
+    maskPosition: position,
+    maskRepeat: 'no-repeat',
+    WebkitMaskImage: `url(${gui})`,
+    WebkitMaskSize: size,
+    WebkitMaskPosition: position,
+    WebkitMaskRepeat: 'no-repeat',
+  };
+}
+
+export function GuiSprite({
+  gui,
+  rect,
+  scale = 1,
+  className,
+  style,
+}: {
+  gui: string | undefined;
+  rect: GuiRect;
+  scale?: number;
+  className?: string;
+  style?: CSSProperties;
+}) {
+  if (!gui) return null;
+  return (
+    <span
+      aria-hidden
+      className={cn('inline-block shrink-0', className)}
+      style={{ ...spriteStyle(gui, rect, scale), ...style }}
+    />
+  );
+}
+
+export function GuiMask({
+  gui,
+  rect,
+  scale = 1,
+  className,
+  style,
+}: {
+  gui: string | undefined;
+  rect: GuiRect;
+  scale?: number;
+  className?: string;
+  style?: CSSProperties;
+}) {
+  if (!gui) return null;
+  return (
+    <span
+      aria-hidden
+      className={cn('inline-block shrink-0', className)}
+      style={{ ...maskStyle(gui, rect, scale), ...style }}
+    />
+  );
+}
+
+export const GUI_PANEL: GuiRect = { x: 0, y: 0, w: 176, h: 110 };
+
+export const PLAN_SLOT: GuiRect = { x: 218, y: 0, w: 18, h: 18 };
+
+export const RULE_OVERLAY_Y: Record<ForgeRule['order'], number> = {
+  last: 0,
+  second_last: 22,
+  third_last: 44,
+  not_last: 66,
+  any: 88,
+};
+
+const STEP_GLYPH_X: Record<string, number> = {
+  punch: 0,
+  bend: 32,
+  upset: 64,
+  shrink: 96,
+  light: 128,
+  medium: 160,
+  hard: 192,
+  draw: 224,
+};
+
+export const RULE_ICON: Record<ForgeRuleAction, GuiRect> = {
+  hit: { x: 218, y: 18, w: 32, h: 32 },
+  draw: { x: 224, y: 224, w: 32, h: 32 },
+  punch: { x: 0, y: 224, w: 32, h: 32 },
+  bend: { x: 32, y: 224, w: 32, h: 32 },
+  upset: { x: 64, y: 224, w: 32, h: 32 },
+  shrink: { x: 96, y: 224, w: 32, h: 32 },
+};
+
+export const MARK_PROGRESS: GuiRect = { x: 176, y: 0, w: 5, h: 5 };
+export const MARK_TARGET: GuiRect = { x: 181, y: 0, w: 5, h: 5 };
+
+export function actionGlyphRect(action: string): GuiRect {
+  return { x: STEP_GLYPH_X[action] ?? 0, y: 224, w: 32, h: 32 };
+}
+

package/src/components/views/forge/index.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { ItemRow } from '@terrafirmagreg-team/ui/components/blocks/list/row';
+import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
+import { RecipeItemHeader } from '@terrafirmagreg-team/recipe/components/views/browser/recipe-item-header';
+import { RecipeFrame } from '@terrafirmagreg-team/recipe/components/views/browser/frame';
+import { useToolRecipes } from '@terrafirmagreg-team/recipe/hooks/use-tool-recipes';
+import { toForgeRecipe } from '@terrafirmagreg-team/recipe/lib/forge/data';
+import { RecipeCard } from '@terrafirmagreg-team/recipe/components/cards/card';
+import { FitBox } from '@terrafirmagreg-team/ui/components/blocks/fit-box';
+import {
+  recipeCardImageUrl,
+  recipeImageUrl,
+} from '@terrafirmagreg-team/recipe/lib/links';
+import { ForgeList } from './list';
+import { ForgeWorkbench } from './workbench';
+import type { Recipe } from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+function ForgeRecipeCard({
+  recipe,
+  session,
+}: {
+  recipe: Recipe;
+  session: RecipeSession;
+}) {
+  const [failed, setFailed] = useState(false);
+  const src =
+    recipeImageUrl(session.dataset, recipe) ??
+    recipeCardImageUrl(session.dataset, recipe.id);
+  if (!src || failed) return null;
+  return (
+    <RecipeCard
+      recipe={recipe}
+      dataset={session.dataset}
+      lang={session.lang}
+      langMap={session.langMap}
+      title={recipe.id}
+      src={src}
+      onFail={() => setFailed(true)}
+      interactive
+    />
+  );
+}
+
+export function ForgeCalculator({ session }: { session: RecipeSession }) {
+  const t = useTranslations();
+  const { value, pending } = useToolRecipes(
+    session,
+    'tfc:anvil',
+    toForgeRecipe,
+  );
+  const activeId = session.recipeId;
+  const active =
+    value?.find(({ recipe }) => recipe.id === activeId) ??
+    (!activeId ? value?.[0] : undefined);
+  const loading = session.indexLoading || pending;
+
+  return (
+    <>
+      <ForgeList session={session} />
+      <RecipeFrame
+        session={session}
+        header={
+          active ? (
+            <RecipeItemHeader recipe={active.recipe} session={session} />
+          ) : (
+            <ItemRow layout="header" title={t('Forging', { note: 'recipe.forge.title' })} />
+          )
+        }
+      >
+        <div className="scrollbar-thin flex-1 space-y-5 overflow-y-auto p-2 sm:p-4">
+          {loading ? (
+            <EmptyState variant="loading" />
+          ) : value === undefined ? (
+            <EmptyState variant="missing">
+              {t('Could not load recipes. Reload the page to retry.', { note: 'recipe.forge.load_error' })}
+            </EmptyState>
+          ) : active ? (
+            <>
+              <ForgeWorkbench
+                key={active.recipe.id}
+                recipe={active}
+                session={session}
+              />
+              <FitBox w={active.recipe.w ?? 0}>
+                <ForgeRecipeCard
+                  key={active.recipe.id}
+                  recipe={active.recipe}
+                  session={session}
+                />
+              </FitBox>
+            </>
+          ) : (
+            <EmptyState>
+              {activeId
+                ? t('Recipe not found in this dump. Select another recipe.', {
+                    note: 'recipe.forge.missing',
+                  })
+                : t('No matching recipes in this dump.', {
+                    note: 'recipe.forge.empty',
+                  })}
+            </EmptyState>
+          )}
+        </div>
+      </RecipeFrame>
+    </>
+  );
+}
+

package/src/components/views/forge/list.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useDeferredValue, useMemo, useState } from 'react';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { ToolList } from '@terrafirmagreg-team/recipe/components/tool-list';
+import { useToolRecipes } from '@terrafirmagreg-team/recipe/hooks/use-tool-recipes';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import {
+  anvilGroup,
+  anvilGroupRank,
+  toForgeRecipe,
+} from '@terrafirmagreg-team/recipe/lib/forge/data';
+import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import type { ForgeRecipe } from '@terrafirmagreg-team/recipe/types/forge';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+function anvilGroupName(session: RecipeSession, id: string): string {
+  if (!id) return '—';
+  const resolved = recipeItemName(session.names, session.lang, id);
+  return resolved === id
+    ? (id.split('/').pop()?.replaceAll('_', ' ') ?? id)
+    : resolved;
+}
+
+export function ForgeList({ session }: { session: RecipeSession }) {
+  const t = useTranslations();
+  const { value } = useToolRecipes(session, 'tfc:anvil', toForgeRecipe);
+  const [query, setQuery] = useState('');
+  const search = useDeferredValue(query.trim().toLowerCase());
+  const name = (id: string) => recipeItemName(session.names, session.lang, id);
+
+  const tree = useMemo((): PageTree.Root => {
+    const matches = (recipe: ForgeRecipe['recipe']) =>
+      [
+        recipe.id,
+        ...recipe.inputs.map((slot) => slot.id),
+        ...recipe.outputs.map((slot) => slot.id),
+      ].some((id) => `${id} ${name(id)}`.toLowerCase().includes(search));
+
+    const groups = [...Map.groupBy(value ?? [], (item) => anvilGroup(item.recipe).id)]
+      .map(([id, rows]) => ({
+        id,
+        icon: anvilGroup(rows[0]!.recipe).icon,
+        rows: search ? rows.filter((r) => matches(r.recipe)) : rows,
+      }))
+      .filter((group) => group.rows.length > 0)
+      .sort(
+        (a, b) => anvilGroupRank(a.id) - anvilGroupRank(b.id) || a.id.localeCompare(b.id),
+      );
+
+    const children: PageTree.Folder[] = groups.map((group) => ({
+      type: 'folder',
+      $id: `forge:${group.id}`,
+      name: (
+        <span className="-me-3 flex min-w-0 flex-1 items-center gap-1.5">
+          <span className="truncate">{anvilGroupName(session, group.id)}</span>
+          <span className="shrink-0 tabular-nums text-xs text-muted-foreground/70">
+            ×{group.rows.length}
+          </span>
+        </span>
+      ),
+      icon: group.icon ? (
+        <span className="inline-flex size-4 shrink-0 items-center justify-center">
+          <Entry id={group.icon} kind="item" size="sm" href={false} tooltip={false} />
+        </span>
+      ) : undefined,
+      defaultOpen: search !== '',
+      children: group.rows.map(
+        ({ recipe }): PageTree.Item => ({
+          type: 'page',
+          $id: recipe.id,
+          url: recipeHref(session.dataset, session.lang, {
+            tool: 'forge',
+            id: recipe.id,
+            tab: session.tab,
+          }),
+          name: (
+            <Entry
+              id={recipe.outputs[0]?.id ?? recipe.id}
+              kind={recipe.outputs[0]?.kind === 'fluid' ? 'fluid' : 'item'}
+              size="sm"
+              labeled
+              href={false}
+              tooltip={false}
+              className="min-w-0 flex-1 justify-start truncate"
+            />
+          ),
+        }),
+      ),
+    }));
+
+    return {
+      name: 'forge',
+      $id: `forge:${session.lang}:${search}:${(value ?? []).length}`,
+      children,
+    } as PageTree.Root;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, search, session.lang, session.dataset, session.tab]);
+
+  return (
+    <ToolList
+      tree={tree}
+      loaded={value !== undefined}
+      query={query}
+      onQuery={setQuery}
+      searchLabel={t('Search recipes', { note: 'recipe.forge.search' })}
+      emptyLabel={t('No matching recipes in this dump.', { note: 'recipe.forge.empty' })}
+    />
+  );
+}
+