antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve sorting game UX with visual cues and auto-selection

Browse Source 
- Add clean left arrow (←) to "Click to move back" labels for visual clarity
- Auto-select cards when moved back from sorting positions for immediate re-placement
- Highlight available positions when card is auto-selected after move-back
- Update status messages to indicate auto-selection behavior

This creates a smoother workflow where users can click misplaced cards and immediately place them in the correct position without manual re-selection.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-09-10 10:20:51 -05:00
parent d5e2fdadd6
commit a943ceb795
1 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/web_generator.py
View File

@@ -2334,7 +2334,7 @@ def generate_web_flashcards(numbers, config, output_path):
<div class="slot-card">
<div class="card-svg">${{card.svg}}</div>
</div>
<div class="slot-label">Click to move back</div>
<div class="slot-label">← Click to move back</div>
`;
}} else {{
slot.classList.remove('filled');
@@ -2382,8 +2382,26 @@ def generate_web_flashcards(numbers, config, output_path):
this.updatePositionSlots();
this.renderAvailableCards();
// Auto-select the moved card so user can immediately place it elsewhere
this.selectedCard = cardToMove;
this.selectedCardElement = document.querySelector(`[data-number="${{cardToMove.number}}"]`);
if (this.selectedCardElement) {{
this.selectedCardElement.classList.add('selected');
// Highlight available positions
document.querySelectorAll('.position-slot').forEach(slot => {{
if (!slot.classList.contains('filled')) {{
slot.classList.add('active');
}}
}});
document.querySelectorAll('.insert-button').forEach(btn => {{
btn.classList.add('active');
btn.classList.remove('disabled');
}});
}}
const placedCount = this.placedCards.filter(c => c !== null).length;
this.updateSortingStatus(`Moved card ${{cardToMove.number}} back to available cards. ${{placedCount}}/${{this.selectedCount}} cards placed.`);
this.updateSortingStatus(`Moved card ${{cardToMove.number}} back and selected it. ${{placedCount}}/${{this.selectedCount}} cards placed.`);
return;
}}
@@ -2414,7 +2432,7 @@ def generate_web_flashcards(numbers, config, output_path):
<div class="slot-card">
<div class="card-svg">${{this.selectedCard.svg}}</div>
</div>
<div class="slot-label">Click to move back</div>
<div class="slot-label">← Click to move back</div>
`;
// Clear selection and re-render