Click the above image for basic sourced and click following button for processing token source code.
Ethereum and EVM (ETC, BSC, AVAX-C-Chain, Polygon, etc).
Telegram Open Network (TON) decentralized application.
Solana decentralized application.
Tron decentralized application.
Near decentralized application.
Wax decentralized application.
Myalgo wallet for Algorand decentralized application.
Sync2 wallet for Vechain decentralized application.
Scatter wallet for EOS decentralized application.
Anchor Link wallet for EOS decentralized application.
Ontology decentralized application.
Rabbet wallet for Stellar Lumen decentralized application.
Freighter wallet for Stellar Lumen decentralized application.
Hive Signer for Hive decentralized application.
Hive Key Chain for Hive decentralized application.
Zilpay wallet for Zilliqa decentralized application.
Neoline wallet for Neo N2 decentralized application.
Neoline wallet for Neo N3 decentralized application.
Keplr wallet for Cosmos and other decentralized application.
Keeper wallet for Waves decentralized application.
IWallet for IOST decentralized application.
Chess Board HTML CSS JavaScript
Get 1000000 0FP0EXP Token to remove widget entirely!
Get 500000 0FP0EXP Token to remove my NFTS advertisements!
Opening Study Board
Notation:
Reference
- https://chessboardjs.com
- https://jhlywa.github.io/chess.js
- Acknowledgement to Google Gemini AI for helping writing the code.
Source Code
<!DOCTYPE html>
<html>
<head>
<title>Chess Opening Study</title>
<link rel="stylesheet"
href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css">
<style>
/* Simple layout styling */
body {
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
padding: 20px;
}
#myBoard {
width: 400px;
margin: 20px;
}
.controls {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
select {
padding: 10px;
font-size: 16px;
}
#notationDisplay {
margin-top: 15px;
border: 1px solid #ccc;
padding: 10px;
width: 400px; /* Match board width */
background-color: #fff;
font-size: 14px;
}
#pgn-output .highlight {
font-weight: bold;
background-color: #ffeb3b; /* Highlight color */
padding: 2px 4px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>Opening Study Board</h1>
<div class="controls">
<select id="openingSelector">
<option value="" disabled selected>Select an Opening</option>
</select>
<button id="resetBtn">↩️ Reset</button>
<button id="prevBtn">⬅️ Back</button>
<button id="nextBtn">Forward ➡️</button>
</div>
<div id="myBoard"></div>
<div id="notationDisplay">
<p>Notation: <span id="pgn-output"></span></p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>
<script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script>
<script>
// --- 1. CONFIGURATION & OPENINGS DATA ---
const openings = {
"Ruy Lopez": "e4 e5 Nf3 Nc6 Bb5 a6 Ba4 Nf6",
"Sicilian Defense (Najdorf)": "e4 c5 Nf3 d6 d4 cxd4 Nxd4 Nf6 Nc3 a6",
"French Defense": "e4 e6 d4 d5 Nc3 Bb4",
"Queen's Gambit": "d4 d5 c4 e6 Nc3 Nf6 Bg5 Be7",
"King's Indian Defense": "d4 Nf6 c4 g6 Nc3 Bg7 e4 d6"
};
// --- 2. INITIALIZATION & State ---
var board = null;
var game = new Chess();
var currentOpeningMoves = []; // Stores the full sequence of moves (e.g., ["e4", "e5", ...])
var currentMoveIndex = -1; // Tracks the current position in the sequence
var config = {
position: 'start',
draggable: false,
// 👇 Local Image Path
pieceTheme: 'https://raw.githubusercontent.com/oakmac/chessboardjs/master/website/img/chesspieces/wikipedia/{piece}.png'
}
board = Chessboard('myBoard', config);
const selector = document.getElementById('openingSelector');
const pgnOutput = document.getElementById('pgn-output');
// Populate the dropdown menu
for (const name in openings) {
const option = document.createElement('option');
option.value = name;
option.innerText = name;
selector.appendChild(option);
}
// --- 3. CORE FUNCTIONS ---
function updateBoardAndNotation() {
// Update the visual board to the game's current FEN
board.position(game.fen());
// Get the move history and format it for display
const history = game.history({ verbose: true });
// Format the PGN string for display
let pgnString = '';
for (let i = 0; i < history.length; i++) {
if (i % 2 === 0) { // White's move
pgnString += (i / 2 + 1) + '. ';
}
// Highlight the last move played
const moveClass = (i === currentMoveIndex) ? ' class="highlight"' : '';
pgnString += `<span${moveClass}>${history[i].san}</span> `;
}
pgnOutput.innerHTML = pgnString.trim();
}
// --- 4. EVENT HANDLERS ---
// When a new opening is selected, initialize the game state
selector.addEventListener('change', () => {
const selectedOpening = selector.value;
currentOpeningMoves = openings[selectedOpening].split(" ").filter(m => m.trim().length > 0);
game.reset();
currentMoveIndex = -1;
updateBoardAndNotation();
});
// Move forward one step
document.getElementById('nextBtn').addEventListener('click', () => {
if (currentMoveIndex < currentOpeningMoves.length - 1) {
currentMoveIndex++;
game.move(currentOpeningMoves[currentMoveIndex]);
speakNotation(currentOpeningMoves[currentMoveIndex]);
updateBoardAndNotation();
}
});
// Move backward one step
document.getElementById('prevBtn').addEventListener('click', () => {
if (currentMoveIndex >= 0) {
game.undo(); // Undo the last move
currentMoveIndex--;
speakNotation(currentOpeningMoves[currentMoveIndex]);
updateBoardAndNotation();
}
});
// Reset to start
document.getElementById('resetBtn').addEventListener('click', () => {
game.reset();
currentMoveIndex = -1;
updateBoardAndNotation();
});
// --- 5. VOICE NOTATION FUNCTION ---
function speakNotation(move) {
// Check if the browser supports Speech Synthesis
if ('speechSynthesis' in window) {
// Create a new speech utterance object
const utterance = new SpeechSynthesisUtterance(move);
// Optional: Set voice properties (e.g., speed)
utterance.rate = 1.0; // Normal speed
// Use a suitable voice (optional: you can list available voices)
// You can leave this out to use the system default voice.
// utterance.voice = speechSynthesis.getVoices().find(v => v.name === 'Google US English');
// Speak the move
window.speechSynthesis.speak(utterance);
} else {
console.warn("Speech Synthesis not supported in this browser.");
}
}
// Initialize the board on page load
updateBoardAndNotation();
</script>
</body>
</html>