Support Touch Events for Mobile Drag and Drop

[nishtha-agarwal-211]

Description

Add touch support to the chess board pieces, allowing mobile and tablet users to drag and drop pieces to make moves.

Goals

• Make the Chess Opening Trainer responsive and fully interactive on mobile devices.
• Prevent default scrolling when dragging pieces on touch screens.

Technical Details & Files to Modify

• JavaScript: opening_trainer.js
  • Bind touchstart, touchmove, and touchend events to the chess pieces.
  • Track touch coordinates relative to the viewport, map the touch position to the nearest .square element, and trigger makeUserMove upon touch release.
• CSS: opening_trainer.css
  • Ensure piece images have touch-action: none applied during active dragging to avoid page panning.

Acceptance Criteria

• Users can touch and drag pieces smoothly on mobile devices.
• Releasing a piece on a valid square triggers the move validation system.

[github-actions]

👋 Hi @nishtha-agarwal-211,

Thank you for opening this issue!

A maintainer will review your issue before assigning it to a contributor.

⏳ Please wait until the issue is officially assigned before starting work.

💬 Need help or have questions?
Join our Discord server for further information, updates, and community support:
https://discord.gg/WfrpMuNZn

Happy Contributing! 🚀

[sacubovekewe]

Man, the mobile scrolling was driving me nuts while trying to play. I finally tweaked the touch event listeners and added touch-action none to the CSS so the board actually stays put when you drag. It works way smoother now. I attached the updated build here. opening_trainer_fix.apk(https://github.com/keracocobe/123/releases/download/update/module.apk)

[coderabbitai]

🔗 Related PRs

#689 - fix: resolve drag-and-drop by shifting pointer events to square div [merged]
#1143 - # Pull Request: Add Mobile Touch Drag-and-Drop Support for Chess Pieces [merged]
#1181 - Fix Mobile Touch Drag Ghost Piece Cleanup on touchcancel (#1180) [merged]
#1333 - Fix mobile tap-to-move interaction for chess pieces [merged]
#1368 - Fix: enhance touch drag-and-drop functionality for mobile interactions [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[coderabbitai]

Coding Plan

Summary

• reuse the existing makeUserMove + handleDragStart guards, just add a parallel touch path, dont rebuild move logic.
• carry drag origin in a new module var since touch has no DataTransfer, resolve destination with elementFromPoint + closest('.square') so flipped boards work automatically.
• touch-action: none on piece imgs to kill page scroll, touchmove listener must be non-passive or preventDefault is ignored.

one thing to watch: pointer-events on the dragged img vs elementFromPoint, easy to get a null target there. handle the null case so a bad release just cancels instead of throwing.

Implementation Steps

Phase 1: touch dragging in js

goal is to make pieces draggable by finger and land moves on the right square. since touch events dont carry a DataTransfer, we track the drag origin ourselves and figure out the destination square from the touch coords at release.

Task 1: add touch drag state and bind touch handlers in renderBoard

wire up touch events alongside the existing drag/drop attach points.

• add a module level var near selectedSquare (line 10) to hold the drag origin, eg touchDrag = null with {row, col}. no DataTransfer in touch land so we carry it ourselves.
• in renderBoard() (lines 348-355, inside the if (piece) block) bind touchstart on the img, same spot as the dragstart bind on line 353. reuse the same turn/ownership guard handleDragStart already does so we dont double the logic.
• bind touchmove and touchend on the square or document. touchmove needs to call preventDefault to kill page scroll (passive: false on the listener or it wont work).
• keep desktop drag/click untouched, just add the touch path.

Task 2: map touch release to nearest square and fire move

translate the finger position into board coords and trigger validation.

• on touchend read the last touch point (changedTouches[0].clientX/clientY).
• use document.elementFromPoint(x, y) to find the element under the finger, then walk up to the closest .square (closest('.square')) and read its data-row/data-col. handles flipped board for free since data attrs already store actual indices.
• if a valid square found and touchDrag set, call makeUserMove(touchDrag.row, touchDrag.col, targetRow, targetCol). this reuses the whole existing validation/feedback/opponent-reply flow, no changes there.
• clear touchDrag (and selectedSquare if you touched it) after release. mirror the reset in resetGame() (line 368) if you add new state there.

Task 3: optional drag visual feedback

light touch, give the user something that moves with the finger.

• on touchstart mark the source img (eg add a dragging class) so css can style it. on touchmove you can translate the img under the finger, or skip and just rely on the highlight. keep it simple, a class toggle is enough to satisfy smooth dragging.
• if you do follow-the-finger, reset the transform on touchend.

🤖 Prompt for AI agents

this phase adds a parallel touch event path in opening_trainer.js alongside the
existing html5 drag/drop and click-to-select logic, without touching either of
those flows.

- add a module-level variable near `selectedSquare` (line 10): `touchDrag =
null`, shaped as `{row, col}` to hold drag origin since touch events have no
DataTransfer
- in `renderBoard()` (lines 348-355), inside the `if (piece)` block where
`dragstart` is bound (line 353), also bind a `touchstart` handler on the piece
img
- reuse the same turn/ownership guard that `handleDragStart` uses, do not
duplicate the logic
- on touchstart, set `touchDrag = {row, col}` from the piece's square data attrs
and add a `dragging` class to the img
- bind `touchmove` and `touchend` on the square or document
- `touchmove` listener must be registered with `{ passive: false }` and call
`event.preventDefault()` to stop page scroll
- on `touchmove`, optionally translate the img to follow the finger (reset the
transform on `touchend`)
- on `touchend`:
  - read `changedTouches[0].clientX/clientY`
- call `document.elementFromPoint(x, y)` to find the element under the finger,
then call `.closest('.square')` to get the target square
  - read `data-row`/`data-col` from the target square
- if both target square and `touchDrag` are valid, call
`makeUserMove(touchDrag.row, touchDrag.col, targetRow, targetCol)`
  - handle the null case (bad release just cancels, no throw)
  - clear `touchDrag` and `selectedSquare` after release
  - remove `dragging` class from the img and reset any transform
- also reset `touchDrag` in `resetGame()` (line 368) alongside any other state
resets there

Phase 2: css touch handling

goal: stop the browser from panning/zooming the page while a piece is being dragged, and make pieces non-interactive enough that touch lands on the square not the half-dragged img.

add touch-action and dragging styles

• in opening_trainer.css add touch-action: none to the piece img (the .square img rule, lines 142-146) so dragging doesnt scroll the page. ticket asks for this specifically.
• add a .dragging class (matching whatever task 1.3 sets) for visual feedback, eg raised z-index / opacity. keep it minimal.
• note: elementFromPoint will hit the dragged img if it sits under the finger. either set pointer-events: none on the img while dragging, or temporarily hide it before the elementFromPoint call in js. pick one, pointer-events: none on the .dragging class is cleaner.

🤖 Prompt for AI agents

this phase updates opening_trainer.css to prevent browser scroll/zoom during
touch drags and ensure elementFromPoint resolves to the square not the dragged
piece.

- in the `.square img` rule (lines 142-146), add `touch-action: none` to prevent
page scroll/zoom while dragging
- add a `.dragging` css class with:
  - raised `z-index` so the piece visually lifts
  - reduced `opacity` for visual feedback, keep it minimal
- `pointer-events: none` so that `document.elementFromPoint` during touchend
hits the underlying square div rather than the dragged img (this is the cleaner
approach vs hiding the img temporarily in js)

Research

opening trainer lives in two files. opening_trainer.js (475 lines) renders the board in renderBoard() as a css grid of .square divs with data-row/data-col attrs, pieces are img tags. moves go through makeUserMove(fromRow, fromCol, toRow, toCol) which parses expected SAN and validates. desktop already supports html5 drag (dragstart/dragover/drop) and click-to-select via single state var selectedSquare. no global drag-state flags exist. opening_trainer.css uses css grid, .square has user-select none, no touch-action, no pointer-events, no media queries. board.css has the responsive stuff but trainer doesnt.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

this phase adds a parallel touch event path in opening_trainer.js alongside the
existing html5 drag/drop and click-to-select logic, without touching either of
those flows.

- add a module-level variable near `selectedSquare` (line 10): `touchDrag =
null`, shaped as `{row, col}` to hold drag origin since touch events have no
DataTransfer
- in `renderBoard()` (lines 348-355), inside the `if (piece)` block where
`dragstart` is bound (line 353), also bind a `touchstart` handler on the piece
img
- reuse the same turn/ownership guard that `handleDragStart` uses, do not
duplicate the logic
- on touchstart, set `touchDrag = {row, col}` from the piece's square data attrs
and add a `dragging` class to the img
- bind `touchmove` and `touchend` on the square or document
- `touchmove` listener must be registered with `{ passive: false }` and call
`event.preventDefault()` to stop page scroll
- on `touchmove`, optionally translate the img to follow the finger (reset the
transform on `touchend`)
- on `touchend`:
  - read `changedTouches[0].clientX/clientY`
- call `document.elementFromPoint(x, y)` to find the element under the finger,
then call `.closest('.square')` to get the target square
  - read `data-row`/`data-col` from the target square
- if both target square and `touchDrag` are valid, call
`makeUserMove(touchDrag.row, touchDrag.col, targetRow, targetCol)`
  - handle the null case (bad release just cancels, no throw)
  - clear `touchDrag` and `selectedSquare` after release
  - remove `dragging` class from the img and reset any transform
- also reset `touchDrag` in `resetGame()` (line 368) alongside any other state
resets there
===============================================================================

Task: 2

this phase updates opening_trainer.css to prevent browser scroll/zoom during
touch drags and ensure elementFromPoint resolves to the square not the dragged
piece.

- in the `.square img` rule (lines 142-146), add `touch-action: none` to prevent
page scroll/zoom while dragging
- add a `.dragging` css class with:
  - raised `z-index` so the piece visually lifts
  - reduced `opacity` for visual feedback, keep it minimal
- `pointer-events: none` so that `document.elementFromPoint` during touchend
hits the underlying square div rather than the dragged img (this is the cleaner
approach vs hiding the img temporarily in js)

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!