@terrafirmagreg-team/guide 0.0.0-stage → 0.1.0

package/src/components/views/kind/media.tsx

@@ -0,0 +1,167 @@
+import { useMemo } from 'react';
+import { GuideText } from '@terrafirmagreg-team/guide/components/views/text';
+import { useDumpLocation } from '@terrafirmagreg-team/game/hooks/use-dump-location';
+import { asMultiblock } from '@terrafirmagreg-team/guide/lib/meta';
+import {
+  createDumpAssetResolver,
+  texturePublicUrl,
+} from '@terrafirmagreg-team/game/lib/dump/assets/urls';
+import { dumpRelPublicUrl } from '@terrafirmagreg-team/game/lib/dump/paths';
+import { parseStackId } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import { langString } from '@terrafirmagreg-team/game/lib/dump/assets/lang/names';
+import { matchVariant } from '@terrafirmagreg-team/game/lib/dump/data/registry/parse';
+import { GlbViewer } from '@terrafirmagreg-team/ui/components/blocks/media/glb/viewer';
+import { multiblockKey } from '@terrafirmagreg-team/guide/lib/multiblock';
+import { guideFormatOpts } from '@terrafirmagreg-team/guide/lib/format';
+import { spriteName } from '@terrafirmagreg-team/guide/lib/names';
+import type { PageRendererProps } from '@terrafirmagreg-team/guide/types';
+import { GlbPlaceholder } from '@terrafirmagreg-team/ui/components/blocks/media/glb/viewer';
+import { Slideshow } from '@terrafirmagreg-team/ui/components/blocks/media/slideshow';
+import type { GuideMultiblock } from '@terrafirmagreg-team/guide/types';
+
+export function ImagePage(props: PageRendererProps) {
+  const { dataset, page } = props;
+  useDumpLocation(dataset);
+  const images = [
+    ...(page.images ?? []),
+    ...(typeof page.image === 'string' ? [page.image] : []),
+  ];
+  const opts = guideFormatOpts(props);
+  const title =
+    typeof page.title === 'string' && page.title ? (
+      <GuideText text={page.title} {...opts} />
+    ) : null;
+  return (
+    <Slideshow
+      images={
+        images.length
+          ? images.map((id) => ({
+              id,
+              url: texturePublicUrl(dataset, id) ?? null,
+            }))
+          : [{ id: 'missing', url: null }]
+      }
+      alt={typeof page.title === 'string' ? page.title : ''}
+      border={page.border !== false}
+      scale={page.scale}
+      offset={page.offset}
+      rotate={page.rotate}
+      caption={title ?? undefined}
+    />
+  );
+}
+
+export function EntityPage({
+  dataset,
+  page,
+  langMap,
+  atlases,
+  extras,
+}: PageRendererProps) {
+  const id = typeof page.entity === 'string' ? page.entity : undefined;
+  useDumpLocation(dataset);
+  const resolveResource = useMemo(
+    () => createDumpAssetResolver(dataset),
+    [dataset],
+  );
+  const parsed = id ? parseStackId(id) : undefined;
+  const entry = parsed?.id ? extras?.entities?.[parsed.id] : undefined;
+  const variant = matchVariant(entry?.variants, parsed?.nbt);
+  const model = variant?.model ?? entry?.model;
+  const ns = parsed?.id.split(':', 1)[0];
+  const glb =
+    model && ns
+      ? dumpRelPublicUrl(dataset, `assets/${ns}/${model}`)
+      : undefined;
+  const name = id
+    ? (langString(langMap, variant?.display?.name) ??
+      langString(langMap, entry?.display?.name) ??
+      spriteName(dataset, langMap, atlases, id))
+    : undefined;
+  return (
+    <div className="space-y-2">
+      {glb ? (
+        <GlbViewer
+          src={glb}
+          title={name}
+          scale={typeof page.scale === 'number' ? page.scale : undefined}
+          offset={typeof page.offset === 'number' ? page.offset : undefined}
+          resolveResource={resolveResource}
+        />
+      ) : (
+        <GlbPlaceholder title={name} />
+      )}
+    </div>
+  );
+}
+
+function MissingVisual({ title }: { title?: string }) {
+  return <GlbPlaceholder title={title} />;
+}
+
+export function MultiblockVisual({
+  value,
+  title,
+  glbs,
+  resolveResource,
+}: {
+  value: string | GuideMultiblock | undefined;
+  title?: string;
+  glbs?: Record<string, string>;
+  resolveResource?: (
+    resourceUrl: string,
+    modelUrl: string,
+  ) => string | undefined;
+}) {
+  const spec = asMultiblock(value);
+  const key = multiblockKey(spec);
+  const src = key ? glbs?.[key] : undefined;
+  return src ? (
+    <GlbViewer src={src} title={title} resolveResource={resolveResource} />
+  ) : (
+    <MissingVisual title={title} />
+  );
+}
+
+export function MultiblockPage({ page, dataset, extras }: PageRendererProps) {
+  const modelId = typeof page.model === 'string' ? page.model : undefined;
+  useDumpLocation(dataset);
+  const resolveResource = useMemo(
+    () => createDumpAssetResolver(dataset),
+    [dataset],
+  );
+  return (
+    <MultiblockVisual
+      value={modelId ?? page.multiblock}
+      title={modelId ?? page.name}
+      glbs={extras?.glbs}
+      resolveResource={resolveResource}
+    />
+  );
+}
+
+export function MultiMultiblockPage({
+  page,
+  dataset,
+  extras,
+}: PageRendererProps) {
+  useDumpLocation(dataset);
+  const resolveResource = useMemo(
+    () => createDumpAssetResolver(dataset),
+    [dataset],
+  );
+  const specs = (page.multiblocks ?? []).map(asMultiblock);
+  const glbs = specs
+    .map((spec) => multiblockKey(spec))
+    .map((key) => (key ? extras?.glbs?.[key] : undefined))
+    .filter((url): url is string => Boolean(url));
+  return glbs.length ? (
+    <GlbViewer
+      sources={glbs}
+      title={page.name}
+      resolveResource={resolveResource}
+    />
+  ) : (
+    <MissingVisual title={page.name} />
+  );
+}

package/src/components/views/kind/recipe.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { Card } from '@terrafirmagreg-team/ui/components/ui/card';
+import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
+import { PagedCard } from '@terrafirmagreg-team/recipe/components/cards/paged-card';
+import { FitCard } from '@terrafirmagreg-team/recipe/components/cards/fit-card';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { EntryList } from '@terrafirmagreg-team/game/components/entry/list';
+import { guideMessage } from '@terrafirmagreg-team/guide/lib/messages';
+import { collectItemIds } from '@terrafirmagreg-team/guide/lib/data/parse';
+import { pageTitle } from '@terrafirmagreg-team/guide/lib/toc';
+import { spriteName } from '@terrafirmagreg-team/guide/lib/names';
+import { recipeIds, recipeNameScope } from '@terrafirmagreg-team/guide/lib/recipe';
+import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { recipeCardImageUrl } from '@terrafirmagreg-team/recipe/lib/links';
+import { recipeImageUrl } from '@terrafirmagreg-team/game/lib/dump/assets/urls';
+import { recipeTitle } from '@terrafirmagreg-team/recipe/lib/data/parse';
+import type { Recipe } from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { PageRendererProps } from '@terrafirmagreg-team/guide/types';
+
+function GuideRecipeCard({
+  id,
+  recipe,
+  dataset,
+  lang,
+  langMap,
+}: {
+  id: string;
+  recipe: Recipe;
+  dataset: string;
+  lang: string;
+  langMap: Record<string, string>;
+}) {
+  const [failed, setFailed] = useState(false);
+  if (failed) return null;
+  const src =
+    recipeImageUrl(dataset, recipe) ?? recipeCardImageUrl(dataset, id);
+  if (!src) return null;
+  const title = recipeTitle(recipe, langMap);
+  return (
+    <Link
+      href={recipeHref(dataset, lang, { id })}
+      className="not-prose block w-fit max-w-full"
+    >
+      <FitCard w={recipe.w ?? 0}>
+        <PagedCard
+          recipe={recipe}
+          dataset={dataset}
+          lang={lang}
+          langMap={langMap}
+          title={title}
+          src={src}
+          onFail={() => setFailed(true)}
+        />
+      </FitCard>
+    </Link>
+  );
+}
+
+export function RecipePage({
+  dataset,
+  page,
+  lang,
+  langMap,
+  atlases,
+  extras,
+  messages,
+}: PageRendererProps) {
+  const ids = recipeIds(page);
+  if (!ids.length) {
+    return (
+      <EmptyState variant="empty">
+        {guideMessage(messages, 'guide.recipe_empty')}
+      </EmptyState>
+    );
+  }
+  return (
+    <div className="space-y-4">
+      {ids.map((id) => {
+        const recipe = extras?.recipes?.[id];
+        if (recipe) {
+          return (
+            <GuideRecipeCard
+              key={id}
+              id={id}
+              recipe={recipe}
+              dataset={dataset}
+              lang={lang}
+              langMap={recipeNameScope(langMap, recipe)}
+            />
+          );
+        }
+        const name = spriteName(dataset, langMap, atlases, id);
+        return (
+          <Card key={id} className="flex-row items-center gap-2 px-3 py-2">
+            {id.includes(':') ? (
+              <Entry
+                id={id}
+                kind="item"
+                dataset={dataset}
+                name={name}
+                labeled
+                label={name}
+              />
+            ) : (
+              <span className="text-sm">{name}</span>
+            )}
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
+
+export function SpotlightPage({
+  dataset,
+  page,
+  langMap,
+  extras,
+}: PageRendererProps) {
+  if (pageTitle(page, langMap, {}, extras?.entityNames)) return null;
+  const ids = [...collectItemIds(page.item), ...collectItemIds(page.icon)];
+  if (!ids.length) return null;
+  return (
+    <EntryList
+      variant="row"
+      labeled
+      dataset={dataset}
+      items={ids.map((id) => ({ id, kind: 'item' as const }))}
+    />
+  );
+}

package/src/components/views/kind/table.tsx

@@ -0,0 +1,138 @@
+import { GuideText } from '@terrafirmagreg-team/guide/components/views/text';
+import { Card } from '@terrafirmagreg-team/ui/components/ui/card';
+import { ItemEntry } from '@terrafirmagreg-team/game/components/entry/entry';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@terrafirmagreg-team/ui/components/ui/table';
+import { collectItemIds } from '@terrafirmagreg-team/guide/lib/data/parse';
+import { cssColor, cellTexts } from '@terrafirmagreg-team/guide/lib/table';
+import { guideFormatOpts } from '@terrafirmagreg-team/guide/lib/format';
+import type { GuideTableCell, PageRendererProps } from '@terrafirmagreg-team/guide/types';
+
+export function TablePage(props: PageRendererProps) {
+  const { page } = props;
+  const raw = page.strings ?? page.rows ?? [];
+  const cells = Array.isArray(raw) ? raw : [];
+  const columnCount =
+    typeof page.columns === 'number' ? page.columns : undefined;
+  const rows =
+    columnCount && columnCount > 0
+      ? Array.from(
+          { length: Math.ceil(cells.length / (columnCount + 1)) },
+          (_, index) =>
+            cells.slice(
+              index * (columnCount + 1),
+              (index + 1) * (columnCount + 1),
+            ),
+        )
+      : cells.map((cell) => (Array.isArray(cell) ? cell : [cell]));
+  const opts = guideFormatOpts(props);
+  if (!rows.length) {
+    return <Card className="min-h-16 bg-secondary p-0" aria-hidden />;
+  }
+  const legend = Array.isArray(page.legend) ? page.legend : [];
+  const legendItems = legend
+    .map((entry) => ({
+      color: cssColor(entry.color),
+      lines: (Array.isArray(entry.texts)
+        ? entry.texts.filter(Boolean)
+        : entry.text
+          ? [entry.text]
+          : []
+      ) as string[],
+    }))
+    .filter((entry) => entry.lines.length);
+
+  return (
+    <>
+      <Table className="border-collapse text-left">
+        {Array.isArray(page.columns) && page.columns.length ? (
+          <TableHeader>
+            <TableRow className="border-0 hover:bg-transparent">
+              {page.columns.map((column) => (
+                <TableHead
+                  key={column}
+                  className="h-auto border border-border bg-secondary px-2 py-1 whitespace-normal"
+                >
+                  <GuideText text={column} {...opts} />
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+        ) : null}
+        <TableBody>
+          {rows.map((row, rowIndex) => (
+            <TableRow key={rowIndex} className="border-0 hover:bg-transparent">
+              {row.map((cell, columnIndex) => {
+                const value: GuideTableCell | undefined =
+                  cell && typeof cell === 'object' && !Array.isArray(cell)
+                    ? (cell as GuideTableCell)
+                    : undefined;
+                const items = value ? collectItemIds(value.item) : [];
+                const lines = value
+                  ? cellTexts(value)
+                  : typeof cell === 'string'
+                    ? [cell]
+                    : [];
+                return (
+                  <TableCell
+                    key={columnIndex}
+                    className={
+                      value?.bold
+                        ? 'border border-border px-2 py-1 font-semibold whitespace-normal'
+                        : 'border border-border px-2 py-1 whitespace-normal'
+                    }
+                    style={{ backgroundColor: cssColor(value?.fill) }}
+                  >
+                    <span className="inline-flex flex-wrap items-center gap-1">
+                      {items.map((id) => (
+                        <ItemEntry
+                          key={id}
+                          id={id}
+                          name={id}
+                          size="sm"
+                          href={false}
+                        />
+                      ))}
+                      {lines.map((line, index) => (
+                        <span key={index}>
+                          <GuideText text={line} {...opts} />
+                        </span>
+                      ))}
+                    </span>
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      {legendItems.length ? (
+        <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
+          {legendItems.map((entry, index) => (
+            <li key={index} className="flex items-center gap-2">
+              {entry.color ? (
+                <span
+                  className="inline-block size-3 rounded-sm"
+                  style={{ backgroundColor: entry.color }}
+                />
+              ) : null}
+              <span className="flex flex-wrap gap-x-2">
+                {entry.lines.map((line, lineIndex) => (
+                  <span key={lineIndex}>
+                    <GuideText text={line} {...opts} />
+                  </span>
+                ))}
+              </span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </>
+  );
+}

package/src/components/views/kind/unknown.tsx

@@ -0,0 +1,23 @@
+import { Alert, AlertTitle } from '@terrafirmagreg-team/ui/components/ui/alert';
+import type { GuidePage } from '@terrafirmagreg-team/guide/lib/data/dto';
+import type { PageRendererProps } from '@terrafirmagreg-team/guide/types';
+
+export function UnknownPage({
+  page,
+  index,
+}: { page: GuidePage; index?: number } & PageRendererProps) {
+  const keys = Object.keys(page).filter((key) => key !== 'type');
+  return (
+    <Alert variant="destructive">
+      <AlertTitle>
+        Unknown page type &quot;{page.type ?? 'text'}&quot;
+        {index !== undefined ? ` on page ${index + 1}` : ''}
+      </AlertTitle>
+      {keys.length ? (
+        <pre className="mt-2 overflow-auto text-xs">
+          {JSON.stringify(page, null, 2)}
+        </pre>
+      ) : null}
+    </Alert>
+  );
+}

package/src/components/views/page/category-body.tsx

@@ -0,0 +1,56 @@
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { ItemRow } from '@terrafirmagreg-team/ui/components/blocks/list/row';
+import { guideBookHref } from '@terrafirmagreg-team/guide/lib/paths';
+import { guideMessage } from '@terrafirmagreg-team/guide/lib/messages';
+import type { GuideIndex, GuideMessages } from '@terrafirmagreg-team/guide/types';
+
+type GuideCategoryBodyProps = {
+  dataset: string;
+  lang: string;
+  modId?: string;
+  bookPath?: string;
+  overview?: GuideIndex;
+  categoryId?: string;
+  messages: GuideMessages;
+};
+
+export function GuideCategoryBody({
+  dataset,
+  lang,
+  modId,
+  bookPath,
+  overview,
+  categoryId,
+  messages,
+}: GuideCategoryBodyProps) {
+  const cat = overview?.categories.find((c) => c.id === categoryId);
+  return (
+    <div className="not-prose grid gap-3 sm:grid-cols-2">
+      {(cat?.entries ?? []).map((entry) => (
+        <ItemRow
+          key={entry.id}
+          href={guideBookHref(
+            dataset,
+            lang,
+            modId ?? overview?.modId ?? '',
+            bookPath ?? '',
+            entry.id,
+          )}
+          variant="outline"
+          className="rounded-xl bg-card p-4"
+          media={entry.icon?.id ? (
+            <Entry id={entry.icon.id} kind={entry.icon.kind} dataset={dataset} href={false} tooltip={false} />
+          ) : null}
+          title={entry.name}
+          description={
+            entry.pageCount
+              ? guideMessage(messages, 'guide.page_count', {
+                  count: entry.pageCount,
+                })
+              : undefined
+          }
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/views/page/entry-body.tsx

@@ -0,0 +1,79 @@
+import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
+import { EntryView } from '@terrafirmagreg-team/guide/components/views/entry/view';
+import { guideMessage } from '@terrafirmagreg-team/guide/lib/messages';
+import type { PagePreviewData } from '@terrafirmagreg-team/ui/types/preview';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type {
+  GuideEntry,
+  GuideEntryExtras,
+  GuideIndex,
+  GuideMessages,
+} from '@terrafirmagreg-team/guide/types';
+
+type GuideEntryBodyProps = {
+  dataset: string;
+  lang: Lang;
+  bookPath?: string;
+  overview: GuideIndex;
+  entry?: GuideEntry;
+  categories: Map<string, string>;
+  langMap: Record<string, string>;
+  extras?: GuideEntryExtras;
+  questLinks?: Record<string, { filename: string; questId: string }>;
+  previews?: Record<string, PagePreviewData>;
+  messages: GuideMessages;
+};
+
+export function GuideEntryBody({
+  dataset,
+  lang,
+  bookPath,
+  overview,
+  entry,
+  categories,
+  langMap,
+  extras,
+  questLinks,
+  previews,
+  messages,
+}: GuideEntryBodyProps) {
+  const catIconByEntry = new Map(
+    overview.categories.flatMap((category) =>
+      category.entries.map((item) => [item.id, category.icon] as const),
+    ),
+  );
+  const entryRefs = new Map(
+    overview.entries.map((item) => [
+      item.id,
+      {
+        id: item.id,
+        name: item.name ?? item.id,
+        icon: item.icon ?? catIconByEntry.get(item.id),
+      },
+    ]),
+  );
+  if (!entry || !bookPath) {
+    return (
+      <EmptyState variant="missing">
+        {guideMessage(messages, 'guide.entry_missing')}
+      </EmptyState>
+    );
+  }
+  return (
+    <EntryView
+      dataset={dataset}
+      lang={lang}
+      bookPath={bookPath}
+      entry={entry}
+      bookModId={overview.modId}
+      categoryByEntry={categories}
+      book={overview.book}
+      langMap={langMap}
+      entryRefs={entryRefs}
+      extras={extras}
+      questLinks={questLinks}
+      previews={previews}
+      messages={messages}
+    />
+  );
+}

package/src/components/views/page/overview-body.tsx

@@ -0,0 +1,97 @@
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import { ItemRow } from '@terrafirmagreg-team/ui/components/blocks/list/row';
+import { MediaImage } from '@terrafirmagreg-team/ui/components/blocks/media/image';
+import { GuideText } from '@terrafirmagreg-team/guide/components/views/text';
+import {
+  guideCategoryHref,
+  isRootCategory,
+} from '@terrafirmagreg-team/guide/lib/paths';
+import { texturePublicUrl } from '@terrafirmagreg-team/game/lib/dump/assets/urls';
+import { useDumpLocation } from '@terrafirmagreg-team/game/hooks/use-dump-location';
+import { guideMessage } from '@terrafirmagreg-team/guide/lib/messages';
+import type { PagePreviewData } from '@terrafirmagreg-team/ui/types/preview';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { GuideIndex, GuideMessages } from '@terrafirmagreg-team/guide/types';
+
+type GuideOverviewBodyProps = {
+  dataset: string;
+  lang: Lang;
+  modId?: string;
+  bookPath?: string;
+  overview: GuideIndex;
+  categories: Map<string, string>;
+  langMap: Record<string, string>;
+  questLinks?: Record<string, { filename: string; questId: string }>;
+  previews?: Record<string, PagePreviewData>;
+  messages: GuideMessages;
+};
+
+export function GuideOverviewBody({
+  dataset,
+  lang,
+  modId,
+  bookPath,
+  overview,
+  categories,
+  langMap,
+  questLinks,
+  previews,
+  messages,
+}: GuideOverviewBodyProps) {
+  useDumpLocation(dataset);
+  if (overview.status === 'missing') return null;
+  return (
+    <div className="space-y-6">
+      {overview.book?.cover ? (
+        <MediaImage
+          src={texturePublicUrl(dataset, overview.book.cover.id)}
+          alt={overview.book.name}
+          eager
+          className="h-auto max-h-64 max-w-full rounded-lg border border-border object-contain"
+          pixelated
+        />
+      ) : null}
+      {overview.book?.landingText ? (
+        <p className="whitespace-pre-wrap text-muted-foreground">
+          <GuideText
+            text={overview.book.landingText}
+            dataset={dataset}
+            lang={lang}
+            modId={modId}
+            bookPath={bookPath}
+            categoryByEntry={categories}
+            macros={overview.book.macros}
+            langMap={langMap}
+            questLinks={questLinks}
+            previews={previews}
+          />
+        </p>
+      ) : null}
+      <div className="not-prose grid gap-3 sm:grid-cols-2">
+        {overview.categories
+          .filter((cat) => isRootCategory(cat, overview.categories))
+          .map((cat) => (
+            <ItemRow
+              key={cat.id}
+              href={guideCategoryHref(
+                dataset,
+                lang,
+                modId ?? overview.modId,
+                bookPath ?? '',
+                cat,
+              )}
+              variant="outline"
+              className="rounded-xl bg-card p-4"
+              media={cat.icon?.id ? (
+                <Entry id={cat.icon.id} kind={cat.icon.kind} dataset={dataset} href={false} tooltip={false} />
+              ) : null}
+              title={cat.name}
+              description={guideMessage(messages, 'guide.entry_count', {
+                count: cat.entries.length,
+              })}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}