@shipload/item-renderer 1.0.0-next.23 → 1.0.0-next.24

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@shipload/item-renderer",
-    "version": "1.0.0-next.23",
+    "version": "1.0.0-next.24",
     "description": "Deterministic SVG rendering for Shipload items",
     "homepage": "https://github.com/shipload/toolkit/tree/master/packages/item-renderer",
     "repository": {
@@ -45,7 +45,7 @@
         "fonts:copy": "bun run scripts/copy-fonts.ts"
     },
     "dependencies": {
-        "@shipload/sdk": "^1.0.0-next.23",
+        "@shipload/sdk": "^1.0.0-next.24",
         "@wharfkit/antelope": "1.2.0"
     },
     "devDependencies": {

package/src/index.ts

@@ -32,9 +32,14 @@ export {tokens} from './tokens/index.ts'
 export type {Tokens} from './tokens/index.ts'
 export type {CategoryColorKey, TierColorKey} from './tokens/colors.ts'
 
-// Category icon primitive
-export {categoryIconSvg, categoryIconPath} from './primitives/category-icon.ts'
-export type {CategoryIconPathOpts, CategoryIconSvgOpts} from './primitives/category-icon.ts'
+// Resource icon primitive
+export {
+    resourceIcon,
+    resourceIconBody,
+    resourceIconCategories,
+    resourceIconSvg,
+} from './primitives/resource-icon.ts'
+export type {ResourceIconInlineOpts, ResourceIconSvgOpts} from './primitives/resource-icon.ts'
 
 // Item cell templates
 export {renderItemCell, itemCellGroup} from './templates/item-cell.ts'
@@ -61,4 +66,3 @@ export {
     type ResolvedModuleSlot,
     type ResolvedAttributeGroup,
 } from '@shipload/sdk'
-export type {CategoryIconShape} from '@shipload/sdk'

package/src/primitives/resource-icon.ts

@@ -0,0 +1,242 @@
+import {CATEGORY_LABELS, categoryColors, type ResourceCategory} from '@shipload/sdk'
+import {el, escapeXml} from './svg.ts'
+
+export const resourceIconCategories = [
+    'ore',
+    'crystal',
+    'gas',
+    'regolith',
+    'biomass',
+] as const satisfies readonly ResourceCategory[]
+
+export interface ResourceIconSvgOpts {
+    size?: number
+    title?: string
+    className?: string
+}
+
+export interface ResourceIconInlineOpts {
+    x: number
+    y: number
+    size: number
+}
+
+const OUTLINE = '#06142f'
+const HILITE = '#f7fbff'
+const OUTER_STROKE = 4
+const DETAIL_STROKE = 2.5
+
+function oreIcon(): string {
+    return [
+        el('path', {
+            d: 'M13 24 L25 11 L43 13 L55 27 L48 49 L27 56 L12 42 Z',
+            fill: categoryColors.ore,
+            stroke: OUTLINE,
+            'stroke-width': OUTER_STROKE,
+            'stroke-linejoin': 'round',
+        }),
+        el('path', {d: 'M25 11 L31 30 L13 24 Z', fill: '#e39a5e'}),
+        el('path', {d: 'M31 30 L43 13 L55 27 L41 32 Z', fill: '#b85b35'}),
+        el('path', {d: 'M31 30 L41 32 L48 49 L27 56 Z', fill: '#8f432e'}),
+        el('path', {
+            d: 'M31 30 L25 11 M31 30 L13 24 M31 30 L41 32 M41 32 L48 49 M31 30 L27 56',
+            fill: 'none',
+            stroke: OUTLINE,
+            'stroke-width': 1.5,
+            'stroke-linecap': 'round',
+            'stroke-linejoin': 'round',
+            opacity: 0.28,
+        }),
+        el('path', {
+            d: 'M21 23 L27 18 M42 20 L48 27',
+            fill: 'none',
+            stroke: '#ffd29c',
+            'stroke-width': DETAIL_STROKE,
+            'stroke-linecap': 'round',
+            opacity: 0.72,
+        }),
+    ].join('')
+}
+
+function crystalIcon(): string {
+    return [
+        el('path', {
+            d: 'M32 6 L49 24 L39 58 L23 58 L14 25 Z',
+            fill: categoryColors.crystal,
+            stroke: OUTLINE,
+            'stroke-width': OUTER_STROKE,
+            'stroke-linejoin': 'round',
+        }),
+        el('path', {d: 'M32 6 L32 58 L14 25 Z', fill: '#1fb9e4'}),
+        el('path', {d: 'M32 6 L49 24 L32 58 Z', fill: '#8df0ff'}),
+        el('path', {d: 'M23 58 L32 32 L39 58 Z', fill: '#2f87d7', opacity: 0.72}),
+        el('path', {
+            d: 'M32 6 L32 58 M14 25 L32 32 L49 24 M23 58 L32 32 L39 58',
+            fill: 'none',
+            stroke: OUTLINE,
+            'stroke-width': 1.5,
+            'stroke-linecap': 'round',
+            'stroke-linejoin': 'round',
+            opacity: 0.25,
+        }),
+        el('path', {
+            d: 'M25 20 L31 13 M38 19 L43 25',
+            fill: 'none',
+            stroke: HILITE,
+            'stroke-width': DETAIL_STROKE,
+            'stroke-linecap': 'round',
+            opacity: 0.78,
+        }),
+    ].join('')
+}
+
+function gasIcon(): string {
+    return [
+        el('circle', {
+            cx: 32,
+            cy: 32,
+            r: 23,
+            fill: categoryColors.gas,
+            stroke: OUTLINE,
+            'stroke-width': OUTER_STROKE,
+        }),
+        el('path', {
+            d: 'M17 33 C21 20 38 18 44 27 C51 38 37 51 25 43',
+            fill: 'none',
+            stroke: '#7a48d9',
+            'stroke-width': 7.5,
+            'stroke-linecap': 'round',
+        }),
+        el('path', {
+            d: 'M21 33 C25 25 36 25 39 31 C43 38 35 44 28 39',
+            fill: 'none',
+            stroke: '#f0d7ff',
+            'stroke-width': 5,
+            'stroke-linecap': 'round',
+        }),
+        el('circle', {
+            cx: 44,
+            cy: 18,
+            r: 5,
+            fill: '#f0d7ff',
+            stroke: OUTLINE,
+            'stroke-width': DETAIL_STROKE,
+        }),
+        el('circle', {
+            cx: 19,
+            cy: 47,
+            r: 4,
+            fill: '#f0d7ff',
+            stroke: OUTLINE,
+            'stroke-width': DETAIL_STROKE,
+        }),
+    ].join('')
+}
+
+function regolithIcon(): string {
+    return [
+        el('path', {
+            d: 'M16 14 H45 L54 25 V46 L43 55 H17 L9 43 V24 Z',
+            fill: categoryColors.regolith,
+            stroke: OUTLINE,
+            'stroke-width': OUTER_STROKE,
+            'stroke-linejoin': 'round',
+        }),
+        el('path', {d: 'M16 14 H45 L54 25 L34 28 Z', fill: '#dec59a'}),
+        el('path', {d: 'M9 43 L34 28 L43 55 H17 Z', fill: '#9e7c55', opacity: 0.78}),
+        el('path', {
+            d: 'M16 14 L34 28 L54 25 M34 28 L43 55 M34 28 L9 43',
+            fill: 'none',
+            stroke: OUTLINE,
+            'stroke-width': 1.5,
+            'stroke-linecap': 'round',
+            'stroke-linejoin': 'round',
+            opacity: 0.25,
+        }),
+        el('circle', {cx: 25, cy: 28, r: 4, fill: '#806248', stroke: OUTLINE, 'stroke-width': 1.5}),
+        el('circle', {cx: 42, cy: 40, r: 5, fill: '#8b6a4d', stroke: OUTLINE, 'stroke-width': 1.5}),
+        el('circle', {
+            cx: 22,
+            cy: 44,
+            r: 3,
+            fill: '#e7d0a9',
+            stroke: OUTLINE,
+            'stroke-width': 1.25,
+        }),
+        el('path', {
+            d: 'M35 18 L45 23',
+            fill: 'none',
+            stroke: '#f0dbb7',
+            'stroke-width': DETAIL_STROKE,
+            'stroke-linecap': 'round',
+            opacity: 0.72,
+        }),
+    ].join('')
+}
+
+function biomassIcon(): string {
+    return [
+        el('path', {
+            d: 'M32 7 C37 14 42 17 50 16 C50 24 54 29 57 35 C51 39 48 44 47 52 C39 50 36 55 31 59 C27 52 21 50 13 53 C14 45 10 40 7 34 C13 29 14 23 12 16 C21 18 26 14 32 7 Z',
+            fill: categoryColors.biomass,
+            stroke: OUTLINE,
+            'stroke-width': OUTER_STROKE,
+            'stroke-linejoin': 'round',
+        }),
+        el('circle', {cx: 32, cy: 32, r: 13, fill: '#73ad49', stroke: OUTLINE, 'stroke-width': 2}),
+        el('circle', {cx: 27, cy: 28, r: 5, fill: '#a8db6f', stroke: OUTLINE, 'stroke-width': 1.5}),
+        el('circle', {cx: 38, cy: 34, r: 5, fill: '#2f6f35', stroke: OUTLINE, 'stroke-width': 1.5}),
+        el('circle', {cx: 30, cy: 41, r: 4, fill: '#89c85a', stroke: OUTLINE, 'stroke-width': 1.5}),
+        el('circle', {
+            cx: 40,
+            cy: 24,
+            r: 3,
+            fill: '#c9ef8a',
+            stroke: OUTLINE,
+            'stroke-width': 1.25,
+        }),
+    ].join('')
+}
+
+const iconBodies: Record<ResourceCategory, string> = {
+    ore: oreIcon(),
+    crystal: crystalIcon(),
+    gas: gasIcon(),
+    regolith: regolithIcon(),
+    biomass: biomassIcon(),
+}
+
+export function resourceIconBody(category: ResourceCategory): string {
+    return iconBodies[category]
+}
+
+export function resourceIcon(category: ResourceCategory, opts: ResourceIconInlineOpts): string {
+    const scale = opts.size / 64
+    return el(
+        'g',
+        {transform: `translate(${opts.x} ${opts.y}) scale(${scale})`, 'data-resource': category},
+        resourceIconBody(category)
+    )
+}
+
+export function resourceIconSvg(
+    category: ResourceCategory,
+    opts: ResourceIconSvgOpts = {}
+): string {
+    const size = opts.size ?? 64
+    const title = opts.title ?? `${CATEGORY_LABELS[category]} resource icon`
+    const children = `<title>${escapeXml(title)}</title>${resourceIconBody(category)}`
+    return el(
+        'svg',
+        {
+            xmlns: 'http://www.w3.org/2000/svg',
+            width: size,
+            height: size,
+            viewBox: '0 0 64 64',
+            role: 'img',
+            class: opts.className,
+            'aria-label': title,
+        },
+        children
+    )
+}

package/src/templates/item-cell.ts

@@ -1,8 +1,8 @@
 import type {ResolvedItem} from '@shipload/sdk'
-import {tierColors, categoryColors, categoryIconShapes} from '@shipload/sdk'
+import {tierColors} from '@shipload/sdk'
 import {el} from '../primitives/svg.ts'
 import {text} from '../primitives/text.ts'
-import {categoryIconPath} from '../primitives/category-icon.ts'
+import {resourceIcon} from '../primitives/resource-icon.ts'
 import {tokens} from '../tokens/index.ts'
 
 export interface ItemCellProps {
@@ -48,16 +48,11 @@ function cellInner(props: ItemCellProps): string {
             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,
+        const iconSize = Math.round(size * 0.66)
+        content = resourceIcon(props.resolved.category, {
+            x: (size - iconSize) / 2,
+            y: Math.round(size * 0.12),
+            size: iconSize,
         })
     } else if (props.resolved.icon) {
         content = text({

package/src/templates/resource.ts

@@ -2,12 +2,11 @@ import type {ResolvedItem} from '@shipload/sdk'
 import {getStatDefinitions, categoryColors, formatLocation} from '@shipload/sdk'
 import type {CargoItem} from '../payload/codec.ts'
 import {panel} from '../primitives/panel.ts'
-import {iconHex} from '../primitives/icon-hex.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,
     metaRowBlock,
@@ -96,12 +95,9 @@ export function renderResource(
         tone: identity,
     })
 
-    const icon = iconHex({
-        x: pad,
-        y: pad + ICON_Y,
-        color: identity,
-        code: shortCode(resolved.itemId),
-    })
+    const icon = resolved.category
+        ? resourceIcon(resolved.category, {x: pad, y: pad + ICON_Y - 2, size: 28})
+        : ''
 
     const name = titleText(pad + 34, pad + 22, resolved)
 

package/src/tokens/colors.ts

@@ -1,4 +1,4 @@
-import {tierColors} from '@shipload/sdk'
+import {categoryColors, tierColors} from '@shipload/sdk'
 
 export const colors = {
     surface: {
@@ -18,13 +18,7 @@ export const colors = {
         teal: '#2fd6d1',
         cyan: '#6cb9ff',
     },
-    category: {
-        ore: '#C26D3F',
-        crystal: '#4ADBFF',
-        gas: '#B8E4A0',
-        regolith: '#C4A57B',
-        biomass: '#5A8B3E',
-    },
+    category: categoryColors,
     tier: tierColors,
     accent: {
         component: '#7E93C4',

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