Implement blocker assignment

[norswap]

Blocker selection resembles attacker selection but with the added difficulty that each blocker must be matched to an attacker.

To assign a defender, drag from the defender to the attacker to block (these should be highlighted with a glow). The dragging should create an arrow whose head follows the mouse cursor. Upon making a valid assignment (dragging from non-previously attacking creatures on your side to an attacking creature on the other side, then releasing), the arrow settles in place between the center of the defender and the center of the attacker and becomes permanent. If you start re-dragging from the same creature, the old arrow vanishes and you can make another assignment instead.

This kind of thing is implement in another card game called alketh (github, frontend), which can be used as inspiration (with the blessing of the creator).

Once satisfied with the blocker assignment, a "start fight" button can be pressed.

[norswap]

Some research on this:

• code for drawing arrows in alketh
  • useful, but limited, because having re-tried the frontend, it only draws the arrows after dropping the attacking card on top of the defending card (i.e. there is not arrow being drawed as we dragged, which is what I want)
• react-xarrows to draw arrows between a pair of components
  • not sure this is what we want because not sure if we can get the arrow head to follow the mouse cursor loosely, or wether it can work with normal components that are not within a canvas
• vanilla javascript approach
  • we can definitely make that one work with react — the example is janky but it's a good starting point
• dnd kit
  • doesn't support arrows, but we'll need drag and drop for other things (like playing cards)
  • seems like the most polished drag and drop lib for React
  • examples