@shipload/item-renderer 1.0.0-next.3 → 1.0.0-next.30

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

@@ -49,7 +49,7 @@ export function cargoShipT1Packed(opts?: {
     })
 }
 
-export const ITEM_HULL_PLATES = 10001
+export const ITEM_PLATE = 10001
 
 export const FIXTURES = {
     oreT1: cargoOreT1('0x123456789ABCDEF'),
@@ -61,8 +61,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: [],

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