Issue when trying to wrap react-chessboard package: return value of event handler

Help
1

I’m very new to reflex and I’m trying to wrap the react-chessboard package. (react-chessboard - npm) I’ve been able to wrap the package so that I can include a chessboard in a page but when trying to integrate the chessboard-component with the python-chess library I’m running into an issue.

I see that the original react component has an onPieceDrop property which should be a function: (sourceSquare, targetSquare, piece) => true. Which should return true or false. The return value indicates if the move was successful or not. So I wrapped the onPieceDrop property this way:

on_piece_drop: rx.EventHandler[lambda source_square, target_square, piece: [source_square, target_square, piece]]

and implemented an event handler that integrates the python-chess module to check if a move is valid or not. But I can’t seem to return a boolean value from this event handler to tell the react-chessboard component to accept the move.

This is my wrapped component:

import reflex as rx

class Chessboard(rx.Component):
    """ A chessboard component."""

    library = "react-chessboard"
    tag = 'Chessboard'

    allow_drag_outside_board: rx.Var[bool]
    animation_duration: rx.Var[int]
    are_arrows_allowed: rx.Var[bool]
    are_pieces_draggable: rx.Var[bool]
    are_premoves_allowed: rx.Var[bool]
    auto_promote_to_queen: rx.Var[bool]
    board_orientation: rx.Var[str]
    position: rx.Var[str]
    show_promotion_dialog: rx.Var[bool]
    custom_square_styles: rx.Var[dict]

    on_piece_drop: rx.EventHandler[lambda source_square, target_square, piece: [source_square, target_square, piece]]
    on_square_click: rx.EventHandler[lambda square, piece: [square, piece]]


chessboard = Chessboard.create

and my integration with the python-chess library:


    def on_drop(self, source_square: str, target_square: str, piece: str):
        move = chess.Move.from_uci(source_square + target_square)
        if move not in self._board.legal_moves:
            move.promotion = chess.Piece.from_symbol(piece[1]).piece_type
        if move in self._board.legal_moves:
            self._board.push(move)
            self.fen = self._board.fen()

            # This return results in a backend-error..
            return True

What am I missing here? How do I return a value to the react-component?

2

There’s no easy way to have an event handler return a value to the property.

3

Is there a hard way?

4

So if I’m understanding correctly, you want to call a python function when that function is called, and return the result of that python function over network to the JS-world to return the function result.

The issue with this is there’s no notion of “returning” a value of event handlers. To achieve this behavior, lots of changes needs to happen in reflex (although might not be technically impossible). As such, in the current time, you would need to implement that functionality mostly in Javascript.

Another way to do this would be to override behavior of react-chessboard so you’re passing something like, is_invalid, as a property, and when you receive an on_piece_drop event you can write to that property. Although I assume changing behavior of react-chessboard is outside the scope of what you want to do.