feat(chess): implement premium board UI, framer-motion drag-and-drop,…

[wendev27]

feat(chess): complete F501 UI overhaul with drag-and-drop and material tracking

• Built custom responsive chessboard using Tailwind CSS and chess.js
• Implemented native HTML5 drag-and-drop with Framer Motion physics
• Swapped text pieces for scalable SVGs with light/dark mode drop-shadows
• Added material advantage calculation and captured pieces UI
• Restructured game screen to a centralized, premium Lichess-style layout
• Refactored game alerts to an always-on status panel
• Fixed clock initialization to start only after the first move

Swapped text pieces for scalable SVGs with light/dark mode drop-shadows

drag-and-drop with Framer Motion physics

Added material advantage calculation and captured pieces UI

game alerts to an always-on status panel for example king is on check

[ianmacalinao5]

I suggest separating the chess types to keep the store cleaner. You could also move the helper code to the utils directory.

[wendev27]

thanks ill be working on it po,currently imm almomst done with the backend rin po ^^ just need to add some exit button

[ianmacalinao5]

I tested the draggable pieces on my end and everything works well. This should be ready to merge once the suggested changes are addressed.

Nice work!

[wendev27]

pushed the updates po. let me know po if there's any more room for improvement ^^
thanks po.

[ianmacalinao5]

pushed the updates po. let me know po if there's any more room for improvement ^^ thanks po.

You can follow din sa next PR mo one of the best practices by applying prefixes sa branch name like fix/, feature/, chore/, and so on.

[wendev27]

will do po thanks po