Skip to content

Features

BilgeGates edited this page May 23, 2026 · 1 revision

Features (v5.5.3)

This page enumerates the stable feature set on master at v5.5.3. Every entry is verifiable in the source tree. Items that exist on develop but have not yet been merged to master are intentionally omitted; see Maintenance for the policy that governs what reaches the stable branch.

Core Board

  • FEN notation parsing and validation. Input length is hard-capped at MAX_FEN_LENGTH = 93, enforced in src/utils/validation.js and src/utils/fenParser.ts before any parse attempt.
  • Canvas-based board rendering with coordinate labels (src/utils/canvasRenderer.js).
  • Board flip and coordinate-visibility toggles.
  • Interactive drag-and-drop board editor built on react-dnd with HTML5Backend and TouchBackend. The drag-and-drop layer lives in src/components/interactions/.
  • Piece set and board theme presets.
  • Custom board color picker with HSV, RGB, and HEX inputs. Multiple picker views are available under src/components/features/ColorPicker/.

Export Pipeline

  • PNG and JPEG export through src/utils/canvasExporter.js.
  • DPI-correct sizing: physical dimensions in centimeters are converted to pixels using the base DPI multiplier in src/utils/imageOptimizer.js.
  • Multiple quality presets selectable from the export dialog. Large canvases are produced via chunked main-thread rendering in src/utils/advancedExport.js.
  • Batch export from the Advanced FEN page assembled into a ZIP archive (src/utils/archiveManager.js).
  • SVG board generation through src/utils/svgExporter.js.
  • A shared pause, resume, and cancel state machine governs every long-running export.
  • Clipboard copy is supported as an alternative to file export.
  • Safari and iOS canvas memory is protected by an explicit canvas.width = 0 disposal after every blob generation. This is invariant: do not bypass it.

Pages and Routing

All eight routes are React.lazy-loaded and wrapped in a Suspense fallback. Route transitions are animated with framer-motion's AnimatePresence.

Path Page Purpose
/ HomePage Primary board playground; main export entry point
/about AboutPage Product information
/download DownloadPage PWA install guide
/support SupportPage Support and feedback channels
/settings SettingsPage Tabbed: Export Customization, Theme Customization, Data Management
/fen-history FENHistoryPage Browsable FEN history with filters, archive, and favorites
/advanced-fen AdvancedFENInputPage Batch FEN editor with playback
* NotFoundPage 404

State and Persistence

  • Three React contexts: FENBatchContext, LayoutContext, ThemeSettingsContext.
  • useFENHistory persists FEN history to localStorage with a 300 ms debounce on writes.
  • The FEN history archive supports auto-archival, filtering, sorting, favorites, and pinning.
  • Every localStorage read goes through safeJSONParse in src/utils/validation.js. Direct JSON.parse on untrusted strings is forbidden.
  • Persistence is local only. v5.5.3 has no authentication, no cloud sync, no cross-device transport, and no server-side storage. Data Management's backup and restore flows are the only supported way to move state between devices.

Data Management

Available under Settings → Data Management (src/pages/settings/DataManagement.jsx):

  • Backup. Export full app state to a JSON file.
  • Restore. Import a backup file. Inputs are passed through safeJSONParse; file names are sanitized via sanitizeFileName.
  • Reset. Wipe local state.

Performance Characteristics

  • React.memo is applied to the board hot path: BoardSquare, DraggablePiece, and DroppableSquare. These components render 64 times per board state change; memoization is required, not optional.
  • useMemo and useCallback are applied at hot render boundaries.
  • Piece SVGs are cached as HTMLImageElement instances by URL through src/utils/pieceImageCache.js.
  • The FEN history list is virtualized with react-window and react-window-infinite-loader.
  • Per-page code splitting through React.lazy and Suspense.
  • Manual Vite chunking for the React, icons, motion, dnd, and virtualization vendor bundles.

Tooling and Release Engineering

  • pnpm 10 workspace.
  • Vite 8, Tailwind 4, TypeScript 6. The codebase on the v5.x line is predominantly .jsx / .js; TypeScript coverage is partial.
  • ESLint 9 with eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-react-refresh. Production lint gate: --max-warnings=0.
  • Prettier, Husky pre-commit, lint-staged, commitlint with Conventional Commits.
  • semantic-release is configured against the master branch; tags and GitHub Releases are produced from Conventional Commits.
  • Testing: node --test against src/utils/fenParser.test.js. No experimental Node flags are required.
  • GitHub Actions CI with CodeQL extended-queries enabled.
  • Dependabot configured for direct-dependency PRs.

Known Limitations

The v5.5.3 release explicitly does not provide:

  • A Web Worker or OffscreenCanvas rasterization path. Very large exports run on the main thread.
  • Cloud synchronization, authentication, or multi-factor authentication.
  • End-to-end encryption (there is no remote data path to encrypt).
  • A DOM-accessible alternative to the canvas board for screen readers.
  • Move animation, game playback, PGN replay, or chess-engine analysis.
  • Internationalization or multi-language support.
  • Lighthouse CI integration or automated bundle-size regression tracking.

A complete and current statement of known limitations is maintained in ROADMAP.md on master.

Clone this wiki locally