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 Peer to Peer HTML CSS JavaScript
Get 1000000 0FP0EXP Token to remove widget entirely!
Get 500000 0FP0EXP Token to remove my NFTS advertisements!
My ID: Generating...
Status: Waiting for peer...
White to move
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>P2P Notation Battle</title>
<link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css">
<script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f4f4f4;
padding: 10px;
}
/* Connection Panel */
#connection-panel {
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 20px;
width: 90%;
max-width: 500px;
text-align: center;
}
#myId { font-weight: bold; color: #2196F3; font-family: monospace; font-size: 1.2em; }
/* Responsive Board */
#myBoard {
width: 100%;
max-width: 450px;
margin: 0 auto 20px auto;
}
/* Input Controls */
.input-container {
display: flex;
gap: 10px;
width: 90%;
max-width: 500px;
margin-bottom: 10px;
}
#moveInput {
flex-grow: 1;
padding: 12px;
font-size: 18px;
border: 2px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 15px;
cursor: pointer;
border: none;
border-radius: 4px;
font-size: 14px;
color: white;
transition: background 0.2s;
}
#submitBtn { background-color: #4CAF50; }
#submitBtn:hover { background-color: #45a049; }
#connectBtn { background-color: #2196F3; }
.nav-btn { background-color: #555; flex: 1; }
.nav-btn:hover { background-color: #333; }
/* Navigation Row */
.navigation-controls {
display: flex;
gap: 10px;
width: 90%;
max-width: 500px;
margin-top: 10px;
}
#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: 40px;
font-family: monospace; margin-top: 10px; font-size: 0.9em;
}
</style>
</head>
<body>
<div id="connection-panel">
<div>My ID: <span id="myId">Generating...</span></div>
<div style="margin-top: 10px; display: flex; gap: 5px; justify-content: center;">
<input type="text" id="connId" placeholder="Enter Friend's ID" style="padding: 5px;">
<button id="connectBtn">Connect</button>
</div>
<div id="connStatus" style="margin-top: 5px; font-size: 0.9em; color: #666;">Status: Waiting for peer...</div>
</div>
<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)..." autofocus>
<button id="submitBtn">Move</button>
</div>
<div class="navigation-controls">
<button id="prevBtn" class="nav-btn">⬅️ Back</button>
<button id="resetBtn" class="nav-btn">↩️ Reset</button>
<button id="nextBtn" class="nav-btn">Forward ➡️</button>
</div>
<div id="pgn-output"></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. GAME SETUP ---
var board = null;
var game = new Chess();
var redoStack = [];
// PeerJS Variables
var peer = new Peer();
var conn = null;
var myColor = 'w'; // Default to White (Host)
var config = {
position: 'start',
draggable: false, // Input Trainer Mode
pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png'
};
board = Chessboard('myBoard', config);
window.addEventListener('resize', board.resize);
// --- 2. PEERJS LOGIC ---
peer.on('open', function(id) {
document.getElementById('myId').innerText = id;
});
// Handle Incoming Connection (I am Host)
peer.on('connection', function(c) {
conn = c;
myColor = 'w'; // I remain White
document.getElementById('connStatus').innerText = "Connected! You are WHITE.";
setupConnectionHandlers();
});
// Connect to Friend (I am Joiner)
document.getElementById('connectBtn').addEventListener('click', function() {
var destId = document.getElementById('connId').value;
if(!destId) return alert("Enter an ID first");
conn = peer.connect(destId);
conn.on('open', function() {
myColor = 'b'; // I become Black
document.getElementById('connStatus').innerText = "Connected! You are BLACK.";
board.orientation('black'); // Flip board for Black player
setupConnectionHandlers();
});
});
function setupConnectionHandlers() {
// Listen for data from opponent
conn.on('data', function(data) {
console.log("Received:", data);
if (data.type === 'move') {
// Opponent moved
game.move(data.san);
board.position(game.fen());
redoStack = []; // Clear redo on new move
updateStatus();
speak(data.san);
}
else if (data.type === 'reset') {
// Opponent reset the game
resetLocalGame();
alert("Opponent reset the game.");
}
});
}
// --- 3. GAMEPLAY LOGIC ---
function handleMove() {
const moveText = document.getElementById('moveInput').value.trim();
if (!moveText) return;
// RULE: Can I move?
// 1. If connected, is it my turn?
if (conn && game.turn() !== myColor) {
speak("Not your turn");
flashError("It is " + (game.turn() === 'w' ? "White" : "Black") + "'s turn!");
return;
}
// 2. Attempt Move
const move = game.move(moveText);
if (move === null) {
speak("Invalid move");
flashError();
return;
}
// 3. Success
board.position(game.fen());
redoStack = [];
updateStatus();
speak(move.san);
document.getElementById('moveInput').value = '';
// 4. Send to Peer (if connected)
if (conn && conn.open) {
conn.send({ type: 'move', san: move.san });
}
}
// --- 4. NAVIGATION & UTILS ---
function resetGame() {
// Reset locally
resetLocalGame();
// Notify peer
if (conn && conn.open) {
conn.send({ type: 'reset' });
}
}
function resetLocalGame() {
game.reset();
board.start();
redoStack = [];
updateStatus();
document.getElementById('moveInput').value = '';
}
function undoMove() {
// Disable Undo in multiplayer for simplicity (prevents desync)
if (conn) return alert("Undo disabled in multiplayer mode.");
const move = game.undo();
if (move) {
redoStack.push(move);
board.position(game.fen());
updateStatus();
}
}
function redoMove() {
if (conn) return alert("Redo disabled in multiplayer mode.");
const move = redoStack.pop();
if (move) {
game.move(move);
board.position(game.fen());
updateStatus();
}
}
function updateStatus() {
let status = '';
let moveColor = (game.turn() === 'b') ? 'Black' : 'White';
if (game.in_checkmate()) {
status = 'Game over, ' + moveColor + ' is in checkmate.';
} else if (game.in_draw()) {
status = 'Game over, drawn position';
} else {
status = moveColor + ' to move';
if (game.in_check()) status += ', ' + moveColor + ' is in check';
}
document.getElementById('status').innerText = status;
document.getElementById('pgn-output').innerHTML = game.pgn();
}
function speak(text) {
if ('speechSynthesis' in window) {
let ut = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(ut);
}
}
function flashError(msg) {
const input = document.getElementById('moveInput');
input.style.borderColor = "red";
if(msg) document.getElementById('status').innerText = msg;
setTimeout(() => {
input.style.borderColor = "#ccc";
updateStatus();
}, 1000);
}
// Listeners
document.getElementById('submitBtn').addEventListener('click', handleMove);
document.getElementById('moveInput').addEventListener('keydown', (e) => {
if (e.key === 'Enter') handleMove();
});
document.getElementById('resetBtn').addEventListener('click', resetGame);
document.getElementById('prevBtn').addEventListener('click', undoMove);
document.getElementById('nextBtn').addEventListener('click', redoMove);
updateStatus();
</script>
</body>
</html>