Chess Explorer

{"name":"Chess Explorer","description":"Dive into the strategic world of Chess with this interactive game built using p5.js. Whether you're a seasoned player or a beginner, this project offers a great way to hone your skills and understand the fundamentals of programming. Get ready to visualize the classic game with intuitive controls and engaging gameplay.","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-12-11T21:28:45.576836Z","updated_at":"2025-12-11T21:28:45.576838Z","user_id":894,"status":"PRIVATE","parent_id":null,"id":10892,"user":{"photo":null,"email":null,"recess_id":"70ba06fd-9c47-41b6-bed0-85f3e0a38ffa","created_at":"2025-11-13T21:06:49.794185Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"max","id":894,"password_hash":null,"updated_at":"2025-11-13T21:06:49.794188Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let pieces = [];\n\nlet selectedPiece = null;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n initializePieces();\n drawChessBoard();\n drawPieces();\n}\n\nfunction draw() {\n background(135, 206, 235);\n drawChessBoard();\n drawPieces();\n}\n\nfunction drawChessBoard() {\n let boardSize = min(windowWidth, windowHeight) * 0.8; // 80% of the smaller window dimension\n let squareSize = boardSize / 8;\n let startX = (windowWidth - boardSize) / 2;\n let startY = (windowHeight - boardSize) / 2;\n\n for (let row = 0; row < 8; row++) {\n for (let col = 0; col < 8; col++) {\n if ((row + col) % 2 == 0) {\n fill(247, 237, 218); // White color using RGB\n } else {\n fill(48, 41, 31); // Black color using RGB\n }\n rect(startX + col * squareSize, startY + row * squareSize, squareSize, squareSize);\n }\n }\n}\n\nfunction drawPawns() {\n let boardSize = min(windowWidth, windowHeight) * 0.8;\n let squareSize = boardSize / 8;\n let startX = (windowWidth - boardSize) / 2;\n let startY = (windowHeight - boardSize) / 2;\n\n // Draw white pawns on row 6 (index 1)\n for (let col = 0; col < 8; col++) {\n textSize(squareSize * 0.5); // Set the size of the emoji\n textAlign(CENTER, CENTER); // Center the emoji\n\n // Draw thicker black outline for white pawn\n fill(0); // Black color for outline\n for (let offset of [-1, 1]) { // Draw outline in 4 surrounding positions\n text('♟', startX + col * squareSize + squareSize / 2 + offset, startY + squareSize * 6 + squareSize / 2);\n text('♟', startX + col * squareSize + squareSize / 2, startY + squareSize * 6 + squareSize / 2 + offset);\n }\n\n // Draw white pawn\n fill(255); // White color for pawn\n text('♟', startX + col * squareSize + squareSize / 2, startY + squareSize * 6 + squareSize / 2); // White pawn emoji\n }\n\n // Draw black pawns on row 1 (index 6)\n for (let col = 0; col < 8; col++) {\n textSize(squareSize * 0.5); // Set the size of the emoji\n textAlign(CENTER, CENTER); // Center the emoji\n\n // Draw thicker black outline for black pawn\n fill(255); // White color for outline\n for (let offset of [-1, 1]) { // Draw outline in 4 surrounding positions\n text('♟', startX + col * squareSize + squareSize / 2 + offset, startY + squareSize * 1 + squareSize / 2);\n text('♟', startX + col * squareSize + squareSize / 2, startY + squareSize * 1 + squareSize / 2 + offset);\n }\n\n // Draw black pawn\n fill(0); // Black color for pawn\n text('♟', startX + col * squareSize + squareSize / 2, startY + squareSize * 1 + squareSize / 2); // Black pawn emoji\n }\n}\n\nfunction initializePieces() {\n const boardSize = min(windowWidth, windowHeight) * 0.8;\n const squareSize = boardSize / 8;\n const startX = (windowWidth - boardSize) / 2;\n const startY = (windowHeight - boardSize) / 2;\n\n const blackPieces = ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'];\n const whitePieces = ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'];\n\n for (let col = 0; col < 8; col++) {\n pieces.push({ type: blackPieces[col], color: 'black', x: startX + col * squareSize, y: startY });\n pieces.push({ type: '♟', color: 'black', x: startX + col * squareSize, y: startY + squareSize });\n pieces.push({ type: whitePieces[col], color: 'white', x: startX + col * squareSize, y: startY + 7 * squareSize });\n pieces.push({ type: '♟', color: 'white', x: startX + col * squareSize, y: startY + 6 * squareSize });\n }\n}\n\nfunction mousePressed() {\n const squareSize = min(windowWidth, windowHeight) * 0.8 / 8;\n const clickedX = mouseX;\n const clickedY = mouseY;\n\n pieces.forEach(piece => {\n const pieceCenterX = piece.x + squareSize / 2;\n const pieceCenterY = piece.y + squareSize / 2;\n\n if (dist(clickedX, clickedY, pieceCenterX, pieceCenterY) < squareSize / 2) {\n selectedPiece = piece;\n }\n });\n}\n\nfunction mouseReleased() {\n if (selectedPiece) {\n const boardSize = min(windowWidth, windowHeight) * 0.8;\n const squareSize = boardSize / 8;\n const startX = (windowWidth - boardSize) / 2;\n const startY = (windowHeight - boardSize) / 2;\n\n const newCol = Math.floor((mouseX - startX) / squareSize);\n const newRow = Math.floor((mouseY - startY) / squareSize);\n\n if (newCol >= 0 && newCol < 8 && newRow >= 0 && newRow < 8) {\n selectedPiece.x = startX + newCol * squareSize;\n selectedPiece.y = startY + newRow * squareSize;\n }\n\n selectedPiece = null;\n }\n}\n\nfunction drawPieces() {\n textSize(min(windowWidth, windowHeight) * 0.8 / 16);\n textAlign(CENTER, CENTER);\n\n pieces.forEach(piece => {\n // Draw the outline\n fill(0); // Black color for outline\n text(piece.type, piece.x + min(windowWidth, windowHeight) * 0.8 / 16 + 1, piece.y + min(windowWidth, windowHeight) * 0.8 / 16 + 1);\n\n // Draw the piece\n if (piece.color === 'black') {\n fill(0);\n } else {\n fill(255);\n }\n text(piece.type, piece.x + min(windowWidth, windowHeight) * 0.8 / 16, piece.y + min(windowWidth, windowHeight) * 0.8 / 16);\n });\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Chess Explorer\n \n \n \n \n\n\n \n\n"},"chat_history":[{"message":"add a way to move the pieces","project_id":10892,"created_at":"2025-12-11T21:56:28.427214Z","output_tokens":null,"sender":"human","code_id":307905,"deleted":0,"input_tokens":null,"id":186643},{"message":"

\n# Reasoning\nTo add the ability to move the pieces, we need to track the position of each chess piece and allow the user to select and move them with mouse clicks. We can achieve this by storing the position of each piece in an array, detecting mouse clicks on the pieces, and updating their positions when moved.\n

\n\n

\n# Answer: \n

\n\nWe can definitely add functionality to move the pieces. Let's start by implementing a way to select and move the pieces with mouse interactions.\n\n```javascript\n// script.js\nlet pieces = [];\nlet selectedPiece = null;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n initializePieces();\n drawChessBoard();\n drawPieces();\n}\n\nfunction initializePieces() {\n const boardSize = min(windowWidth, windowHeight) * 0.8;\n const squareSize = boardSize / 8;\n const startX = (windowWidth - boardSize) / 2;\n const startY = (windowHeight - boardSize) / 2;\n \n const blackPieces = ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'];\n const whitePieces = ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'];\n\n for (let col = 0; col < 8; col++) {\n pieces.push({ type: blackPieces[col], color: 'black', x: startX + col * squareSize, y: startY });\n pieces.push({ type: '♟', color: 'black', x: startX + col * squareSize, y: startY + squareSize });\n pieces.push({ type: whitePieces[col], color: 'white', x: startX + col * squareSize, y: startY + 7 * squareSize });\n pieces.push({ type: '♟', color: 'white', x: startX + col * squareSize, y: startY + 6 * squareSize });\n }\n}\n\nfunction draw() {\n background(135, 206, 235);\n drawChessBoard();\n drawPieces();\n}\n\nfunction drawPieces() {\n textSize(min(windowWidth, windowHeight) * 0.8 / 16);\n textAlign(CENTER, CENTER);\n\n pieces.forEach(piece => {\n if (piece.color === 'black') {\n fill(0);\n } else {\n fill(255);\n }\n text(piece.type, piece.x + min(windowWidth, windowHeight) * 0.8 / 16, piece.y + min(windowWidth, windowHeight) * 0.8 / 16);\n });\n}\n\nfunction mousePressed() {\n const squareSize = min(windowWidth, windowHeight) * 0.8 / 8;\n const clickedX = mouseX;\n const clickedY = mouseY;\n\n pieces.forEach(piece => {\n const pieceCenterX = piece.x + squareSize / 2;\n const pieceCenterY = piece.y + squareSize / 2;\n\n if (dist(clickedX, clickedY, pieceCenterX, pieceCenterY) < squareSize / 2) {\n selectedPiece = piece;\n }\n });\n}\n\nfunction mouseReleased() {\n if (selectedPiece) {\n const boardSize = min(windowWidth, windowHeight) * 0.8;\n const squareSize = boardSize / 8;\n const startX = (windowWidth - boardSize) / 2;\n const startY = (windowHeight - boardSize) / 2;\n\n const newCol = Math.floor((mouseX - startX) / squareSize);\n const newRow = Math.floor((mouseY - startY) / squareSize);\n\n if (newCol >= 0 && newCol < 8 && newRow >= 0 && newRow < 8) {\n selectedPiece.x = startX + newCol * squareSize;\n selectedPiece.y = startY + newRow * squareSize;\n }\n\n selectedPiece = null;\n }\n}\n```\n\n- Added an array `pieces` to store the position, type, and color of each piece on the board.\n- Implemented `initializePieces` to populate the `pieces` array with initial positions.\n- Updated `drawPieces` to render pieces based on their stored positions.\n- Added `mousePressed` to detect when a piece is clicked on.\n- Added `mouseReleased` to move the selected piece to a new position based on the mouse release location.","project_id":10892,"created_at":"2025-12-11T21:56:28.689403Z","output_tokens":912,"sender":"ai","code_id":307905,"deleted":0,"input_tokens":3705,"id":186644},{"message":"add thin black outlines to the pieces","project_id":10892,"created_at":"2025-12-11T21:57:53.226323Z","output_tokens":null,"sender":"human","code_id":307918,"deleted":0,"input_tokens":null,"id":186645},{"message":"

\n# Reasoning\nTo add thin black outlines to the pieces, we can draw the text with a slightly larger shadow underneath each piece. This involves drawing the piece with a black color first, slightly offset, and then drawing the piece again with its actual color on top.\n

\n\n

\n# Answer: \n

\n\nLet's update the `drawPieces` function to add thin black outlines to the chess pieces.\n\n```javascript\n// script.js\nfunction drawPieces() {\n textSize(min(windowWidth, windowHeight) * 0.8 / 16);\n textAlign(CENTER, CENTER);\n\n pieces.forEach(piece => {\n // Draw the outline\n fill(0); // Black color for outline\n text(piece.type, piece.x + min(windowWidth, windowHeight) * 0.8 / 16 + 1, piece.y + min(windowWidth, windowHeight) * 0.8 / 16 + 1);\n \n // Draw the piece\n if (piece.color === 'black') {\n fill(0);\n } else {\n fill(255);\n }\n text(piece.type, piece.x + min(windowWidth, windowHeight) * 0.8 / 16, piece.y + min(windowWidth, windowHeight) * 0.8 / 16);\n });\n}\n```\n\n- The `drawPieces` function now first draws each piece slightly offset with a black fill to create a thin outline.\n- It then draws the piece in its actual color at the intended position, creating the effect of an outline.","project_id":10892,"created_at":"2025-12-11T21:57:53.351102Z","output_tokens":333,"sender":"ai","code_id":307918,"deleted":0,"input_tokens":3850,"id":186646}],"assets":[],"messages_sent":13,"comments":[],"steps":[]}