dignity.js 0.5.2 → 0.5.4

package/docs/chess/src/components/JoinGate.jsx

@@ -1,68 +0,0 @@
-import React, { useState } from 'react';
-
-const ROLE_COPY = {
-  host: {
-    title: 'Start game',
-    action: 'Start as White',
-    hint: 'You will play White. Choose your name before connecting to the room.'
-  },
-  join: {
-    title: 'Join as opponent',
-    action: 'Join as Black',
-    hint: 'Choose your name now — it cannot be changed after connecting without reconnecting.'
-  },
-  watch: {
-    title: 'Watch game',
-    action: 'Enter as spectator',
-    hint: 'Pick a display name for the spectator list.'
-  },
-  resume: {
-    title: 'Resume game',
-    action: 'Reconnect',
-    hint: 'Use the same name you played with before, if possible.'
-  }
-};
-
-export default function JoinGate({ route, defaultNickname, onConfirm, onBack }) {
-  const [name, setName] = useState(defaultNickname);
-  const copy = ROLE_COPY[route.role] || ROLE_COPY.resume;
-
-  function handleSubmit(event) {
-    event.preventDefault();
-    const trimmed = name.trim();
-    if (!trimmed) {
-      return;
-    }
-    onConfirm(trimmed);
-  }
-
-  return (
-    <section className="join-gate">
-      <div className="join-gate__card panel">
-        <p className="eyebrow">Game {route.gameId}</p>
-        <h2>{copy.title}</h2>
-        <p>{copy.hint}</p>
-
-        <form onSubmit={handleSubmit}>
-          <label className="join-gate__field">
-            Your nickname
-            <input
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-              placeholder="Nickname"
-              autoFocus
-              maxLength={32}
-            />
-          </label>
-
-          <div className="join-gate__actions">
-            <button type="button" className="ghost" onClick={onBack}>← Back</button>
-            <button type="submit" className="primary" disabled={!name.trim()}>
-              {copy.action}
-            </button>
-          </div>
-        </form>
-      </div>
-    </section>
-  );
-}

package/docs/chess/src/components/LinkPanel.jsx

@@ -1,132 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { buildLinks } from '../lib/links';
-
-export default function LinkPanel({
-  gameId,
-  roomKey,
-  hostPeer,
-  game,
-  joinToken: joinTokenProp,
-  watchToken: watchTokenProp,
-  resumeToken: resumeTokenProp,
-  onRegenerateResume,
-  prominent = false,
-  audience = 'host'
-}) {
-  const joinToken = game?.data?.joinToken || joinTokenProp;
-  const watchToken = game?.data?.watchToken || watchTokenProp;
-  const resumeToken = game?.data?.resumeToken || resumeTokenProp;
-  const [copied, setCopied] = useState('');
-  const [collapsed, setCollapsed] = useState(false);
-  const isPlayer = audience === 'player';
-
-  const links = buildLinks({
-    gameId,
-    roomKey,
-    hostPeer,
-    joinToken,
-    watchToken,
-    resumeToken
-  });
-
-  const joinExpired = Boolean(game?.data?.joinTokenUsed);
-  const ready = isPlayer
-    ? Boolean(hostPeer && watchToken && resumeToken)
-    : Boolean(hostPeer && joinToken && watchToken && resumeToken);
-
-  useEffect(() => {
-    if (prominent && (joinExpired || isPlayer)) {
-      setCollapsed(true);
-    }
-  }, [prominent, joinExpired, isPlayer]);
-
-  async function copyLink(label, url) {
-    if (!url) {
-      return;
-    }
-    await navigator.clipboard.writeText(url);
-    setCopied(label);
-    setTimeout(() => setCopied(''), 2000);
-  }
-
-  const panelClass = [
-    'link-panel',
-    prominent ? 'link-panel--prominent' : '',
-    collapsed ? 'link-panel--collapsed' : ''
-  ].filter(Boolean).join(' ');
-
-  const summary = !ready
-    ? (hostPeer ? 'Preparing share links…' : 'Waiting for host peer…')
-    : isPlayer
-      ? 'Spectator and resume links ready for your friends.'
-      : joinExpired
-        ? 'Opponent joined — spectator and resume links available.'
-        : 'Opponent, spectator, and resume links ready.';
-
-  return (
-    <section className={panelClass}>
-      <div className="link-panel__head">
-        <h3>Share links</h3>
-        <button
-          type="button"
-          className="ghost link-panel__toggle"
-          onClick={() => setCollapsed((value) => !value)}
-          aria-expanded={!collapsed}
-        >
-          {collapsed ? 'Show' : 'Hide'}
-        </button>
-      </div>
-
-      {collapsed ? (
-        <p className="link-panel__summary">{summary}</p>
-      ) : null}
-
-      <div className="link-panel__body">
-        {!ready ? (
-          <p className="link-panel__hint">
-            {hostPeer
-              ? 'Preparing share links…'
-              : 'Connecting to host… links appear once the game syncs.'}
-          </p>
-        ) : (
-          <>
-            <p className="link-panel__hint">
-              {isPlayer
-                ? 'Invite friends to watch live with the spectator link.'
-                : 'Send the opponent link to your friend. Spectators can watch without playing. The opponent link expires after the first join.'}
-            </p>
-
-            {!isPlayer ? (
-              <div className="link-row">
-                <label>Opponent {joinExpired ? '(expired)' : ''}</label>
-                <input readOnly value={links.join} onFocus={(e) => e.target.select()} />
-                <button type="button" disabled={joinExpired} onClick={() => copyLink('join', links.join)}>
-                  {copied === 'join' ? 'Copied' : 'Copy'}
-                </button>
-              </div>
-            ) : null}
-
-            <div className="link-row">
-              <label>Spectators</label>
-              <input readOnly value={links.watch} onFocus={(e) => e.target.select()} />
-              <button type="button" onClick={() => copyLink('watch', links.watch)}>
-                {copied === 'watch' ? 'Copied' : 'Copy'}
-              </button>
-            </div>
-
-            <div className="link-row">
-              <label>Resume game</label>
-              <input readOnly value={links.resume} onFocus={(e) => e.target.select()} />
-              <button type="button" onClick={() => copyLink('resume', links.resume)}>
-                {copied === 'resume' ? 'Copied' : 'Copy'}
-              </button>
-              {!isPlayer && onRegenerateResume ? (
-                <button type="button" className="secondary" onClick={onRegenerateResume}>New resume link</button>
-              ) : null}
-            </div>
-          </>
-        )}
-      </div>
-    </section>
-  );
-}

package/docs/chess/src/components/Lobby.jsx

@@ -1,154 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { generateGameId } from '../lib/links.js';
-import {
-  formatGameStatus,
-  formatRoleLabel,
-  listLocalGames,
-  sessionResumeHash
-} from '../lib/localGames.js';
-
-function GameList({ title, games, emptyText, onOpen }) {
-  if (!games.length) {
-    return (
-      <section className="lobby__games panel">
-        <h2>{title}</h2>
-        <p className="muted">{emptyText}</p>
-      </section>
-    );
-  }
-
-  return (
-    <section className="lobby__games panel">
-      <h2>{title}</h2>
-      <ul className="game-list">
-        {games.map((game) => (
-          <li key={game.gameId} className="game-list__item">
-            <div className="game-list__meta">
-              <strong>{game.gameId}</strong>
-              <span className="muted">{formatRoleLabel(game)}</span>
-              <span>{formatGameStatus(game)}</span>
-              <span className="muted">
-                {new Date(game.updatedAt || Date.now()).toLocaleString()}
-              </span>
-            </div>
-            <button type="button" className="secondary" onClick={() => onOpen(game)}>
-              {game.status === 'finished' ? 'Review' : 'Continue'}
-            </button>
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-}
-
-export default function Lobby({
-  nickname,
-  onNicknameChange,
-  onCreate,
-  onJoinPaste,
-  onOpenGame
-}) {
-  const [pasteValue, setPasteValue] = useState('');
-  const [activeGames, setActiveGames] = useState([]);
-  const [finishedGames, setFinishedGames] = useState([]);
-  const [loadingGames, setLoadingGames] = useState(true);
-
-  async function refreshGames() {
-    setLoadingGames(true);
-    try {
-      const { active, finished } = await listLocalGames();
-      setActiveGames(active);
-      setFinishedGames(finished.slice(0, 12));
-    } finally {
-      setLoadingGames(false);
-    }
-  }
-
-  useEffect(() => {
-    refreshGames();
-    window.addEventListener('focus', refreshGames);
-    return () => window.removeEventListener('focus', refreshGames);
-  }, []);
-
-  function handleOpenGame(game) {
-    onOpenGame(sessionResumeHash(game));
-  }
-
-  return (
-    <div className="lobby-layout">
-      <section className="lobby lobby__top">
-        <div className="lobby__hero">
-          <p className="eyebrow">Decentralized demo</p>
-          <h1>3D Chess on dignity.js</h1>
-          <p>
-            Peer-to-peer chess over Cloudflare PeerJS signaling, encrypted room scopes,
-            IndexedDB persistence, and React hooks.
-          </p>
-          <label className="lobby__nickname">
-            Your nickname
-            <input
-              value={nickname}
-              onChange={(event) => onNicknameChange(event.target.value)}
-              placeholder="Nickname"
-              maxLength={32}
-            />
-          </label>
-          <button type="button" className="primary" onClick={() => onCreate(generateGameId())}>
-            Start new game
-          </button>
-        </div>
-
-        <div className="lobby__join">
-          <h2>Join from link</h2>
-          <p>Paste a host, opponent, spectator, or resume link. You will choose or confirm your name on the next screen.</p>
-          <textarea
-            rows={4}
-            value={pasteValue}
-            onChange={(event) => setPasteValue(event.target.value)}
-            placeholder="https://…/chess/#game=…&role=join…"
-          />
-          <button
-            type="button"
-            className="secondary"
-            onClick={() => {
-              if (!pasteValue.trim()) {
-                return;
-              }
-              onJoinPaste(pasteValue.trim());
-            }}
-          >
-            Open link
-          </button>
-        </div>
-      </section>
-
-      <section className="lobby__history">
-        <div className="lobby__history-head">
-          <h2>Your games on this device</h2>
-          <button type="button" className="ghost" onClick={refreshGames} disabled={loadingGames}>
-            Refresh
-          </button>
-        </div>
-
-        {loadingGames ? (
-          <p className="muted">Loading saved games…</p>
-        ) : (
-          <div className="lobby__history-grid">
-            <GameList
-              title="Active"
-              games={activeGames}
-              emptyText="No active games. Start one or join from a link."
-              onOpen={handleOpenGame}
-            />
-            <GameList
-              title="Finished"
-              games={finishedGames}
-              emptyText="No finished games yet."
-              onOpen={handleOpenGame}
-            />
-          </div>
-        )}
-      </section>
-    </div>
-  );
-}

package/docs/chess/src/components/MovePanel.jsx

@@ -1,123 +0,0 @@
-import React from 'react';
-
-const PIECE_SYMBOLS = {
-  wp: '♙', wn: '♘', wb: '♗', wr: '♖', wq: '♕', wk: '♔',
-  bp: '♟', bn: '♞', bb: '♝', br: '♜', bq: '♛', bk: '♚'
-};
-
-export function pieceSymbol(piece) {
-  if (!piece) {
-    return '';
-  }
-  return PIECE_SYMBOLS[`${piece.color}${piece.type}`] || piece.type;
-}
-
-export default function MovePanel({
-  chess,
-  canMove,
-  myColor,
-  selectedSquare,
-  legalTargets,
-  onSquareClick,
-  gameStatus,
-  turn,
-  roomConnected = true,
-  connectionCount = 0
-}) {
-  const files = 'abcdefgh';
-  const ranks = myColor === 'b' ? [1, 2, 3, 4, 5, 6, 7, 8] : [8, 7, 6, 5, 4, 3, 2, 1];
-
-  let statusText = 'Spectating';
-  if (!roomConnected) {
-    statusText = 'Connecting to host peer…';
-  } else if (canMove) {
-    statusText = 'Your turn — click a piece, then a destination square.';
-  } else if (myColor && gameStatus === 'playing') {
-    statusText = turn === myColor ? 'Syncing…' : 'Waiting for opponent…';
-  } else if (gameStatus === 'waiting') {
-    statusText = connectionCount > 0
-      ? 'Waiting for opponent to join…'
-      : 'Connecting P2P link…';
-  } else if (gameStatus === 'finished') {
-    statusText = 'Game over.';
-  }
-
-  return (
-    <section className="panel move-panel">
-      <h3>Move</h3>
-      <p className="move-panel__status">{statusText}</p>
-
-      {selectedSquare ? (
-        <p className="move-panel__selected">
-          Selected: <strong>{selectedSquare.toUpperCase()}</strong>
-          {legalTargets.length ? ` · ${legalTargets.length} legal move(s)` : ''}
-        </p>
-      ) : null}
-
-      <div className="mini-board" aria-label="Chess board">
-        {ranks.map((rank) => (
-          <div key={rank} className="mini-board__row">
-            <span className="mini-board__rank">{rank}</span>
-            {files.split('').map((file) => {
-              const square = `${file}${rank}`;
-              const piece = chess.get(square);
-              const isLight = (file.charCodeAt(0) - 97 + rank) % 2 === 0;
-              const isSelected = selectedSquare === square;
-              const isTarget = legalTargets.includes(square);
-              const isOwnPiece = piece && piece.color === myColor;
-
-              return (
-                <button
-                  key={square}
-                  type="button"
-                  title={square}
-                  className={[
-                    'mini-board__sq',
-                    isLight ? 'light' : 'dark',
-                    isSelected ? 'selected' : '',
-                    isTarget ? 'target' : '',
-                    isOwnPiece ? 'own' : ''
-                  ].filter(Boolean).join(' ')}
-                  onClick={() => onSquareClick(square)}
-                  disabled={!canMove && !isTarget}
-                >
-                  {piece ? (
-                    <span className={`mini-board__piece mini-board__piece--${piece.color}`}>
-                      {pieceSymbol(piece)}
-                    </span>
-                  ) : null}
-                </button>
-              );
-            })}
-          </div>
-        ))}
-        <div className="mini-board__files">
-          <span className="mini-board__rank" aria-hidden="true" />
-          {files.split('').map((file) => (
-            <span key={file} className="mini-board__file">{file}</span>
-          ))}
-        </div>
-      </div>
-
-      {canMove && legalTargets.length > 0 ? (
-        <div className="move-targets">
-          <p className="muted">Quick moves</p>
-          <div className="move-targets__list">
-            {legalTargets.map((square) => (
-              <button
-                key={square}
-                type="button"
-                className="secondary"
-                onClick={() => onSquareClick(square)}
-              >
-                {selectedSquare}
-                →
-                {square}
-              </button>
-            ))}
-          </div>
-        </div>
-      ) : null}
-    </section>
-  );
-}

package/docs/chess/src/lib/audio.js

@@ -1,50 +0,0 @@
-let audioContext;
-
-function getContext() {
-  if (!audioContext) {
-    audioContext = new (window.AudioContext || window.webkitAudioContext)();
-  }
-  return audioContext;
-}
-
-function tone({ frequency, duration = 0.12, type = 'sine', gain = 0.04 }) {
-  const ctx = getContext();
-  const oscillator = ctx.createOscillator();
-  const volume = ctx.createGain();
-
-  oscillator.type = type;
-  oscillator.frequency.value = frequency;
-  volume.gain.value = gain;
-
-  oscillator.connect(volume);
-  volume.connect(ctx.destination);
-
-  oscillator.start();
-  oscillator.stop(ctx.currentTime + duration);
-}
-
-export function playMoveSound() {
-  tone({ frequency: 280, duration: 0.08, type: 'triangle' });
-}
-
-export function playCaptureSound() {
-  tone({ frequency: 180, duration: 0.14, type: 'square', gain: 0.05 });
-  setTimeout(() => tone({ frequency: 120, duration: 0.1, type: 'square', gain: 0.04 }), 70);
-}
-
-export function playCheckSound() {
-  tone({ frequency: 520, duration: 0.18, type: 'sawtooth', gain: 0.03 });
-}
-
-export function playGameStartSound() {
-  [220, 330, 440].forEach((frequency, index) => {
-    setTimeout(() => tone({ frequency, duration: 0.16, type: 'triangle', gain: 0.035 }), index * 90);
-  });
-}
-
-export async function resumeAudio() {
-  const ctx = getContext();
-  if (ctx.state === 'suspended') {
-    await ctx.resume();
-  }
-}

package/docs/chess/src/lib/dignitySetup.js

@@ -1,42 +0,0 @@
-import {
-  DignityP2P,
-  createPeerJSNetworkAdapter,
-  IndexedDBPersistence,
-  DEFAULT_CLOUDFLARE_SIGNALING_URLS
-} from '../../../../src/index.js';
-
-export function createDignityConfig({ nodeId, roomKey, scope, nickname, role }) {
-  const networkAdapter = createPeerJSNetworkAdapter({
-    urls: DEFAULT_CLOUDFLARE_SIGNALING_URLS
-  });
-
-  if (typeof console !== 'undefined') {
-    console.log('[chess-p2p] signaling urls', DEFAULT_CLOUDFLARE_SIGNALING_URLS);
-    console.log('[chess-p2p] dignity config', { nodeId, scope, role, roomKeyLen: roomKey?.length });
-  }
-
-  return {
-    nodeId,
-    networkAdapter,
-    security: {
-      appPassword: roomKey,
-      powTargetMs: 250,
-      broadcastPasswords: {
-        [scope]: roomKey,
-        default: roomKey
-      },
-      resolveBroadcastScope: () => scope,
-      discoveryHeartbeatMs: 12000,
-      presenceTtlMs: 36000
-    },
-    __meta: { nickname, role, scope, roomKey }
-  };
-}
-
-export async function attachPersistence(node, collections = ['chess-matches']) {
-  const persistence = new IndexedDBPersistence({ collections });
-  await persistence.attach(node);
-  return persistence;
-}
-
-export { DignityP2P, IndexedDBPersistence };

package/docs/chess/src/lib/links.js

@@ -1,124 +0,0 @@
-export function randomToken(length = 12) {
-  const bytes = new Uint8Array(length);
-  crypto.getRandomValues(bytes);
-  return Array.from(bytes, (byte) => byte.toString(36).padStart(2, '0')).join('').slice(0, length);
-}
-
-const CHESS_LEGENDS = [
-  'Fischer', 'Spassky', 'Karpov', 'Kasparov', 'Carlsen', 'Anand', 'Tal', 'Botvinnik',
-  'Capablanca', 'Alekhine', 'Morphy', 'Anderssen', 'Lasker', 'Petrosian', 'Korchnoi',
-  'Polgar', 'Nepo', 'Ding', 'Aronian', 'Kramnik', 'Smyslov', 'Euwe', 'Bronstein',
-  'Larsen', 'Steinitz', 'Rubinstein', 'Reshevsky', 'Ivanchuk', 'Firouzja', 'Giri'
-];
-
-const MATCH_NICKNAMES = [
-  'Immortal', 'Evergreen', 'Opera', 'Century', 'Candidates'
-];
-
-const CLASSIC_YEARS = [1858, 1927, 1972, 1985, 2013, 2016, 2021, 2023];
-
-function pickRandom(items) {
-  return items[Math.floor(Math.random() * items.length)];
-}
-
-function pickTwoDifferent(items) {
-  const first = pickRandom(items);
-  let second = pickRandom(items);
-  while (second === first) {
-    second = pickRandom(items);
-  }
-  return [first, second];
-}
-
-/** Human-readable game id from famous player names (URL-safe). */
-export function generateGameId() {
-  const style = Math.random();
-  const [white, black] = pickTwoDifferent(CHESS_LEGENDS);
-
-  if (style < 0.45) {
-    return `${white}-${black}`;
-  }
-  if (style < 0.75) {
-    return `${white}-vs-${black}`;
-  }
-  if (style < 0.9) {
-    return `${pickRandom(CHESS_LEGENDS)}-${pickRandom(CLASSIC_YEARS)}`;
-  }
-  return `${pickRandom(MATCH_NICKNAMES)}-${pickRandom(CHESS_LEGENDS)}`;
-}
-
-export function parseRoute() {
-  const hash = window.location.hash.replace(/^#/, '');
-  const params = Object.fromEntries(new URLSearchParams(hash));
-  return {
-    gameId: params.game || null,
-    role: params.role || 'host',
-    roomKey: params.room || null,
-    hostPeer: params.host || null,
-    joinToken: params.join || null,
-    watchToken: params.watch || null,
-    resumeToken: params.resume || null
-  };
-}
-
-export function buildLinks({ gameId, roomKey, hostPeer, joinToken, watchToken, resumeToken }) {
-  const base = `${window.location.origin}${window.location.pathname}`;
-  const common = `game=${encodeURIComponent(gameId)}&room=${encodeURIComponent(roomKey)}`;
-  const hostParam = hostPeer ? `&host=${encodeURIComponent(hostPeer)}` : '';
-
-  return {
-    host: `${base}#${common}&role=host&resume=${encodeURIComponent(resumeToken)}${hostParam}`,
-    join: `${base}#${common}&role=join&join=${encodeURIComponent(joinToken)}${hostParam}`,
-    watch: `${base}#${common}&role=watch&watch=${encodeURIComponent(watchToken)}${hostParam}`,
-    resume: `${base}#${common}&role=resume&resume=${encodeURIComponent(resumeToken)}${hostParam}`
-  };
-}
-
-export function withHostPeerInHash(hostPeer) {
-  if (!hostPeer || typeof window === 'undefined') {
-    return;
-  }
-
-  const hash = window.location.hash.replace(/^#/, '');
-  const params = new URLSearchParams(hash);
-  if (params.get('host') === hostPeer) {
-    return;
-  }
-
-  params.set('host', hostPeer);
-  window.history.replaceState(null, '', `#${params.toString()}`);
-}
-
-export function scopeForGame(gameId) {
-  return `room:chess:${gameId}`;
-}
-
-export function nodeIdForRole(role, gameId) {
-  const suffix = randomToken(4);
-  const gameBit = gameId.replace(/[^a-zA-Z0-9]/g, '').slice(0, 6);
-  const roleBit = role === 'host' ? 'h' : role === 'join' ? 'j' : role === 'watch' ? 'w' : 'r';
-  return `c${gameBit}${roleBit}${suffix}`.slice(0, 16);
-}
-
-export function hostPeerFromRoute(route, game, localNodeId) {
-  return route.hostPeer || game?.data?.whitePlayerId || (route.role === 'host' ? localNodeId : null);
-}
-
-export async function connectToRoomPeer(node, remotePeerId) {
-  if (!node?.connectToPeer || !remotePeerId || remotePeerId === node.nodeId) {
-    return { ok: false, reason: 'missing-node-or-self' };
-  }
-
-  try {
-    await node.connectToPeer(remotePeerId);
-    const stats = node.getConnectionStats?.() || { openCount: 0, peerIds: [] };
-    const open = stats.peerIds.includes(remotePeerId) || stats.openCount > 0;
-    return { ok: true, open, stats };
-  } catch (error) {
-    return {
-      ok: false,
-      reason: 'connect-failed',
-      message: error?.message || String(error)
-    };
-  }
-}