-
-
- );
- }
-
- if (!user && currentPage !== 'login') {
- return
-
- );
- case 'deck':
- return
-
- My Decks
-
-
- );
- }
-
- function App() {
- return (
-
+
+
+ );
+ }
+
+ if (!user && currentPage !== 'login') {
+ return
+
+ );
+ case 'deck':
+ return
+
+ My Decks
+
+
+ );
+ }
+
+ function App() {
+ return (
+
-
- );
+import { useEffect, useState } from 'react';
+import { Card } from '../types';
+import { getRandomCards } from '../services/api';
+
+export default function CardCarousel() {
+ const [cards, setCards] = useState
- {cards.map((card, index) => (
-
- ))}
-
-
+
+ );
}
diff --git a/src/components/CardSearch.tsx b/src/components/CardSearch.tsx
index fd8c3a4..567ee3c 100644
--- a/src/components/CardSearch.tsx
+++ b/src/components/CardSearch.tsx
@@ -1,543 +1,543 @@
-import React, { useState } from 'react';
-import { searchCards } from '../services/api';
-import { Card } from '../types';
-import MagicCard from './MagicCard';
-
-const CardSearch = () => {
- const [cardName, setCardName] = useState('');
- const [text, setText] = useState('');
- const [rulesText, setRulesText] = useState('');
- const [typeLine, setTypeLine] = useState('');
- const [typeMatch, setTypeMatch] = useState('partial');
- const [typeInclude, setTypeInclude] = useState(true);
- const [colors, setColors] = useState({ W: false, U: false, B: false, R: false, G: false, C: false });
- const [colorMode, setColorMode] = useState('exactly');
- const [commanderColors, setCommanderColors] = useState({ W: false, U: false, B: false, R: false, G: false, C: false });
- const [manaCost, setManaCost] = useState({ W: 0, U: 0, B: 0, R: 0, G: 0, C: 0 });
- const [manaValue, setManaValue] = useState('');
- const [manaValueComparison, setManaValueComparison] = useState('=');
- const [games, setGames] = useState({ paper: false, arena: false, mtgo: false });
- const [format, setFormat] = useState('');
- const [formatStatus, setFormatStatus] = useState('');
- const [set, setSet] = useState('');
- const [block, setBlock] = useState('');
- const [rarity, setRarity] = useState({ common: false, uncommon: false, rare: false, mythic: false });
- const [criteria, setCriteria] = useState('');
- const [criteriaMatch, setCriteriaMatch] = useState('partial');
- const [criteriaInclude, setCriteriaInclude] = useState(true);
- const [price, setPrice] = useState('');
- const [currency, setCurrency] = useState('usd');
- const [priceComparison, setPriceComparison] = useState('=');
- const [artist, setArtist] = useState('');
- const [flavorText, setFlavorText] = useState('');
- const [loreFinder, setLoreFinder] = useState('');
- const [language, setLanguage] = useState('en');
- const [displayImages, setDisplayImages] = useState(false);
- const [order, setOrder] = useState('name');
- const [showAllPrints, setShowAllPrints] = useState(false);
- const [includeExtras, setIncludeExtras] = useState(false);
- const [searchResults, setSearchResults] = useState
+ {cards.map((card, index) => (
+
+ ))}
+
+
-
- );
-};
-
+import React, { useState } from 'react';
+import { searchCards } from '../services/api';
+import { Card } from '../types';
+import MagicCard from './MagicCard';
+
+const CardSearch = () => {
+ const [cardName, setCardName] = useState('');
+ const [text, setText] = useState('');
+ const [rulesText, setRulesText] = useState('');
+ const [typeLine, setTypeLine] = useState('');
+ const [typeMatch, setTypeMatch] = useState('partial');
+ const [typeInclude, setTypeInclude] = useState(true);
+ const [colors, setColors] = useState({ W: false, U: false, B: false, R: false, G: false, C: false });
+ const [colorMode, setColorMode] = useState('exactly');
+ const [commanderColors, setCommanderColors] = useState({ W: false, U: false, B: false, R: false, G: false, C: false });
+ const [manaCost, setManaCost] = useState({ W: 0, U: 0, B: 0, R: 0, G: 0, C: 0 });
+ const [manaValue, setManaValue] = useState('');
+ const [manaValueComparison, setManaValueComparison] = useState('=');
+ const [games, setGames] = useState({ paper: false, arena: false, mtgo: false });
+ const [format, setFormat] = useState('');
+ const [formatStatus, setFormatStatus] = useState('');
+ const [set, setSet] = useState('');
+ const [block, setBlock] = useState('');
+ const [rarity, setRarity] = useState({ common: false, uncommon: false, rare: false, mythic: false });
+ const [criteria, setCriteria] = useState('');
+ const [criteriaMatch, setCriteriaMatch] = useState('partial');
+ const [criteriaInclude, setCriteriaInclude] = useState(true);
+ const [price, setPrice] = useState('');
+ const [currency, setCurrency] = useState('usd');
+ const [priceComparison, setPriceComparison] = useState('=');
+ const [artist, setArtist] = useState('');
+ const [flavorText, setFlavorText] = useState('');
+ const [loreFinder, setLoreFinder] = useState('');
+ const [language, setLanguage] = useState('en');
+ const [displayImages, setDisplayImages] = useState(false);
+ const [order, setOrder] = useState('name');
+ const [showAllPrints, setShowAllPrints] = useState(false);
+ const [includeExtras, setIncludeExtras] = useState(false);
+ const [searchResults, setSearchResults] = useState
-
- Card Search
- - - {loading && ( -
-
-
- )}
-
- {error && (
-
- {error}
-
- )}
-
- {searchResults && searchResults.length > 0 && (
-
- {searchResults.map((card) => (
-
- )}
-
-
- ))}
-
-
- {card.name}
-{card.type_line}
-
+
+ );
+};
+
export default CardSearch;
diff --git a/src/components/Collection.tsx b/src/components/Collection.tsx
index 45f59da..4d24083 100644
--- a/src/components/Collection.tsx
+++ b/src/components/Collection.tsx
@@ -1,121 +1,121 @@
-import React, { useState } from 'react';
-import { Search, Plus } from 'lucide-react';
-import { Card } from '../types';
-import { searchCards } from '../services/api';
-
-export default function Collection() {
- const [searchQuery, setSearchQuery] = useState('');
- const [searchResults, setSearchResults] = useState
+
+ Card Search
+ + + {loading && ( +
+
+
+ )}
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {searchResults && searchResults.length > 0 && (
+
+ {searchResults.map((card) => (
+
+ )}
+
+
+ ))}
+
+
+ {card.name}
+{card.type_line}
+
-
- );
+import React, { useState } from 'react';
+import { Search, Plus } from 'lucide-react';
+import { Card } from '../types';
+import { searchCards } from '../services/api';
+
+export default function Collection() {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [searchResults, setSearchResults] = useState
-
- My Collection
- - {/* Search */} - - - {/* Search Results */} - {searchResults.length > 0 && ( -
-
- )}
-
- {/* Collection */}
- Search Results
-
- {searchResults.map(card => (
-
-
- {card.image_uris?.normal && (
- 
- )}
-
- ))}
-
-
- {card.name}
- -
-
- My Cards
-
- {collection.map(({ card, quantity }) => (
-
-
- {card.image_uris?.normal && (
-
- )}
-
- ))}
-
-
-
-
- {card.name}
- - x{quantity} - -
+
+ );
}
diff --git a/src/components/DeckCard.tsx b/src/components/DeckCard.tsx
index 1f18c8a..8632fa8 100644
--- a/src/components/DeckCard.tsx
+++ b/src/components/DeckCard.tsx
@@ -1,77 +1,77 @@
-import React from 'react';
-import { AlertTriangle, Check, Edit } from 'lucide-react';
-import { Deck } from '../types';
-import { validateDeck } from '../utils/deckValidation';
-
-interface DeckCardProps {
- deck: Deck;
- onEdit?: (deckId: string) => void;
-}
-
-export default function DeckCard({ deck, onEdit }: DeckCardProps) {
-
- if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
- console.log("deck", deck.name);
- console.log("cardEntities", deck.cards);
- }
-
- const validation = validateDeck(deck);
- const commander = deck.format === 'commander' ? deck.cards.find(card =>
- card.is_commander
- )?.card : null;
-
- return (
-
+
+ My Collection
+ + {/* Search */} + + + {/* Search Results */} + {searchResults.length > 0 && ( +
+
+ )}
+
+ {/* Collection */}
+ Search Results
+
+ {searchResults.map(card => (
+
+
+ {card.image_uris?.normal && (
+
+ )}
+
+ ))}
+
+
+ {card.name}
+ +
+
+ My Cards
+
+ {collection.map(({ card, quantity }) => (
+
+
+ {card.image_uris?.normal && (
+
+ )}
+
+ ))}
+
+
+
+
+ {card.name}
+ + x{quantity} + + onEdit?.(deck.id)}
- >
-
- );
+import React from 'react';
+import { AlertTriangle, Check, Edit } from 'lucide-react';
+import { Deck } from '../types';
+import { validateDeck } from '../utils/deckValidation';
+
+interface DeckCardProps {
+ deck: Deck;
+ onEdit?: (deckId: string) => void;
+}
+
+export default function DeckCard({ deck, onEdit }: DeckCardProps) {
+
+ if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
+ console.log("deck", deck.name);
+ console.log("cardEntities", deck.cards);
+ }
+
+ const validation = validateDeck(deck);
+ const commander = deck.format === 'commander' ? deck.cards.find(card =>
+ card.is_commander
+ )?.card : null;
+
+ return (
+
- 
-
-
-
-
-
-
-
-
- {deck.name}
- {validation.isValid ? ( -
-
- ) : (
-
-
- )}
-
- {deck.format}
- {deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards
-
-
- {commander && (
-
- Commander: {commander.name}
-
- )}
-
-
- onEdit?.(deck.id)}
+ >
+
+ );
}
diff --git a/src/components/DeckEditor.tsx b/src/components/DeckEditor.tsx
index 69ec8da..b12ac8a 100644
--- a/src/components/DeckEditor.tsx
+++ b/src/components/DeckEditor.tsx
@@ -1,85 +1,85 @@
-import React, { useEffect, useState } from 'react';
-import { Card, Deck } from '../types';
-import DeckManager from './DeckManager';
-import { supabase } from '../lib/supabase';
-import { getCardsByIds } from '../services/api';
-
-interface DeckEditorProps {
- deckId: string;
- onClose?: () => void;
-}
-
-export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
- const [deck, setDeck] = useState
+
+
+
+
+
+
+
+
+
+ {deck.name}
+ {validation.isValid ? ( +
+
+ ) : (
+
+
+ )}
+
+ {deck.format}
+ {deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards
+
+
+ {commander && (
+
+ Commander: {commander.name}
+
+ )}
+
+
+
-
-
- );
- }
-
- if (!deck) {
- return (
-
-
- );
- }
-
- return
-
-
-
- Error
-Failed to load deck
-
+
+
+ );
+ }
+
+ if (!deck) {
+ return (
+
+
+ );
+ }
+
+ return
+
+
+
+ Error
+Failed to load deck
+
-
-
- );
- }
-
- return (
-
- {decks.map((deck) => (
-
- );
-};
-
+import React, { useEffect, useState } from 'react';
+import { getCardById, getCardsByIds } from '../services/api';
+import { Deck } from '../types';
+import { supabase } from "../lib/supabase";
+import DeckCard from "./DeckCard";
+
+interface DeckListProps {
+ onDeckEdit?: (deckId: string) => void;
+}
+
+const DeckList = ({ onDeckEdit }: DeckListProps) => {
+ const [decks, setDecks] = useState
+
+
+ );
+ }
+
+ return (
+
+ {decks.map((deck) => (
+
+ );
+};
+
export default DeckList;
diff --git a/src/components/DeckManager.tsx b/src/components/DeckManager.tsx
index cddc79d..ed837ac 100644
--- a/src/components/DeckManager.tsx
+++ b/src/components/DeckManager.tsx
@@ -1,604 +1,604 @@
-import React, { useState, useEffect } from 'react';
-import { Plus, Search, Save, Trash2, Upload, Loader2, CheckCircle, XCircle } from 'lucide-react';
-import { Card, Deck } from '../types';
-import { searchCards } from '../services/api';
-import { useAuth } from '../contexts/AuthContext';
-import { supabase } from '../lib/supabase';
-import { validateDeck } from '../utils/deckValidation';
-import MagicCard from './MagicCard';
-
-interface DeckManagerProps {
- initialDeck?: Deck;
- onSave?: () => void;
-}
-
-const calculateManaCurve = (cards: { card; quantity: number }[]) => {
- const manaValues = cards.map(({ card }) => {
- if (!card.mana_cost) return 0;
- // Basic heuristic: count mana symbols
- return (card.mana_cost.match(/\{WUBRG0-9]\}/g) || []).length;
- });
-
- const averageManaValue = manaValues.reduce((a, b) => a + b, 0) / manaValues.length;
- return averageManaValue;
-};
-
-const suggestLandCountAndDistribution = (
- cards: { card; quantity: number }[],
- format: string
-) => {
- const formatRules = {
- standard: { minCards: 60, targetLands: 24.5 },
- modern: { minCards: 60, targetLands: 24.5 },
- commander: { minCards: 100, targetLands: 36.5 },
- legacy: { minCards: 60, targetLands: 24.5 },
- vintage: { minCards: 60, targetLands: 24.5 },
- pauper: { minCards: 60, targetLands: 24.5 },
- };
-
- const { minCards, targetLands } =
- formatRules[format as keyof typeof formatRules] || formatRules.standard;
- const deckSize = cards.reduce((acc, { quantity }) => acc + quantity, 0);
- const nonLandCards = cards.reduce(
- (acc, { card, quantity }) =>
- card.type_line?.toLowerCase().includes('land') ? acc : acc + quantity,
- 0
- );
- const landsToAdd = Math.max(0, minCards - deckSize);
-
- const colorCounts = { W: 0, U: 0, B: 0, R: 0, G: 0 };
- let totalColorSymbols = 0;
-
- cards.forEach(({ card, quantity }) => {
- if (card.mana_cost) {
- const wMatches = (card.mana_cost.match(/\{W\}/g) || []).length;
- const uMatches = (card.mana_cost.match(/\{U\}/g) || []).length;
- const bMatches = (card.mana_cost.match(/\{B\}/g) || []).length;
- const rMatches = (card.mana_cost.match(/\{R\}/g) || []).length;
- const gMatches = (card.mana_cost.match(/\{G\}/g) || []).length;
-
- colorCounts.W += wMatches * quantity;
- colorCounts.U += uMatches * quantity;
- colorCounts.B += bMatches * quantity;
- colorCounts.R += rMatches * quantity;
- colorCounts.G += gMatches * quantity;
-
- totalColorSymbols +=
- (wMatches + uMatches + bMatches + rMatches + gMatches) * quantity;
- }
- });
-
- const landDistribution: { [key: string]: number } = {};
- for (const color in colorCounts) {
- const proportion =
- totalColorSymbols > 0
- ? colorCounts[color as keyof typeof colorCounts] / totalColorSymbols
- : 0;
- landDistribution[color] = Math.round(landsToAdd * proportion);
- }
-
- let totalDistributed = Object.values(landDistribution).reduce(
- (acc, count) => acc + count,
- 0
- );
-
- if (totalDistributed > landsToAdd) {
- // Find the color with the most lands
- let maxColor = '';
- let maxCount = 0;
- for (const color in landDistribution) {
- if (landDistribution[color] > maxCount) {
- maxColor = color;
- maxCount = landDistribution[color];
- }
- }
-
- // Reduce the land count of that color
- landDistribution[maxColor] = maxCount - 1;
- }
-
- return { landCount: landsToAdd, landDistribution };
-};
-
-export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
- const [searchQuery, setSearchQuery] = useState('');
- const [searchResults, setSearchResults] = useState
-
- );
+import React, { useState, useEffect } from 'react';
+import { Plus, Search, Save, Trash2, Upload, Loader2, CheckCircle, XCircle } from 'lucide-react';
+import { Card, Deck } from '../types';
+import { searchCards } from '../services/api';
+import { useAuth } from '../contexts/AuthContext';
+import { supabase } from '../lib/supabase';
+import { validateDeck } from '../utils/deckValidation';
+import MagicCard from './MagicCard';
+
+interface DeckManagerProps {
+ initialDeck?: Deck;
+ onSave?: () => void;
+}
+
+const calculateManaCurve = (cards: { card; quantity: number }[]) => {
+ const manaValues = cards.map(({ card }) => {
+ if (!card.mana_cost) return 0;
+ // Basic heuristic: count mana symbols
+ return (card.mana_cost.match(/\{WUBRG0-9]\}/g) || []).length;
+ });
+
+ const averageManaValue = manaValues.reduce((a, b) => a + b, 0) / manaValues.length;
+ return averageManaValue;
+};
+
+const suggestLandCountAndDistribution = (
+ cards: { card; quantity: number }[],
+ format: string
+) => {
+ const formatRules = {
+ standard: { minCards: 60, targetLands: 24.5 },
+ modern: { minCards: 60, targetLands: 24.5 },
+ commander: { minCards: 100, targetLands: 36.5 },
+ legacy: { minCards: 60, targetLands: 24.5 },
+ vintage: { minCards: 60, targetLands: 24.5 },
+ pauper: { minCards: 60, targetLands: 24.5 },
+ };
+
+ const { minCards, targetLands } =
+ formatRules[format as keyof typeof formatRules] || formatRules.standard;
+ const deckSize = cards.reduce((acc, { quantity }) => acc + quantity, 0);
+ const nonLandCards = cards.reduce(
+ (acc, { card, quantity }) =>
+ card.type_line?.toLowerCase().includes('land') ? acc : acc + quantity,
+ 0
+ );
+ const landsToAdd = Math.max(0, minCards - deckSize);
+
+ const colorCounts = { W: 0, U: 0, B: 0, R: 0, G: 0 };
+ let totalColorSymbols = 0;
+
+ cards.forEach(({ card, quantity }) => {
+ if (card.mana_cost) {
+ const wMatches = (card.mana_cost.match(/\{W\}/g) || []).length;
+ const uMatches = (card.mana_cost.match(/\{U\}/g) || []).length;
+ const bMatches = (card.mana_cost.match(/\{B\}/g) || []).length;
+ const rMatches = (card.mana_cost.match(/\{R\}/g) || []).length;
+ const gMatches = (card.mana_cost.match(/\{G\}/g) || []).length;
+
+ colorCounts.W += wMatches * quantity;
+ colorCounts.U += uMatches * quantity;
+ colorCounts.B += bMatches * quantity;
+ colorCounts.R += rMatches * quantity;
+ colorCounts.G += gMatches * quantity;
+
+ totalColorSymbols +=
+ (wMatches + uMatches + bMatches + rMatches + gMatches) * quantity;
+ }
+ });
+
+ const landDistribution: { [key: string]: number } = {};
+ for (const color in colorCounts) {
+ const proportion =
+ totalColorSymbols > 0
+ ? colorCounts[color as keyof typeof colorCounts] / totalColorSymbols
+ : 0;
+ landDistribution[color] = Math.round(landsToAdd * proportion);
+ }
+
+ let totalDistributed = Object.values(landDistribution).reduce(
+ (acc, count) => acc + count,
+ 0
+ );
+
+ if (totalDistributed > landsToAdd) {
+ // Find the color with the most lands
+ let maxColor = '';
+ let maxCount = 0;
+ for (const color in landDistribution) {
+ if (landDistribution[color] > maxCount) {
+ maxColor = color;
+ maxCount = landDistribution[color];
+ }
+ }
+
+ // Reduce the land count of that color
+ landDistribution[maxColor] = maxCount - 1;
+ }
+
+ return { landCount: landsToAdd, landDistribution };
+};
+
+export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [searchResults, setSearchResults] = useState
-
- {snackbar && (
-
- {/* Card Search Section */}
-
-
-
-
-
-
- {/* Deck Builder Section */}
-
- {searchResults.map(card => (
-
-
-
- ))}
-
-
- {card.name}
- -
-
-
- setDeckName(e.target.value)}
- className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
- placeholder="Deck Name"
- />
-
-
-
- {deckFormat === 'commander' && (
-
- )}
-
-
-
-
- {isImporting && (
-
-
- {!validation.isValid && (
-
-
- )}
-
-
- )}
-
- -
- {validation.errors.map((error, index) => (
-
- {error} - ))} -
-
-
- - Cards ({selectedCards.reduce((acc, curr) => acc + curr.quantity, 0)}) -
- {selectedCards.map(({ card, quantity }) => ( -
- 
-
- ))}
-
-
-
- updateCardQuantity(card.id, parseInt(e.target.value))
- }
- min="1"
- className="w-16 px-2 py-1 bg-gray-600 border border-gray-500 rounded text-center"
- />
-
- {card.name}
- {card.prices?.usd && ( -${card.prices.usd}
- )}
-
- Total Price: ${totalPrice.toFixed(2)}
-
-
- {deckSize > 0 && (
-
- Suggested Land Count: {suggestedLandCountValue}
- {Object.entries(suggestedLands).map(([landType, count]) => (
-
- )}
-
- {deckSize > 0 && (
-
- )}
-
-
-
- {landType}: {count}
-
- ))}
-
-
- )}
-
-
-
- {snackbar.type === 'success' ? (
-
-
-
+
+ );
}
diff --git a/src/components/LifeCounter.tsx b/src/components/LifeCounter.tsx
index a43f833..08a8f94 100644
--- a/src/components/LifeCounter.tsx
+++ b/src/components/LifeCounter.tsx
@@ -1,167 +1,167 @@
-import React, { useState, useEffect } from 'react';
- import { Plus, Minus } from 'lucide-react';
-
- interface Player {
- id: number;
- name: string;
- life: number;
- color: string;
- }
-
- const COLORS = ['white', 'blue', 'black', 'red', 'green'];
-
- export default function LifeCounter() {
- const [numPlayers, setNumPlayers] = useState
+
+ {snackbar && (
+
+ {/* Card Search Section */}
+
+
+
+
+
+
+ {/* Deck Builder Section */}
+
+ {searchResults.map(card => (
+
+
+
+ ))}
+
+
+ {card.name}
+ +
+
+
+ setDeckName(e.target.value)}
+ className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
+ placeholder="Deck Name"
+ />
+
+
+
+ {deckFormat === 'commander' && (
+
+ )}
+
+
+
+
+ {isImporting && (
+
+
+ {!validation.isValid && (
+
+
+ )}
+
+
+ )}
+
+ -
+ {validation.errors.map((error, index) => (
+
- {error} + ))} +
+
+
+ + Cards ({selectedCards.reduce((acc, curr) => acc + curr.quantity, 0)}) +
+ {selectedCards.map(({ card, quantity }) => ( +
+
+
+ ))}
+
+
+
+ updateCardQuantity(card.id, parseInt(e.target.value))
+ }
+ min="1"
+ className="w-16 px-2 py-1 bg-gray-600 border border-gray-500 rounded text-center"
+ />
+
+ {card.name}
+ {card.prices?.usd && ( +${card.prices.usd}
+ )}
+
+ Total Price: ${totalPrice.toFixed(2)}
+
+
+ {deckSize > 0 && (
+
+ Suggested Land Count: {suggestedLandCountValue}
+ {Object.entries(suggestedLands).map(([landType, count]) => (
+
+ )}
+
+ {deckSize > 0 && (
+
+ )}
+
+
+
+ {landType}: {count}
+
+ ))}
+
+
+ )}
+
+
+
+ {snackbar.type === 'success' ? (
+
+
+
-
- );
-
- const renderLifeCounters = () => (
- Setup Players
- -
-
- );
-
- return (
-
- {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 (
-
-
-
- );
- })}
-
-
- {player.name}
-{player.life}
-
-
-
-
-
-
- );
+import React, { useState, useEffect } from 'react';
+ import { Plus, Minus } from 'lucide-react';
+
+ interface Player {
+ id: number;
+ name: string;
+ life: number;
+ color: string;
+ }
+
+ const COLORS = ['white', 'blue', 'black', 'red', 'green'];
+
+ export default function LifeCounter() {
+ const [numPlayers, setNumPlayers] = useState
-
- Life Counter
- {!setupComplete ? renderSetupForm() : renderLifeCounters()} -
+
+ );
+
+ const renderLifeCounters = () => (
+ Setup Players
+ +
+
+ );
+
+ return (
+
+ {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 (
+
+
+
+ );
+ })}
+
+
+ {player.name}
+{player.life}
+
+
+
+
+
+
+ );
}
diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx
index 19b5777..fac6c86 100644
--- a/src/components/LoginForm.tsx
+++ b/src/components/LoginForm.tsx
@@ -1,147 +1,147 @@
-import { useState, useEffect } from 'react';
- import { Mail, Lock, LogIn } from 'lucide-react';
- import { useAuth } from '../contexts/AuthContext';
- import { Card } from '../types';
- import { getRandomCards } from '../services/api';
-
- export default function LoginForm() {
- const [email, setEmail] = useState('');
- const [password, setPassword] = useState('');
- const [isSignUp, setIsSignUp] = useState(false);
- const [error, setError] = useState
+
+ Life Counter
+ {!setupComplete ? renderSetupForm() : renderLifeCounters()} +
- {/* Animated Background */}
-
- );
+import { useState, useEffect } from 'react';
+ import { Mail, Lock, LogIn } from 'lucide-react';
+ import { useAuth } from '../contexts/AuthContext';
+ import { Card } from '../types';
+ import { getRandomCards } from '../services/api';
+
+ export default function LoginForm() {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [isSignUp, setIsSignUp] = useState(false);
+ const [error, setError] = useState
-
-
- {/* Login Form */}
-
- {[...cards, ...cards].map((card, index) => (
-
-
-
-
- ))}
-
-
- - Deckerr -
- - {error && ( -
- {error}
-
- )}
-
-
-
-
-
-
-
+ {/* Animated Background */}
+
+ );
}
diff --git a/src/components/MagicCard.tsx b/src/components/MagicCard.tsx
index ea7bd1c..426cefe 100644
--- a/src/components/MagicCard.tsx
+++ b/src/components/MagicCard.tsx
@@ -1,31 +1,31 @@
-import React from 'react';
-import { Card } from '../types';
-
-interface MagicCardProps {
- card: Card;
-}
-
-const MagicCard = ({ card }: MagicCardProps) => {
- return (
-
+
+
+ {/* Login Form */}
+
+ {[...cards, ...cards].map((card, index) => (
+
+
+
+
+ ))}
+
+
+ + Deckerr +
+ + {error && ( +
+ {error}
+
+ )}
+
+
+
+
+
+
+
- {card.image_uris?.normal ? (
-
- ) : (
-
- );
-};
-
+import React from 'react';
+import { Card } from '../types';
+
+interface MagicCardProps {
+ card: Card;
+}
+
+const MagicCard = ({ card }: MagicCardProps) => {
+ return (
+
- No Image Available
-
- )}
- {card.prices?.usd && (
-
- ${card.prices.usd}
-
- )}
-
+ {card.image_uris?.normal ? (
+
+ ) : (
+
+ );
+};
+
export default MagicCard;
diff --git a/src/components/ManaIcons.tsx b/src/components/ManaIcons.tsx
index 58311e7..7cc75ba 100644
--- a/src/components/ManaIcons.tsx
+++ b/src/components/ManaIcons.tsx
@@ -1,107 +1,107 @@
-import React from 'react';
-
- export const ManaWhite = ({ size = 20, ...props }: { size?: number }) => (
-
- );
-
- export const ManaBlue = ({ size = 20, ...props }: { size?: number }) => (
-
- );
-
- export const ManaBlack = ({ size = 20, ...props }: { size?: number }) => (
-
- );
-
- export const ManaRed = ({ size = 20, ...props }: { size?: number }) => (
-
- );
-
- export const ManaGreen = ({ size = 20, ...props }: { size?: number }) => (
-
- );
-
- export const ManaColorless = ({ size = 20, ...props }: { size?: number }) => (
-
+import React from 'react';
+
+ export const ManaWhite = ({ size = 20, ...props }: { size?: number }) => (
+
+ );
+
+ export const ManaBlue = ({ size = 20, ...props }: { size?: number }) => (
+
+ );
+
+ export const ManaBlack = ({ size = 20, ...props }: { size?: number }) => (
+
+ );
+
+ export const ManaRed = ({ size = 20, ...props }: { size?: number }) => (
+
+ );
+
+ export const ManaGreen = ({ size = 20, ...props }: { size?: number }) => (
+
+ );
+
+ export const ManaColorless = ({ size = 20, ...props }: { size?: number }) => (
+
);
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 3e53bca..a6a215c 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,199 +1,199 @@
-import React, { useState, useRef, useEffect } from 'react';
- import { Home, PlusSquare, Library, LogOut, Settings, ChevronDown, Search, Heart, Menu } from 'lucide-react';
- import { useAuth } from '../contexts/AuthContext';
- import { supabase } from '../lib/supabase';
-
- type Page = 'home' | 'deck' | 'login' | 'collection' | 'profile' | 'search' | 'life-counter';
-
- interface NavigationProps {
- currentPage: Page;
- setCurrentPage: (page: Page) => void;
- }
-
- export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) {
- const { user, signOut } = useAuth();
- const [showDropdown, setShowDropdown] = useState(false);
- const [showMobileMenu, setShowMobileMenu] = useState(false);
- const dropdownRef = useRef
+ No Image Available
+
+ )}
+ {card.prices?.usd && (
+
+ ${card.prices.usd}
+
+ )}
+
-
-
- );
- }
-
- return (
-
-
- );
+import React, { useState, useEffect } from 'react';
+import { Save } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { supabase } from '../lib/supabase';
+
+const THEME_COLORS = ['red', 'green', 'blue', 'yellow', 'grey', 'purple'];
+
+export default function Profile() {
+ const { user } = useAuth();
+ const [username, setUsername] = useState('');
+ const [themeColor, setThemeColor] = useState('blue');
+ const [loading, setLoading] = useState(true);
+ const [saving, setSaving] = useState(false);
+
+ useEffect(() => {
+ const loadProfile = async () => {
+ if (user) {
+ const { data, error } = await supabase
+ .from('profiles')
+ .select('username, theme_color')
+ .eq('id', user.id)
+ .single();
+
+ if (data) {
+ setUsername(data.username || '');
+ setThemeColor(data.theme_color || 'blue');
+ }
+ setLoading(false);
+ }
+ };
+
+ loadProfile();
+ }, [user]);
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!user) return;
+
+ setSaving(true);
+ try {
+ const { error } = await supabase
+ .from('profiles')
+ .upsert({
+ id: user.id,
+ username,
+ theme_color: themeColor,
+ updated_at: new Date()
+ });
+
+ if (error) throw error;
+ alert('Profile updated successfully!');
+ } catch (error) {
+ console.error('Error updating profile:', error);
+ alert('Failed to update profile');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ if (loading) {
+ return (
+
-
- Profile Settings
- - -
+
+
+ );
+ }
+
+ return (
+
+
+ );
}
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
index b7629e5..c71eb95 100644
--- a/src/contexts/AuthContext.tsx
+++ b/src/contexts/AuthContext.tsx
@@ -1,107 +1,107 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import { User } from '@supabase/supabase-js';
-import { supabase } from '../lib/supabase';
-
-interface AuthContextType {
- user: User | null;
- loading: boolean;
- signIn: (email: string, password: string) => Promise
+
+