xxxxxxxxxx139
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Not including this while hosted on p5js.org will result in a console error saying "TypeError: window.p5 is undefined", so i just left it here to avoid that --> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <title>Multiple Chess Boards Visualization</title> <style> @font-face { font-family: 'Chess Merida'; src: url('chess_merida_unicode.ttf') format('truetype'); /* Adjust the path as necessary */ } .chessboard { border-collapse: collapse; margin: 20px 0; /* Updated margin to align the chessboard to the left */ } .chessboard td { width: 60px; height: 60px; text-align: center; /* Align text to center within the cell */ font-size: 44px; font-family: 'Chess Merida', sans-serif; } .light { background-color: rgb(238,238,210); } .dark { background-color: rgb(118,150,86); } .white-piece { color: #ffffff; /* White font color */ text-shadow: -1px -1px 0 #545454, 2px -1px 0 #545454, -2px 1px 0 #545454, 1px 1px 0 #545454; Grey shadow to create an outline effect around white pieces } .black-piece { color: #000000; } .description { text-align: left; margin-top: 20px; } .moveList { text-align: left; margin-top: 20px; } </style> </head> <body> <h2>Chess Board Visualization</h2> <div id="boardContainer"></div> <script> // HIER let fenList = [ {description: "Starting Position", fenstring: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"}, {description: "Another Position", fenstring: "r1bqkbnr/pppp1ppp/2n5/4p3/4P3/5N2/PPPP1PPP/RNBQKB1R w KQkq - 2 3"}, {description: "Another Position", fenstring: "r1bqkbnr/pppp1ppp/2n5/4p3/4P3/5N2/PPPP1PPP/RNBQKB1R w KQkq - 2 3"}, {description: "Another Position", fenstring: "r1b2rk1/pp2qppp/2n2n2/2bp4/2B1P3/2N1B3/PPP2PPP/R2Q1RK1 w - - 0 21"}, ]; const pieceSymbols = { 'r': '♜', 'n': '♞', 'b': '♝', 'q': '♛', 'k': '♚', 'p': '♟︎', 'R': '♜', 'N': '♞', 'B': '♝', 'Q': '♛', 'K': '♚', 'P': '♟︎' }; function createBoard(description, fen) { const boardContainer = document.getElementById('boardContainer'); // Adding description above each board const descElement = document.createElement('div'); descElement.className = 'description'; descElement.textContent = fen; boardContainer.appendChild(descElement); const table = document.createElement('table'); table.className = 'chessboard'; const board = parseFEN(fen); for (let i = 0; i < 8; i++) { const tr = document.createElement('tr'); for (let j = 0; j < 8; j++) { const td = document.createElement('td'); td.className = (i + j) % 2 === 0 ? 'light' : 'dark'; if (board[i][j]) { const piece = board[i][j]; const pieceSymbol = pieceSymbols[piece]; td.textContent = pieceSymbol; td.classList.add(piece === piece.toUpperCase() ? 'white-piece' : 'black-piece'); } else { td.textContent = '\u00A0'; } tr.appendChild(td); } table.appendChild(tr); } boardContainer.appendChild(table); const moveListElem = document.createElement('div'); moveListElem.className = 'moveList'; // moveListElem.innerHTML = "short move1\n some very long move move2\n another very very longmove3\ntiny move4".replace(/\n/g, '<br>'); boardContainer.appendChild(moveListElem); } function parseFEN(fen) { let board = Array(8).fill().map(() => Array(8).fill(null)); let rows = fen.split(" ")[0].split("/"); for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) { let row = rows[rowIndex]; let colIndex = 0; for (let charIndex = 0; charIndex < row.length; charIndex++) { if (isNaN(row[charIndex])) { board[rowIndex][colIndex] = row[charIndex]; colIndex++; } else { colIndex += parseInt(row[charIndex], 10); } } } return board; } // Loop through the list and create a board for each FEN string fenList.forEach(item => createBoard(item.description, item.fenstring)); </script> </body></html>