ps2-controller / react-chess-analysis-board

React component for a fully featured, stylable chess analysis board.
GNU General Public License v3.0
10 stars 4 forks source link

FEN display issue #9

Open mlava opened 4 months ago

mlava commented 4 months ago

Hi there. Great extension, thanks for it. I am trying to implement such that when the board is rendered it is rendered at the point of time suggested by the FEN. The code below isn't working. I just get a board at starting positions... fenString is the FEN obtained from API. Any ideas?

const boardConfig = { fen: fenString };
return (
    <ChessPGNAnalysisBoard
        config={boardConfig}
        pgnString={pgn}
    />
)

If I console.log(boardConfig) I get what looks to be correct:

{ "fen": "rnbqk2r/pppp1ppp/4p3/4P3/3P2Q1/2b5/P1PB1PPP/R3KBNR b KQkq - 1 7" }

If I define as shown const config = {boardConfig}; and console.log I get:

{
    "boardConfig": {
        "fen": "rnbqk2r/pppp1ppp/4p3/4P3/3P2Q1/2b5/P1PB1PPP/R3KBNR b KQkq - 1 7",
        "ChessBoardProps": {}
    }
}

Changing the render return to below doesn't work:

<ChessPGNAnalysisBoard
  config={config}
  pgnString={pgn}
/>

I'm just not sure what I'm doing wrong. Thanks in advance!

ps2-controller commented 4 months ago

Hey Mark - thanks!! I took a look today - it's definitely an issue on my end -- the bug is in the Board component, which ignores the boardConfig and instead prioritizes the position handed to it by the position context, which is unaware of the initial fen config.

I'll try to push a fix in the next few days; I need to refamiliarize myself with the library first.

Just a heads up (noted in the ReadMe), this library isn't maintained right now, and I don't think I'll get a chance to really give it the uplift it deserves any time soon though :(

mlava commented 4 months ago

Thanks @ps2-controller much appreciated. Will appreciate a fix if possible, although I accept it isn't maintained. Cheers!

mlava commented 3 months ago

Hi again @ps2-controller I don't suppose you've had a chance to think on this? Cheers!

ps2-controller commented 3 months ago

He @mlava - thanks for checking in. I took another look today; I made some progress, but not all the way. I'm out of the country for the next few weeks but will try to get another chance to finish this soon. Will keep you posted

ps2-controller commented 3 months ago

@mlava actually, disregard that -- figured out what was wrong. We should be all set now - could you check and make sure your issue is resolved?

mlava commented 3 months ago

@ps2-controller I am now getting an error when I try to npm update or npm install:

`34 verbose stack Error: Invalid tag name "@testing-library" of package "@testing-library": Tags may not have any characters that encodeURIComponent encodes.

34 verbose stack at invalidTagName (/usr/local/lib/node_modules/npm/node_modules/npm-package-arg/lib/npa.js:118:15)

34 verbose stack at fromRegistry (/usr/local/lib/node_modules/npm/node_modules/npm-package-arg/lib/npa.js:406:13)

34 verbose stack at resolve (/usr/local/lib/node_modules/npm/node_modules/npm-package-arg/lib/npa.js:87:12)

34 verbose stack at npa (/usr/local/lib/node_modules/npm/node_modules/npm-package-arg/lib/npa.js:53:10)

34 verbose stack at new OverrideSet (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/override-set.js:20:20)

34 verbose stack at new OverrideSet (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/override-set.js:37:21)

34 verbose stack at new Node (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/node.js:209:26)

34 verbose stack at #newNode (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/load-actual.js:314:12)

34 verbose stack at #loadFSNode (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/load-actual.js:297:29)

34 verbose stack at async #loadActual (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/load-actual.js:129:26)`

ps2-controller commented 3 months ago

Hmm, that's odd, I wasn't able to reproduce that.

Steps I took


import './App.css'
import ChessAnalysisBoard from 'react-chess-analysis-board'

function App() {

  return (
    <>
    <ChessAnalysisBoard
        config = {{
          boardConfig: {
            fen: 'rnbqk2r/pppp1ppp/4p3/4P3/3P2Q1/2b5/P1PB1PPP/R3KBNR b KQkq - 1 7',
            ChessBoardProps: {}
          }
        }}
      />
    </>
  )
}

export default App

Could you:

ps2-controller commented 3 months ago

potentially delete node_modules and yarn.lock / package-lock.json and re-run yarn / npm install?

mlava commented 3 months ago

I think it was an error on my end, sorry. I've managed to update to 0.0.21 now. I am still not seeing the board positioned per the fen. Can you check that the code below looks right:

fenString = "r2qr2k/pp1bn1pp/3p1p2/2pP4/7R/2Q2N2/PB3PPP/5RK1 b - - 1 20";
const boardConfig = { fen: fenString };

return (
    <ChessPGNAnalysisBoard
        config={boardConfig}
        pgnString={pgn}
    />
)
ps2-controller commented 3 months ago

assuming you've declared fenString and pgnString earlier, change config={boardConfig} to config={{boardConfig}}

(as there are other config options you're not using here)

As we discuss, I've discovered one additional small issue.

When loading from a fen, sometimes the first move is a Black move. The move tree currently assumes the first move is a White move. I'll resolve this the next time I'm at my computer.

Other than that, you should still see the move tree generated as you start playing out moves on the board from loading from a fen.

mlava commented 3 months ago

That fixed it.

image

Thanks! Will look forward to the fix soon. Have a good time on your trip.