@shipload/item-renderer 0.2.3 → 1.0.0-beta1

package/src/templates/component.ts

@@ -1,144 +1,144 @@
-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";
-import { text } from "../primitives/text.ts";
-import { divider } from "../primitives/divider.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 } from "./_shared.ts";
+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'
+import {text} from '../primitives/text.ts'
+import {divider} from '../primitives/divider.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} from './_shared.ts'
 
 export interface RenderComponentOpts {
-  mode?: "values" | "ranges";
+    mode?: 'values' | 'ranges'
 }
 
 type StatRow = {
-  label: string;
-  abbreviation: string;
-  value: number | null;
-  color: string;
-  inverted?: boolean;
-};
+    label: string
+    abbreviation: string
+    value: number | null
+    color: string
+    inverted?: boolean
+}
 
 export function renderComponent(
-  item: CargoItem,
-  resolved: ResolvedItem,
-  opts?: RenderComponentOpts,
+    item: CargoItem,
+    resolved: ResolvedItem,
+    opts?: RenderComponentOpts
 ): string {
-  const mode = opts?.mode ?? "values";
-  const w = tokens.spacing.panelWidth;
-  const pad = tokens.spacing.panelPadding;
-  const innerW = w - pad * 2;
+    const mode = opts?.mode ?? 'values'
+    const w = tokens.spacing.panelWidth
+    const pad = tokens.spacing.panelPadding
+    const innerW = w - pad * 2
 
-  let rows: StatRow[];
-  if (mode === "values") {
-    rows = (resolved.stats ?? []).map((s) => ({
-      label: s.label,
-      abbreviation: s.abbreviation,
-      value: s.value,
-      color: s.color,
-      inverted: s.inverted,
-    }));
-  } else {
-    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[category],
-          inverted: def.inverted,
-        },
-      ];
-    });
-  }
+    let rows: StatRow[]
+    if (mode === 'values') {
+        rows = (resolved.stats ?? []).map((s) => ({
+            label: s.label,
+            abbreviation: s.abbreviation,
+            value: s.value,
+            color: s.color,
+            inverted: s.inverted,
+        }))
+    } else {
+        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[category],
+                    inverted: def.inverted,
+                },
+            ]
+        })
+    }
 
-  const headerH = 48;
-  const metaRowH = 28;
-  const statsH = rows.length * 26 + 8;
-  const height = headerH + metaRowH + 14 + statsH + pad;
+    const headerH = 48
+    const metaRowH = 28
+    const statsH = rows.length * 26 + 8
+    const height = headerH + metaRowH + 14 + statsH + pad
 
-  const chrome = panel({ width: w, height, borderColor: tierBorder(resolved.tier) });
+    const chrome = panel({width: w, height, borderColor: tierBorder(resolved.tier)})
 
-  const quantity = Number(BigInt(item.quantity.toString()));
-  const badge = quantityBadge({ x: w - pad, y: pad, quantity });
+    const quantity = Number(BigInt(item.quantity.toString()))
+    const badge = quantityBadge({x: w - pad, y: pad, quantity})
 
-  const icon = iconHex({
-    x: pad,
-    y: pad + 4,
-    color: tokens.colors.accent.component,
-    code: shortCode(resolved.itemId),
-  });
+    const icon = iconHex({
+        x: pad,
+        y: pad + 4,
+        color: tokens.colors.accent.component,
+        code: shortCode(resolved.itemId),
+    })
 
-  const name = text({
-    x: pad + 34,
-    y: pad + 22,
-    value: resolved.name,
-    size: tokens.typography.sizes.title,
-    weight: 700,
-    family: tokens.typography.display,
-  });
+    const name = text({
+        x: pad + 34,
+        y: pad + 22,
+        value: resolved.name,
+        size: tokens.typography.sizes.title,
+        weight: 700,
+        family: tokens.typography.display,
+    })
 
-  const subtitleText = text({
-    x: pad,
-    y: pad + headerH + 4,
-    value: "Type",
-    size: tokens.typography.sizes.body,
-    color: tokens.colors.text.secondary,
-  });
-  const subtitleValue = text({
-    x: w - pad,
-    y: pad + headerH + 4,
-    value: `COMPONENT · ${formatTier(resolved.tier)}`,
-    size: tokens.typography.sizes.body,
-    weight: 600,
-    anchor: "end",
-  });
-  const massLabel = text({
-    x: pad,
-    y: pad + headerH + metaRowH - 8,
-    value: "Mass",
-    size: tokens.typography.sizes.body,
-    color: tokens.colors.text.secondary,
-  });
-  const massValue = text({
-    x: w - pad,
-    y: pad + headerH + metaRowH - 8,
-    value: formatMass(resolved.mass),
-    size: tokens.typography.sizes.body,
-    weight: 600,
-    anchor: "end",
-  });
+    const subtitleText = text({
+        x: pad,
+        y: pad + headerH + 4,
+        value: 'Type',
+        size: tokens.typography.sizes.body,
+        color: tokens.colors.text.secondary,
+    })
+    const subtitleValue = text({
+        x: w - pad,
+        y: pad + headerH + 4,
+        value: `COMPONENT · ${formatTier(resolved.tier)}`,
+        size: tokens.typography.sizes.body,
+        weight: 600,
+        anchor: 'end',
+    })
+    const massLabel = text({
+        x: pad,
+        y: pad + headerH + metaRowH - 8,
+        value: 'Mass',
+        size: tokens.typography.sizes.body,
+        color: tokens.colors.text.secondary,
+    })
+    const massValue = text({
+        x: w - pad,
+        y: pad + headerH + metaRowH - 8,
+        value: formatMass(resolved.mass),
+        size: tokens.typography.sizes.body,
+        weight: 600,
+        anchor: 'end',
+    })
 
-  const sepY = pad + headerH + metaRowH + 6;
-  const sep = divider({ x: pad, y: sepY, width: innerW });
+    const sepY = pad + headerH + metaRowH + 6
+    const sep = divider({x: pad, y: sepY, width: innerW})
 
-  const statsSvg = rows
-    .map((row, i) =>
-      statBar({
-        x: pad,
-        y: sepY + 18 + i * 26,
-        width: innerW,
-        label: row.label,
-        abbreviation: row.abbreviation,
-        value: row.value,
-        color: row.color,
-        inverted: row.inverted,
-      }),
-    )
-    .join("");
+    const statsSvg = rows
+        .map((row, i) =>
+            statBar({
+                x: pad,
+                y: sepY + 18 + i * 26,
+                width: innerW,
+                label: row.label,
+                abbreviation: row.abbreviation,
+                value: row.value,
+                color: row.color,
+                inverted: row.inverted,
+            })
+        )
+        .join('')
 
-  const inner = `${chrome}${icon}${name}${badge}${subtitleText}${subtitleValue}${massLabel}${massValue}${sep}${statsSvg}`;
+    const inner = `${chrome}${icon}${name}${badge}${subtitleText}${subtitleValue}${massLabel}${massValue}${sep}${statsSvg}`
 
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`;
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`
 }

package/src/templates/index.ts

@@ -1,30 +1,30 @@
-import type { ResolvedItem } from "@shipload/sdk";
-import type { CargoItem } from "../payload/codec.ts";
-import { RenderError } from "../errors.ts";
-import { renderResource } from "./resource.ts";
-import { renderPackedEntity } from "./packed-entity.ts";
-import { renderComponent } from "./component.ts";
-import { renderModule } from "./module.ts";
+import type {ResolvedItem} from '@shipload/sdk'
+import type {CargoItem} from '../payload/codec.ts'
+import {RenderError} from '../errors.ts'
+import {renderResource} from './resource.ts'
+import {renderPackedEntity} from './packed-entity.ts'
+import {renderComponent} from './component.ts'
+import {renderModule} from './module.ts'
 
 export interface RenderByTypeOpts {
-  mode?: "values" | "ranges";
+    mode?: 'values' | 'ranges'
 }
 
 export function renderByType(
-  item: CargoItem,
-  resolved: ResolvedItem,
-  opts?: RenderByTypeOpts,
+    item: CargoItem,
+    resolved: ResolvedItem,
+    opts?: RenderByTypeOpts
 ): string {
-  switch (resolved.itemType) {
-    case "resource":
-      return renderResource(item, resolved, opts);
-    case "entity":
-      return renderPackedEntity(item, resolved);
-    case "component":
-      return renderComponent(item, resolved, opts);
-    case "module":
-      return renderModule(item, resolved, opts);
-    default:
-      throw new RenderError(`unknown itemType '${String(resolved.itemType)}'`);
-  }
+    switch (resolved.itemType) {
+        case 'resource':
+            return renderResource(item, resolved, opts)
+        case 'entity':
+            return renderPackedEntity(item, resolved)
+        case 'component':
+            return renderComponent(item, resolved, opts)
+        case 'module':
+            return renderModule(item, resolved, opts)
+        default:
+            throw new RenderError(`unknown itemType '${String(resolved.itemType)}'`)
+    }
 }

package/src/templates/item-cell.ts

@@ -1,103 +1,103 @@
-import type { ResolvedItem } 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";
+import type {ResolvedItem} 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'
 
 export interface ItemCellProps {
-  resolved: ResolvedItem;
-  quantity?: number;
-  size?: number;
+    resolved: ResolvedItem
+    quantity?: number
+    size?: number
 }
 
 export interface ItemCellGroupProps extends ItemCellProps {
-  x: number;
-  y: number;
+    x: number
+    y: number
 }
 
 function cellInner(props: ItemCellProps): string {
-  const size = props.size ?? 48;
-  const height = Math.round(size * 1.25);
-  const r = Math.max(4, Math.round(size * 0.12));
-  const cx = size / 2;
+    const size = props.size ?? 48
+    const height = Math.round(size * 1.25)
+    const r = Math.max(4, Math.round(size * 0.12))
+    const cx = size / 2
 
-  const border = el("rect", {
-    x: 0.5,
-    y: 0.5,
-    width: size - 1,
-    height: height - 1,
-    rx: r,
-    ry: r,
-    fill: tokens.colors.surface.panel,
-    stroke: tierColors[props.resolved.tier] ?? tokens.colors.surface.panelBorder,
-    "stroke-width": 1.5,
-  });
+    const border = el('rect', {
+        x: 0.5,
+        y: 0.5,
+        width: size - 1,
+        height: height - 1,
+        rx: r,
+        ry: r,
+        fill: tokens.colors.surface.panel,
+        stroke: tierColors[props.resolved.tier] ?? tokens.colors.surface.panelBorder,
+        'stroke-width': 1.5,
+    })
 
-  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,
-    });
-  } 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,
-    });
-  } else if (props.resolved.icon) {
-    content = text({
-      x: cx,
-      y: size * 0.4,
-      value: props.resolved.icon,
-      size: Math.round(size * 0.44),
-      weight: 400,
-      anchor: "middle",
-      dominantBaseline: "central",
-      color: tokens.colors.text.primary,
-    });
-  }
+    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,
+        })
+    } 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,
+        })
+    } else if (props.resolved.icon) {
+        content = text({
+            x: cx,
+            y: size * 0.4,
+            value: props.resolved.icon,
+            size: Math.round(size * 0.44),
+            weight: 400,
+            anchor: 'middle',
+            dominantBaseline: 'central',
+            color: tokens.colors.text.primary,
+        })
+    }
 
-  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,
-    });
-  }
+    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,
+        })
+    }
 
-  return border + content + quantityText;
+    return border + content + quantityText
 }
 
 export function itemCellGroup(props: ItemCellGroupProps): string {
-  return `<g transform="translate(${props.x}, ${props.y})">${cellInner(props)}</g>`;
+    return `<g transform="translate(${props.x}, ${props.y})">${cellInner(props)}</g>`
 }
 
 export function renderItemCell(props: ItemCellProps): string {
-  const size = props.size ?? 48;
-  const height = Math.round(size * 1.25);
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${height}" viewBox="0 0 ${size} ${height}">${cellInner(props)}</svg>`;
+    const size = props.size ?? 48
+    const height = Math.round(size * 1.25)
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${height}" viewBox="0 0 ${size} ${height}">${cellInner(props)}</svg>`
 }