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 2 Player Local HTML CSS JavaScript
Get 1000000 0FP0EXP Token to remove widget entirely!
Get 500000 0FP0EXP Token to remove my NFTS advertisements!
♟️ Type & Play
Reference
- Simple One
- 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>Project 3: Notation Input Trainer</title>
<link rel="stylesheet"
href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css">
<style>
body {
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f4f4f4;
padding: 20px;
}
h1 { margin-bottom: 10px; }
/* Responsive Board Container */
#myBoard {
width: 90%;
max-width: 500px;
margin: 20px auto;
}
/* Input Controls */
.input-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
width: 90%;
max-width: 500px;
}
#moveInput {
flex-grow: 1;
padding: 12px;
font-size: 18px;
border: 2px solid #ccc;
border-radius: 4px;
}
#submitBtn {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
/* Status & History */
#status { font-weight: bold; margin-bottom: 10px; color: #333; }
#pgn-output {
background: #fff;
padding: 15px;
border: 1px solid #ddd;
width: 90%;
max-width: 500px;
min-height: 50px;
font-family: monospace;
font-size: 14px;
}
</style>
</head>
<body>
<h1>♟️ Type & Play</h1>
<div id="status">White to move</div>
<div id="myBoard"></div>
<div class="input-container">
<input type="text" id="moveInput" placeholder="Type move (e.g. e4, Nf3)..." autofocus>
<button id="submitBtn">Move</button>
</div>
<div id="pgn-output"></div>
<br>
<button id="resetBtn" style="padding: 8px 16px; cursor: pointer;">Reset Game</button>
<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. SETUP ---
var board = null;
var game = new Chess();
// Configuration: Local images + Responsive + No Dragging
var config = {
position: 'start',
draggable: false, // Strictly no dragging!
pieceTheme: 'img/chesspieces/wikipedia/{piece}.png'
};
// Initialize Board
board = Chessboard('myBoard', config);
window.addEventListener('resize', board.resize); // Responsive fix
// DOM Elements
const moveInput = document.getElementById('moveInput');
const statusDisplay = document.getElementById('status');
const pgnDisplay = document.getElementById('pgn-output');
// --- 2. CORE LOGIC ---
function handleMove() {
const moveText = moveInput.value.trim();
if (!moveText) return;
// Try to make the move in the game logic
// chess.js requires SAN (Standard Algebraic Notation) by default
const move = game.move(moveText);
if (move === null) {
// INVALID MOVE
speak("Invalid move");
// Shake the input box to show error visually (optional CSS trick)
moveInput.style.borderColor = "red";
setTimeout(() => moveInput.style.borderColor = "#ccc", 500);
return;
}
// VALID MOVE
board.position(game.fen()); // Update board
speak(move.san); // Voice notation
updateStatus(); // Update turn info
// Clear input for next turn
moveInput.value = '';
moveInput.focus();
}
function updateStatus() {
let status = '';
let moveColor = (game.turn() === 'b') ? 'Black' : 'White';
// Check for Checkmate / Draw
if (game.in_checkmate()) {
status = 'Game over, ' + moveColor + ' is in checkmate.';
speak("Checkmate!");
} else if (game.in_draw()) {
status = 'Game over, drawn position';
speak("Draw!");
} else {
status = moveColor + ' to move';
if (game.in_check()) {
status += ', ' + moveColor + ' is in check';
speak("Check!");
}
}
statusDisplay.innerText = status;
pgnDisplay.innerHTML = game.pgn(); // Show full history
}
function speak(text) {
if ('speechSynthesis' in window) {
const ut = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(ut);
}
}
// --- 3. EVENT LISTENERS ---
// Submit button click
document.getElementById('submitBtn').addEventListener('click', handleMove);
// "Enter" key in input box
moveInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
handleMove();
}
});
// Reset Game
document.getElementById('resetBtn').addEventListener('click', () => {
game.reset();
board.start();
moveInput.value = '';
updateStatus();
speak("Game reset");
moveInput.focus();
});
// Initial Status
updateStatus();
</script>
</body>
</html>