Skip to content

Commit c9c3b6a

Browse files
Mayank1170Mayank1170
committed
.
1 parent 1829a11 commit c9c3b6a

File tree

6 files changed

+231
-108
lines changed

6 files changed

+231
-108
lines changed

‎public/HomeBg.svg

+18
Loading

‎src/app/Components/Common/Features.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
3+
interface FeaturesProps {
4+
bgColor: string;
5+
}
6+
const Features: React.FC<FeaturesProps> = ({bgColor}) => {
7+
return (
8+
<div style={{boxShadow: "inset 2px 2px 5px 2px #000", backgroundColor: bgColor}} className={`h-[200px] w-[80px] mx-5 my-2 bg-${bgColor} rounded-full shadow-inner shadow-black`}>
9+
10+
</div>
11+
)
12+
}
13+
14+
export default Features

‎src/app/Components/Common/PlayButton.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
'use client'
2+
3+
import React from "react";
4+
import { useRouter } from "next/navigation";
5+
6+
interface FeaturesProps {
7+
bgColor: string;
8+
}
9+
10+
const PlayButton: React.FC<FeaturesProps> = ({ bgColor }) => {
11+
const router = useRouter();
12+
13+
return (
14+
<div
15+
onClick={() => {
16+
router.push("/click-the-circle");
17+
}}
18+
style={{
19+
boxShadow: "inset 0px 0px 50px 2px #000",
20+
backgroundColor: bgColor,
21+
}}
22+
className={`z-[1000] flex flex-col justify-center items-center h-[200px] w-[80px] mx-5 my-2 bg-${bgColor} rounded-full shadow-inner shadow-black hover:cursor-pointer`}
23+
>
24+
<button
25+
className="w-full h-full rounded-full hover:cursor-pointer"
26+
27+
>
28+
<h1 className="text-lg font-semibold text-">S</h1>
29+
<h1 className="text-lg font-semibold text-">T</h1>
30+
<h1 className="text-lg font-semibold text-">A</h1>
31+
<h1 className="text-lg font-semibold text-">R</h1>
32+
<h1 className="text-lg font-semibold text-">T</h1>
33+
</button>
34+
</div>
35+
);
36+
};
37+
38+
export default PlayButton;

‎src/app/click-the-circle/page.tsx

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
"use client";
2+
import React, { useState, useEffect, useRef } from "react";
3+
4+
const Circle = () => {
5+
const [radius, setRadius] = useState(0);
6+
const [increasing, setIncreasing] = useState(true);
7+
const [circleClicked, setCircleClicked] = useState(0);
8+
const [totalClicked, setTotalClicked] = useState(0);
9+
const [timeLeft, setTimeLeft] = useState(10);
10+
const screenWidth = window.innerWidth;
11+
const screenHeight = window.innerHeight;
12+
const position = useRef({
13+
top: Math.floor(Math.random() * (screenHeight - radius * 2)),
14+
left: Math.floor(Math.random() * (screenWidth - radius * 2)),
15+
transform: "translate(-50%, -50%)",
16+
});
17+
const clicked = () => {
18+
setCircleClicked((prevCount) => {
19+
console.log("outside: ", circleClicked);
20+
return prevCount + 1;
21+
});
22+
};
23+
24+
const mouseClicked = () => {
25+
setTotalClicked((prev) => prev + 1);
26+
console.log("Total click:", totalClicked);
27+
};
28+
29+
const accuracy = (circleClicked / totalClicked) * 100;
30+
31+
const circleClickedFunc = () => {
32+
setRadius(0);
33+
};
34+
useEffect(() => {
35+
const interval = setInterval(() => {
36+
if (timeLeft > 0) {
37+
if (increasing) {
38+
if (radius < 100) {
39+
setRadius((prevRadius) => prevRadius + 1);
40+
} else {
41+
setIncreasing(false);
42+
}
43+
} else {
44+
if (radius > 0) {
45+
setRadius((prevRadius) => prevRadius - 1);
46+
} else {
47+
setIncreasing(true);
48+
}
49+
}
50+
} else {
51+
setTimeLeft(0);
52+
clearInterval(interval);
53+
}
54+
}, 10);
55+
return () => clearInterval(interval);
56+
}, [radius, increasing, timeLeft]);
57+
58+
useEffect(() => {
59+
const timer = setInterval(() => {
60+
setTimeLeft((prevTime) => prevTime - 1);
61+
}, 1000);
62+
return () => clearInterval(timer);
63+
}, []);
64+
65+
useEffect(() => {
66+
if (radius == 0) {
67+
const newTop = Math.floor(Math.random() * (screenHeight - radius * 2));
68+
const newLeft = Math.floor(Math.random() * (screenWidth - radius * 2));
69+
position.current = {
70+
...position.current,
71+
top: newTop,
72+
left: newLeft,
73+
};
74+
}
75+
}, [increasing, radius, screenHeight, screenWidth]);
76+
77+
return (
78+
<>
79+
{timeLeft > 0 ? (
80+
<div className="h-screen w-full bg-gray-600" onClick={mouseClicked}>
81+
<div
82+
onClick={clicked}
83+
className="absolute bg-red-600 flex justify-center items-center rounded-full overflow-hidden"
84+
style={position.current}
85+
>
86+
<div
87+
// onClick={clicked()}
88+
onClick={circleClickedFunc}
89+
className="rounded-full bg-blue-500"
90+
style={{ width: radius, height: radius }}
91+
></div>
92+
</div>
93+
</div>
94+
) : (
95+
<div className="h-screen w-full flex flex-col justify-center items-center">
96+
<h1>Time's up</h1>
97+
<h1>Your accuray: {accuracy}</h1>
98+
</div>
99+
)}
100+
</>
101+
);
102+
};
103+
104+
export default Circle;

‎src/app/globals.css

+31-7
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,40 @@
1818

1919
body {
2020
color: rgb(var(--foreground-rgb));
21-
background: linear-gradient(
22-
to bottom,
23-
transparent,
24-
rgb(var(--background-end-rgb))
25-
)
26-
rgb(var(--background-start-rgb));
27-
}
21+
background-color: #151517;
22+
verflow: hidden;
23+
}
2824

2925
@layer utilities {
3026
.text-balance {
3127
text-wrap: balance;
3228
}
3329
}
30+
31+
32+
.BottomToTop1{
33+
animation: BottomToTop1 4s infinite linear;
34+
}
35+
36+
@keyframes BottomToTop1{
37+
from{
38+
transform: translateY(100%);
39+
}
40+
to{
41+
transform: translateY(-100%);
42+
}
43+
}
44+
45+
46+
.BottomToTop2{
47+
animation: BottomToTop2 4s infinite linear;
48+
}
49+
50+
@keyframes BottomToTop2{
51+
from{
52+
transform: translateX(100%);
53+
}
54+
to{
55+
transform: translateX(-100%);
56+
}
57+
}

‎src/app/page.tsx

+26-101
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,38 @@
11
import Image from "next/image";
2+
import Features from "./Components/Common/Features";
3+
import PlayButton from "./Components/Common/PlayButton";
24

35
export default function Home() {
46
return (
5-
<main className="flex min-h-screen flex-col items-center justify-between p-24">
6-
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
7-
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
8-
Get started by editing&nbsp;
9-
<code className="font-mono font-bold">src/app/page.tsx</code>
10-
</p>
11-
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
12-
<a
13-
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
14-
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15-
target="_blank"
16-
rel="noopener noreferrer"
7+
<div className="flex flex-row w-full h-[100vh] bg-[#151517] bg-[url('/HomeBg.svg')] bg-contain overflow-hidden">
8+
<div className="w-[50%] gap-3 justify-start items-center ">
9+
<h1 className="text-red text-md font-semibold font-[futura] ml-8 mt-5">
10+
CIRCLEChase
11+
</h1>
12+
<div className="mt-[30%]">
13+
{" "}
14+
<Features bgColor="#1F2025"/>
15+
</div>
16+
<div className="w-[800px] absolute bottom-0 BottomToTop2">
17+
<p
18+
style={{ textShadow: "inset 2px 2px 20px 2px #000 " }}
19+
className=" text-[#1F2025] text-[5em] font-medium mb-0 "
1720
>
18-
By{" "}
19-
<Image
20-
src="/vercel.svg"
21-
alt="Vercel Logo"
22-
className="dark:invert"
23-
width={100}
24-
height={24}
25-
priority
26-
/>
27-
</a>
21+
CH<span className="text-white text-[100px]">A</span>SE THE CIRCLE
22+
</p>
2823
</div>
2924
</div>
3025

31-
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
32-
<Image
33-
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
34-
src="/next.svg"
35-
alt="Next.js Logo"
36-
width={180}
37-
height={37}
38-
priority
39-
/>
40-
</div>
41-
42-
<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
43-
<a
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
>
49-
<h2 className={`mb-3 text-2xl font-semibold`}>
50-
Docs{" "}
51-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
52-
-&gt;
53-
</span>
54-
</h2>
55-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
56-
Find in-depth information about Next.js features and API.
57-
</p>
58-
</a>
59-
60-
<a
61-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
62-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
63-
target="_blank"
64-
rel="noopener noreferrer"
65-
>
66-
<h2 className={`mb-3 text-2xl font-semibold`}>
67-
Learn{" "}
68-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
69-
-&gt;
70-
</span>
71-
</h2>
72-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
73-
Learn about Next.js in an interactive course with&nbsp;quizzes!
74-
</p>
75-
</a>
76-
77-
<a
78-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
79-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
80-
target="_blank"
81-
rel="noopener noreferrer"
82-
>
83-
<h2 className={`mb-3 text-2xl font-semibold`}>
84-
Templates{" "}
85-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
86-
-&gt;
87-
</span>
88-
</h2>
89-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
90-
Explore starter templates for Next.js.
91-
</p>
92-
</a>
93-
94-
<a
95-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
96-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
97-
target="_blank"
98-
rel="noopener noreferrer"
99-
>
100-
<h2 className={`mb-3 text-2xl font-semibold`}>
101-
Deploy{" "}
102-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
103-
-&gt;
104-
</span>
105-
</h2>
106-
<p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
107-
Instantly deploy your Next.js site to a shareable URL with Vercel.
26+
<div className="relative w-[50%] flex items-center overflow-hidden bg-[#1F2025]">
27+
<div className=" flex w-full justify-end">
28+
<PlayButton bgColor="#151517"/>
29+
</div>
30+
<div className="absolute w-[800px] h-full BottomToTop1">
31+
<p className="text-black h-full w-full text-[5em] font-outline-4 -rotate-90 ">
32+
CHASE THE CIRCLE
10833
</p>
109-
</a>
34+
</div>
11035
</div>
111-
</main>
36+
</div>
11237
);
11338
}

0 commit comments

Comments
 (0)