Custom widget for chess board

Hi, I am working on a chess GUI for a pet project (a naive Chess engine to learn rust). I tried to learn something from the Offline Chess Puzzles app, but the code base is relatively large for a begginer.

I worked a bit with GTK Apps, so I thought I should create my own widget for the checkerboard, so I started to draw a simple square, which works:

    impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Board<'_>
        where
            Renderer: renderer::Renderer,
    {
        fn size(&self) -> Size<Length> {
            Size {
                width: Length::Fill,
                height: Length::Fill,
            }
        }

        fn layout(
            &self,
            _tree: &mut Tree,
            _renderer: &Renderer,
            _limits: &layout::Limits,
        ) -> Node {
            Node::new(Size::new(self.width, self.height))
        }

        fn draw(&self, _tree: &Tree, renderer: &mut Renderer, _theme: &Theme, _style: &Style, layout: Layout, _cursor: Cursor, _viewport: &Rectangle) {
            renderer.fill_quad(
                renderer::Quad {
                    bounds: layout.bounds(),
                    border:  Border::default(),
                    shadow:  Shadow::default(),
                },
                Color::BLACK
            );
        }
    }

However, I am struggling to understand what to do next? Is it possible to draw a more than one Quad at a time? Do I have to implement my own Quad?

Should I switch to svg + canvas? or something like that?

Hi,

The code to draw the board in “offline-chess-puzzles” is here: offline-chess-puzzles/src/main.rs at b59a159b017daa13b1c7733f55e642d82d62d002 · brianch/offline-chess-puzzles · GitHub

It’s a bit long, but that’s mostly due to specific details (making it flipable, showing or not coordinates, drawing with SVGs or a font, etc).

But the squares are just buttons with an SVG inside and organized in rows and columns, there’s nothing special.

As I mentioned in the readme there, I used the GUI example of the chess-engine project as a starting point, which uses this approach, I’m not an advanced Iced user either, so that was way easier for me than trying to create a specific widget.