@terrafirmagreg-team/game 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@terrafirmagreg-team/game",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    "./components/*": [
+      "./src/components/*.tsx",
+      "./src/components/*.ts",
+      "./src/components/*/index.tsx",
+      "./src/components/*/index.ts"
+    ],
+    "./hooks/*": [
+      "./src/hooks/*.ts",
+      "./src/hooks/*.tsx",
+      "./src/hooks/*/index.ts",
+      "./src/hooks/*/index.tsx"
+    ],
+    "./lib/*": [
+      "./src/lib/*.ts",
+      "./src/lib/*.tsx",
+      "./src/lib/*/index.ts",
+      "./src/lib/*/index.tsx"
+    ],
+    "./types/*": [
+      "./src/types/*.ts",
+      "./src/types/*/index.ts"
+    ],
+    "./styles.css": "./styles.css",
+    "./locales": "./src/locales.ts"
+  },
+  "dependencies": {
+    "lucide-react": "^1.63.0",
+    "server-only": "^0.0.1",
+    "@terrafirmagreg-team/translate": "0.1.0",
+    "@terrafirmagreg-team/ui": "0.1.0",
+    "@terrafirmagreg-team/kit": "0.1.0",
+    "fumadocs-core": "16.17.8"
+  },
+  "peerDependencies": {
+    "next": ">=15",
+    "react": ">=19"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TerraFirmaGreg-Team/Web-Foundation.git",
+    "directory": "packages/game"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "styles",
+    "styles.css"
+  ]
 }

package/src/components/entry/atlas-sprite.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { atlasPagePublicUrl } from '@terrafirmagreg-team/game/lib/dump/assets/atlas/lookup';
+import type { AtlasLookup } from '@terrafirmagreg-team/game/lib/dump/assets/atlas/dto';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export function AtlasSprite({
+  dataset,
+  lookup,
+  size = 16,
+  className,
+}: {
+  dataset: string;
+  lookup: AtlasLookup | null;
+  size?: number;
+  className?: string;
+}) {
+  const url = lookup
+    ? atlasPagePublicUrl(dataset, lookup.atlas, lookup.page)
+    : undefined;
+  if (!lookup || !url) {
+    return <Skeleton className={cn('inline-block shrink-0', className)} style={{ width: size, height: size }} />;
+  }
+  const { sprite, page } = lookup;
+  const scale = size / Math.max(sprite.w, 1);
+  const pos = `-${sprite.x * scale}px -${sprite.y * scale}px`;
+  const bgSize = `${page.w * scale}px ${page.h * scale}px`;
+  const tint = sprite.tintColor && sprite.tint !== 'none' ? sprite.tintColor : undefined;
+  return (
+    <span
+      className={className ?? 'relative inline-block shrink-0'}
+      style={{
+        width: size,
+        height: size,
+        backgroundImage: `url(${url})`,
+        backgroundPosition: pos,
+        backgroundSize: bgSize,
+        imageRendering: 'pixelated',
+        ...(tint
+          ? {
+              backgroundColor: tint,
+              backgroundBlendMode: 'multiply',
+              WebkitMaskImage: `url(${url})`,
+              maskImage: `url(${url})`,
+              WebkitMaskPosition: pos,
+              maskPosition: pos,
+              WebkitMaskSize: bgSize,
+              maskSize: bgSize,
+              WebkitMaskRepeat: 'no-repeat',
+              maskRepeat: 'no-repeat',
+            }
+          : {}),
+      }}
+    />
+  );
+}

package/src/components/entry/copy-id-menu.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Copy } from 'lucide-react';
+import type { ReactNode } from 'react';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/context-menu';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+
+export function CopyIdMenu({
+  id,
+  nbt,
+  label,
+  extra,
+  children,
+}: {
+  id: string;
+
+  nbt?: string;
+
+  label?: string;
+
+  extra?: ReactNode;
+  children: ReactNode;
+}) {
+  const t = useTranslations();
+  const copy = (value: string) => () => {
+    void navigator.clipboard.writeText(value);
+  };
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="contents">{children}</ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onClick={copy(id)}>
+          <Copy />
+          {t(label ?? 'ui.entry.copy')}
+        </ContextMenuItem>
+        {nbt ? (
+          <ContextMenuItem onClick={copy(`${id}${nbt}`)}>
+            {t('ui.entry.copy_stack')}
+          </ContextMenuItem>
+        ) : null}
+        {nbt ? (
+          <ContextMenuItem onClick={copy(nbt)}>
+            {t('ui.entry.copy_nbt')}
+          </ContextMenuItem>
+        ) : null}
+        {extra}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/components/entry/entry.tsx

@@ -0,0 +1,229 @@
+'use client';
+
+import Link from 'next/link';
+import type { ReactElement } from 'react';
+import { EntryIcon } from '@terrafirmagreg-team/game/components/entry/icon';
+import { EntryTooltip } from '@terrafirmagreg-team/game/components/entry/tooltip';
+import { CopyIdMenu } from '@terrafirmagreg-team/game/components/entry/copy-id-menu';
+import { useEntryContext } from '@terrafirmagreg-team/game/hooks/use-entry-context';
+import { useLangMap } from '@terrafirmagreg-team/game/hooks/use-lang-map';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+import {
+  classifyRefId,
+  isIconKind,
+  isTagKind,
+  refId,
+} from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import { formatNbt } from '@terrafirmagreg-team/game/lib/snbt';
+import { stackIdFromRef } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import { stackDisplay } from '@terrafirmagreg-team/game/lib/entry/display';
+import { loadStackDisplay } from '@terrafirmagreg-team/game/lib/entry/tooltip';
+import { useAsyncResult } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import {
+  resolveEntryHref,
+  tooltipLoadKind,
+  usesStackTooltip,
+} from '@terrafirmagreg-team/game/lib/entry/entry';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { KindEntryProps, EntryProps } from '@terrafirmagreg-team/game/types/entry';
+
+export function Entry({
+  reference: referenceProp,
+  id,
+  kind,
+  tag,
+  copy,
+  dataset: datasetProp,
+  name: nameProp,
+  lang: langProp,
+  langMap: langMapProp,
+  size = 'md',
+  variant = 'plain',
+  badge,
+  badgeClassName,
+  labeled = false,
+  label,
+  className,
+  missing,
+  tooltip,
+  children,
+  ...hrefOpts
+}: EntryProps) {
+  const ctx = useEntryContext();
+  const dataset = datasetProp ?? ctx?.dataset;
+  const lang = langProp ?? ctx?.lang;
+  const fetchedLangMap = useLangMap(
+    dataset,
+    lang,
+    langMapProp === undefined && !ctx?.langMap,
+  );
+  const langMap = langMapProp ?? ctx?.langMap ?? fetchedLangMap;
+  const classified = id ? classifyRefId(id, kind) : undefined;
+  const reference =
+    referenceProp ??
+    (classified && tag !== undefined ? { ...classified, tag } : classified);
+  const refKind = reference?.kind;
+  const refIdStr = reference?.id ?? id ?? '';
+  const iconKind = refKind && isIconKind(refKind) ? refKind : undefined;
+  const stackId = reference ? stackIdFromRef(reference) : refIdStr;
+  const displayKey =
+    dataset &&
+    stackId &&
+    (refKind === 'item' ||
+      refKind === 'block' ||
+      refKind === 'fluid' ||
+      refKind === 'entity')
+      ? `${dataset}:${stackId}`
+      : undefined;
+  const displayPeek =
+    displayKey && dataset
+      ? loadStackDisplay.peek(
+          dataset,
+          stackId,
+          refKind === 'fluid'
+            ? 'fluid'
+            : refKind === 'entity'
+              ? 'entity'
+              : 'item',
+        )
+      : undefined;
+  const stackDisplayRes = useAsyncResult(
+    displayKey && dataset && displayPeek === undefined
+      ? async () => ({
+          key: displayKey,
+          display: await loadStackDisplay(
+            dataset,
+            stackId,
+            refKind === 'fluid'
+              ? 'fluid'
+              : refKind === 'entity'
+                ? 'entity'
+                : 'item',
+          ),
+        })
+      : false,
+    [dataset, stackId, displayKey, refKind, displayPeek],
+  );
+  const stackMissing =
+    displayKey !== undefined &&
+    displayPeek === undefined &&
+    !stackDisplayRes.pending &&
+    stackDisplayRes.value?.key === displayKey &&
+    stackDisplayRes.value.display === undefined;
+  const langKey =
+    displayPeek !== undefined
+      ? displayPeek?.name
+      : stackDisplayRes.value && stackDisplayRes.value.key === displayKey
+        ? stackDisplayRes.value.display?.name
+        : undefined;
+  const display = stackDisplay(langMap, stackId, refKind, langKey);
+  const name = nameProp ?? display.name;
+  const preferVariant =
+    reference?.tag === undefined &&
+    (refKind === 'item' || refKind === 'block' || refKind === 'fluid') &&
+    langMap !== undefined &&
+    !display.localized;
+  const resolved =
+    dataset && !stackMissing
+      ? resolveEntryHref({
+          reference,
+          id: refIdStr,
+          kind: refKind,
+          tag,
+          dataset,
+          name,
+          lang,
+          ...hrefOpts,
+        })
+      : undefined;
+  const faceClass = cn('inline-flex items-center justify-center', className);
+
+  const icon = (
+    <EntryIcon
+      reference={reference}
+      id={refIdStr}
+      kind={iconKind}
+      tag={tag}
+      dataset={dataset}
+      size={size}
+      labeled={labeled}
+      label={label ?? (labeled ? name : undefined)}
+      missing={missing}
+      chip={variant === 'chip'}
+      preferVariant={preferVariant}
+      badge={badge}
+      badgeClassName={badgeClassName}
+    >
+      {children}
+    </EntryIcon>
+  );
+
+  let face: ReactElement = resolved ? (
+    <Link
+      href={resolved}
+      className={faceClass}
+      aria-label={name}
+    >
+      {icon}
+    </Link>
+  ) : (
+    <span className={faceClass}>{icon}</span>
+  );
+
+  const copyNbt = reference?.tag !== undefined ? formatNbt(reference.tag) : undefined;
+  const copyId =
+    reference && isTagKind(reference.kind)
+      ? `#${reference.id.replace(/^#+/, '')}`
+      : refIdStr;
+  if (copy && refIdStr) {
+    face = (
+      <CopyIdMenu id={copyId} nbt={copyNbt}>
+        {face}
+      </CopyIdMenu>
+    );
+  }
+
+  if (tooltip === false) return face;
+  const tooltipLevel = typeof tooltip === 'string' ? tooltip : undefined;
+  if (dataset && (tooltip || usesStackTooltip(refKind))) {
+    return (
+      <EntryTooltip
+        dataset={dataset}
+        id={reference ? refId(reference) : (id ?? '')}
+        name={name}
+        kind={tooltipLoadKind(refKind)}
+        lang={lang}
+        langMap={langMap}
+        level={tooltipLevel}
+      >
+        {face}
+      </EntryTooltip>
+    );
+  }
+  return (
+    <Tooltip>
+      <TooltipTrigger render={face} />
+      <TooltipContent>{name}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function kindEntry(kind: EntryProps['kind']) {
+  function KindEntry(props: KindEntryProps) {
+    return <Entry kind={kind} {...props} />;
+  }
+  return KindEntry;
+}
+
+export const ItemEntry = kindEntry('item');
+export const BlockEntry = kindEntry('block');
+export const FluidEntry = kindEntry('fluid');
+export const EntityEntry = kindEntry('entity');
+export const TagEntry = kindEntry('itemTag');
+export const RecipeEntry = kindEntry('recipe');
+export const QuestEntry = kindEntry('quest');
+export const GuideEntry = kindEntry('guide');

package/src/components/entry/frame.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export const ENTRY_CHIP_CLASS =
+  'inline-flex shrink-0 items-center justify-center rounded-sm border border-border bg-secondary p-0.5 hover:bg-accent';
+
+export function EntryFrame({
+  size,
+  chip = false,
+  className,
+  style,
+  children,
+}: {
+  size?: number;
+  chip?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: ReactNode;
+}) {
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center',
+        chip && ENTRY_CHIP_CLASS,
+        className,
+      )}
+      style={{ ...(size ? { width: size, height: size } : undefined), ...style }}
+    >
+      {children}
+    </span>
+  );
+}

package/src/components/entry/group.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { EntryFrame } from '@terrafirmagreg-team/game/components/entry/frame';
+import { EntryIcon, entrySizePx, ENTRY_CYCLE_MS } from '@terrafirmagreg-team/game/components/entry/icon';
+import { useCycleIndex } from '@terrafirmagreg-team/ui/hooks/use-cycle-index';
+import { useAsyncResult } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { fetchTagMembers } from '@terrafirmagreg-team/game/lib/entry/icon-load';
+import {
+  classifyRefId,
+  isTagKind,
+  stackIdFromRef,
+  tagKindOf,
+  type ReferenceKind,
+  type TaggedReference,
+} from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import type { EntrySize } from '@terrafirmagreg-team/game/types/entry';
+
+const GAME_SLOT = 18;
+const GAME_ICON = 12.8;
+const STACK_SCALE = 1.15;
+const FRAME_INSET = 6;
+const POSITIONS: readonly (readonly [number, number])[][] = [
+  [],
+  [[1.6, 1.6]],
+  [
+    [0.4, 0.8],
+    [2.8, 2.4],
+  ],
+  [
+    [-0.8, 0],
+    [1.6, 1.6],
+    [4.0, 3.2],
+  ],
+];
+
+function memberRef(
+  member: string | TaggedReference,
+  kind: ReferenceKind,
+): TaggedReference | undefined {
+  return typeof member === 'string' ? classifyRefId(member, kind) : member;
+}
+
+function memberKey(member: string | TaggedReference, kind: ReferenceKind): string {
+  const ref = memberRef(member, kind);
+  return ref ? `${ref.kind}:${stackIdFromRef(ref)}` : String(member);
+}
+
+async function expandTagRefs(
+  refs: readonly TaggedReference[],
+  dataset: string,
+): Promise<TaggedReference[]> {
+  const groups = await Promise.all(
+    refs.map((ref) =>
+      isTagKind(ref.kind)
+        ? fetchTagMembers(dataset, ref.id, tagKindOf(ref.kind) ?? 'item')
+        : null,
+    ),
+  );
+  const seen = new Set<string>();
+  const out: TaggedReference[] = [];
+  refs.forEach((ref, i) => {
+    const memberIds = groups[i];
+    const memberKind = tagKindOf(ref.kind) ?? 'item';
+    const expanded: TaggedReference[] = memberIds
+      ? memberIds.map((id) => ({ kind: memberKind, id }))
+      : [ref];
+    for (const member of expanded) {
+      const key = `${member.kind}:${stackIdFromRef(member)}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      out.push(member);
+    }
+  });
+  return out;
+}
+
+export const GROUP_CYCLE_MS = ENTRY_CYCLE_MS;
+
+export function EntryGroup({
+  members,
+  kind = 'item',
+  size = 36,
+  chip = true,
+  dataset,
+  limit = 3,
+  cycle,
+  missing = 'hide',
+}: {
+  members: readonly (string | TaggedReference)[];
+  kind?: ReferenceKind;
+  size?: EntrySize;
+  chip?: boolean;
+  dataset?: string;
+  limit?: number;
+  cycle?: number;
+  missing?: 'placeholder' | 'item' | 'hide';
+}) {
+  const sizePx = entrySizePx(size);
+  const references = members
+    .map((member) => memberRef(member, kind))
+    .filter((ref): ref is TaggedReference => ref !== undefined);
+  const expandKey =
+    cycle !== undefined &&
+    dataset &&
+    references.some((ref) => isTagKind(ref.kind))
+      ? `${dataset}|${references
+          .map((ref) => `${ref.kind}:${stackIdFromRef(ref)}`)
+          .join('|')}`
+      : null;
+  const expandedHit = useAsyncResult(
+    expandKey
+      ? async () => ({
+          key: expandKey,
+          refs: await expandTagRefs(references, dataset!),
+        })
+      : false,
+    [expandKey, dataset],
+  );
+  const cycleRefs = !expandKey
+    ? references
+    : expandedHit.value?.key === expandKey
+      ? expandedHit.value.refs
+      : references;
+  const [index] = useCycleIndex(cycleRefs.length, {
+    enabled: cycle !== undefined && cycle > 0,
+    intervalMs: cycle,
+  });
+  if (cycle !== undefined) {
+    return (
+      <span
+        className="relative block"
+        style={{ width: sizePx, height: sizePx }}
+      >
+        {cycleRefs.map((reference, i) => (
+          <span
+            key={`${reference.kind}:${stackIdFromRef(reference)}`}
+            className="absolute inset-0"
+            style={{ opacity: i === index ? 1 : 0 }}
+            aria-hidden={i !== index}
+          >
+            <EntryIcon
+              reference={reference}
+              dataset={dataset}
+              size={sizePx}
+              missing={missing}
+            />
+          </span>
+        ))}
+      </span>
+    );
+  }
+  const inner = sizePx - (chip ? FRAME_INSET : 0);
+  const scale = inner / GAME_SLOT;
+  const icons = members.slice(0, Math.min(limit, POSITIONS.length - 1));
+  const positions = POSITIONS[icons.length];
+  return (
+    <EntryFrame size={sizePx} chip={chip}>
+      <span className="relative block" style={{ width: inner, height: inner }}>
+        {icons.map((member, i) => (
+          <span
+            key={memberKey(member, kind)}
+            className="absolute"
+            style={{
+              left: positions[i][0] * STACK_SCALE * scale,
+              top: positions[i][1] * STACK_SCALE * scale,
+              zIndex: icons.length - i,
+            }}
+          >
+            <EntryIcon
+              reference={memberRef(member, kind)}
+              dataset={dataset}
+              size={GAME_ICON * STACK_SCALE * scale}
+              missing={missing}
+            />
+          </span>
+        ))}
+      </span>
+    </EntryFrame>
+  );
+}