@terrafirmagreg-team/game 0.0.0-stage → 1.2.0

package/src/components/entry/icon.tsx

@@ -0,0 +1,181 @@
+'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 {
+  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 type {
+  DumpNbt,
+  ReferenceKind,
+  TaggedReference,
+} 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';
+
+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,
+  entityView,
+  badge,
+  badgeClassName,
+  children,
+}: {
+
+  reference?: TaggedReference;
+  id?: string;
+  kind?: ReferenceKind;
+  tag?: DumpNbt;
+  dataset?: DatasetRef;
+  size?: EntrySize;
+  labeled?: boolean;
+  label?: string;
+  missing?: 'placeholder' | 'item' | 'hide';
+  chip?: boolean;
+
+  preferVariant?: boolean;
+  entityView?: 'auto' | 'texture' | 'egg';
+  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,
+    entityView,
+  });
+  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) => (
+    <Sprite
+      src={src}
+      alt={name}
+      size={size}
+      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.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.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 = (
+    <SpriteFrame
+      size={size}
+      chip={chip}
+      badge={badge}
+      badgeClassName={badgeClassName}
+    >
+      {icon}
+    </SpriteFrame>
+  );
+
+  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,67 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { SpriteList } from '@terrafirmagreg-team/ui/components/blocks/sprite';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { TaggedReference } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+
+export function EntryList({
+  items,
+  dataset,
+  lang,
+  langMap,
+  tab,
+  type,
+  variant = 'grid',
+  labeled,
+  href,
+  className,
+}: {
+  items: TaggedReference[];
+  dataset?: DatasetRef;
+  lang?: Lang;
+  langMap?: Record<string, string>;
+  tab?: string;
+  type?: string;
+  variant?: 'grid' | 'row';
+
+  labeled?: boolean;
+
+  href?: string | false;
+  className?: string;
+}) {
+  return (
+    <SpriteList
+      variant={variant}
+      className={className}
+      items={items.map((item, index) => ({
+        key: `${item.kind}:${item.id}:${index}`,
+        node:
+          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}
+            />
+          ),
+      }))}
+    />
+  );
+}
+

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

@@ -0,0 +1,6 @@
+import { FormatText } from '@terrafirmagreg-team/ui/components/blocks/text/format-text';
+import { MC_FORMAT } from '@terrafirmagreg-team/dump/lib/dump/contract/text';
+
+export function McText({ text }: { text: string }) {
+  return <FormatText text={text} format={MC_FORMAT} />;
+}

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

@@ -0,0 +1,18 @@
+import { SpriteCount } from '@terrafirmagreg-team/ui/components/blocks/sprite';
+
+export function StackCount({
+  count,
+  limit,
+}: {
+  count: number;
+  limit?: number;
+}) {
+  return (
+    <SpriteCount
+      count={count}
+      limit={limit}
+      className="font-mc pointer-events-none leading-none text-white"
+      style={{ fontSize: 9, textShadow: '1px 1px 0 var(--color-mc-arrow)' }}
+    />
+  );
+}

package/src/components/entry/tooltip.tsx

@@ -0,0 +1,137 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useState, type ReactElement, type ReactNode } from 'react';
+import { useModifierKeys } from '@terrafirmagreg-team/ui/hooks/use-modifier-keys';
+import { LazyTooltip } from '@terrafirmagreg-team/ui/components/blocks/tooltip/lazy';
+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/dump/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: DatasetRef;
+  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 renderLines = (value?: {
+    lines: string[];
+    mods: Record<string, string[]>;
+  }) => {
+    const tooltip = value ?? { 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 (
+      <>
+        {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}
+      </>
+    );
+  };
+
+  return (
+    <LazyTooltip
+      load={() => stackTooltip(dataset, id, lang, langMap, kind)}
+      deps={[dataset, id, lang, langMap, kind]}
+      onOpenChange={setOpen}
+      trigger={children}
+      contentClassName="flex-col items-start gap-0.5 p-3 text-sm break-words whitespace-pre-wrap"
+    >
+      {renderLines}
+    </LazyTooltip>
+  );
+}
+

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

@@ -0,0 +1,77 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import type { ComponentProps } from 'react';
+import { Entry } 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 {
+  type DatasetRef,
+  parseSectionLocation,
+} from '@terrafirmagreg-team/sites/location';
+import { lookupSpriteInBundle } from '@terrafirmagreg-team/dump/lib/dump/assets/atlas/lookup';
+import { stackDisplayName } from '@terrafirmagreg-team/dump/lib/dump/assets/lang/names';
+import { loadClientModAtlases } from '@terrafirmagreg-team/dump/lib/dump/client/atlases';
+import { fetchTagItem } from '@terrafirmagreg-team/game/lib/entry/icon-load';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+
+export type ItemIconProps = {
+  id?: string;
+  dataset?: DatasetRef;
+  lang?: Lang;
+  label?: string;
+  children?: React.ReactNode;
+} & ComponentProps<'div'>;
+
+export function ItemIcon({
+  id,
+  dataset: datasetProp,
+  lang: langProp,
+  label,
+  children,
+}: ItemIconProps) {
+  const ctx = useEntryContext();
+  const pathname = usePathname();
+  const locId = parseSectionLocation(pathname).dataset;
+  const dataset =
+    datasetProp ?? ctx?.dataset ?? (locId ? { id: locId } : undefined);
+  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 (
+    <Entry
+      kind="item"
+      id={iconId}
+      dataset={dataset}
+      lang={lang}
+      name={resolved ?? iconId}
+      labeled
+      label={resolved}
+      href={false}
+    >
+      {children}
+    </Entry>
+  );
+}
+

package/src/components/preview-icon.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { DynamicIcon, type IconName } from 'lucide-react/dynamic';
+import { EntryIcon } from '@terrafirmagreg-team/game/components/entry/icon';
+import type { ReferenceKind } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import type { PreviewIcon } from '@terrafirmagreg-team/ui/types/preview';
+
+export function PagePreviewIcon({ icon }: { icon: PreviewIcon }) {
+  if (icon.type === 'entry') {
+    return (
+      <EntryIcon
+        reference={{ kind: icon.kind as ReferenceKind, id: icon.id }}
+        dataset={icon.dataset}
+        size={16}
+        missing="placeholder"
+      />
+    );
+  }
+  return (
+    <DynamicIcon
+      name={icon.name as IconName}
+      className="size-4 shrink-0"
+    />
+  );
+}
+

package/src/hooks/use-dump-location.ts

@@ -0,0 +1,20 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useSyncExternalStore } from 'react';
+import {
+  dumpLocation,
+  subscribeDumpLocations,
+  type DumpLocation,
+} from '@terrafirmagreg-team/dump/lib/dump/paths';
+
+export function useDumpLocation(
+  dataset: DatasetRef | undefined,
+): DumpLocation | undefined {
+  return useSyncExternalStore(
+    subscribeDumpLocations,
+    () => (dataset ? dumpLocation(dataset) : undefined),
+    () => undefined,
+  );
+}
+

package/src/hooks/use-entry-context.ts

@@ -0,0 +1,37 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import {
+  createContext,
+  createElement,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from 'react';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+
+type EntryContextValue = {
+  dataset: DatasetRef;
+  lang?: Lang;
+  langMap?: Record<string, string>;
+};
+
+const EntryContext = createContext<EntryContextValue | null>(null);
+
+export function EntryProvider({
+  dataset,
+  lang,
+  langMap,
+  children,
+}: EntryContextValue & { children: ReactNode }) {
+  const value = useMemo(
+    () => ({ dataset, lang, langMap }),
+    [dataset, lang, langMap],
+  );
+  return createElement(EntryContext.Provider, { value }, children);
+}
+
+export function useEntryContext(): EntryContextValue | null {
+  return useContext(EntryContext);
+}
+