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

Compare commits

base: matthieu:a077c40c5a4b9a4eeb119eac70cdb89e3c0515b8
Branches Tags
matthieu:master matthieu:feature/bg-carousel-infinite-diagonal-of-random-cards matthieu:feature/trade-fix matthieu:feature/issue-10-deck-card-collection matthieu:bugfix/ticket-ISSUE-8 matthieu:feature/issue-6-add-some-css-animation-to-make-the-project-prettie
..
compare: matthieu:bugfix/ticket-ISSUE-8
Branches Tags
matthieu:feature/bg-carousel-infinite-diagonal-of-random-cards matthieu:master matthieu:feature/trade-fix matthieu:feature/issue-10-deck-card-collection matthieu:bugfix/ticket-ISSUE-8 matthieu:feature/issue-6-add-some-css-animation-to-make-the-project-prettie

9 Commits
a077c40c5a ... bugfix/tic

Author SHA1 Message Date
Matthieu
d354622e39 [ISSUE-8] Redesign life counter page with responsive layout and card backgrounds 
Changements détaillés:
- Suppression du formulaire de configuration initiale, démarrage direct avec 2 joueurs
- Implémentation d'une grille responsive (2-8 joueurs, 1-4 colonnes selon l'écran)
- Ajout de la configuration dynamique du nombre de joueurs avec mise à jour instantanée
- Création de fonds personnalisables utilisant les illustrations de cartes Scryfall
- Intégration d'une modale de recherche de cartes par nom

Détails techniques:
- Nouveaux composants: PlayerLifeCounter (87 lignes), CardSearchModal (118 lignes)
- Réécriture complète de LifeCounter (209 lignes)
- Design mobile-first avec breakpoints Tailwind (sm, md, lg)
- TypeScript avec typage complet
- Intégration avec le service Scryfall API existant
- Fonctionnalités: édition des noms, vie de départ (20/30/40), reset global

Tests: Build réussi, pas d'erreurs de linting

Resolves: #8
 2025-10-27 11:43:18 +01:00
matthieu
96ba4c2809 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 
Reviewed-on: #7
 2025-10-23 16:43:09 +02:00
matthieu
0475131b37 Update components with CSS animations 2025-10-23 16:20:09 +02:00
matthieu
19898d9f5e Update components with CSS animations 2025-10-23 16:19:32 +02:00
matthieu
a76f8176f6 Update components with CSS animations 2025-10-23 16:19:15 +02:00
matthieu
91c237824a Update components with CSS animations 2025-10-23 16:18:45 +02:00
matthieu
80216ae478 Update components with CSS animations 2025-10-23 16:18:22 +02:00
matthieu
c3cc4e59f6 Update components with CSS animations 2025-10-23 16:17:58 +02:00
matthieu
3cc2676530 Add comprehensive CSS animations and effects 2025-10-23 16:17:01 +02:00
10 changed files with 1341 additions and 798 deletions
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;

136
src/components/CardSearchModal.tsx Normal file
View File

@@ -0,0 +1,136 @@
import React, { useState } from 'react';
import { X, Search } from 'lucide-react';
import { searchCards } from '../services/api';
import { Card } from '../types';
interface CardSearchModalProps {
isOpen: boolean;
onClose: () => void;
onSelectCard: (card: Card) => void;
}
export default function CardSearchModal({ isOpen, onClose, onSelectCard }: CardSearchModalProps) {
const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState<Card[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleSearch = async (e: React.FormEvent) => {
e.preventDefault();
if (!searchQuery.trim()) return;
setLoading(true);
setError(null);
try {
const cards = await searchCards(`name:${searchQuery}`);
setSearchResults(cards || []);
} catch (err) {
setError('Failed to fetch cards. Please try again.');
console.error('Error fetching cards:', err);
} finally {
setLoading(false);
}
};
const handleSelectCard = (card: Card) => {
onSelectCard(card);
onClose();
setSearchQuery('');
setSearchResults([]);
};
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
<div className="bg-gray-800 rounded-lg max-w-4xl w-full max-h-[90vh] flex flex-col">
{/* Header */}
<div className="flex items-center justify-between p-4 border-b border-gray-700">
<h2 className="text-xl font-bold text-white">Search Card for Background</h2>
<button
onClick={onClose}
className="text-gray-400 hover:text-white transition-colors"
>
<X size={24} />
</button>
</div>
{/* Search Form */}
<div className="p-4 border-b border-gray-700">
<form onSubmit={handleSearch} className="flex gap-2">
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="flex-1 px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
placeholder="Search for a card by name..."
autoFocus
/>
<button
type="submit"
className="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white flex items-center gap-2 transition-colors"
>
<Search size={20} />
Search
</button>
</form>
</div>
{/* Results */}
<div className="flex-1 overflow-y-auto p-4">
{loading && (
<div className="flex items-center justify-center h-32">
<div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
</div>
)}
{error && (
<div className="bg-red-500/10 border border-red-500 rounded-lg p-4 text-red-400">
{error}
</div>
)}
{!loading && !error && searchResults.length === 0 && searchQuery && (
<div className="text-center text-gray-400 py-8">
No cards found. Try a different search term.
</div>
)}
{!loading && !error && searchResults.length === 0 && !searchQuery && (
<div className="text-center text-gray-400 py-8">
Search for a card to use as background
</div>
)}
{searchResults.length > 0 && (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
{searchResults.map((card) => (
<button
key={card.id}
onClick={() => handleSelectCard(card)}
className="bg-gray-700 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all transform hover:scale-105"
>
{card.image_uris?.art_crop ? (
<img
src={card.image_uris.art_crop}
alt={card.name}
className="w-full h-32 object-cover"
/>
) : (
<div className="w-full h-32 bg-gray-600 flex items-center justify-center">
<span className="text-gray-400 text-xs text-center px-2">No Image</span>
</div>
)}
<div className="p-2">
<p className="text-white text-sm font-medium truncate">{card.name}</p>
</div>
</button>
))}
</div>
)}
</div>
</div>
</div>
);
}

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;

331
src/components/LifeCounter.tsx
View File

@@ -1,167 +1,208 @@
import React, { useState, useEffect } from 'react'; import React, { useState } from 'react';
import { Plus, Minus } from 'lucide-react'; import { Users, RotateCcw, Settings } from 'lucide-react';
import PlayerLifeCounter from './PlayerLifeCounter';
import CardSearchModal from './CardSearchModal';
import { Card } from '../types';
interface Player { interface Player {
id: number; id: number;
name: string; name: string;
life: number; life: number;
color: string; backgroundImage?: string;
}
const DEFAULT_STARTING_LIFE = 20;
export default function LifeCounter() {
const [players, setPlayers] = useState<Player[]>([
{ id: 1, name: 'Player 1', life: DEFAULT_STARTING_LIFE },
{ id: 2, name: 'Player 2', life: DEFAULT_STARTING_LIFE },
]);
const [isCardSearchOpen, setIsCardSearchOpen] = useState(false);
const [selectedPlayerId, setSelectedPlayerId] = useState<number | null>(null);
const [showSettings, setShowSettings] = useState(false);
const [startingLife, setStartingLife] = useState(DEFAULT_STARTING_LIFE);
const updateLife = (playerId: number, change: number) => {
setPlayers((prevPlayers) =>
prevPlayers.map((player) =>
player.id === playerId ? { ...player, life: Math.max(0, player.life + change) } : player
)
);
};
const changePlayerName = (playerId: number) => {
const player = players.find((p) => p.id === playerId);
if (!player) return;
const newName = prompt('Enter new player name:', player.name);
if (newName && newName.trim()) {
setPlayers((prevPlayers) =>
prevPlayers.map((p) => (p.id === playerId ? { ...p, name: newName.trim() } : p))
);
} }
};
const COLORS = ['white', 'blue', 'black', 'red', 'green']; const openBackgroundSelector = (playerId: number) => {
setSelectedPlayerId(playerId);
setIsCardSearchOpen(true);
};
export default function LifeCounter() { const handleCardSelect = (card: Card) => {
const [numPlayers, setNumPlayers] = useState<number | null>(null); if (selectedPlayerId !== null && card.image_uris?.art_crop) {
const [playerNames, setPlayerNames] = useState<string[]>([]); setPlayers((prevPlayers) =>
const [players, setPlayers] = useState<Player[]>([]); prevPlayers.map((p) =>
const [setupComplete, setSetupComplete] = useState(false); p.id === selectedPlayerId ? { ...p, backgroundImage: card.image_uris!.art_crop } : p
)
);
}
setSelectedPlayerId(null);
};
useEffect(() => { const changePlayerCount = (count: number) => {
if (numPlayers !== null) { const currentCount = players.length;
setPlayers(
Array.from({ length: numPlayers }, (_, i) => ({
id: i + 1,
name: playerNames[i] || `Player ${i + 1}`,
life: 20,
color: COLORS[i % COLORS.length],
}))
);
}
}, [numPlayers, playerNames]);
const handleNumPlayersChange = (e: React.ChangeEvent<HTMLSelectElement>) => { if (count > currentCount) {
const newNumPlayers = parseInt(e.target.value, 10); // Add players
setNumPlayers(newNumPlayers); const newPlayers = Array.from({ length: count - currentCount }, (_, i) => ({
setPlayerNames(Array(newNumPlayers).fill('')); id: currentCount + i + 1,
}; name: `Player ${currentCount + i + 1}`,
life: startingLife,
}));
setPlayers([...players, ...newPlayers]);
} else if (count < currentCount) {
// Remove players
setPlayers(players.slice(0, count));
}
};
const handleNameChange = (index: number, newName: string) => { const resetAllLife = () => {
const updatedNames = [...playerNames]; if (confirm(`Reset all players to ${startingLife} life?`)) {
updatedNames[index] = newName; setPlayers((prevPlayers) =>
setPlayerNames(updatedNames); prevPlayers.map((p) => ({ ...p, life: startingLife }))
}; );
}
};
const updateLife = (playerId: number, change: number) => { const getGridClass = () => {
setPlayers((prevPlayers) => const count = players.length;
prevPlayers.map((player) => if (count === 1) return 'grid-cols-1';
player.id === playerId ? { ...player, life: player.life + change } : player if (count === 2) return 'grid-cols-1 md:grid-cols-2';
) if (count === 3) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
); if (count === 4) return 'grid-cols-2 lg:grid-cols-2';
}; if (count === 5) return 'grid-cols-2 lg:grid-cols-3';
if (count === 6) return 'grid-cols-2 lg:grid-cols-3';
if (count === 7 || count === 8) return 'grid-cols-2 lg:grid-cols-4';
return 'grid-cols-2 lg:grid-cols-4';
};
const handleSubmit = (e: React.FormEvent) => { return (
e.preventDefault(); <div className="min-h-screen bg-gray-900 text-white flex flex-col">
setSetupComplete(true); {/* Header */}
}; <div className="bg-gray-800 border-b border-gray-700 px-4 py-3 flex items-center justify-between">
<h1 className="text-xl md:text-2xl font-bold">Life Counter</h1>
<div className="flex items-center gap-2">
<button
onClick={resetAllLife}
className="bg-gray-700 hover:bg-gray-600 text-white rounded-lg px-3 py-2 text-sm flex items-center gap-2 transition-colors"
>
<RotateCcw size={18} />
<span className="hidden sm:inline">Reset</span>
</button>
<button
onClick={() => setShowSettings(!showSettings)}
className="bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-3 py-2 text-sm flex items-center gap-2 transition-colors"
>
<Settings size={18} />
<span className="hidden sm:inline">Settings</span>
</button>
</div>
</div>
const renderSetupForm = () => ( {/* Settings Panel */}
<div className="max-w-md mx-auto"> {showSettings && (
<h2 className="text-2xl font-bold mb-6">Setup Players</h2> <div className="bg-gray-800 border-b border-gray-700 px-4 py-4 animate-fade-in">
<form onSubmit={handleSubmit} className="space-y-4"> <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Player Count */}
<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">
<Users size={16} className="inline mr-2" />
Number of Players Number of Players
</label> </label>
<select <div className="grid grid-cols-4 gap-2">
value={numPlayers || ''} {[2, 3, 4, 5, 6, 7, 8].map((count) => (
onChange={handleNumPlayersChange} <button
className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white" key={count}
required onClick={() => changePlayerCount(count)}
> className={`py-2 rounded-lg font-medium transition-colors ${
<option value="" disabled>Select Number of Players</option> players.length === count
{[2, 3, 4, 5, 6].map((num) => ( ? 'bg-blue-600 text-white'
<option key={num} value={num}> : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
{num} }`}
</option> >
{count}
</button>
))} ))}
</select> </div>
</div> </div>
{numPlayers !== null && {/* Starting Life */}
Array.from({ length: numPlayers }, (_, i) => ( <div>
<div key={i}> <label className="block text-sm font-medium text-gray-300 mb-2">
<label className="block text-sm font-medium text-gray-300 mb-2"> Starting Life Total
Player {i + 1} Name </label>
</label> <div className="grid grid-cols-4 gap-2">
<input {[20, 30, 40].map((life) => (
type="text" <button
value={playerNames[i] || ''} key={life}
onChange={(e) => handleNameChange(i, e.target.value)} onClick={() => {
className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white" setStartingLife(life);
placeholder={`Player ${i + 1} Name`} if (confirm(`Change starting life to ${life}? This will reset all players.`)) {
/> setPlayers((prevPlayers) =>
</div> prevPlayers.map((p) => ({ ...p, life }))
))} );
}
{numPlayers !== null && (
<button
type="submit"
className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg"
>
Start Game
</button>
)}
</form>
</div>
);
const renderLifeCounters = () => (
<div className="flex flex-col items-center justify-center min-h-screen">
<div className="relative w-full h-full">
{players.map((player, index) => {
const angle = (index / players.length) * 360;
const rotation = 360 - angle;
const x = 50 + 40 * Math.cos((angle - 90) * Math.PI / 180);
const y = 50 + 40 * Math.sin((angle - 90) * Math.PI / 180);
return (
<div
key={player.id}
className="absolute transform -translate-x-1/2 -translate-y-1/2"
style={{
top: `${y}%`,
left: `${x}%`,
transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
}}
>
<div
className="rounded-lg p-4 flex flex-col items-center"
style={{
backgroundColor: `var(--color-${player.color}-primary)`,
color: 'white',
transform: `rotate(${-rotation}deg)`,
}} }}
className={`py-2 rounded-lg font-medium transition-colors ${
startingLife === life
? 'bg-green-600 text-white'
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
}`}
> >
<h2 className="text-xl font-bold mb-4">{player.name}</h2> {life}
<div className="text-4xl font-bold mb-4">{player.life}</div> </button>
<div className="flex gap-4"> ))}
<button </div>
onClick={() => updateLife(player.id, 1)} </div>
className="bg-green-600 hover:bg-green-700 rounded-full p-2"
>
<Plus size={24} />
</button>
<button
onClick={() => updateLife(player.id, -1)}
className="bg-red-600 hover:bg-red-700 rounded-full p-2"
>
<Minus size={24} />
</button>
</div>
</div>
</div>
);
})}
</div> </div>
</div> </div>
); )}
return ( {/* Life Counter Grid */}
<div className="min-h-screen bg-gray-900 text-white p-6"> <div className={`flex-1 grid ${getGridClass()} gap-2 md:gap-4 p-2 md:p-4`}>
<div className="max-w-7xl mx-auto"> {players.map((player) => (
<h1 className="text-3xl font-bold mb-6">Life Counter</h1> <PlayerLifeCounter
{!setupComplete ? renderSetupForm() : renderLifeCounters()} key={player.id}
</div> id={player.id}
</div> name={player.name}
); life={player.life}
} backgroundImage={player.backgroundImage}
onLifeChange={(change) => updateLife(player.id, change)}
onChangeName={() => changePlayerName(player.id)}
onChangeBackground={() => openBackgroundSelector(player.id)}
/>
))}
</div>
{/* Card Search Modal */}
<CardSearchModal
isOpen={isCardSearchOpen}
onClose={() => {
setIsCardSearchOpen(false);
setSelectedPlayerId(null);
}}
onSelectCard={handleCardSelect}
/>
</div>
);
}

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" />
</> </>
); );
} }

85
src/components/PlayerLifeCounter.tsx Normal file
View File

@@ -0,0 +1,85 @@
import React from 'react';
import { Plus, Minus, Image as ImageIcon } from 'lucide-react';
interface PlayerLifeCounterProps {
id: number;
name: string;
life: number;
backgroundImage?: string;
onLifeChange: (change: number) => void;
onChangeName: () => void;
onChangeBackground: () => void;
}
export default function PlayerLifeCounter({
name,
life,
backgroundImage,
onLifeChange,
onChangeName,
onChangeBackground,
}: PlayerLifeCounterProps) {
return (
<div className="relative h-full rounded-lg overflow-hidden shadow-lg">
{/* Background Image */}
{backgroundImage ? (
<div
className="absolute inset-0 bg-cover bg-center"
style={{ backgroundImage: `url(${backgroundImage})` }}
>
<div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/50 to-black/70"></div>
</div>
) : (
<div className="absolute inset-0 bg-gradient-to-br from-gray-700 via-gray-800 to-gray-900"></div>
)}
{/* Content */}
<div className="relative h-full flex flex-col items-center justify-between p-4 md:p-6">
{/* Player Name */}
<button
onClick={onChangeName}
className="text-white font-bold text-lg md:text-xl hover:text-blue-300 transition-colors px-4 py-2 rounded-lg hover:bg-white/10"
>
{name}
</button>
{/* Life Total */}
<div className="flex flex-col items-center justify-center flex-1">
<div className="text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-bold text-white drop-shadow-2xl">
{life}
</div>
</div>
{/* Controls */}
<div className="flex flex-col gap-3 w-full">
{/* Life Buttons */}
<div className="flex gap-3 w-full">
<button
onClick={() => onLifeChange(-1)}
className="flex-1 bg-red-600 hover:bg-red-700 text-white rounded-lg py-3 md:py-4 px-4 font-bold text-xl transition-colors active:scale-95 flex items-center justify-center gap-2"
>
<Minus size={24} />
<span className="hidden sm:inline">-1</span>
</button>
<button
onClick={() => onLifeChange(1)}
className="flex-1 bg-green-600 hover:bg-green-700 text-white rounded-lg py-3 md:py-4 px-4 font-bold text-xl transition-colors active:scale-95 flex items-center justify-center gap-2"
>
<Plus size={24} />
<span className="hidden sm:inline">+1</span>
</button>
</div>
{/* Background Button */}
<button
onClick={onChangeBackground}
className="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-lg py-2 px-4 text-sm transition-colors flex items-center justify-center gap-2"
>
<ImageIcon size={16} />
Change Background
</button>
</div>
</div>
</div>
);
}

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;
} }