@shipload/item-renderer 0.2.1 → 0.2.3

package/src/templates/resource.ts

@@ -1,90 +1,88 @@
-import type { ResolvedItem } from '@shipload/sdk'
-import { getStatDefinitions, categoryColors, displayName } from '@shipload/sdk'
-import type { CargoItem } from '../payload/codec.ts'
-import { panel } from '../primitives/panel.ts'
-import { iconHex } from '../primitives/icon-hex.ts'
-import { text } from '../primitives/text.ts'
-import { divider } from '../primitives/divider.ts'
-import { statBar } from '../primitives/stat-bar.ts'
-import { quantityBadge } from '../primitives/quantity-badge.ts'
-import { tokens } from '../tokens/index.ts'
-import { shortCode, formatMass, tierBorder } from './_shared.ts'
+import type { ResolvedItem } from "@shipload/sdk";
+import { getStatDefinitions, categoryColors, displayName } from "@shipload/sdk";
+import type { CargoItem } from "../payload/codec.ts";
+import { panel } from "../primitives/panel.ts";
+import { iconHex } from "../primitives/icon-hex.ts";
+import { text } from "../primitives/text.ts";
+import { divider } from "../primitives/divider.ts";
+import { statBar } from "../primitives/stat-bar.ts";
+import { quantityBadge } from "../primitives/quantity-badge.ts";
+import { tokens } from "../tokens/index.ts";
+import { shortCode, formatMass, tierBorder } from "./_shared.ts";
 
 const CATEGORY_LABELS: Record<string, string> = {
-  ore: 'Ore',
-  crystal: 'Crystal',
-  gas: 'Gas',
-  regolith: 'Regolith',
-  biomass: 'Biomass',
-}
+  ore: "Ore",
+  crystal: "Crystal",
+  gas: "Gas",
+  regolith: "Regolith",
+  biomass: "Biomass",
+};
 
 function categoryColor(category?: string): string {
-  if (!category) return tokens.colors.text.muted
-  const key = category as keyof typeof tokens.colors.category
-  return tokens.colors.category[key] ?? tokens.colors.text.muted
+  if (!category) return tokens.colors.text.muted;
+  const key = category as keyof typeof tokens.colors.category;
+  return tokens.colors.category[key] ?? tokens.colors.text.muted;
 }
 
 export interface RenderResourceOpts {
-  mode?: 'values' | 'ranges'
+  mode?: "values" | "ranges";
 }
 
 type StatRow = {
-  label: string
-  abbreviation: string
-  value: number | null
-  color: string
-  inverted?: boolean
-}
+  label: string;
+  abbreviation: string;
+  value: number | null;
+  color: string;
+  inverted?: boolean;
+};
 
 export function renderResource(
   item: CargoItem,
   resolved: ResolvedItem,
   opts?: RenderResourceOpts,
 ): string {
-  const mode = opts?.mode ?? 'values'
-  const w = tokens.spacing.panelWidth
-  const pad = tokens.spacing.panelPadding
-  const innerW = w - pad * 2
-
-  let rows: StatRow[]
-  if (mode === 'values') {
-    rows = (resolved.stats ?? []).map(s => ({
+  const mode = opts?.mode ?? "values";
+  const w = tokens.spacing.panelWidth;
+  const pad = tokens.spacing.panelPadding;
+  const innerW = w - pad * 2;
+
+  let rows: StatRow[];
+  if (mode === "values") {
+    rows = (resolved.stats ?? []).map((s) => ({
       label: s.label,
       abbreviation: s.abbreviation,
       value: s.value,
       color: s.color,
       inverted: s.inverted,
-    }))
+    }));
   } else {
-    const defs = resolved.category ? getStatDefinitions(resolved.category) : []
-    const color = resolved.category
-      ? categoryColors[resolved.category]
-      : tokens.colors.text.muted
-    rows = defs.map(d => ({
+    const defs = resolved.category ? getStatDefinitions(resolved.category) : [];
+    const color = resolved.category ? categoryColors[resolved.category] : tokens.colors.text.muted;
+    rows = defs.map((d) => ({
       label: d.label,
       abbreviation: d.abbreviation,
       value: null,
       color,
       inverted: d.inverted,
-    }))
+    }));
   }
 
-  const headerH = 48
-  const metaRowH = 28
-  const statsH = rows.length * 26 + 8
-  const height = headerH + metaRowH + 14 + statsH + pad
+  const headerH = 48;
+  const metaRowH = 28;
+  const statsH = rows.length * 26 + 8;
+  const height = headerH + metaRowH + 14 + statsH + pad;
 
-  const chrome = panel({ width: w, height, borderColor: tierBorder(resolved.tier) })
+  const chrome = panel({ width: w, height, borderColor: tierBorder(resolved.tier) });
 
-  const quantity = Number(BigInt(item.quantity.toString()))
-  const badge = quantityBadge({ x: w - pad, y: pad, quantity })
+  const quantity = Number(BigInt(item.quantity.toString()));
+  const badge = quantityBadge({ x: w - pad, y: pad, quantity });
 
   const icon = iconHex({
     x: pad,
     y: pad + 4,
     color: categoryColor(resolved.category),
     code: shortCode(resolved.itemId),
-  })
+  });
 
   const name = text({
     x: pad + 34,
@@ -93,42 +91,42 @@ export function renderResource(
     size: tokens.typography.sizes.title,
     weight: 700,
     family: tokens.typography.display,
-  })
+  });
 
-  const catLabel = resolved.category ? (CATEGORY_LABELS[resolved.category] ?? 'Item') : 'Item'
+  const catLabel = resolved.category ? (CATEGORY_LABELS[resolved.category] ?? "Item") : "Item";
   const catText = text({
     x: pad,
     y: pad + headerH + 4,
-    value: 'Category',
+    value: "Category",
     size: tokens.typography.sizes.body,
     color: tokens.colors.text.secondary,
-  })
+  });
   const catValue = text({
     x: w - pad,
     y: pad + headerH + 4,
     value: catLabel,
     size: tokens.typography.sizes.body,
     weight: 600,
-    anchor: 'end',
-  })
+    anchor: "end",
+  });
   const massLabel = text({
     x: pad,
     y: pad + headerH + metaRowH - 8,
-    value: 'Mass',
+    value: "Mass",
     size: tokens.typography.sizes.body,
     color: tokens.colors.text.secondary,
-  })
+  });
   const massValue = text({
     x: w - pad,
     y: pad + headerH + metaRowH - 8,
     value: formatMass(resolved.mass),
     size: tokens.typography.sizes.body,
     weight: 600,
-    anchor: 'end',
-  })
+    anchor: "end",
+  });
 
-  const sepY = pad + headerH + metaRowH + 6
-  const sep = divider({ x: pad, y: sepY, width: innerW })
+  const sepY = pad + headerH + metaRowH + 6;
+  const sep = divider({ x: pad, y: sepY, width: innerW });
 
   const statsSvg = rows
     .map((row, i) =>
@@ -143,9 +141,9 @@ export function renderResource(
         inverted: row.inverted,
       }),
     )
-    .join('')
+    .join("");
 
-  const inner = `${chrome}${icon}${name}${badge}${catText}${catValue}${massLabel}${massValue}${sep}${statsSvg}`
+  const inner = `${chrome}${icon}${name}${badge}${catText}${catValue}${massLabel}${massValue}${sep}${statsSvg}`;
 
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`;
 }

package/src/templates/ship-panel.ts

@@ -1,84 +1,74 @@
-import type { ResourceTier, TextSpan } from '@shipload/sdk'
-import { panel } from '../primitives/panel.ts'
-import { iconHex } from '../primitives/icon-hex.ts'
-import { text } from '../primitives/text.ts'
-import { divider } from '../primitives/divider.ts'
-import { moduleSlot } from '../primitives/module-slot.ts'
-import { quantityBadge } from '../primitives/quantity-badge.ts'
-import { wrapText } from '../primitives/wrap.ts'
-import { tokens } from '../tokens/index.ts'
+import type { TextSpan } from "@shipload/sdk";
+import { panel } from "../primitives/panel.ts";
+import { iconHex } from "../primitives/icon-hex.ts";
+import { text } from "../primitives/text.ts";
+import { divider } from "../primitives/divider.ts";
+import { moduleSlot } from "../primitives/module-slot.ts";
+import { quantityBadge } from "../primitives/quantity-badge.ts";
+import { wrapText } from "../primitives/wrap.ts";
+import { tokens } from "../tokens/index.ts";
 
 export interface ShipPanelSlot {
-  name?: string
-  installed: boolean
-  description?: string | TextSpan[]
+  name?: string;
+  installed: boolean;
+  description?: string | TextSpan[];
 }
 
 export interface ShipPanelProps {
-  name: string
-  tier: ResourceTier
-  quantity?: number
-  attributes: { capability: string; attributes: { label: string; value: number }[] }[]
-  slots: ShipPanelSlot[]
+  name: string;
+  tier: number;
+  quantity?: number;
+  attributes: { capability: string; attributes: { label: string; value: number }[] }[];
+  slots: ShipPanelSlot[];
 }
 
 function formatNumber(n: number): string {
-  return n.toLocaleString('en-US')
+  return n.toLocaleString("en-US");
 }
 
-function tierBorder(tier: string): string {
-  const key = tier.toLowerCase() as keyof typeof tokens.colors.tier
-  return tokens.colors.tier[key] ?? tokens.colors.surface.panelBorder
+function tierBorder(tier: number): string {
+  return tokens.colors.tier[tier] ?? tokens.colors.surface.panelBorder;
 }
 
-const MODULE_LABEL_PREFIX = (capability: string) => `${capability}: `
+const MODULE_LABEL_PREFIX = (capability: string) => `${capability}: `;
 
 function rowHeightFor(slot: ShipPanelSlot): number {
-  if (!slot.installed) return 24
-  const desc = slot.description
+  if (!slot.installed) return 24;
+  const desc = slot.description;
   const plain =
-    typeof desc === 'string'
-      ? desc
-      : Array.isArray(desc)
-        ? desc.map((s) => s.text).join('')
-        : ''
-  if (plain.length === 0) return 24
-  const combined = MODULE_LABEL_PREFIX(slot.name ?? 'Module') + plain
-  const lineCount = Math.max(1, wrapText({ value: combined, charsPerLine: 36 }).length)
-  return 10 + lineCount * 14
+    typeof desc === "string" ? desc : Array.isArray(desc) ? desc.map((s) => s.text).join("") : "";
+  if (plain.length === 0) return 24;
+  const combined = MODULE_LABEL_PREFIX(slot.name ?? "Module") + plain;
+  const lineCount = Math.max(1, wrapText({ value: combined, charsPerLine: 36 }).length);
+  return 10 + lineCount * 14;
 }
 
 export function renderShipPanel(props: ShipPanelProps): string {
-  const w = tokens.spacing.panelWidth
-  const pad = tokens.spacing.panelPadding
-  const innerW = w - pad * 2
-  const quantity = props.quantity ?? 0
-
-  const hullGroup = props.attributes?.find((g) => g.capability.toLowerCase() === 'hull')
-  const hullRows = hullGroup?.attributes ?? []
-
-  const headerH = 48
-  const hullHeaderH = 20
-  const hullRowH = 22
-  const sectionGap = 12
-  const rowHeights = props.slots.map(rowHeightFor)
-  const modulesHeight = rowHeights.reduce((a, b) => a + b, 0)
+  const w = tokens.spacing.panelWidth;
+  const pad = tokens.spacing.panelPadding;
+  const innerW = w - pad * 2;
+  const quantity = props.quantity ?? 0;
+
+  const hullGroup = props.attributes?.find((g) => g.capability.toLowerCase() === "hull");
+  const hullRows = hullGroup?.attributes ?? [];
+
+  const headerH = 48;
+  const hullHeaderH = 20;
+  const hullRowH = 22;
+  const sectionGap = 12;
+  const rowHeights = props.slots.map(rowHeightFor);
+  const modulesHeight = rowHeights.reduce((a, b) => a + b, 0);
   const height =
-    headerH +
-    hullHeaderH +
-    hullRows.length * hullRowH +
-    sectionGap +
-    modulesHeight +
-    pad
+    headerH + hullHeaderH + hullRows.length * hullRowH + sectionGap + modulesHeight + pad;
 
-  const chrome = panel({ width: w, height, borderColor: tierBorder(props.tier) })
+  const chrome = panel({ width: w, height, borderColor: tierBorder(props.tier) });
 
   const icon = iconHex({
     x: pad,
     y: pad + 4,
     color: tokens.colors.text.accent,
-    code: 'SH',
-  })
+    code: "SH",
+  });
 
   const name = text({
     x: pad + 34,
@@ -87,22 +77,22 @@ export function renderShipPanel(props: ShipPanelProps): string {
     size: tokens.typography.sizes.title,
     weight: 700,
     family: tokens.typography.display,
-  })
+  });
 
-  const badge = quantityBadge({ x: w - pad, y: pad, quantity })
+  const badge = quantityBadge({ x: w - pad, y: pad, quantity });
 
   const hullHeader = text({
     x: pad,
     y: pad + headerH,
-    value: 'HULL',
+    value: "HULL",
     size: tokens.typography.sizes.subtitle,
     weight: 700,
     color: tokens.colors.text.secondary,
     letterSpacing: 1,
-  })
+  });
 
-  let y = pad + headerH + 6
-  let hullSvg = ''
+  let y = pad + headerH + 6;
+  let hullSvg = "";
   for (const row of hullRows) {
     hullSvg +=
       text({
@@ -118,16 +108,21 @@ export function renderShipPanel(props: ShipPanelProps): string {
         value: formatNumber(row.value),
         size: tokens.typography.sizes.body,
         weight: 700,
-        anchor: 'end',
+        anchor: "end",
       }) +
-      divider({ x: pad, y: y + hullRowH - 4, width: innerW, color: tokens.colors.surface.panelBorderBright })
-    y += hullRowH
+      divider({
+        x: pad,
+        y: y + hullRowH - 4,
+        width: innerW,
+        color: tokens.colors.surface.panelBorderBright,
+      });
+    y += hullRowH;
   }
 
-  y += sectionGap
-  let modulesSvg = ''
+  y += sectionGap;
+  let modulesSvg = "";
   for (let i = 0; i < props.slots.length; i++) {
-    const slot = props.slots[i]!
+    const slot = props.slots[i]!;
     modulesSvg += moduleSlot({
       x: pad,
       y,
@@ -136,10 +131,10 @@ export function renderShipPanel(props: ShipPanelProps): string {
       capability: slot.name,
       description: slot.description,
       accentColor: tokens.colors.brand.teal,
-    })
-    y += rowHeights[i]!
+    });
+    y += rowHeights[i]!;
   }
 
-  const inner = `${chrome}${icon}${name}${badge}${hullHeader}${hullSvg}${modulesSvg}`
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`
+  const inner = `${chrome}${icon}${name}${badge}${hullHeader}${hullSvg}${modulesSvg}`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`;
 }

package/src/templates/social-card.ts

@@ -1,42 +1,44 @@
-import type { ResolvedItem } from '@shipload/sdk'
-import type { CargoItem } from '../payload/codec.ts'
-import { renderByType } from './index.ts'
-import { STARDUST_BASE64 } from '../assets/stardust-base64.ts'
-import { svgDimensions } from '../meta.ts'
+import type { ResolvedItem } from "@shipload/sdk";
+import type { CargoItem } from "../payload/codec.ts";
+import { renderByType } from "./index.ts";
+import { STARDUST_BASE64 } from "../assets/stardust-base64.ts";
+import { svgDimensions } from "../meta.ts";
 
-export const SOCIAL_CARD_WIDTH = 1200
-export const SOCIAL_CARD_HEIGHT = 630
+export const SOCIAL_CARD_WIDTH = 1200;
+export const SOCIAL_CARD_HEIGHT = 630;
 
-const SPACE_DEEP = '#050c24'
-const STARDUST_TILE = 512
-const ITEM_MAX_WIDTH_RATIO = 0.35
-const ITEM_MAX_HEIGHT_RATIO = 0.82
-const DOMAIN_LABEL = 'shiploadgame.com'
+const SPACE_DEEP = "#050c24";
+const STARDUST_TILE = 512;
+const ITEM_MAX_WIDTH_RATIO = 0.35;
+const ITEM_MAX_HEIGHT_RATIO = 0.82;
+const DOMAIN_LABEL = "shiploadgame.com";
 
 export function socialCardSvg(item: CargoItem, resolved: ResolvedItem): string {
-  const itemSvg = renderByType(item, resolved)
-  const { width: itemW, height: itemH } = svgDimensions(itemSvg)
+  const itemSvg = renderByType(item, resolved);
+  const { width: itemW, height: itemH } = svgDimensions(itemSvg);
 
   const scale = Math.min(
     (SOCIAL_CARD_WIDTH * ITEM_MAX_WIDTH_RATIO) / itemW,
     (SOCIAL_CARD_HEIGHT * ITEM_MAX_HEIGHT_RATIO) / itemH,
-  )
-  const scaledW = itemW * scale
-  const scaledH = itemH * scale
-  const tx = (SOCIAL_CARD_WIDTH - scaledW) / 2
-  const ty = (SOCIAL_CARD_HEIGHT - scaledH) / 2
+  );
+  const scaledW = itemW * scale;
+  const scaledH = itemH * scale;
+  const tx = (SOCIAL_CARD_WIDTH - scaledW) / 2;
+  const ty = (SOCIAL_CARD_HEIGHT - scaledH) / 2;
 
-  const itemInner = itemSvg.replace(/^<svg[^>]*>/, '').replace(/<\/svg>\s*$/, '')
+  const itemInner = itemSvg.replace(/^<svg[^>]*>/, "").replace(/<\/svg>\s*$/, "");
 
-  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${SOCIAL_CARD_WIDTH}" height="${SOCIAL_CARD_HEIGHT}" viewBox="0 0 ${SOCIAL_CARD_WIDTH} ${SOCIAL_CARD_HEIGHT}">` +
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${SOCIAL_CARD_WIDTH}" height="${SOCIAL_CARD_HEIGHT}" viewBox="0 0 ${SOCIAL_CARD_WIDTH} ${SOCIAL_CARD_HEIGHT}">` +
     `<defs>` +
-      `<pattern id="sc-stars" width="${STARDUST_TILE}" height="${STARDUST_TILE}" patternUnits="userSpaceOnUse">` +
-        `<image xlink:href="data:image/png;base64,${STARDUST_BASE64}" width="${STARDUST_TILE}" height="${STARDUST_TILE}"/>` +
-      `</pattern>` +
+    `<pattern id="sc-stars" width="${STARDUST_TILE}" height="${STARDUST_TILE}" patternUnits="userSpaceOnUse">` +
+    `<image xlink:href="data:image/png;base64,${STARDUST_BASE64}" width="${STARDUST_TILE}" height="${STARDUST_TILE}"/>` +
+    `</pattern>` +
     `</defs>` +
     `<rect width="${SOCIAL_CARD_WIDTH}" height="${SOCIAL_CARD_HEIGHT}" fill="${SPACE_DEEP}"/>` +
     `<rect width="${SOCIAL_CARD_WIDTH}" height="${SOCIAL_CARD_HEIGHT}" fill="url(#sc-stars)" opacity="0.75"/>` +
     `<g transform="translate(${tx.toFixed(2)} ${ty.toFixed(2)}) scale(${scale.toFixed(4)})">${itemInner}</g>` +
     `<text x="${SOCIAL_CARD_WIDTH - 40}" y="${SOCIAL_CARD_HEIGHT - 36}" text-anchor="end" fill="#e6e8ec" opacity="0.55" font-size="22" font-family="Inter, sans-serif" letter-spacing="0.04em">${DOMAIN_LABEL}</text>` +
-  `</svg>`
+    `</svg>`
+  );
 }

package/src/tokens/colors.ts

@@ -1,45 +1,45 @@
-import { tierColors } from '@shipload/sdk'
+import { tierColors } from "@shipload/sdk";
 
 export const colors = {
   surface: {
-    background: '#0a0a0c',
-    panel: '#11141a',
-    panelBorder: '#1e242e',
-    panelBorderBright: '#2a3340',
+    background: "#0a0a0c",
+    panel: "#11141a",
+    panelBorder: "#1e242e",
+    panelBorderBright: "#2a3340",
   },
   text: {
-    primary: '#e6e8ec',
-    secondary: '#8f98a8',
-    muted: '#5b6373',
-    accent: '#f4c96b',
+    primary: "#e6e8ec",
+    secondary: "#8f98a8",
+    muted: "#5b6373",
+    accent: "#f4c96b",
   },
   brand: {
-    pink: '#ff4f9a',
-    teal: '#2fd6d1',
-    cyan: '#6cb9ff',
+    pink: "#ff4f9a",
+    teal: "#2fd6d1",
+    cyan: "#6cb9ff",
   },
   category: {
-    ore: '#C26D3F',
-    crystal: '#4ADBFF',
-    gas: '#B8E4A0',
-    regolith: '#C4A57B',
-    biomass: '#5A8B3E',
+    ore: "#C26D3F",
+    crystal: "#4ADBFF",
+    gas: "#B8E4A0",
+    regolith: "#C4A57B",
+    biomass: "#5A8B3E",
   },
   tier: tierColors,
   accent: {
-    component: '#8f98a8',
+    component: "#8f98a8",
   },
   capability: {
-    engine: '#4a8abf',
-    generator: '#22c55e',
-    gatherer: '#f59e0b',
-    loader: '#eab308',
-    manufacturing: '#a855f7',
-    storage: '#14b8a6',
-    hauler: '#f97316',
+    engine: "#4a8abf",
+    generator: "#22c55e",
+    gatherer: "#f59e0b",
+    loader: "#eab308",
+    manufacturing: "#a855f7",
+    storage: "#14b8a6",
+    hauler: "#f97316",
   },
-} as const
+} as const;
 
-export type CategoryColorKey = keyof typeof colors.category
-export type TierColorKey = keyof typeof colors.tier
-export type CapabilityColorKey = keyof typeof colors.capability
+export type CategoryColorKey = keyof typeof colors.category;
+export type TierColorKey = keyof typeof colors.tier;
+export type CapabilityColorKey = keyof typeof colors.capability;

package/src/tokens/index.ts

@@ -1,7 +1,7 @@
-import { colors } from './colors.ts'
-import { spacing } from './spacing.ts'
-import { typography } from './typography.ts'
+import { colors } from "./colors.ts";
+import { spacing } from "./spacing.ts";
+import { typography } from "./typography.ts";
 
-export const tokens = { colors, spacing, typography } as const
-export type Tokens = typeof tokens
-export { colors, spacing, typography }
+export const tokens = { colors, spacing, typography } as const;
+export type Tokens = typeof tokens;
+export { colors, spacing, typography };

package/src/tokens/spacing.ts

@@ -7,4 +7,4 @@ export const spacing = {
   statBarHeight: 4,
   iconHexSize: 22,
   quantityBadgeHeight: 18,
-} as const
+} as const;

package/src/tokens/typography.ts

@@ -16,4 +16,4 @@ export const typography = {
     semibold: 600,
     bold: 700,
   },
-} as const
+} as const;