dignity.js 0.4.0 → 0.5.2

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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,154 @@
+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

@@ -0,0 +1,123 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,124 @@
+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)
+    };
+  }
+}