Chess PGN viewer application
The Chess PGN Viewer is designed to make loading, viewing, and navigating chess games straightforward. Whether you’re analyzing your own games or studying master clashes, this tool provides a clean interface focused on the essentials.
Key Features
- Load PGNs: it is possible to paste PGN text directly, import
.pgnfiles from your computer, or (if you connect your Dropbox account) manage and sync files automatically from the cloud. The core logic useschess.jsfor robust parsing.
// Simplified PGN loading button click handler (from pgn-display.js) loadPgnButton.click(function() { const pgnText = pgnInputArea.val(); // Get text from textarea if (!pgnText) { /* Show notification */ return; } try { if (loadPgn(pgnText)) { // Call game-logic function // Update UI: Headers, Moves, Board displayPgnHeaders(getPgnHeaders()); displayPgnMoves(getGameHistory()); updateBoardAndHighlight(getCurrentFen()); /* Show success notification */ } else { /* Show PGN load error notification */ } } catch (error) { /* Show detailed error notification */ } }); - Interactive Board: The current position is always displayed on a clear, interactive chessboard. You can flip the board orientation or cycle through different piece styles to suit your preference.
<!-- Basic HTML structure for the board container (from index.html) --> <div id="chessboard-container" class="col-lg-7 ..."> <div id="chessboard"> <!-- Indices (rank/file numbers/letters) --> <div class="indices rank">...</div> <div class="indices file">...</div> <!-- Board Grid (squares generated by JS) --> <div class="board-grid"> <!-- Example square (generated by board-ui.js) --> <!-- <div class="square light" data-square="e4"> <img src="img/set1/pawn_white.png" class="chess-piece"> </div> --> </div> </div> </div> - Game Navigation: Use the standard VCR-style controls (Start, Previous, Next, End) to step through the game. For quicker access, simply click on any move within the notation list to jump directly to that position.
// Example: Next move button listener (from pgn-display.js) nextButton.click(function() { const newFen = goToNextMove(); // Call game-logic function updateBoardAndHighlight(newFen); // Update UI }); // Example: Clicking on a move in the list (from pgn-display.js) pgnMovesParagraph.on('click', 'span.pgn-move', function() { const clickedIndex = $(this).data('move-index'); if (typeof clickedIndex !== 'undefined') { const newFen = goToMoveIndex(parseInt(clickedIndex, 10)); // Call game-logic updateBoardAndHighlight(newFen); // Update UI } }); - Clear Notation & Headers: The viewer displays the full game notation, including any comments embedded in the PGN. Important header information like player names, event details, and the game result are also clearly visible. The move currently shown on the board is highlighted in the notation list for easy tracking.
Built as a PWA
Leveraging a robust PWA template, the viewer offers:
- Offline Access: Once loaded, the app works offline. You can open it and view previously accessed or loaded games even without an internet connection, thanks to service worker caching.
// Example: Cache check on load (from cache.js) fetch('/data/json/version.json') // Fetch a version file .then(response => response.json()) .then(data => { const onlineVersion = data.version; const localVersion = localStorage.getItem('version'); if (onlineVersion !== localVersion) { // If versions differ, tell service worker to update cache navigator.serviceWorker.controller.postMessage('refresh_cache'); localStorage.setItem('version', onlineVersion); } }) .catch(() => { /* Handle offline/error */ }); - Installable: Like other PWAs, you can often “install” it to your device for easier access via the manifest file.
// Snippet from manifest.json { "short_name": "PGN Viewer", "name": "Chess PGN Viewer", "icons": [ ... ], "start_url": "/", "display": "standalone", "theme_color": "#0083B3", "background_color": "#ffffff" } - (Optional) Dropbox Sync: For users who want cloud backup and multi-device access, connecting a Dropbox account enables seamless synchronization of PGN files.
You can access the full source code, at the GitHub repository here.
For more insights into this topic, you can find the details here.