alexobviously/squares

A flexible chessboard widget for Flutter

A flexible chessboard widget for Flutter.

Squares is a chessboard like you've never seen before. Or more accurately, it is a chessboard very much like the ones you have seen before, but one that can do a pretty wide variety of things.

It is a UI package only, meaning it doesn't handle game logic. The Bishop package is recommended for game logic, and there is also a small interoperability package, Square Bishop that provides convenience methods for common type, a state for Squares to use, and extension methods on Bishop.Game that generate it.

There are two examples: a simple one in around 100 lines, and a more complex and featureful app that demonstrates the various features of Squares in a realistic architecture.

Squares has a stateless Board widget that can used to display a complete board representation, and can be integrated at a low level with your own UI logic. However, the more likely use case involves the BoardController widget, which implements all of the piece selection and movement logic you're likely to need, including premoves and piece promotion.

Features

• Highlighting previous moves, possible moves, check/checkmate
• Board themes

• Marker themes

• Piece animations

• Premoves

• Supports arbitrary board sizes and pieces

• Piece promotion

• Flexible piece set definitions - any widget will do, use an svg, image asset, text, etc

• Dropping pieces from hands (à la Crazyhouse)

squares's Issues

Skipping of move animation

Hi Alex,

I am experiencing a display issue with the squares chessboard when programmatically making a move. I use the makeMove command on the corresponding bishop instance and update the SquaresState. Sometimes, the move animation is skipped. As you can see in the video, this seems to be randomly on specific moves, however it then repeats when I use the undo command and repeat the specific move:

WhatsApp.Video.2024-01-30.at.10.49.02_62514847.mp4

Here, it is for instance the knight move to B6, where the animation is simply skipped. I have increased the animation duration to make it more visible. As there is no difference between how I execute the different moves, I am a bit confused why this is happening sometimes.

Do you have any idea what could be the reason here? Have you faced something similar in the past?

Thanks in advance for any advise!

childWhenDragging doesn't display when pieces are being dragged

I think the reason is that when the piece starts being dragged, it causes Board to rebuild, which draws the piece again, drawing the new widget over the top of the childWhenDragging.

Rank and file numbers on board

Can be included in BoardBackground I think, no need for another layer.

Annotation layer

Would be pretty useful to have a simple widget for drawing annotations like arrows, custom highlights etc.

Piece selector customisation

Currently the piece selector is kind of the weakest point in the package in terms of customisability.

We probably want to support a few things:

• Customising the appearance of the built in piece selector (basic stuff like square colours, borders, etc)
• Horizontal orientation
• Anchoring the selector in the centre of the board instead of on the square (for promo only I guess?)
• Padding, different spacing or arrangement of pieces
• Maybe the ability to totally override the show piece selector functionality in BoardController with custom logic (for cases where you might want to show a modal, for example, or for custom game logic)

It could just be that we allow overriding the piece selector building functionality entirely, but there's a lot of logic there and that it's probably worth coming up with a better solution. Maybe PieceSelector should be a more modular design that accepts a builder function with a list of piece widgets (how to allow overriding their size without making it complex?) and the theme etc

Corner triangles marker for marked pieces

Like this on lichess:

Allow pre-moves with drag gesture and not only tap gesture.

As the title states, it would be nice if we could add pre-moves with drag gestures and not only tap gestures.

Improved animation system

• Should be about to animate multiple pieces at once
• Support a way to animate between two arbitrary positions
• Should be able to specify animations independent of last move (e.g. for animating undos, so the squares don't get highlighted as last move)
• Should also support the simpler use case without extra work

Write a new readme

The current one is like 2 years old, and a) doesn't cover most features and b) isn't very descriptive.

Allow for unplayable space on the board, e.g. the river in Xiangqi

Prediction move issue

When it's not my turn and I click on any piece. it show me the move of this piece like there is no other piece on the table (when it's. not my turn) but if do. this and my turn comes, it keep showing that.
like shower in. the video

Screen.Recording.2023-04-01.at.09.43.56.mov

Enhancements for chess board graphics

Enhancements for chess board graphics:

• possibility to define a border for a square on the chessboard, to make even colorless chessboards - small chess diagrams or for playing shogi and other games.

• possibility to make the squares on the chessboard blank and to draw the whole custom background of the chessboard. This could also support XiangQi, where stones are placed on the intersections.

Or solve this by allowing a custom implementation of the BoardBackground class.

Overflow errors when resizing the board

This isn't a major problem, but is one that's been bugging me for some time while developing,
in my project i wrap the Board widget in a Flexible widget to make it's size responsive and adapt to the available space on the screen, but in debug mode when i resize the screen there will be a split second in which the board overflows and overflow errors are logged into the console... i have looked a bit into it and at first i thought i was doing something wrong, or that this was related by the interaction between Flexible and AspectRatio which is the first layer of Board... but then i tested it with simple containers and they don't overflow when they are inserted into Flexible and AspectRatio... looking this up online i found resources suggesting to use OverflowBox or even combine it with IntrinsicWidth and IntrinsicHeight but i couldn't make this work without losing some of the Flexible features... so now i'm thinking that the problem should be further down the tree maybe LayoutBuilder or Stack are failing to update properly... anyway if you have any solution to this please let me know

Here is a flutter issue describing a similar problem: flutter/flutter#100789

I will keep updating with what i find:
Update 1: i have isolated the problem to be within BoardBackground, if i replace it with a Container i don't see overflow errors anymore and everything else works fine

Update 2: i fixed the problem by changing the AnimatedContainer to a simple Container in board_background.dart i'm opening a PR for this, everything seems to work fine for my use case but i'm not sure if this breaks some other requirement

Trouble adding undo / redo

Heyo,

first off, thanks a lot publishing this flutter chess project.
I have been tinkering around a bit to develop a undo / redo button and 2-player mode (so without the AI) and started with the undo button but can't seem to figure out a previous state can be set.
What I tried:

• Creating a List of BoardControllers inside game_page.dart
• Creating a list of GameControllers inside game_page.dart
• Just making a "reverse" move in makeMove inside game_controller.dart

Just wanted to ask how you would approach such task,

Unexpected size of chessboard in squares simple and complex examples

I am interested in creating an app for teaching the 3-check variant of chess and I have been looking for an appropriate framework. Your Dart/Flutter framework is very interesting. I am an experienced Delphi developer, but brand new to Dart/Flutter. I have been reading books on both Dart and Flutter to come up to speed. I am using the Microsoft Visual Studio Code IDE at the moment.

I was able to get both example programs to build and open in Windows 11. I didn't change any code. Visual Studio suggested that a few lines needed trailing commas and I allowed it to fix that syntax. The problem is that the chessboard and pieces are way too large (please see screenshots) and therefore you can only see the black pieces. I am hoping for a chessboard about the size of a "Lichess" chessboard. On the bottom of the simple example it says "Bottom overflowed by 1134 pixels" and at the bottom of the Complex Example after creating a game (I was slightly disappointed that 3-check didn't appear in the drop-down list but I imagine it can be added), it says "Bottom overflowed by 848 pixels." Visual studio Code seemed to indicate some kind of formatting error in the complex example (see screenshot) and I took a screenshot of something similar in the simple example.

Would you be able to point out what I should do to fix this?





Thank you.

Display translucent piece for premove promotion/gating

After setting a premove that includes a piece selection (e.g. promotion), the board should display a translucent version of the selected piece on that square.

Technical: create another layer in Board that goes above everything - BoardOverlay. This can also contain annotation arrows etc later.