ssl on game

public/UnityBuild/bubbles/cert.json

@@ -0,0 +1,4 @@
+{ 
+    "path":"/root/cert.pfx",
+    "password": ""
+}

src/app/page.tsx

@@ -3,6 +3,7 @@
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import HeroSection from "@/components/HeroSection";
+// import Leaderboard from "@/components/Leaderboard";
 import { PrivyProvider } from "@privy-io/react-auth";
 import { toSolanaWalletConnectors } from "@privy-io/react-auth/solana";
 import { Toaster } from "sonner";
@@ -36,6 +37,7 @@ export default function Home() {
           <Toaster position="top-right" richColors />
           <Header />
           <HeroSection />
+          {/* <Leaderboard /> */}
           <Footer />
         </> 
       </PrivyProvider>

src/components/HeroSection.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
 import { useEffect, useState, useRef } from "react";

src/components/Leaderboard.tsx

@@ -0,0 +1,99 @@
+import Image from "next/image";
+import { useState, useEffect } from "react";
+import { API_BASE_URL } from "@/data/shared";
+
+interface LeaderboardEntry {
+  player: string;
+  wins: number;
+  user_data: {
+    id: string;
+    username: string;
+    bio: string;
+    x_profile_url: string;
+  } | null;
+}
+
+export default function Leaderboard() {
+  const [leaderboardData, setLeaderboardData] = useState<LeaderboardEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [failedImages, setFailedImages] = useState<Set<string>>(new Set());
+  const defaultPFP = '/duelfiassets/PFP (1).png';
+
+  useEffect(() => {
+    const fetchLeaderboard = async () => {
+      try {
+        const response = await fetch("https://api.duelfi.io/v1/get_leaderboard.php");
+        const data = await response.json();
+        setLeaderboardData(data);
+      } catch (error) {
+        console.error("Error fetching leaderboard:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchLeaderboard();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="container mx-auto max-w-screen-xl px-3">
+        <div className="bg-[rgb(30,30,30)] rounded-xl p-6 shadow-lg">
+          <h2 className="text-2xl font-bold text-white mb-4">Leaderboard</h2>
+          <div className="flex justify-center items-center h-40">
+            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-[rgb(248,144,22)]"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto max-w-screen-xl px-3 md:px-40">
+      <div className="bg-[rgb(30,30,30)] rounded-xl p-6 shadow-lg">
+        <h2 className="text-2xl font-bold text-white mb-4">Global Leaderboard</h2>
+        <div className="space-y-4">
+          {leaderboardData.map((entry, index) => {
+            let profileUrl = entry.user_data?.x_profile_url || `${API_BASE_URL}profile_pics/${entry.user_data?.id}.jpg`;
+            if (failedImages.has(profileUrl)) {
+              profileUrl = defaultPFP;
+            }
+
+            return (
+              <div
+                key={entry.player}
+                className="flex items-center gap-4 p-3 px-6  rounded-lg bg-[rgb(10,10,10)] border border-[rgb(30,30,30)] hover:border-[rgb(248,144,22)] transition-all duration-300"
+              >
+                <div className="w-8 h-8 flex items-center justify-center bg-[rgb(248,144,22)] text-black font-bold rounded-full">
+                  {index + 1}
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-white font-semibold">
+                    {entry.user_data?.username || "Anonymous"}
+                  </h3>
+                  <p className="text-sm text-gray-400">{entry.user_data?.bio || "No bio"}</p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-[rgb(248,144,22)] font-bold">{entry.wins}</span>
+                  <span className="text-gray-400">wins</span>
+                </div>
+                <Image
+                  src={profileUrl}
+                  alt="Profile"
+                  width={40}
+                  height={40}
+                  className="rounded-full border border-gray-700 object-cover"
+                  onError={(e) => {
+                    // @ts-expect-error - Type mismatch expected
+                    e.target.src = defaultPFP;
+                    setFailedImages(prev => new Set(prev).add(profileUrl));
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}