services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Remove tournament mode feature and its associated UI from the Cube Manager, simplifying pack display.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-14 21:19:21 +01:00
parent d468055f6b
commit e2c93d9652
4 changed files with 30 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/development/CENTRAL.md
View File

@@ -7,6 +7,7 @@ The project has successfully migrated from a .NET backend to a Node.js Modular M
- **[2025-12-14] Core Implementation**: Refactored `gemini-generated.js` into modular services and components. Implemented Cube Manager and Tournament Manager. [Link](./devlog/2025-12-14-194558_core_implementation.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] Cleanup**: Removed Tournament Mode and simplified pack display as requested. [Link](./devlog/2025-12-14-211500_remove_tournament_mode.md)
## Active Modules
1. **Cube Manager**: Fully functional (Parsing, Fetching, Pack Generation).

18
docs/development/devlog/2025-12-14-211500_remove_tournament_mode.md Normal file
View File

@@ -0,0 +1,18 @@
# Cleanup: Remove Tournament Mode
## Status: Completed
## Summary
Removed the "Tournament Mode" view and "Editor Mode" toggle from the Cube Manager. The user requested a simplified interface that lists packs without grouping them into "Boxes".
## Changes
1. **CubeManager.tsx**:
* Removed `tournamentMode` state and setter.
* Removed usage of `TournamentPackView` component.
* Removed the "Tournament Mode / Editor Mode" toggle button.
* Simplified rendering to always show the pack list (grid/list/stack view) directly.
* Removed unsused `TournamentPackView` import and icon imports.
## Impact
* The UI is now streamlined for the "Host" to just see generated packs.
* The `TournamentPackView` component is no longer used but file remains for now.

75
src/client/src/components/TournamentPackView.tsx
View File

@@ -1,75 +0,0 @@
import React from 'react';
import { Target, Package, Layers } from 'lucide-react';
import { Pack } from '../services/PackGeneratorService';
interface TournamentPackViewProps {
packs: Pack[];
}
export const TournamentPackView: React.FC<TournamentPackViewProps> = ({ packs }) => {
const packsBySet = packs.reduce((acc, pack) => {
const key = pack.setName || 'Unknown Set';
if (!acc[key]) acc[key] = [];
acc[key].push(pack);
return acc;
}, {} as { [key: string]: Pack[] });
const BOX_SIZE = 30;
return (
<div className="space-y-12 animate-in fade-in duration-700">
{Object.entries(packsBySet).map(([setName, setPacks]) => {
const boxes = [];
for (let i = 0; i < setPacks.length; i += BOX_SIZE) boxes.push(setPacks.slice(i, i + BOX_SIZE));
return (
<div key={setName} className="space-y-6">
<div className="flex items-center gap-4">
<div className="h-px bg-slate-700 flex-1"></div>
<h3 className="text-2xl font-black text-slate-200 uppercase tracking-widest flex items-center gap-2">
<Target className="w-6 h-6 text-purple-500" /> {setName}
</h3>
<div className="h-px bg-slate-700 flex-1"></div>
</div>
<div className="space-y-8">
{boxes.map((boxPacks, boxIndex) => (
<div key={boxIndex} className="bg-slate-800/50 border border-slate-700 rounded-2xl p-6 relative">
<div className="absolute -top-4 left-6 bg-amber-600 text-white px-4 py-1 rounded-full font-bold shadow-lg flex items-center gap-2 border-2 border-slate-900 z-10">
<Package className="w-4 h-4" /> BOX {boxIndex + 1}
<span className="text-amber-200 text-xs font-normal ml-1">({boxPacks.length} packs)</span>
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mt-4">
{boxPacks.map((pack) => (
<div key={pack.id} className="aspect-[2.5/3.5] bg-gradient-to-br from-slate-700 to-slate-800 rounded-xl border-2 border-slate-600 shadow-xl relative group overflow-hidden cursor-pointer hover:border-amber-500/50 transition-colors">
<div className="absolute inset-2 border-2 border-dashed border-slate-600/30 rounded-lg flex flex-col items-center justify-center">
<Layers className="w-8 h-8 text-slate-600 mb-2 opacity-50" />
<span className="text-2xl font-black text-slate-500 opacity-20">MTG</span>
</div>
<div className="absolute bottom-4 left-0 right-0 text-center">
<div className="bg-slate-900/90 text-white text-xs font-bold py-1 px-2 mx-2 rounded border border-slate-700 truncate">#{pack.id}</div>
<div className="text-[10px] text-slate-400 mt-1 uppercase tracking-widest font-semibold truncate px-2">{pack.setName}</div>
</div>
<div className="absolute inset-0 bg-black/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<div className="text-center p-2">
<p className="text-amber-400 font-bold text-xs">Contains {pack.cards.length} cards:</p>
{pack.cards.some(c => c.rarity === 'mythic' || c.rarity === 'rare') && (
<p className="text-yellow-400 text-xs font-bold">★ Rare / Mythic</p>
)}
<p className="text-slate-300 text-[10px] italic mt-1">Click for full list</p>
</div>
</div>
</div>
))}
</div>
</div>
))}
</div>
</div>
);
})}
</div>
);
};

37
src/client/src/modules/cube/CubeManager.tsx
View File

@@ -1,10 +1,9 @@
import React, { useState, useRef, useEffect } from 'react';
import { Layers, RotateCcw, Box, Check, Loader2, Upload, Eye, EyeOff, LayoutGrid, List, Sliders, Settings } from 'lucide-react';
import { Layers, RotateCcw, Box, Check, Loader2, Upload, LayoutGrid, List, Sliders, Settings } from 'lucide-react';
import { CardParserService } from '../../services/CardParserService';
import { ScryfallService, ScryfallCard, ScryfallSet } from '../../services/ScryfallService';
import { PackGeneratorService, ProcessedPools, SetsMap, Pack, PackGenerationSettings } from '../../services/PackGeneratorService';
import { PackCard } from '../../components/PackCard';
import { TournamentPackView } from '../../components/TournamentPackView';
export const CubeManager: React.FC = () => {
// --- Services ---
@@ -32,7 +31,6 @@ export const CubeManager: React.FC = () => {
// UI State
const [viewMode, setViewMode] = useState<'list' | 'grid' | 'stack'>('list');
const [tournamentMode, setTournamentMode] = useState(false);
// Generation Settings
const [genSettings, setGenSettings] = useState<PackGenerationSettings>({
@@ -106,7 +104,6 @@ export const CubeManager: React.FC = () => {
setLoading(true);
setPacks([]);
setProgress(sourceMode === 'set' ? 'Fetching set data...' : 'Parsing text...');
setTournamentMode(false);
try {
let expandedCards: ScryfallCard[] = [];
@@ -164,7 +161,6 @@ export const CubeManager: React.FC = () => {
alert(`Not enough cards to generate valid packs.`);
} else {
setPacks(newPacks);
setTournamentMode(false);
}
} catch (e) {
console.error("Generation failed", e);
@@ -372,20 +368,13 @@ export const CubeManager: React.FC = () => {
<span className="bg-slate-700 text-purple-400 px-3 py-1 rounded-lg text-sm border border-slate-600">{packs.length}</span>
Packs
</h2>
{packs.length > 0 && (
<button onClick={() => setTournamentMode(!tournamentMode)} className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-bold border transition-all ${tournamentMode ? 'bg-amber-500/20 border-amber-500 text-amber-500 animate-pulse' : 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-400'}`}>
{tournamentMode ? <><EyeOff className="w-4 h-4" /> Tournament Mode</> : <><Eye className="w-4 h-4" /> Editor Mode</>}
</button>
)}
</div>
{!tournamentMode && (
<div className="flex bg-slate-800 rounded-lg p-1 border border-slate-700">
<button onClick={() => setViewMode('list')} className={`p-2 rounded ${viewMode === 'list' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><List className="w-4 h-4" /></button>
<button onClick={() => setViewMode('grid')} className={`p-2 rounded ${viewMode === 'grid' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><LayoutGrid className="w-4 h-4" /></button>
<button onClick={() => setViewMode('stack')} className={`p-2 rounded ${viewMode === 'stack' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><Layers className="w-4 h-4" /></button>
</div>
)}
<div className="flex bg-slate-800 rounded-lg p-1 border border-slate-700">
<button onClick={() => setViewMode('list')} className={`p-2 rounded ${viewMode === 'list' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><List className="w-4 h-4" /></button>
<button onClick={() => setViewMode('grid')} className={`p-2 rounded ${viewMode === 'grid' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><LayoutGrid className="w-4 h-4" /></button>
<button onClick={() => setViewMode('stack')} className={`p-2 rounded ${viewMode === 'stack' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><Layers className="w-4 h-4" /></button>
</div>
</div>
{packs.length === 0 ? (
@@ -394,15 +383,11 @@ export const CubeManager: React.FC = () => {
<p>No packs generated.</p>
</div>
) : (
tournamentMode ? (
<TournamentPackView packs={packs} />
) : (
<div className="grid grid-cols-1 gap-6 pb-20">
{packs.map((pack) => (
<PackCard key={pack.id} pack={pack} viewMode={viewMode} />
))}
</div>
)
<div className="grid grid-cols-1 gap-6 pb-20">
{packs.map((pack) => (
<PackCard key={pack.id} pack={pack} viewMode={viewMode} />
))}
</div>
)}
</div>