anentrypoint-design 0.0.169 → 0.0.170

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.169",
+  "version": "0.0.170",
   "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",
@@ -17,6 +17,8 @@
     },
     "./kits/spoint/loading-screen.js": "./src/kits/spoint/loading-screen.js",
     "./kits/spoint/loading-screen.css": "./src/kits/spoint/loading-screen.css",
+    "./kits/spoint/game-hud.js": "./src/kits/spoint/game-hud.js",
+    "./kits/spoint/game-hud.css": "./src/kits/spoint/game-hud.css",
     "./kits/os": {
       "import": "./src/kits/os/index.js",
       "default": "./src/kits/os/index.js"

package/src/index.js

@@ -76,6 +76,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';
 
 // Re-export freddie helpers so consumers can `import { FREDDIE_PAGES } from
 // 'anentrypoint-design'` directly.

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

@@ -0,0 +1,59 @@
+/* Game-HUD kit styles. Scoped under .ds-247420 at build time.
+   Colors from semantic tokens (no raw literals) per the token-lint gate. */
+.sp-hud { pointer-events: none; font-family: var(--ff-mono); }
+.sp-hud-crosshair {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 24px;
+  color: var(--fg);
+  text-shadow: 0 0 2px var(--bg);
+}
+.sp-hud-ammo {
+  position: fixed;
+  bottom: 50px;
+  right: 20px;
+  font-size: 24px;
+  font-weight: bold;
+  color: var(--fg);
+  text-shadow: 0 0 4px var(--bg);
+}
+.sp-hud-ammo-reloading { color: var(--warn); }
+.sp-hud-health {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+  height: 20px;
+  background: var(--bg-3);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.sp-hud-health-fill {
+  height: 100%;
+  transition: width var(--dur-snap) var(--ease);
+}
+.sp-hud-hp-high { background: var(--success); }
+.sp-hud-hp-mid { background: var(--warn); }
+.sp-hud-hp-low { background: var(--danger); }
+.sp-hud-health-num {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  color: var(--fg);
+  font-size: 12px;
+  line-height: 20px;
+}
+.sp-hud-boost {
+  position: fixed;
+  top: 80px;
+  right: 20px;
+  padding: 8px 16px;
+  background: var(--accent);
+  color: var(--accent-fg);
+  font-weight: bold;
+  border-radius: 6px;
+  font-size: 14px;
+}

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

@@ -0,0 +1,32 @@
+// Game-HUD paint surface for the spoint TPS client (webjsx vnode tree).
+// renderGameHud(h, { hp, ammo, magazine, reloading, reloadProgress, boostSec })
+// -> 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.
+
+export function renderGameHud(h, state = {}) {
+  const {
+    hp = 100,
+    ammo = 0,
+    magazine = 30,
+    reloading = false,
+    reloadProgress = 0,
+    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
+  )
+}

package/src/kits/spoint/index.js

@@ -4,5 +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 const themeUrl = new URL('./loading-screen.css', import.meta.url).href;
+export const gameHudCssUrl = new URL('./game-hud.css', import.meta.url).href;