@shipload/item-renderer 0.2.2 → 1.0.0-beta1

package/src/templates/resource.ts

@@ -1,151 +1,151 @@
-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,
+    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: displayName(resolved),
-    size: tokens.typography.sizes.title,
-    weight: 700,
-    family: tokens.typography.display,
-  })
-
-  const catLabel = resolved.category ? (CATEGORY_LABELS[resolved.category] ?? 'Item') : '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({
+    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: 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>`
+        y: pad + 4,
+        color: categoryColor(resolved.category),
+        code: shortCode(resolved.itemId),
+    })
+
+    const name = text({
+        x: pad + 34,
+        y: pad + 22,
+        value: displayName(resolved),
+        size: tokens.typography.sizes.title,
+        weight: 700,
+        family: tokens.typography.display,
+    })
+
+    const catLabel = resolved.category ? (CATEGORY_LABELS[resolved.category] ?? 'Item') : '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>`
 }

package/src/templates/ship-panel.ts

@@ -1,145 +1,144 @@
-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'
+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: number
-  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: number): string {
-  const key = `t${tier}` as keyof typeof tokens.colors.tier
-  return tokens.colors.tier[key] ?? tokens.colors.surface.panelBorder
+    return tokens.colors.tier[tier] ?? tokens.colors.surface.panelBorder
 }
 
 const MODULE_LABEL_PREFIX = (capability: string) => `${capability}: `
 
 function rowHeightFor(slot: ShipPanelSlot): number {
-  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
+    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
 }
 
 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 height =
-    headerH +
-    hullHeaderH +
-    hullRows.length * hullRowH +
-    sectionGap +
-    modulesHeight +
-    pad
-
-  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',
-  })
-
-  const name = text({
-    x: pad + 34,
-    y: pad + 22,
-    value: props.name,
-    size: tokens.typography.sizes.title,
-    weight: 700,
-    family: tokens.typography.display,
-  })
-
-  const badge = quantityBadge({ x: w - pad, y: pad, quantity })
-
-  const hullHeader = text({
-    x: pad,
-    y: pad + headerH,
-    value: 'HULL',
-    size: tokens.typography.sizes.subtitle,
-    weight: 700,
-    color: tokens.colors.text.secondary,
-    letterSpacing: 1,
-  })
-
-  let y = pad + headerH + 6
-  let hullSvg = ''
-  for (const row of hullRows) {
-    hullSvg +=
-      text({
+    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
+
+    const chrome = panel({width: w, height, borderColor: tierBorder(props.tier)})
+
+    const icon = iconHex({
         x: pad,
-        y: y + 12,
-        value: row.label,
-        size: tokens.typography.sizes.body,
-        color: tokens.colors.text.secondary,
-      }) +
-      text({
-        x: w - pad,
-        y: y + 12,
-        value: formatNumber(row.value),
-        size: tokens.typography.sizes.body,
+        y: pad + 4,
+        color: tokens.colors.text.accent,
+        code: 'SH',
+    })
+
+    const name = text({
+        x: pad + 34,
+        y: pad + 22,
+        value: props.name,
+        size: tokens.typography.sizes.title,
         weight: 700,
-        anchor: 'end',
-      }) +
-      divider({ x: pad, y: y + hullRowH - 4, width: innerW, color: tokens.colors.surface.panelBorderBright })
-    y += hullRowH
-  }
-
-  y += sectionGap
-  let modulesSvg = ''
-  for (let i = 0; i < props.slots.length; i++) {
-    const slot = props.slots[i]!
-    modulesSvg += moduleSlot({
-      x: pad,
-      y,
-      width: innerW,
-      installed: slot.installed,
-      capability: slot.name,
-      description: slot.description,
-      accentColor: tokens.colors.brand.teal,
+        family: tokens.typography.display,
+    })
+
+    const badge = quantityBadge({x: w - pad, y: pad, quantity})
+
+    const hullHeader = text({
+        x: pad,
+        y: pad + headerH,
+        value: 'HULL',
+        size: tokens.typography.sizes.subtitle,
+        weight: 700,
+        color: tokens.colors.text.secondary,
+        letterSpacing: 1,
     })
-    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>`
+    let y = pad + headerH + 6
+    let hullSvg = ''
+    for (const row of hullRows) {
+        hullSvg +=
+            text({
+                x: pad,
+                y: y + 12,
+                value: row.label,
+                size: tokens.typography.sizes.body,
+                color: tokens.colors.text.secondary,
+            }) +
+            text({
+                x: w - pad,
+                y: y + 12,
+                value: formatNumber(row.value),
+                size: tokens.typography.sizes.body,
+                weight: 700,
+                anchor: 'end',
+            }) +
+            divider({
+                x: pad,
+                y: y + hullRowH - 4,
+                width: innerW,
+                color: tokens.colors.surface.panelBorderBright,
+            })
+        y += hullRowH
+    }
+
+    y += sectionGap
+    let modulesSvg = ''
+    for (let i = 0; i < props.slots.length; i++) {
+        const slot = props.slots[i]!
+        modulesSvg += moduleSlot({
+            x: pad,
+            y,
+            width: innerW,
+            installed: slot.installed,
+            capability: slot.name,
+            description: slot.description,
+            accentColor: tokens.colors.brand.teal,
+        })
+        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>`
 }

package/src/templates/social-card.ts

@@ -1,8 +1,8 @@
-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
@@ -14,29 +14,31 @@ 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 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 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}">` +
-    `<defs>` +
-      `<pattern id="sc-stars" width="${STARDUST_TILE}" height="${STARDUST_TILE}" patternUnits="userSpaceOnUse">` +
+    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>` +
-    `</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>`
+        `</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>`
+    )
 }