@shipload/item-renderer 1.0.0-next.5 → 1.0.0-next.50

package/src/templates/module.ts

@@ -1,23 +1,31 @@
 import type {ResolvedItem} from '@shipload/sdk'
-import {describeModuleForItem, formatTier, renderDescription} from '@shipload/sdk'
+import {describeModuleForItem, formatLocation, 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 {moduleIcon, moduleIconSlugForName} from '../primitives/module-icon.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
-}
+import {
+    shortCode,
+    formatMass,
+    tierBorder,
+    metaRowBlock,
+    titleText,
+    capabilityColor,
+    BADGE_Y,
+    HEADER_H,
+    ICON_Y,
+    META_BLOCK_GAP,
+    CAP_HEADER_H,
+    BODY_TAIL,
+} from './_shared.ts'
 
 export interface RenderModuleOpts {
     mode?: 'values' | 'ranges'
+    location?: {x: number; y: number}
 }
 
 export function renderModule(
@@ -31,162 +39,72 @@ export function renderModule(
     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 metaRows = [
+        {label: 'Mass', value: formatMass(resolved.mass * Math.max(quantity, 1))},
+        ...(opts?.location ? [{label: 'Location', value: formatLocation(opts.location)}] : []),
+    ]
 
-    const name = text({
-        x: pad + 34,
-        y: pad + 22,
-        value: resolved.name,
-        size: tokens.typography.sizes.title,
-        weight: 700,
-        family: tokens.typography.display,
-    })
+    const metaYStart = pad + HEADER_H
+    const {svg: metaSvg, height: metaH} = metaRowBlock(pad, metaYStart, innerW, metaRows)
+    const bodyYStart = metaYStart + metaH + META_BLOCK_GAP
 
-    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 · ${formatTier(resolved.tier)}`,
-        size: tokens.typography.sizes.body,
-        weight: 600,
-        anchor: 'end',
-    })
+    const iconColor = group ? capabilityColor(group.capability) : capabilityColor(capabilityName)
 
-    const massLabel = text({
+    const capLabel = (group?.capability ?? capabilityName).toUpperCase()
+    const capHeader = 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',
+        y: bodyYStart + 16,
+        value: capLabel,
+        size: tokens.typography.sizes.subtitle,
+        weight: 700,
+        family: tokens.typography.sans,
+        color: iconColor,
+        letterSpacing: 1,
     })
 
-    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,
-        })
+    let bodyHeight: number
+    let capSection: string
+    if (mode === 'values' && desc && group) {
         const spans = renderDescription(desc)
-        const {svg: paraSvg} = spanParagraph({
+        const {svg: paraSvg, lineCount} = spanParagraph({
             x: pad,
-            y: sepY + 36,
+            y: bodyYStart + 36,
             spans,
             charsPerLine: 36,
             lineHeight: 14,
+            highlightColor: tokens.colors.text.primary,
         })
+        bodyHeight = CAP_HEADER_H + lineCount * 14 + BODY_TAIL
         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
+    } else {
+        bodyHeight = CAP_HEADER_H + BODY_TAIL
+        capSection = capHeader
     }
 
-    const inner = `${chrome}${icon}${name}${badge}${subtitleLabel}${subtitleValue}${massLabel}${massValue}${sep}${capSection}`
+    const height = bodyYStart + bodyHeight + pad
+
+    const chrome = panel({width: w, height, borderColor: tierBorder(resolved.tier)})
+
+    const badge = quantityBadge({x: w - pad, y: pad + BADGE_Y, quantity, tone: iconColor})
+
+    const moduleSlug = moduleIconSlugForName(resolved.name)
+    const icon = moduleSlug
+        ? moduleIcon(moduleSlug, {x: pad, y: pad + ICON_Y - 2, size: 28})
+        : iconHex({
+              x: pad,
+              y: pad + ICON_Y,
+              color: iconColor,
+              code: shortCode(resolved.itemId),
+          })
+
+    const name = titleText(pad + 34, pad + 22, resolved)
+
+    const inner = `${chrome}${icon}${name}${badge}${metaSvg}${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

@@ -1,27 +1,47 @@
 import type {ResolvedItem, ResolvedModuleSlot} from '@shipload/sdk'
-import {describeModuleForSlot, renderDescription} from '@shipload/sdk'
+import {baseName, describeModuleForSlot, renderDescription} from '@shipload/sdk'
 import type {CargoItem} from '../payload/codec.ts'
 import {renderShipPanel, type ShipPanelSlot} from './ship-panel.ts'
 
+function capabilityFromName(name: string): string {
+    return name.replace(/\s+T\d+\s*$/i, '').trim()
+}
+
 function slotToPanelSlot(slot: ResolvedModuleSlot): ShipPanelSlot {
     if (!slot.installed || !slot.attributes || !slot.name) {
         return {installed: false}
     }
+    const capability = capabilityFromName(slot.name)
     const desc = describeModuleForSlot(slot)
     if (desc) {
-        return {name: slot.name, installed: true, description: renderDescription(desc)}
+        return {
+            name: slot.name,
+            installed: true,
+            capability,
+            description: renderDescription(desc),
+        }
     }
     const shorthand = slot.attributes.map((a) => `${a.value} ${a.label.toLowerCase()}`).join(' · ')
-    return {name: slot.name, installed: true, description: shorthand}
+    return {name: slot.name, installed: true, capability, description: shorthand}
+}
+
+export interface RenderPackedEntityOpts {
+    mode?: 'values' | 'ranges'
+    location?: {x: number; y: number}
 }
 
-export function renderPackedEntity(item: CargoItem, resolved: ResolvedItem): string {
+export function renderPackedEntity(
+    item: CargoItem,
+    resolved: ResolvedItem,
+    opts?: RenderPackedEntityOpts
+): string {
     const quantity = Number(BigInt(item.quantity.toString()))
     const slots = (resolved.moduleSlots ?? []).map(slotToPanelSlot)
     return renderShipPanel({
-        name: `${resolved.name} (Packed)`,
+        name: baseName(resolved),
         tier: resolved.tier,
         quantity,
+        location: opts?.location,
         attributes: resolved.attributes ?? [],
         slots,
     })

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>`
 }