Skip to content

Implement elastic drag effect for remaining cards after placement#2530

Closed
khushal-winner wants to merge 2 commits intoOWASP:masterfrom
khushal-winner:feature/elastic-drag-effect-clean
Closed

Implement elastic drag effect for remaining cards after placement#2530
khushal-winner wants to merge 2 commits intoOWASP:masterfrom
khushal-winner:feature/elastic-drag-effect-clean

Conversation

@khushal-winner
Copy link
Contributor

@khushal-winner khushal-winner commented Mar 5, 2026

Closes - #2485

  • Add elastic physics with stretch and spring-back animation
  • Replace forbidden cursor with interactive elastic feedback
  • Apply effect only when player has played card in current round
  • Update state management to track card placement timing
  • Add CSS transitions and JavaScript animation logic
2026-03-05.23-26-55.mp4

Changes:

  • assets/css/cards.scss: Add elastic effect styles
  • assets/js/app.js: Implement elastic drag physics with z-index management
  • lib/copi_web/live/player_live/show.ex: Update state tracking
  • lib/copi_web/live/player_live/show.html.heex: Apply elastic classes with z-100

- Add elastic physics with stretch and spring-back animation
- Replace forbidden cursor with interactive elastic feedback
- Apply effect only when player has played card in current round
- Update state management to track card placement timing
- Add z-100 for proper layering during drag interactions
- Add CSS transitions and JavaScript animation logic

Changes:
- assets/css/cards.scss: Add elastic effect styles
- assets/js/app.js: Implement elastic drag physics with z-index management
- lib/copi_web/live/player_live/show.ex: Update state tracking
- lib/copi_web/live/player_live/show.html.heex: Apply elastic classes with z-100
…er protection

- Add elastic physics with stretch and spring-back animation for both hand and table cards
- Apply effect only when player has played card in current round
- Prevent dragging from empty placeholder areas (Waiting for..., Drop a card here, etc.)
- Update state management to track card placement timing
- Add z-100 for proper layering during drag interactions
- Add CSS transitions and JavaScript animation logic

Changes:
- assets/css/cards.scss: Add elastic effect styles
- assets/js/app.js: Implement elastic drag physics with placeholder protection
- lib/copi_web/components/core_components/table_components.ex: Add elastic classes for table cards
- lib/copi_web/live/player_live/show.html.heex: Apply elastic classes to hand cards and pass state to table
@khushal-winner khushal-winner deleted the feature/elastic-drag-effect-clean branch March 5, 2026 20:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant