Make ChessSquare a stateful widget.

lib/chess/chess_square.dart

@@ -1,8 +1,10 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:mchess/chess/chess_square_outer_dragtarget.dart';
+import 'package:mchess/chess_bloc/chess_bloc.dart';
 import '../utils/chess_utils.dart';
 
-class ChessSquare extends StatelessWidget {
+class ChessSquare extends StatefulWidget {
   final ChessCoordinate coordinate;
   final ChessPiece? containedPiece;
   static const double pieceWidth = 200;
@@ -46,13 +48,35 @@ class ChessSquare extends StatelessWidget {
     );
   }
 
+  @override
+  State<ChessSquare> createState() => _ChessSquareState();
+}
+
+class _ChessSquareState extends State<ChessSquare> {
+  late Color squareColor;
+
+  @override
+  void initState() {
+    squareColor = widget.color;
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Container(
-    color: color,
+    return BlocListener<ChessBloc, ChessBoardState>(
+      listenWhen: (previous, current) {
+        return true;
+      },
+      listener: (context, state) {
+          setState(() {
+                      squareColor = Colors.red;
+                    });},
+      child: Container(
+        color: widget.color,
         child: ChessSquareOuterDragTarget(
-          coordinate: coordinate,
-          containedPiece: containedPiece ?? const ChessPiece.none()),
+            coordinate: widget.coordinate,
+            containedPiece: widget.containedPiece ?? const ChessPiece.none()),
+      ),
     );
   }
 }