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] 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] 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] 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 ## Active Modules
1. **Cube Manager**: Fully functional (Parsing, Fetching, Pack Generation). 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 */} {/* Source Toggle */}
<div className="flex p-1 bg-slate-900 rounded-lg mb-4 border border-slate-700"> <div className="flex p-1 bg-slate-900 rounded-lg mb-4 border border-slate-700">
<button <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'}`} 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 Custom List
</button> </button>
<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'}`} 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 From Expansion
@@ -301,7 +307,8 @@ export const CubeManager: React.FC = () => {
<Settings className="w-4 h-4 text-emerald-400" /> Configuration <Settings className="w-4 h-4 text-emerald-400" /> Configuration
</h3> </h3>
{/* Mode */} {/* Mode - Only show for Custom List */}
{sourceMode === 'upload' && (
<div className="mb-4"> <div className="mb-4">
<label className="text-xs font-bold text-slate-400 uppercase mb-1 block">Card Source</label> <label className="text-xs font-bold text-slate-400 uppercase mb-1 block">Card Source</label>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
@@ -315,6 +322,7 @@ export const CubeManager: React.FC = () => {
</label> </label>
</div> </div>
</div> </div>
)}
{/* Rarity */} {/* Rarity */}
<div className="mb-4"> <div className="mb-4">