Remove bulk selection checkboxes, restore click-to-select

Interface simplification:
- Removed bulk selection checkboxes from image items
- Restored original click-to-select behavior for image selection
- Users can now click directly on images to select/deselect them
- Select All/Deselect All buttons now work by directly modifying image classes
- Kept Enable/Disable checkbox functionality unchanged

Benefits:
- Cleaner visual interface with fewer checkboxes
- More intuitive selection - click on image to select it
- Reduced visual clutter while maintaining all functionality
- Same bulk operations (select all, deselect all, delete selected) still work
- Original UX restored where selection was visual highlight, not checkbox
This commit is contained in:
fritzsenpai 2025-09-25 20:36:19 -05:00
parent 7597bc8eed
commit f4d695aa76
1 changed files with 7 additions and 12 deletions

19
game.js
View File

@ -1139,9 +1139,6 @@ class TaskChallengeGame {
${isCustom ? '<span class="custom-badge">Custom</span>' : ''}
</div>
</div>
<div class="image-item-select">
<input type="checkbox" class="bulk-select-checkbox">
</div>
`;
// Add event listener for enable/disable
@ -1150,7 +1147,7 @@ class TaskChallengeGame {
// Add event listener for individual image selection (click to select/deselect)
imageItem.addEventListener('click', (e) => {
// Don't toggle selection if clicking on the checkbox or bulk select checkbox
// Don't toggle selection if clicking on the checkbox
if (e.target.type !== 'checkbox') {
this.toggleImageSelection(imageItem);
}
@ -1619,20 +1616,18 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
selectAllImages(tabType = 'task') {
const galleryId = tabType === 'task' ? 'task-images-gallery' : 'consequence-images-gallery';
const gallery = document.getElementById(galleryId);
const checkboxes = gallery.querySelectorAll('.bulk-select-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = true;
checkbox.closest('.image-item').classList.add('selected');
const imageItems = gallery.querySelectorAll('.image-item');
imageItems.forEach(imageItem => {
imageItem.classList.add('selected');
});
}
deselectAllImages(tabType = 'task') {
const galleryId = tabType === 'task' ? 'task-images-gallery' : 'consequence-images-gallery';
const gallery = document.getElementById(galleryId);
const checkboxes = gallery.querySelectorAll('.bulk-select-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = false;
checkbox.closest('.image-item').classList.remove('selected');
const imageItems = gallery.querySelectorAll('.image-item');
imageItems.forEach(imageItem => {
imageItem.classList.remove('selected');
});
}