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:
2025-12-14 21:20:37 +01:00
parent e2c93d9652
commit 1b8ae00da1
3 changed files with 42 additions and 15 deletions

View File

@@ -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).

View File

@@ -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").

View File

@@ -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">