add project structure

PROJECT_STRUCTURE.md

@@ -0,0 +1,157 @@
+# Deckerr
+
+A modern Magic: The Gathering deck builder and collection manager built with React, TypeScript, and Supabase.
+
+## Overview
+
+Deckerr is a web application that allows Magic: The Gathering players to build and manage their decks, track their card collections, search for cards, and use a life counter during games. The application provides a clean, animated interface with user authentication and persistent storage.
+
+## Features
+
+- **Deck Management**: Create, edit, and organize your Magic: The Gathering decks
+- **Collection Tracking**: Keep track of your card collection with quantity management
+- **Card Search**: Search and browse Magic cards to add to your decks or collection
+- **Life Counter**: Track player life totals during games
+- **User Profiles**: Personalized user profiles with theme customization
+- **Authentication**: Secure user authentication powered by Supabase
+- **Format Support**: Support for different Magic formats (Commander, Standard, etc.)
+
+## Technology Stack
+
+- **Frontend**: React 18 with TypeScript
+- **Build Tool**: Vite
+- **Styling**: Tailwind CSS with custom animations
+- **Backend/Database**: Supabase (PostgreSQL)
+- **Authentication**: Supabase Auth
+- **Icons**: Lucide React
+- **Linting**: ESLint with TypeScript support
+
+## Project Structure
+
+```
+deckerr/
+├── src/
+│   ├── components/          # React components
+│   │   ├── CardCarousel.tsx    # Card carousel display
+│   │   ├── CardSearch.tsx      # Card search interface
+│   │   ├── Collection.tsx      # Collection management
+│   │   ├── DeckBuilder.tsx     # Deck building interface
+│   │   ├── DeckCard.tsx        # Deck card component
+│   │   ├── DeckEditor.tsx      # Deck editing interface
+│   │   ├── DeckList.tsx        # List of user decks
+│   │   ├── DeckManager.tsx     # Deck management
+│   │   ├── LifeCounter.tsx     # Game life counter
+│   │   ├── LoginForm.tsx       # User authentication form
+│   │   ├── MagicCard.tsx       # Magic card display component
+│   │   ├── ManaIcons.tsx       # Mana symbol icons
+│   │   ├── Navigation.tsx      # App navigation
+│   │   └── Profile.tsx         # User profile page
+│   │
+│   ├── contexts/            # React contexts
+│   │   └── AuthContext.tsx     # Authentication context
+│   │
+│   ├── lib/                 # Library code
+│   │   ├── Entities.ts         # Supabase database types
+│   │   └── supabase.ts         # Supabase client configuration
+│   │
+│   ├── services/            # API and service layers
+│   │   └── api.ts              # API service functions
+│   │
+│   ├── types/               # TypeScript type definitions
+│   │   └── index.ts            # Shared types
+│   │
+│   ├── utils/               # Utility functions
+│   │   ├── deckValidation.ts   # Deck validation logic
+│   │   └── theme.ts            # Theme utilities
+│   │
+│   ├── App.tsx              # Main application component
+│   ├── main.tsx             # Application entry point
+│   ├── main.js              # JavaScript entry
+│   ├── index.css            # Global styles
+│   └── vite-env.d.ts        # Vite type definitions
+│
+├── public/                  # Static assets (if any)
+│
+├── index.html               # HTML entry point
+├── package.json             # Project dependencies
+├── vite.config.ts           # Vite configuration
+├── tsconfig.json            # TypeScript configuration
+├── tsconfig.app.json        # App-specific TS config
+├── tsconfig.node.json       # Node-specific TS config
+├── tailwind.config.js       # Tailwind CSS configuration
+├── postcss.config.js        # PostCSS configuration
+├── eslint.config.js         # ESLint configuration
+├── LICENSE                  # Project license
+└── README.md                # This file
+```
+
+## Database Schema
+
+The application uses Supabase with the following main tables:
+
+- **profiles**: User profiles with username and theme preferences
+- **decks**: User decks with name, format, and timestamps
+- **deck_cards**: Cards in decks with quantity and commander status
+- **collections**: User card collections with quantities
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (v18 or higher)
+- npm or pnpm
+- Supabase account and project
+
+### Installation
+
+1. Clone the repository:
+   ```bash
+   git clone <repository-url>
+   cd deckerr
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   # or
+   pnpm install
+   ```
+
+3. Set up environment variables:
+   Create a `.env` file with your Supabase credentials:
+   ```
+   VITE_SUPABASE_URL=your_supabase_url
+   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
+   ```
+
+4. Run the development server:
+   ```bash
+   npm run dev
+   ```
+
+5. Open your browser to `http://localhost:5173`
+
+## Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run lint` - Run ESLint
+
+## Features in Detail
+
+### Deck Builder
+Build and customize your Magic decks with support for different formats. The deck editor validates your deck composition according to format rules.
+
+### Collection Manager
+Track which cards you own and their quantities, making it easy to see what cards you have available when building decks.
+
+### Card Search
+Search through Magic cards using various filters and criteria to find exactly what you need for your deck.
+
+### Life Counter
+A built-in life counter for tracking player life totals during games, with an animated interface.
+
+## License
+
+See the LICENSE file for details.

src/components/CardSearchModal.tsx

@@ -1,136 +0,0 @@
-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>
-  );
-}

src/components/LifeCounter.tsx

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

src/components/PlayerLifeCounter.tsx

@@ -1,85 +0,0 @@
-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>
-  );
-}