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] 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).
|
||||||
|
|||||||
@@ -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 */}
|
{/* 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">
|
||||||
|
|||||||
Reference in New Issue
Block a user