@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

package/src/components/views/forge/workbench/controls.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Input } from '@terrafirmagreg-team/ui/components/ui/input';
+import { Button } from '@terrafirmagreg-team/ui/components/ui/button';
+import { useCopyButton } from '@terrafirmagreg-team/ui/hooks/use-copy-button';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import { Check, Copy, RotateCcw, Undo2, Wand2 } from 'lucide-react';
+import { forgeActionLabel } from '@terrafirmagreg-team/recipe/lib/forge/actions';
+import type { ForgeState } from '@terrafirmagreg-team/recipe/hooks/forge/use-forge-state';
+
+export function WorkbenchControls({
+  state,
+  rulesSupported,
+  langMap,
+}: {
+  state: ForgeState;
+  rulesSupported: boolean;
+  langMap: Record<string, string>;
+}) {
+  const t = useTranslations();
+  const { startInput, targetInput, applied, steps, target, solving } = state;
+  const { checked: copied, onClick: copy } = useCopyButton(() =>
+    navigator.clipboard.writeText(
+      steps
+        .map(
+          (step, i) =>
+            `${i + 1}. ${forgeActionLabel(langMap, step.id)} (${step.delta > 0 ? '+' : ''}${step.delta}) = ${step.work}`,
+        )
+        .join('\n'),
+    ),
+  );
+
+  return (
+    <div className="flex flex-wrap items-end gap-3">
+      <label className="flex w-24 flex-col gap-1 border-l-2 border-green-600 pl-2 text-xs text-green-700 dark:border-green-500 dark:text-green-400">
+        {t('Current work', { note: 'recipe.forge.current' })}
+        <Input
+          inputMode="numeric"
+          name="forge-start"
+          autoComplete="off"
+          value={startInput}
+          disabled={solving}
+          onChange={(event) => state.setStart(event.target.value)}
+          placeholder="0"
+        />
+      </label>
+      <label className="flex w-24 flex-col gap-1 border-l-2 border-red-600 pl-2 text-xs text-red-700 dark:border-red-500 dark:text-red-400">
+        {t('Target', { note: 'recipe.forge.target' })}
+        <Input
+          inputMode="numeric"
+          name="forge-target"
+          autoComplete="off"
+          value={targetInput}
+          disabled={solving}
+          onChange={(event) => state.setTarget(event.target.value)}
+          placeholder="0"
+        />
+      </label>
+      <Button
+        onClick={state.solve}
+        disabled={target === null || !rulesSupported || solving}
+      >
+        <Wand2 className="size-4" />
+        {solving
+          ? t('Solving…', { note: 'recipe.forge.solving' })
+          : t('Solve', { note: 'recipe.forge.solve' })}
+      </Button>
+      <span className="flex items-center gap-1.5">
+        <IconButton
+          label={t('Undo last action', { note: 'recipe.forge.undo' })}
+          disabled={!applied.length || solving}
+          onClick={() => state.setApplied((prev) => prev.slice(0, -1))}
+        >
+          <Undo2 />
+        </IconButton>
+        <IconButton
+          label={t('Reset the workpiece', { note: 'recipe.forge.reset' })}
+          disabled={!applied.length || solving}
+          onClick={() => state.setApplied([])}
+        >
+          <RotateCcw />
+        </IconButton>
+        <IconButton
+          label={
+            copied
+              ? t('Copied', { note: 'recipe.forge.copied' })
+              : t('Copy steps', { note: 'recipe.forge.copy' })
+          }
+          disabled={!steps.length}
+          onClick={copy}
+        >
+          {copied ? (
+            <Check className="text-green-600 dark:text-green-400" />
+          ) : (
+            <Copy />
+          )}
+        </IconButton>
+      </span>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,85 @@
+'use client';
+
+import { useRef } from 'react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useElementSize } from '@terrafirmagreg-team/ui/hooks/use-element-size';
+import { GUI_PANEL, GuiSprite } from '@terrafirmagreg-team/recipe/components/views/forge/gui';
+import { useAnvilGui } from '@terrafirmagreg-team/recipe/hooks/forge/use-anvil-gui';
+import { useForgeState } from '@terrafirmagreg-team/recipe/hooks/forge/use-forge-state';
+import { WorkbenchControls } from './controls';
+import { AnvilPanel } from './panel';
+import { RulerOverlay } from './ruler';
+import { StatusPlate } from './status';
+import { StepTape } from './tape';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { ForgeRecipe } from '@terrafirmagreg-team/recipe/types/forge';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+const S_MAX = 2.5;
+const S_MIN = 1.5;
+
+export function ForgeWorkbench({
+  recipe,
+  session,
+}: {
+  recipe: ForgeRecipe;
+  session: RecipeSession;
+}) {
+  const t = useTranslations();
+  const atlas = useAnvilGui(session.dataset);
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const { w: wrapW } = useElementSize(wrapRef);
+  const S = wrapW
+    ? Math.max(S_MIN, Math.min(S_MAX, Math.floor((wrapW / GUI_PANEL.w) * 4) / 4))
+    : S_MAX;
+  const PX = (v: number) => v * S;
+  const state = useForgeState(recipe);
+  const { finished } = state;
+
+  return (
+    <section className="space-y-3">
+      {}
+      <WorkbenchControls state={state} rulesSupported={recipe.rulesSupported} langMap={session.langMap} />
+      {!recipe.rulesSupported ? (
+        <p role="alert" className="text-sm text-destructive">
+          {t('The dump contains missing or unrecognized forging rules. A safe solution cannot be calculated.', { note: 'recipe.forge.unsupported' })}
+        </p>
+      ) : null}
+
+      {}
+      <div
+        ref={wrapRef}
+        className="flex w-full flex-col items-center overflow-x-auto"
+      >
+        <div
+          ref={panelRef}
+          className={cn(
+            'relative shrink-0 rounded-sm bg-muted shadow-inner transition-shadow duration-300',
+            finished && 'shadow-[0_0_0_2px_rgb(63,185,80,0.5)]',
+          )}
+          style={{ width: PX(GUI_PANEL.w), height: PX(GUI_PANEL.h) }}
+        >
+          <GuiSprite
+            gui={atlas}
+            rect={GUI_PANEL}
+            scale={S}
+            className="absolute inset-0 rounded-sm"
+          />
+          <AnvilPanel atlas={atlas} scale={S} recipe={recipe} state={state} langMap={session.langMap} />
+          <RulerOverlay
+            atlas={atlas}
+            scale={S}
+            panelRef={panelRef}
+            state={state}
+          />
+        </div>
+
+        <StatusPlate state={state} scale={S} />
+      </div>
+
+      <StepTape atlas={atlas} state={state} />
+    </section>
+  );
+}
+

package/src/components/views/forge/workbench/panel.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { FORGE_ACTIONS, forgeActionLabel } from '@terrafirmagreg-team/recipe/lib/forge/actions';
+import {
+  PLAN_SLOT,
+  RULE_ICON,
+  RULE_OVERLAY_Y,
+  actionGlyphRect,
+  GuiMask,
+  GuiSprite,
+  type GuiRect,
+} from '@terrafirmagreg-team/recipe/components/views/forge/gui';
+import type { ForgeRecipe } from '@terrafirmagreg-team/recipe/types/forge';
+import type { ForgeState } from '@terrafirmagreg-team/recipe/hooks/forge/use-forge-state';
+
+const RULE_TINT = {
+  met: 'rgb(0,153,51)',
+  pending: 'rgb(255,102,0)',
+} as const;
+const ruleOutline = (color: string) =>
+  `drop-shadow(1px 0 0 ${color}) drop-shadow(-1px 0 0 ${color}) drop-shadow(0 1px 0 ${color}) drop-shadow(0 -1px 0 ${color})`;
+
+const BUTTON_TILE: Record<string, GuiRect> = {
+  light: { x: 53, y: 50, w: 16, h: 16 },
+  medium: { x: 71, y: 50, w: 16, h: 16 },
+  hard: { x: 53, y: 68, w: 16, h: 16 },
+  draw: { x: 71, y: 68, w: 16, h: 16 },
+  punch: { x: 89, y: 50, w: 16, h: 16 },
+  bend: { x: 107, y: 50, w: 16, h: 16 },
+  upset: { x: 89, y: 68, w: 16, h: 16 },
+  shrink: { x: 107, y: 68, w: 16, h: 16 },
+};
+
+export function AnvilPanel({
+  atlas,
+  scale,
+  recipe,
+  state,
+  langMap,
+}: {
+  atlas: string | undefined;
+  scale: number;
+  recipe: ForgeRecipe;
+  state: ForgeState;
+  langMap: Record<string, string>;
+}) {
+  const PX = (v: number) => v * scale;
+  const { work, solving, last, applied, ruleMet, push } = state;
+  const input = recipe.recipe.inputs[0];
+  const output = recipe.recipe.outputs[0];
+
+  return (
+    <>
+      {}
+      {recipe.rules.slice(0, 3).map((rule, i) => {
+        const rect = { x: 198, y: RULE_OVERLAY_Y[rule.order], w: 20, h: 22 };
+        return (
+          <div
+            key={i}
+            className="absolute"
+            style={{
+              left: PX(59 + i * 19),
+              top: PX(7),
+              width: PX(20),
+              height: PX(22),
+            }}
+          >
+            <GuiSprite
+              gui={atlas}
+              rect={rect}
+              scale={scale}
+              className="absolute inset-0"
+            />
+            {(['pending', 'met'] as const).map((state) => (
+              <GuiMask
+                key={state}
+                gui={atlas}
+                rect={rect}
+                scale={scale}
+                className="absolute inset-0 transition-opacity duration-200"
+                style={{
+                  backgroundColor: RULE_TINT[state],
+                  mixBlendMode: 'multiply',
+                  filter: ruleOutline(RULE_TINT[state]),
+                  opacity: (state === 'met') === ruleMet[i] ? 1 : 0,
+                }}
+              />
+            ))}
+          </div>
+        );
+      })}
+      {recipe.rules.slice(0, 3).map((rule, i) => (
+        <GuiSprite
+          key={i}
+          gui={atlas}
+          rect={RULE_ICON[rule.action]}
+          scale={scale / 3.2}
+          className="absolute"
+          style={{
+            left: PX(64 + i * 19),
+            top: PX(10),
+            width: PX(10),
+            height: PX(10),
+          }}
+        />
+      ))}
+
+      {}
+      {last.map((action, i) => (
+        <GuiSprite
+          key={`${i}-${action}-${applied.length}`}
+          gui={atlas}
+          rect={actionGlyphRect(action)}
+          scale={scale / 3.2}
+          className="absolute animate-in fade-in-0 zoom-in-50 duration-150"
+          style={{
+            left: PX(64 + i * 19),
+            top: PX(31),
+            width: PX(10),
+            height: PX(10),
+          }}
+        />
+      ))}
+
+      {}
+      <GuiSprite
+        gui={atlas}
+        rect={PLAN_SLOT}
+        scale={scale}
+        className="absolute"
+        style={{ left: PX(21), top: PX(40) }}
+      />
+      {output ? (
+        <div
+          className="absolute"
+          style={{
+            left: PX(22),
+            top: PX(41),
+            width: PX(16),
+            height: PX(16),
+          }}
+        >
+          <Entry
+            id={output.id}
+            kind={output.kind === 'fluid' ? 'fluid' : 'item'}
+            size={PX(16)}
+            href={false}
+            tooltip
+          />
+        </div>
+      ) : null}
+
+      {}
+      {input ? (
+        <div
+          className="absolute"
+          style={{
+            left: PX(31),
+            top: PX(68),
+            width: PX(16),
+            height: PX(16),
+          }}
+        >
+          <Entry
+            id={input.id}
+            kind={input.kind === 'fluid' ? 'fluid' : 'item'}
+            size={PX(16)}
+            href={false}
+            tooltip
+          />
+        </div>
+      ) : null}
+
+      {}
+      {FORGE_ACTIONS.map((action, index) => {
+        const disabled =
+          solving || work + action.delta < 0 || work + action.delta >= 150;
+        const [bx, by] = [BUTTON_TILE[action.id].x, BUTTON_TILE[action.id].y];
+        return (
+          <button
+            key={action.id}
+            type="button"
+            disabled={disabled}
+            title={`${forgeActionLabel(langMap, action.id)} (${action.delta > 0 ? '+' : ''}${action.delta})`}
+            aria-label={`${forgeActionLabel(langMap, action.id)} (${action.delta > 0 ? '+' : ''}${action.delta})`}
+            onClick={() => push(index)}
+            className="group absolute rounded-[6px] outline-none transition-[filter,transform] duration-100 hover:brightness-110 hover:drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)] focus-visible:ring-2 focus-visible:ring-ring active:scale-90 disabled:hover:brightness-100 disabled:hover:drop-shadow-none disabled:active:scale-100"
+            style={{
+              left: PX(bx),
+              top: PX(by),
+              width: PX(16),
+              height: PX(16),
+            }}
+          >
+            <GuiSprite
+              gui={atlas}
+              rect={BUTTON_TILE[action.id]}
+              scale={scale}
+              className="absolute inset-0"
+            />
+            <GuiSprite
+              gui={atlas}
+              rect={actionGlyphRect(action.id)}
+              scale={scale / 2}
+              className="absolute inset-0"
+            />
+            {disabled ? (
+              <GuiMask
+                gui={atlas}
+                rect={BUTTON_TILE[action.id]}
+                scale={scale}
+                className="absolute inset-0 bg-black/50"
+              />
+            ) : null}
+            {!atlas ? (
+              <span className="absolute inset-0 flex items-center justify-center text-[10px] font-bold tabular-nums">
+                {action.delta > 0 ? '+' : ''}
+                {action.delta}
+              </span>
+            ) : null}
+          </button>
+        );
+      })}
+    </>
+  );
+}
+

package/src/components/views/forge/workbench/ruler.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { MARK_PROGRESS, MARK_TARGET, GuiSprite } from '@terrafirmagreg-team/recipe/components/views/forge/gui';
+import { RULER, useRuler } from '@terrafirmagreg-team/recipe/hooks/forge/use-ruler';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { ForgeState } from '@terrafirmagreg-team/recipe/hooks/forge/use-forge-state';
+
+export function RulerOverlay({
+  atlas,
+  scale,
+  panelRef,
+  state,
+}: {
+  atlas: string | undefined;
+  scale: number;
+  panelRef: React.RefObject<HTMLDivElement | null>;
+  state: ForgeState;
+}) {
+  const t = useTranslations();
+  const PX = (v: number) => v * scale;
+  const { work, target, solving, setStart, setTarget, setTargetInput } = state;
+  const {
+    dragging,
+    beginDrag,
+    onRulerDown,
+    onRulerMove,
+    onRulerUp,
+    onHandleKey,
+  } = useRuler({
+    panelRef,
+    scale,
+    work,
+    target,
+    solving,
+    onWork: setStart,
+    onTarget: setTarget,
+  });
+
+  const markerHandles = [
+    { kind: 'target', value: target ?? 0, label: t('Target', { note: 'recipe.forge.target' }) },
+    { kind: 'work', value: work, label: t('Current work', { note: 'recipe.forge.current' }) },
+  ] as const;
+
+  return (
+    <>
+      <GuiSprite
+        gui={atlas}
+        rect={MARK_PROGRESS}
+        scale={scale}
+        className={cn(
+          'pointer-events-none absolute',
+          !dragging && 'transition-[left] duration-200',
+        )}
+        style={{ left: PX(RULER.markerX + work), top: PX(100) }}
+      />
+      <GuiSprite
+        gui={atlas}
+        rect={MARK_TARGET}
+        scale={scale}
+        className={cn(
+          'pointer-events-none absolute',
+          !dragging && 'transition-[left] duration-200',
+        )}
+        style={{ left: PX(RULER.markerX + (target ?? 0)), top: PX(94) }}
+      />
+      <div
+        role="slider"
+        aria-label={t('Work ruler', { note: 'recipe.forge.ruler' })}
+        aria-valuemin={0}
+        aria-valuemax={149}
+        aria-valuenow={target ?? work}
+        aria-disabled={solving}
+        tabIndex={0}
+        className={cn(
+          'absolute touch-none',
+          solving ? 'cursor-not-allowed' : 'cursor-ew-resize',
+        )}
+        onKeyDown={(event) => {
+          if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+          event.preventDefault();
+          const step = event.shiftKey ? 10 : 1;
+          const value = Math.max(
+            0,
+            Math.min(
+              149,
+              (target ?? work) + (event.key === 'ArrowRight' ? step : -step),
+            ),
+          );
+          setTargetInput(String(value));
+        }}
+        style={{
+          left: PX(4),
+          top: PX(RULER.numbersTop - 2),
+          width: PX(168),
+          height: PX(RULER.trackBottom - RULER.numbersTop + 4),
+        }}
+        onPointerDown={onRulerDown}
+        onPointerMove={onRulerMove}
+        onPointerUp={onRulerUp}
+        onPointerCancel={onRulerUp}
+      />
+      {markerHandles.map(({ kind, value, label }) => (
+        <div
+          key={kind}
+          role="slider"
+          aria-label={label}
+          aria-valuemin={0}
+          aria-valuemax={149}
+          aria-valuenow={value}
+          aria-disabled={solving}
+          tabIndex={0}
+          className={cn(
+            'absolute touch-none rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            solving ? 'cursor-not-allowed' : 'cursor-grab',
+          )}
+          onKeyDown={onHandleKey(kind)}
+          onPointerDown={(event) => beginDrag(event, kind)}
+          onPointerMove={onRulerMove}
+          onPointerUp={onRulerUp}
+          onPointerCancel={onRulerUp}
+          style={{
+            left: PX(RULER.markerX + value + 2.5 - 6),
+            top: PX(RULER.numbersTop - 2),
+            width: PX(12),
+            height: PX(RULER.trackBottom - RULER.numbersTop + 4),
+          }}
+        />
+      ))}
+    </>
+  );
+}
+

package/src/components/views/forge/workbench/status.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Check, X } from 'lucide-react';
+import { GUI_PANEL } from '@terrafirmagreg-team/recipe/components/views/forge/gui';
+import type { ForgeState } from '@terrafirmagreg-team/recipe/hooks/forge/use-forge-state';
+
+export function StatusPlate({
+  state,
+  scale,
+}: {
+  state: ForgeState;
+  scale: number;
+}) {
+  const t = useTranslations();
+  const PX = (v: number) => v * scale;
+  const { work, target, finished, failed } = state;
+
+  return (
+    <div
+      className="mt-2 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 rounded-md border bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground tabular-nums"
+      style={{ width: PX(GUI_PANEL.w) }}
+    >
+      <span>
+        {t('Work', { note: 'recipe.forge.work' })}:{' '}
+        <span className="font-medium text-green-700 dark:text-green-400">
+          {work}
+        </span>
+      </span>
+      <span>
+        {t('Target', { note: 'recipe.forge.target' })}:{' '}
+        <span className="font-medium text-red-700 dark:text-red-400">
+          {target ?? 0}
+        </span>
+      </span>
+      {finished ? (
+        <span className="inline-flex items-center gap-1 text-green-600 animate-in fade-in-0">
+          <Check className="size-3" /> {t('Done', { note: 'recipe.forge.done' })}
+        </span>
+      ) : null}
+      {failed ? (
+        <span
+          role="status"
+          className="inline-flex items-center gap-1 text-destructive"
+        >
+          <X className="size-3" /> {t('No sequence reaches this target under these rules. Reset the workpiece and try another target.', { note: 'recipe.forge.no_solution' })}
+        </span>
+      ) : null}
+      {target !== null && work > target && !failed ? (
+        <span>{t('Work is above the target, use Draw or lighter hits to come back.', { note: 'recipe.forge.over_target' })}</span>
+      ) : null}
+    </div>
+  );
+}
+

package/src/components/views/forge/workbench/tape.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { GuiSprite, actionGlyphRect } from '@terrafirmagreg-team/recipe/components/views/forge/gui';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { ForgeState } from '@terrafirmagreg-team/recipe/hooks/forge/use-forge-state';
+
+const TAPE_MAX = 12;
+
+export function StepTape({
+  atlas,
+  state,
+}: {
+  atlas: string | undefined;
+  state: ForgeState;
+}) {
+  const t = useTranslations();
+  const { steps, expanded, setExpanded, setApplied } = state;
+  const tapeHidden = Math.max(0, steps.length - TAPE_MAX);
+  const tapeShown = expanded ? steps : steps.slice(tapeHidden);
+
+  if (!steps.length) return null;
+  return (
+    <ol className="flex flex-wrap gap-1.5">
+      {tapeHidden > 0 && !expanded ? (
+        <li>
+          <button
+            type="button"
+            title={t('Show all steps', { note: 'recipe.forge.expand_steps' })}
+            aria-label={t('Show all steps', { note: 'recipe.forge.expand_steps' })}
+            onClick={() => setExpanded(true)}
+            className="flex items-center rounded border border-dashed px-1.5 py-0.5 text-xs tabular-nums text-muted-foreground hover:bg-accent"
+          >
+            …+{tapeHidden}
+          </button>
+        </li>
+      ) : null}
+      {tapeShown.map((step, j) => {
+        const i = expanded ? j : tapeHidden + j;
+        return (
+          <li key={i} className="animate-in fade-in-0 zoom-in-95 duration-150">
+            <button
+              type="button"
+              title={t('Trim to this step', { note: 'recipe.forge.trim_to' })}
+              onClick={() => setApplied((prev) => prev.slice(0, i + 1))}
+              className={cn(
+                'flex items-center gap-1.5 rounded border px-1.5 py-0.5 text-xs tabular-nums hover:bg-accent',
+                step.delta < 0 ? 'border-red-500/30' : 'border-green-500/30',
+              )}
+            >
+              <span className="text-muted-foreground">{i + 1}</span>
+              <GuiSprite
+                gui={atlas}
+                rect={actionGlyphRect(step.id)}
+                scale={14 / 32}
+                className="size-3.5"
+              />
+              <span>
+                {step.delta > 0 ? '+' : ''}
+                {step.delta}
+              </span>
+              <span className="text-muted-foreground">→ {step.work}</span>
+            </button>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+