matthieu/deckerr
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request 'Add some css animation to make the project prettier' (#7) from feature/issue-6-add-some-css-animation-to-make-the-project-prettie into master

Browse Source 
Reviewed-on: #7
This commit was merged in pull request #7.
This commit is contained in:
matthieu
2025-10-23 16:43:09 +02:00
parent a077c40c5a 0475131b37
commit 96ba4c2809
7 changed files with 934 additions and 653 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
src/App.tsx
View File

@@ -1,91 +1,91 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import DeckManager from './components/DeckManager'; import DeckManager from './components/DeckManager';
import DeckList from './components/DeckList'; import DeckList from './components/DeckList';
import LoginForm from './components/LoginForm'; import LoginForm from './components/LoginForm';
import Navigation from './components/Navigation'; import Navigation from './components/Navigation';
import Collection from './components/Collection'; import Collection from './components/Collection';
import DeckEditor from './components/DeckEditor'; import DeckEditor from './components/DeckEditor';
import Profile from './components/Profile'; import Profile from './components/Profile';
import CardSearch from './components/CardSearch'; import CardSearch from './components/CardSearch';
import LifeCounter from './components/LifeCounter'; import LifeCounter from './components/LifeCounter';
import { AuthProvider, useAuth } from './contexts/AuthContext'; import { AuthProvider, useAuth } from './contexts/AuthContext';
type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'profile' | 'search' | 'life-counter'; type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'profile' | 'search' | 'life-counter';
function AppContent() { function AppContent() {
const [currentPage, setCurrentPage] = useState<Page>('home'); const [currentPage, setCurrentPage] = useState<Page>('home');
const [selectedDeckId, setSelectedDeckId] = useState<string | null>(null); const [selectedDeckId, setSelectedDeckId] = useState<string | null>(null);
const { user, loading } = useAuth(); const { user, loading } = useAuth();
if (loading) { if (loading) {
return ( return (
<div className="min-h-screen bg-gray-900 flex items-center justify-center"> <div className="min-h-screen bg-gray-900 flex items-center justify-center">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div> <div className="loading-spinner h-32 w-32"></div>
</div> </div>
); );
} }
if (!user && currentPage !== 'login') { if (!user && currentPage !== 'login') {
return <LoginForm />; return <LoginForm />;
} }
const handleDeckEdit = (deckId: string) => { const handleDeckEdit = (deckId: string) => {
setSelectedDeckId(deckId); setSelectedDeckId(deckId);
setCurrentPage('edit-deck'); setCurrentPage('edit-deck');
}; };
const renderPage = () => { const renderPage = () => {
switch (currentPage) { switch (currentPage) {
case 'home': case 'home':
return ( return (
<div className="min-h-screen bg-gray-900 text-white p-6"> <div className="min-h-screen bg-gray-900 text-white p-6 animate-fade-in">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<h1 className="text-3xl font-bold mb-6">My Decks</h1> <h1 className="text-3xl font-bold mb-6 animate-slide-in-left">My Decks</h1>
<DeckList onDeckEdit={handleDeckEdit} /> <DeckList onDeckEdit={handleDeckEdit} />
</div> </div>
</div> </div>
); );
case 'deck': case 'deck':
return <DeckManager />; return <DeckManager />;
case 'edit-deck': case 'edit-deck':
return selectedDeckId ? ( return selectedDeckId ? (
<DeckEditor <DeckEditor
deckId={selectedDeckId} deckId={selectedDeckId}
onClose={() => { onClose={() => {
setSelectedDeckId(null); setSelectedDeckId(null);
setCurrentPage('home'); setCurrentPage('home');
}} }}
/> />
) : null; ) : null;
case 'collection': case 'collection':
return <Collection />; return <Collection />;
case 'profile': case 'profile':
return <Profile />; return <Profile />;
case 'search': case 'search':
return <CardSearch />; return <CardSearch />;
case 'life-counter': case 'life-counter':
return <LifeCounter />; return <LifeCounter />;
case 'login': case 'login':
return <LoginForm />; return <LoginForm />;
default: default:
return null; return null;
} }
}; };
return ( return (
<div className="min-h-screen bg-gray-900"> <div className="min-h-screen bg-gray-900">
<Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} /> <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
{renderPage()} {renderPage()}
</div> </div>
); );
} }
function App() { function App() {
return ( return (
<AuthProvider> <AuthProvider>
<AppContent /> <AppContent />
</AuthProvider> </AuthProvider>
); );
} }
export default App; export default App;

152
src/components/DeckCard.tsx
View File

@@ -1,77 +1,77 @@
import React from 'react'; import React from 'react';
import { AlertTriangle, Check, Edit } from 'lucide-react'; import { AlertTriangle, Check, Edit } from 'lucide-react';
import { Deck } from '../types'; import { Deck } from '../types';
import { validateDeck } from '../utils/deckValidation'; import { validateDeck } from '../utils/deckValidation';
interface DeckCardProps { interface DeckCardProps {
deck: Deck; deck: Deck;
onEdit?: (deckId: string) => void; onEdit?: (deckId: string) => void;
} }
export default function DeckCard({ deck, onEdit }: DeckCardProps) { export default function DeckCard({ deck, onEdit }: DeckCardProps) {
if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){ if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
console.log("deck", deck.name); console.log("deck", deck.name);
console.log("cardEntities", deck.cards); console.log("cardEntities", deck.cards);
} }
const validation = validateDeck(deck); const validation = validateDeck(deck);
const commander = deck.format === 'commander' ? deck.cards.find(card => const commander = deck.format === 'commander' ? deck.cards.find(card =>
card.is_commander card.is_commander
)?.card : null; )?.card : null;
return ( return (
<div <div
className="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" className="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover cursor-pointer animate-scale-in"
onClick={() => onEdit?.(deck.id)} onClick={() => onEdit?.(deck.id)}
> >
<div className="relative h-48 overflow-hidden"> <div className="relative h-48 overflow-hidden">
<img <img
src={commander?.image_uris?.normal || deck.cards[0]?.card.image_uris?.normal} src={commander?.image_uris?.normal || deck.cards[0]?.card.image_uris?.normal}
alt={commander?.name || deck.cards[0]?.card.name} alt={commander?.name || deck.cards[0]?.card.name}
className="w-full object-cover object-top transform translate-y-[-12%]" className="w-full object-cover object-top transform translate-y-[-12%]"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent" />
</div> </div>
<div className="p-4"> <div className="p-4">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<h3 className="text-xl font-bold text-white">{deck.name}</h3> <h3 className="text-xl font-bold text-white">{deck.name}</h3>
{validation.isValid ? ( {validation.isValid ? (
<div className="flex items-center text-green-400"> <div className="flex items-center text-green-400">
<Check size={16} className="mr-1" /> <Check size={16} className="mr-1" />
<span className="text-sm">Legal</span> <span className="text-sm">Legal</span>
</div> </div>
) : ( ) : (
<div className="flex items-center text-yellow-400" title={validation.errors.join(', ')}> <div className="flex items-center text-yellow-400" title={validation.errors.join(', ')}>
<AlertTriangle size={16} className="mr-1" /> <AlertTriangle size={16} className="mr-1" />
<span className="text-sm">Issues</span> <span className="text-sm">Issues</span>
</div> </div>
)} )}
</div> </div>
<div className="flex items-center justify-between text-sm text-gray-400"> <div className="flex items-center justify-between text-sm text-gray-400">
<span className="capitalize">{deck.format}</span> <span className="capitalize">{deck.format}</span>
<span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span> <span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span>
</div> </div>
{commander && ( {commander && (
<div className="mt-2 text-sm text-gray-300"> <div className="mt-2 text-sm text-gray-300">
<span className="text-blue-400">Commander:</span> {commander.name} <span className="text-blue-400">Commander:</span> {commander.name}
</div> </div>
)} )}
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onEdit?.(deck.id); onEdit?.(deck.id);
}} }}
className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white" className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white btn-ripple transition-smooth glow-on-hover"
> >
<Edit size={20} /> <Edit size={20} />
Edit Deck Edit Deck
</button> </button>
</div> </div>
</div> </div>
); );
} }

196
src/components/DeckList.tsx
View File

@@ -1,99 +1,99 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { getCardById, getCardsByIds } from '../services/api'; import { getCardById, getCardsByIds } from '../services/api';
import { Deck } from '../types'; import { Deck } from '../types';
import { supabase } from "../lib/supabase"; import { supabase } from "../lib/supabase";
import DeckCard from "./DeckCard"; import DeckCard from "./DeckCard";
interface DeckListProps { interface DeckListProps {
onDeckEdit?: (deckId: string) => void; onDeckEdit?: (deckId: string) => void;
} }
const DeckList = ({ onDeckEdit }: DeckListProps) => { const DeckList = ({ onDeckEdit }: DeckListProps) => {
const [decks, setDecks] = useState<Deck[]>([]); const [decks, setDecks] = useState<Deck[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
const fetchDecks = async () => { const fetchDecks = async () => {
const { data: decksData, error: decksError } = await supabase.from('decks').select('*'); const { data: decksData, error: decksError } = await supabase.from('decks').select('*');
if (decksError) { if (decksError) {
console.error('Error fetching decks:', decksError); console.error('Error fetching decks:', decksError);
setLoading(false); setLoading(false);
return; return;
} }
const decksWithCards = await Promise.all(decksData.map(async (deck) => { const decksWithCards = await Promise.all(decksData.map(async (deck) => {
const { data: cardEntities, error: cardsError } = await supabase const { data: cardEntities, error: cardsError } = await supabase
.from('deck_cards') .from('deck_cards')
.select('*') .select('*')
.eq('deck_id', deck.id); .eq('deck_id', deck.id);
if (cardsError) { if (cardsError) {
console.error(`Error fetching cards for deck ${deck.id}:`, cardsError); console.error(`Error fetching cards for deck ${deck.id}:`, cardsError);
return { ...deck, cards: [] }; return { ...deck, cards: [] };
} }
const cardIds = cardEntities.map((entity) => entity.card_id); const cardIds = cardEntities.map((entity) => entity.card_id);
const uniqueCardIds = [...new Set(cardIds)]; const uniqueCardIds = [...new Set(cardIds)];
if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){ if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
console.log("uniqueCardIds", uniqueCardIds); console.log("uniqueCardIds", uniqueCardIds);
} }
try { try {
const scryfallCards = await getCardsByIds(uniqueCardIds); const scryfallCards = await getCardsByIds(uniqueCardIds);
if (!scryfallCards) { if (!scryfallCards) {
console.error("scryfallCards is undefined after getCardsByIds"); console.error("scryfallCards is undefined after getCardsByIds");
return { ...deck, cards: [] }; return { ...deck, cards: [] };
} }
const cards = cardEntities.map((entity) => { const cards = cardEntities.map((entity) => {
const card = scryfallCards.find((c) => c.id === entity.card_id); const card = scryfallCards.find((c) => c.id === entity.card_id);
return { return {
card, card,
quantity: entity.quantity, quantity: entity.quantity,
is_commander: entity.is_commander, is_commander: entity.is_commander,
}; };
}); });
return { return {
...deck, ...deck,
cards, cards,
createdAt: new Date(deck.created_at), createdAt: new Date(deck.created_at),
updatedAt: new Date(deck.updated_at), updatedAt: new Date(deck.updated_at),
}; };
} catch (error) { } catch (error) {
console.error("Error fetching cards from Scryfall:", error); console.error("Error fetching cards from Scryfall:", error);
return { ...deck, cards: [] }; return { ...deck, cards: [] };
} }
})); }));
setDecks(decksWithCards); setDecks(decksWithCards);
setLoading(false); setLoading(false);
}; };
fetchDecks(); fetchDecks();
}, []); }, []);
if (loading) { if (loading) {
return ( return (
<div className="flex items-center justify-center h-64"> <div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div> <div className="loading-spinner h-32 w-32"></div>
</div> </div>
); );
} }
return ( return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{decks.map((deck) => ( {decks.map((deck) => (
<DeckCard key={deck.id} deck={deck} onEdit={onDeckEdit} /> <DeckCard key={deck.id} deck={deck} onEdit={onDeckEdit} />
))} ))}
</div> </div>
); );
}; };
export default DeckList; export default DeckList;

292
src/components/LoginForm.tsx
View File

@@ -1,147 +1,147 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Mail, Lock, LogIn } from 'lucide-react'; import { Mail, Lock, LogIn } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext'; import { useAuth } from '../contexts/AuthContext';
import { Card } from '../types'; import { Card } from '../types';
import { getRandomCards } from '../services/api'; import { getRandomCards } from '../services/api';
export default function LoginForm() { export default function LoginForm() {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [isSignUp, setIsSignUp] = useState(false); const [isSignUp, setIsSignUp] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const { signIn, signUp } = useAuth(); const { signIn, signUp } = useAuth();
const [cards, setCards] = useState<Card[]>([]); const [cards, setCards] = useState<Card[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
const loadCards = async () => { const loadCards = async () => {
try { try {
const randomCards = await getRandomCards(6); const randomCards = await getRandomCards(6);
setCards(randomCards); setCards(randomCards);
} catch (error) { } catch (error) {
console.error('Failed to load cards:', error); console.error('Failed to load cards:', error);
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
loadCards(); loadCards();
}, []); }, []);
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setError(null); setError(null);
try { try {
if (isSignUp) { if (isSignUp) {
await signUp(email, password); await signUp(email, password);
} else { } else {
await signIn(email, password); await signIn(email, password);
} }
window.location.href = '/'; // Redirect to home after successful login window.location.href = '/'; // Redirect to home after successful login
} catch (error) { } catch (error) {
setError(error instanceof Error ? error.message : 'An error occurred'); setError(error instanceof Error ? error.message : 'An error occurred');
} }
}; };
if (loading) { if (loading) {
return <div className="animate-pulse h-96 bg-gray-700/50 rounded-lg"></div>; return <div className="animate-pulse h-96 bg-gray-700/50 rounded-lg"></div>;
} }
return ( return (
<div className="relative min-h-screen flex items-center justify-center p-6 overflow-hidden"> <div className="relative min-h-screen flex items-center justify-center p-6 overflow-hidden">
{/* Animated Background */} {/* Animated Background */}
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<div <div
className="flex animate-slide" className="flex animate-slide"
style={{ style={{
width: `${cards.length * 100}%`, width: `${cards.length * 100}%`,
animation: 'slide 60s linear infinite' animation: 'slide 60s linear infinite'
}} }}
> >
{[...cards, ...cards].map((card, index) => ( {[...cards, ...cards].map((card, index) => (
<div <div
key={`${card.id}-${index}`} key={`${card.id}-${index}`}
className="relative w-full h-screen" className="relative w-full h-screen"
style={{ style={{
width: `${100 / (cards.length * 2)}%` width: `${100 / (cards.length * 2)}%`
}} }}
> >
<div <div
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-1000" className="absolute inset-0 bg-cover bg-center transform transition-transform duration-1000"
style={{ style={{
backgroundImage: `url(${card.image_uris?.normal})`, backgroundImage: `url(${card.image_uris?.normal})`,
filter: 'blur(8px) brightness(0.4)', filter: 'blur(8px) brightness(0.4)',
}} }}
/> />
</div> </div>
))} ))}
</div> </div>
</div> </div>
{/* Login Form */} {/* Login Form */}
<div className="relative z-10 bg-gray-900/80 p-8 rounded-lg shadow-xl backdrop-blur-sm w-full max-w-md"> <div className="relative z-10 bg-gray-900/80 p-8 rounded-lg shadow-xl backdrop-blur-sm w-full max-w-md glass-effect animate-scale-in">
<h2 className="text-3xl font-bold text-orange-500 mb-6 text-center"> <h2 className="text-3xl font-bold text-orange-500 mb-6 text-center animate-bounce-in">
Deckerr Deckerr
</h2> </h2>
{error && ( {error && (
<div className="mb-4 p-3 bg-red-500/10 border border-red-500 rounded text-red-500"> <div className="mb-4 p-3 bg-red-500/10 border border-red-500 rounded text-red-500 animate-fade-in">
{error} {error}
</div> </div>
)} )}
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<div> <div>
<label className="block text-sm font-medium text-gray-300 mb-2"> <label className="block text-sm font-medium text-gray-300 mb-2">
Email Email
</label> </label>
<div className="relative"> <div className="relative">
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} /> <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
<input <input
type="email" type="email"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white" className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white transition-smooth"
placeholder="Enter your email" placeholder="Enter your email"
required required
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-300 mb-2"> <label className="block text-sm font-medium text-gray-300 mb-2">
Password Password
</label> </label>
<div className="relative"> <div className="relative">
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} /> <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
<input <input
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white" className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white transition-smooth"
placeholder="Enter your password" placeholder="Enter your password"
required required
/> />
</div> </div>
</div> </div>
<button <button
type="submit" type="submit"
className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200" className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg btn-ripple glow-on-hover transition-smooth"
> >
<LogIn size={20} /> <LogIn size={20} />
{isSignUp ? 'Sign Up' : 'Sign In'} {isSignUp ? 'Sign Up' : 'Sign In'}
</button> </button>
</form> </form>
<div className="mt-4 text-center"> <div className="mt-4 text-center">
<button <button
onClick={() => setIsSignUp(!isSignUp)} onClick={() => setIsSignUp(!isSignUp)}
className="text-blue-400 hover:text-blue-300" className="text-blue-400 hover:text-blue-300 transition-smooth"
> >
{isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'} {isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
); );
} }

60
src/components/MagicCard.tsx
View File

@@ -1,31 +1,31 @@
import React from 'react'; import React from 'react';
import { Card } from '../types'; import { Card } from '../types';
interface MagicCardProps { interface MagicCardProps {
card: Card; card: Card;
} }
const MagicCard = ({ card }: MagicCardProps) => { const MagicCard = ({ card }: MagicCardProps) => {
return ( return (
<div className="relative"> <div className="relative card-hover animate-fade-in">
{card.image_uris?.normal ? ( {card.image_uris?.normal ? (
<img <img
src={card.image_uris.normal} src={card.image_uris.normal}
alt={card.name} alt={card.name}
className="w-full h-auto rounded-lg" className="w-full h-auto rounded-lg transition-smooth"
/> />
) : ( ) : (
<div className="w-full h-64 bg-gray-700 rounded-lg flex items-center justify-center text-gray-400"> <div className="w-full h-64 bg-gray-700 rounded-lg flex items-center justify-center text-gray-400 transition-smooth">
No Image Available No Image Available
</div> </div>
)} )}
{card.prices?.usd && ( {card.prices?.usd && (
<div className="absolute bottom-0 left-0 p-2 bg-gray-900 bg-opacity-50 text-white rounded-bl-lg rounded-tr-lg"> <div className="absolute bottom-0 left-0 p-2 bg-gray-900 bg-opacity-50 text-white rounded-bl-lg rounded-tr-lg transition-smooth">
${card.prices.usd} ${card.prices.usd}
</div> </div>
)} )}
</div> </div>
); );
}; };
export default MagicCard; export default MagicCard;

396
src/components/Navigation.tsx
View File

@@ -1,199 +1,199 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { Home, PlusSquare, Library, LogOut, Settings, ChevronDown, Search, Heart, Menu } from 'lucide-react'; import { Home, PlusSquare, Library, LogOut, Settings, ChevronDown, Search, Heart, Menu } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext'; import { useAuth } from '../contexts/AuthContext';
import { supabase } from '../lib/supabase'; import { supabase } from '../lib/supabase';
type Page = 'home' | 'deck' | 'login' | 'collection' | 'profile' | 'search' | 'life-counter'; type Page = 'home' | 'deck' | 'login' | 'collection' | 'profile' | 'search' | 'life-counter';
interface NavigationProps { interface NavigationProps {
currentPage: Page; currentPage: Page;
setCurrentPage: (page: Page) => void; setCurrentPage: (page: Page) => void;
} }
export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) { export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) {
const { user, signOut } = useAuth(); const { user, signOut } = useAuth();
const [showDropdown, setShowDropdown] = useState(false); const [showDropdown, setShowDropdown] = useState(false);
const [showMobileMenu, setShowMobileMenu] = useState(false); const [showMobileMenu, setShowMobileMenu] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null); const dropdownRef = useRef<HTMLDivElement>(null);
const mobileMenuRef = useRef<HTMLDivElement>(null); const mobileMenuRef = useRef<HTMLDivElement>(null);
const [username, setUsername] = useState<string | null>(null); const [username, setUsername] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
const fetchProfile = async () => { const fetchProfile = async () => {
if (user) { if (user) {
const { data } = await supabase const { data } = await supabase
.from('profiles') .from('profiles')
.select('username') .select('username')
.eq('id', user.id) .eq('id', user.id)
.single(); .single();
if (data) { if (data) {
setUsername(data.username); setUsername(data.username);
} }
} }
}; };
fetchProfile(); fetchProfile();
}, [user]); }, [user]);
useEffect(() => { useEffect(() => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
setShowDropdown(false); setShowDropdown(false);
} }
if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) { if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) {
setShowMobileMenu(false); setShowMobileMenu(false);
} }
}; };
document.addEventListener('mousedown', handleClickOutside); document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside);
}, []); }, []);
const navItems = [ const navItems = [
{ id: 'home' as const, label: 'Home', icon: Home }, { id: 'home' as const, label: 'Home', icon: Home },
{ id: 'deck' as const, label: 'New Deck', icon: PlusSquare }, { id: 'deck' as const, label: 'New Deck', icon: PlusSquare },
{ id: 'collection' as const, label: 'Collection', icon: Library }, { id: 'collection' as const, label: 'Collection', icon: Library },
{ id: 'search' as const, label: 'Search', icon: Search }, { id: 'search' as const, label: 'Search', icon: Search },
{ id: 'life-counter' as const, label: 'Life Counter', icon: Heart }, { id: 'life-counter' as const, label: 'Life Counter', icon: Heart },
]; ];
const handleSignOut = async () => { const handleSignOut = async () => {
try { try {
await signOut(); await signOut();
setCurrentPage('login'); setCurrentPage('login');
} catch (error) { } catch (error) {
console.error('Error signing out:', error); console.error('Error signing out:', error);
} }
}; };
const getAvatarUrl = (userId: string) => { const getAvatarUrl = (userId: string) => {
return `https://api.dicebear.com/7.x/avataaars/svg?seed=${userId}&backgroundColor=b6e3f4,c0aede,d1d4f9`; return `https://api.dicebear.com/7.x/avataaars/svg?seed=${userId}&backgroundColor=b6e3f4,c0aede,d1d4f9`;
}; };
return ( return (
<> <>
{/* Desktop Navigation - Top */} {/* Desktop Navigation - Top */}
<nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-50"> <nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-50 animate-slide-in-left">
<div className="max-w-7xl mx-auto px-4"> <div className="max-w-7xl mx-auto px-4">
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
<div className="flex items-center space-x-8"> <div className="flex items-center space-x-8">
<span className="text-2xl font-bold text-orange-500">Deckerr</span> <span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
{navItems.map((item) => ( {navItems.map((item) => (
<button <button
key={item.id} key={item.id}
onClick={() => setCurrentPage(item.id)} onClick={() => setCurrentPage(item.id)}
className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-smooth
${currentPage === item.id ${currentPage === item.id
? 'text-white bg-gray-900' ? 'text-white bg-gray-900 animate-pulse-glow'
: 'text-gray-300 hover:text-white hover:bg-gray-700' : 'text-gray-300 hover:text-white hover:bg-gray-700'
}`} }`}
> >
<item.icon size={20} /> <item.icon size={20} />
<span>{item.label}</span> <span>{item.label}</span>
</button> </button>
))} ))}
</div> </div>
{user && ( {user && (
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className="relative" ref={dropdownRef}> <div className="relative" ref={dropdownRef}>
<button <button
onClick={() => setShowDropdown(!showDropdown)} onClick={() => setShowDropdown(!showDropdown)}
className="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-gray-700" className="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-gray-700 transition-smooth"
> >
<img <img
src={getAvatarUrl(user.id)} src={getAvatarUrl(user.id)}
alt="User avatar" alt="User avatar"
className="w-8 h-8 rounded-full bg-gray-700" className="w-8 h-8 rounded-full bg-gray-700 transition-smooth hover:scale-110"
/> />
<span className="text-gray-300 text-sm">{username || user.email}</span> <span className="text-gray-300 text-sm">{username || user.email}</span>
<ChevronDown size={16} className="text-gray-400" /> <ChevronDown size={16} className="text-gray-400" />
</button> </button>
{showDropdown && ( {showDropdown && (
<div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700"> <div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
<button <button
onClick={() => { onClick={() => {
setCurrentPage('profile'); setCurrentPage('profile');
setShowDropdown(false); setShowDropdown(false);
}} }}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700" className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
> >
<Settings size={16} /> <Settings size={16} />
<span>Profile Settings</span> <span>Profile Settings</span>
</button> </button>
<button <button
onClick={handleSignOut} onClick={handleSignOut}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700" className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
> >
<LogOut size={16} /> <LogOut size={16} />
<span>Sign Out</span> <span>Sign Out</span>
</button> </button>
</div> </div>
)} )}
</div> </div>
</div> </div>
)} )}
</div> </div>
</div> </div>
</nav> </nav>
{/* Mobile Navigation - Bottom */} {/* Mobile Navigation - Bottom */}
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50"> <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50 animate-slide-in-right">
<div className="flex justify-between items-center h-16 px-4"> <div className="flex justify-between items-center h-16 px-4">
<span className="text-2xl font-bold text-orange-500">Deckerr</span> <span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
<div className="relative" ref={mobileMenuRef}> <div className="relative" ref={mobileMenuRef}>
<button <button
onClick={() => setShowMobileMenu(!showMobileMenu)} onClick={() => setShowMobileMenu(!showMobileMenu)}
className="text-gray-300 hover:text-white" className="text-gray-300 hover:text-white"
> >
<Menu size={24} /> <Menu size={24} />
</button> </button>
{showMobileMenu && ( {showMobileMenu && (
<div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700"> <div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
{navItems.map((item) => ( {navItems.map((item) => (
<button <button
key={item.id} key={item.id}
onClick={() => { onClick={() => {
setCurrentPage(item.id); setCurrentPage(item.id);
setShowMobileMenu(false); setShowMobileMenu(false);
}} }}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700" className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
> >
<item.icon size={16} /> <item.icon size={16} />
<span>{item.label}</span> <span>{item.label}</span>
</button> </button>
))} ))}
{user && ( {user && (
<> <>
<button <button
onClick={() => { onClick={() => {
setCurrentPage('profile'); setCurrentPage('profile');
setShowMobileMenu(false); setShowMobileMenu(false);
}} }}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700" className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
> >
<Settings size={16} /> <Settings size={16} />
<span>Profile Settings</span> <span>Profile Settings</span>
</button> </button>
<button <button
onClick={handleSignOut} onClick={handleSignOut}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700" className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
> >
<LogOut size={16} /> <LogOut size={16} />
<span>Sign Out</span> <span>Sign Out</span>
</button> </button>
</> </>
)} )}
</div> </div>
)} )}
</div> </div>
</div> </div>
</nav> </nav>
{/* Content Padding */} {/* Content Padding */}
<div className="md:pt-16 pb-16 md:pb-0" /> <div className="md:pt-16 pb-16 md:pb-0" />
</> </>
); );
} }

311
src/index.css
View File

@@ -1,16 +1,297 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@keyframes slide { /* Existing slide animation */
0% { @keyframes slide {
transform: translateX(0); 0% {
} transform: translateX(0);
100% { }
transform: translateX(-50%); 100% {
} transform: translateX(-50%);
} }
}
.animate-slide {
animation: slide 60s linear infinite; .animate-slide {
animation: slide 60s linear infinite;
}
/* Fade In Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
/* Fade In Delayed - for staggered animations */
.animate-fade-in-delay-1 {
animation: fadeIn 0.6s ease-out 0.1s forwards;
opacity: 0;
}
.animate-fade-in-delay-2 {
animation: fadeIn 0.6s ease-out 0.2s forwards;
opacity: 0;
}
.animate-fade-in-delay-3 {
animation: fadeIn 0.6s ease-out 0.3s forwards;
opacity: 0;
}
/* Slide In From Left */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-slide-in-left {
animation: slideInLeft 0.5s ease-out forwards;
}
/* Slide In From Right */
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-slide-in-right {
animation: slideInRight 0.5s ease-out forwards;
}
/* Scale In Animation */
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.animate-scale-in {
animation: scaleIn 0.4s ease-out forwards;
}
/* Pulse Glow Animation */
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4);
}
}
.animate-pulse-glow {
animation: pulseGlow 2s ease-in-out infinite;
}
/* Shimmer Effect */
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.animate-shimmer {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0) 100%
);
background-size: 1000px 100%;
animation: shimmer 2s infinite;
}
/* Bounce In Animation */
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
.animate-bounce-in {
animation: bounceIn 0.6s ease-out forwards;
}
/* Float Animation */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
/* Gradient Animation */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.animate-gradient {
background: linear-gradient(
-45deg,
#ee7752,
#e73c7e,
#23a6d5,
#23d5ab
);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
/* Card Flip Animation */
@keyframes flipCard {
0% {
transform: perspective(1000px) rotateY(0);
}
100% {
transform: perspective(1000px) rotateY(180deg);
}
}
.animate-flip {
animation: flipCard 0.6s ease-in-out;
}
/* Rotate Animation */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-rotate {
animation: rotate 2s linear infinite;
}
/* Enhanced Hover Effects */
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
0 0 20px rgba(59, 130, 246, 0.3);
}
/* Button Ripple Effect */
.btn-ripple {
position: relative;
overflow: hidden;
}
.btn-ripple::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-ripple:active::after {
width: 300px;
height: 300px;
}
/* Smooth Transitions */
.transition-smooth {
transition: all 0.3s ease-in-out;
}
/* Glass Morphism Effect */
.glass-effect {
background: rgba(31, 41, 55, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Glow on Hover */
.glow-on-hover {
transition: all 0.3s ease;
}
.glow-on-hover:hover {
box-shadow: 0 0 15px rgba(59, 130, 246, 0.6),
0 0 30px rgba(59, 130, 246, 0.4),
0 0 45px rgba(59, 130, 246, 0.2);
transform: scale(1.05);
}
/* Loading Animation */
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-spinner {
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #3b82f6;
border-radius: 50%;
animation: loading 1s linear infinite;
} }