@shipload/item-renderer 0.2.2 → 1.0.0-beta1

package/src/templates/component.ts

@@ -1,142 +1,144 @@
-import type { ResolvedItem, ResourceCategory } from '@shipload/sdk'
-import { formatTier, getRecipe, 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'
+import type {ResolvedItem, ResourceCategory} from '@shipload/sdk'
+import {formatTier, getRecipe, 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'
+    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 renderComponent(
-  item: CargoItem,
-  resolved: ResolvedItem,
-  opts?: RenderComponentOpts,
+    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
+    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 recipe = getRecipe(resolved.itemId)
-    rows = (recipe?.statSlots ?? []).flatMap(slot => {
-      const src = slot.sources[0]
-      if (!src) return []
-      const input = recipe!.inputs[src.inputIndex]
-      if (!input || !('category' in input)) return []
-      const category = input.category as ResourceCategory
-      const def = getStatDefinitions(category)[src.statIndex]
-      if (!def) return []
-      return [{
-        label: def.label,
-        abbreviation: def.abbreviation,
-        value: null,
-        color: categoryColors[category],
-        inverted: def.inverted,
-      }]
-    })
-  }
+    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 recipe = getRecipe(resolved.itemId)
+        rows = (recipe?.statSlots ?? []).flatMap((slot) => {
+            const src = slot.sources[0]
+            if (!src) return []
+            const input = recipe!.inputs[src.inputIndex]
+            if (!input || !('category' in input)) return []
+            const category = input.category as ResourceCategory
+            const def = getStatDefinitions(category)[src.statIndex]
+            if (!def) return []
+            return [
+                {
+                    label: def.label,
+                    abbreviation: def.abbreviation,
+                    value: null,
+                    color: categoryColors[category],
+                    inverted: def.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: tokens.colors.accent.component,
-    code: shortCode(resolved.itemId),
-  })
+    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 name = text({
+        x: pad + 34,
+        y: pad + 22,
+        value: resolved.name,
+        size: tokens.typography.sizes.title,
+        weight: 700,
+        family: tokens.typography.display,
+    })
 
-  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 · ${formatTier(resolved.tier)}`,
-    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 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 · ${formatTier(resolved.tier)}`,
+        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 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 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}`
+    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>`
+    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

@@ -1,30 +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'
+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'
+    mode?: 'values' | 'ranges'
 }
 
 export function renderByType(
-  item: CargoItem,
-  resolved: ResolvedItem,
-  opts?: RenderByTypeOpts,
+    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)}'`)
-  }
+    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

@@ -1,100 +1,103 @@
-import type { ResolvedItem, ResourceTier } 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'
-
-function tierKey(tier: number): ResourceTier {
-  return `t${tier}` as ResourceTier
-}
+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
+    resolved: ResolvedItem
+    quantity?: number
+    size?: number
 }
 
 export interface ItemCellGroupProps extends ItemCellProps {
-  x: number
-  y: number
+    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[tierKey(props.resolved.tier)] ?? tokens.colors.surface.panelBorder,
-    'stroke-width': 1.5,
-  })
+    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
 
-  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,
+    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] ?? tokens.colors.surface.panelBorder,
+        'stroke-width': 1.5,
     })
-  } 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,
-    })
-  }
+    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
+    return border + content + quantityText
 }
 
 export function itemCellGroup(props: ItemCellGroupProps): string {
-  return `<g transform="translate(${props.x}, ${props.y})">${cellInner(props)}</g>`
+    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>`
+    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>`
 }