@shipload/item-renderer 1.0.0-next.27 → 1.0.0-next.28

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@shipload/item-renderer",
-    "version": "1.0.0-next.27",
+    "version": "1.0.0-next.28",
     "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.27",
+        "@shipload/sdk": "^1.0.0-next.28",
         "@wharfkit/antelope": "1.2.0"
     },
     "devDependencies": {

package/src/primitives/stat-bar.ts

@@ -1,6 +1,7 @@
 import {el} from './svg.ts'
 import {text} from './text.ts'
 import {tokens} from '../tokens/index.ts'
+import {statStars, STAR_BLOCK_WIDTH} from './stat-stars.ts'
 
 export interface StatBarProps {
     x: number
@@ -11,6 +12,7 @@ export interface StatBarProps {
     value: number | null // 0..1023, or null for ranges mode (no value text, no fill)
     color: string
     inverted?: boolean
+    stars?: number // 0..3 per-stat rating; only drawn in values mode
 }
 
 export function statBar({
@@ -22,6 +24,7 @@ export function statBar({
     value,
     color,
     inverted,
+    stars,
 }: StatBarProps): string {
     const h = tokens.spacing.statBarHeight
 
@@ -59,6 +62,8 @@ export function statBar({
         const displayFraction = inverted ? 1 - clamped / 1023 : clamped / 1023
         const filled = Math.floor(width * displayFraction)
 
+        const VALUE_COL_W = 34 // room for up to 4 mono digits at size 14, anchored end
+
         // value text = primary; identity color = bar + code + chrome
         labelOut += text({
             x: x + width,
@@ -71,6 +76,15 @@ export function statBar({
             anchor: 'end',
         })
 
+        // stars sit immediately left of the reserved value column
+        if (stars !== undefined) {
+            labelOut += statStars({
+                x: x + width - VALUE_COL_W - STAR_BLOCK_WIDTH,
+                y: y - 6,
+                n: stars,
+            })
+        }
+
         const bar = el('rect', {
             x,
             y,

package/src/primitives/stat-stars.ts

@@ -0,0 +1,36 @@
+import {el} from './svg.ts'
+
+// 24×24 path, identical to the webapp ItemStatRow star.
+const STAR_PATH =
+    'M12 2.2l2.95 5.98 6.6.96-4.77 4.65 1.13 6.57L12 17.23 6.09 20.36l1.13-6.57L2.45 9.14l6.6-.96z'
+
+export const STAR_SIZE = 9
+export const STAR_GAP = 1
+export const MAX_STARS = 3
+export const STAR_BLOCK_WIDTH = MAX_STARS * STAR_SIZE + (MAX_STARS - 1) * STAR_GAP
+
+const ON_COLOR = '#ffce5c'
+const EMPTY_COLOR = 'rgba(255,255,255,0.16)'
+const SCALE = STAR_SIZE / 24
+
+export interface StatStarsProps {
+    x: number // left edge of the star block
+    y: number // vertical center the stars should sit on (text baseline)
+    n: number
+}
+
+// Draws MAX_STARS glyphs left-to-right starting at x; the first `n` are filled.
+export function statStars({x, y, n}: StatStarsProps): string {
+    const filled = Math.max(0, Math.min(MAX_STARS, Math.floor(n)))
+    const top = y - STAR_SIZE + 1 // center the glyph on the text baseline
+    let out = ''
+    for (let i = 0; i < MAX_STARS; i++) {
+        const gx = x + i * (STAR_SIZE + STAR_GAP)
+        out += el('path', {
+            d: STAR_PATH,
+            transform: `translate(${gx} ${top}) scale(${SCALE})`,
+            fill: i < filled ? ON_COLOR : EMPTY_COLOR,
+        })
+    }
+    return out
+}

package/src/templates/resource.ts

@@ -1,5 +1,5 @@
 import type {ResolvedItem} from '@shipload/sdk'
-import {getStatDefinitions, categoryColors, formatLocation} 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 {resourceIcon} from '../primitives/resource-icon.ts'
@@ -112,6 +112,7 @@ export function renderResource(
                 value: row.value,
                 color: row.color,
                 inverted: row.inverted,
+                stars: row.value !== null ? starsForStat(row.value) : undefined,
             })
         )
         .join('')