login signin

adarshnjena · Feb 24, 2023 · 77f22db · 77f22db · vercel · Feb 24, 2023
1 parent 2332523
commit 77f22db
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 2 deletions.
diff --git a/components/BodyConfig.js b/components/BodyConfig.js
@@ -0,0 +1,43 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable jsx-a11y/alt-text */
+export default function BodyConfig() {
+  return (
+    <div className="bg-zinc-900">
+      <div class="w-full  h-[3vh] text-white pl-4 justify-self-center">
+        Skin Tone
+      </div>
+      <div class="w-full bg-zinc-900 text-black pl-4">
+        <div className="flex bg-zinc-900 m-5 mt-2 gap-x-12">
+          <button className="bg-zinc-700 text-white rounded-md p-2">
+            <div className="w-[40px] h-[40px] bg-[#E8BEAC]"></div>
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md p-2">
+            <div className="w-[40px] h-[40px] bg-[#c58c85]"></div>
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md p-2">
+            <div className="w-[40px] h-[40px] bg-[#ecbcb4]"></div>
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md p-2">
+            <div className="w-[40px] h-[40px] bg-[#d1a3a4]"></div>
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md p-2">
+            <div className="w-[40px] h-[40px] bg-[#a1665e]"></div>
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md p-2">
+            <div className="w-[40px] h-[40px] bg-[#503335]"></div>
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md p-2">
+            <div className="w-[40px] h-[40px] bg-[#592f2a]"></div>
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md p-2">
+            <div className="w-[40px] h-[40px] bg-[#8D5524]"></div>
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md p-2">
+            <div className="w-[40px] h-[40px] bg-[#C68642]"></div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/auth.js b/components/auth.js
@@ -1,13 +1,15 @@
 "use client"; // this is a client component 👈🏽
 import { useRef } from "react";
 import style from "../styles/auth.module.css";
+import { useRouter } from "next/router";
 import { Player } from "@lottiefiles/react-lottie-player";
 
 export default function Auth() {
   const ParentCrad = useRef();
   const cards = useRef([]);
   const pushRef = (el) => cards.current.push(el);
   const playerRef = useRef();
+  const router = useRouter();
   return (
     <div className={style.auth}>
       <div
@@ -41,7 +43,13 @@ export default function Auth() {
             </p>
           </div>
         </div>
-        <div className={style.card} ref={pushRef}>
+        <div
+          className={style.card}
+          ref={pushRef}
+          onClick={() => {
+            router.push("/configChar", undefined, { shallow: true });
+          }}
+        >
           <div className={style.cardBorder}></div>
           <div className={style.cardContent}>
             <div className={style.cardTitle}>Play as a Guest</div>

diff --git a/components/genderSelect.js b/components/genderSelect.js
@@ -0,0 +1,9 @@
+export default function GenderSelect() {
+  return (
+    <div className="bg-zinc-900">
+      <div class="w-full  h-[3vh] text-white pl-4 justify-self-center">
+        Gender Select
+      </div>
+    </div>
+  );
+}
diff --git a/pages/configChar.js b/pages/configChar.js
@@ -0,0 +1,51 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable jsx-a11y/alt-text */
+"use client"; // this is a client component 👈🏽
+import { useRef } from "react";
+import BodyConfig from "../components/BodyConfig";
+import GenderSelect from "../components/genderSelect";
+export default function configChar() {
+  const pointerRef = useRef();
+  return (
+    <body
+      onMouseMove={(e) => {
+        pointerRef.current.style.left = e.pageX + "px";
+        pointerRef.current.style.top = e.pageY + "px";
+      }}
+      className="bg-zinc-900"
+    >
+      <div class="w-full bg-gradient-to-r from-green-400 to-blue-500  h-[6vh] text-black pl-4	text-4xl font-black justify-self-center">
+        Avatar
+      </div>
+      <div class="w-full bg-zinc-900 h-[94vh] text-black pl-4">
+        <div className="flex bg-zinc-900 m-5 mt-8 gap-x-12">
+          <button className="bg-zinc-700 text-white rounded-md	p-2">
+            <img src="./body.png" />
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md	p-2">
+            <img src="./hair.png" />
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md	p-2">
+            <img src="./pant.png" />
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md	p-2">
+            <img src="./tshirt.png" />
+          </button>
+          <button className="bg-zinc-700 text-white rounded-md	p-2">
+            <img src="./shoe.png" />
+          </button>
+        </div>
+        <BodyConfig />
+        <GenderSelect />
+      </div>
+
+      <div className="pointer" ref={pointerRef}>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </body>
+  );
+}
diff --git a/public/body.png b/public/body.png
diff --git a/public/hair.png b/public/hair.png
diff --git a/public/pant.png b/public/pant.png
diff --git a/public/shoe.png b/public/shoe.png
diff --git a/public/tshirt.png b/public/tshirt.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,7 +9,11 @@ module.exports = {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        "regal-blue": "#243c5a",
+      },
+    },
   },
   plugins: [],
 };