Place pieces anywhere.

[bradintheusa]

If I set movable: { free: true,}, I can move a piece where I want but then it seems to turn off and I can't move any more pieces. Is there a way to keep it on?

[gavin-lb]

Your issue is caused because the current implementation of the .move api method doesn't work well with movable.free === true configs. Indeed, there is a "TODO:" comment left there to fix it.

Invalid moves will cause the internal chess.js game to throw an error and will terminate the method early. This creates several issues:

• a move/promotion event won't be emitted
• the board won't be updated in the case of promotions or en passant captures
• the game state will not be updated, which has several subeffects:
  • the board's turnColor won't be updated
  • if no playerColor prop is given, the board's movable color won't be updated (this is the direct cause of your problem)
  • the destinations won't be updated
  • the kings check display won't be updated
  • if showThreats is enabled, it won't be updated
• premoves won't be played

The solution to this is to properly handle the exception instead of just terminating the method. It would require keeping the chess.js in sync with board, even when an illegal move is played. This can be done manually with chess.js .put and .remove api methods, but it will be annoying to do and will create more problems (chess.js history does not work well when putting/removing) that will also need to be fixed.

I might implement the fix, but I don't know how speedy it will be because I don't need to use this feature so it is not a priority for me. But I would encourage your to implement it yourself if you want!

A work around to at least make the board more functional (albeit still with most of the problems mentioned above) is to set the playerColor prop to 'both', eg.

<script setup lang="ts">
import '@/assets/board.css';
import { TheChessboard, type BoardApi, type BoardConfig } from '@/index';

let boardAPI: BoardApi | undefined;

const boardConfig: BoardConfig = {
  movable: { free: true },
};
</script>

<template>
  <TheChessboard
    :board-config="boardConfig"
    player-color="both"
    @board-created="(api) => (boardAPI = api)"
  />
</template>

This will allow you to move the pieces freely, but you will still encounter a lot of issues if you try to play a game.

[qwerty084]

Yea, thanks for the detailed explanation. I didn't know it works with setting the player color, then #217 is useless (atleast now it works without setting the player-color...)

But to fix the issue we probably need chess.js to allow illegal moves in the .move method, handling all the edge cases you described above is really annoying.

[gavin-lb]

Well, definitely I think chess.js has no intention of allowing illegal moves. I've contributed a little to chess.js and so I've taken a look at all the codebase and it would be quite a radical change to allow illegal moves.

That is really what their put/remove methods are for. However, using these has their own problems because they don't work well with chess.js internal game history, so we'd have to store our own version of the history instead of using chess.js methods.

I did write a PR that (among other things) fixes the history problems on chess.js side, but it's been sitting in limbo for a while so doesn't really look like it'll be accepted.

[bradintheusa]

Much appreciated. Thanks for the response. Let me try those suggestions.

[qwerty084]

@bradintheusa did you get it to work for your needs?

[bradintheusa]

Not yet. I'm still deciding on the best way to do it.

[qwerty084]

Im going to close this for now, since it technically works. If you can't find a good way fix your case, please reopen the issue.