@shipload/item-renderer 1.0.0-next.4 → 1.0.0-next.41

package/src/templates/resource.ts

@@ -1,22 +1,23 @@
 import type {ResolvedItem} from '@shipload/sdk'
-import {getStatDefinitions, categoryColors, displayName} from '@shipload/sdk'
+import {getStatDefinitions, categoryColors, formatLocation, starsForStat} 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 {resourceIcon} from '../primitives/resource-icon.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',
-}
+import {
+    formatMass,
+    tierBorder,
+    metaRowBlock,
+    titleText,
+    BADGE_Y,
+    HEADER_H,
+    ICON_Y,
+    STAT_BLOCK_GAP,
+    STAT_ROW_H,
+    BOTTOM_PAD,
+} from './_shared.ts'
 
 function categoryColor(category?: string): string {
     if (!category) return tokens.colors.text.muted
@@ -26,6 +27,7 @@ function categoryColor(category?: string): string {
 
 export interface RenderResourceOpts {
     mode?: 'values' | 'ranges'
+    location?: {x: number; y: number}
 }
 
 type StatRow = {
@@ -69,83 +71,53 @@ export function renderResource(
         }))
     }
 
-    const headerH = 48
-    const metaRowH = 28
-    const statsH = rows.length * 26 + 8
-    const height = headerH + metaRowH + 14 + statsH + pad
+    const metaRows = [
+        ...(opts?.location ? [{label: 'Location', value: formatLocation(opts.location)}] : []),
+    ]
 
-    const chrome = panel({width: w, height, borderColor: tierBorder(resolved.tier)})
+    const metaYStart = pad + HEADER_H
+    const {svg: metaSvg, height: metaH} = metaRowBlock(pad, metaYStart, innerW, metaRows)
+    const statsYStart = metaYStart + metaH + STAT_BLOCK_GAP
+    const statsBottom =
+        statsYStart + Math.max(0, rows.length - 1) * STAT_ROW_H + tokens.spacing.statBarHeight
+    const height = statsBottom + BOTTOM_PAD
 
-    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 chrome = panel({width: w, height, borderColor: tierBorder(resolved.tier)})
 
-    const name = text({
-        x: pad + 34,
-        y: pad + 22,
-        value: displayName(resolved),
-        size: tokens.typography.sizes.title,
-        weight: 700,
-        family: tokens.typography.display,
-    })
+    const identity = categoryColor(resolved.category)
 
-    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({
+    const quantity = Number(BigInt(item.quantity.toString()))
+    const badge = quantityBadge({
         x: w - pad,
-        y: pad + headerH + metaRowH - 8,
-        value: formatMass(resolved.mass),
-        size: tokens.typography.sizes.body,
-        weight: 600,
-        anchor: 'end',
+        y: pad + BADGE_Y,
+        quantity,
+        label: formatMass(quantity * resolved.mass),
+        tone: identity,
     })
 
-    const sepY = pad + headerH + metaRowH + 6
-    const sep = divider({x: pad, y: sepY, width: innerW})
+    const icon = resolved.category
+        ? resourceIcon(resolved.category, {x: pad, y: pad + ICON_Y - 2, size: 28})
+        : ''
+
+    const name = titleText(pad + 34, pad + 22, resolved)
 
     const statsSvg = rows
         .map((row, i) =>
             statBar({
                 x: pad,
-                y: sepY + 18 + i * 26,
+                y: statsYStart + i * STAT_ROW_H,
                 width: innerW,
                 label: row.label,
                 abbreviation: row.abbreviation,
                 value: row.value,
                 color: row.color,
                 inverted: row.inverted,
+                stars: row.value !== null ? starsForStat(row.value) : undefined,
             })
         )
         .join('')
 
-    const inner = `${chrome}${icon}${name}${badge}${catText}${catValue}${massLabel}${massValue}${sep}${statsSvg}`
+    const inner = `${chrome}${icon}${name}${badge}${metaSvg}${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,16 +1,31 @@
 import type {TextSpan} from '@shipload/sdk'
+import {formatLocation, formatMassScaled} 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 {entityIcon, entityIconSlugForName} from '../primitives/entity-icon.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 {
+    tierBorder,
+    metaRowBlock,
+    titleParts,
+    capabilityColor,
+    BADGE_Y,
+    HEADER_H,
+    ICON_Y,
+    BOTTOM_PAD,
+} from './_shared.ts'
+
+const HULL_MASS_LABELS = new Set(['mass', 'capacity'])
+
+const ENTITY_COLOR = tokens.colors.brand.cyan
 
 export interface ShipPanelSlot {
     name?: string
     installed: boolean
+    capability?: string
     description?: string | TextSpan[]
 }
 
@@ -18,22 +33,35 @@ export interface ShipPanelProps {
     name: string
     tier: number
     quantity?: number
+    location?: {x: number; y: number}
     attributes: {capability: string; attributes: {label: string; value: number}[]}[]
     slots: ShipPanelSlot[]
 }
 
-function formatNumber(n: number): string {
-    return n.toLocaleString('en-US')
-}
-
-function tierBorder(tier: number): string {
-    return tokens.colors.tier[tier] ?? tokens.colors.surface.panelBorder
+function formatHullValue(label: string, value: number): string {
+    return HULL_MASS_LABELS.has(label.toLowerCase())
+        ? formatMassScaled(value)
+        : value.toLocaleString('en-US')
 }
 
 const MODULE_LABEL_PREFIX = (capability: string) => `${capability}: `
 
-function rowHeightFor(slot: ShipPanelSlot): number {
-    if (!slot.installed) return 24
+function fallbackEntityCode(name: string): string {
+    const words = name
+        .replace(/\s+T\d+\s*$/i, '')
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+    if (words.length >= 2)
+        return words
+            .map((word) => word[0])
+            .join('')
+            .slice(0, 2)
+            .toUpperCase()
+    return (words[0] ?? 'EN').slice(0, 2).toUpperCase().padEnd(2, 'N')
+}
+
+function lineCountFor(slot: ShipPanelSlot): number {
     const desc = slot.description
     const plain =
         typeof desc === 'string'
@@ -41,12 +69,25 @@ function rowHeightFor(slot: ShipPanelSlot): number {
             : 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)
+    if (plain.length === 0) return 0
+    const combined = MODULE_LABEL_PREFIX(slot.capability ?? slot.name ?? 'Module') + plain
+    return Math.max(1, wrapText({value: combined, charsPerLine: 36}).length)
+}
+
+function rowHeightFor(slot: ShipPanelSlot): number {
+    if (!slot.installed) return 24
+    const lineCount = lineCountFor(slot)
+    if (lineCount === 0) return 24
     return 10 + lineCount * 14
 }
 
+function contentBottomOffsetFor(slot: ShipPanelSlot): number {
+    if (!slot.installed) return 14
+    const lineCount = lineCountFor(slot)
+    if (lineCount === 0) return 14
+    return 9 + (lineCount - 1) * 14 + 5
+}
+
 export function renderShipPanel(props: ShipPanelProps): string {
     const w = tokens.spacing.panelWidth
     const pad = tokens.spacing.panelPadding
@@ -54,91 +95,64 @@ export function renderShipPanel(props: ShipPanelProps): string {
     const quantity = props.quantity ?? 0
 
     const hullGroup = props.attributes?.find((g) => g.capability.toLowerCase() === 'hull')
-    const hullRows = hullGroup?.attributes ?? []
+    const hullAttrs = (hullGroup?.attributes ?? []).map((a) => ({
+        label: a.label,
+        value: formatHullValue(a.label, a.value),
+    }))
+    const metaRows = props.location
+        ? [{label: 'Location', value: formatLocation(props.location)}, ...hullAttrs]
+        : hullAttrs
 
-    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 metaYStart = pad + HEADER_H
+    const {svg: metaSvg, height: metaH} = metaRowBlock(pad, metaYStart, innerW, metaRows)
 
-    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,
-    })
+    const slotsYStart = metaYStart + metaH + sectionGap
 
-    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 y = slotsYStart
     let modulesSvg = ''
-    for (let i = 0; i < props.slots.length; i++) {
-        const slot = props.slots[i]!
+    let lastContentBottom = slotsYStart
+    props.slots.forEach((slot, i) => {
+        const accentColor = slot.installed
+            ? capabilityColor(slot.capability ?? slot.name ?? 'Module')
+            : ENTITY_COLOR
         modulesSvg += moduleSlot({
             x: pad,
             y,
             width: innerW,
             installed: slot.installed,
-            capability: slot.name,
+            capability: slot.capability ?? slot.name,
             description: slot.description,
-            accentColor: tokens.colors.brand.teal,
+            accentColor,
         })
-        y += rowHeights[i]!
-    }
+        lastContentBottom = y + contentBottomOffsetFor(slot)
+        if (i < props.slots.length - 1) y += rowHeightFor(slot)
+    })
+
+    const height = lastContentBottom + BOTTOM_PAD
+
+    const chrome = panel({width: w, height, borderColor: tierBorder(props.tier)})
+
+    const entitySlug = entityIconSlugForName(props.name)
+    const icon = entitySlug
+        ? entityIcon(entitySlug, {x: pad, y: pad + ICON_Y - 2, size: 28})
+        : iconHex({
+              x: pad,
+              y: pad + ICON_Y,
+              color: ENTITY_COLOR,
+              code: fallbackEntityCode(props.name),
+          })
+
+    const name = titleParts(pad + 34, pad + 22, props.name, props.tier)
+
+    const badge = quantityBadge({
+        x: w - pad,
+        y: pad + BADGE_Y,
+        quantity,
+        tone: ENTITY_COLOR,
+    })
 
-    const inner = `${chrome}${icon}${name}${badge}${hullHeader}${hullSvg}${modulesSvg}`
+    const inner = `${chrome}${icon}${name}${badge}${metaSvg}${modulesSvg}`
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`
 }

package/src/tokens/colors.ts

@@ -1,4 +1,4 @@
-import {tierColors} from '@shipload/sdk'
+import {categoryColors, tierColors} from '@shipload/sdk'
 
 export const colors = {
     surface: {
@@ -10,7 +10,7 @@ export const colors = {
     text: {
         primary: '#e6e8ec',
         secondary: '#8f98a8',
-        muted: '#5b6373',
+        muted: '#7c8698',
         accent: '#f4c96b',
     },
     brand: {
@@ -18,16 +18,10 @@ export const colors = {
         teal: '#2fd6d1',
         cyan: '#6cb9ff',
     },
-    category: {
-        ore: '#C26D3F',
-        crystal: '#4ADBFF',
-        gas: '#B8E4A0',
-        regolith: '#C4A57B',
-        biomass: '#5A8B3E',
-    },
+    category: categoryColors,
     tier: tierColors,
     accent: {
-        component: '#8f98a8',
+        component: '#7E93C4',
     },
     capability: {
         engine: '#4a8abf',

package/test/fixtures/cargo-items.ts

@@ -9,6 +9,7 @@ export const ITEM_LOADER_T1 = 10103
 export const ITEM_MANUFACTURING_T1 = 10104
 export const ITEM_STORAGE_T1 = 10105
 export const ITEM_HAULER_T1 = 10106
+export const ITEM_CONTAINER_T1_PACKED = 10200
 export const ITEM_SHIP_T1_PACKED = 10201
 
 export const MODULE_ENGINE = 1
@@ -49,7 +50,7 @@ export function cargoShipT1Packed(opts?: {
     })
 }
 
-export const ITEM_HULL_PLATES = 10001
+export const ITEM_PLATE = 10001
 
 export const FIXTURES = {
     oreT1: cargoOreT1('0x123456789ABCDEF'),
@@ -61,8 +62,8 @@ export const FIXTURES = {
         stats: '0xDEADBEEF1234',
         modules: [],
     }),
-    hullPlates: ServerContract.Types.cargo_item.from({
-        item_id: ITEM_HULL_PLATES,
+    plate: ServerContract.Types.cargo_item.from({
+        item_id: ITEM_PLATE,
         quantity: 1,
         stats: '0x7FFF',
         modules: [],
@@ -115,6 +116,12 @@ export const FIXTURES = {
         stats: '0',
         modules: [],
     }),
+    containerT1: ServerContract.Types.cargo_item.from({
+        item_id: ITEM_CONTAINER_T1_PACKED,
+        quantity: 1,
+        stats: '0',
+        modules: [],
+    }),
     shipT1TwoModules: cargoShipT1Packed(),
     shipT1OnlyEngine: cargoShipT1Packed({onlyEngine: true}),
 } as const

package/src/primitives/category-icon.ts

@@ -1,110 +0,0 @@
-import type {CategoryIconShape} from '@shipload/sdk'
-import {el} from './svg.ts'
-
-export interface CategoryIconPathOpts {
-    shape: CategoryIconShape
-    cx: number
-    cy: number
-    size: number
-    color: string
-    strokeWidth?: number
-}
-
-export interface CategoryIconSvgOpts {
-    size?: number
-    color?: string
-    strokeWidth?: number
-}
-
-function hexPoints(cx: number, cy: number, r: number): string {
-    const pts: string[] = []
-    for (let i = 0; i < 6; i++) {
-        const angle = (Math.PI / 3) * i - Math.PI / 2
-        pts.push(
-            `${(cx + r * Math.cos(angle)).toFixed(2)},${(cy + r * Math.sin(angle)).toFixed(2)}`
-        )
-    }
-    return pts.join(' ')
-}
-
-function diamondPoints(cx: number, cy: number, r: number): string {
-    return [
-        `${cx.toFixed(2)},${(cy - r).toFixed(2)}`,
-        `${(cx + r).toFixed(2)},${cy.toFixed(2)}`,
-        `${cx.toFixed(2)},${(cy + r).toFixed(2)}`,
-        `${(cx - r).toFixed(2)},${cy.toFixed(2)}`,
-    ].join(' ')
-}
-
-function starPoints(cx: number, cy: number, r: number): string {
-    const inner = r * 0.45
-    const pts: string[] = []
-    for (let i = 0; i < 10; i++) {
-        const angle = (Math.PI / 5) * i - Math.PI / 2
-        const radius = i % 2 === 0 ? r : inner
-        pts.push(
-            `${(cx + radius * Math.cos(angle)).toFixed(2)},${(cy + radius * Math.sin(angle)).toFixed(2)}`
-        )
-    }
-    return pts.join(' ')
-}
-
-export function categoryIconPath({
-    shape,
-    cx,
-    cy,
-    size,
-    color,
-    strokeWidth,
-}: CategoryIconPathOpts): string {
-    const r = size / 2
-    const stroked = strokeWidth && strokeWidth > 0
-    const shapeAttrs = stroked
-        ? {
-              fill: 'none',
-              stroke: color,
-              'stroke-width': strokeWidth,
-              'stroke-linejoin': 'round' as const,
-          }
-        : {fill: color}
-    switch (shape) {
-        case 'hex':
-            return el('polygon', {points: hexPoints(cx, cy, r), ...shapeAttrs})
-        case 'diamond':
-            return el('polygon', {points: diamondPoints(cx, cy, r), ...shapeAttrs})
-        case 'star':
-            return el('polygon', {points: starPoints(cx, cy, r), ...shapeAttrs})
-        case 'circle':
-            return el('circle', {cx, cy, r, ...shapeAttrs})
-        case 'square':
-            return el('rect', {x: cx - r, y: cy - r, width: size, height: size, ...shapeAttrs})
-    }
-    const _exhaustive: never = shape
-    throw new Error(`Unknown CategoryIconShape: ${String(_exhaustive)}`)
-}
-
-export function categoryIconSvg(shape: CategoryIconShape, opts: CategoryIconSvgOpts = {}): string {
-    const size = opts.size ?? 16
-    const color = opts.color ?? '#ffffff'
-    const cx = size / 2
-    const cy = size / 2
-    const iconSize = size * 0.85
-    const inner = categoryIconPath({
-        shape,
-        cx,
-        cy,
-        size: iconSize,
-        color,
-        strokeWidth: opts.strokeWidth,
-    })
-    return el(
-        'svg',
-        {
-            xmlns: 'http://www.w3.org/2000/svg',
-            width: size,
-            height: size,
-            viewBox: `0 0 ${size} ${size}`,
-        },
-        inner
-    )
-}

package/src/primitives/compact-row.ts

@@ -1,38 +0,0 @@
-import {text} from './text.ts'
-import {tokens} from '../tokens/index.ts'
-
-export interface CompactRowProps {
-    x: number
-    y: number
-    width: number
-    label: string
-    value: string
-    labelColor?: string
-    valueColor?: string
-}
-
-export function compactRow(p: CompactRowProps): string {
-    const labelColor = p.labelColor ?? tokens.colors.text.secondary
-    const valueColor = p.valueColor ?? tokens.colors.text.primary
-    return (
-        text({
-            x: p.x,
-            y: p.y,
-            value: p.label,
-            size: 11,
-            weight: 500,
-            family: tokens.typography.sans,
-            color: labelColor,
-        }) +
-        text({
-            x: p.x + p.width,
-            y: p.y,
-            value: p.value,
-            size: 11,
-            weight: 700,
-            family: tokens.typography.sans,
-            color: valueColor,
-            anchor: 'end',
-        })
-    )
-}