chess.js: Move validation not working correctly

Question

I am trying to make a chess game in react.js using the libraries chess.js and chessboard.jsx

Currently i am trying to implement move validation with the following code :-

import "./App.css";
import React, { useState } from "react";
import Chessboard from "chessboardjsx";
import * as ChessJS from "chess.js"; // import { Chess } from 'chess.js' gives an error

function App() {
  const Chess = typeof ChessJS === "function" ? ChessJS : ChessJS.Chess; // For VS code intellisence to work
  const game = new Chess();

  const [position, setPosition] = useState("start");

  const onDropMove = ({ sourceSquare, targetSquare }) => {
    const move = game.move({
      from: sourceSquare,
      to: targetSquare,
      promotion: "q",
    });

    if (move === null) return;

    setPosition(game.fen());
  };

  return <Chessboard position={position} onDrop={onDropMove} />;
}

export default App;

But the problem coming is:- For example: - When i move white pawn from g2 to g3 it works but then if i try to move the black pawn from g7 to g6, it counts it as an illegal move(i checked by console.log(move)) although it is legal.

I don't have any idea why this is occurring. Also, I did not find any answers online regarding this issue

Do you have to explicitly change the turn from white to black after the first move? That second move would be invalid if it were still evaluating as a white move. — DaveHowell
– DaveHowell, Commented Dec 22, 2020 at 6:03
No, i checked the turn was of black by console.log(game.turn()); — Ajitesh Irij
– Ajitesh Irij, Commented Dec 22, 2020 at 6:04

WhiteFire356 · Accepted Answer · 2021-08-09 19:20:02Z

3

I know this is an old question, but here's a solution.

Basically, just define the chess.js API as follows:


const [game, setGame] = useState();

useEffect(()=>{
    setGame(new Chess())
  }, [])

Hope this helps!! :D

answered Aug 9, 2021 at 19:20

WhiteFire356

1322 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nithin · Accepted Answer · 2021-12-26 12:59:54Z

0

You can also do this when you are defining the state give the game state as new Chess() see code below.

  const [game, setGame] = useState(new Chess());

answered Dec 26, 2021 at 12:59

Nithin

212 silver badges6 bronze badges

Collectives™ on Stack Overflow

chess.js: Move validation not working correctly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related