Chessboard custom component

Show and Tell
#1

I was looking for something to build to make a little practice on interaction with Javascript and related event-handling.
As a chess enthusiast I finally ended up trying to build an Anvil wrapper to the excellent Chessboard.js javascript chessboard-management library.
Have a look at https://chessboardjs.com/ to have an idea of this component.
Yet far to be complete, I built an Anvil’s custom component that should be a wrapper over Chessboard.js properties, methods and events explained in their Examples page.
The exercise was not easy at all :sweat_smile:.
Here’s my CopyApp link for the component’s demo:

https://anvil.works/build#clone:7ZFOXGGGHPCI6BTB=35B3VVPQJ4IXT4LWDXLQN4HI

I think this is a pretty cool component to share, maybe someone can build something interesting on it.

Notes for myself on things still to complete, to clarify, to improve or to understand better:

  • Put in MIT License’s preservation of copyright and license notices
  • Complete with all the properties, methods, events and error handling listed in their Docs page
  • question on Anvil Custom Component’s event names: all events in Anvil are named like “x-eventname” but when you name a custom event in a custom component you cannot use the “-”: it gets converted to “_”. So my events are all named like “x_onchange”. Not a big problem, I am just curious to know why.
  • question on Anvil Custom Component’s properties declaration: I declared a “config” property on the custom component’s config form (CCCF), but in the code I defined also a “position” property. Form1 (the caller of the custom component) has no trouble at all at setting and reading “position” property too, despite it’s not defined. So I wonder what’s the CCCF useful for.
  • flip doesn’t work
  • position property setter calls a JS function that can have 1 or 2 parameters. I wanted (but wasn’t able) to translate this into property setting (so I had to create set_position_instantly method to accomodate the 2 parameters version). Is there a more elegant way to do that?
  • config management: I decided to expose an object in the config property to mimic chessboardjs. Maybe I should expose the single properties.
  • find a PGN Management and chess game management component to integrate, like the chess.js library.
6 Likes
#2

That is very cool!

#3

Here’s my understanding of the difference:

Properties defined on the component’s config form will show up as properties in the dashboard for that component when it’s dropped on another form (just under the data bindings section).

Properties defined in Python but not on the config form won’t show up there.

Great idea for custom component!

2 Likes
#4

I got flip to work by changing the JS line to board.flip();, adding the parentheses.

2 Likes
#5

I got flip to work by changing the JS line to board.flip(); , adding the parentheses.

Oh ok thanks, I just followed their example
$('#flipOrientationBtn').on('click', board.flip)
on this page without switching my brains on and/or checking their official Docs\Methods specs page…

Thanks Tim

1 Like