chess-app's Issues
Jan 26 '24 - working fen and boardState
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 4dcb439..4451523 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -2,19 +2,20 @@ module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
- 'eslint:recommended',
- 'plugin:react/recommended',
- 'plugin:react/jsx-runtime',
- 'plugin:react-hooks/recommended',
+ "eslint:recommended",
+ "plugin:react/recommended",
+ "plugin:react/jsx-runtime",
+ "plugin:react-hooks/recommended",
],
- ignorePatterns: ['dist', '.eslintrc.cjs'],
- parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
- settings: { react: { version: '18.2' } },
- plugins: ['react-refresh'],
+ ignorePatterns: ["dist", ".eslintrc.cjs"],
+ parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+ settings: { react: { version: "18.2" } },
+ plugins: ["react-refresh"],
rules: {
- 'react-refresh/only-export-components': [
- 'warn',
+ "react/prop-types": "off",
+ "react-refresh/only-export-components": [
+ "warn",
{ allowConstantExport: true },
],
},
-}
+};
diff --git a/src/components/Board/Board.css b/src/components/Board/Board.css
index db19907..03afe72 100644
--- a/src/components/Board/Board.css
+++ b/src/components/Board/Board.css
@@ -41,3 +41,13 @@
flex-direction: column;
gap: 5rem;
}
+
+.square {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.piece {
+ font-size: 10rem;
+}
diff --git a/src/components/Board/Board.jsx b/src/components/Board/Board.jsx
index 9ccb5d7..849fad4 100644
--- a/src/components/Board/Board.jsx
+++ b/src/components/Board/Board.jsx
@@ -1,5 +1,7 @@
import "./Board.css";
import { useState } from "react";
+import { initialBoardState } from "./consts";
+import Input from "../Input";
const rows = Array(8)
.fill()
@@ -14,46 +16,37 @@ const getColorClass = (i, j) => {
return x;
};
-export default function Board() {
- const [fen, setFen] = useState("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR");
- const [inputFen, setInputFen] = useState("");
-
- const handleInputChange = (e) => {
- setInputFen(e.target.value);
- };
+const fenToAscii = {
+ P: "♙", // White Pawn
+ N: "♘", // White Knight
+ B: "♗", // White Bishop
+ R: "♖", // White Rook
+ Q: "♕", // White Queen
+ K: "♔", // White King
+ p: "♟", // Black Pawn
+ n: "♞", // Black Knight
+ b: "♝", // Black Bishop
+ r: "♜", // Black Rook
+ q: "♛", // Black Queen
+ k: "♚", // Black King
+};
- const handleSetFen = () => {
- setFen(inputFen);
- };
+export default function Board() {
+ const [boardState, setBoardState] = useState(initialBoardState);
const renderSquareContent = (piece) => {
- if (isNaN(parseInt(piece, 10))) {
- // If it's a piece, render it
- return piece !== "8" && <div className="piece">{piece}</div>;
+ if (piece === " ") {
+ // If an empty string, its an empty square
+ return <div className="piece empty-square" />;
} else {
- // If it's a number, render the appropriate number of empty squares
- const emptySquares = parseInt(piece, 10);
- return Array(emptySquares)
- .fill(null)
- .map((_, index) => (
- <div key={`empty-${index}`} className="piece empty-square" />
- ));
+ // If its not, its an actual piece
+ return <div className="piece">{fenToAscii[piece]}</div>;
}
};
return (
<div className="super-board">
- <div className="input-container">
- <label htmlFor="fenInput">Enter FEN Notation:</label>
- <input
- type="text"
- id="fenInput"
- value={inputFen}
- onChange={handleInputChange}
- placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR"
- />
- <button onClick={handleSetFen}>Set FEN</button>
- </div>
+ <Input setBoardState={setBoardState} />
<div className="board">
<div className="ranks">
{rows.map((row) => (
@@ -61,10 +54,10 @@ export default function Board() {
))}
</div>
<div className="squares">
- {rows.map((row, i) =>
- cols.map((col, j) => (
- <div key={row + "-" + col} className={getColorClass(9 - i, j)}>
- {renderSquareContent(fen.split("/")[i].charAt(j))}
+ {boardState.map((row, i) =>
+ row.map((piece, j) => (
+ <div key={i + "-" + j} className={getColorClass(9 - i, j)}>
+ {renderSquareContent(piece)}
</div>
))
)}
diff --git a/src/components/Board/consts.js b/src/components/Board/consts.js
new file mode 100644
index 0000000..8211c68
--- /dev/null
+++ b/src/components/Board/consts.js
@@ -0,0 +1,25 @@
+export const createBoardStateFromFen = (fen) => {
+ console.log("fen", fen);
+ const boardState = fen.split("/").map((line) => {
+ const newLine = [];
+
+ for (let char of line) {
+ const charAsNumber = parseInt(char, 10);
+ if (isNaN(charAsNumber)) {
+ newLine.push(char);
+ } else {
+ for (let i = 0; i < charAsNumber; i++) {
+ newLine.push(" ");
+ }
+ }
+ }
+
+ return newLine;
+ });
+
+ console.log("boardState", boardState);
+ return boardState;
+};
+
+export const initialStateFen = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR";
+export const initialBoardState = createBoardStateFromFen(initialStateFen);
diff --git a/src/components/Input.jsx b/src/components/Input.jsx
index 92625c5..c3dd00b 100644
--- a/src/components/Input.jsx
+++ b/src/components/Input.jsx
@@ -1,25 +1,28 @@
import { useState } from "react";
+import { createBoardStateFromFen, initialStateFen } from "./Board/consts";
-export default function Input() {
- const [fen, setFen] = useState("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR");
- const [inputFen, setInputFen] = useState("");
+export default function Input({ setBoardState }) {
+ const [inputFen, setInputFen] = useState(initialStateFen);
const handleInputChange = (e) => {
setInputFen(e.target.value);
};
const handleSetFen = () => {
- setFen(inputFen);
+ setBoardState(createBoardStateFromFen(inputFen));
};
- <div className="input-container">
- <label htmlFor="fenInput">Enter FEN Notation:</label>
- <input
- type="text"
- id="fenInput"
- value={inputFen}
- onChange={handleInputChange}
- placeholder="e.g., rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR"
- />
- <button onClick={handleSetFen}>Set FEN</button>
- </div>;
+
+ return (
+ <div className="input-container">
+ <label htmlFor="fenInput">Enter FEN Notation:</label>
+ <input
+ type="text"
+ id="fenInput"
+ value={inputFen}
+ onChange={handleInputChange}
+ placeholder="e.g., rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR"
+ />
+ <button onClick={handleSetFen}>Set FEN</button>
+ </div>
+ );
}
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.