@shipload/item-renderer 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipload/item-renderer",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Deterministic SVG rendering for Shipload items",
   "type": "module",
   "main": "./src/index.ts",
@@ -24,7 +24,10 @@
       "default": "./test/fixtures/cargo-items.ts"
     }
   },
-  "files": ["src", "!src/**/*.test.ts"],
+  "files": [
+    "src",
+    "!src/**/*.test.ts"
+  ],
   "scripts": {
     "test": "bun test",
     "test:pixel": "bun test test/pixel.test.ts",
@@ -34,7 +37,7 @@
     "fonts:copy": "bun run scripts/copy-fonts.ts"
   },
   "dependencies": {
-    "@shipload/sdk": "2.0.0-rc15",
+    "@shipload/sdk": "2.0.0-rc21",
     "@wharfkit/antelope": "^1.0.0"
   },
   "devDependencies": {
@@ -47,5 +50,6 @@
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
     "typescript": "^5.4.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/templates/_shared.ts

@@ -4,8 +4,8 @@ export function formatMass(n: number): string {
   return n.toLocaleString('en-US')
 }
 
-export function tierBorder(tier: string): string {
-  const key = tier.toLowerCase() as keyof typeof tokens.colors.tier
+export function tierBorder(tier: number): string {
+  const key = `t${tier}` as keyof typeof tokens.colors.tier
   return tokens.colors.tier[key] ?? tokens.colors.surface.panelBorder
 }
 

package/src/templates/component.ts

@@ -1,5 +1,5 @@
-import type { ResolvedItem } from '@shipload/sdk'
-import { getComponentById, getStatDefinitions, categoryColors } from '@shipload/sdk'
+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'
@@ -42,16 +42,20 @@ export function renderComponent(
       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)
+    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[stat.source],
+        color: categoryColors[category],
         inverted: def.inverted,
       }]
     })
@@ -83,7 +87,6 @@ export function renderComponent(
     family: tokens.typography.display,
   })
 
-  const tierNum = resolved.tier.replace(/^t/i, '')
   const subtitleText = text({
     x: pad,
     y: pad + headerH + 4,
@@ -94,7 +97,7 @@ export function renderComponent(
   const subtitleValue = text({
     x: w - pad,
     y: pad + headerH + 4,
-    value: `COMPONENT · T${tierNum}`,
+    value: `COMPONENT · ${formatTier(resolved.tier)}`,
     size: tokens.typography.sizes.body,
     weight: 600,
     anchor: 'end',

package/src/templates/item-cell.ts

@@ -1,10 +1,14 @@
-import type { ResolvedItem } from '@shipload/sdk'
+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
+}
+
 export interface ItemCellProps {
   resolved: ResolvedItem
   quantity?: number
@@ -30,7 +34,7 @@ function cellInner(props: ItemCellProps): string {
     rx: r,
     ry: r,
     fill: tokens.colors.surface.panel,
-    stroke: tierColors[props.resolved.tier],
+    stroke: tierColors[tierKey(props.resolved.tier)] ?? tokens.colors.surface.panelBorder,
     'stroke-width': 1.5,
   })
 

package/src/templates/module.ts

@@ -1,5 +1,5 @@
 import type { ResolvedItem } from '@shipload/sdk'
-import { describeModuleForItem, renderDescription } from '@shipload/sdk'
+import { describeModuleForItem, formatTier, renderDescription } from '@shipload/sdk'
 import type { CargoItem } from '../payload/codec.ts'
 import { panel } from '../primitives/panel.ts'
 import { iconHex } from '../primitives/icon-hex.ts'
@@ -86,7 +86,6 @@ export function renderModule(item: CargoItem, resolved: ResolvedItem, opts?: Ren
     family: tokens.typography.display,
   })
 
-  const tierNum = resolved.tier.replace(/^t/i, '')
   const subtitleLabel = text({
     x: pad,
     y: pad + headerH + 4,
@@ -97,7 +96,7 @@ export function renderModule(item: CargoItem, resolved: ResolvedItem, opts?: Ren
   const subtitleValue = text({
     x: w - pad,
     y: pad + headerH + 4,
-    value: `MODULE · T${tierNum}`,
+    value: `MODULE · ${formatTier(resolved.tier)}`,
     size: tokens.typography.sizes.body,
     weight: 600,
     anchor: 'end',

package/src/templates/ship-panel.ts

@@ -1,4 +1,4 @@
-import type { ResourceTier, TextSpan } from '@shipload/sdk'
+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'
@@ -16,7 +16,7 @@ export interface ShipPanelSlot {
 
 export interface ShipPanelProps {
   name: string
-  tier: ResourceTier
+  tier: number
   quantity?: number
   attributes: { capability: string; attributes: { label: string; value: number }[] }[]
   slots: ShipPanelSlot[]
@@ -26,8 +26,8 @@ function formatNumber(n: number): string {
   return n.toLocaleString('en-US')
 }
 
-function tierBorder(tier: string): string {
-  const key = tier.toLowerCase() as keyof typeof tokens.colors.tier
+function tierBorder(tier: number): string {
+  const key = `t${tier}` as keyof typeof tokens.colors.tier
   return tokens.colors.tier[key] ?? tokens.colors.surface.panelBorder
 }
 

package/test/templates-ship-panel.test.ts

@@ -4,7 +4,7 @@ import { renderShipPanel } from '../src/templates/ship-panel.ts'
 test('renderShipPanel with empty slots renders empty module rows', () => {
   const svg = renderShipPanel({
     name: 'Ship T1 (Packed)',
-    tier: 't1',
+    tier: 1,
     attributes: [{
       capability: 'Hull',
       attributes: [
@@ -28,7 +28,7 @@ test('renderShipPanel with empty slots renders empty module rows', () => {
 test('renderShipPanel with installed slots + string descriptions', () => {
   const svg = renderShipPanel({
     name: 'Ship T1 (Packed)',
-    tier: 't1',
+    tier: 1,
     attributes: [{
       capability: 'Hull',
       attributes: [{ label: 'Mass', value: 100 }],
@@ -47,7 +47,7 @@ test('renderShipPanel with installed slots + string descriptions', () => {
 test('renderShipPanel with TextSpan[] descriptions preserves highlights', () => {
   const svg = renderShipPanel({
     name: 'Ship T1 (Packed)',
-    tier: 't1',
+    tier: 1,
     attributes: [{
       capability: 'Hull',
       attributes: [{ label: 'Mass', value: 100 }],
@@ -71,7 +71,7 @@ test('renderShipPanel with TextSpan[] descriptions preserves highlights', () =>
 test('renderShipPanel mixed slots (installed + empty)', () => {
   const svg = renderShipPanel({
     name: 'Ship T1 (Packed)',
-    tier: 't1',
+    tier: 1,
     attributes: [{
       capability: 'Hull',
       attributes: [{ label: 'Mass', value: 100 }],