@shipload/item-renderer 0.1.0

package/src/templates/component.ts

@@ -0,0 +1,139 @@
+import type { ResolvedItem } from '@shipload/sdk'
+import { getComponentById, getStatDefinitions, categoryColors } 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'
+
+export interface RenderComponentOpts {
+  mode?: 'values' | 'ranges'
+}
+
+type StatRow = {
+  label: string
+  abbreviation: string
+  value: number | null
+  color: string
+  inverted?: boolean
+}
+
+export function renderComponent(
+  item: CargoItem,
+  resolved: ResolvedItem,
+  opts?: RenderComponentOpts,
+): 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 => ({
+      label: s.label,
+      abbreviation: s.abbreviation,
+      value: s.value,
+      color: s.color,
+      inverted: s.inverted,
+    }))
+  } else {
+    const comp = getComponentById(resolved.itemId)
+    rows = (comp?.stats ?? []).flatMap(stat => {
+      const defs = getStatDefinitions(stat.source)
+      const def = defs.find(d => d.key === stat.key)
+      if (!def) return []
+      return [{
+        label: def.label,
+        abbreviation: def.abbreviation,
+        value: null,
+        color: categoryColors[stat.source],
+        inverted: def.inverted,
+      }]
+    })
+  }
+
+  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 quantity = Number(BigInt(item.quantity.toString()))
+  const badge = quantityBadge({ x: w - pad, y: pad, quantity })
+
+  const icon = iconHex({
+    x: pad,
+    y: pad + 4,
+    color: tokens.colors.accent.component,
+    code: shortCode(resolved.itemId),
+  })
+
+  const name = text({
+    x: pad + 34,
+    y: pad + 22,
+    value: resolved.name,
+    size: tokens.typography.sizes.title,
+    weight: 700,
+    family: tokens.typography.display,
+  })
+
+  const tierNum = resolved.tier.replace(/^t/i, '')
+  const subtitleText = text({
+    x: pad,
+    y: pad + headerH + 4,
+    value: 'Type',
+    size: tokens.typography.sizes.body,
+    color: tokens.colors.text.secondary,
+  })
+  const subtitleValue = text({
+    x: w - pad,
+    y: pad + headerH + 4,
+    value: `COMPONENT · T${tierNum}`,
+    size: tokens.typography.sizes.body,
+    weight: 600,
+    anchor: 'end',
+  })
+  const massLabel = text({
+    x: pad,
+    y: pad + headerH + metaRowH - 8,
+    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',
+  })
+
+  const sepY = pad + headerH + metaRowH + 6
+  const sep = divider({ x: pad, y: sepY, width: innerW })
+
+  const statsSvg = rows
+    .map((row, i) =>
+      statBar({
+        x: pad,
+        y: sepY + 18 + i * 26,
+        width: innerW,
+        label: row.label,
+        abbreviation: row.abbreviation,
+        value: row.value,
+        color: row.color,
+        inverted: row.inverted,
+      }),
+    )
+    .join('')
+
+  const inner = `${chrome}${icon}${name}${badge}${subtitleText}${subtitleValue}${massLabel}${massValue}${sep}${statsSvg}`
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`
+}

package/src/templates/index.ts

@@ -0,0 +1,30 @@
+import type { ResolvedItem } from '@shipload/sdk'
+import type { CargoItem } from '../payload/codec.ts'
+import { RenderError } from '../errors.ts'
+import { renderResource } from './resource.ts'
+import { renderPackedEntity } from './packed-entity.ts'
+import { renderComponent } from './component.ts'
+import { renderModule } from './module.ts'
+
+export interface RenderByTypeOpts {
+  mode?: 'values' | 'ranges'
+}
+
+export function renderByType(
+  item: CargoItem,
+  resolved: ResolvedItem,
+  opts?: RenderByTypeOpts,
+): string {
+  switch (resolved.itemType) {
+    case 'resource':
+      return renderResource(item, resolved, opts)
+    case 'entity':
+      return renderPackedEntity(item, resolved)
+    case 'component':
+      return renderComponent(item, resolved, opts)
+    case 'module':
+      return renderModule(item, resolved, opts)
+    default:
+      throw new RenderError(`unknown itemType '${String(resolved.itemType)}'`)
+  }
+}

package/src/templates/item-cell.ts

@@ -0,0 +1,96 @@
+import type { ResolvedItem } from '@shipload/sdk'
+import { tierColors, categoryColors, categoryIconShapes } from '@shipload/sdk'
+import { el } from '../primitives/svg.ts'
+import { text } from '../primitives/text.ts'
+import { categoryIconPath } from '../primitives/category-icon.ts'
+import { tokens } from '../tokens/index.ts'
+
+export interface ItemCellProps {
+  resolved: ResolvedItem
+  quantity?: number
+  size?: number
+}
+
+export interface ItemCellGroupProps extends ItemCellProps {
+  x: number
+  y: number
+}
+
+function cellInner(props: ItemCellProps): string {
+  const size = props.size ?? 48
+  const height = Math.round(size * 1.25)
+  const r = Math.max(4, Math.round(size * 0.12))
+  const cx = size / 2
+
+  const border = el('rect', {
+    x: 0.5,
+    y: 0.5,
+    width: size - 1,
+    height: height - 1,
+    rx: r,
+    ry: r,
+    fill: tokens.colors.surface.panel,
+    stroke: tierColors[props.resolved.tier],
+    'stroke-width': 1.5,
+  })
+
+  let content = ''
+  if (props.resolved.abbreviation) {
+    const iconCy = size * 0.45
+    content = text({
+      x: cx,
+      y: iconCy,
+      value: props.resolved.abbreviation,
+      size: Math.round(size * 0.28),
+      weight: 700,
+      anchor: 'middle',
+      color: tokens.colors.text.primary,
+      family: tokens.typography.display,
+    })
+  } else if (props.resolved.category) {
+    const shape = categoryIconShapes[props.resolved.category]
+    const color = categoryColors[props.resolved.category]
+    const iconCy = size * 0.4
+    content = categoryIconPath({ shape, cx, cy: iconCy, size: size * 0.32, color, strokeWidth: 1.5 })
+  } else if (props.resolved.icon) {
+    content = text({
+      x: cx,
+      y: size * 0.4,
+      value: props.resolved.icon,
+      size: Math.round(size * 0.44),
+      weight: 400,
+      anchor: 'middle',
+      dominantBaseline: 'central',
+      color: tokens.colors.text.primary,
+    })
+  }
+
+  const qty = props.quantity ?? 0
+  let quantityText = ''
+  if (qty > 1) {
+    const qtyFontSize = Math.max(9, Math.round(size * 0.22))
+    const qtyPad = Math.max(3, Math.round(size * 0.12))
+    quantityText = text({
+      x: size - qtyPad,
+      y: height - qtyPad,
+      value: String(qty),
+      size: qtyFontSize,
+      weight: 700,
+      anchor: 'end',
+      color: tokens.colors.text.primary,
+      family: tokens.typography.display,
+    })
+  }
+
+  return border + content + quantityText
+}
+
+export function itemCellGroup(props: ItemCellGroupProps): string {
+  return `<g transform="translate(${props.x}, ${props.y})">${cellInner(props)}</g>`
+}
+
+export function renderItemCell(props: ItemCellProps): string {
+  const size = props.size ?? 48
+  const height = Math.round(size * 1.25)
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${height}" viewBox="0 0 ${size} ${height}">${cellInner(props)}</svg>`
+}

package/src/templates/module.ts

@@ -0,0 +1,190 @@
+import type { ResolvedItem } from '@shipload/sdk'
+import { describeModuleForItem, renderDescription } 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 { compactRow } from '../primitives/compact-row.ts'
+import { quantityBadge } from '../primitives/quantity-badge.ts'
+import { spanParagraph } from '../primitives/span-paragraph.ts'
+import { tokens } from '../tokens/index.ts'
+import { shortCode, formatMass, tierBorder } from './_shared.ts'
+
+function capabilityColor(name: string): string {
+  const key = name.toLowerCase().replace(/\s+/g, '') as keyof typeof tokens.colors.capability
+  return tokens.colors.capability[key] ?? tokens.colors.accent.component
+}
+
+export interface RenderModuleOpts {
+  mode?: 'values' | 'ranges'
+}
+
+export function renderModule(item: CargoItem, resolved: ResolvedItem, opts?: RenderModuleOpts): string {
+  const mode = opts?.mode ?? 'values'
+  const w = tokens.spacing.panelWidth
+  const pad = tokens.spacing.panelPadding
+  const innerW = w - pad * 2
+
+  const group = resolved.attributes?.[0]
+  const attrs = group?.attributes ?? []
+  const desc = mode === 'values' ? describeModuleForItem(resolved) : undefined
+
+  const capabilityName =
+    group?.capability ??
+    resolved.name.replace(/\s+T\d+$/i, '')
+
+  const headerH = 48
+  const metaRowH = 28
+  const sepY = pad + headerH + metaRowH + 6
+
+  let bodyHeight = 0
+  if (mode === 'ranges') {
+    bodyHeight = 20 + 8
+  } else if (desc && group) {
+    const plain = renderDescription(desc)
+      .map((s) => s.text)
+      .join('')
+    const lines = plain.split(/\s+/).reduce(
+      (acc, word) => {
+        const last = acc[acc.length - 1] ?? ''
+        if (last.length === 0) return [...acc.slice(0, -1), word]
+        if (last.length + 1 + word.length <= 36) return [...acc.slice(0, -1), `${last} ${word}`]
+        return [...acc, word]
+      },
+      [''],
+    )
+    const lineCount = lines.filter((l) => l.length > 0).length
+    bodyHeight = 20 + lineCount * 14 + 8
+  } else if (group && attrs.length > 0) {
+    const capHeaderH = 22
+    const attrsH = attrs.length * 18
+    bodyHeight = capHeaderH + attrsH + 8
+  }
+
+  const height = headerH + metaRowH + 14 + bodyHeight + pad
+
+  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 iconColor = group ? capabilityColor(group.capability) : capabilityColor(capabilityName)
+  const icon = iconHex({
+    x: pad,
+    y: pad + 4,
+    color: iconColor,
+    code: shortCode(resolved.itemId),
+  })
+
+  const name = text({
+    x: pad + 34,
+    y: pad + 22,
+    value: resolved.name,
+    size: tokens.typography.sizes.title,
+    weight: 700,
+    family: tokens.typography.display,
+  })
+
+  const tierNum = resolved.tier.replace(/^t/i, '')
+  const subtitleLabel = text({
+    x: pad,
+    y: pad + headerH + 4,
+    value: 'Type',
+    size: tokens.typography.sizes.body,
+    color: tokens.colors.text.secondary,
+  })
+  const subtitleValue = text({
+    x: w - pad,
+    y: pad + headerH + 4,
+    value: `MODULE · T${tierNum}`,
+    size: tokens.typography.sizes.body,
+    weight: 600,
+    anchor: 'end',
+  })
+
+  const massLabel = text({
+    x: pad,
+    y: pad + headerH + metaRowH - 8,
+    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',
+  })
+
+  const sep = divider({ x: pad, y: sepY, width: innerW })
+
+  let capSection = ''
+  if (mode === 'ranges') {
+    const accentColor = capabilityColor(capabilityName)
+    capSection = text({
+      x: pad,
+      y: sepY + 16,
+      value: capabilityName.toUpperCase(),
+      size: tokens.typography.sizes.subtitle,
+      weight: 700,
+      family: tokens.typography.sans,
+      color: accentColor,
+      letterSpacing: 1,
+    })
+  } else if (desc && group) {
+    const accentColor = capabilityColor(group.capability)
+    const capHeader = text({
+      x: pad,
+      y: sepY + 16,
+      value: group.capability.toUpperCase(),
+      size: tokens.typography.sizes.subtitle,
+      weight: 700,
+      family: tokens.typography.sans,
+      color: accentColor,
+      letterSpacing: 1,
+    })
+    const spans = renderDescription(desc)
+    const { svg: paraSvg } = spanParagraph({
+      x: pad,
+      y: sepY + 36,
+      spans,
+      charsPerLine: 36,
+      lineHeight: 14,
+    })
+    capSection = capHeader + paraSvg
+  } else if (group && attrs.length > 0) {
+    const capY = sepY + 22
+    const capHeader = text({
+      x: pad,
+      y: capY,
+      value: group.capability.toUpperCase(),
+      size: 10,
+      weight: 700,
+      family: tokens.typography.sans,
+      color: capabilityColor(group.capability),
+      letterSpacing: 0.8,
+    })
+
+    const attrRows = attrs
+      .map((attr, i) => {
+        const displayValue = String(attr.value)
+        return compactRow({
+          x: pad,
+          y: capY + 14 + i * 18,
+          width: innerW,
+          label: attr.label,
+          value: displayValue,
+        })
+      })
+      .join('')
+
+    capSection = capHeader + attrRows
+  }
+
+  const inner = `${chrome}${icon}${name}${badge}${subtitleLabel}${subtitleValue}${massLabel}${massValue}${sep}${capSection}`
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`
+}

package/src/templates/packed-entity.ts

@@ -0,0 +1,30 @@
+import type { ResolvedItem, ResolvedModuleSlot } from '@shipload/sdk'
+import { describeModuleForSlot, renderDescription } from '@shipload/sdk'
+import type { CargoItem } from '../payload/codec.ts'
+import { renderShipPanel, type ShipPanelSlot } from './ship-panel.ts'
+
+function slotToPanelSlot(slot: ResolvedModuleSlot): ShipPanelSlot {
+  if (!slot.installed || !slot.attributes || !slot.name) {
+    return { installed: false }
+  }
+  const desc = describeModuleForSlot(slot)
+  if (desc) {
+    return { name: slot.name, installed: true, description: renderDescription(desc) }
+  }
+  const shorthand = slot.attributes
+    .map((a) => `${a.value} ${a.label.toLowerCase()}`)
+    .join(' · ')
+  return { name: slot.name, installed: true, description: shorthand }
+}
+
+export function renderPackedEntity(item: CargoItem, resolved: ResolvedItem): string {
+  const quantity = Number(BigInt(item.quantity.toString()))
+  const slots = (resolved.moduleSlots ?? []).map(slotToPanelSlot)
+  return renderShipPanel({
+    name: `${resolved.name} (Packed)`,
+    tier: resolved.tier,
+    quantity,
+    attributes: resolved.attributes ?? [],
+    slots,
+  })
+}

package/src/templates/resource.ts

@@ -0,0 +1,151 @@
+import type { ResolvedItem } from '@shipload/sdk'
+import { getStatDefinitions, categoryColors } 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> = {
+  metal: 'Metals',
+  gas: 'Gas',
+  mineral: 'Minerals',
+  organic: 'Organic',
+  precious: 'Precious',
+}
+
+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
+}
+
+export interface RenderResourceOpts {
+  mode?: 'values' | 'ranges'
+}
+
+type StatRow = {
+  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 => ({
+      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 => ({
+      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 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 icon = iconHex({
+    x: pad,
+    y: pad + 4,
+    color: categoryColor(resolved.category),
+    code: shortCode(resolved.itemId),
+  })
+
+  const name = text({
+    x: pad + 34,
+    y: pad + 22,
+    value: resolved.name,
+    size: tokens.typography.sizes.title,
+    weight: 700,
+    family: tokens.typography.display,
+  })
+
+  const catLabel = CATEGORY_LABELS[(resolved.category ?? 'metal') as string] ?? 'Item'
+  const catText = text({
+    x: pad,
+    y: pad + headerH + 4,
+    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',
+  })
+  const massLabel = text({
+    x: pad,
+    y: pad + headerH + metaRowH - 8,
+    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',
+  })
+
+  const sepY = pad + headerH + metaRowH + 6
+  const sep = divider({ x: pad, y: sepY, width: innerW })
+
+  const statsSvg = rows
+    .map((row, i) =>
+      statBar({
+        x: pad,
+        y: sepY + 18 + i * 26,
+        width: innerW,
+        label: row.label,
+        abbreviation: row.abbreviation,
+        value: row.value,
+        color: row.color,
+        inverted: row.inverted,
+      }),
+    )
+    .join('')
+
+  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>`
+}