improve navbar
This commit is contained in:
Reynier Matthieu
@@ -7,9 +7,10 @@ import React, { useState } from 'react';
|
||||
import DeckEditor from './components/DeckEditor';
|
||||
import Profile from './components/Profile';
|
||||
import CardSearch from './components/CardSearch';
|
||||
import LifeCounter from './components/LifeCounter';
|
||||
import { AuthProvider, useAuth } from './contexts/AuthContext';
|
||||
|
||||
type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'profile' | 'search';
|
||||
type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'profile' | 'search' | 'life-counter';
|
||||
|
||||
function AppContent() {
|
||||
const [currentPage, setCurrentPage] = useState<Page>('home');
|
||||
@@ -62,6 +63,8 @@ import React, { useState } from 'react';
|
||||
return <Profile />;
|
||||
case 'search':
|
||||
return <CardSearch />;
|
||||
case 'life-counter':
|
||||
return <LifeCounter />;
|
||||
case 'login':
|
||||
return <LoginForm />;
|
||||
default:
|
||||
|
||||
167
src/components/LifeCounter.tsx
Normal file
167
src/components/LifeCounter.tsx
Normal file
@@ -0,0 +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<number | null>(null);
|
||||
const [playerNames, setPlayerNames] = useState<string[]>([]);
|
||||
const [players, setPlayers] = useState<Player[]>([]);
|
||||
const [setupComplete, setSetupComplete] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (numPlayers !== null) {
|
||||
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: player.life + change } : player
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSetupComplete(true);
|
||||
};
|
||||
|
||||
const renderSetupForm = () => (
|
||||
<div className="max-w-md mx-auto">
|
||||
<h2 className="text-2xl font-bold mb-6">Setup Players</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Number of Players
|
||||
</label>
|
||||
<select
|
||||
value={numPlayers || ''}
|
||||
onChange={handleNumPlayersChange}
|
||||
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"
|
||||
required
|
||||
>
|
||||
<option value="" disabled>Select Number of Players</option>
|
||||
{[2, 3, 4, 5, 6].map((num) => (
|
||||
<option key={num} value={num}>
|
||||
{num}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{numPlayers !== null &&
|
||||
Array.from({ length: numPlayers }, (_, i) => (
|
||||
<div key={i}>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Player {i + 1} Name
|
||||
</label>
|
||||
<input
|
||||
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
|
||||
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)`,
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Home, PlusSquare, Library, LogOut, Settings, ChevronDown, Search } from 'lucide-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';
|
||||
type Page = 'home' | 'deck' | 'login' | 'collection' | 'profile' | 'search' | 'life-counter';
|
||||
|
||||
interface NavigationProps {
|
||||
currentPage: Page;
|
||||
@@ -13,7 +13,9 @@ import React, { useState, useRef, useEffect } from 'react';
|
||||
export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) {
|
||||
const { user, signOut } = useAuth();
|
||||
const [showDropdown, setShowDropdown] = useState(false);
|
||||
const [showMobileMenu, setShowMobileMenu] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const mobileMenuRef = useRef<HTMLDivElement>(null);
|
||||
const [username, setUsername] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -39,6 +41,9 @@ import React, { useState, useRef, useEffect } from 'react';
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setShowDropdown(false);
|
||||
}
|
||||
if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) {
|
||||
setShowMobileMenu(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
@@ -50,6 +55,7 @@ import React, { useState, useRef, useEffect } from 'react';
|
||||
{ id: 'deck' as const, label: 'New Deck', icon: PlusSquare },
|
||||
{ id: 'collection' as const, label: 'Collection', icon: Library },
|
||||
{ id: 'search' as const, label: 'Search', icon: Search },
|
||||
{ id: 'life-counter' as const, label: 'Life Counter', icon: Heart },
|
||||
];
|
||||
|
||||
const handleSignOut = async () => {
|
||||
@@ -135,38 +141,55 @@ import React, { useState, useRef, useEffect } from 'react';
|
||||
|
||||
{/* Mobile Navigation - Bottom */}
|
||||
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50">
|
||||
<div className="grid grid-cols-5 h-16">
|
||||
<div className="flex justify-between items-center h-16 px-4">
|
||||
<span className="text-2xl font-bold text-orange-500">Deckerr</span>
|
||||
<div className="relative" ref={mobileMenuRef}>
|
||||
<button
|
||||
onClick={() => setShowMobileMenu(!showMobileMenu)}
|
||||
className="text-gray-300 hover:text-white"
|
||||
>
|
||||
<Menu size={24} />
|
||||
</button>
|
||||
{showMobileMenu && (
|
||||
<div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700">
|
||||
{navItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setCurrentPage(item.id)}
|
||||
className={`flex flex-col items-center justify-center space-y-1
|
||||
${currentPage === item.id
|
||||
? 'text-white bg-gray-900'
|
||||
: 'text-gray-300 hover:text-white hover:bg-gray-700'
|
||||
}`}
|
||||
onClick={() => {
|
||||
setCurrentPage(item.id);
|
||||
setShowMobileMenu(false);
|
||||
}}
|
||||
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
|
||||
>
|
||||
<item.icon size={20} />
|
||||
<span className="text-xs">{item.label}</span>
|
||||
<item.icon size={16} />
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
{user && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setShowDropdown(!showDropdown)}
|
||||
className="flex flex-col items-center justify-center space-y-1 text-gray-300 hover:text-white hover:bg-gray-700"
|
||||
onClick={() => {
|
||||
setCurrentPage('profile');
|
||||
setShowMobileMenu(false);
|
||||
}}
|
||||
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
|
||||
>
|
||||
<div className="relative">
|
||||
<img
|
||||
src={getAvatarUrl(user.id)}
|
||||
alt="User avatar"
|
||||
className="w-8 h-8 rounded-full bg-gray-700"
|
||||
/>
|
||||
<Settings size={14} className="absolute -bottom-1 -right-1 bg-gray-800 rounded-full p-0.5" />
|
||||
</div>
|
||||
<span className="text-xs">Profile</span>
|
||||
<Settings size={16} />
|
||||
<span>Profile Settings</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSignOut}
|
||||
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
|
||||
>
|
||||
<LogOut size={16} />
|
||||
<span>Sign Out</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Content Padding */}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App.tsx';
|
||||
import './index.css';
|
||||
import './utils/theme.ts';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
|
||||
@@ -28,5 +28,15 @@ export const themeColors = {
|
||||
primary: '#a855f7',
|
||||
secondary: '#7e22ce',
|
||||
hover: '#9333ea'
|
||||
},
|
||||
white: {
|
||||
primary: '#f8fafc',
|
||||
secondary: '#e2e8f0',
|
||||
hover: '#f1f5f9',
|
||||
},
|
||||
black: {
|
||||
primary: '#0f172a',
|
||||
secondary: '#1e293b',
|
||||
hover: '#1e293b',
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user