Skip to content

E
el3ab-Player
Commit 6a8bf93c authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

feat: complete UI/UX overhaul — Clash Royale / Brawl Stars style 

Vibrant, playful design system with thick 3px borders, bold/black
font weights, bouncy spring animations, and saturated colors.
Desktop-friendly with responsive container (480-560px max-width).

- New color palette: brighter gold, vibrant coral/cyan/purple
- Thick bordered cards, push-effect buttons, animated glow rings
- app-container system: centered content, generous gutters
- All 14 pages rewritten with the new design language
- No edge-to-edge elements anywhere
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent f574992e
Hide whitespace changes
Inline Side-by-side
Showing with 1366 additions and 1315 deletions
src/components/DailyRewardModal.tsx
View file @ 6a8bf93c
......@@ -23,7 +23,7 @@ export function DailyRewardModal({ open, streak, reward, loading, onClaim, onClo
onClick={onClose}
>
<motion.div
className="w-full max-w-[320px] rounded-3xl bg-surface-1 border border-border p-7 flex flex-col items-center gap-5 relative overflow-hidden"
className="w-full max-w-[340px] rounded-3xl bg-surface-1 border-3 border-border p-7 flex flex-col items-center gap-5 relative overflow-hidden"
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.8, opacity: 0 }}
......@@ -33,7 +33,7 @@ export function DailyRewardModal({ open, streak, reward, loading, onClaim, onClo
<div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-gold/8 to-transparent" />
<motion.div
className="w-20 h-20 rounded-full bg-gradient-to-br from-gold/20 to-gold/5 border-2 border-gold/40 flex items-center justify-center relative"
className="w-20 h-20 rounded-full bg-gradient-to-br from-gold/20 to-gold/5 border-3 border-gold/50 flex items-center justify-center relative"
animate={{ rotate: [0, 5, -5, 0] }}
transition={{ duration: 3, repeat: Infinity }}
>
......@@ -73,7 +73,7 @@ export function DailyRewardModal({ open, streak, reward, loading, onClaim, onClo
size="lg"
onClick={onClaim}
loading={loading}
className="w-full"
className="w-[80%] mx-auto"
>
استلم المكافأة
</Button>
......
src/components/layout/AppShell.tsx
View file @ 6a8bf93c
......@@ -10,9 +10,9 @@ export function AppShell() {
useNotifications()
return (
<div className="flex flex-col min-h-dvh bg-[#0a0a12]">
<div className="flex flex-col min-h-dvh bg-background">
<Header />
<main className="flex-1 pb-24 overflow-y-auto">
<main className="flex-1 pb-28 overflow-y-auto">
<Outlet />
</main>
<BottomNav />
......
src/components/layout/BottomNav.tsx
View file @ 6a8bf93c
......@@ -15,37 +15,48 @@ export function BottomNav() {
const navigate = useNavigate()
return (
<nav className="fixed bottom-0 left-0 right-0 z-50 px-5 pb-3 pt-1">
<div className="flex items-center justify-around px-3 py-3 bg-surface-2 border border-border rounded-[18px] shadow-2xl shadow-black/40">
{NAV_ITEMS.map((item) => {
const isActive = location.pathname === item.path
const Icon = item.icon
<nav className="fixed bottom-0 left-0 right-0 z-50 px-4 pb-3 pt-1 md:px-6">
<div className="app-container !p-0">
<div className="flex items-center justify-around px-2 py-2 bg-surface-2 border-3 border-border rounded-2xl shadow-2xl shadow-black/50">
{NAV_ITEMS.map((item) => {
const isActive = location.pathname === item.path
const Icon = item.icon
return (
<motion.button
key={item.path}
onClick={() => navigate(item.path)}
className="flex flex-col items-center gap-1 px-2 py-1 rounded-xl relative"
whileTap={{ scale: 0.85 }}
>
<Icon
size={20}
className={isActive ? 'text-gold' : 'text-text-muted'}
strokeWidth={isActive ? 2.5 : 1.8}
/>
<span className={`text-[9px] font-semibold ${isActive ? 'text-gold' : 'text-text-muted'}`}>
{item.label}
</span>
{isActive && (
return (
<motion.button
key={item.path}
onClick={() => navigate(item.path)}
className={`flex flex-col items-center gap-0.5 px-3 py-2 rounded-xl relative ${
isActive ? 'bg-gold/15' : ''
}`}
whileTap={{ scale: 0.8 }}
whileHover={{ scale: 1.05 }}
>
<motion.div
className="absolute -bottom-1 w-4 h-[3px] rounded-full bg-gold"
layoutId="nav-dot"
style={{ boxShadow: '0 0 6px rgba(212, 168, 67, 0.7)' }}
/>
)}
</motion.button>
)
})}
animate={isActive ? { y: -2 } : { y: 0 }}
transition={{ type: 'spring', stiffness: 500, damping: 20 }}
>
<Icon
size={22}
className={isActive ? 'text-gold' : 'text-text-muted'}
strokeWidth={isActive ? 2.8 : 2}
/>
</motion.div>
<span className={`text-[10px] font-bold ${isActive ? 'text-gold' : 'text-text-muted'}`}>
{item.label}
</span>
{isActive && (
<motion.div
className="absolute -bottom-0.5 w-6 h-[4px] rounded-full bg-gold"
layoutId="nav-indicator"
style={{ boxShadow: '0 0 10px rgba(255, 200, 60, 0.8)' }}
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
/>
)}
</motion.button>
)
})}
</div>
</div>
</nav>
)
......
src/components/layout/Header.tsx
View file @ 6a8bf93c
import { motion } from 'framer-motion'
import { Bell, Coins } from 'lucide-react'
import { Bell, Coins, Gem } from 'lucide-react'
import { useNotificationStore } from '../../stores/notificationStore'
import { useAuthStore } from '../../stores/authStore'
import { AnimatedIcon } from '../icons/AnimatedIcon'
import { GoldCrown } from '../icons/GoldCrown'
import { useNavigate } from 'react-router-dom'
......@@ -12,32 +11,55 @@ export function Header() {
const navigate = useNavigate()
return (
<header className="sticky top-0 z-50 px-5 pt-3 pb-1">
<div className="flex items-center justify-between px-5 py-3 bg-surface-2 border border-border rounded-[18px]">
<div className="flex items-center gap-2.5">
<GoldCrown size={24} animate={false} />
<span className="text-sm font-bold text-gold tracking-wide">EL3AB</span>
</div>
<header className="sticky top-0 z-50 px-4 pt-3 pb-1 md:px-6">
<div className="app-container !p-0">
<div className="flex items-center justify-between px-4 py-2.5 bg-surface-2 border-3 border-border rounded-2xl shadow-lg shadow-black/30">
<div className="flex items-center gap-2">
<GoldCrown size={28} animate={false} />
<span className="text-base font-black text-gold tracking-wider">EL3AB</span>
</div>
<div className="flex items-center gap-3">
{profile && (
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-3/80 border border-gold/20">
<Coins size={12} className="text-gold" />
<span className="text-[11px] font-bold text-gold">{profile.coins}</span>
</div>
)}
<div className="flex items-center gap-2">
{profile && (
<>
<motion.div
className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-gold/15 border-2 border-gold/40"
whileTap={{ scale: 0.9 }}
>
<Coins size={14} className="text-gold" />
<span className="text-xs font-black text-gold">{profile.coins}</span>
</motion.div>
<div className="relative" onClick={() => navigate('/notifications')}>
<AnimatedIcon icon={Bell} size={18} color="var(--color-text-secondary)" onClick={() => {}} />
{unreadCount > 0 && (
<motion.div
className="absolute -top-1 -right-1 w-3.5 h-3.5 rounded-full bg-coral flex items-center justify-center"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
>
<span className="text-[8px] font-bold text-white">{unreadCount > 9 ? '9+' : unreadCount}</span>
</motion.div>
{profile.gems > 0 && (
<motion.div
className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-purple/15 border-2 border-purple/40"
whileTap={{ scale: 0.9 }}
>
<Gem size={12} className="text-purple" />
<span className="text-xs font-black text-purple">{profile.gems}</span>
</motion.div>
)}
</>
)}
<motion.button
className="relative p-2.5 rounded-xl bg-surface-3 border-2 border-border"
onClick={() => navigate('/notifications')}
whileTap={{ scale: 0.85 }}
whileHover={{ scale: 1.05 }}
>
<Bell size={18} className="text-text-secondary" />
{unreadCount > 0 && (
<motion.div
className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-coral border-2 border-surface-2 flex items-center justify-center"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 500, damping: 15 }}
>
<span className="text-[9px] font-black text-white">{unreadCount > 9 ? '9+' : unreadCount}</span>
</motion.div>
)}
</motion.button>
</div>
</div>
</div>
......
src/components/layout/PageTransition.tsx
View file @ 6a8bf93c
......@@ -9,11 +9,11 @@ interface PageTransitionProps {
export function PageTransition({ children, className = '' }: PageTransitionProps) {
return (
<motion.div
className={`max-w-[360px] mx-auto w-full ${className}`}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 20 }}
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
className={`app-container py-6 flex flex-col gap-6 ${className}`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ type: 'spring', stiffness: 300, damping: 28 }}
>
{children}
</motion.div>
......
src/components/ui/Button.tsx
View file @ 6a8bf93c
......@@ -5,7 +5,7 @@ import { Loader2 } from 'lucide-react'
interface ButtonProps {
children: ReactNode
onClick?: () => void
variant?: 'gold' | 'ghost' | 'coral' | 'cyan'
variant?: 'gold' | 'ghost' | 'coral' | 'cyan' | 'purple'
size?: 'sm' | 'md' | 'lg'
disabled?: boolean
loading?: boolean
......@@ -14,16 +14,17 @@ interface ButtonProps {
}
const variants = {
gold: 'bg-gradient-to-l from-gold to-gold-light text-background font-bold shadow-lg shadow-gold/20',
ghost: 'bg-surface-2 border border-border text-text-primary font-semibold hover:border-gold/40 hover:bg-surface-3',
coral: 'bg-gradient-to-l from-coral to-coral/80 text-white font-bold shadow-md shadow-coral/15',
cyan: 'bg-gradient-to-l from-cyan to-cyan/80 text-background font-bold shadow-md shadow-cyan/15',
gold: 'bg-gradient-to-b from-gold-light to-gold text-background font-black shadow-lg shadow-gold/30 border-b-4 border-gold-muted',
ghost: 'bg-surface-2 border-2 border-border text-text-primary font-bold hover:border-gold/50 hover:bg-surface-3',
coral: 'bg-gradient-to-b from-[#FF7070] to-coral text-white font-black shadow-lg shadow-coral/25 border-b-4 border-[#B83A3A]',
cyan: 'bg-gradient-to-b from-[#33FFE5] to-cyan text-background font-black shadow-lg shadow-cyan/25 border-b-4 border-[#009E8E]',
purple: 'bg-gradient-to-b from-[#CC70FF] to-purple text-white font-black shadow-lg shadow-purple/25 border-b-4 border-[#6B3D8F]',
}
const sizes = {
sm: 'px-5 py-2.5 text-sm rounded-xl gap-2 min-w-[80px]',
md: 'px-7 py-3.5 text-base rounded-xl gap-2.5 min-w-[100px]',
lg: 'px-8 py-4.5 text-lg rounded-2xl gap-3 min-w-[120px]',
sm: 'px-5 py-2 text-sm rounded-xl gap-2 min-w-[90px]',
md: 'px-7 py-3 text-base rounded-2xl gap-2.5 min-w-[120px]',
lg: 'px-10 py-4 text-lg rounded-2xl gap-3 min-w-[160px]',
}
export function Button({
......@@ -41,9 +42,10 @@ export function Button({
type={type}
onClick={onClick}
disabled={disabled || loading}
className={`inline-flex items-center justify-center transition-all duration-200 ${variants[variant]} ${sizes[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
whileTap={!disabled ? { scale: 0.96 } : undefined}
transition={{ type: 'spring', stiffness: 500, damping: 20 }}
className={`inline-flex items-center justify-center transition-all uppercase tracking-wide ${variants[variant]} ${sizes[size]} ${disabled ? 'opacity-50 cursor-not-allowed saturate-50' : ''} ${className}`}
whileTap={!disabled ? { scale: 0.92, y: 2 } : undefined}
whileHover={!disabled ? { scale: 1.03 } : undefined}
transition={{ type: 'spring', stiffness: 600, damping: 20 }}
>
{loading && <Loader2 size={18} className="animate-spin" />}
{children}
......
src/components/ui/Card.tsx
View file @ 6a8bf93c
......@@ -6,16 +6,25 @@ interface CardProps {
className?: string
glow?: boolean
onClick?: () => void
variant?: 'default' | 'gold' | 'elevated'
}
export function Card({ children, className = '', glow = false, onClick }: CardProps) {
export function Card({ children, className = '', glow = false, onClick, variant = 'default' }: CardProps) {
const base = 'rounded-2xl p-5 border-3 transition-all'
const variantStyles = {
default: `bg-surface-1 border-border ${glow ? 'border-gold shadow-[0_0_20px_rgba(255,200,60,0.2)]' : ''}`,
gold: 'bg-gradient-to-br from-surface-2 to-surface-1 border-gold/60 shadow-[0_0_16px_rgba(255,200,60,0.15)]',
elevated: 'bg-surface-2 border-border shadow-xl shadow-black/40',
}
return (
<motion.div
className={`rounded-2xl bg-surface-1 border border-border p-5 ${glow ? 'border-gold/50 shadow-[0_0_20px_rgba(212,168,67,0.15)]' : ''} ${onClick ? 'cursor-pointer active:scale-[0.98]' : ''} ${className}`}
whileHover={onClick ? { y: -2, boxShadow: '0 8px 30px rgba(212,168,67,0.12)' } : undefined}
whileTap={onClick ? { scale: 0.98 } : undefined}
className={`${base} ${variantStyles[variant]} ${onClick ? 'cursor-pointer' : ''} ${className}`}
whileHover={onClick ? { y: -4, scale: 1.01, boxShadow: '0 12px 32px rgba(0,0,0,0.5)' } : undefined}
whileTap={onClick ? { scale: 0.97 } : undefined}
onClick={onClick}
transition={{ type: 'spring', stiffness: 400, damping: 25 }}
transition={{ type: 'spring', stiffness: 400, damping: 22 }}
>
{children}
</motion.div>
......
src/components/ui/Input.tsx
View file @ 6a8bf93c
......@@ -23,8 +23,8 @@ export function Input({
const [focused, setFocused] = useState(false)
return (
<div className="flex flex-col gap-1.5">
<label className="text-sm font-semibold text-text-secondary">{label}</label>
<div className="flex flex-col gap-2">
<label className="text-sm font-bold text-text-secondary">{label}</label>
<div className="relative">
<input
type={type}
......@@ -34,19 +34,21 @@ export function Input({
disabled={disabled}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
className="w-full px-4 py-3 rounded-xl bg-surface-3 text-text-primary placeholder:text-text-muted border-2 border-transparent outline-none transition-colors focus:border-gold/60 disabled:opacity-50"
className={`w-full px-4 py-3.5 rounded-xl bg-surface-3 text-text-primary placeholder:text-text-muted border-3 outline-none transition-all font-semibold ${
focused ? 'border-gold shadow-[0_0_12px_rgba(255,200,60,0.2)]' : 'border-border'
} ${error ? 'border-coral' : ''} disabled:opacity-50`}
dir="auto"
/>
<motion.div
className="absolute bottom-0 left-0 right-0 h-0.5 bg-gold rounded-full origin-center"
className="absolute bottom-0 left-2 right-2 h-[3px] bg-gold rounded-full"
initial={{ scaleX: 0 }}
animate={{ scaleX: focused ? 1 : 0 }}
transition={{ type: 'spring', stiffness: 400, damping: 30 }}
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
/>
</div>
{error && (
<motion.span
className="text-xs text-coral"
className="text-xs text-coral font-bold"
initial={{ opacity: 0, y: -4 }}
animate={{ opacity: 1, y: 0 }}
>
......
src/components/ui/ToastContainer.tsx
View file @ 6a8bf93c
......@@ -66,11 +66,11 @@ function ToastItem({
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: -30, scale: 0.9 }}
transition={{ type: 'spring', stiffness: 400, damping: 25 }}
className={`pointer-events-auto w-full rounded-xl border p-3.5 flex items-center gap-3 backdrop-blur-xl shadow-lg ${colorClass}`}
className={`pointer-events-auto w-full rounded-xl border-2 p-3.5 flex items-center gap-3 backdrop-blur-xl shadow-xl shadow-black/30 ${colorClass}`}
onClick={() => onDismiss(id)}
>
<Icon size={18} className="flex-shrink-0" />
<span className="text-sm font-medium text-text-primary">{title}</span>
<span className="text-sm font-bold text-text-primary">{title}</span>
</motion.div>
)
}
src/index.css
View file @ 6a8bf93c
@import "tailwindcss";
@theme {
--color-background: #06060E;
--color-surface-1: #141420;
--color-surface-2: #1C1C30;
--color-surface-3: #26263C;
--color-border: #32324E;
--color-border-gold: rgba(212, 168, 67, 0.25);
--color-gold: #D4A843;
--color-gold-light: #E8C55A;
--color-gold-muted: #B8964A;
--color-coral: #E06B4A;
--color-royal-blue: #5B7FD6;
--color-cyan: #4ECDC4;
--color-purple: #7B5EA7;
/* === BACKGROUNDS === */
--color-background: #0B0E1A;
--color-surface-1: #151929;
--color-surface-2: #1E2340;
--color-surface-3: #2A3055;
--color-border: #3D4570;
--color-border-gold: rgba(255, 200, 60, 0.35);
/* === BRAND (vibrant Brawl Stars palette) === */
--color-gold: #FFC83D;
--color-gold-light: #FFE066;
--color-gold-muted: #C9972E;
--color-coral: #FF5252;
--color-royal-blue: #4D8BFF;
--color-cyan: #00E5CC;
--color-purple: #B44DFF;
--color-electric-blue: #3B82F6;
--color-green: #4ADE80;
--color-orange: #FF8C42;
--color-text-primary: #F5F5F5;
--color-text-secondary: #A0A0B8;
--color-text-muted: #6B6B80;
/* === TEXT === */
--color-text-primary: #FFFFFF;
--color-text-secondary: #B8BDD6;
--color-text-muted: #6E748C;
--color-win: #4ECDC4;
--color-loss: #E06B4A;
--color-draw: #A0A0B8;
/* === SEMANTIC === */
--color-win: #00E5CC;
--color-loss: #FF5252;
--color-draw: #B8BDD6;
--font-family-cairo: 'Cairo', sans-serif;
}
......@@ -52,8 +58,9 @@ body {
flex-direction: column;
}
/* === SCROLLBAR === */
::-webkit-scrollbar {
width: 4px;
width: 6px;
}
::-webkit-scrollbar-track {
......@@ -62,9 +69,101 @@ body {
::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 2px;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-gold-muted);
}
/* === GAME CARD THICK BORDERS === */
.game-card {
border: 3px solid var(--color-border);
border-radius: 20px;
background: var(--color-surface-1);
transition: transform 0.15s, box-shadow 0.15s;
}
.game-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.game-card-gold {
border-color: var(--color-gold);
box-shadow: 0 0 20px rgba(255, 200, 60, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* === PLAYFUL BUTTON PUSH EFFECT === */
.btn-push {
position: relative;
border-bottom: 4px solid rgba(0, 0, 0, 0.3);
transition: all 0.1s;
}
.btn-push:active {
border-bottom-width: 1px;
transform: translateY(3px);
}
/* === GLOW ANIMATIONS === */
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 8px rgba(255, 200, 60, 0.3); }
50% { box-shadow: 0 0 24px rgba(255, 200, 60, 0.6); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.animate-pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
/* === RESPONSIVE CONTAINER === */
.app-container {
width: 100%;
max-width: 480px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 768px) {
.app-container {
max-width: 520px;
padding-left: 24px;
padding-right: 24px;
}
}
@media (min-width: 1024px) {
.app-container {
max-width: 560px;
padding-left: 32px;
padding-right: 32px;
}
}
/* === DESKTOP LAYOUT === */
@media (min-width: 1024px) {
.desktop-sidebar {
position: fixed;
top: 0;
right: 0;
width: 260px;
height: 100dvh;
border-left: 2px solid var(--color-border);
background: var(--color-surface-1);
z-index: 40;
}
.desktop-main {
margin-right: 260px;
}
}
src/lib/constants.ts
View file @ 6a8bf93c
......@@ -23,9 +23,9 @@ export const GAMES = [
] as const
export const RARITY_COLORS = {
common: '#6B6B80',
uncommon: '#5B7FD6',
rare: '#7B5EA7',
epic: '#E06B4A',
legendary: '#D4A843',
common: '#6E748C',
uncommon: '#4D8BFF',
rare: '#B44DFF',
epic: '#FF5252',
legendary: '#FFC83D',
} as const
src/pages/BotSelectPage.tsx
View file @ 6a8bf93c
......@@ -8,13 +8,13 @@ import { fetchBots, getBotPortraitUrl, type Bot } from '../lib/stockfish'
import { ChevronRight, Swords } from 'lucide-react'
const DIFFICULTY_COLORS: Record<string, string> = {
beginner: '#4ECDC4',
defensive: '#5B7FD6',
aggressive: '#E06B4A',
positional: '#7B5EA7',
creative: '#D4A843',
solid: '#6B6B80',
near_perfect: '#FFD700',
beginner: '#00E5CC',
defensive: '#4D8BFF',
aggressive: '#FF5252',
positional: '#B44DFF',
creative: '#FFC83D',
solid: '#6E748C',
near_perfect: '#FFE066',
}
const TOTAL_STRENGTH_DOTS = 7
......@@ -39,55 +39,50 @@ export function BotSelectPage() {
if (loading) {
return (
<PageTransition className="px-6 py-8 flex flex-col items-center justify-center min-h-[60vh]">
<div className="w-10 h-10 border-2 border-gold/30 border-t-gold rounded-full animate-spin" />
<p className="mt-4 text-sm text-text-muted">جاري تحميل الروبوتات...</p>
<PageTransition className="flex flex-col items-center justify-center min-h-[60vh]">
<div className="w-12 h-12 border-3 border-gold/30 border-t-gold rounded-full animate-spin" />
<p className="mt-4 text-sm text-text-muted font-bold">جاري تحميل الروبوتات...</p>
</PageTransition>
)
}
return (
<PageTransition className="px-7 py-7 flex flex-col gap-6 pb-36">
{/* Header */}
<PageTransition className="pb-36">
<div className="flex items-center gap-4">
<motion.button
onClick={() => navigate(-1)}
className="w-10 h-10 rounded-full bg-surface-2 border border-border flex items-center justify-center"
whileTap={{ scale: 0.9 }}
className="w-11 h-11 rounded-xl bg-surface-2 border-2 border-border flex items-center justify-center"
whileTap={{ scale: 0.85 }}
>
<ChevronRight size={20} className="text-text-secondary" />
</motion.button>
<div>
<h1 className="text-xl font-bold">العب ضد الروبوت</h1>
<p className="text-xs text-text-muted mt-1">اختر خصمك حسب مستواك</p>
<h1 className="text-xl font-black">العب ضد الروبوت</h1>
<p className="text-xs text-text-muted font-semibold mt-0.5">اختر خصمك حسب مستواك</p>
</div>
</div>
{/* Bot List */}
<div className="flex flex-col gap-3">
{bots.map((bot, i) => {
const isSelected = selectedBot === bot.id
const diffColor = DIFFICULTY_COLORS[bot.style] || '#6B6B80'
const diffColor = DIFFICULTY_COLORS[bot.style] || '#6E748C'
const strengthLevel = Math.min(i + 1, TOTAL_STRENGTH_DOTS)
return (
<motion.div
key={bot.id}
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.05, type: 'spring', stiffness: 400, damping: 25 }}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: i * 0.06, type: 'spring', stiffness: 400, damping: 22 }}
>
<Card
glow={isSelected}
onClick={() => setSelectedBot(bot.id)}
className={`flex items-center gap-4 transition-all ${
isSelected ? 'border-gold/60 scale-[1.01]' : ''
}`}
className={`flex items-center gap-4 ${isSelected ? '!border-gold' : ''}`}
>
{/* Portrait */}
<div
className="relative w-14 h-14 rounded-full overflow-hidden flex-shrink-0 border-2"
style={{ backgroundColor: `${diffColor}15`, borderColor: `${diffColor}40` }}
className="relative w-14 h-14 rounded-xl overflow-hidden flex-shrink-0 border-2"
style={{ backgroundColor: `${diffColor}15`, borderColor: `${diffColor}60` }}
>
<img
src={getBotPortraitUrl(bot.id)}
......@@ -96,45 +91,43 @@ export function BotSelectPage() {
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
/>
<div className="absolute inset-0 flex items-center justify-center" style={{ color: diffColor }}>
<span className="text-xl font-bold">{bot.name_ar?.charAt(0) || bot.name.charAt(0)}</span>
<span className="text-xl font-black">{bot.name_ar?.charAt(0) || bot.name.charAt(0)}</span>
</div>
</div>
{/* Info */}
<div className="flex-1 min-w-0 space-y-1.5">
<div className="flex items-center gap-2">
<h3 className="text-sm font-bold truncate">{bot.name_ar}</h3>
<h3 className="text-sm font-black truncate">{bot.name_ar}</h3>
<span
className="px-2 py-0.5 rounded-md text-[9px] font-bold"
style={{ backgroundColor: `${diffColor}20`, color: diffColor }}
className="px-2 py-0.5 rounded-lg text-[9px] font-black"
style={{ backgroundColor: `${diffColor}25`, color: diffColor }}
>
{bot.style_ar}
</span>
</div>
<p className="text-[11px] text-text-muted truncate leading-relaxed">{bot.bio_ar}</p>
<p className="text-[11px] text-text-muted truncate font-semibold">{bot.bio_ar}</p>
<div className="flex items-center gap-3">
<span className="text-[10px] text-text-muted">{bot.elo_min}-{bot.elo_max} تقييم</span>
<span className="text-[10px] text-text-muted font-bold">{bot.elo_min}-{bot.elo_max}</span>
<div className="flex items-center gap-[3px]">
{Array.from({ length: TOTAL_STRENGTH_DOTS }).map((_, dotIndex) => (
<div
key={dotIndex}
className="w-[5px] h-[5px] rounded-full"
style={{ backgroundColor: dotIndex < strengthLevel ? diffColor : `${diffColor}25` }}
className="w-[6px] h-[6px] rounded-full"
style={{ backgroundColor: dotIndex < strengthLevel ? diffColor : `${diffColor}20` }}
/>
))}
</div>
</div>
</div>
{/* Check */}
{isSelected && (
<motion.div
className="w-7 h-7 rounded-full bg-gold flex items-center justify-center flex-shrink-0"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 500, damping: 20 }}
className="w-8 h-8 rounded-full bg-gold flex items-center justify-center flex-shrink-0"
initial={{ scale: 0, rotate: -90 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: 'spring', stiffness: 500, damping: 15 }}
>
<Swords size={12} className="text-background" />
<Swords size={14} className="text-background" />
</motion.div>
)}
</Card>
......@@ -143,17 +136,18 @@ export function BotSelectPage() {
})}
</div>
{/* CTA */}
{selectedBot && (
<motion.div
className="fixed bottom-0 left-0 right-0 px-5 pt-4 pb-10 bg-gradient-to-t from-background via-background/95 to-transparent"
initial={{ opacity: 0, y: 20 }}
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', stiffness: 400, damping: 25 }}
transition={{ type: 'spring', stiffness: 400, damping: 22 }}
>
<Button onClick={startGame} className="w-full" size="lg">
ابدا المباراة
</Button>
<div className="app-container !p-0">
<Button onClick={startGame} className="w-[80%] mx-auto block" size="lg">
ابدا المباراة
</Button>
</div>
</motion.div>
)}
</PageTransition>
......
src/pages/FriendsPage.tsx
View file @ 6a8bf93c
import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { UserPlus, UserCheck, UserX, Search, X, Loader2 } from 'lucide-react'
import { UserPlus, UserCheck, UserX, Search, Loader2 } from 'lucide-react'
import { PageTransition } from '../components/layout/PageTransition'
import { Card } from '../components/ui/Card'
import { Button } from '../components/ui/Button'
......@@ -28,11 +28,20 @@ function relativeTime(date: string | null): string {
return `${days} ي`
}
const stagger = {
hidden: { opacity: 0 },
show: { opacity: 1, transition: { staggerChildren: 0.06 } },
}
const item = {
hidden: { opacity: 0, y: 12, scale: 0.95 },
show: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 400, damping: 22 } },
}
export function FriendsPage() {
const { user } = useAuthStore()
const { friends, pendingReceived, loading, sendRequest, acceptRequest, rejectRequest, removeFriend } = useFriends()
const [showSearch, setShowSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const [searchResults, setSearchResults] = useState<SearchResult[]>([])
const [searching, setSearching] = useState(false)
......@@ -64,195 +73,168 @@ export function FriendsPage() {
const onlineFriends = friends.filter((f) => f.profile.is_online)
const offlineFriends = friends.filter((f) => !f.profile.is_online)
const stagger = {
hidden: { opacity: 0 },
show: { opacity: 1, transition: { staggerChildren: 0.05 } },
}
const item = {
hidden: { opacity: 0, y: 10 },
show: { opacity: 1, y: 0 },
}
return (
<PageTransition className="px-7 py-7 flex flex-col gap-6">
<div className="flex items-center justify-between">
<h1 className="text-xl font-bold">الاصدقاء</h1>
<motion.button
className="p-2 rounded-lg bg-gold/10 border border-gold/20"
whileTap={{ scale: 0.9 }}
onClick={() => setShowSearch(!showSearch)}
>
{showSearch ? <X size={18} className="text-gold" /> : <UserPlus size={18} className="text-gold" />}
</motion.button>
</div>
<AnimatePresence>
{showSearch && (
<PageTransition>
<div className="flex flex-col gap-5 py-6">
<div className="flex items-center justify-between">
<h1 className="text-xl font-black">الأصدقاء</h1>
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
className="overflow-hidden"
className="p-2.5 rounded-xl bg-[#FFC83D]/10 border-3 border-[#FFC83D]/30"
whileTap={{ scale: 0.85 }}
>
<div className="relative mb-3">
<Search size={16} className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted" />
<input
type="text"
placeholder="بحث عن لاعب..."
value={searchQuery}
onChange={(e) => handleSearch(e.target.value)}
className="w-full pr-10 pl-4 py-2.5 rounded-xl bg-surface-2 border border-border text-sm placeholder:text-text-muted outline-none focus:border-gold/40"
dir="rtl"
autoFocus
/>
</div>
<UserPlus size={20} className="text-[#FFC83D]" />
</motion.div>
</div>
{searching && (
<div className="flex justify-center py-3">
<Loader2 size={20} className="animate-spin text-text-muted" />
</div>
)}
<div className="relative">
<Search size={16} className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted" />
<input
type="text"
placeholder="بحث عن لاعب..."
value={searchQuery}
onChange={(e) => handleSearch(e.target.value)}
className="w-full pr-10 pl-4 py-3 rounded-xl bg-surface-2 border-3 border-border text-sm font-bold placeholder:text-text-muted outline-none focus:border-[#FFC83D]/50 transition-colors"
dir="rtl"
/>
</div>
{searchResults.length > 0 && (
<motion.div className="flex flex-col gap-2 mb-4" variants={stagger} initial="hidden" animate="show">
{searchResults.map((result) => {
const alreadyFriend = friends.some((f) => f.profile.id === result.id)
const alreadySent = sentIds.has(result.id)
return (
<motion.div key={result.id} variants={item}>
<Card className="!p-3 flex items-center gap-3">
<div className="w-9 h-9 rounded-full bg-surface-3 border border-border flex items-center justify-center shrink-0">
<span className="text-sm font-bold text-gold">
{result.display_name?.[0] || result.username[0]}
</span>
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-semibold truncate">{result.display_name || result.username}</p>
<p className="text-xs text-text-muted">{result.elo_blitz}</p>
</div>
{alreadyFriend ? (
<UserCheck size={16} className="text-cyan shrink-0" />
) : alreadySent ? (
<span className="text-xs text-text-muted">تم الارسال</span>
) : (
<Button size="sm" variant="ghost" onClick={() => handleSendRequest(result.id)}>
اضافة
</Button>
)}
</Card>
</motion.div>
)
})}
</motion.div>
)}
</motion.div>
{searching && (
<div className="flex justify-center py-4">
<Loader2 size={22} className="animate-spin text-[#FFC83D]" />
</div>
)}
</AnimatePresence>
{loading ? (
<div className="flex-1 flex items-center justify-center">
<Loader2 size={24} className="animate-spin text-text-muted" />
</div>
) : (
<>
{pendingReceived.length > 0 && (
<div className="flex flex-col gap-2">
<h2 className="text-sm font-semibold text-text-muted">طلبات الصداقة</h2>
<motion.div className="flex flex-col gap-2" variants={stagger} initial="hidden" animate="show">
{pendingReceived.map((req) => (
<motion.div key={req.id} variants={item}>
<Card className="!p-3 flex items-center gap-3">
<div className="w-9 h-9 rounded-full bg-surface-3 border border-gold/30 flex items-center justify-center shrink-0">
<span className="text-sm font-bold text-gold">
<AnimatePresence>
{searchResults.length > 0 && (
<motion.div
className="flex flex-col gap-2"
variants={stagger}
initial="hidden"
animate="show"
exit={{ opacity: 0 }}
>
{searchResults.map((result) => {
const alreadyFriend = friends.some((f) => f.profile.id === result.id)
const alreadySent = sentIds.has(result.id)
return (
<motion.div key={result.id} variants={item}>
<Card className="!p-3.5 flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#FFC83D]/20 to-[#B44DFF]/10 border-3 border-border flex items-center justify-center shrink-0">
<span className="text-sm font-black text-[#FFC83D]">
{result.display_name?.[0] || result.username[0]}
</span>
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-black truncate">{result.display_name || result.username}</p>
<p className="text-xs text-text-muted font-bold">{result.elo_blitz}</p>
</div>
{alreadyFriend ? (
<UserCheck size={18} className="text-[#00E5CC] shrink-0" />
) : alreadySent ? (
<span className="text-xs font-bold text-text-muted">تم الارسال</span>
) : (
<Button size="sm" variant="gold" onClick={() => handleSendRequest(result.id)}>
اضافة
</Button>
)}
</Card>
</motion.div>
)
})}
</motion.div>
)}
</AnimatePresence>
{loading ? (
<div className="flex-1 flex items-center justify-center py-12">
<Loader2 size={28} className="animate-spin text-[#FFC83D]" />
</div>
) : (
<motion.div className="flex flex-col gap-5" variants={stagger} initial="hidden" animate="show">
{pendingReceived.length > 0 && (
<motion.div className="flex flex-col gap-2" variants={item}>
<h2 className="text-sm font-black text-[#FFC83D]">طلبات الصداقة ({pendingReceived.length})</h2>
<div className="flex flex-col gap-2">
{pendingReceived.map((req) => (
<Card key={req.id} className="!p-3.5 flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#FFC83D]/20 to-[#B44DFF]/10 border-3 border-[#FFC83D]/40 flex items-center justify-center shrink-0">
<span className="text-sm font-black text-[#FFC83D]">
{req.profile.display_name?.[0] || req.profile.username[0]}
</span>
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-semibold truncate">
<p className="text-sm font-black truncate">
{req.profile.display_name || req.profile.username}
</p>
<p className="text-xs text-text-muted">{req.profile.elo_blitz}</p>
<p className="text-xs text-text-muted font-bold">{req.profile.elo_blitz}</p>
</div>
<div className="flex gap-1.5">
<motion.button
className="p-1.5 rounded-lg bg-cyan/10 border border-cyan/20"
whileTap={{ scale: 0.85 }}
onClick={() => acceptRequest(req.id)}
>
<UserCheck size={14} className="text-cyan" />
</motion.button>
<motion.button
className="p-1.5 rounded-lg bg-coral/10 border border-coral/20"
whileTap={{ scale: 0.85 }}
onClick={() => rejectRequest(req.id)}
>
<UserX size={14} className="text-coral" />
</motion.button>
<div className="flex gap-2">
<Button size="sm" variant="cyan" onClick={() => acceptRequest(req.id)}>
قبول
</Button>
<Button size="sm" variant="coral" onClick={() => rejectRequest(req.id)}>
رفض
</Button>
</div>
</Card>
</motion.div>
))}
))}
</div>
</motion.div>
</div>
)}
)}
{onlineFriends.length > 0 && (
<div className="flex flex-col gap-2">
<h2 className="text-sm font-semibold text-cyan">
متصل ({onlineFriends.length})
</h2>
<motion.div className="flex flex-col gap-2" variants={stagger} initial="hidden" animate="show">
{onlineFriends.map((friend) => (
<motion.div key={friend.id} variants={item}>
<Card className="!p-3 flex items-center gap-3">
{onlineFriends.length > 0 && (
<motion.div className="flex flex-col gap-2" variants={item}>
<h2 className="text-sm font-black text-[#00E5CC]">
متصل ({onlineFriends.length})
</h2>
<div className="flex flex-col gap-2">
{onlineFriends.map((friend) => (
<Card key={friend.id} className="!p-3.5 flex items-center gap-3">
<div className="relative">
<div className="w-9 h-9 rounded-full bg-surface-3 border border-border flex items-center justify-center">
<span className="text-sm font-bold text-gold">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#00E5CC]/15 to-surface-3 border-3 border-border flex items-center justify-center">
<span className="text-sm font-black text-[#FFC83D]">
{friend.profile.display_name?.[0] || friend.profile.username[0]}
</span>
</div>
<div className="absolute -bottom-0.5 -left-0.5 w-3 h-3 rounded-full bg-cyan border-2 border-surface-1" />
<div className="absolute -bottom-0.5 -left-0.5 w-3.5 h-3.5 rounded-full bg-[#4ADE80] border-2 border-surface-1 animate-pulse" />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-semibold truncate">
<p className="text-sm font-black truncate">
{friend.profile.display_name || friend.profile.username}
</p>
<p className="text-xs text-text-muted">{friend.profile.elo_blitz}</p>
<p className="text-xs text-text-muted font-bold">{friend.profile.elo_blitz}</p>
</div>
<motion.button
className="p-1.5 rounded-lg bg-coral/10 border border-coral/20 opacity-0 group-hover:opacity-100"
whileTap={{ scale: 0.85 }}
className="p-2 rounded-xl bg-[#FF5252]/10 border-2 border-[#FF5252]/20"
whileTap={{ scale: 0.8 }}
onClick={() => removeFriend(friend.id)}
>
<UserX size={14} className="text-coral" />
<UserX size={14} className="text-[#FF5252]" />
</motion.button>
</Card>
</motion.div>
))}
))}
</div>
</motion.div>
</div>
)}
)}
{offlineFriends.length > 0 && (
<div className="flex flex-col gap-2">
<h2 className="text-sm font-semibold text-text-muted">
غير متصل ({offlineFriends.length})
</h2>
<motion.div className="flex flex-col gap-2" variants={stagger} initial="hidden" animate="show">
{offlineFriends.map((friend) => (
<motion.div key={friend.id} variants={item}>
<Card className="!p-3 flex items-center gap-3">
{offlineFriends.length > 0 && (
<motion.div className="flex flex-col gap-2" variants={item}>
<h2 className="text-sm font-black text-text-muted">
غير متصل ({offlineFriends.length})
</h2>
<div className="flex flex-col gap-2">
{offlineFriends.map((friend) => (
<Card key={friend.id} className="!p-3.5 flex items-center gap-3 opacity-70">
<div className="relative">
<div className="w-9 h-9 rounded-full bg-surface-3 border border-border flex items-center justify-center opacity-60">
<span className="text-sm font-bold text-text-muted">
<div className="w-10 h-10 rounded-full bg-surface-3 border-3 border-border flex items-center justify-center">
<span className="text-sm font-black text-text-muted">
{friend.profile.display_name?.[0] || friend.profile.username[0]}
</span>
</div>
<div className="absolute -bottom-0.5 -left-0.5 w-3 h-3 rounded-full bg-text-muted/50 border-2 border-surface-1" />
<div className="absolute -bottom-0.5 -left-0.5 w-3.5 h-3.5 rounded-full bg-text-muted/40 border-2 border-surface-1" />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-semibold truncate opacity-60">
<p className="text-sm font-bold truncate">
{friend.profile.display_name || friend.profile.username}
</p>
<p className="text-xs text-text-muted">
......@@ -260,35 +242,40 @@ export function FriendsPage() {
</p>
</div>
<motion.button
className="p-1.5 rounded-lg bg-coral/10 border border-coral/20"
whileTap={{ scale: 0.85 }}
className="p-2 rounded-xl bg-[#FF5252]/10 border-2 border-[#FF5252]/20"
whileTap={{ scale: 0.8 }}
onClick={() => removeFriend(friend.id)}
>
<UserX size={14} className="text-coral" />
<UserX size={14} className="text-[#FF5252]" />
</motion.button>
</Card>
</motion.div>
))}
))}
</div>
</motion.div>
</div>
)}
)}
{friends.length === 0 && pendingReceived.length === 0 && (
<div className="flex-1 flex flex-col items-center justify-center py-12">
{friends.length === 0 && pendingReceived.length === 0 && (
<motion.div
className="w-16 h-16 rounded-full bg-surface-2 border border-border flex items-center justify-center mb-4"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
className="flex flex-col items-center justify-center py-16 gap-4"
variants={item}
>
<UserPlus size={24} className="text-text-muted" />
<motion.div
className="w-20 h-20 rounded-full bg-surface-2 border-3 border-border flex items-center justify-center"
initial={{ scale: 0, rotate: -15 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: 'spring', stiffness: 300, damping: 18 }}
>
<UserPlus size={32} className="text-text-muted" />
</motion.div>
<div className="text-center">
<p className="text-text-muted font-black text-base">لا يوجد اصدقاء بعد</p>
<p className="text-text-muted text-xs font-bold mt-1">ابحث عن لاعبين لاضافتهم</p>
</div>
</motion.div>
<p className="text-text-muted text-sm">لا يوجد اصدقاء بعد</p>
<p className="text-text-muted text-xs mt-1">ابحث عن لاعبين لاضافتهم</p>
</div>
)}
</>
)}
)}
</motion.div>
)}
</div>
</PageTransition>
)
}
src/pages/HomePage.tsx
View file @ 6a8bf93c
import { useState } from 'react'
import { motion } from 'framer-motion'
import { Play, TrendingUp, Swords, Flame, Grid3X3, Bot, Users, Lightbulb, Crown, Trophy, X, Minus, ArrowUpRight, ArrowDownRight } from 'lucide-react'
import { Play, TrendingUp, Swords, Flame, Bot, Users, Lightbulb, Crown } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { useAuthStore } from '../stores/authStore'
import { PageTransition } from '../components/layout/PageTransition'
import { Card } from '../components/ui/Card'
import { DailyRewardModal } from '../components/DailyRewardModal'
import { useDailyReward } from '../hooks/useDailyReward'
import { useRecentGames } from '../hooks/useRecentGames'
import { playSound } from '../lib/sounds'
const dailyTips = [
'تحكم بالمركز في بداية اللعبة - الاحصنة والفيلة تكون اقوى من المركز',
......@@ -18,13 +19,24 @@ const dailyTips = [
'فكر في خطة خصمك قبل ان تلعب - لا تركز فقط على هجومك',
]
const stagger = {
hidden: {},
show: {
transition: { staggerChildren: 0.06 },
},
}
const fadeUp = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0, transition: { type: 'spring', stiffness: 500, damping: 22 } },
}
export function HomePage() {
const navigate = useNavigate()
const { user, profile } = useAuthStore()
const { profile } = useAuthStore()
const todayTip = dailyTips[new Date().getDay()]
const { canClaim, streak, reward, claim, loading: dailyLoading } = useDailyReward()
const [showDailyModal, setShowDailyModal] = useState(true)
const { games, loading: gamesLoading } = useRecentGames(user?.id, 3)
async function handleClaimReward() {
const result = await claim()
......@@ -34,7 +46,7 @@ export function HomePage() {
}
return (
<PageTransition className="px-7 py-7 flex flex-col gap-8">
<PageTransition>
<DailyRewardModal
open={canClaim && showDailyModal}
streak={streak}
......@@ -43,212 +55,160 @@ export function HomePage() {
onClaim={handleClaimReward}
onClose={() => setShowDailyModal(false)}
/>
{profile && (
<motion.div
className="flex items-center gap-4"
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
>
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-gold/20 to-purple/20 border-2 border-gold/30 flex items-center justify-center">
<span className="text-xl font-bold text-gold">
{profile.display_name?.charAt(0) || 'L'}
</span>
</div>
<div>
<h2 className="text-xl font-bold">اهلا، {profile.display_name}</h2>
<p className="text-xs text-text-muted mt-0.5">المستوى {profile.level}</p>
</div>
</motion.div>
)}
<motion.button
onClick={() => navigate('/play')}
className="relative w-full py-9 rounded-[20px] bg-gradient-to-bl from-gold via-gold-light to-gold overflow-hidden shadow-2xl shadow-gold/30"
whileTap={{ scale: 0.96 }}
<motion.div
variants={stagger}
initial="hidden"
animate="show"
className="flex flex-col gap-6"
>
<motion.div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
animate={{ x: ['-200%', '200%'] }}
transition={{ duration: 2.5, repeat: Infinity, ease: 'linear' }}
/>
<div className="relative flex flex-col items-center gap-3">
{profile && (
<motion.div
animate={{ scale: [1, 1.08, 1] }}
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
variants={fadeUp}
className="flex items-center gap-4"
>
<Play size={42} className="text-background" fill="currentColor" />
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-gold/25 to-purple/25 border-3 border-gold/40 flex items-center justify-center">
<span className="text-2xl font-black text-gold">
{profile.display_name?.charAt(0) || 'L'}
</span>
</div>
<div>
<h2 className="text-2xl font-black">اهلا، {profile.display_name}</h2>
<div className="flex items-center gap-2 mt-1">
<span className="px-2.5 py-0.5 rounded-lg bg-gold/15 border-2 border-gold/30 text-[11px] font-bold text-gold">
المستوى {profile.level}
</span>
</div>
</div>
</motion.div>
<span className="text-2xl font-black text-background">العب الان</span>
</div>
</motion.button>
{profile && (
<div className="grid grid-cols-3 gap-3">
<StatCard icon={<Swords size={20} className="text-cyan" />} value={profile.total_games_played} label="مباراة" delay={0.2} accent="cyan" />
<StatCard icon={<TrendingUp size={20} className="text-gold" />} value={profile.elo_blitz} label="تقييم" delay={0.3} accent="gold" />
<StatCard icon={<Flame size={20} className="text-coral" />} value={profile.win_streak} label="سلسلة فوز" delay={0.4} accent="coral" />
</div>
)}
<div className="grid grid-cols-2 gap-3">
<motion.button
onClick={() => navigate('/bot-select')}
className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-surface-1 border border-border"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
whileTap={{ scale: 0.96 }}
>
<div className="w-12 h-12 rounded-2xl bg-purple/10 border border-purple/20 flex items-center justify-center">
<Bot size={24} className="text-purple" />
</div>
<div className="text-center">
<p className="text-sm font-bold">العب ضد روبوت</p>
<p className="text-[10px] text-text-muted mt-0.5">تدريب وتحسين</p>
</div>
</motion.button>
<motion.button
onClick={() => navigate('/friends')}
className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-surface-1 border border-border"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
whileTap={{ scale: 0.96 }}
>
<div className="w-12 h-12 rounded-2xl bg-gold/10 border border-gold/20 flex items-center justify-center">
<Users size={24} className="text-gold" />
</div>
<div className="text-center">
<p className="text-sm font-bold">تحدى صديق</p>
<p className="text-[10px] text-text-muted mt-0.5">ارسل دعوة</p>
</div>
</motion.button>
</div>
)}
<div>
<div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-bold text-text-muted">اخر المباريات</h3>
{games.length > 0 && (
<motion.button
onClick={() => navigate('/profile')}
className="text-[11px] font-bold text-gold"
whileTap={{ scale: 0.95 }}
>
عرض الكل
</motion.button>
)}
</div>
{gamesLoading ? (
<div className="flex items-center justify-center py-8">
<div className="w-6 h-6 border-2 border-gold/30 border-t-gold rounded-full animate-spin" />
</div>
) : games.length === 0 ? (
<div className="flex flex-col items-center py-10 gap-4 rounded-2xl bg-surface-1 border border-border">
<motion.div variants={fadeUp} className="flex justify-center">
<motion.button
onClick={() => {
playSound('click')
navigate('/play')
}}
className="relative w-[85%] py-10 rounded-[22px] bg-gradient-to-b from-gold-light to-gold overflow-hidden border-b-4 border-gold-muted shadow-2xl shadow-gold/40"
whileTap={{ scale: 0.93, y: 3 }}
whileHover={{ scale: 1.03 }}
transition={{ type: 'spring', stiffness: 600, damping: 20 }}
>
<motion.div
className="w-14 h-14 rounded-2xl bg-surface-3/60 flex items-center justify-center"
animate={{ rotate: [0, 3, -3, 0] }}
transition={{ duration: 5, repeat: Infinity }}
>
<Grid3X3 size={28} className="text-text-muted/40" />
</motion.div>
<div className="text-center space-y-1">
<p className="text-sm font-semibold text-text-secondary">لا توجد مباريات بعد</p>
<p className="text-xs text-text-muted">العب اول مباراة وابدا رحلتك</p>
</div>
<motion.button
onClick={() => navigate('/play')}
className="px-6 py-2.5 rounded-xl bg-gold/10 border border-gold/30 text-gold text-sm font-bold"
whileTap={{ scale: 0.95 }}
>
ابدا الان
</motion.button>
</div>
) : (
<div className="flex flex-col gap-2">
{games.map((game, i) => (
className="absolute inset-0 rounded-[22px] border-[3px] border-gold/60 animate-pulse-glow"
/>
<motion.div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/25 to-transparent"
animate={{ x: ['-200%', '200%'] }}
transition={{ duration: 2.5, repeat: Infinity, ease: 'linear' }}
/>
<div className="relative flex flex-col items-center gap-3">
<motion.div
key={game.id}
className="flex items-center justify-between p-3.5 rounded-xl bg-surface-1 border border-border/80"
initial={{ opacity: 0, x: 10 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.3 + 0.05 * i }}
animate={{ scale: [1, 1.12, 1] }}
transition={{ duration: 1.8, repeat: Infinity, ease: 'easeInOut' }}
>
<div className="flex items-center gap-3">
<HomeResultBadge result={game.result} />
<div>
<p className="text-sm font-semibold">{game.opponent}</p>
<p className="text-[10px] text-text-muted">{game.timeControl}</p>
</div>
</div>
<HomeRatingBadge change={game.ratingChange} />
<Play size={48} className="text-background" fill="currentColor" />
</motion.div>
))}
</div>
<span className="text-3xl font-black text-background uppercase tracking-wide">العب الان</span>
</div>
</motion.button>
</motion.div>
{profile && (
<motion.div variants={fadeUp} className="grid grid-cols-3 gap-3">
<StatCard
icon={<TrendingUp size={22} className="text-gold" />}
value={profile.elo_blitz}
label="تقييم"
accent="gold"
/>
<StatCard
icon={<Swords size={22} className="text-cyan" />}
value={profile.total_games_played}
label="مباراة"
accent="cyan"
/>
<StatCard
icon={<Flame size={22} className="text-coral" />}
value={profile.win_streak}
label="سلسلة فوز"
accent="coral"
/>
</motion.div>
)}
</div>
<div className="p-5 rounded-2xl bg-surface-1 border border-border relative overflow-hidden">
<div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-gold/6 to-transparent rounded-bl-full" />
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-xl bg-gold/10 flex items-center justify-center flex-shrink-0">
<Lightbulb size={20} className="text-gold" />
</div>
<div className="flex-1 pt-0.5">
<div className="flex items-center gap-2 mb-2">
<h4 className="text-xs font-bold text-gold">نصيحة اليوم</h4>
<Crown size={11} className="text-gold/40" />
<motion.div variants={fadeUp} className="grid grid-cols-2 gap-3">
<Card
variant="default"
className="flex flex-col items-center gap-3 !p-5"
onClick={() => {
playSound('click')
navigate('/bot-select')
}}
>
<div className="w-14 h-14 rounded-2xl bg-purple/15 border-3 border-purple/30 flex items-center justify-center">
<Bot size={28} className="text-purple" />
</div>
<div className="text-center">
<p className="text-sm font-black">العب ضد روبوت</p>
<p className="text-[10px] text-text-muted mt-1">تدريب وتحسين</p>
</div>
<p className="text-[12px] text-text-secondary leading-[1.7]">{todayTip}</p>
</div>
</div>
</div>
</Card>
<Card
variant="default"
className="flex flex-col items-center gap-3 !p-5"
onClick={() => {
playSound('click')
navigate('/friends')
}}
>
<div className="w-14 h-14 rounded-2xl bg-gold/15 border-3 border-gold/30 flex items-center justify-center">
<Users size={28} className="text-gold" />
</div>
<div className="text-center">
<p className="text-sm font-black">تحدى صديق</p>
<p className="text-[10px] text-text-muted mt-1">ارسل دعوة</p>
</div>
</Card>
</motion.div>
<motion.div variants={fadeUp}>
<Card variant="gold" className="relative overflow-hidden">
<div className="absolute top-0 right-0 w-28 h-28 bg-gradient-to-bl from-gold/10 to-transparent rounded-bl-full" />
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl bg-gold/15 border-3 border-gold/30 flex items-center justify-center flex-shrink-0">
<Lightbulb size={22} className="text-gold" />
</div>
<div className="flex-1 pt-0.5">
<div className="flex items-center gap-2 mb-2">
<h4 className="text-xs font-black text-gold uppercase">نصيحة اليوم</h4>
<Crown size={12} className="text-gold/50" />
</div>
<p className="text-[12px] text-text-secondary leading-[1.8]">{todayTip}</p>
</div>
</div>
</Card>
</motion.div>
</motion.div>
</PageTransition>
)
}
function StatCard({ icon, value, label, delay, accent }: { icon: React.ReactNode; value: number; label: string; delay: number; accent: string }) {
const borderMap: Record<string, string> = { cyan: 'border-cyan/20', gold: 'border-gold/20', coral: 'border-coral/20' }
function StatCard({ icon, value, label, accent }: { icon: React.ReactNode; value: number; label: string; accent: string }) {
const borderMap: Record<string, string> = {
cyan: 'border-t-cyan',
gold: 'border-t-gold',
coral: 'border-t-coral',
}
return (
<motion.div
className={`flex flex-col items-center gap-2 p-4 rounded-2xl bg-surface-1 border ${borderMap[accent] || 'border-border'}`}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay }}
<div
className={`flex flex-col items-center gap-2 p-4 rounded-2xl bg-surface-1 border-3 border-border ${borderMap[accent] || ''}`}
style={{ borderTopWidth: '4px' }}
>
{icon}
<span className="text-xl font-black">{value}</span>
<span className="text-[10px] text-text-muted font-medium">{label}</span>
</motion.div>
)
}
function HomeResultBadge({ result }: { result: 'win' | 'loss' | 'draw' }) {
const config = {
win: { icon: <Trophy size={14} />, bg: 'bg-cyan/15 text-cyan' },
loss: { icon: <X size={14} />, bg: 'bg-coral/15 text-coral' },
draw: { icon: <Minus size={14} />, bg: 'bg-text-muted/15 text-text-muted' },
}
const c = config[result]
return (
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${c.bg}`}>
{c.icon}
<span className="text-2xl font-black">{value}</span>
<span className="text-[10px] text-text-muted font-bold">{label}</span>
</div>
)
}
function HomeRatingBadge({ change }: { change: number }) {
if (change === 0) return <span className="text-xs text-text-muted font-medium">+0</span>
if (change > 0) {
return (
<span className="flex items-center gap-0.5 text-xs font-bold text-cyan">
<ArrowUpRight size={12} />+{change}
</span>
)
}
return (
<span className="flex items-center gap-0.5 text-xs font-bold text-coral">
<ArrowDownRight size={12} />{change}
</span>
)
}
src/pages/LeaderboardPage.tsx
View file @ 6a8bf93c
......@@ -21,11 +21,21 @@ const PERIODS: { label: string; value: Period }[] = [
{ label: 'الكل', value: 'all_time' },
]
function Avatar({ name, size = 44 }: { name: string; size?: number }) {
function Avatar({ name, url, size = 44 }: { name: string; url?: string | null; size?: number }) {
if (url) {
return (
<img
src={url}
alt={name}
className="rounded-full object-cover border-2 border-border"
style={{ width: size, height: size }}
/>
)
}
return (
<div
className="rounded-full bg-gradient-to-br from-surface-3 to-surface-2 flex items-center justify-center font-bold text-text-secondary"
style={{ width: size, height: size, fontSize: size * 0.4 }}
className="rounded-full bg-gradient-to-br from-surface-3 to-surface-2 flex items-center justify-center font-black text-text-secondary border-2 border-border"
style={{ width: size, height: size, fontSize: size * 0.38 }}
>
{name?.charAt(0) || '?'}
</div>
......@@ -42,8 +52,11 @@ export function LeaderboardPage() {
const rest = entries.slice(3)
return (
<PageTransition className="px-7 py-7 flex flex-col gap-5">
<h1 className="text-xl font-bold">لوحة المتصدرين</h1>
<PageTransition className="flex flex-col gap-5">
<div className="flex items-center gap-2.5">
<Trophy size={24} className="text-[#FFC83D]" />
<h1 className="text-2xl font-black">لوحة المتصدرين</h1>
</div>
<div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
{TIME_CONTROLS.map((tc) => (
......@@ -51,11 +64,12 @@ export function LeaderboardPage() {
key={tc.value}
whileTap={{ scale: 0.93 }}
onClick={() => setTimeControl(tc.value)}
className={`px-4 py-1.5 rounded-full text-xs font-bold whitespace-nowrap transition-colors ${
className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap border-2 transition-colors ${
timeControl === tc.value
? 'bg-gold text-bg-primary'
: 'bg-surface-2 text-text-muted border border-border'
? 'bg-[#FFC83D] border-[#FFC83D] text-background font-black'
: 'bg-surface-2 text-text-muted border-border hover:border-[#FFC83D]/40'
}`}
transition={{ type: 'spring', stiffness: 500, damping: 20 }}
>
{tc.label}
</motion.button>
......@@ -68,11 +82,12 @@ export function LeaderboardPage() {
key={p.value}
whileTap={{ scale: 0.93 }}
onClick={() => setPeriod(p.value)}
className={`px-3 py-1 rounded-full text-[11px] font-bold whitespace-nowrap transition-colors ${
className={`px-3.5 py-1.5 rounded-xl text-[11px] font-bold whitespace-nowrap border-2 transition-colors ${
period === p.value
? 'bg-surface-3 text-text-primary border border-gold/40'
: 'bg-surface-1 text-text-muted border border-border'
? 'bg-[#B44DFF]/15 text-[#B44DFF] border-[#B44DFF]/50 font-black'
: 'bg-surface-1 text-text-muted border-border hover:border-[#B44DFF]/30'
}`}
transition={{ type: 'spring', stiffness: 500, damping: 20 }}
>
{p.label}
</motion.button>
......@@ -81,48 +96,53 @@ export function LeaderboardPage() {
{loading ? (
<div className="flex flex-col items-center py-16">
<div className="w-10 h-10 rounded-full border-2 border-gold border-t-transparent animate-spin" />
<motion.div
className="w-10 h-10 border-3 border-[#FFC83D]/30 border-t-[#FFC83D] rounded-full"
animate={{ rotate: 360 }}
transition={{ duration: 0.8, repeat: Infinity, ease: 'linear' }}
/>
</div>
) : entries.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 gap-4">
<motion.div
className="w-16 h-16 rounded-full bg-surface-2 border border-border flex items-center justify-center"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
className="w-20 h-20 rounded-2xl bg-surface-2 border-3 border-[#FFC83D]/30 flex items-center justify-center"
initial={{ scale: 0, rotate: -10 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: 'spring', stiffness: 300, damping: 18 }}
>
<Trophy size={24} className="text-gold" />
<Trophy size={32} className="text-[#FFC83D]" />
</motion.div>
<p className="text-text-muted text-sm">لا توجد بيانات بعد</p>
<p className="text-text-muted text-sm font-bold">لا توجد بيانات بعد</p>
<p className="text-text-muted text-xs">العب مباريات لتظهر في القائمة</p>
</div>
) : (
<>
{top3.length > 0 && <Podium entries={top3} currentUserId={user?.id} />}
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2.5">
{rest.map((entry, i) => (
<motion.div
key={entry.player_id}
initial={{ opacity: 0, x: -10 }}
initial={{ opacity: 0, x: -12 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.3 + i * 0.03 }}
className={`flex items-center gap-3 p-3 rounded-xl bg-surface-1 border ${
entry.player_id === user?.id ? 'border-gold/50 bg-gold/5' : 'border-border'
transition={{ type: 'spring', stiffness: 400, damping: 24, delay: 0.3 + i * 0.04 }}
className={`flex items-center gap-3 p-3.5 rounded-2xl bg-surface-1 border-3 ${
entry.player_id === user?.id
? 'border-[#FFC83D]/60 bg-[#FFC83D]/10'
: 'border-border'
}`}
>
<span className="w-7 text-center text-sm font-bold text-text-muted">
<span className="w-8 text-center text-sm font-black text-text-muted">
{entry.rank}
</span>
<Avatar name={entry.display_name} size={36} />
<Avatar name={entry.display_name} url={entry.avatar_url} size={38} />
<div className="flex-1 min-w-0">
<p className="text-sm font-bold truncate">{entry.display_name}</p>
<p className="text-[10px] text-text-muted">
{entry.games_played} مباراة &middot; {entry.win_rate}% فوز
{entry.country_code && ` &middot; ${entry.country_code}`}
<p className="text-sm font-black truncate">{entry.display_name}</p>
<p className="text-[10px] text-text-muted font-bold">
{entry.games_played} مباراة
</p>
</div>
<span className="text-sm font-bold text-gold">{entry.rating}</span>
<span className="text-sm font-black text-[#FFC83D]">{entry.rating}</span>
</motion.div>
))}
</div>
......@@ -136,19 +156,34 @@ function Podium({
entries,
currentUserId,
}: {
entries: { rank: number; player_id: string; rating: number; games_played: number; display_name: string }[]
entries: { rank: number; player_id: string; rating: number; games_played: number; display_name: string; avatar_url?: string | null }[]
currentUserId?: string
}) {
const ordered = [entries[1], entries[0], entries[2]].filter(Boolean)
const podiumConfig = [
{ color: 'text-[#C0C0C0]', bg: 'bg-[#C0C0C0]/10', border: 'border-[#C0C0C0]/30', size: 52, label: '2' },
{ color: 'text-gold', bg: 'bg-gold/10', border: 'border-gold/30', size: 64, label: '1' },
{ color: 'text-[#CD7F32]', bg: 'bg-[#CD7F32]/10', border: 'border-[#CD7F32]/30', size: 48, label: '3' },
{
color: '#C0C0C0',
height: 'h-24',
avatarSize: 52,
rankIcon: <Medal size={16} className="text-[#C0C0C0]" />,
},
{
color: '#FFC83D',
height: 'h-32',
avatarSize: 68,
rankIcon: <Crown size={22} className="text-[#FFC83D] fill-[#FFC83D]/20" />,
},
{
color: '#CD7F32',
height: 'h-20',
avatarSize: 48,
rankIcon: <Medal size={16} className="text-[#CD7F32]" />,
},
]
return (
<div className="flex items-end justify-center gap-4 py-4">
<div className="flex items-end justify-center gap-3 py-4">
{ordered.map((entry, i) => {
if (!entry) return null
const config = podiumConfig[i]
......@@ -158,34 +193,47 @@ function Podium({
<motion.div
key={entry.player_id}
className="flex flex-col items-center gap-2"
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ type: 'spring', stiffness: 300, damping: 20, delay: 0.1 + i * 0.12 }}
initial={{ scale: 0, opacity: 0, y: 30 }}
animate={{ scale: 1, opacity: 1, y: 0 }}
transition={{ type: 'spring', stiffness: 350, damping: 20, delay: 0.1 + i * 0.12 }}
>
{i === 1 && (
<motion.div
initial={{ scale: 0, rotate: -20 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ delay: 0.5, type: 'spring' }}
>
<Crown size={20} className="text-gold fill-gold/20" />
</motion.div>
)}
{i === 0 && <Medal size={16} className="text-[#C0C0C0]" />}
{i === 2 && <Medal size={16} className="text-[#CD7F32]" />}
<motion.div
initial={{ scale: 0, rotate: -20 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ delay: 0.4 + i * 0.1, type: 'spring', stiffness: 400, damping: 15 }}
>
{config.rankIcon}
</motion.div>
<div
className={`rounded-full ${config.bg} border-2 ${config.border} flex items-center justify-center font-bold ${config.color} ${isMe ? 'ring-2 ring-gold/50' : ''}`}
style={{ width: config.size, height: config.size, fontSize: config.size * 0.35 }}
className={`rounded-full border-3 flex items-center justify-center font-black ${isMe ? 'ring-3 ring-[#FFC83D]/40' : ''}`}
style={{
width: config.avatarSize,
height: config.avatarSize,
borderColor: config.color,
backgroundColor: `${config.color}15`,
color: config.color,
fontSize: config.avatarSize * 0.35,
}}
>
{entry.display_name?.charAt(0) || '?'}
</div>
<div className="text-center">
<p className="text-xs font-bold truncate max-w-[70px]">{entry.display_name}</p>
<p className={`text-sm font-bold ${config.color}`}>{entry.rating}</p>
<p className="text-[9px] text-text-muted">{entry.games_played} مباراة</p>
<p className="text-xs font-black truncate max-w-[75px]">{entry.display_name}</p>
<p className="text-base font-black" style={{ color: config.color }}>
{entry.rating}
</p>
<p className="text-[9px] text-text-muted font-bold">{entry.games_played} مباراة</p>
</div>
<div
className={`w-full ${config.height} rounded-t-xl border-3 border-b-0`}
style={{
borderColor: config.color,
background: `linear-gradient(to top, ${config.color}20, transparent)`,
}}
/>
</motion.div>
)
})}
......
src/pages/LoginPage.tsx
View file @ 6a8bf93c
......@@ -32,35 +32,41 @@ export function LoginPage() {
}
return (
<div className="min-h-dvh flex flex-col items-center justify-center px-7 relative overflow-hidden">
<div className="min-h-dvh flex items-center justify-center relative overflow-hidden bg-background">
<motion.div
className="absolute inset-0 opacity-30"
className="absolute inset-0"
style={{
background: 'radial-gradient(ellipse at 50% 30%, rgba(212,168,67,0.15) 0%, transparent 60%)',
background: 'radial-gradient(ellipse at 50% 30%, rgba(255,200,61,0.12) 0%, transparent 60%)',
}}
animate={{
background: [
'radial-gradient(ellipse at 50% 30%, rgba(212,168,67,0.15) 0%, transparent 60%)',
'radial-gradient(ellipse at 50% 30%, rgba(212,168,67,0.08) 0%, transparent 60%)',
'radial-gradient(ellipse at 50% 30%, rgba(212,168,67,0.15) 0%, transparent 60%)',
'radial-gradient(ellipse at 50% 30%, rgba(255,200,61,0.12) 0%, transparent 60%)',
'radial-gradient(ellipse at 50% 30%, rgba(255,200,61,0.05) 0%, transparent 60%)',
'radial-gradient(ellipse at 50% 30%, rgba(255,200,61,0.12) 0%, transparent 60%)',
],
}}
transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
/>
<motion.div
className="relative w-full max-w-[310px]"
initial={{ opacity: 0, y: 30 }}
className="relative w-full max-w-[380px] px-5"
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', stiffness: 300, damping: 25 }}
transition={{ type: 'spring', stiffness: 400, damping: 22 }}
>
<div className="flex flex-col items-center mb-8">
<GoldCrown size={64} />
<h1 className="mt-4 text-3xl font-black text-gold">EL3AB</h1>
<p className="mt-1 text-text-secondary">تسجيل الدخول</p>
<GoldCrown size={72} />
<h1 className="mt-4 text-4xl font-black text-gold">EL3AB</h1>
<p className="mt-2 text-lg font-bold text-text-secondary">تسجيل الدخول</p>
</div>
<form onSubmit={handleLogin} className="flex flex-col gap-4 p-7 rounded-2xl bg-surface-3 border-2 border-gold/30 shadow-[0_8px_40px_rgba(0,0,0,0.6),0_0_20px_rgba(212,168,67,0.08)]">
<motion.form
onSubmit={handleLogin}
className="flex flex-col gap-4 p-6 rounded-2xl bg-surface-2 border-3 border-border shadow-xl"
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ type: 'spring', stiffness: 450, damping: 25, delay: 0.1 }}
>
<Input
label="البريد الالكتروني"
type="email"
......@@ -78,25 +84,26 @@ export function LoginPage() {
{error && (
<motion.p
className="text-sm text-coral text-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="text-sm font-bold text-coral text-center"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ type: 'spring', stiffness: 500, damping: 20 }}
>
{error}
</motion.p>
)}
<Button type="submit" loading={loading} className="w-[85%] mx-auto mt-2">
<Button type="submit" variant="gold" size="lg" loading={loading} className="w-[80%] mx-auto mt-2">
دخول
</Button>
</form>
</motion.form>
<motion.button
onClick={() => navigate('/register')}
className="mt-4 w-full text-center text-sm text-text-secondary hover:text-gold transition-colors"
whileTap={{ scale: 0.98 }}
className="mt-5 w-full text-center text-sm font-bold text-text-secondary hover:text-gold transition-colors"
whileTap={{ scale: 0.96 }}
>
ليس لديك حساب؟ <span className="text-gold font-semibold">سجل الان</span>
ليس لديك حساب؟ <span className="text-gold font-black">سجل الان</span>
</motion.button>
</motion.div>
</div>
......
src/pages/MatchmakingPage.tsx
View file @ 6a8bf93c
......@@ -36,25 +36,25 @@ export function MatchmakingPage() {
}
return (
<div className="flex-1 flex flex-col items-center justify-center px-6 py-12 relative overflow-hidden">
<div className="flex-1 flex flex-col items-center justify-center px-6 py-12 relative overflow-hidden min-h-dvh bg-background">
<AnimatePresence mode="wait">
{matchFound ? (
<motion.div
key="found"
className="flex flex-col items-center"
initial={{ scale: 0.5, opacity: 0 }}
initial={{ scale: 0.3, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
transition={{ type: 'spring', stiffness: 300, damping: 15 }}
>
<motion.div
className="w-24 h-24 rounded-full bg-gold/20 border-2 border-gold flex items-center justify-center"
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 0.5, repeat: 2 }}
className="w-28 h-28 rounded-full bg-gold/20 border-3 border-gold flex items-center justify-center animate-pulse-glow"
animate={{ scale: [1, 1.15, 1] }}
transition={{ duration: 0.6, repeat: 2 }}
>
<span className="text-4xl">⚔️</span>
<span className="text-5xl font-black text-gold">VS</span>
</motion.div>
<motion.h2
className="mt-6 text-xl font-bold text-gold"
className="mt-6 text-2xl font-black text-gold"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
......@@ -68,11 +68,11 @@ export function MatchmakingPage() {
className="flex flex-col items-center"
exit={{ opacity: 0, scale: 0.8 }}
>
<div className="relative w-40 h-40 flex items-center justify-center">
<div className="relative w-44 h-44 flex items-center justify-center">
{[0, 1, 2].map((i) => (
<motion.div
key={i}
className="absolute inset-0 rounded-full border-2 border-gold/30"
className="absolute inset-0 rounded-full border-3 border-gold/30"
initial={{ scale: 0.5, opacity: 0.8 }}
animate={{ scale: 2.5, opacity: 0 }}
transition={{
......@@ -85,16 +85,16 @@ export function MatchmakingPage() {
))}
<motion.div
className="w-20 h-20 rounded-full bg-gradient-to-br from-gold/20 to-gold/5 border-2 border-gold/40 flex items-center justify-center"
animate={{ scale: [1, 1.05, 1] }}
className="w-24 h-24 rounded-full bg-gradient-to-br from-gold/25 to-surface-2 border-3 border-gold/50 flex items-center justify-center shadow-lg"
animate={{ scale: [1, 1.08, 1], rotate: [0, 3, -3, 0] }}
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
>
<span className="text-3xl font-black text-gold">?</span>
<span className="text-4xl font-black text-gold">?</span>
</motion.div>
</div>
<motion.h2
className="mt-8 text-xl font-bold"
className="mt-8 text-xl font-black"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.3 }}
......@@ -103,7 +103,7 @@ export function MatchmakingPage() {
</motion.h2>
<motion.div
className="mt-3 text-lg font-mono text-gold tabular-nums"
className="mt-3 text-2xl font-black font-mono text-gold tabular-nums"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.4 }}
......@@ -112,7 +112,7 @@ export function MatchmakingPage() {
</motion.div>
<motion.div
className="mt-2 flex gap-1"
className="mt-3 flex gap-1.5"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.5 }}
......@@ -120,9 +120,9 @@ export function MatchmakingPage() {
{[0, 1, 2].map((i) => (
<motion.span
key={i}
className="w-2 h-2 rounded-full bg-gold"
animate={{ opacity: [0.3, 1, 0.3] }}
transition={{ duration: 1, repeat: Infinity, delay: i * 0.3 }}
className="w-3 h-3 rounded-full bg-gold"
animate={{ opacity: [0.2, 1, 0.2], scale: [0.8, 1.2, 0.8] }}
transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.3 }}
/>
))}
</motion.div>
......@@ -133,7 +133,7 @@ export function MatchmakingPage() {
animate={{ opacity: 1 }}
transition={{ delay: 1 }}
>
<Button variant="ghost" onClick={handleCancel}>
<Button variant="ghost" onClick={handleCancel} size="md">
الغاء
</Button>
</motion.div>
......
src/pages/NotFoundPage.tsx
View file @ 6a8bf93c
......@@ -7,7 +7,7 @@ export function NotFoundPage() {
const navigate = useNavigate()
return (
<div className="flex-1 flex flex-col items-center justify-center px-6 py-12 gap-6">
<div className="flex-1 flex flex-col items-center justify-center px-6 py-12 gap-6 min-h-dvh bg-background">
<motion.div
className="text-6xl"
animate={{
......
src/pages/NotificationsPage.tsx
View file @ 6a8bf93c
import { motion } from 'framer-motion'
import { Bell, UserPlus, Trophy, Swords, CheckCheck, Loader2 } from 'lucide-react'
import { Bell, UserPlus, Trophy, Swords, Loader2 } from 'lucide-react'
import { PageTransition } from '../components/layout/PageTransition'
import { Button } from '../components/ui/Button'
import { useNotifications } from '../hooks/useNotifications'
function relativeTime(date: string): string {
......@@ -18,104 +19,114 @@ function getIcon(type: string) {
switch (type) {
case 'friend_request':
case 'friend_accepted':
return <UserPlus size={16} className="text-cyan" />
case 'match_result':
case 'win':
return <Trophy size={16} className="text-gold" />
return <UserPlus size={18} className="text-[#00E5CC]" />
case 'achievement':
return <Trophy size={18} className="text-[#FFC83D]" />
case 'match':
case 'match_invite':
case 'challenge':
return <Swords size={16} className="text-coral" />
return <Swords size={18} className="text-[#FF5252]" />
default:
return <Bell size={16} className="text-text-muted" />
return <Bell size={18} className="text-[#B44DFF]" />
}
}
export function NotificationsPage() {
const { notifications, markAsRead, markAllRead, loading } = useNotifications()
const stagger = {
hidden: { opacity: 0 },
show: { opacity: 1, transition: { staggerChildren: 0.06 } },
}
const stagger = {
hidden: { opacity: 0 },
show: { opacity: 1, transition: { staggerChildren: 0.04 } },
}
const item = {
hidden: { opacity: 0, y: 12, scale: 0.95 },
show: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 400, damping: 22 } },
}
const item = {
hidden: { opacity: 0, y: 10 },
show: { opacity: 1, y: 0 },
}
export function NotificationsPage() {
const { notifications, markAsRead, markAllRead, loading } = useNotifications()
return (
<PageTransition className="px-7 py-7 flex flex-col gap-6">
<div className="flex items-center justify-between">
<h1 className="text-xl font-bold">الاشعارات</h1>
{notifications.some((n) => !n.is_read) && (
<motion.button
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-surface-2 border border-border text-xs text-text-muted"
whileTap={{ scale: 0.9 }}
onClick={markAllRead}
>
<CheckCheck size={14} />
قراءة الكل
</motion.button>
)}
</div>
{loading ? (
<div className="flex-1 flex items-center justify-center">
<Loader2 size={24} className="animate-spin text-text-muted" />
<PageTransition>
<div className="flex flex-col gap-5 py-6">
<div className="flex items-center justify-between">
<h1 className="text-xl font-black">الاشعارات</h1>
{notifications.some((n) => !n.is_read) && (
<Button size="sm" variant="ghost" onClick={markAllRead}>
قراءة الكل
</Button>
)}
</div>
) : notifications.length === 0 ? (
<div className="flex-1 flex flex-col items-center justify-center py-12">
{loading ? (
<div className="flex-1 flex items-center justify-center py-16">
<Loader2 size={28} className="animate-spin text-[#FFC83D]" />
</div>
) : notifications.length === 0 ? (
<motion.div
className="w-16 h-16 rounded-full bg-surface-2 border border-border flex items-center justify-center mb-4"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
className="flex flex-col items-center justify-center py-20 gap-4"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
>
<Bell size={24} className="text-text-muted" />
</motion.div>
<p className="text-text-muted text-sm">لا توجد اشعارات</p>
</div>
) : (
<motion.div className="flex flex-col gap-2" variants={stagger} initial="hidden" animate="show">
{notifications.map((notification) => (
<motion.div
key={notification.id}
variants={item}
className={`rounded-xl p-3.5 border cursor-pointer transition-colors ${
notification.is_read
? 'bg-surface-1 border-border'
: 'bg-surface-2 border-gold/30 border-r-4 border-r-gold'
}`}
whileTap={{ scale: 0.97 }}
onClick={() => {
if (!notification.is_read) markAsRead(notification.id)
}}
className="w-20 h-20 rounded-full bg-surface-2 border-3 border-border flex items-center justify-center"
initial={{ scale: 0, rotate: -15 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: 'spring', stiffness: 300, damping: 18 }}
>
<div className="flex items-start gap-3">
<div className="w-8 h-8 rounded-full bg-surface-3 border border-border flex items-center justify-center shrink-0 mt-0.5">
{getIcon(notification.type)}
</div>
<div className="flex-1 min-w-0">
<p className={`text-sm font-semibold ${notification.is_read ? 'text-text-muted' : 'text-text-primary'}`}>
{notification.title_ar || notification.title}
</p>
{(notification.body_ar || notification.body) && (
<p className="text-xs text-text-muted mt-0.5 line-clamp-2">
{notification.body_ar || notification.body}
<Bell size={32} className="text-text-muted" />
</motion.div>
<p className="text-text-muted font-black text-base">لا توجد اشعارات</p>
</motion.div>
) : (
<motion.div className="flex flex-col gap-3" variants={stagger} initial="hidden" animate="show">
{notifications.map((notification) => (
<motion.div
key={notification.id}
variants={item}
className={`rounded-xl p-4 border-3 cursor-pointer transition-colors ${
notification.is_read
? 'bg-surface-1 border-border'
: 'bg-surface-2 border-[#FFC83D]/40'
}`}
whileTap={{ scale: 0.96 }}
onClick={() => {
if (!notification.is_read) markAsRead(notification.id)
}}
>
<div className="flex items-start gap-3">
<div className={`w-10 h-10 rounded-xl border-3 flex items-center justify-center shrink-0 mt-0.5 ${
notification.is_read
? 'bg-surface-3 border-border'
: 'bg-surface-3 border-[#FFC83D]/30'
}`}>
{getIcon(notification.type)}
</div>
<div className="flex-1 min-w-0">
<p className={`text-sm font-black ${notification.is_read ? 'text-text-muted' : 'text-text-primary'}`}>
{notification.title_ar || notification.title}
</p>
{(notification.body_ar || notification.body) && (
<p className="text-xs text-text-muted font-bold mt-0.5 line-clamp-2">
{notification.body_ar || notification.body}
</p>
)}
<p className="text-[10px] text-text-muted font-bold mt-1.5">
{relativeTime(notification.created_at)}
</p>
</div>
{!notification.is_read && (
<motion.div
className="w-3 h-3 rounded-full bg-[#FFC83D] shrink-0 mt-2 shadow-md shadow-[#FFC83D]/40"
animate={{ scale: [1, 1.2, 1] }}
transition={{ repeat: Infinity, duration: 2 }}
/>
)}
<p className="text-[10px] text-text-muted mt-1">
{relativeTime(notification.created_at)}
</p>
</div>
{!notification.is_read && (
<div className="w-2 h-2 rounded-full bg-gold shrink-0 mt-2" />
)}
</div>
</motion.div>
))}
</motion.div>
)}
</motion.div>
))}
</motion.div>
)}
</div>
</PageTransition>
)
}
src/pages/PlayPage.tsx
View file @ 6a8bf93c
import { useState } from 'react'
import { motion } from 'framer-motion'
import { Lock, Zap, Timer, Clock, Hourglass, Cpu, Crown } from 'lucide-react'
import { Zap, Timer, Clock, Hourglass, Lock, Cpu, Crown } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { PageTransition } from '../components/layout/PageTransition'
import { GAMES, TIME_CONTROLS } from '../lib/constants'
import { useState } from 'react'
import { Card } from '../components/ui/Card'
import { Button } from '../components/ui/Button'
import { GAMES, TIME_CONTROLS } from '../lib/constants'
import { playSound } from '../lib/sounds'
const CATEGORIES = [
{ key: 'bullet', label: 'رصاصة', icon: Zap },
......@@ -13,11 +15,23 @@ const CATEGORIES = [
{ key: 'classical', label: 'كلاسيكي', icon: Hourglass },
] as const
const GAME_ICONS: Record<string, React.ReactNode> = {
backgammon: <span className="text-2xl font-bold text-text-muted">&#x2680;</span>,
dominoes: <span className="text-2xl font-bold text-text-muted">&#x1F0A1;</span>,
ludo: <span className="text-2xl font-bold text-text-muted">&#x2684;</span>,
trivia: <span className="text-lg font-bold text-text-muted">?</span>,
const GAME_ICONS: Record<string, string> = {
backgammon: '⚀',
dominoes: '🂡',
ludo: '⚄',
trivia: '?',
}
const stagger = {
hidden: {},
show: {
transition: { staggerChildren: 0.06 },
},
}
const fadeUp = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0, transition: { type: 'spring', stiffness: 500, damping: 22 } },
}
export function PlayPage() {
......@@ -27,124 +41,144 @@ export function PlayPage() {
const chessGame = GAMES.find((g) => g.key === 'chess')!
const otherGames = GAMES.filter((g) => g.key !== 'chess')
return (
<PageTransition className="px-7 py-7 flex flex-col gap-7">
<h1 className="text-xl font-bold">اختر اللعبة</h1>
const activeCategory = Object.entries(TIME_CONTROLS).find(
([k]) => k === selectedTC
)?.[1].category
{/* Chess Hero Card */}
return (
<PageTransition>
<motion.div
className="relative rounded-2xl overflow-hidden border-2 border-gold/30 bg-gradient-to-br from-surface-2 via-surface-1 to-gold/5 p-6 flex items-center gap-5"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', stiffness: 400, damping: 25 }}
whileTap={{ scale: 0.97 }}
variants={stagger}
initial="hidden"
animate="show"
className="flex flex-col gap-6"
>
<div className="w-16 h-16 rounded-2xl bg-gold/10 border border-gold/20 flex items-center justify-center shadow-inner">
<Crown size={32} className="text-gold" />
</div>
<div className="flex-1">
<span className="text-lg font-bold">{chessGame.nameAr}</span>
<p className="text-xs text-text-secondary mt-1.5 leading-relaxed">العب شطرنج اونلاين ضد لاعبين حقيقيين</p>
</div>
<motion.div
className="absolute top-3 left-3 w-2 h-2 rounded-full bg-green-500"
animate={{ opacity: [1, 0.4, 1] }}
transition={{ duration: 2, repeat: Infinity }}
/>
</motion.div>
<motion.h1 variants={fadeUp} className="text-2xl font-black">
اختر اللعبة
</motion.h1>
{/* Other Games Grid */}
<div className="grid grid-cols-2 gap-3">
{otherGames.map((game, i) => (
<motion.div
key={game.key}
className="relative rounded-2xl overflow-hidden border border-border bg-surface-1 opacity-50 p-5 flex flex-col items-center gap-3"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 0.5, y: 0 }}
transition={{ delay: 0.08 + i * 0.08, type: 'spring', stiffness: 400, damping: 25 }}
>
<div className="w-12 h-12 rounded-xl bg-surface-3/80 flex items-center justify-center">
{GAME_ICONS[game.key] || null}
<motion.div variants={fadeUp}>
<Card variant="gold" className="relative !p-6">
<div className="flex items-center gap-5">
<div className="w-18 h-18 min-w-[72px] min-h-[72px] rounded-2xl bg-gold/15 border-3 border-gold/40 flex items-center justify-center">
<Crown size={38} className="text-gold" />
</div>
<div className="flex-1">
<span className="text-xl font-black">{chessGame.nameAr}</span>
<p className="text-xs text-text-secondary mt-2 leading-relaxed">
العب شطرنج اونلاين ضد لاعبين حقيقيين
</p>
</div>
</div>
<span className="text-sm font-bold text-text-secondary">{game.nameAr}</span>
<div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-[2px]">
<div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-2/80 border border-border">
<Lock size={12} className="text-text-muted" />
<span className="text-[11px] text-text-muted font-medium">قريبا</span>
<motion.div
className="absolute top-4 left-4 w-3 h-3 rounded-full bg-green-500 border-2 border-green-400/50"
animate={{ opacity: [1, 0.4, 1], scale: [1, 1.2, 1] }}
transition={{ duration: 2, repeat: Infinity }}
/>
</Card>
</motion.div>
<motion.div variants={fadeUp} className="grid grid-cols-2 gap-3">
{otherGames.map((game) => (
<div
key={game.key}
className="relative rounded-2xl overflow-hidden border-3 border-border bg-surface-1 opacity-50 p-5 flex flex-col items-center gap-3"
>
<div className="w-12 h-12 rounded-xl bg-surface-3/80 border-2 border-border flex items-center justify-center">
<span className="text-2xl font-bold text-text-muted">
{GAME_ICONS[game.key] || ''}
</span>
</div>
<span className="text-sm font-black text-text-secondary">{game.nameAr}</span>
<div className="absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-[2px]">
<div className="flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-surface-2/90 border-2 border-border">
<Lock size={13} className="text-text-muted" />
<span className="text-[11px] text-text-muted font-bold">قريبا</span>
</div>
</div>
</div>
</motion.div>
))}
</div>
))}
</motion.div>
{/* Time Control */}
<div className="space-y-4">
<h2 className="text-base font-bold">نظام الوقت</h2>
<motion.div variants={fadeUp} className="space-y-4">
<h2 className="text-lg font-black">نظام الوقت</h2>
{/* Category Pills */}
<div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
{CATEGORIES.map((cat) => {
const isActive = Object.entries(TIME_CONTROLS).find(
([k]) => k === selectedTC
)?.[1].category === cat.key
const Icon = cat.icon
return (
<motion.button
key={cat.key}
className={`flex items-center gap-2 px-4 py-2.5 rounded-full text-xs font-bold border whitespace-nowrap ${
isActive
? 'bg-gold/15 border-gold/50 text-gold shadow-sm shadow-gold/10'
: 'bg-surface-2 border-border text-text-muted'
}`}
whileTap={{ scale: 0.93 }}
onClick={() => {
const first = Object.entries(TIME_CONTROLS).find(([, v]) => v.category === cat.key)
if (first) setSelectedTC(first[0])
}}
>
<Icon size={14} />
{cat.label}
</motion.button>
)
})}
</div>
<div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
{CATEGORIES.map((cat) => {
const isActive = activeCategory === cat.key
const Icon = cat.icon
return (
<motion.button
key={cat.key}
className={`flex items-center gap-2 px-4 py-2.5 rounded-full text-xs font-black border-2 whitespace-nowrap transition-all ${
isActive
? 'bg-gold/20 border-gold text-gold shadow-md shadow-gold/15'
: 'bg-surface-2 border-border text-text-muted'
}`}
whileTap={{ scale: 0.9 }}
transition={{ type: 'spring', stiffness: 500, damping: 20 }}
onClick={() => {
playSound('click')
const first = Object.entries(TIME_CONTROLS).find(([, v]) => v.category === cat.key)
if (first) setSelectedTC(first[0])
}}
>
<Icon size={14} />
{cat.label}
</motion.button>
)
})}
</div>
{/* Time Buttons */}
<div className="grid grid-cols-3 gap-2.5">
{Object.entries(TIME_CONTROLS)
.filter(([, v]) => {
const activeCategory = Object.entries(TIME_CONTROLS).find(
([k]) => k === selectedTC
)?.[1].category
return v.category === activeCategory
})
.map(([key, tc]) => (
<motion.button
key={key}
className={`py-3.5 rounded-xl text-center font-bold text-sm border transition-all ${
selectedTC === key
? 'bg-gold/15 border-gold text-gold shadow-sm shadow-gold/10'
: 'bg-surface-2 border-border text-text-secondary'
}`}
whileTap={{ scale: 0.93 }}
onClick={() => setSelectedTC(key)}
>
{tc.labelAr}
</motion.button>
))}
</div>
</div>
<div className="grid grid-cols-3 gap-2.5">
{Object.entries(TIME_CONTROLS)
.filter(([, v]) => v.category === activeCategory)
.map(([key, tc]) => (
<motion.button
key={key}
className={`py-4 rounded-xl text-center font-black text-sm border-3 transition-all ${
selectedTC === key
? 'bg-gold/20 border-gold text-gold shadow-md shadow-gold/15 scale-105'
: 'bg-surface-2 border-border text-text-secondary hover:border-border/80'
}`}
whileTap={{ scale: 0.9 }}
transition={{ type: 'spring', stiffness: 500, damping: 20 }}
onClick={() => {
playSound('click')
setSelectedTC(key)
}}
>
{tc.labelAr}
</motion.button>
))}
</div>
</motion.div>
{/* Action Buttons */}
<div className="flex flex-col items-center gap-3 mt-2 pb-4">
<Button onClick={() => navigate(`/matchmaking?tc=${selectedTC}&game=chess`)} className="w-[85%]" size="lg">
البحث عن خصم
</Button>
<Button onClick={() => navigate('/bot-select')} variant="ghost" className="w-[85%]" size="md">
<Cpu size={18} className="text-gold" />
العب ضد الروبوت
</Button>
</div>
<motion.div variants={fadeUp} className="flex flex-col items-center gap-3 mt-2 pb-4">
<Button
onClick={() => {
playSound('click')
navigate(`/matchmaking?tc=${selectedTC}&game=chess`)
}}
className="w-[80%]"
size="lg"
>
البحث عن خصم
</Button>
<Button
onClick={() => {
playSound('click')
navigate('/bot-select')
}}
variant="ghost"
className="w-[80%]"
size="md"
>
<Cpu size={18} className="text-purple" />
العب ضد الروبوت
</Button>
</motion.div>
</motion.div>
</PageTransition>
)
}
src/pages/ProfilePage.tsx
View file @ 6a8bf93c
import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Settings, TrendingUp, Target, Flame, Trophy, Lock, Pencil, X, Clock, ArrowUpRight, ArrowDownRight, Minus } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { Trophy, Target, Flame, TrendingUp, Pencil, X, LogOut } from 'lucide-react'
import { useAuthStore } from '../stores/authStore'
import { useNotificationStore } from '../stores/notificationStore'
import { PageTransition } from '../components/layout/PageTransition'
import { Card } from '../components/ui/Card'
import { Button } from '../components/ui/Button'
import { supabase } from '../lib/supabase'
import { useRecentGames } from '../hooks/useRecentGames'
function SectionDivider() {
return <div className="w-full h-px bg-gradient-to-l from-transparent via-border to-transparent my-1" />
const stagger = {
hidden: { opacity: 0 },
show: { opacity: 1, transition: { staggerChildren: 0.06 } },
}
const item = {
hidden: { opacity: 0, y: 12, scale: 0.95 },
show: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 400, damping: 22 } },
}
export function ProfilePage() {
const { user, profile, setProfile } = useAuthStore()
const { showToast } = useNotificationStore()
const navigate = useNavigate()
const [editOpen, setEditOpen] = useState(false)
const [editForm, setEditForm] = useState({
display_name: '',
bio: '',
country_code: '',
})
const [editForm, setEditForm] = useState({ display_name: '', bio: '' })
const [saving, setSaving] = useState(false)
const { games, loading: gamesLoading } = useRecentGames(user?.id, 5)
function openEdit() {
if (!profile) return
setEditForm({
display_name: profile.display_name || '',
bio: profile.bio || '',
country_code: profile.country_code || '',
})
setEditOpen(true)
}
......@@ -46,7 +43,6 @@ export function ProfilePage() {
.update({
display_name: editForm.display_name.trim(),
bio: editForm.bio.trim() || null,
country_code: editForm.country_code.trim() || null,
})
.eq('id', user.id)
......@@ -61,180 +57,132 @@ export function ProfilePage() {
...profile,
display_name: editForm.display_name.trim(),
bio: editForm.bio.trim() || null,
country_code: editForm.country_code.trim() || null,
})
showToast({ type: 'success', title: 'تم حفظ التعديلات' })
setEditOpen(false)
}
async function handleLogout() {
await supabase.auth.signOut()
}
if (!profile) return null
const winRate = profile.total_games_played > 0
? Math.round((profile.total_wins / profile.total_games_played) * 100)
: 0
return (
<PageTransition className="px-7 py-7 flex flex-col gap-6">
<div className="flex items-start justify-between">
<div className="flex items-center gap-4">
<motion.div
className="w-18 h-18 rounded-full bg-gradient-to-br from-gold/30 to-purple/20 border-2 border-gold flex items-center justify-center shadow-lg shadow-gold/10"
style={{ width: 72, height: 72 }}
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
>
<span className="text-3xl font-black text-gold">
{profile.display_name?.charAt(0) || '?'}
</span>
</motion.div>
<div className="space-y-1">
<h1 className="text-xl font-bold">{profile.display_name}</h1>
<p className="text-sm text-text-muted">@{profile.username}</p>
{profile.bio && (
<p className="text-xs text-text-secondary mt-1 max-w-[180px] line-clamp-2">{profile.bio}</p>
)}
</div>
</div>
<div className="flex items-center gap-2">
<motion.button
whileTap={{ scale: 0.9 }}
onClick={openEdit}
className="p-2.5 rounded-xl bg-surface-2 border border-border"
>
<Pencil size={18} className="text-text-muted" />
</motion.button>
<motion.button
whileTap={{ scale: 0.9 }}
onClick={() => navigate('/settings')}
className="p-2.5 rounded-xl bg-surface-2 border border-border"
>
<Settings size={18} className="text-text-muted" />
</motion.button>
</div>
</div>
<Card className="p-5">
<div className="flex items-center justify-between mb-3">
<h2 className="text-lg font-bold">المستوى {profile.level}</h2>
<span className="text-sm text-gold font-bold px-3 py-1 rounded-full bg-gold/10">{profile.xp} XP</span>
</div>
<div className="w-full h-3 rounded-full bg-surface-3 overflow-hidden">
<motion.div
className="h-full rounded-full bg-gradient-to-l from-gold to-gold-light"
initial={{ width: 0 }}
animate={{ width: `${Math.min((profile.xp % 500) / 5, 100)}%` }}
transition={{ duration: 1, ease: 'easeOut' }}
/>
</div>
<p className="text-xs text-text-muted mt-2.5">{500 - (profile.xp % 500)} XP للمستوى التالي</p>
</Card>
const xpForNextLevel = 500
const currentXpInLevel = profile.xp % xpForNextLevel
const xpRemaining = xpForNextLevel - currentXpInLevel
const xpPercent = Math.min((currentXpInLevel / xpForNextLevel) * 100, 100)
<SectionDivider />
const ratings = [
{ label: 'رصاصة', value: profile.elo_bullet, color: 'border-t-[#FF5252]' },
{ label: 'خاطف', value: profile.elo_blitz, color: 'border-t-[#FFC83D]' },
{ label: 'سريع', value: profile.elo_rapid, color: 'border-t-[#00E5CC]' },
{ label: 'كلاسيكي', value: profile.elo_classical, color: 'border-t-[#B44DFF]' },
]
<div>
<h2 className="text-sm font-bold text-text-secondary mb-3">التقييمات</h2>
<div className="grid grid-cols-2 gap-3">
{[
{ label: 'رصاصة', value: profile.elo_bullet, icon: '1+0' },
{ label: 'خاطف', value: profile.elo_blitz, icon: '5+0' },
{ label: 'سريع', value: profile.elo_rapid, icon: '10+0' },
{ label: 'كلاسيكي', value: profile.elo_classical, icon: '60+0' },
].map((rating, i) => (
return (
<PageTransition>
<motion.div
className="flex flex-col gap-5 py-6"
variants={stagger}
initial="hidden"
animate="show"
>
<motion.div className="flex flex-col items-center gap-3" variants={item}>
<div className="relative">
<motion.div
key={rating.label}
className="p-4 rounded-xl bg-surface-1 border border-border/80 flex items-center gap-3"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 + i * 0.05 }}
className="w-[88px] h-[88px] rounded-full bg-gradient-to-br from-[#FFC83D]/30 to-[#B44DFF]/20 border-3 border-[#FFC83D] flex items-center justify-center shadow-lg shadow-[#FFC83D]/20"
initial={{ scale: 0, rotate: -20 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: 'spring', stiffness: 300, damping: 18 }}
>
<div className="w-10 h-10 rounded-lg bg-surface-3 flex items-center justify-center">
<span className="text-[11px] font-bold text-text-muted">{rating.icon}</span>
</div>
<div>
<p className="text-lg font-bold">{rating.value}</p>
<p className="text-[11px] text-text-muted">{rating.label}</p>
</div>
<span className="text-4xl font-black text-[#FFC83D]">
{profile.display_name?.charAt(0) || '?'}
</span>
</motion.div>
))}
</div>
</div>
<SectionDivider />
<div>
<h2 className="text-sm font-bold text-text-secondary mb-3">الاحصائيات</h2>
<div className="grid grid-cols-4 gap-2.5">
<StatMini icon={<Flame size={16} className="text-coral" />} value={profile.best_win_streak} label="افضل سلسلة" />
<StatMini icon={<Trophy size={16} className="text-gold" />} value={profile.total_wins} label="انتصارات" />
<StatMini icon={<Target size={16} className="text-cyan" />} value={`${winRate}%`} label="نسبة الفوز" />
<StatMini icon={<TrendingUp size={16} className="text-purple" />} value={profile.total_games_played} label="مباريات" />
</div>
</div>
<SectionDivider />
<div>
<h2 className="text-sm font-bold text-text-secondary mb-3">الانجازات</h2>
<div className="grid grid-cols-3 gap-3">
{[
{ label: 'المحارب' },
{ label: 'البطل' },
{ label: 'الاسطورة' },
].map((badge, i) => (
<motion.div
key={badge.label}
className="flex flex-col items-center gap-2.5 p-4 rounded-xl bg-surface-1 border border-border/60 opacity-50"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 0.5, scale: 1 }}
transition={{ delay: 0.2 + i * 0.08 }}
className="absolute -bottom-1 -right-1 w-7 h-7 rounded-full bg-gradient-to-b from-[#FFC83D] to-[#E0A800] border-3 border-background flex items-center justify-center"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 500, damping: 20, delay: 0.2 }}
>
<div className="w-12 h-12 rounded-full bg-surface-3/80 border border-border flex items-center justify-center">
<Lock size={16} className="text-text-muted/60" />
</div>
<span className="text-[11px] font-semibold text-text-muted">{badge.label}</span>
<span className="text-[9px] text-gold/50 font-medium">قريبا</span>
<span className="text-[10px] font-black text-background">{profile.level}</span>
</motion.div>
))}
</div>
</div>
<SectionDivider />
<div>
<h2 className="text-sm font-bold text-text-secondary mb-3">اخر المباريات</h2>
{gamesLoading ? (
<div className="flex items-center justify-center py-8">
<div className="w-6 h-6 border-2 border-gold/30 border-t-gold rounded-full animate-spin" />
</div>
) : games.length === 0 ? (
<div className="flex flex-col items-center py-8 gap-2 rounded-2xl bg-surface-1 border border-border">
<Clock size={24} className="text-text-muted/40" />
<p className="text-sm text-text-muted">لا توجد مباريات بعد</p>
<div className="text-center">
<h1 className="text-xl font-black">{profile.display_name}</h1>
<p className="text-sm text-text-muted font-bold">@{profile.username}</p>
{profile.bio && (
<p className="text-xs text-text-secondary mt-1 max-w-[220px] mx-auto line-clamp-2">{profile.bio}</p>
)}
</div>
) : (
<div className="flex flex-col gap-2">
{games.map((game, i) => (
</motion.div>
<motion.div variants={item}>
<Card variant="gold" className="!p-4">
<div className="flex items-center justify-between mb-2">
<span className="text-lg font-black">المستوى {profile.level}</span>
<span className="text-sm font-black text-[#FFC83D] px-3 py-1 rounded-full bg-[#FFC83D]/15 border-2 border-[#FFC83D]/30">
{profile.xp} XP
</span>
</div>
<div className="w-full h-4 rounded-full bg-surface-3 border-2 border-border overflow-hidden">
<motion.div
className="h-full rounded-full bg-gradient-to-l from-[#FFC83D] to-[#FFE082]"
initial={{ width: 0 }}
animate={{ width: `${xpPercent}%` }}
transition={{ duration: 1.2, ease: 'easeOut', delay: 0.3 }}
/>
</div>
<p className="text-xs text-text-muted font-bold mt-2">{xpRemaining} XP للمستوى التالي</p>
</Card>
</motion.div>
<motion.div variants={item}>
<div className="grid grid-cols-2 gap-3">
{ratings.map((rating, i) => (
<motion.div
key={game.id}
className="flex items-center justify-between p-3.5 rounded-xl bg-surface-1 border border-border/80"
initial={{ opacity: 0, x: 10 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.05 * i }}
key={rating.label}
className={`p-4 rounded-2xl bg-surface-1 border-3 border-border border-t-4 ${rating.color} flex flex-col items-center gap-1`}
initial={{ opacity: 0, y: 14 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', stiffness: 400, damping: 22, delay: 0.15 + i * 0.06 }}
>
<div className="flex items-center gap-3">
<ResultBadge result={game.result} />
<div>
<p className="text-sm font-semibold">{game.opponent}</p>
<p className="text-[10px] text-text-muted">{game.timeControl} &middot; {formatRelativeTime(game.completedAt)}</p>
</div>
</div>
<RatingBadge change={game.ratingChange} />
<span className="text-2xl font-black">{rating.value}</span>
<span className="text-xs font-bold text-text-muted">{rating.label}</span>
</motion.div>
))}
</div>
)}
</div>
</motion.div>
<motion.div variants={item}>
<div className="grid grid-cols-4 gap-2">
<StatBox icon={<TrendingUp size={18} className="text-[#B44DFF]" />} value={profile.total_games_played} label="مباريات" />
<StatBox icon={<Trophy size={18} className="text-[#FFC83D]" />} value={profile.total_wins} label="انتصارات" />
<StatBox icon={<Target size={18} className="text-[#00E5CC]" />} value={`${winRate}%`} label="نسبة الفوز" />
<StatBox icon={<Flame size={18} className="text-[#FF5252]" />} value={profile.best_win_streak} label="افضل سلسلة" />
</div>
</motion.div>
<motion.div className="flex flex-col items-center gap-3 mt-2" variants={item}>
<Button variant="ghost" onClick={openEdit} className="w-[80%]">
<Pencil size={16} />
تعديل الملف الشخصي
</Button>
<motion.button
className="text-sm font-bold text-[#FF5252]/70 flex items-center gap-1.5 py-2"
whileTap={{ scale: 0.9 }}
onClick={handleLogout}
>
<LogOut size={14} />
تسجيل الخروج
</motion.button>
</motion.div>
</motion.div>
<AnimatePresence>
{editOpen && (
......@@ -245,25 +193,25 @@ export function ProfilePage() {
exit={{ opacity: 0 }}
>
<motion.div
className="absolute inset-0 bg-background/80 backdrop-blur-sm"
className="absolute inset-0 bg-background/85 backdrop-blur-sm"
onClick={() => setEditOpen(false)}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
<motion.div
className="relative w-full max-w-[340px] rounded-2xl bg-surface-1 border border-border p-6 flex flex-col gap-5"
initial={{ scale: 0.9, opacity: 0, y: 20 }}
className="relative w-full max-w-[360px] rounded-2xl bg-surface-1 border-3 border-border p-6 flex flex-col gap-5"
initial={{ scale: 0.85, opacity: 0, y: 30 }}
animate={{ scale: 1, opacity: 1, y: 0 }}
exit={{ scale: 0.9, opacity: 0, y: 20 }}
transition={{ type: 'spring', stiffness: 400, damping: 25 }}
exit={{ scale: 0.85, opacity: 0, y: 30 }}
transition={{ type: 'spring', stiffness: 400, damping: 22 }}
>
<div className="flex items-center justify-between">
<h2 className="text-lg font-bold">تعديل الملف الشخصي</h2>
<h2 className="text-lg font-black">تعديل الملف الشخصي</h2>
<motion.button
whileTap={{ scale: 0.9 }}
whileTap={{ scale: 0.85 }}
onClick={() => setEditOpen(false)}
className="p-2 rounded-lg bg-surface-3"
className="p-2 rounded-xl bg-surface-3 border-2 border-border"
>
<X size={16} className="text-text-muted" />
</motion.button>
......@@ -271,35 +219,24 @@ export function ProfilePage() {
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-1.5">
<label className="text-xs font-semibold text-text-secondary">الاسم</label>
<label className="text-xs font-black text-text-secondary">الاسم</label>
<input
type="text"
value={editForm.display_name}
onChange={(e) => setEditForm({ ...editForm, display_name: e.target.value })}
className="px-4 py-3 rounded-xl bg-surface-3 border-2 border-transparent focus:border-gold/60 text-sm outline-none transition-colors"
className="px-4 py-3 rounded-xl bg-surface-3 border-3 border-border focus:border-[#FFC83D]/60 text-sm font-bold outline-none transition-colors"
maxLength={30}
dir="rtl"
/>
</div>
<div className="flex flex-col gap-1.5">
<label className="text-xs font-semibold text-text-secondary">نبذة</label>
<label className="text-xs font-black text-text-secondary">نبذة</label>
<textarea
value={editForm.bio}
onChange={(e) => setEditForm({ ...editForm, bio: e.target.value })}
className="px-4 py-3 rounded-xl bg-surface-3 border-2 border-transparent focus:border-gold/60 text-sm outline-none transition-colors resize-none h-20"
className="px-4 py-3 rounded-xl bg-surface-3 border-3 border-border focus:border-[#FFC83D]/60 text-sm font-bold outline-none transition-colors resize-none h-20"
maxLength={150}
/>
</div>
<div className="flex flex-col gap-1.5">
<label className="text-xs font-semibold text-text-secondary">رمز الدولة</label>
<input
type="text"
value={editForm.country_code}
onChange={(e) => setEditForm({ ...editForm, country_code: e.target.value })}
placeholder="EG"
className="px-4 py-3 rounded-xl bg-surface-3 border-2 border-transparent focus:border-gold/60 text-sm outline-none transition-colors"
maxLength={2}
dir="rtl"
/>
</div>
</div>
......@@ -308,6 +245,7 @@ export function ProfilePage() {
onClick={handleSave}
loading={saving}
disabled={!editForm.display_name.trim()}
className="w-[80%] mx-auto"
>
حفظ التعديلات
</Button>
......@@ -319,54 +257,12 @@ export function ProfilePage() {
)
}
function ResultBadge({ result }: { result: 'win' | 'loss' | 'draw' }) {
const config = {
win: { icon: <Trophy size={14} />, bg: 'bg-cyan/15 text-cyan', label: 'فوز' },
loss: { icon: <X size={14} />, bg: 'bg-coral/15 text-coral', label: 'خسارة' },
draw: { icon: <Minus size={14} />, bg: 'bg-text-muted/15 text-text-muted', label: 'تعادل' },
}
const c = config[result]
return (
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${c.bg}`}>
{c.icon}
</div>
)
}
function RatingBadge({ change }: { change: number }) {
if (change === 0) return <span className="text-xs text-text-muted font-medium">+0</span>
if (change > 0) {
return (
<span className="flex items-center gap-0.5 text-xs font-bold text-cyan">
<ArrowUpRight size={12} />+{change}
</span>
)
}
return (
<span className="flex items-center gap-0.5 text-xs font-bold text-coral">
<ArrowDownRight size={12} />{change}
</span>
)
}
function formatRelativeTime(dateStr: string) {
const now = Date.now()
const then = new Date(dateStr).getTime()
const diff = Math.floor((now - then) / 1000)
if (diff < 60) return 'الان'
if (diff < 3600) return `${Math.floor(diff / 60)} د`
if (diff < 86400) return `${Math.floor(diff / 3600)} س`
if (diff < 604800) return `${Math.floor(diff / 86400)} ي`
return `${Math.floor(diff / 604800)} أ`
}
function StatMini({ icon, value, label }: { icon: React.ReactNode; value: number | string; label: string }) {
function StatBox({ icon, value, label }: { icon: React.ReactNode; value: number | string; label: string }) {
return (
<div className="flex flex-col items-center gap-1.5 p-3 rounded-xl bg-surface-1 border border-border/80">
<div className="flex flex-col items-center gap-1.5 p-3 rounded-2xl bg-surface-1 border-3 border-border">
{icon}
<span className="text-base font-bold">{value}</span>
<span className="text-[9px] text-text-muted text-center leading-tight font-medium">{label}</span>
<span className="text-base font-black">{value}</span>
<span className="text-[9px] text-text-muted text-center leading-tight font-bold">{label}</span>
</div>
)
}
src/pages/RegisterPage.tsx
View file @ 6a8bf93c
......@@ -50,27 +50,41 @@ export function RegisterPage() {
}
return (
<div className="min-h-dvh flex flex-col items-center justify-center px-7 relative overflow-hidden">
<div className="min-h-dvh flex items-center justify-center relative overflow-hidden bg-background">
<motion.div
className="absolute inset-0 opacity-30"
className="absolute inset-0"
style={{
background: 'radial-gradient(ellipse at 50% 30%, rgba(212,168,67,0.15) 0%, transparent 60%)',
background: 'radial-gradient(ellipse at 50% 30%, rgba(255,200,61,0.12) 0%, transparent 60%)',
}}
animate={{
background: [
'radial-gradient(ellipse at 50% 30%, rgba(255,200,61,0.12) 0%, transparent 60%)',
'radial-gradient(ellipse at 50% 30%, rgba(255,200,61,0.05) 0%, transparent 60%)',
'radial-gradient(ellipse at 50% 30%, rgba(255,200,61,0.12) 0%, transparent 60%)',
],
}}
transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
/>
<motion.div
className="relative w-full max-w-[310px]"
initial={{ opacity: 0, y: 30 }}
className="relative w-full max-w-[380px] px-5"
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', stiffness: 300, damping: 25 }}
transition={{ type: 'spring', stiffness: 400, damping: 22 }}
>
<div className="flex flex-col items-center mb-6">
<GoldCrown size={56} />
<h1 className="mt-3 text-2xl font-black text-gold">حساب جديد</h1>
<p className="mt-1 text-sm text-text-secondary">انضم الى مجتمع EL3AB</p>
<GoldCrown size={72} />
<h1 className="mt-4 text-4xl font-black text-gold">EL3AB</h1>
<p className="mt-2 text-lg font-bold text-text-secondary">حساب جديد</p>
</div>
<form onSubmit={handleRegister} className="flex flex-col gap-3.5 p-7 rounded-2xl bg-surface-3 border-2 border-gold/30 shadow-[0_8px_40px_rgba(0,0,0,0.6),0_0_20px_rgba(212,168,67,0.08)]">
<motion.form
onSubmit={handleRegister}
className="flex flex-col gap-4 p-6 rounded-2xl bg-surface-2 border-3 border-border shadow-xl"
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ type: 'spring', stiffness: 450, damping: 25, delay: 0.1 }}
>
<Input
label="اسم المستخدم"
value={username}
......@@ -100,25 +114,26 @@ export function RegisterPage() {
{error && (
<motion.p
className="text-sm text-coral text-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="text-sm font-bold text-coral text-center"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ type: 'spring', stiffness: 500, damping: 20 }}
>
{error}
</motion.p>
)}
<Button type="submit" loading={loading} className="w-[85%] mx-auto mt-2">
<Button type="submit" variant="gold" size="lg" loading={loading} className="w-[80%] mx-auto mt-2">
انشاء حساب
</Button>
</form>
</motion.form>
<motion.button
onClick={() => navigate('/login')}
className="mt-4 w-full text-center text-sm text-text-secondary hover:text-gold transition-colors"
whileTap={{ scale: 0.98 }}
className="mt-5 w-full text-center text-sm font-bold text-text-secondary hover:text-gold transition-colors"
whileTap={{ scale: 0.96 }}
>
لديك حساب بالفعل؟ <span className="text-gold font-semibold">سجل دخول</span>
لديك حساب بالفعل؟ <span className="text-gold font-black">سجل دخول</span>
</motion.button>
</motion.div>
</div>
......
src/pages/SettingsPage.tsx
View file @ 6a8bf93c
......@@ -16,64 +16,63 @@ export function SettingsPage() {
}
return (
<PageTransition className="px-7 py-7 flex flex-col gap-5">
<h1 className="text-xl font-bold">الاعدادات</h1>
<PageTransition>
<h1 className="text-2xl font-black">الاعدادات</h1>
<Card className="flex items-center justify-between">
<div className="flex items-center gap-3">
{soundEnabled ? <Volume2 size={18} className="text-cyan" /> : <VolumeX size={18} className="text-text-muted" />}
<span className="text-sm font-semibold">الاصوات</span>
</div>
<motion.button
className={`w-12 h-6 rounded-full p-0.5 ${soundEnabled ? 'bg-cyan' : 'bg-surface-3'}`}
onClick={() => setSoundEnabled(!soundEnabled)}
whileTap={{ scale: 0.9 }}
>
<motion.div
className="w-5 h-5 rounded-full bg-white"
animate={{ x: soundEnabled ? 0 : 24 }}
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
/>
</motion.button>
</Card>
<div className="flex flex-col gap-4">
<Card className="flex items-center justify-between">
<div className="flex items-center gap-3">
{soundEnabled ? <Volume2 size={20} className="text-cyan" /> : <VolumeX size={20} className="text-text-muted" />}
<span className="text-sm font-bold">الاصوات</span>
</div>
<motion.button
className={`w-14 h-7 rounded-full p-1 border-2 ${soundEnabled ? 'bg-cyan/20 border-cyan' : 'bg-surface-3 border-border'}`}
onClick={() => setSoundEnabled(!soundEnabled)}
whileTap={{ scale: 0.9 }}
>
<motion.div
className={`w-5 h-5 rounded-full ${soundEnabled ? 'bg-cyan' : 'bg-text-muted'}`}
animate={{ x: soundEnabled ? 0 : 28 }}
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
/>
</motion.button>
</Card>
<Card className="flex items-center gap-3">
<Info size={18} className="text-text-muted" />
<div>
<p className="text-sm font-semibold">EL3AB Player</p>
<p className="text-xs text-text-muted">الاصدار 1.0.0</p>
</div>
</Card>
<Card className="flex items-center gap-3">
<Info size={20} className="text-gold" />
<div>
<p className="text-sm font-bold">EL3AB Player</p>
<p className="text-xs text-text-muted font-semibold">الاصدار 1.0.0</p>
</div>
</Card>
<Card className="flex items-center gap-3">
<Bug size={18} className="text-text-muted" />
<div>
<p className="text-sm font-semibold">الابلاغ عن مشكلة</p>
<p className="text-xs text-text-muted">ساعدنا نحسن التطبيق</p>
</div>
</Card>
<Card className="flex items-center gap-3">
<Bug size={20} className="text-purple" />
<div>
<p className="text-sm font-bold">الابلاغ عن مشكلة</p>
<p className="text-xs text-text-muted font-semibold">ساعدنا في تحسين التطبيق</p>
</div>
</Card>
</div>
<div className="pt-4">
<div className="flex flex-col gap-3 mt-4">
<motion.button
whileTap={{ scale: 0.95 }}
onClick={handleLogout}
className="w-full flex items-center justify-center gap-2.5 px-5 py-3.5 rounded-xl bg-coral/10 border border-coral/20 text-coral text-sm font-bold"
className="flex items-center justify-center gap-2 w-[80%] mx-auto px-6 py-3 rounded-2xl bg-coral/10 border-2 border-coral/30 text-coral font-bold text-sm"
>
<LogOut size={16} />
<span>تسجيل الخروج</span>
</motion.button>
</div>
<div className="pt-2">
<h3 className="text-xs font-bold text-text-muted mb-3">منطقة الخطر</h3>
<button
<motion.button
disabled
className="w-full flex items-center justify-center gap-2.5 px-5 py-3.5 rounded-xl bg-surface-2 border border-border text-text-muted text-sm font-semibold opacity-50 cursor-not-allowed"
className="flex items-center justify-center gap-2 w-[80%] mx-auto px-6 py-3 rounded-2xl bg-surface-2 border-2 border-border text-text-muted font-bold text-sm opacity-50 cursor-not-allowed"
>
<Trash2 size={16} />
<span>حذف الحساب</span>
<span className="text-[10px] mr-1 px-2 py-0.5 rounded-full bg-surface-3 text-text-muted">قريبا</span>
</button>
<span className="text-[10px] bg-surface-3 px-2 py-0.5 rounded-full">قريبا</span>
</motion.button>
</div>
</PageTransition>
)
......
src/pages/ShopPage.tsx
View file @ 6a8bf93c
......@@ -57,20 +57,20 @@ export function ShopPage() {
}
return (
<PageTransition className="px-7 py-7 flex flex-col gap-5">
<PageTransition className="flex flex-col gap-5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<ShoppingBag size={22} className="text-gold" />
<h1 className="text-xl font-bold">المتجر</h1>
<div className="flex items-center gap-2.5">
<ShoppingBag size={24} className="text-[#FFC83D]" />
<h1 className="text-2xl font-black">المتجر</h1>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-1.5 bg-surface-2 border border-border rounded-xl px-3 py-1.5">
<Coins size={14} className="text-gold" />
<span className="text-sm font-bold text-gold">{profile?.coins || 0}</span>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5 border-3 border-[#FFC83D]/50 rounded-full px-3 py-1.5 bg-[#FFC83D]/10">
<Coins size={14} className="text-[#FFC83D]" />
<span className="text-sm font-black text-[#FFC83D]">{profile?.coins || 0}</span>
</div>
<div className="flex items-center gap-1.5 bg-surface-2 border border-border rounded-xl px-3 py-1.5">
<Gem size={14} className="text-purple" />
<span className="text-sm font-bold text-purple">{profile?.gems || 0}</span>
<div className="flex items-center gap-1.5 border-3 border-[#B44DFF]/50 rounded-full px-3 py-1.5 bg-[#B44DFF]/10">
<Gem size={14} className="text-[#B44DFF]" />
<span className="text-sm font-black text-[#B44DFF]">{profile?.gems || 0}</span>
</div>
</div>
</div>
......@@ -80,12 +80,13 @@ export function ShopPage() {
<motion.button
key={opt.key}
onClick={() => setFilter(opt.key)}
className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-colors ${
className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap border-2 transition-colors ${
filter === opt.key
? 'bg-gold/15 border border-gold/40 text-gold'
: 'bg-surface-2 border border-border text-text-muted'
? 'bg-[#FF8C42] border-[#FF8C42] text-white'
: 'bg-surface-2 border-border text-text-muted hover:border-[#FF8C42]/40'
}`}
whileTap={{ scale: 0.95 }}
whileTap={{ scale: 0.93 }}
transition={{ type: 'spring', stiffness: 500, damping: 20 }}
>
{opt.label}
</motion.button>
......@@ -95,25 +96,25 @@ export function ShopPage() {
{loading ? (
<div className="flex-1 flex items-center justify-center py-20">
<motion.div
className="w-8 h-8 border-2 border-gold/30 border-t-gold rounded-full"
className="w-10 h-10 border-3 border-[#FFC83D]/30 border-t-[#FFC83D] rounded-full"
animate={{ rotate: 360 }}
transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
transition={{ duration: 0.8, repeat: Infinity, ease: 'linear' }}
/>
</div>
) : items.length === 0 ? (
<div className="flex-1 flex flex-col items-center justify-center py-16 gap-4">
<motion.div
className="w-16 h-16 rounded-full bg-surface-2 border border-border flex items-center justify-center"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
className="w-20 h-20 rounded-2xl bg-surface-2 border-3 border-border flex items-center justify-center"
initial={{ scale: 0, rotate: -10 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: 'spring', stiffness: 300, damping: 18 }}
>
<ShoppingBag size={24} className="text-text-muted" />
<ShoppingBag size={32} className="text-text-muted" />
</motion.div>
<p className="text-text-muted text-sm">لا توجد عناصر متاحة</p>
<p className="text-text-muted text-sm font-bold">لا توجد عناصر متاحة</p>
</div>
) : (
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-2 gap-4">
{items.map((item, index) => {
const isOwned = ownedIds.includes(item.id)
const isEquipped = equippedIds.includes(item.id)
......@@ -124,25 +125,35 @@ export function ShopPage() {
<motion.button
key={item.id}
onClick={() => setSelectedItem(item)}
className="relative flex flex-col items-center gap-2 p-4 rounded-2xl bg-surface-1 border overflow-hidden text-center"
style={{ borderColor: `${rarityColor}40` }}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.05 }}
whileTap={{ scale: 0.96 }}
className={`relative flex flex-col items-center gap-2 p-4 rounded-2xl bg-surface-1 border-3 overflow-hidden text-center ${isLegendary ? 'animate-pulse-glow' : ''}`}
style={{ borderColor: rarityColor }}
initial={{ opacity: 0, y: 16, scale: 0.9 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: 'spring', stiffness: 400, damping: 22, delay: index * 0.06 }}
whileHover={{ y: -6, scale: 1.03, boxShadow: `0 12px 30px ${rarityColor}30` }}
whileTap={{ scale: 0.95 }}
>
{isLegendary && (
<motion.div
className="absolute inset-0 rounded-2xl"
style={{ boxShadow: `inset 0 0 20px ${rarityColor}20, 0 0 15px ${rarityColor}15` }}
animate={{ opacity: [0.5, 1, 0.5] }}
className="absolute inset-0 rounded-2xl pointer-events-none"
style={{ boxShadow: `inset 0 0 24px ${rarityColor}25, 0 0 20px ${rarityColor}20` }}
animate={{ opacity: [0.4, 1, 0.4] }}
transition={{ duration: 2, repeat: Infinity }}
/>
)}
{isOwned && (
<div className="absolute top-2 left-2 z-10 flex items-center gap-1 bg-green-500/20 border-2 border-green-500/50 rounded-lg px-2 py-0.5">
<Check size={10} className="text-green-400" />
<span className="text-[9px] font-black text-green-400">
{isEquipped ? 'مفعّل' : 'مملوك'}
</span>
</div>
)}
<div
className="w-full aspect-square rounded-xl bg-surface-2 flex items-center justify-center relative"
style={{ borderColor: `${rarityColor}30` }}
className="w-full aspect-square rounded-xl bg-surface-2 border-2 flex items-center justify-center"
style={{ borderColor: `${rarityColor}40` }}
>
{item.preview_url ? (
<img
......@@ -152,40 +163,33 @@ export function ShopPage() {
/>
) : (
<div
className="w-12 h-12 rounded-xl"
style={{ background: `linear-gradient(135deg, ${rarityColor}40, ${rarityColor}10)` }}
className="w-14 h-14 rounded-full"
style={{ background: `radial-gradient(circle, ${rarityColor}60, ${rarityColor}15)` }}
/>
)}
</div>
<div className="flex items-center gap-1.5">
<div
className="w-2 h-2 rounded-full"
style={{ backgroundColor: rarityColor }}
className="w-2.5 h-2.5 rounded-full border-2"
style={{ backgroundColor: rarityColor, borderColor: `${rarityColor}80` }}
/>
<span className="text-xs font-bold text-text-primary truncate max-w-[90px]">
<span className="text-xs font-black text-text-primary truncate max-w-[90px]">
{item.name_ar}
</span>
</div>
{isOwned ? (
<div className="flex items-center gap-1 bg-green-500/10 border border-green-500/30 rounded-lg px-2 py-0.5">
<Check size={10} className="text-green-400" />
<span className="text-[10px] font-bold text-green-400">
{isEquipped ? 'مفعّل' : 'مملوك'}
</span>
</div>
) : (
<div className="flex items-center gap-1">
{!isOwned && (
<div className="flex items-center gap-1.5 bg-surface-2 border-2 border-border rounded-lg px-2.5 py-1">
{item.price_gems ? (
<>
<Gem size={12} className="text-purple" />
<span className="text-xs font-bold text-purple">{item.price_gems}</span>
<Gem size={12} className="text-[#B44DFF]" />
<span className="text-xs font-black text-[#B44DFF]">{item.price_gems}</span>
</>
) : (
<>
<Coins size={12} className="text-gold" />
<span className="text-xs font-bold text-gold">{item.price_coins}</span>
<Coins size={12} className="text-[#FFC83D]" />
<span className="text-xs font-black text-[#FFC83D]">{item.price_coins}</span>
</>
)}
</div>
......@@ -206,16 +210,16 @@ export function ShopPage() {
onClick={() => !purchasing && setSelectedItem(null)}
>
<motion.div
className="w-full max-w-[320px] rounded-3xl bg-surface-1 border border-border p-6 flex flex-col items-center gap-4 relative overflow-hidden"
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.8, opacity: 0 }}
transition={{ type: 'spring', stiffness: 300, damping: 25 }}
className="w-full max-w-[340px] rounded-3xl bg-surface-1 border-3 border-border p-6 flex flex-col items-center gap-4 relative overflow-hidden"
initial={{ scale: 0.7, opacity: 0, rotate: -3 }}
animate={{ scale: 1, opacity: 1, rotate: 0 }}
exit={{ scale: 0.7, opacity: 0, rotate: 3 }}
transition={{ type: 'spring', stiffness: 350, damping: 22 }}
onClick={(e) => e.stopPropagation()}
>
<button
onClick={() => !purchasing && setSelectedItem(null)}
className="absolute top-4 left-4 w-8 h-8 rounded-full bg-surface-2 border border-border flex items-center justify-center"
className="absolute top-4 left-4 w-9 h-9 rounded-full bg-surface-2 border-2 border-border flex items-center justify-center hover:border-coral"
>
<X size={16} className="text-text-muted" />
</button>
......@@ -225,33 +229,22 @@ export function ShopPage() {
className="flex flex-col items-center gap-4 py-8"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
transition={{ type: 'spring', stiffness: 300, damping: 18 }}
>
<motion.div
className="w-16 h-16 rounded-full bg-green-500/10 border-2 border-green-500/40 flex items-center justify-center"
animate={{ scale: [1, 1.1, 1] }}
className="w-20 h-20 rounded-full bg-green-500/10 border-3 border-green-500/50 flex items-center justify-center"
animate={{ scale: [1, 1.15, 1] }}
transition={{ duration: 0.5 }}
>
<Check size={32} className="text-green-400" />
</motion.div>
<p className="text-lg font-bold text-green-400">تم الشراء بنجاح</p>
<motion.div
className="flex items-center gap-2"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
>
<Coins size={16} className="text-gold" />
<span className="text-sm text-text-muted">
-{selectedItem.price_gems || selectedItem.price_coins}
</span>
<Check size={36} className="text-green-400" />
</motion.div>
<p className="text-xl font-black text-green-400">تم الشراء بنجاح</p>
</motion.div>
) : (
<>
<div
className="w-full aspect-[4/3] rounded-2xl bg-surface-2 flex items-center justify-center mt-4"
style={{ borderColor: `${RARITY_COLORS[selectedItem.rarity]}30` }}
className="w-full aspect-[4/3] rounded-2xl bg-surface-2 border-2 flex items-center justify-center mt-6"
style={{ borderColor: `${RARITY_COLORS[selectedItem.rarity]}40` }}
>
{selectedItem.preview_url ? (
<img
......@@ -261,16 +254,16 @@ export function ShopPage() {
/>
) : (
<div
className="w-20 h-20 rounded-2xl"
className="w-24 h-24 rounded-full"
style={{
background: `linear-gradient(135deg, ${RARITY_COLORS[selectedItem.rarity]}40, ${RARITY_COLORS[selectedItem.rarity]}10)`,
background: `radial-gradient(circle, ${RARITY_COLORS[selectedItem.rarity]}60, ${RARITY_COLORS[selectedItem.rarity]}15)`,
}}
/>
)}
</div>
<div className="text-center">
<h3 className="text-lg font-black text-text-primary">{selectedItem.name_ar}</h3>
<h3 className="text-xl font-black text-text-primary">{selectedItem.name_ar}</h3>
{selectedItem.description && (
<p className="text-xs text-text-muted mt-1">{selectedItem.description}</p>
)}
......@@ -278,26 +271,26 @@ export function ShopPage() {
<div className="flex items-center gap-2">
<div
className="w-2.5 h-2.5 rounded-full"
style={{ backgroundColor: RARITY_COLORS[selectedItem.rarity] }}
className="w-3 h-3 rounded-full border-2"
style={{ backgroundColor: RARITY_COLORS[selectedItem.rarity], borderColor: `${RARITY_COLORS[selectedItem.rarity]}80` }}
/>
<span
className="text-xs font-bold"
className="text-sm font-black"
style={{ color: RARITY_COLORS[selectedItem.rarity] }}
>
{RARITY_LABELS[selectedItem.rarity]}
</span>
{selectedItem.rarity === 'legendary' && (
<Sparkles size={12} style={{ color: RARITY_COLORS.legendary }} />
<Sparkles size={14} style={{ color: RARITY_COLORS.legendary }} />
)}
</div>
{ownedIds.includes(selectedItem.id) ? (
<div className="flex flex-col gap-3 w-full">
<div className="flex flex-col gap-3 w-[70%] mx-auto">
{equippedIds.includes(selectedItem.id) ? (
<div className="flex items-center justify-center gap-2 py-3 rounded-xl bg-green-500/10 border border-green-500/30">
<div className="flex items-center justify-center gap-2 py-3 rounded-xl bg-green-500/10 border-3 border-green-500/40">
<Check size={16} className="text-green-400" />
<span className="text-sm font-bold text-green-400">مفعّل حاليا</span>
<span className="text-sm font-black text-green-400">مفعّل حاليا</span>
</div>
) : (
<Button
......@@ -312,17 +305,17 @@ export function ShopPage() {
)}
</div>
) : (
<div className="flex flex-col gap-3 w-full">
<div className="flex items-center justify-center gap-2 bg-surface-2 rounded-xl px-4 py-3 border border-border">
<div className="flex flex-col gap-3 w-[70%] mx-auto">
<div className="flex items-center justify-center gap-2 bg-surface-2 rounded-xl px-4 py-3 border-2 border-border">
{selectedItem.price_gems ? (
<>
<Gem size={18} className="text-purple" />
<span className="text-lg font-black text-purple">{selectedItem.price_gems}</span>
<Gem size={18} className="text-[#B44DFF]" />
<span className="text-lg font-black text-[#B44DFF]">{selectedItem.price_gems}</span>
</>
) : (
<>
<Coins size={18} className="text-gold" />
<span className="text-lg font-black text-gold">{selectedItem.price_coins}</span>
<Coins size={18} className="text-[#FFC83D]" />
<span className="text-lg font-black text-[#FFC83D]">{selectedItem.price_coins}</span>
</>
)}
</div>
......@@ -343,7 +336,7 @@ export function ShopPage() {
{(selectedItem.price_gems
? (profile?.gems || 0) < (selectedItem.price_gems || 0)
: (profile?.coins || 0) < (selectedItem.price_coins || 0)) && (
<p className="text-[10px] text-coral text-center">رصيد غير كافي</p>
<p className="text-[11px] text-[#FF5252] text-center font-bold">رصيد غير كافي</p>
)}
</div>
)}
......
src/pages/SplashPage.tsx
View file @ 6a8bf93c
......@@ -57,7 +57,7 @@ export function SplashPage() {
</motion.div>
<motion.h1
className="mt-6 text-4xl font-black text-gold tracking-wider"
className="mt-6 text-5xl font-black text-gold tracking-wider"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6, duration: 0.5 }}
......
src/pages/TournamentsPage.tsx
View file @ 6a8bf93c
import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Trophy, Users, Calendar, Clock, Coins, Gem } from 'lucide-react'
import { Trophy, Users, Clock, Coins, Gem } from 'lucide-react'
import { PageTransition } from '../components/layout/PageTransition'
import { Card } from '../components/ui/Card'
import { Button } from '../components/ui/Button'
import { useAuthStore } from '../stores/authStore'
import { useTournaments } from '../hooks/useTournaments'
......@@ -32,39 +33,18 @@ const TIME_CONTROL_LABELS: Record<string, string> = {
classical: 'كلاسيكي',
}
function formatRelativeTime(dateStr: string): string {
const date = new Date(dateStr)
const now = new Date()
const diff = date.getTime() - now.getTime()
const absDiff = Math.abs(diff)
const minutes = Math.floor(absDiff / 60000)
const hours = Math.floor(minutes / 60)
const days = Math.floor(hours / 24)
if (diff > 0) {
if (days > 0) return `بعد ${days} يوم`
if (hours > 0) return `بعد ${hours} ساعة`
return `بعد ${minutes} دقيقة`
} else {
if (days > 0) return `منذ ${days} يوم`
if (hours > 0) return `منذ ${hours} ساعة`
return `منذ ${minutes} دقيقة`
}
}
function StatusBadge({ status }: { status: string }) {
const config: Record<string, { label: string; classes: string }> = {
registration: { label: 'مفتوحة', classes: 'bg-cyan/10 text-cyan border-cyan/30' },
in_progress: { label: 'جارية', classes: 'bg-gold/10 text-gold border-gold/30 animate-pulse' },
registration: { label: 'مفتوحة', classes: 'bg-[#00E5CC]/15 text-[#00E5CC] border-[#00E5CC]/50' },
in_progress: { label: 'جارية', classes: 'bg-[#FFC83D]/15 text-[#FFC83D] border-[#FFC83D]/50 animate-pulse' },
completed: { label: 'منتهية', classes: 'bg-surface-3 text-text-muted border-border' },
cancelled: { label: 'ملغاة', classes: 'bg-coral/10 text-coral border-coral/30' },
cancelled: { label: 'ملغاة', classes: 'bg-[#FF5252]/15 text-[#FF5252] border-[#FF5252]/50' },
}
const c = config[status] ?? config.completed
return (
<span className={`px-2 py-0.5 rounded-full text-[10px] font-bold border ${c.classes}`}>
<span className={`px-3 py-1 rounded-full text-[10px] font-black border-2 ${c.classes}`}>
{c.label}
</span>
)
......@@ -74,14 +54,16 @@ export function TournamentsPage() {
const [activeFilter, setActiveFilter] = useState<StatusFilter>(null)
const { tournaments, myRegistrations, loading, register, unregister } = useTournaments(activeFilter)
const { user } = useAuthStore()
const [expandedId, setExpandedId] = useState<string | null>(null)
const isRegistered = (tournamentId: string) =>
myRegistrations.some((r) => r.tournament_id === tournamentId)
return (
<PageTransition className="px-7 py-7 flex flex-col gap-5">
<h1 className="text-xl font-bold">البطولات</h1>
<PageTransition className="flex flex-col gap-5">
<div className="flex items-center gap-2.5">
<Trophy size={24} className="text-[#FFC83D]" />
<h1 className="text-2xl font-black">البطولات</h1>
</div>
<div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
{FILTERS.map((f) => (
......@@ -89,11 +71,12 @@ export function TournamentsPage() {
key={f.label}
whileTap={{ scale: 0.93 }}
onClick={() => setActiveFilter(f.value)}
className={`px-4 py-1.5 rounded-full text-xs font-bold whitespace-nowrap transition-colors ${
className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap border-2 transition-colors ${
activeFilter === f.value
? 'bg-gold text-bg-primary'
: 'bg-surface-2 text-text-muted border border-border'
? 'bg-[#00E5CC] border-[#00E5CC] text-background font-black'
: 'bg-surface-2 text-text-muted border-border hover:border-[#00E5CC]/40'
}`}
transition={{ type: 'spring', stiffness: 500, damping: 20 }}
>
{f.label}
</motion.button>
......@@ -101,125 +84,104 @@ export function TournamentsPage() {
</div>
{loading ? (
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-4">
{[1, 2, 3].map((i) => (
<div key={i} className="rounded-2xl bg-surface-1 border border-border p-5 animate-pulse">
<div className="w-32 h-4 rounded bg-surface-3 mb-3" />
<div className="w-20 h-3 rounded bg-surface-3" />
<div key={i} className="rounded-2xl bg-surface-1 border-3 border-border p-5 animate-pulse">
<div className="w-36 h-5 rounded bg-surface-3 mb-3" />
<div className="w-24 h-3 rounded bg-surface-3" />
</div>
))}
</div>
) : tournaments.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 gap-4">
<motion.div
className="w-16 h-16 rounded-full bg-surface-2 border border-border flex items-center justify-center"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
className="w-20 h-20 rounded-2xl bg-surface-2 border-3 border-[#FFC83D]/30 flex items-center justify-center"
initial={{ scale: 0, rotate: -10 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: 'spring', stiffness: 300, damping: 18 }}
>
<Trophy size={24} className="text-gold" />
<Trophy size={32} className="text-[#FFC83D]" />
</motion.div>
<p className="text-text-muted text-sm">لا توجد بطولات حالية</p>
<p className="text-text-muted text-sm font-bold">لا توجد بطولات</p>
</div>
) : (
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-4">
<AnimatePresence>
{tournaments.map((t, i) => (
<motion.div
key={t.id}
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -12 }}
transition={{ delay: i * 0.05 }}
initial={{ opacity: 0, y: 20, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: -16 }}
transition={{ type: 'spring', stiffness: 400, damping: 24, delay: i * 0.06 }}
>
<Card
className="flex flex-col gap-3"
onClick={() => setExpandedId(expandedId === t.id ? null : t.id)}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-lg bg-gold/10 flex items-center justify-center">
<Trophy size={16} className="text-gold" />
</div>
<div>
<h3 className="text-sm font-bold leading-tight">{t.name_ar || t.name}</h3>
<p className="text-[11px] text-text-muted mt-0.5">
{FORMAT_LABELS[t.format] ?? t.format}
</p>
</div>
</div>
<Card className="flex flex-col gap-3 relative">
<div className="absolute top-4 left-4">
<StatusBadge status={t.status} />
</div>
<div className="flex items-center gap-4 text-[11px] text-text-muted">
<h3 className="text-base font-black leading-tight pr-0 pl-20">
{t.name_ar || t.name}
</h3>
<div className="flex items-center gap-4 text-xs text-text-muted font-bold">
<span className="flex items-center gap-1.5 bg-surface-2 border-2 border-border rounded-lg px-2 py-1">
{FORMAT_LABELS[t.format] ?? t.format}
</span>
<span className="flex items-center gap-1">
<Clock size={11} />
<Clock size={12} />
{TIME_CONTROL_LABELS[t.time_control] ?? t.time_control}
</span>
<span className="flex items-center gap-1">
<Users size={11} />
<Users size={12} />
{t.registrations_count}/{t.max_players}
</span>
<span className="flex items-center gap-1">
<Calendar size={11} />
{formatRelativeTime(t.starts_at)}
</span>
</div>
{(t.prize_pool_coins > 0 || t.prize_pool_gems > 0) && (
<div className="flex items-center gap-3 text-[11px]">
<div className="flex items-center gap-3">
{t.prize_pool_coins > 0 && (
<span className="flex items-center gap-1 text-gold font-bold">
<Coins size={12} className="text-gold" />
<span className="flex items-center gap-1.5 text-[#FFC83D] font-black text-sm">
<Coins size={14} className="text-[#FFC83D]" />
{t.prize_pool_coins.toLocaleString('ar-EG')}
</span>
)}
{t.prize_pool_gems > 0 && (
<span className="flex items-center gap-1 text-purple font-bold">
<Gem size={12} className="text-purple" />
<span className="flex items-center gap-1.5 text-[#B44DFF] font-black text-sm">
<Gem size={14} className="text-[#B44DFF]" />
{t.prize_pool_gems.toLocaleString('ar-EG')}
</span>
)}
</div>
)}
<AnimatePresence>
{expandedId === t.id && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.2 }}
className="overflow-hidden"
>
<div className="pt-3 border-t border-border flex flex-col gap-2">
<div className="grid grid-cols-2 gap-2 text-[11px] text-text-muted">
<span>الجولات: {t.rounds_total}</span>
<span>الجولة الحالية: {t.current_round}</span>
<span>الحد الأدنى: {t.min_players} لاعب</span>
<span>مصنفة: {t.is_rated ? 'نعم' : 'لا'}</span>
</div>
{t.status === 'registration' && user && (
<motion.button
whileTap={{ scale: 0.95 }}
onClick={(e) => {
e.stopPropagation()
isRegistered(t.id) ? unregister(t.id) : register(t.id)
}}
className={`mt-2 w-full py-2.5 rounded-xl text-sm font-bold transition-colors ${
isRegistered(t.id)
? 'bg-coral/10 text-coral border border-coral/30'
: 'bg-gold text-bg-primary'
}`}
>
{isRegistered(t.id) ? 'إلغاء التسجيل' : 'سجّل الآن'}
</motion.button>
)}
{t.status === 'registration' && user && (
<div className="flex justify-center mt-1">
{isRegistered(t.id) ? (
<div className="flex items-center gap-2">
<span className="px-4 py-2 rounded-xl bg-[#FFC83D]/15 border-2 border-[#FFC83D]/50 text-[#FFC83D] text-xs font-black">
مسجل
</span>
<motion.button
whileTap={{ scale: 0.93 }}
onClick={() => unregister(t.id)}
className="px-3 py-2 rounded-xl bg-[#FF5252]/10 border-2 border-[#FF5252]/30 text-[#FF5252] text-xs font-bold"
>
إلغاء
</motion.button>
</div>
</motion.div>
)}
</AnimatePresence>
) : (
<Button
variant="cyan"
size="sm"
onClick={() => register(t.id)}
className="w-[80%] mx-auto"
>
سجل
</Button>
)}
</div>
)}
</Card>
</motion.div>
))}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment