+
+
+ );
+ }
+
+ if (!user && currentPage !== 'login') {
+ return
+
+ );
+ case 'deck':
+ return
+
+ My Decks
+
+
+ );
+}
+
+function App() {
+ return (
+
+
+ );
+}
diff --git a/src/components/Collection.tsx b/src/components/Collection.tsx
new file mode 100644
index 0000000..45f59da
--- /dev/null
+++ b/src/components/Collection.tsx
@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { Search, Plus } from 'lucide-react';
+import { Card } from '../types';
+import { searchCards } from '../services/api';
+
+export default function Collection() {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [searchResults, setSearchResults] = useState
+ {cards.map((card, index) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/components/DeckBuilder.tsx b/src/components/DeckBuilder.tsx
new file mode 100644
index 0000000..c0e6f7d
--- /dev/null
+++ b/src/components/DeckBuilder.tsx
@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { motion } from "motion/react"
+import { Save, Trash2 } from "lucide-react";
+
+export default function DeckBuilder({
+ deckName,
+ setDeckName,
+ deckFormat,
+ setDeckFormat,
+ selectedCards,
+ updateCardQuantity,
+ removeCardFromDeck,
+ saveDeck,
+ validation,
+ initialDeck,
+ }) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+
+ My Collection
+ + {/* Search */} + + + {/* Search Results */} + {searchResults.length > 0 && ( +
+
+ )}
+
+ {/* Collection */}
+ Search Results
+
+ {searchResults.map(card => (
+
+
+ {card.image_uris?.normal && (
+ 
+ )}
+
+ ))}
+
+
+ {card.name}
+ +
+
+ My Cards
+
+ {collection.map(({ card, quantity }) => (
+
+
+ {card.image_uris?.normal && (
+
+ )}
+
+ ))}
+
+
+
+
+ {card.name}
+ + x{quantity} + +
+ {/* Bouton d'ouverture du menu */}
+
+
+ {/* Menu latéral */}
+
+ {/* Bouton de fermeture */}
+
+
+
+
+ );
+}
diff --git a/src/components/DeckCard.tsx b/src/components/DeckCard.tsx
new file mode 100644
index 0000000..e03bee8
--- /dev/null
+++ b/src/components/DeckCard.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { AlertTriangle, Check, Edit } from 'lucide-react';
+import { Deck } from '../types';
+import { validateDeck } from '../utils/deckValidation';
+
+interface DeckCardProps {
+ deck: Deck;
+ onEdit?: (deckId: string) => void;
+}
+
+export default function DeckCard({ deck, onEdit }: DeckCardProps) {
+ const validation = validateDeck(deck);
+ const commander = deck.format === 'commander' ? deck.cards.find(card =>
+ card.card.type_line?.toLowerCase().includes('legendary creature')
+ )?.card : null;
+
+ return (
+
+ setDeckName(e.target.value)}
+ className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
+ placeholder="Deck Name"
+ />
+
+
+
+ {!validation.isValid && (
+
+
+
+ )}
+
+ -
+ {validation.errors.map((error, index) => (
+
- {error} + ))} +
+
+
+
+ + Cards ({selectedCards.reduce((acc, curr) => acc + curr.quantity, 0)}) +
+ {selectedCards.map(({ card, quantity }) => ( +
+ 
+
+ ))}
+
+
+ updateCardQuantity(card.id, parseInt(e.target.value))}
+ min="1"
+ max="4"
+ className="w-16 px-2 py-1 bg-gray-600 border border-gray-500 rounded text-center"
+ />
+
+ {card.name}
+ onEdit?.(deck.id)}
+ >
+
+ );
+}
diff --git a/src/components/DeckEditor.tsx b/src/components/DeckEditor.tsx
new file mode 100644
index 0000000..69ec8da
--- /dev/null
+++ b/src/components/DeckEditor.tsx
@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import { Card, Deck } from '../types';
+import DeckManager from './DeckManager';
+import { supabase } from '../lib/supabase';
+import { getCardsByIds } from '../services/api';
+
+interface DeckEditorProps {
+ deckId: string;
+ onClose?: () => void;
+}
+
+export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
+ const [deck, setDeck] = useState
+ 
+
+
+
+
+
+
+
+
+ {deck.name}
+ {validation.isValid ? ( +
+
+ ) : (
+
+
+ )}
+
+ {deck.format}
+ {deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards
+
+
+ {commander && (
+
+ Commander: {commander.name}
+
+ )}
+
+
+
+
+
+ );
+ }
+
+ if (!deck) {
+ return (
+
+
+ );
+ }
+
+ return
+
+
+
+ Error
+Failed to load deck
+
+
+
+ );
+ }
+
+ return (
+
+ {decks.map((deck) => (
+
+ );
+};
+
+export default DeckList;
diff --git a/src/components/DeckManager.tsx b/src/components/DeckManager.tsx
new file mode 100644
index 0000000..9d923e1
--- /dev/null
+++ b/src/components/DeckManager.tsx
@@ -0,0 +1,276 @@
+import React, { useState, useEffect } from 'react';
+import { Plus, Search, Save, Trash2 } from 'lucide-react';
+import { Card, Deck } from '../types';
+import { searchCards } from '../services/api';
+import { useAuth } from '../contexts/AuthContext';
+import { supabase } from '../lib/supabase';
+import { validateDeck } from '../utils/deckValidation';
+
+interface DeckManagerProps {
+ initialDeck?: Deck;
+ onSave?: () => void;
+}
+
+export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [searchResults, setSearchResults] = useState
+
+ );
+}
diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx
new file mode 100644
index 0000000..19b5777
--- /dev/null
+++ b/src/components/LoginForm.tsx
@@ -0,0 +1,147 @@
+import { useState, useEffect } from 'react';
+ import { Mail, Lock, LogIn } from 'lucide-react';
+ import { useAuth } from '../contexts/AuthContext';
+ import { Card } from '../types';
+ import { getRandomCards } from '../services/api';
+
+ export default function LoginForm() {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [isSignUp, setIsSignUp] = useState(false);
+ const [error, setError] = useState
+
+
+ {/* Card Search Section */}
+
+
+
+
+
+
+ {/* Deck Builder Section */}
+
+ {searchResults.map(card => (
+
+
+ {card.image_uris?.normal && (
+
+ )}
+
+ ))}
+
+
+ {card.name}
+ +
+
+
+ setDeckName(e.target.value)}
+ className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
+ placeholder="Deck Name"
+ />
+
+
+
+ {!validation.isValid && (
+
+
+
+ )}
+
+ -
+ {validation.errors.map((error, index) => (
+
- {error} + ))} +
+
+
+
+ + Cards ({selectedCards.reduce((acc, curr) => acc + curr.quantity, 0)}) +
+ {selectedCards.map(({ card, quantity }) => ( +
+
+
+ ))}
+
+
+ updateCardQuantity(card.id, parseInt(e.target.value))}
+ min="1"
+ max="4"
+ className="w-16 px-2 py-1 bg-gray-600 border border-gray-500 rounded text-center"
+ />
+
+ {card.name}
+
+ {/* Animated Background */}
+
+ );
+ }
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
new file mode 100644
index 0000000..8313bc0
--- /dev/null
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,175 @@
+import React, { useState, useRef, useEffect } from 'react';
+ import { Home, PlusSquare, Library, LogOut, Settings, ChevronDown } from 'lucide-react';
+ import { useAuth } from '../contexts/AuthContext';
+ import { supabase } from '../lib/supabase';
+
+ type Page = 'home' | 'deck' | 'login' | 'collection' | 'profile';
+
+ interface NavigationProps {
+ currentPage: Page;
+ setCurrentPage: (page: Page) => void;
+ }
+
+ export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) {
+ const { user, signOut } = useAuth();
+ const [showDropdown, setShowDropdown] = useState(false);
+ const dropdownRef = useRef
+
+
+ {/* Login Form */}
+
+ {[...cards, ...cards].map((card, index) => (
+
+
+
+
+ ))}
+
+
+ + Deckerr +
+ + {error && ( +
+ {error}
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
new file mode 100644
index 0000000..b7629e5
--- /dev/null
+++ b/src/contexts/AuthContext.tsx
@@ -0,0 +1,107 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { User } from '@supabase/supabase-js';
+import { supabase } from '../lib/supabase';
+
+interface AuthContextType {
+ user: User | null;
+ loading: boolean;
+ signIn: (email: string, password: string) => Promise
+
+