Commit 1c68160e authored by Mahmoud Aglan's avatar Mahmoud Aglan

feat: Chess.com-style smart tap-to-move controls for backgammon

Smart behaviors:
- Auto-roll dice at start of each turn
- If only one move exists for a piece, execute immediately on tap
- If only one complete sequence possible, auto-execute entire turn
- Auto-end turn when no moves remain
- Movable pieces highlighted with golden glow (tap targets)
- Tap piece → valid destinations highlighted → tap destination → done
- Undo button for unlimited undo before turn ends

UX flow:
1. Dice auto-roll
2. Movable sources highlighted
3. Tap source → if single destination, auto-move
4. If multiple destinations → show targets → tap one
5. Repeat until dice exhausted
6. Turn auto-ends

Minimal taps, zero rules knowledge needed, fast animations.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 48a4a508
...@@ -30,10 +30,11 @@ ...@@ -30,10 +30,11 @@
<!-- Side panel --> <!-- Side panel -->
<div class="bg-side-panel"> <div class="bg-side-panel">
<div id="bg-turn" class="bg-turn-indicator"></div>
<div id="bg-dice-container" class="bg-dice-area"></div> <div id="bg-dice-container" class="bg-dice-area"></div>
<div id="bg-status" class="bg-status"></div>
<div class="bg-controls"> <div class="bg-controls">
<button id="bg-roll-btn" class="bg-roll-btn">ارمِ النرد</button> <button id="bg-roll-btn" class="bg-roll-btn">ارمِ النرد</button>
<button id="bg-undo-btn" class="bg-pass-btn" style="display:none;">تراجع</button>
</div> </div>
<div id="bg-log" class="bg-log"></div> <div id="bg-log" class="bg-log"></div>
</div> </div>
......
...@@ -176,12 +176,14 @@ ...@@ -176,12 +176,14 @@
border-radius: 4px; border-radius: 4px;
} }
.bg-point--clickable { .bg-point--source {
cursor: pointer; cursor: pointer;
} }
.bg-point--clickable .bg-checker:last-child { .bg-point--source .bg-checker:last-child,
box-shadow: 0 0 0 2px rgba(255,200,50,0.4), 0 2px 4px rgba(0,0,0,0.3); .bg-point--source .bg-checkers-stack .bg-checker:last-child {
box-shadow: 0 0 0 3px rgba(255,200,50,0.5), 0 0 10px rgba(255,200,50,0.3);
transform: scale(1.05);
} }
.bg-point--hover-preview { .bg-point--hover-preview {
......
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment