@terrafirmagreg-team/game 0.0.0-stage → 0.1.0

package/src/components/entry/icon/tabs.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { useRef, useState, type ReactNode } from 'react';
+import { useElementSize } from '@terrafirmagreg-team/ui/hooks/use-element-size';
+import { useSwipe } from '@terrafirmagreg-team/ui/hooks/use-swipe';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+import { PagerArrow } from '@terrafirmagreg-team/ui/components/blocks/page/pager';
+import { ENTRY_CHIP_CLASS } from '@terrafirmagreg-team/game/components/entry/frame';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+type IconTabOption<T extends string> = {
+  id: T;
+  icon: ReactNode;
+  help?: string;
+};
+
+const CELL = 40;
+const GAP = 4;
+const ARROW = 36;
+
+export function IconTabs<T extends string>({
+  value,
+  options,
+  onChange,
+  className,
+}: {
+  value?: T;
+  options: IconTabOption<T>[];
+  onChange: (id: T) => void;
+  className?: string;
+}) {
+  const t = useTranslations();
+  const stripRef = useRef<HTMLDivElement | null>(null);
+  const { w } = useElementSize(stripRef);
+  const per = Math.max(
+    1,
+    Math.floor((w - 2 * (ARROW + GAP) + GAP) / CELL),
+  );
+  const pages = Math.max(1, Math.ceil(options.length / per));
+  const valueIndex = options.findIndex((option) => option.id === value);
+  const autoPage = Math.max(0, Math.floor(valueIndex / per));
+  const [manual, setManual] = useState<number | null>(null);
+  const [lastValue, setLastValue] = useState(value);
+  if (lastValue !== value) {
+    setLastValue(value);
+    setManual(null);
+  }
+  const page = Math.min(manual ?? autoPage, pages - 1);
+  const shown = options.slice(page * per, (page + 1) * per);
+
+  const go = (dir: number) => setManual((page + dir + pages) % pages);
+  const swipe = useSwipe((dir) => {
+    const next = valueIndex + dir;
+    if (next >= 0 && next < options.length) {
+      onChange(options[next]!.id);
+    } else {
+      go(dir);
+    }
+  });
+
+  const arrow = (dir: -1 | 1, label: string) => (
+    <PagerArrow
+      dir={dir}
+      label={label}
+      disabled={pages <= 1}
+      onClick={() => go(dir)}
+    />
+  );
+
+  return (
+    <div
+      ref={stripRef}
+      {...swipe}
+      onWheel={(event) => {
+        if (pages > 1) go(event.deltaY > 0 ? 1 : -1);
+      }}
+      className={cn('flex min-h-9 items-center gap-1', className)}
+    >
+      {arrow(-1, t('ui.prev_page'))}
+      <div
+        className={cn(
+          'flex min-w-0 flex-1 items-center justify-center gap-1',
+          w === 0 && 'invisible',
+        )}
+      >
+        {shown.map((option) => (
+          <Tooltip key={option.id}>
+            <TooltipTrigger
+              render={
+                <button
+                  type="button"
+                  onClick={() => onChange(option.id)}
+                  aria-label={option.help ?? option.id}
+                  aria-pressed={option.id === value}
+                  className={cn(
+                    ENTRY_CHIP_CLASS,
+                    'size-9 rounded-sm p-0 text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:border-primary aria-pressed:bg-accent aria-pressed:text-foreground',
+                  )}
+                />
+              }
+            >
+              {option.icon}
+            </TooltipTrigger>
+            {option.help ? (
+              <TooltipContent>{option.help}</TooltipContent>
+            ) : null}
+          </Tooltip>
+        ))}
+      </div>
+      {arrow(1, t('ui.next_page'))}
+    </div>
+  );
+}

package/src/components/entry/icon.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useState } from 'react';
+import { useEntryContext } from '@terrafirmagreg-team/game/hooks/use-entry-context';
+import { EntryFrame } from '@terrafirmagreg-team/game/components/entry/frame';
+import { AtlasSprite } from '@terrafirmagreg-team/game/components/entry/atlas-sprite';
+import { useIconSource } from '@terrafirmagreg-team/game/hooks/use-icon-source';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type {
+  DumpNbt,
+  ReferenceKind,
+  TaggedReference,
+} from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import type { EntrySize } from '@terrafirmagreg-team/game/types/entry';
+
+export { ENTRY_CYCLE_MS } from '@terrafirmagreg-team/game/hooks/use-icon-source';
+
+const ENTRY_SIZE_PX = { sm: 16, md: 24, lg: 32, xl: 40 } as const;
+
+export function entrySizePx(size: EntrySize): number {
+  return typeof size === 'number' ? size : ENTRY_SIZE_PX[size];
+}
+
+export function EntryIcon({
+  reference,
+  id,
+  kind,
+  tag,
+  dataset: datasetProp,
+  size: sizeProp = 'md',
+  labeled = false,
+  label,
+  missing = 'placeholder',
+  chip = false,
+  preferVariant = false,
+  badge,
+  badgeClassName,
+  children,
+}: {
+
+  reference?: TaggedReference;
+  id?: string;
+  kind?: ReferenceKind;
+  tag?: DumpNbt;
+  dataset?: string;
+  size?: EntrySize;
+  labeled?: boolean;
+  label?: string;
+  missing?: 'placeholder' | 'item' | 'hide';
+  chip?: boolean;
+
+  preferVariant?: boolean;
+  badge?: React.ReactNode;
+  badgeClassName?: string;
+  children?: React.ReactNode;
+}) {
+  const size = entrySizePx(sizeProp);
+  const ctx = useEntryContext();
+  const dataset = datasetProp ?? ctx?.dataset;
+  const source = useIconSource({
+    dataset,
+    reference,
+    id,
+    kind,
+    tag,
+    missing,
+    preferVariant,
+  });
+  const caption = label || undefined;
+  const name = caption ?? source.rawId;
+  const [fileFailed, setFileFailed] = useState<{
+    key: string;
+    failed: boolean;
+  }>({ key: '', failed: false });
+  const hideMissing = missing === 'hide';
+  const imgSrc = source.imgSrc;
+
+  const failed =
+    fileFailed.failed && fileFailed.key === (imgSrc ?? source.sourceKey);
+
+  const boxStyle = { width: size, height: size };
+  const pendingBox = (
+    <Skeleton
+      className="inline-block shrink-0 rounded-sm"
+      style={boxStyle}
+    />
+  );
+  const missingBox = (
+    <span
+      className="font-mc inline-flex shrink-0 items-center justify-center rounded-sm border border-border bg-secondary text-muted-foreground"
+      style={{ ...boxStyle, fontSize: Math.max(7, Math.round(size * 0.6)) }}
+    >
+      ?
+    </span>
+  );
+  const img = (src: string) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      alt={name}
+      width={size}
+      height={size}
+      className="rounded-sm"
+      style={{ width: size, height: size, imageRendering: 'pixelated' }}
+      loading="lazy"
+      decoding="async"
+      onError={() =>
+        setFileFailed({ key: imgSrc ?? source.sourceKey, failed: true })
+      }
+    />
+  );
+
+  let icon: React.ReactNode = null;
+  if (source.cycleRef && dataset) {
+    icon = (
+      <EntryIcon
+        reference={source.cycleRef}
+        dataset={dataset}
+        size={size}
+        missing={missing}
+      />
+    );
+  } else if (source.lookup && dataset) {
+    icon = <AtlasSprite dataset={dataset} lookup={source.lookup} size={size} />;
+  } else if (source.pending || source.awaitingAtlas) {
+    icon = hideMissing ? null : pendingBox;
+  } else if (source.isEntity && imgSrc && !failed) {
+    icon = img(imgSrc);
+  } else if (source.awaitingTexture) {
+    icon = hideMissing ? null : pendingBox;
+  } else if (source.usesAtlas || !imgSrc || failed) {
+    icon = hideMissing
+      ? null
+      : missing === 'item' && source.missingLookup && dataset
+        ? (
+            <AtlasSprite
+              dataset={dataset}
+              lookup={source.missingLookup}
+              size={size}
+            />
+          )
+        : missing === 'item' && source.missingPending
+          ? pendingBox
+          : missingBox;
+  } else {
+    icon = img(imgSrc);
+  }
+
+  if (!icon && !labeled && !children) return null;
+
+  const framed = (
+    <EntryFrame
+      size={size}
+      chip={chip}
+      className={badge !== undefined ? 'relative' : undefined}
+    >
+      {icon}
+      {badge !== undefined ? (
+        <span
+          className={cn(
+            'pointer-events-none absolute -right-0.5 -bottom-0.5 z-10',
+            badgeClassName,
+          )}
+        >
+          {badge}
+        </span>
+      ) : null}
+    </EntryFrame>
+  );
+
+  if (!labeled && !children) return framed;
+
+  return (
+    <span className="inline-flex items-center gap-2 align-middle not-prose">
+      {framed}
+      {labeled ? (
+        caption && caption !== source.rawId ? (
+          <span className="text-xs">{caption}</span>
+        ) : (
+          <code className="text-xs">{source.rawId}</code>
+        )
+      ) : null}
+      {children}
+    </span>
+  );
+}

package/src/components/entry/list.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { TaggedReference } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+
+export function EntryList({
+  items,
+  dataset,
+  lang,
+  langMap,
+  tab,
+  type,
+  variant = 'grid',
+  labeled,
+  href,
+  className,
+}: {
+  items: TaggedReference[];
+  dataset?: string;
+  lang?: Lang;
+  langMap?: Record<string, string>;
+  tab?: string;
+  type?: string;
+  variant?: 'grid' | 'row';
+
+  labeled?: boolean;
+
+  href?: string | false;
+  className?: string;
+}) {
+  return (
+    <ul
+      className={cn(
+        variant === 'grid'
+          ? 'grid grid-cols-[repeat(auto-fill,minmax(--spacing(9),1fr))] gap-1'
+          : 'flex flex-wrap items-center gap-3',
+        className,
+      )}
+    >
+      {items.map((item, index) => (
+        <li key={`${item.kind}:${item.id}:${index}`}>
+          {variant === 'grid' ? (
+            <Entry
+              reference={item}
+              dataset={dataset}
+              lang={lang}
+              langMap={langMap}
+              tab={tab}
+              type={type}
+              href={href}
+              variant="chip"
+              size="lg"
+              className="size-9"
+            />
+          ) : (
+            <Entry
+              reference={item}
+              dataset={dataset}
+              langMap={langMap}
+              labeled={labeled}
+              href={href}
+            />
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/entry/mc-text.tsx

@@ -0,0 +1,92 @@
+import { Fragment, type CSSProperties } from 'react';
+import { MC_FORMAT_COLORS } from '@terrafirmagreg-team/game/lib/dump/contract/text';
+
+const isCode = (char: string | undefined): char is string =>
+  char !== undefined && /[0-9a-fklmnor]/.test(char);
+
+type Run = { text: string; style?: CSSProperties };
+
+export function McText({ text }: { text: string }) {
+  const runs: Run[] = [];
+  let style: CSSProperties | undefined;
+  let buf = '';
+  const flush = () => {
+    if (!buf) return;
+    runs.push(style ? { text: buf, style } : { text: buf });
+    buf = '';
+  };
+  for (let i = 0; i < text.length; i += 1) {
+    const ch = text[i];
+    if (ch !== '§') {
+      buf += ch;
+      continue;
+    }
+    const code = text[i + 1]?.toLowerCase();
+    if (code === 'x') {
+      let hex = '';
+      let j = i + 2;
+      while (
+        hex.length < 6 &&
+        text[j] === '§' &&
+        /^[0-9a-f]$/.test(text[j + 1]?.toLowerCase() ?? '')
+      ) {
+        hex += (text[j + 1] ?? '').toLowerCase();
+        j += 2;
+      }
+      if (hex.length === 6) {
+        flush();
+        i = j - 1;
+        const next: CSSProperties = { ...(style ?? {}), color: `#${hex}` };
+        delete next.fontWeight;
+        delete next.fontStyle;
+        delete next.textDecoration;
+        style = next;
+        continue;
+      }
+      buf += ch;
+      continue;
+    }
+    if (!isCode(code)) {
+      buf += ch;
+      continue;
+    }
+    flush();
+    i += 1;
+    if (code === 'r') {
+      style = undefined;
+      continue;
+    }
+    const next: CSSProperties = { ...(style ?? {}) };
+    const color = MC_FORMAT_COLORS[code];
+    if (color) {
+      next.color = color;
+      delete next.fontWeight;
+      delete next.fontStyle;
+      delete next.textDecoration;
+    } else if (code === 'l') next.fontWeight = 600;
+    else if (code === 'o') next.fontStyle = 'italic';
+    else if (code === 'n')
+      next.textDecoration = next.textDecoration
+        ? `${next.textDecoration} underline`
+        : 'underline';
+    else if (code === 'm')
+      next.textDecoration = next.textDecoration
+        ? `${next.textDecoration} line-through`
+        : 'line-through';
+    style = Object.keys(next).length ? next : undefined;
+  }
+  flush();
+  return (
+    <>
+      {runs.map((run, index) =>
+        run.style ? (
+          <span key={index} style={run.style}>
+            {run.text}
+          </span>
+        ) : (
+          <Fragment key={index}>{run.text}</Fragment>
+        ),
+      )}
+    </>
+  );
+}

package/src/components/entry/stack-count.tsx

@@ -0,0 +1,14 @@
+import { formatCount } from '@terrafirmagreg-team/ui/lib/utils/format';
+
+export function StackCount({ count }: { count: number }) {
+  if (count < 1) return null;
+  return (
+    <span
+      aria-hidden
+      className="font-mc pointer-events-none leading-none text-white"
+      style={{ fontSize: 9, textShadow: '1px 1px 0 var(--color-mc-arrow)' }}
+    >
+      {formatCount(count)}
+    </span>
+  );
+}

package/src/components/entry/tooltip.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useState, type ReactElement, type ReactNode } from 'react';
+import { useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { useModifierKeys } from '@terrafirmagreg-team/ui/hooks/use-modifier-keys';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+import { stackTooltip } from '@terrafirmagreg-team/game/lib/entry/tooltip';
+import { formulaRuns } from '@terrafirmagreg-team/game/lib/entry/formula';
+import { McText } from '@terrafirmagreg-team/game/components/entry/mc-text';
+import { stripMcFormat } from '@terrafirmagreg-team/game/lib/dump/assets/lang/names';
+
+const ENCHANTED_TEXT_COLOR = 'var(--color-mc-enchant)';
+
+export type EntryTooltipLevel =
+  | 'compact'
+  | 'extended'
+  | 'full'
+  | 'adaptive'
+  | 'none';
+
+function TooltipLine({ text }: { text: string }) {
+  const runs = formulaRuns(stripMcFormat(text));
+  if (!runs) return <McText text={text} />;
+  return (
+    <>
+      {runs.map((run, index) =>
+        run.color ? (
+          <span key={index} style={{ color: run.color }}>
+            {run.text}
+          </span>
+        ) : (
+          run.text
+        ),
+      )}
+    </>
+  );
+}
+
+export function EntryTooltip({
+  dataset,
+  id,
+  name,
+  kind,
+  lang,
+  langMap,
+  level = 'full',
+  footer,
+  children,
+}: {
+  dataset: string;
+  id: string;
+  name: string;
+  kind?: 'item' | 'fluid' | 'entity';
+
+  lang?: string;
+  langMap?: Record<string, string>;
+
+  level?: EntryTooltipLevel;
+  footer?: ReactNode;
+  children: ReactElement;
+}) {
+  const [open, setOpen] = useState(false);
+  const held = useModifierKeys(open && (level === 'full' || level === 'adaptive'));
+  const tooltip =
+    useAsyncValue(
+      open ? () => stackTooltip(dataset, id, lang, langMap, kind) : false,
+      [open, dataset, id, lang, langMap, kind],
+    ) ?? { lines: [], mods: {} };
+
+  const base = tooltip.lines;
+  const modLine =
+    base.length > 1 && !base[base.length - 1].includes('§')
+      ? base[base.length - 1]
+      : undefined;
+
+  let extra: string[];
+  if (level === 'compact') extra = modLine ? [modLine] : [];
+  else if (level === 'extended') extra = base;
+  else if (level === 'full') {
+    const activeMod = held.shift
+      ? 'shift'
+      : held.ctrl
+        ? 'ctrl'
+        : held.alt
+          ? 'alt'
+          : null;
+    extra = (activeMod ? tooltip.mods[activeMod] : undefined) ?? base;
+  } else if (held.ctrl || held.alt)
+    extra = (held.ctrl ? tooltip.mods.ctrl : tooltip.mods.alt) ?? base;
+  else if (held.shift) extra = base;
+  else extra = modLine ? [modLine] : [];
+
+  const lines = extra.length
+    ? [name, ...extra.filter((line) => line !== name)]
+    : [name];
+  const lastIsMod = lines.length > 1 && !lines[lines.length - 1].includes('§');
+
+  return (
+    <Tooltip onOpenChange={(next) => setOpen(next)}>
+      <TooltipTrigger render={children} delay={150} closeDelay={100} />
+      <TooltipContent className="flex-col items-start gap-0.5 p-3 text-sm break-words whitespace-pre-wrap">
+        {lines.map((line, index) => (
+          <p
+            key={`${index}:${line}`}
+            className={
+              index === 0
+                ? 'font-medium'
+                : lastIsMod && index === lines.length - 1
+                  ? 'italic'
+                  : 'text-muted-foreground'
+            }
+            style={
+              lastIsMod && index === lines.length - 1
+                ? { color: ENCHANTED_TEXT_COLOR }
+                : undefined
+            }
+          >
+            <TooltipLine text={line} />
+          </p>
+        ))}
+        {footer}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/src/components/mdx/item-icon.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import type { ComponentProps } from 'react';
+import { ItemEntry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { useEntryContext } from '@terrafirmagreg-team/game/hooks/use-entry-context';
+import { useLangMap } from '@terrafirmagreg-team/game/hooks/use-lang-map';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
+import { useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { parseSectionLocation } from '@terrafirmagreg-team/kit/lib/location';
+import { lookupSpriteInBundle } from '@terrafirmagreg-team/game/lib/dump/assets/atlas/lookup';
+import { stackDisplayName } from '@terrafirmagreg-team/game/lib/dump/assets/lang/names';
+import { loadClientModAtlases } from '@terrafirmagreg-team/game/lib/dump/client/atlases';
+import { fetchTagItem } from '@terrafirmagreg-team/game/lib/entry/icon-load';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+
+export function ItemIcon({
+  id,
+  dataset: datasetProp,
+  lang: langProp,
+  label,
+  children,
+}: {
+  id?: string;
+  dataset?: string;
+  lang?: Lang;
+  label?: string;
+  children?: React.ReactNode;
+} & ComponentProps<'div'>) {
+  const ctx = useEntryContext();
+  const pathname = usePathname();
+  const dataset =
+    datasetProp ?? ctx?.dataset ?? parseSectionLocation(pathname).dataset;
+  const resolvedLang = useResolvedLang();
+  const lang = langProp ?? ctx?.lang ?? resolvedLang;
+  const iconId = useAsyncValue(
+    dataset && id?.startsWith('#')
+      ? () => fetchTagItem(dataset, id, 'item').then((item) => item ?? id)
+      : false,
+    [dataset, id],
+  ) ?? id;
+  const langKey = useAsyncValue(
+    dataset && iconId?.includes(':') && !iconId.startsWith('#')
+      ? () =>
+          loadClientModAtlases(dataset, iconId.split(':', 2)[0]!).then(
+            (bundle) => lookupSpriteInBundle(bundle, iconId)?.sprite.langKey,
+          )
+      : false,
+    [dataset, iconId],
+  );
+  const fetchedMap = useLangMap(dataset, lang, !ctx?.langMap);
+  const map = ctx?.langMap ?? fetchedMap ?? {};
+  const resolved =
+    label ?? (iconId ? stackDisplayName(map, iconId, undefined, langKey) : undefined);
+  if (!iconId) return children ? <>{children}</> : null;
+  return (
+    <ItemEntry
+      id={iconId}
+      dataset={dataset}
+      lang={lang}
+      name={resolved ?? iconId}
+      labeled
+      label={resolved}
+      href={false}
+    >
+      {children}
+    </ItemEntry>
+  );
+}