anentrypoint-design 0.0.171 → 0.0.172

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.171",
+  "version": "0.0.172",
   "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",
@@ -19,6 +19,8 @@
     "./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/spoint/host-join-lobby.js": "./src/kits/spoint/host-join-lobby.js",
+    "./kits/spoint/host-join-lobby.css": "./src/kits/spoint/host-join-lobby.css",
     "./kits/os": {
       "import": "./src/kits/os/index.js",
       "default": "./src/kits/os/index.js"

package/src/index.js

@@ -77,6 +77,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 { renderHostJoinLobby } from './kits/spoint/host-join-lobby.js';
 
 // Re-export freddie helpers so consumers can `import { FREDDIE_PAGES } from
 // 'anentrypoint-design'` directly.

package/src/kits/spoint/host-join-lobby.css

@@ -0,0 +1,89 @@
+/* Host/join lobby kit styles. Scoped under .ds-247420 at build time.
+   Token-only colors (no raw literals) per the token-lint gate. */
+.sp-lobby {
+  position: fixed;
+  inset: 0;
+  z-index: 9500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--bg) 70%, transparent);
+  font-family: var(--ff-mono);
+}
+.sp-lobby-card {
+  position: relative;
+  width: min(360px, 88vw);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  background: var(--bg-2);
+  border: 1px solid var(--bw-rule, var(--rule));
+  border-radius: var(--r-2, 10px);
+  color: var(--fg);
+}
+.sp-lobby-title {
+  margin: 0;
+  font-family: var(--ff-display);
+  font-size: var(--fs-h3);
+}
+.sp-lobby-sub {
+  margin: 0;
+  color: var(--fg-3);
+  font-size: var(--fs-small, 12px);
+}
+.sp-lobby-btn {
+  appearance: none;
+  border: 1px solid var(--bw-rule, var(--rule));
+  background: var(--bg-3);
+  color: var(--fg);
+  font-family: var(--ff-mono);
+  font-size: var(--fs-body);
+  padding: 10px 14px;
+  border-radius: var(--r-1, 6px);
+  cursor: pointer;
+}
+.sp-lobby-btn:hover { background: var(--bg-2); }
+.sp-lobby-btn:disabled { opacity: 0.6; cursor: default; }
+.sp-lobby-btn-primary {
+  background: var(--accent);
+  color: var(--accent-fg);
+  border-color: var(--accent);
+}
+.sp-lobby-join { display: flex; gap: 8px; }
+.sp-lobby-input {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--bw-rule, var(--rule));
+  border-radius: var(--r-1, 6px);
+  padding: 8px 10px;
+  font: var(--fs-body) var(--ff-mono);
+  outline: none;
+}
+.sp-lobby-input:focus { border-color: var(--accent); }
+.sp-lobby-link { font-size: var(--fs-small, 11px); }
+.sp-lobby-code {
+  font-family: var(--ff-display);
+  font-size: var(--fs-h2);
+  letter-spacing: 0.12em;
+  text-align: center;
+  color: var(--accent);
+  padding: 8px;
+  background: var(--bg);
+  border-radius: var(--r-1, 6px);
+}
+.sp-lobby-err { min-height: 16px; color: var(--danger); font-size: var(--fs-small, 11px); }
+.sp-lobby-close {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  appearance: none;
+  background: none;
+  border: none;
+  color: var(--fg-3);
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+}

package/src/kits/spoint/host-join-lobby.js

@@ -0,0 +1,81 @@
+// Host/join lobby paint surface for the spoint multiplayer setup.
+// renderHostJoinLobby({ onHost, onJoin, onClose }) -> { node, showHosting,
+// showError, dispose }. The consumer owns transport/navigation; this module
+// owns layout + classes. Two actions: Host (start a room, then showHosting
+// surfaces the code + copyable join link) and Join (enter a code or paste a
+// join link). onHost() -> Promise|void; onJoin(rawCodeOrLink) -> void.
+
+export function renderHostJoinLobby(opts = {}) {
+  const { onHost, onJoin, onClose } = opts
+
+  const node = document.createElement('div')
+  node.className = 'sp-lobby ds-247420'
+  node.dataset.component = 'host-join-lobby'
+
+  const card = document.createElement('div')
+  card.className = 'sp-lobby-card'
+  node.appendChild(card)
+
+  const mk = (tag, cls, text) => { const el = document.createElement(tag); if (cls) el.className = cls; if (text != null) el.textContent = text; return el }
+
+  function _idle() {
+    card.replaceChildren()
+    card.append(
+      mk('h2', 'sp-lobby-title', 'Multiplayer'),
+      mk('p', 'sp-lobby-sub', 'Host a match others can join, or join with a code.')
+    )
+    const hostBtn = mk('button', 'sp-lobby-btn sp-lobby-btn-primary', 'Host a Game')
+    hostBtn.addEventListener('click', () => { hostBtn.disabled = true; hostBtn.textContent = 'Starting...'; onHost?.() })
+    card.appendChild(hostBtn)
+
+    const joinRow = mk('div', 'sp-lobby-join')
+    const input = mk('input', 'sp-lobby-input')
+    input.type = 'text'
+    input.placeholder = 'Enter room code or link'
+    input.autocapitalize = 'characters'
+    const joinBtn = mk('button', 'sp-lobby-btn', 'Join')
+    const submit = () => { const v = (input.value || '').trim(); if (!v) { showError('Enter a code'); return } onJoin?.(v) }
+    joinBtn.addEventListener('click', submit)
+    input.addEventListener('keydown', e => { if (e.key === 'Enter') submit() })
+    joinRow.append(input, joinBtn)
+    card.appendChild(joinRow)
+
+    const err = mk('div', 'sp-lobby-err'); err.id = 'sp-lobby-err'
+    card.appendChild(err)
+
+    if (onClose) {
+      const close = mk('button', 'sp-lobby-close', 'x')
+      close.addEventListener('click', () => onClose())
+      card.appendChild(close)
+    }
+  }
+
+  function showHosting(code, link) {
+    card.replaceChildren()
+    card.append(
+      mk('h2', 'sp-lobby-title', 'Hosting'),
+      mk('p', 'sp-lobby-sub', 'Share this so others can join:'),
+      mk('div', 'sp-lobby-code', code)
+    )
+    const linkField = mk('input', 'sp-lobby-input sp-lobby-link')
+    linkField.type = 'text'; linkField.readOnly = true; linkField.value = link
+    card.appendChild(linkField)
+    const copyBtn = mk('button', 'sp-lobby-btn sp-lobby-btn-primary', 'Copy Join Link')
+    copyBtn.addEventListener('click', async () => {
+      try { await navigator.clipboard.writeText(link) } catch (_) { linkField.select(); document.execCommand && document.execCommand('copy') }
+      copyBtn.textContent = 'Copied'
+      setTimeout(() => { copyBtn.textContent = 'Copy Join Link' }, 1600)
+    })
+    card.appendChild(copyBtn)
+    card.appendChild(mk('p', 'sp-lobby-sub', 'Waiting for players...'))
+  }
+
+  function showError(msg) {
+    const err = card.querySelector('#sp-lobby-err')
+    if (err) err.textContent = msg
+  }
+
+  _idle()
+
+  return { node, showHosting, showError, dispose: () => node.remove() }
+}

package/src/kits/spoint/index.js

@@ -5,6 +5,8 @@
 
 export { renderLoadingScreen } from './loading-screen.js';
 export { renderGameHud } from './game-hud.js';
+export { renderHostJoinLobby } from './host-join-lobby.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;
+export const lobbyCssUrl = new URL('./host-join-lobby.css', import.meta.url).href;