new ui begin

2024-09-26 15:04:52 +05:30 · 2024-09-26 15:04:52 +05:30 · e61d4555de
commit e61d4555de
parent c682d7727e
6 changed files with 185 additions and 103 deletions
--- a/components/LoginButton.tsx
+++ b/components/LoginButton.tsx
@ -0,0 +1,21 @@
+import React from 'react';
+
+interface ButtonProps {
+  onClick: () => void;
+  text: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ onClick, text }) => {
+  return (
+    <button
+      className="m-0.5 bg-gradient-to-b from-purple-400 to-purple-950 py-3 px-8 text-black rounded-full text-lg font-extrabold flex items-center shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5"
+      onClick={onClick}
+    >
+      <div className="mb-1">
+        {text}
+      </div>
+    </button>
+  );
+};
+
+export default Button;
--- a/pages/auth.tsx
+++ b/pages/auth.tsx
@ -4,6 +4,8 @@ import { useEffect } from 'react';
 import axios from 'axios';
 import { usePrivy } from '@privy-io/react-auth';
 import Link from 'next/link';
+import Button from '../components/LoginButton';
+import Head from 'next/head';

 const Home: React.FC = () => {
    const { login, ready, user } = usePrivy();
@ -65,33 +67,43 @@ const Home: React.FC = () => {
    }, [ready, user]);

    return (
-        <div className='flex items-center justify-center bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 h-screen text-white'>
+        
+        <div className='font-inter'>
+            <Head>
+        <title>Link W3B Launcher · W3B Games</title>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+        <div className="flex flex-col w-full h-screen">
+          <div className="flex-[2] bg-[#0F0F0F]"></div>
+          <div className="flex-[5] bg-black"></div>
+        </div>
+        <div className="absolute inset-x-0 top-0 flex items-center justify-center pointer-events-none h-[57.2vh]">
+          <h2 className="text-[10vw] font-bold whitespace-nowrap bg-clip-text text-transparent bg-[linear-gradient(to_bottom,black_50%,#0F0F0F_50%)]">METAHUNT</h2>
+        </div>
+        <div className="absolute inset-x-10 top-10 flex w-24 h-24">
+          <img src="./logos/logo.png"/>
+        </div>
+        <div className="absolute inset-0 flex justify-center items-center">
+        <div className='flex items-center justify-center h-screen text-white'>
            {user && ready ? (
                <div className='justify-center flex flex-col items-center bg-black bg-opacity-30 p-8 rounded-xl backdrop-blur-md shadow-lg'>
-                    <h1 className='text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500'>Login Successful!</h1>
+                    <h1 className='text-4xl font-bold mb-6 text-white/80'>Login Successful!</h1>
                    <p className='mb-6 text-lg text-gray-300'>Your W3B Launcher is now securely connected.</p>
-                    <Link href="/dashboard">
-                        <div className='bg-gradient-to-r from-purple-500 to-indigo-600 px-10 py-3 items-center justify-center flex rounded-full text-lg font-semibold hover:from-purple-600 hover:to-indigo-700 transition duration-300 shadow-md hover:shadow-xl'>
-                            Enter Dashboard
-                        </div>
-                    </Link>
+                    <Button onClick={()=>{router.push("/dashboard");}} text='Enter Dashboard'/>
                </div>
            ) : (
-                <div className="flex flex-col items-center justify-center bg-black bg-opacity-30 p-10 rounded-xl backdrop-blur-md shadow-lg">
-                    <h1 className="text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Connect your W3B Games Launcher</h1>
-                    <p className="mb-6 text-lg text-gray-300">Connect your crypto wallet to access the W3B Games ecosystem</p>
-                    <button 
-                        className="bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 rounded-full px-10 py-3 text-lg font-semibold transition duration-300 shadow-md hover:shadow-xl flex items-center" 
-                        onClick={login}
-                    >
-                        <svg className="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                        </svg>
-                        Secure Login
-                    </button>
+                <div className="flex flex-col items-center justify-center">
+                    <h1 className="text-4xl font-bold mb-6 text-white/80">Link your W3B Games Launcher</h1>
+                    {/* <p className="mb-6 text-lg text-gray-300">Connect your crypto wallet to access the W3B Games ecosystem</p> */}
+                    <Button onClick={login} text="LOG IN / REGISTER" />
                </div>
            )}
        </div>
+        </div>
+    </div>
    );
 };

--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -4,7 +4,8 @@ import { GetServerSideProps } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCube, faRocket } from "@fortawesome/free-solid-svg-icons";
+import { faRocket } from "@fortawesome/free-solid-svg-icons";
+import Button from "../components/LoginButton";

 export const getServerSideProps: GetServerSideProps = async ({ req }) => {
  const cookieAuthToken = req.cookies["privy-token"];
@ -37,28 +38,30 @@ export default function LoginPage() {
    <>
      <Head>
        <title>Login · W3B Games</title>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
      </Head>

-      <main className="flex min-h-screen w-full bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
-        <div className="flex flex-1 p-6 justify-center items-center w-full h-screen">
-          <div className="text-center w-full">
-            <div className="mb-10 h-96 flex justify-center">
-              <FontAwesomeIcon icon={faCube} className="text-6xl text-cyan-400 animate-pulse" />
-            </div>
-            <h1 className="text-4xl sm:text-5xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">
-              Welcome to W3B Game Dashboard
-            </h1>
-            <p className="text-lg sm:text-xl mb-8 text-gray-300">
-              Embark on a Web3 adventure like no other
-            </p>
-            <div className="mt-6 flex justify-center">
-              <button
-                className="bg-gradient-to-r from-purple-500 to-cyan-500 hover:from-purple-600 hover:to-cyan-600 py-3 px-8 text-white rounded-full text-lg font-semibold transition duration-300 ease-in-out transform hover:scale-105 flex items-center shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5"
-                onClick={login}
-              >
-                <FontAwesomeIcon icon={faRocket} className="mr-4 w-8" />
-                Login to Dashboard
-              </button>
+      <main className="flex min-h-screen w-full relative overflow-hidden font-inter">
+        <div className="flex flex-col w-full h-screen">
+          <div className="flex-[3] bg-[#0F0F0F]"></div>
+          <div className="flex-[4] bg-black"></div>
+        </div>
+        <div className="absolute inset-x-0 top-0 flex items-center justify-center pointer-events-none h-[86vh]">
+          <h2 className="text-[10vw] font-bold whitespace-nowrap bg-clip-text text-transparent bg-[linear-gradient(to_bottom,black_50%,#0F0F0F_50%)]">METAHUNT</h2>
+        </div>
+        <div className="absolute inset-x-10 top-10 flex w-24 h-24">
+          <img src="./logos/logo.png"/>
+        </div>
+        <div className="absolute inset-0 flex justify-center items-center">
+          <div className="text-center w-full px-6 relative top-[10vh]">
+            
+            <div className="mt-6 flex justify-center ">
+              <div className="bg-blue-500 rounded-full hover:scale-110 transition-all duration-300">
+                <Button onClick={login} text="LOG IN / REGISTER" />
+              </div>
            </div>
          </div>
        </div>
--- a/pages/logincomplete.tsx
+++ b/pages/logincomplete.tsx
@ -3,68 +3,100 @@ import axios from "axios";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { SetStateAction, useEffect, useState } from "react";
+import Button from "../components/LoginButton";

 export default function LoginComplete() {
  const [username, setUsername] = useState("");
-  const [error, setError] = useState(""); 
-  const {ready, user,authenticated} = usePrivy();
+  const [error, setError] = useState("");
+  const { ready, user, authenticated } = usePrivy();
  const router = useRouter();
+  const [loading, setLoading] = useState(true); // Add loading state
+
  const handleUsernameChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setUsername(e.target.value);
    setError("");
  };

-  useEffect(()=>{
+  useEffect(() => {
    if (ready && !authenticated) {
      router.push("/");
    }
-  },[ready, user])
+  }, [ready, user])
+
+  useEffect(() => {
+    const fetchUsername = async () => {
+      const params = new URLSearchParams(window.location.search);
+      const requestIdFromUrl = params.get('request_id');
+
+      try {
+        const response = await fetch(`https://vps.playpoolstudios.com/metahunt/api/launcher/get_display_name_public.php?id=${user?.id}`);
+        const databaseUsername = await response.text();
+
+        if (databaseUsername != "-1") {
+           router.push("/dashboard");
+
+          return;
+        } else {
+          setLoading(false); // Set loading to false after fetch completes
+
+        }
+      } catch (error) {
+        console.error('Error fetching username:', error);
+      } finally {
+
+      }
+    };
+
+    if (ready && authenticated) {
+      fetchUsername();
+    }
+  }, [ready, authenticated, user]);

  const setResult = async (result: string, wallet: string) => {
    const params = new URLSearchParams(window.location.search);
    const requestIdFromUrl = params.get('request_id');

    if (!result.includes('privy')) {
-        return;
+      return;
    }
    try {

-        //Get username from database
-        const response = await fetch(`https://vps.playpoolstudios.com/metahunt/api/launcher/get_display_name_public.php?id=${user?.id}`);
-        const databaseUsername = await response.text();
+      //Get username from database
+      const response = await fetch(`https://vps.playpoolstudios.com/metahunt/api/launcher/get_display_name_public.php?id=${user?.id}`);
+      const databaseUsername = await response.text();

-        if (databaseUsername == "-1") {
-            console.log(user?.id);
-            router.push("/logincomplete?request_id=" + requestIdFromUrl);
-            return;
-        }
+      if (databaseUsername == "-1") {
+        console.log(user?.id);
+        router.push("/logincomplete?request_id=" + requestIdFromUrl);
+        return;
+      }

-        await axios({
-            method: 'get',
-            url: `https://vps.playpoolstudios.com/metahunt/api/launcher/set_request_response.php`,
-            withCredentials: false,
-            params: {
-                id: requestIdFromUrl,
-                result: result
-            },
-        });
-        console.log(`https://vps.playpoolstudios.com/metahunt/api/launcher/set_request_response.php?id=${requestIdFromUrl}&result=${result}`);
-        await axios({
-            method: 'get',
-            url: `https://vps.playpoolstudios.com/metahunt/api/launcher/set_wallet.php`,
-            withCredentials: false,
-            params: {
-                id: result,
-                wallet: wallet,
-                init: "true"
-            },
-        });
+      await axios({
+        method: 'get',
+        url: `https://vps.playpoolstudios.com/metahunt/api/launcher/set_request_response.php`,
+        withCredentials: false,
+        params: {
+          id: requestIdFromUrl,
+          result: result
+        },
+      });
+      console.log(`https://vps.playpoolstudios.com/metahunt/api/launcher/set_request_response.php?id=${requestIdFromUrl}&result=${result}`);
+      await axios({
+        method: 'get',
+        url: `https://vps.playpoolstudios.com/metahunt/api/launcher/set_wallet.php`,
+        withCredentials: false,
+        params: {
+          id: result,
+          wallet: wallet,
+          init: "true"
+        },
+      });
    } catch (error) {
-        console.error('Error making GET request:', error);
+      console.error('Error making GET request:', error);
    }
-};
+  };
  const handleClaim = async () => {
-   
+
    try {
      const response = await fetch(
        `https://vps.playpoolstudios.com/metahunt/api/web/validate_username.php?username=${username}`
@ -80,7 +112,7 @@ export default function LoginComplete() {
        setResult(user?.id ?? "", user?.wallet?.address ?? "");

        console.log("Username successfully set!");
-       router.push("/dashboard");
+        router.push("/dashboard");
      } else {
        setUsername("");
        setError(`Sorry, ${username} is not available`);
@ -93,33 +125,46 @@ export default function LoginComplete() {

  return (
    <>
-      <Head>
-        <title>Complete Login</title>
-      </Head>
-      <div className="bg-gradient-to-br from-purple-800 to-blue-700 min-h-screen text-white flex items-center justify-center">
-        <div className="bg-white/10 backdrop-blur-md rounded-xl p-8 shadow-lg max-w-md w-full">
-          <h1 className="text-4xl font-bold mb-6 text-center text-yellow-300">Complete Your Login</h1>
-          <p className="text-xl mb-4 text-center">Enter your unique username</p>
-          <form className="flex flex-col items-center">
-            <input
-              type="text"
-              name="username"
-              value={username}
-              onChange={handleUsernameChange}
-              placeholder="ex: John123"
-              className="bg-white/20 rounded-full w-full py-3 px-4 mb-4 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-yellow-300"
-            />
-            {error && <p className="text-red-300 mb-4 text-center">{error}</p>}
-            
-          </form>
-          <button
-              className="bg-yellow-400 hover:bg-yellow-500 text-purple-900 font-bold rounded-full py-3 px-8 transition-colors duration-200"
-              onClick={handleClaim}
-            >
-              Claim Username
-            </button>
+        <Head>
+          <title>Complete Login</title>
+        </Head>
+        <div className=" min-h-screen text-white justify-center font-inter">
+        <div className="flex flex-col w-full h-screen">
+          <div className="flex-[2] bg-[#0F0F0F]"></div>
+          <div className="flex-[5] bg-black"></div>
+        </div>
+        <div className="absolute inset-x-0 top-0 flex items-center justify-center pointer-events-none h-[57.2vh]">
+          <h2 className="text-[10vw] font-bold whitespace-nowrap bg-clip-text text-transparent bg-[linear-gradient(to_bottom,black_50%,#0F0F0F_50%)]">METAHUNT</h2>
+        </div>
+        <div className="absolute inset-x-10 top-10 flex w-24 h-24">
+          <img src="./logos/logo.png"/>
+        </div>
+        <div className="absolute inset-0 flex justify-center items-center">
+
+          {loading ? ( // Conditional rendering based on loading state
+            <div className="loader">Loading...</div> // Replace with your loading animation
+          ) : (
+            <div className=" rounded-xl p-8 max-w-md w-full">
+              <p className="text-xl mb-4 text-center">Claim your username</p>
+              <form className="flex flex-col items-center">
+                <input
+                  type="text"
+                  name="username"
+                  value={username}
+                  onChange={handleUsernameChange}
+                  placeholder="ex: JohnDoe"
+                  className="bg-black rounded-full w-full py-3 px-4 mb-4 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-blue-200"
+                />
+                {error && <p className="text-red-300 mb-4 text-center">{error}</p>}
+
+              </form>
+              <div className="flex justify-center">
+                <Button onClick={handleClaim} text="Claim Username" />
+              </div>
+            </div>
+          )}
+          </div>
        </div>
-      </div>
    </>
  );
 }
--- a/public/logos/logo.png
+++ b/public/logos/logo.png
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -7,6 +7,7 @@ module.exports = {
    extend: {
      fontFamily: {
        sans: ['Adelle Sans', ...defaultTheme.fontFamily.sans],
+        inter: ['Inter', 'sans-serif'],
      },
      colors: {
        'privy-navy': '#160B45',