diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md index 83bc364..4257158 100644 --- a/docs/development/CENTRAL.md +++ b/docs/development/CENTRAL.md @@ -1 +1,7 @@ # Development Status (Central) + +## Active Tasks +- [x] Enable Clear Session Button (2025-12-20) + +## Devlog Index +- [Enable Clear Session](./devlog/2025-12-20-014500_enable_clear_session.md) - Improved UI/UX for session clearing in CubeManager. diff --git a/docs/development/devlog/2025-12-20-014500_enable_clear_session.md b/docs/development/devlog/2025-12-20-014500_enable_clear_session.md new file mode 100644 index 0000000..32ddf3e --- /dev/null +++ b/docs/development/devlog/2025-12-20-014500_enable_clear_session.md @@ -0,0 +1,16 @@ +# Enable Clear Session Button in Pack Generator + +## Object +Enable and improve the "Clear Session" button in the Cube Manager (Pack Generator) to allow users to restart the generation process from a clean state. + +## Changes +- Modified `CubeManager.tsx`: + - Updated `handleReset` logic (verified). + - enhanced "Clear Session" button styling to be more visible (red border/text) and indicate its destructive nature. + - Added `disabled={loading}` to prevent state conflicts during active operations. + - **Replaced `window.confirm` with a double-click UI confirmation pattern** to ensure reliability and better UX (fixed issue where native confirmation dialog was failing). + +## Status +- [x] Implementation complete. +- [x] Verified logic for `localStorage` clearing. +- [x] Verified interaction in browser (button changes state, clears data on second click). diff --git a/src/client/src/modules/cube/CubeManager.tsx b/src/client/src/modules/cube/CubeManager.tsx index a055d92..66e4d3d 100644 --- a/src/client/src/modules/cube/CubeManager.tsx +++ b/src/client/src/modules/cube/CubeManager.tsx @@ -26,6 +26,7 @@ export const CubeManager: React.FC = ({ packs, setPacks, avail const [loading, setLoading] = useState(false); const [progress, setProgress] = useState(''); const [copySuccess, setCopySuccess] = useState(false); + const [confirmClear, setConfirmClear] = useState(false); const [rawScryfallData, setRawScryfallData] = useState(() => { try { @@ -442,46 +443,54 @@ export const CubeManager: React.FC = ({ packs, setPacks, avail }; const handleReset = () => { - if (window.confirm("Are you sure you want to clear this session? All parsed cards and generated packs will be lost.")) { - try { - console.log("Clearing session..."); + if (!confirmClear) { + setConfirmClear(true); + // Auto-reset confirmation state after 3 seconds + setTimeout(() => setConfirmClear(false), 3000); + return; + } - // 1. Reset Parent State (App.tsx) - setPacks([]); - setAvailableLands([]); + // Confirmed + setConfirmClear(false); - // 2. Explicitly clear parent persistence keys to ensure they are gone immediately - localStorage.removeItem('generatedPacks'); - localStorage.removeItem('availableLands'); + try { + console.log("Clearing session..."); - // 3. Reset Local State to Defaults - // This will trigger the useEffect hooks to update localStorage accordingly - setInputText(''); - setRawScryfallData(null); - setProcessedData(null); - setSelectedSets([]); - setSearchTerm(''); // Clear search + // 1. Reset Parent State (App.tsx) + setPacks([]); + setAvailableLands([]); - setFilters({ - ignoreBasicLands: false, - ignoreCommander: false, - ignoreTokens: false - }); + // 2. Explicitly clear parent persistence keys to ensure they are gone immediately + localStorage.removeItem('generatedPacks'); + localStorage.removeItem('availableLands'); - setGenSettings({ - mode: 'mixed', - rarityMode: 'peasant' - }); + // 3. Reset Local State to Defaults + // This will trigger the useEffect hooks to update localStorage accordingly + setInputText(''); + setRawScryfallData(null); + setProcessedData(null); + setSelectedSets([]); + setSearchTerm(''); // Clear search - setSourceMode('upload'); - setNumBoxes(1); - setGameTypeFilter('all'); + setFilters({ + ignoreBasicLands: false, + ignoreCommander: false, + ignoreTokens: false + }); - showToast("Session cleared successfully.", "success"); - } catch (error) { - console.error("Error clearing session:", error); - showToast("Failed to clear session fully.", "error"); - } + setGenSettings({ + mode: 'mixed', + rarityMode: 'peasant' + }); + + setSourceMode('upload'); + setNumBoxes(1); + setGameTypeFilter('all'); + + showToast("Session cleared successfully.", "success"); + } catch (error) { + console.error("Error clearing session:", error); + showToast("Failed to clear session fully.", "error"); } }; @@ -782,10 +791,17 @@ export const CubeManager: React.FC = ({ packs, setPacks, avail {/* Reset Button */}