@terrafirmagreg-team/game 0.1.0 → 1.2.0

package/package.json

@@ -1,25 +1,22 @@
 {
   "name": "@terrafirmagreg-team/game",
-  "version": "0.1.0",
+  "version": "1.2.0",
   "type": "module",
+  "description": "Game-data components and catalogs",
+  "license": "LGPL-3.0-only",
   "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"
+      "./src/hooks/*/index.ts"
     ],
     "./lib/*": [
       "./src/lib/*.ts",
-      "./src/lib/*.tsx",
-      "./src/lib/*/index.ts",
-      "./src/lib/*/index.tsx"
+      "./src/lib/*/index.ts"
     ],
     "./types/*": [
       "./src/types/*.ts",
@@ -29,12 +26,16 @@
     "./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"
+    "@terrafirmagreg-team/data": "1.2.0",
+    "@terrafirmagreg-team/dump": "1.2.0",
+    "@terrafirmagreg-team/kit": "1.2.0",
+    "@terrafirmagreg-team/search": "1.2.0",
+    "@terrafirmagreg-team/sites": "1.2.0",
+    "@terrafirmagreg-team/translate": "1.2.0",
+    "@terrafirmagreg-team/ui": "1.2.0",
+    "fumadocs-core": "16.17.8",
+    "lucide-react": "^0.577.0",
+    "server-only": "^0.0.1"
   },
   "peerDependencies": {
     "next": ">=15",

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

@@ -1,7 +1,9 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
-import { atlasPagePublicUrl } from '@terrafirmagreg-team/game/lib/dump/assets/atlas/lookup';
-import type { AtlasLookup } from '@terrafirmagreg-team/game/lib/dump/assets/atlas/dto';
+import { atlasPagePublicUrl } from '@terrafirmagreg-team/dump/lib/dump/assets/atlas/lookup';
+import type { AtlasLookup } from '@terrafirmagreg-team/dump/lib/dump/assets/atlas/dto';
+import { Sprite } from '@terrafirmagreg-team/ui/components/blocks/sprite';
 import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 
@@ -11,7 +13,7 @@ export function AtlasSprite({
   size = 16,
   className,
 }: {
-  dataset: string;
+  dataset: DatasetRef;
   lookup: AtlasLookup | null;
   size?: number;
   className?: string;
@@ -19,39 +21,24 @@ export function AtlasSprite({
   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',
-            }
-          : {}),
-      }}
+    <Sprite
+      src={url}
+      rect={lookup ? lookup.sprite : undefined}
+      page={lookup ? lookup.page : undefined}
+      tint={
+        lookup?.sprite.tintColor && lookup.sprite.tint !== 'none'
+          ? lookup.sprite.tintColor
+          : undefined
+      }
+      size={size}
+      className={className}
+      fallback={
+        <Skeleton
+          className={cn('inline-block shrink-0', className)}
+          style={{ width: size, height: size }}
+        />
+      }
     />
   );
 }

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

@@ -2,12 +2,7 @@
 
 import { Copy } from 'lucide-react';
 import type { ReactNode } from 'react';
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from '@terrafirmagreg-team/ui/components/ui/context-menu';
+import { CopyMenu } from '@terrafirmagreg-team/ui/components/blocks/nav/copy-menu';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 
 export function CopyIdMenu({
@@ -27,29 +22,27 @@ export function CopyIdMenu({
   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>
+    <CopyMenu
+      items={[
+        {
+          icon: <Copy />,
+          label: label ?? t('Copy id', { note: 'ui.entry.copy' }),
+          value: id,
+        },
+        ...(nbt
+          ? [
+              {
+                label: t('Copy stack id', { note: 'ui.entry.copy_stack' }),
+                value: `${id}${nbt}`,
+              },
+              { label: t('Copy NBT', { note: 'ui.entry.copy_nbt' }), value: nbt },
+            ]
+          : []),
+      ]}
+      extra={extra}
+    >
+      {children}
+    </CopyMenu>
   );
 }

package/src/components/entry/entry.tsx

@@ -1,12 +1,16 @@
 'use client';
 
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { parseSectionLocation } from '@terrafirmagreg-team/sites/location';
 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 { ResolvedLangContext } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
+import { useContext, useMemo } from 'react';
 import {
   Tooltip,
   TooltipContent,
@@ -17,9 +21,13 @@ import {
   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';
+} from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import { formatNbt } from '@terrafirmagreg-team/dump/lib/snbt';
+import { fetchEntityModel } from '@terrafirmagreg-team/game/lib/entry/icon-load';
+import { useDumpLocation } from '@terrafirmagreg-team/game/hooks/use-dump-location';
+import { createDumpAssetResolver } from '@terrafirmagreg-team/dump/lib/dump/assets/urls';
+import { GlbViewer } from '@terrafirmagreg-team/ui/components/blocks/media/glb/viewer';
+import { stackIdFromRef } from '@terrafirmagreg-team/dump/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';
@@ -29,7 +37,16 @@ import {
   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';
+import type {
+  BlockDirectiveProps,
+  EntityDirectiveProps,
+  EntryProps,
+  FluidDirectiveProps,
+  ItemDirectiveProps,
+  KindEntryProps,
+  RecipeDirectiveProps,
+  TagDirectiveProps,
+} from '@terrafirmagreg-team/game/types/entry';
 
 export function Entry({
   reference: referenceProp,
@@ -51,11 +68,17 @@ export function Entry({
   missing,
   tooltip,
   children,
+  entityView,
+  icon: iconProp,
   ...hrefOpts
 }: EntryProps) {
   const ctx = useEntryContext();
-  const dataset = datasetProp ?? ctx?.dataset;
-  const lang = langProp ?? ctx?.lang;
+  const pathname = usePathname();
+  const locId = parseSectionLocation(pathname).dataset;
+  const dataset =
+    datasetProp ?? ctx?.dataset ?? (locId ? { id: locId } : undefined);
+  const resolvedLang = useContext(ResolvedLangContext)?.lang;
+  const lang = langProp ?? ctx?.lang ?? resolvedLang;
   const fetchedLangMap = useLangMap(
     dataset,
     lang,
@@ -77,7 +100,7 @@ export function Entry({
       refKind === 'block' ||
       refKind === 'fluid' ||
       refKind === 'entity')
-      ? `${dataset}:${stackId}`
+      ? `${dataset.id}/${dataset.version ?? ''}:${stackId}`
       : undefined;
   const displayPeek =
     displayKey && dataset
@@ -144,9 +167,15 @@ export function Entry({
 
   const icon = (
     <EntryIcon
-      reference={reference}
-      id={refIdStr}
-      kind={iconKind}
+      reference={iconProp ?? reference}
+      id={iconProp ? refId(iconProp) : refIdStr}
+      kind={
+        iconProp
+          ? isIconKind(iconProp.kind)
+            ? iconProp.kind
+            : undefined
+          : iconKind
+      }
       tag={tag}
       dataset={dataset}
       size={size}
@@ -155,6 +184,7 @@ export function Entry({
       missing={missing}
       chip={variant === 'chip'}
       preferVariant={preferVariant}
+      entityView={entityView}
       badge={badge}
       badgeClassName={badgeClassName}
     >
@@ -212,18 +242,67 @@ export function Entry({
   );
 }
 
-function kindEntry(kind: EntryProps['kind']) {
-  function KindEntry(props: KindEntryProps) {
+function kindEntry<P extends KindEntryProps>(kind: EntryProps['kind']) {
+  function KindEntry(props: P) {
     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');
+export const ItemEntry = kindEntry<ItemDirectiveProps>('item');
+export const BlockEntry = kindEntry<BlockDirectiveProps>('block');
+export const FluidEntry = kindEntry<FluidDirectiveProps>('fluid');
+export function EntityEntry({
+  view = 'auto',
+  id,
+  dataset: datasetProp,
+  name,
+  ...rest
+}: EntityDirectiveProps) {
+  const ctx = useEntryContext();
+  const pathname = usePathname();
+  const locId = parseSectionLocation(pathname).dataset;
+  const dataset = useMemo(
+    () =>
+      datasetProp ?? ctx?.dataset ?? (locId ? { id: locId } : undefined),
+    [datasetProp, ctx, locId],
+  );
+  const modelKey = dataset && id ? `${dataset.id}/${dataset.version ?? ''}:${id}` : undefined;
+  const modelRes = useAsyncResult(
+    view === 'model' && modelKey
+      ? async () => ({
+          key: modelKey,
+          url: await fetchEntityModel(dataset!, id!),
+        })
+      : false,
+    [view, dataset, id, modelKey],
+  );
+  useDumpLocation(dataset);
+  const resolveResource = useMemo(
+    () => (dataset ? createDumpAssetResolver(dataset) : undefined),
+    [dataset],
+  );
+  if (view === 'model') {
+    const model = modelRes.value;
+    const src = model && model.key === modelKey ? model.url : undefined;
+    if (src === undefined) return null;
+    return src ? (
+      <GlbViewer src={src} title={name ?? id} resolveResource={resolveResource} />
+    ) : (
+      <Entry kind="entity" id={id} dataset={dataset} name={name} {...rest} />
+    );
+  }
+  return (
+    <Entry
+      kind="entity"
+      id={id}
+      dataset={dataset}
+      name={name}
+      entityView={view}
+      {...rest}
+    />
+  );
+}
+export const TagEntry = kindEntry<TagDirectiveProps>('itemTag');
+export const RecipeEntry = kindEntry<RecipeDirectiveProps>('recipe');
+

package/src/components/entry/group.tsx

@@ -1,6 +1,11 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
-import { EntryFrame } from '@terrafirmagreg-team/game/components/entry/frame';
+import {
+  SPRITE_CLUSTER_INSET,
+  SPRITE_CLUSTER_UNITS,
+  SpriteCluster,
+} from '@terrafirmagreg-team/ui/components/blocks/sprite';
 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';
@@ -12,26 +17,11 @@ import {
   tagKindOf,
   type ReferenceKind,
   type TaggedReference,
-} from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+} from '@terrafirmagreg-team/dump/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,
@@ -47,7 +37,7 @@ function memberKey(member: string | TaggedReference, kind: ReferenceKind): strin
 
 async function expandTagRefs(
   refs: readonly TaggedReference[],
-  dataset: string,
+  dataset: DatasetRef,
 ): Promise<TaggedReference[]> {
   const groups = await Promise.all(
     refs.map((ref) =>
@@ -90,7 +80,7 @@ export function EntryGroup({
   kind?: ReferenceKind;
   size?: EntrySize;
   chip?: boolean;
-  dataset?: string;
+  dataset?: DatasetRef;
   limit?: number;
   cycle?: number;
   missing?: 'placeholder' | 'item' | 'hide';
@@ -103,7 +93,7 @@ export function EntryGroup({
     cycle !== undefined &&
     dataset &&
     references.some((ref) => isTagKind(ref.kind))
-      ? `${dataset}|${references
+      ? `${dataset.id}/${dataset.version ?? ''}|${references
           .map((ref) => `${ref.kind}:${stackIdFromRef(ref)}`)
           .join('|')}`
       : null;
@@ -149,32 +139,23 @@ export function EntryGroup({
       </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];
+  const scale =
+    (sizePx - (chip ? SPRITE_CLUSTER_INSET : 0)) / SPRITE_CLUSTER_UNITS;
   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>
+    <SpriteCluster
+      size={sizePx}
+      chip={chip}
+      limit={limit}
+      items={members.slice(0, limit).map((member) => (
+        <EntryIcon
+          key={memberKey(member, kind)}
+          reference={memberRef(member, kind)}
+          dataset={dataset}
+          size={GAME_ICON * STACK_SCALE * scale}
+          missing={missing}
+        />
+      ))}
+    />
   );
 }
+

package/src/components/entry/icon.tsx

@@ -1,17 +1,20 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { useState } from 'react';
 import { useEntryContext } from '@terrafirmagreg-team/game/hooks/use-entry-context';
-import { EntryFrame } from '@terrafirmagreg-team/game/components/entry/frame';
+import {
+  Sprite,
+  SpriteFrame,
+} from '@terrafirmagreg-team/ui/components/blocks/sprite';
 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';
+} from '@terrafirmagreg-team/dump/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';
@@ -34,6 +37,7 @@ export function EntryIcon({
   missing = 'placeholder',
   chip = false,
   preferVariant = false,
+  entityView,
   badge,
   badgeClassName,
   children,
@@ -43,7 +47,7 @@ export function EntryIcon({
   id?: string;
   kind?: ReferenceKind;
   tag?: DumpNbt;
-  dataset?: string;
+  dataset?: DatasetRef;
   size?: EntrySize;
   labeled?: boolean;
   label?: string;
@@ -51,6 +55,7 @@ export function EntryIcon({
   chip?: boolean;
 
   preferVariant?: boolean;
+  entityView?: 'auto' | 'texture' | 'egg';
   badge?: React.ReactNode;
   badgeClassName?: string;
   children?: React.ReactNode;
@@ -66,6 +71,7 @@ export function EntryIcon({
     tag,
     missing,
     preferVariant,
+    entityView,
   });
   const caption = label || undefined;
   const name = caption ?? source.rawId;
@@ -95,16 +101,10 @@ export function EntryIcon({
     </span>
   );
   const img = (src: string) => (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
+    <Sprite
       src={src}
       alt={name}
-      width={size}
-      height={size}
-      className="rounded-sm"
-      style={{ width: size, height: size, imageRendering: 'pixelated' }}
-      loading="lazy"
-      decoding="async"
+      size={size}
       onError={() =>
         setFileFailed({ key: imgSrc ?? source.sourceKey, failed: true })
       }
@@ -121,12 +121,14 @@ export function EntryIcon({
         missing={missing}
       />
     );
+  } else if (source.isEntity && imgSrc && !failed) {
+    icon = img(imgSrc);
+  } else if (source.isEntity && source.awaitingTexture) {
+    icon = hideMissing ? null : pendingBox;
   } 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) {
@@ -150,23 +152,14 @@ export function EntryIcon({
   if (!icon && !labeled && !children) return null;
 
   const framed = (
-    <EntryFrame
+    <SpriteFrame
       size={size}
       chip={chip}
-      className={badge !== undefined ? 'relative' : undefined}
+      badge={badge}
+      badgeClassName={badgeClassName}
     >
       {icon}
-      {badge !== undefined ? (
-        <span
-          className={cn(
-            'pointer-events-none absolute -right-0.5 -bottom-0.5 z-10',
-            badgeClassName,
-          )}
-        >
-          {badge}
-        </span>
-      ) : null}
-    </EntryFrame>
+    </SpriteFrame>
   );
 
   if (!labeled && !children) return framed;
@@ -185,3 +178,4 @@ export function EntryIcon({
     </span>
   );
 }
+