sarabjits / chess-app

Chess App

Live Demo Here

Learn react by making a simple chess app

General Info

• My goal is to teach myself React by building a small react app. The work is still in progress.

Technologies Used

• HTML5
• CSS
• JavaScript (ES6)
• React

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>
+  );
 }