anentrypoint-design 0.0.352 → 0.0.353

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.352",
+  "version": "0.0.353",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",
@@ -112,10 +112,10 @@
   },
   "devDependencies": {
     "axe-core": "^4.12.1",
-    "esbuild": "^0.28.0",
+    "esbuild": "^0.28.1",
     "playwright": "^1.61.1",
     "pngjs": "^7.0.0",
-    "postcss": "^8.5.12",
+    "postcss": "^8.5.19",
     "postcss-prefix-selector": "^2.1.1"
   }
 }

package/src/index.js

@@ -104,7 +104,7 @@ export const applyDiff = webjsx.applyDiff;
 
 // spoint kit paint surfaces (loading screen, HUD, editor chrome).
 export { renderLoadingScreen } from './kits/spoint/loading-screen.js';
-export { renderGameHud } from './kits/spoint/game-hud.js';
+export { renderGameHud, Crosshair, AmmoCounter, HealthBar, BoostIndicator } from './kits/spoint/game-hud.js';
 export { renderHostJoinLobby } from './kits/spoint/host-join-lobby.js';
 
 // Re-export freddie helpers so consumers can `import { FREDDIE_PAGES } from

package/src/kits/spoint/game-hud.js

@@ -3,6 +3,61 @@
 // -> a vnode the consumer mounts. Pure presentation; the app owns all state.
 // `h` is the consumer's createElement (webjsx) so the tree composes into the
 // app's existing render() return.
+//
+// Composed from four independent primitives below (Crosshair, AmmoCounter,
+// HealthBar, BoostIndicator) -- each takes the same `h` + a narrow slice of
+// props and returns its own vnode, so a consumer that wants a custom HUD
+// layout (e.g. reposition the ammo counter, drop the boost badge) can import
+// just the pieces it needs instead of the whole composed tree.
+
+/** Center-screen aim reticle. No props beyond `h`. */
+export function Crosshair(h) {
+  return h('div', { class: 'sp-hud-crosshair' }, '+')
+}
+
+/**
+ * Ammo readout — `ammo/magazine`, or a reload-progress label while reloading.
+ * @param {Object} [props]
+ * @param {number} [props.ammo=0]
+ * @param {number} [props.magazine=30]
+ * @param {boolean} [props.reloading=false]
+ * @param {number} [props.reloadProgress=0]
+ */
+export function AmmoCounter(h, props = {}) {
+  const { ammo = 0, magazine = 30, reloading = false, reloadProgress = 0 } = props
+  return h('div', { class: 'sp-hud-ammo' },
+    reloading
+      ? h('span', { class: 'sp-hud-ammo-reloading' }, `RELOADING ${reloadProgress}%`)
+      : h('span', null, `${ammo}/${magazine}`)
+  )
+}
+
+/**
+ * Bottom-center health bar with a threshold-colored fill and a numeric label.
+ * @param {Object} [props]
+ * @param {number} [props.hp=100]
+ */
+export function HealthBar(h, props = {}) {
+  const { hp = 100 } = props
+  const hpClass = hp > 60 ? 'sp-hud-hp-high' : hp > 30 ? 'sp-hud-hp-mid' : 'sp-hud-hp-low'
+  return h('div', { class: 'sp-hud-health' },
+    h('div', { class: `sp-hud-health-fill ${hpClass}`, style: `width:${hp}%` }),
+    h('span', { class: 'sp-hud-health-num' }, String(hp))
+  )
+}
+
+/**
+ * Top-right boost badge. Renders nothing while boostSec <= 0 (consumer can
+ * check this before calling too; kept internal so composition stays a
+ * one-liner in renderGameHud).
+ * @param {Object} [props]
+ * @param {number} [props.boostSec=0]
+ */
+export function BoostIndicator(h, props = {}) {
+  const { boostSec = 0 } = props
+  if (boostSec <= 0) return null
+  return h('div', { class: 'sp-hud-boost' }, `BOOSTED ${boostSec}s`)
+}
 
 export function renderGameHud(h, state = {}) {
   const {
@@ -14,19 +69,10 @@ export function renderGameHud(h, state = {}) {
     boostSec = 0,
   } = state
 
-  const hpClass = hp > 60 ? 'sp-hud-hp-high' : hp > 30 ? 'sp-hud-hp-mid' : 'sp-hud-hp-low'
-
   return h('div', { class: 'sp-hud' },
-    h('div', { class: 'sp-hud-crosshair' }, '+'),
-    h('div', { class: 'sp-hud-ammo' },
-      reloading
-        ? h('span', { class: 'sp-hud-ammo-reloading' }, `RELOADING ${reloadProgress}%`)
-        : h('span', null, `${ammo}/${magazine}`)
-    ),
-    h('div', { class: 'sp-hud-health' },
-      h('div', { class: `sp-hud-health-fill ${hpClass}`, style: `width:${hp}%` }),
-      h('span', { class: 'sp-hud-health-num' }, String(hp))
-    ),
-    boostSec > 0 ? h('div', { class: 'sp-hud-boost' }, `BOOSTED ${boostSec}s`) : null
+    Crosshair(h),
+    AmmoCounter(h, { ammo, magazine, reloading, reloadProgress }),
+    HealthBar(h, { hp }),
+    BoostIndicator(h, { boostSec })
   )
 }

package/src/kits/spoint/index.js

@@ -4,7 +4,7 @@
 // through the main bundle entry so spoint can import directly from unpkg.
 
 export { renderLoadingScreen } from './loading-screen.js';
-export { renderGameHud } from './game-hud.js';
+export { renderGameHud, Crosshair, AmmoCounter, HealthBar, BoostIndicator } from './game-hud.js';
 export { renderHostJoinLobby } from './host-join-lobby.js';
 
 export const themeUrl = new URL('./loading-screen.css', import.meta.url).href;