Translate event details and UI text to French, including event names, descriptions, and status labels. Update navigation styles for consistency.

components/PlayerStats.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface PlayerStatsProps {
+  username?: string;
+  avatar?: string;
+  hp?: number;
+  maxHp?: number;
+  xp?: number;
+  maxXp?: number;
+  level?: number;
+}
+
+// Format number with consistent locale to avoid hydration mismatch
+const formatNumber = (num: number): string => {
+  return num.toLocaleString("en-US");
+};
+
+export default function PlayerStats({
+  username = "DragonSlayer99",
+  avatar = "/got-2.jpg",
+  hp = 750,
+  maxHp = 1000,
+  xp = 3250,
+  maxXp = 5000,
+  level = 42,
+}: PlayerStatsProps) {
+  const [hpPercentage, setHpPercentage] = useState(0);
+  const [xpPercentage, setXpPercentage] = useState(0);
+
+  useEffect(() => {
+    // Animate HP bar
+    const hpTimer = setTimeout(() => {
+      setHpPercentage((hp / maxHp) * 100);
+    }, 100);
+
+    // Animate XP bar
+    const xpTimer = setTimeout(() => {
+      setXpPercentage((xp / maxXp) * 100);
+    }, 200);
+
+    return () => {
+      clearTimeout(hpTimer);
+      clearTimeout(xpTimer);
+    };
+  }, [hp, maxHp, xp, maxXp]);
+
+  const hpColor =
+    hpPercentage > 60
+      ? "from-green-600 to-green-700"
+      : hpPercentage > 30
+      ? "from-yellow-600 to-orange-700"
+      : "from-red-700 to-red-900";
+
+  return (
+    <div className="flex items-center gap-3">
+      {/* Avatar */}
+      <div className="w-10 h-10 rounded-full border border-pixel-gold/20 overflow-hidden bg-gray-900">
+        <img
+          src={avatar}
+          alt={username}
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      {/* Stats */}
+      <div className="flex flex-col gap-1.5 min-w-[200px]">
+        {/* Username & Level */}
+        <div className="flex items-center gap-2">
+          <div className="text-pixel-gold font-gaming font-bold text-sm tracking-wider">
+            {username}
+          </div>
+          <div className="text-gray-400 font-pixel text-xs uppercase border border-pixel-gold/30 px-1.5 py-0.5 bg-black/40">
+            Lv.{level}
+          </div>
+        </div>
+        
+        {/* Bars side by side */}
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-2">
+            {/* HP Bar */}
+            <div className="relative h-2 flex-1 bg-gray-900 border border-gray-700 rounded overflow-hidden">
+              <div
+                className={`absolute inset-0 bg-gradient-to-r ${hpColor} transition-all duration-1000 ease-out`}
+                style={{ width: `${hpPercentage}%` }}
+              >
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
+              </div>
+              {hpPercentage < 30 && (
+                <div className="absolute inset-0 border border-red-500 rounded animate-pulse"></div>
+              )}
+            </div>
+
+            {/* XP Bar */}
+            <div className="relative h-2 flex-1 bg-gray-900 border border-pixel-gold/30 rounded overflow-hidden">
+              <div
+                className="absolute inset-0 bg-gradient-to-r from-pixel-gold/80 via-pixel-gold/70 to-pixel-gold/80 transition-all duration-1000 ease-out"
+                style={{ width: `${xpPercentage}%` }}
+              >
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
+              </div>
+            </div>
+          </div>
+          {/* Labels */}
+          <div className="flex items-center gap-2 text-[8px] font-pixel text-gray-400">
+            <div className="flex-1 text-left">
+              HP {hp} / {maxHp}
+            </div>
+            <div className="flex-1 text-right">
+              XP {formatNumber(xp)} / {formatNumber(maxXp)}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <style jsx>{`
+        @keyframes shimmer {
+          0% {
+            transform: translateX(-100%);
+          }
+          100% {
+            transform: translateX(100%);
+          }
+        }
+        .animate-shimmer {
+          animation: shimmer 2s infinite;
+        }
+      `}</style>
+    </div>
+  );
+}
+