feat: Simplify Cube Manager UI by conditionally displaying pack generation mode options and automatically configuring the mode based on the selected card source.
This commit is contained in:
@@ -8,6 +8,7 @@ The project has successfully migrated from a .NET backend to a Node.js Modular M
|
||||
- **[2025-12-14] Parser Robustness**: Improving `CardParserService` to handle formats without Scryfall IDs (e.g., Arena exports). [Link](./devlog/2025-12-14-210000_fix_parser_robustness.md)
|
||||
- **[2025-12-14] Set Generation**: Implemented full set fetching and booster box generation (Completed). [Link](./devlog/2025-12-14-211000_set_based_generation.md)
|
||||
- **[2025-12-14] Cleanup**: Removed Tournament Mode and simplified pack display as requested. [Link](./devlog/2025-12-14-211500_remove_tournament_mode.md)
|
||||
- **[2025-12-14] UI Tweak**: Auto-configured generation mode based on source selection. [Link](./devlog/2025-12-14-212000_ui_simplification.md)
|
||||
|
||||
## Active Modules
|
||||
1. **Cube Manager**: Fully functional (Parsing, Fetching, Pack Generation).
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
# Enhancement: UI Simplification for Set Generation
|
||||
|
||||
## Status: Completed
|
||||
|
||||
## Summary
|
||||
Refined the Cube Manager UI to hide redundant options when generating packs from an entire expansion set.
|
||||
|
||||
## Changes
|
||||
1. **CubeManager.tsx**:
|
||||
* **Conditional Rendering**: The "Card Source" options (Chaos Draft vs Split by Expansion) are now **hidden** when "From Expansion" mode is selected.
|
||||
* **Automatic State Handling**:
|
||||
* Selecting "From Expansion" automatically sets generation mode to `by_set`.
|
||||
* Selecting "Custom List" resets generation mode to `mixed` (user can still change it).
|
||||
* **Rationale**: Using an entire set implies preserving its structure (one set), whereas a custom list is often a cube (chaos) or a collection of specific sets where the user might want explicitly mixed packs.
|
||||
|
||||
## Impact
|
||||
* Reduces visual noise for the user when they simply want to draft a specific set.
|
||||
* Prevents invalid configurations (e.g., selecting "Chaos Draft" for a single set, which technically works but is confusing in context of "Set Generation").
|
||||
@@ -184,13 +184,19 @@ export const CubeManager: React.FC = () => {
|
||||
{/* Source Toggle */}
|
||||
<div className="flex p-1 bg-slate-900 rounded-lg mb-4 border border-slate-700">
|
||||
<button
|
||||
onClick={() => setSourceMode('upload')}
|
||||
onClick={() => {
|
||||
setSourceMode('upload');
|
||||
setGenSettings(prev => ({ ...prev, mode: 'mixed' }));
|
||||
}}
|
||||
className={`flex-1 py-1.5 text-xs font-bold rounded-md transition-all ${sourceMode === 'upload' ? 'bg-slate-700 text-white shadow' : 'text-slate-500 hover:text-slate-300'}`}
|
||||
>
|
||||
Custom List
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSourceMode('set')}
|
||||
onClick={() => {
|
||||
setSourceMode('set');
|
||||
setGenSettings(prev => ({ ...prev, mode: 'by_set' }));
|
||||
}}
|
||||
className={`flex-1 py-1.5 text-xs font-bold rounded-md transition-all ${sourceMode === 'set' ? 'bg-slate-700 text-white shadow' : 'text-slate-500 hover:text-slate-300'}`}
|
||||
>
|
||||
From Expansion
|
||||
@@ -301,20 +307,22 @@ export const CubeManager: React.FC = () => {
|
||||
<Settings className="w-4 h-4 text-emerald-400" /> Configuration
|
||||
</h3>
|
||||
|
||||
{/* Mode */}
|
||||
<div className="mb-4">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase mb-1 block">Card Source</label>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
|
||||
<input type="radio" name="genMode" value="mixed" checked={genSettings.mode === 'mixed'} onChange={() => setGenSettings({ ...genSettings, mode: 'mixed' })} className="accent-purple-500" />
|
||||
<span>Chaos Draft (Mix All)</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
|
||||
<input type="radio" name="genMode" value="by_set" checked={genSettings.mode === 'by_set'} onChange={() => setGenSettings({ ...genSettings, mode: 'by_set' })} className="accent-purple-500" />
|
||||
<span>Split by Expansion</span>
|
||||
</label>
|
||||
{/* Mode - Only show for Custom List */}
|
||||
{sourceMode === 'upload' && (
|
||||
<div className="mb-4">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase mb-1 block">Card Source</label>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
|
||||
<input type="radio" name="genMode" value="mixed" checked={genSettings.mode === 'mixed'} onChange={() => setGenSettings({ ...genSettings, mode: 'mixed' })} className="accent-purple-500" />
|
||||
<span>Chaos Draft (Mix All)</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
|
||||
<input type="radio" name="genMode" value="by_set" checked={genSettings.mode === 'by_set'} onChange={() => setGenSettings({ ...genSettings, mode: 'by_set' })} className="accent-purple-500" />
|
||||
<span>Split by Expansion</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rarity */}
|
||||
<div className="mb-4">
|
||||
|
||||
Reference in New Issue
Block a user