113 lines
No EOL
4.1 KiB
Markdown
113 lines
No EOL
4.1 KiB
Markdown
# Dual View System & Image Handling
|
|
|
|
## 🎨 **View Modes**
|
|
|
|
TCG Vault now supports two distinct viewing modes for your card collection:
|
|
|
|
### 🃏 **Card View**
|
|
- **Image-focused** display showing card artwork prominently
|
|
- **Responsive grid** that adapts from 1 column (mobile) to 5 columns (ultra-wide)
|
|
- **Large card images** with automatic fallbacks to game-themed placeholders
|
|
- **Clean, minimal information** focusing on visual identification
|
|
|
|
### 📊 **Table View**
|
|
- **Data-focused** tabular display for detailed card information
|
|
- **Small thumbnail** images alongside comprehensive card data
|
|
- **Sortable columns** for quick data analysis
|
|
- **Compact format** ideal for managing large collections
|
|
|
|
## 🖼️ **Dual Image System**
|
|
|
|
### Stock Images (Official Reference)
|
|
- **Purpose**: Clean, official card images for consistent presentation
|
|
- **Usage**: Primary display in both view modes
|
|
- **Features**:
|
|
- High-quality scans from official sources
|
|
- Artwork cropping coordinates for thumbnails
|
|
- Consistent lighting and framing
|
|
|
|
### User Card Photos
|
|
- **Purpose**: Photos of your actual physical cards
|
|
- **Usage**: Quality assessment and condition documentation
|
|
- **Features**:
|
|
- Multiple photos per card copy
|
|
- Condition-specific documentation
|
|
- Quality comparison with stock images
|
|
|
|
## 🔄 **Image Display Features**
|
|
|
|
### Smart Fallbacks
|
|
When card images aren't available, the system displays:
|
|
- **Game-themed gradients** (Orange for MTG, Yellow for Pokemon, Purple for Lorcana)
|
|
- **Card name** abbreviated for readability
|
|
- **Game identifier** for quick recognition
|
|
- **Consistent sizing** maintaining layout integrity
|
|
|
|
### Interactive Controls
|
|
- **📸/📋 Toggle**: Switch between stock and user photos
|
|
- **◄/► Navigation**: Browse multiple user photos
|
|
- **👤/✓ Indicators**: Visual cues for image type
|
|
- **Photo counters**: Show current photo index (e.g., "2/3")
|
|
|
|
## 📁 **Image Storage Structure**
|
|
|
|
```
|
|
frontend/public/images/cards/
|
|
├── mtg/ # Magic: The Gathering
|
|
│ ├── lightning-bolt-alpha.jpg
|
|
│ └── black-lotus-alpha.jpg
|
|
├── pokemon/ # Pokémon
|
|
│ └── pikachu-base-set.jpg
|
|
└── lorcana/ # Disney Lorcana
|
|
├── mickey-brave-tailor-tfc.jpg
|
|
├── elsa-snow-queen-tfc.jpg
|
|
├── be-prepared-tfc.jpg
|
|
└── mickey-steamboat-pilot-tfc.jpg
|
|
```
|
|
|
|
## 🛠️ **Database Schema**
|
|
|
|
### Cards Table (New Fields)
|
|
- `stock_image_url`: Official card image path
|
|
- `artwork_crop_coords`: JSON with cropping coordinates `{x, y, width, height}`
|
|
- `image_url`: Legacy field for backward compatibility
|
|
|
|
### Collection Cards Table (New Fields)
|
|
- `user_images`: JSON array of user photo paths
|
|
- `condition_notes`: Detailed condition descriptions
|
|
|
|
## 🎯 **Usage Examples**
|
|
|
|
### Card Identification
|
|
- **Card View**: Visual browsing and identification
|
|
- **Stock Images**: Official reference for card verification
|
|
- **Game badges**: Quick game identification
|
|
|
|
### Collection Management
|
|
- **Table View**: Data analysis and bulk operations
|
|
- **User Photos**: Document card conditions and variations
|
|
- **Pricing**: Track market values alongside visual condition
|
|
|
|
### Quality Assessment
|
|
- **Side-by-side comparison**: Stock image vs. your card photos
|
|
- **Multiple angles**: Document different aspects of card condition
|
|
- **Condition notes**: Detailed written condition descriptions
|
|
|
|
## 🚀 **Future Enhancements**
|
|
|
|
### Image Processing
|
|
- **Automatic cropping**: Extract artwork from card images
|
|
- **Quality scoring**: AI-based condition assessment
|
|
- **OCR integration**: Extract text from user photos
|
|
|
|
### Advanced Views
|
|
- **Gallery mode**: Large image browsing
|
|
- **Comparison mode**: Side-by-side stock vs. user photos
|
|
- **3D card view**: Interactive card rotation
|
|
|
|
### Collection Features
|
|
- **Image upload**: Drag-and-drop card photo upload
|
|
- **Batch processing**: Upload multiple card photos at once
|
|
- **Cloud storage**: Backup and sync card photos across devices
|
|
|
|
This dual-view system provides the foundation for professional-grade collection management while maintaining ease of use for casual collectors. |