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

package/package.json

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

package/src/index.ts

@@ -42,7 +42,7 @@ export {
 export type {ResourceIconInlineOpts, ResourceIconSvgOpts} from './primitives/resource-icon.ts'
 
 // Item cell templates
-export {renderItemCell, itemCellGroup} from './templates/item-cell.ts'
+export {renderItemCell, itemCellGroup, abbreviateQuantity} from './templates/item-cell.ts'
 export type {ItemCellProps, ItemCellGroupProps} from './templates/item-cell.ts'
 
 // Social card template (1200x630 OG image)

package/src/templates/item-cell.ts

@@ -9,6 +9,24 @@ export interface ItemCellProps {
     resolved: ResolvedItem
     quantity?: number
     size?: number
+    quantityColor?: string
+    quantityPrefix?: string
+}
+
+export function abbreviateQuantity(n: number): string {
+    const abs = Math.abs(n)
+    if (abs < 1000) return String(n)
+    const units = [
+        {v: 1e9, s: 'b'},
+        {v: 1e6, s: 'm'},
+        {v: 1e3, s: 'k'},
+    ]
+    for (const u of units) {
+        if (abs >= u.v) {
+            return (n / u.v).toFixed(1).replace(/\.0$/, '') + u.s
+        }
+    }
+    return String(n)
 }
 
 export interface ItemCellGroupProps extends ItemCellProps {
@@ -34,32 +52,47 @@ function cellInner(props: ItemCellProps): string {
         'stroke-width': 1.5,
     })
 
+    const qty = props.quantity ?? 0
+    const showQuantity = props.quantityPrefix ? qty >= 1 : qty > 1
+
     let content = ''
     if (props.resolved.abbreviation) {
-        const iconCy = size * 0.45
-        content = text({
-            x: cx,
-            y: iconCy,
-            value: props.resolved.abbreviation,
-            size: Math.round(size * 0.28),
-            weight: 700,
-            anchor: 'middle',
-            color: tokens.colors.text.primary,
-            family: tokens.typography.display,
-        })
+        content = showQuantity
+            ? text({
+                  x: cx,
+                  y: size * 0.45,
+                  value: props.resolved.abbreviation,
+                  size: Math.round(size * 0.28),
+                  weight: 700,
+                  anchor: 'middle',
+                  color: tokens.colors.text.primary,
+                  family: tokens.typography.display,
+              })
+            : text({
+                  x: cx,
+                  y: height / 2,
+                  value: props.resolved.abbreviation,
+                  size: Math.round(size * 0.36),
+                  weight: 700,
+                  anchor: 'middle',
+                  dominantBaseline: 'central',
+                  color: tokens.colors.text.primary,
+                  family: tokens.typography.display,
+              })
     } else if (props.resolved.category) {
-        const iconSize = Math.round(size * 0.66)
+        const iconSize = Math.round(size * (showQuantity ? 0.66 : 0.84))
+        const iconY = showQuantity ? Math.round(size * 0.12) : Math.round(height / 2 - iconSize / 2)
         content = resourceIcon(props.resolved.category, {
             x: (size - iconSize) / 2,
-            y: Math.round(size * 0.12),
+            y: iconY,
             size: iconSize,
         })
     } else if (props.resolved.icon) {
         content = text({
             x: cx,
-            y: size * 0.4,
+            y: showQuantity ? size * 0.4 : height / 2,
             value: props.resolved.icon,
-            size: Math.round(size * 0.44),
+            size: Math.round(size * (showQuantity ? 0.44 : 0.56)),
             weight: 400,
             anchor: 'middle',
             dominantBaseline: 'central',
@@ -67,21 +100,41 @@ function cellInner(props: ItemCellProps): string {
         })
     }
 
-    const qty = props.quantity ?? 0
     let quantityText = ''
-    if (qty > 1) {
-        const qtyFontSize = Math.max(9, Math.round(size * 0.22))
-        const qtyPad = Math.max(3, Math.round(size * 0.12))
-        quantityText = text({
-            x: size - qtyPad,
-            y: height - qtyPad,
-            value: String(qty),
-            size: qtyFontSize,
-            weight: 700,
-            anchor: 'end',
-            color: tokens.colors.text.primary,
-            family: tokens.typography.display,
+    if (showQuantity) {
+        const label = (props.quantityPrefix ?? '') + abbreviateQuantity(qty)
+        const fontSize = Math.max(8, Math.round(size * 0.2))
+        const charW = fontSize * 0.6
+        const padX = Math.max(2, Math.round(fontSize * 0.34))
+        const padY = Math.max(1, Math.round(fontSize * 0.18))
+        const margin = Math.max(2, Math.round(size * 0.06))
+        const plateW = Math.round(label.length * charW) + padX * 2
+        const plateH = fontSize + padY * 2
+        const plateRight = size - margin
+        const plateBottom = height - margin
+        const plate = el('rect', {
+            x: plateRight - plateW,
+            y: plateBottom - plateH,
+            width: plateW,
+            height: plateH,
+            rx: Math.round(plateH / 2),
+            ry: Math.round(plateH / 2),
+            fill: '#050c24',
+            'fill-opacity': 0.82,
         })
+        quantityText =
+            plate +
+            text({
+                x: plateRight - padX,
+                y: plateBottom - plateH / 2,
+                value: label,
+                size: fontSize,
+                weight: 700,
+                anchor: 'end',
+                dominantBaseline: 'central',
+                color: props.quantityColor ?? tokens.colors.text.primary,
+                family: tokens.typography.mono,
+            })
     }
 
     return border + content + quantityText