@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

package/src/components/views/alloy/mix/status.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useCopyButton } from '@terrafirmagreg-team/ui/hooks/use-copy-button';
+import { Badge } from '@terrafirmagreg-team/ui/components/ui/badge';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import {
+  ArrowUpToLine,
+  Check,
+  Copy,
+  Magnet,
+  RotateCcw,
+} from 'lucide-react';
+import type { MixState } from '@terrafirmagreg-team/recipe/hooks/alloy/use-mix-state';
+
+export function MixStatus({ state }: { state: MixState }) {
+  const t = useTranslations();
+  const {
+    mix,
+    fix,
+    needsSnap,
+    snapped,
+    factor,
+    totalNumber,
+    unit,
+    ratioMix,
+    output,
+    unitLabel,
+    format,
+    copyText,
+    trim,
+    setInputs,
+    fill,
+  } = state;
+  const { checked: copied, onClick: onCopy } = useCopyButton(() =>
+    navigator.clipboard.writeText(copyText),
+  );
+
+  return (
+    <div
+      aria-live="polite"
+      className="flex flex-wrap items-center gap-3 rounded-md border bg-muted/40 px-3 py-2"
+    >
+      <Badge variant={mix.valid ? 'default' : 'destructive'}>
+        {mix.valid ? t('Valid alloy', { note: 'recipe.alloy.valid' }) : t('Outside allowed ranges', { note: 'recipe.alloy.invalid' })}
+      </Badge>
+      <span className="flex flex-wrap items-baseline gap-x-3">
+        <span className="text-sm text-muted-foreground tabular-nums">
+          {t('Total', { note: 'recipe.alloy.total_in' })}: {format(mix.total)} {unitLabel}
+        </span>
+        <span className="flex items-center gap-1.5 text-sm tabular-nums font-medium">
+          <span className="text-muted-foreground">→</span>
+          {output ? (
+            <Entry
+              id={output.id}
+              kind={output.kind === 'fluid' ? 'fluid' : 'item'}
+              size="sm"
+              labeled
+              href={false}
+              tooltip={false}
+            />
+          ) : (
+            t('Alloy', { note: 'recipe.alloy.result' })
+          )}
+          <span className="font-normal text-muted-foreground">
+            {format(mix.output)} {unitLabel}
+          </span>
+        </span>
+      </span>
+      <span className="ms-auto flex flex-wrap items-center gap-2">
+        <IconButton
+          label={`${t('Top up to minimum', { note: 'recipe.alloy.fix' })}: ${t('Add just enough metal to bring every share into its range', { note: 'recipe.alloy.hint.fix' })}`}
+          disabled={!fix || mix.valid}
+          onClick={() =>
+            fix &&
+            setInputs((prev) =>
+              prev.map((value, i) => trim((Number(value) || 0) + fix[i])),
+            )
+          }
+        >
+          <ArrowUpToLine className="size-3.5" />
+        </IconButton>
+        {needsSnap ? (
+          <IconButton
+            label={`${t('Snap to whole ingots', { note: 'recipe.alloy.snap_ingots' })}: ${t('Round each metal to whole ingots, staying inside the ranges', { note: 'recipe.alloy.hint.snap' })}`}
+            disabled={!snapped}
+            onClick={() =>
+              snapped && setInputs(snapped.map((value) => trim(value / factor)))
+            }
+          >
+            <Magnet className="size-3.5" />
+          </IconButton>
+        ) : (
+          <span className="size-7 shrink-0" aria-hidden />
+        )}
+        <IconButton
+          label={`${t('Reset to recipe ratio', { note: 'recipe.alloy.reset' })}: ${t('Restore the recipe-ratio mix', { note: 'recipe.alloy.hint.reset' })}`}
+          onClick={() =>
+            fill(
+              Number.isFinite(totalNumber)
+                ? totalNumber
+                : unit === 'ingot'
+                  ? (ratioMix?.total ?? 10)
+                  : 144,
+            )
+          }
+        >
+          <RotateCcw className="size-3.5" />
+        </IconButton>
+        <IconButton label={t('Copy the mix as text', { note: 'recipe.alloy.copy_mix' })} onClick={onCopy}>
+          {copied ? (
+            <Check className="size-3.5 text-green-600 dark:text-green-400" />
+          ) : (
+            <Copy className="size-3.5" />
+          )}
+        </IconButton>
+      </span>
+    </div>
+  );
+}
+

package/src/components/views/alloy/mix/total.tsx

@@ -0,0 +1,132 @@
+'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 {
+  ToggleGroup,
+  ToggleGroupItem,
+} from '@terrafirmagreg-team/ui/components/ui/toggle-group';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import { INGOT_MB, suggestAmounts } from '@terrafirmagreg-team/recipe/lib/alloy/mix';
+import { Percent } from 'lucide-react';
+import type { AlloyComponent } from '@terrafirmagreg-team/recipe/types/alloy';
+import type { MixState } from '@terrafirmagreg-team/recipe/hooks/alloy/use-mix-state';
+
+export function MixTotal({
+  state,
+  components,
+}: {
+  state: MixState;
+  components: readonly AlloyComponent[];
+}) {
+  const t = useTranslations();
+  const {
+    unit,
+    total,
+    totalNumber,
+    totalInvalid,
+    presets,
+    ratioMix,
+    format,
+    unitLabel,
+    applyTotal,
+    switchUnit,
+    fill,
+  } = state;
+
+  return (
+    <>
+      <div className="flex flex-wrap items-end gap-2">
+        <label className="flex w-44 flex-col gap-1 text-xs text-muted-foreground">
+          <span className="flex items-baseline justify-between gap-2">
+            {t('Target total', { note: 'recipe.alloy.total' })}
+            {unit === 'ingot' ? (
+              <span className="tabular-nums text-muted-foreground/70">
+                {Number.isFinite(totalNumber)
+                  ? `= ${format(totalNumber * INGOT_MB)} ${t('mB', { note: 'recipe.alloy.unit.mb' })}`
+                  : `×${INGOT_MB} ${t('mB', { note: 'recipe.alloy.unit.mb' })}`}
+              </span>
+            ) : null}
+          </span>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Input
+                  inputMode="decimal"
+                  name="alloy-total"
+                  autoComplete="off"
+                  value={total}
+                  onChange={(event) => applyTotal(event.target.value)}
+                  placeholder={
+                    unit === 'ingot' ? String(ratioMix?.total ?? 10) : '144'
+                  }
+                />
+              }
+            />
+            <TooltipContent>{t('Scales the current mix to this total as you type', { note: 'recipe.alloy.hint.scale' })}</TooltipContent>
+          </Tooltip>
+          {totalInvalid ? (
+            <span className="text-[11px] text-destructive">
+              {t('Enter a positive total amount.', { note: 'recipe.alloy.invalid_total' })}
+            </span>
+          ) : null}
+        </label>
+        <ToggleGroup
+          value={[unit]}
+          onValueChange={(next) => {
+            const value = next[0];
+            if (value === 'mb' || value === 'ingot') switchUnit(value);
+          }}
+          variant="outline"
+          size="sm"
+          spacing={0}
+          aria-label={t('units', { note: 'recipe.alloy.units' })}
+        >
+          <Tooltip>
+            <TooltipTrigger render={<ToggleGroupItem value="mb" />}>
+              {t('mB', { note: 'recipe.alloy.unit.mb' })}
+            </TooltipTrigger>
+            <TooltipContent>{t('Millibuckets (mB)', { note: 'recipe.alloy.hint.mb' })}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger render={<ToggleGroupItem value="ingot" />}>
+              {t('ing.', { note: 'recipe.alloy.unit.ingot' })}
+            </TooltipTrigger>
+            <TooltipContent>{t('Ingots: 1 ingot = 144 mB', { note: 'recipe.alloy.hint.ingot' })}</TooltipContent>
+          </Tooltip>
+        </ToggleGroup>
+        <IconButton
+          label={`${t('Fill by recipe', { note: 'recipe.alloy.fill' })}: ${t('Split the target total between metals by the recipe ratio', { note: 'recipe.alloy.hint.fill' })}`}
+          disabled={!suggestAmounts(components, totalNumber)}
+          onClick={() => fill(totalNumber)}
+        >
+          <Percent className="size-3.5" />
+        </IconButton>
+      </div>
+      <div
+        role="group"
+        aria-label={t('Quick totals', { note: 'recipe.alloy.presets' })}
+        className="flex flex-wrap gap-1.5"
+      >
+        {presets.map((value) => (
+          <Button
+            key={value}
+            variant="outline"
+            size="xs"
+            className="tabular-nums"
+            onClick={() => applyTotal(String(value))}
+          >
+            {format(value)} {unitLabel}
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}
+

package/src/components/views/alloy/range-bar.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export function AlloyRangeBar({
+  min,
+  max,
+  value,
+  color,
+  label,
+}: {
+  min: number;
+  max: number;
+  value: number;
+  color?: string;
+  label?: string;
+}) {
+  const valid = value >= min - 1e-8 && value <= max + 1e-8;
+  const bar = (
+    <div className="relative h-2.5 w-full min-w-24 rounded bg-secondary">
+      <div
+        className={cn(
+          'absolute inset-y-0 rounded transition-[background-color]',
+          !color &&
+            (valid
+              ? 'bg-green-600/30 dark:bg-green-400/30'
+              : 'bg-muted-foreground/25'),
+        )}
+        style={{
+          left: `${min}%`,
+          width: `${max - min}%`,
+          ...(color ? { backgroundColor: color, opacity: 0.28 } : {}),
+        }}
+      />
+      <div
+        className={cn(
+          'absolute -inset-y-0.5 w-0.5 rounded transition-[left,background-color]',
+          !color && (valid ? 'bg-green-700 dark:bg-green-300' : 'bg-destructive'),
+          color && !valid && 'bg-destructive',
+        )}
+        style={{
+          left: `${Math.min(100, Math.max(0, value))}%`,
+          ...(color && valid ? { backgroundColor: color } : {}),
+        }}
+      />
+    </div>
+  );
+  if (!label) return bar;
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={<div className="w-full" tabIndex={0} aria-label={label} />}
+      >
+        {bar}
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+

package/src/components/views/alloy/stack-bar.tsx

@@ -0,0 +1,88 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useMemo } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { useFluidColors } from '@terrafirmagreg-team/recipe/hooks/alloy/use-fluid-colors';
+import type { AlloyComponent, AlloyMixRow } from '@terrafirmagreg-team/recipe/types/alloy';
+
+const PALETTE = [
+  'bg-amber-500',
+  'bg-sky-500',
+  'bg-emerald-500',
+  'bg-lime-500',
+  'bg-violet-500',
+  'bg-orange-500',
+  'bg-teal-500',
+];
+
+export function AlloyStackBar({
+  rows,
+  colors,
+  className,
+  label,
+}: {
+  rows: readonly Pick<AlloyMixRow, 'percent' | 'valid'>[];
+  colors?: readonly (string | undefined)[];
+  className?: string;
+
+  label?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex h-3 w-full overflow-hidden rounded bg-secondary',
+        className,
+      )}
+      role={label ? 'img' : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+    >
+      {rows.map((row, i) => {
+        const color = colors?.[i];
+        return (
+          <div
+            key={i}
+            className={cn(
+              'h-full transition-[width,background-color]',
+              !color && PALETTE[i % PALETTE.length],
+              !row.valid && 'opacity-40',
+            )}
+            style={{
+              width: `${Math.max(0, Math.min(100, row.percent))}%`,
+              ...(color ? { backgroundColor: color } : {}),
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export function AlloyMiniBar({
+  dataset,
+  components,
+  className,
+}: {
+  dataset: DatasetRef;
+  components: readonly AlloyComponent[];
+  className?: string;
+}) {
+  const slots = useMemo(() => components.map(({ slot }) => slot), [components]);
+  const colors = useFluidColors(dataset, slots);
+  const sum = components.reduce(
+    (total, { slot }) => total + (slot.amount || 0),
+    0,
+  );
+  return (
+    <AlloyStackBar
+      className={className}
+      colors={colors}
+      rows={components.map(({ slot }) => ({
+        percent: sum > 0 ? (slot.amount / sum) * 100 : 0,
+        valid: true,
+      }))}
+    />
+  );
+}
+

package/src/components/views/browser/axis-switcher.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { Anvil, Calculator, FlaskConical, Shapes } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
+import { useLocationSearchParams } from '@terrafirmagreg-team/ui/hooks/page/use-location-search';
+import { recipePlaceFromParams } from '@terrafirmagreg-team/recipe/lib/links';
+import { recipeCalcHref, recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { parseSectionLocation } from '@terrafirmagreg-team/sites/location';
+import { Switcher } from '@terrafirmagreg-team/ui/components/blocks/nav/switcher';
+
+export function RecipeAxisSwitcher() {
+  const t = useTranslations();
+  const { dataset: datasetId } = parseSectionLocation(usePathname());
+  const lang = useResolvedLang();
+  const params = useLocationSearchParams();
+  const axis = recipePlaceFromParams(params).kind;
+  const dataset = { id: datasetId ?? '', version: params.get('version') ?? undefined };
+  if (!datasetId) return null;
+  return (
+    <Switcher
+      options={[
+        {
+          value: 'type',
+          title: t('Categories', { note: 'recipe.axis_type' }),
+          icon: <Shapes className="size-4" />,
+          url: recipeHref(dataset, lang),
+        },
+        {
+          value: 'calc',
+          title: t('Calculator', { note: 'recipe.calculator' }),
+          icon: <Calculator className="size-4" />,
+          url: recipeCalcHref(dataset, lang),
+        },
+        {
+          value: 'forge',
+          title: t('Forging', { note: 'recipe.forge.title' }),
+          icon: <Anvil className="size-4" />,
+          url: recipeHref(dataset, lang, { tool: 'forge' }),
+        },
+        {
+          value: 'alloy',
+          title: t('Alloys', { note: 'recipe.alloy.title' }),
+          icon: <FlaskConical className="size-4" />,
+          url: recipeHref(dataset, lang, { tool: 'alloy' }),
+        },
+      ]}
+      selected={axis ?? 'type'}
+      placeholder={t('Categories', { note: 'recipe.axis_type' })}
+    />
+  );
+}
+