- Fix: vertical promotion dialog bottom overflow #180
Conversation
Epitomaniac
commented
Jan 9, 2025
Epitomaniac
commented
- Vertical promotion dialog no longer overflows out of the board on bottom rank promotions.
- Small change making the order of promotion piece icons reversed on bottom rank promotions.
… on bottom rank promotions
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| (boardOrientation === "white" && promoteToSquare?.[1] === "1") || | ||
| (boardOrientation === "black" && promoteToSquare?.[1] === "8"); |
There was a problem hiding this comment.
what happens if the board is more than 8x8? (see #174)
I think we may need to add a new property/properties to allow users to set the promotion rank for each colour, and default it to normal values
There was a problem hiding this comment.
As long as we have access to the number of ranks, we can set its value for black and 1 for white. I don't think a new property is required unless there's a variant that allows promotion on a rank that's not the first or the last one?
There was a problem hiding this comment.
Also, the calculation for translate effect assumes the board to be 8 by 8, so this also needs to change for custom boards based on the board dimentions.
transform: translate(${-boardWidth / 16}px, ${-boardWidth / 16}px)
| { | ||
| // Reversing the order in which piece icons appear for vertical dialog if promotion occurs on the bottom rank | ||
| isBottomRank && promotionDialogVariant === "vertical" | ||
| ? promotionOptions | ||
| .reverse() | ||
| .map((option) => <PromotionOption key={option} option={option} />) | ||
| : promotionOptions.map((option) => ( | ||
| <PromotionOption key={option} option={option} /> | ||
| )) | ||
| } |
There was a problem hiding this comment.
the logic for this can sit outside the JSX to make it look a bit tidier
const orderedPromotionOptions = isBottomRank && promotionDialogVariant === "vertical"
? promotionOptions.reverse()
: promotionOptions
