[FEAT] implements front-end of achivements page

zakarm · May 5, 2024 · 7373e7b · 7373e7b
1 parent 7173952
commit 7373e7b
Show file tree

Hide file tree

Showing 14 changed files with 271 additions and 3 deletions.
diff --git a/app/front-end/public/achiv_ai1.png b/app/front-end/public/achiv_ai1.png
diff --git a/app/front-end/public/achiv_ai2.png b/app/front-end/public/achiv_ai2.png
diff --git a/app/front-end/public/achiv_ai3.png b/app/front-end/public/achiv_ai3.png
diff --git a/app/front-end/public/achiv_match1.png b/app/front-end/public/achiv_match1.png
diff --git a/app/front-end/public/achiv_match2.png b/app/front-end/public/achiv_match2.png
diff --git a/app/front-end/public/achiv_match3.png b/app/front-end/public/achiv_match3.png
diff --git a/app/front-end/public/achiv_tourn1.png b/app/front-end/public/achiv_tourn1.png
diff --git a/app/front-end/public/achiv_tourn2.png b/app/front-end/public/achiv_tourn2.png
diff --git a/app/front-end/public/achiv_tourn3.png b/app/front-end/public/achiv_tourn3.png
diff --git a/app/front-end/src/app/achievements/layout.tsx b/app/front-end/src/app/achievements/layout.tsx
@@ -0,0 +1,15 @@
+import MainContainer from "../../components/mainContainer";
+import AuthChecker from "../../components/authChecker"
+import React from 'react'
+
+export default function    AchivementsLayout({children} : React.ReactNode)
+{
+    return (
+        <AuthChecker>
+            <MainContainer>
+                { children }
+            </MainContainer>
+        </AuthChecker>
+
+    );
+}
diff --git a/app/front-end/src/app/achievements/page.tsx b/app/front-end/src/app/achievements/page.tsx
@@ -0,0 +1,179 @@
+import React from 'react'
+import styles from './styles.module.css'
+
+declare global {
+    namespace JSX {
+      interface IntrinsicElements {
+        [elemName: string]: React.DetailedHTMLProps<React.HTMLAttributes<React.ElementType>, React.ElementType>;
+      }
+    }
+}
+
+interface   Props {
+    title ?: string;
+    subTitle ?: string;
+    imageURL ?: string;
+    achieved ?: boolean;
+}
+
+function    AchivementsProgressBar() {
+    return (
+        <>
+            <div className="col-12 d-flex">
+                <div
+                    class={`${styles.progress} progress`}
+                    role="progressbar"
+                    aria-label="Animated striped example"
+                    aria-valuenow="75"
+                    aria-valuemin="0"
+                    aria-valuemax="100">
+                        <div
+                            class={`${styles.progress_bar} itim-font progress-bar`}>44%
+                        </div>
+                </div>
+                <span className="valo-font ms-2 p-0">100%</span>
+            </div>
+        </>
+    );
+}
+
+function    AchivementBadge({title, subTitle, imageURL, achieved} : Props) {
+    return (
+        <>
+            <div className={`${styles.card_container} ${achieved ? styles.achived : styles.not_achived} row p-0 m-1 align-items-center justify-content-between`}>
+                <div className={`row ${styles.test} align-items-center m-0 p-0`}>
+
+                    <div className={`${styles.right_subcard} col-8 p-3 m-0 `}>
+                        <div className="row p-0 m-0"> 
+                            <h3 className={`${styles.title} valo-font col p-0 m-2`}>{title}</h3>
+                        </div>
+                        <div className="row p-0 m-0">
+                            <div className="itim-font col">{subTitle}</div>
+                        </div>
+                        <div className="row p-0 m-0 mt-4 ">
+                            <h3 className={`col valo-font ${styles.achieved_text}`}>{achieved ? "ACHIEVED" : ""}</h3>
+                        </div>
+                    </div>
+                    <div className={`col-4 p-0 m-0`}>
+                        <div className={`row p-0 m-0`}>
+                            <div className={`col`}>
+                                <img className={`${styles.achiv_img}`} src={imageURL}></img>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+function    Achivements() {
+    return (
+        <>
+        {/* AI BOT */}
+        <div className="row p-0 m-1">
+            <div className="col-12 col-md-6 col-xxl-4 d-flex d-flex justify-content-center justify-content-md-start">
+                <AchivementBadge
+                    title="AI CHALLENGER"
+                    subTitle="Defeat the AI bot at the highest difficulty level"
+                    imageURL="achiv_ai1.png"
+                    achieved={true}>
+                </AchivementBadge>
+            </div>
+            <div className="col-12 col-md-6 col-xxl-4 d-flex d-flex justify-content-center justify-content-md-start">
+                <AchivementBadge
+                    title="ROBO-RIVALRY"
+                    subTitle="Engage in a match against the AI bot lasting longer than 20 minutes and win"
+                    imageURL="achiv_ai2.png"
+                    achieved={true}>
+                </AchivementBadge>
+            </div>
+            <div className="col-12 col-md-6 col-xxl-4 d-flex d-flex justify-content-center justify-content-md-start">
+                <AchivementBadge
+                    title="I'M A LEGEND"
+                    subTitle="Defeat the AI bot with a score of 11-0"
+                    imageURL="achiv_ai3.png"
+                    achieved={false}>
+                </AchivementBadge>
+            </div>
+        </div>
+        {/* TOURNAMENT */}
+        <div className="row p-0 m-1">
+            <div className="col-12 col-md-6 col-xxl-4 d-flex d-flex justify-content-center justify-content-md-start">
+                <AchivementBadge
+                    title="EARLY BIRD"
+                    subTitle="Win a match within the first three minutes"
+                    imageURL="achiv_tourn1.png"
+                    achieved={false}>
+                </AchivementBadge>
+            </div>
+            <div className="col-12 col-md-6 col-xxl-4 d-flex d-flex justify-content-center justify-content-md-start">
+                <AchivementBadge
+                    title="TRIPLE THREAT"
+                    subTitle="Score a hat-trick (three consecutive points) at least twice in a match"
+                    imageURL="achiv_tourn2.png"
+                    achieved={true}>
+                </AchivementBadge>
+            </div>
+            <div className="col-12 col-md-6 col-xxl-4 d-flex d-flex justify-content-center justify-content-md-start">
+                <AchivementBadge
+                    title="FRONTRUNNER"
+                    subTitle="Reach the finals of the tournament"
+                    imageURL="achiv_tourn3.png"
+                    achieved={false}>
+                </AchivementBadge>
+            </div>
+        </div>
+        {/* MATCH GAME */}
+        <div className="row p-0 m-1">
+            <div className="col-12 col-md-6 col-xxl-4 d-flex d-flex justify-content-center justify-content-md-start">
+                <AchivementBadge
+                    title="SPEEDY VICTORY"
+                    subTitle="Win a game with a score of 11-0 within three minutes"
+                    imageURL="achiv_match1.png"
+                    achieved={false}>
+                </AchivementBadge>
+            </div>
+            <div className="col-12 col-md-6 col-xxl-4 d-flex d-flex justify-content-center justify-content-md-start">
+                <AchivementBadge
+                    title="LAST-MINUTE COMEBACK"
+                    subTitle="Win a game after being down by five points"
+                    imageURL="achiv_match2.png"
+                    achieved={false}>
+                </AchivementBadge>
+            </div>
+            <div className="col-12 col-md-6 col-xxl-4 d-flex d-flex justify-content-center justify-content-md-start">
+                <AchivementBadge
+                    title="FRONTRUNNER"
+                    subTitle="Reach the finals of the tournament"
+                    imageURL="achiv_match3.png"
+                    achieved={true}>
+                </AchivementBadge>
+            </div>
+        </div>
+        </>
+    );
+}
+
+export default function() {
+    return (
+        <div className={`${styles.wrapper} container-fluid vh-100`}>
+            <div className="row p-0 m-0 mt-5">
+                <div className="col">
+                    <h1 className="valo-font col-6">ACHIEVEMENTS</h1>
+                </div>
+            </div>
+            <div className="row p-0 m-0 my-3">
+                <AchivementsProgressBar></AchivementsProgressBar>
+            </div>
+            <div className="row p-0 m-1">
+                <div className="col">
+                    <h2>NavBar</h2>
+                </div>
+            </div>
+            <div className="row p-0 m-0 h-75 align-items-center justify-content-start">
+                <Achivements></Achivements>
+            </div>
+        </div>
+    );
+}
diff --git a/app/front-end/src/app/achievements/styles.module.css b/app/front-end/src/app/achievements/styles.module.css
@@ -0,0 +1,74 @@
+/* --clr-red: #FF4755;
+--clr-ldark : #161625;
+--clr--white: #FFEBEB;
+--clr-dark: #111111;
+--clr--green : #27B299;
+--clr--grey : #2C3143; */
+
+.wrapper {
+    overflow: auto;
+}
+
+.card_container {
+    min-width: 300px;
+    max-width: 600px;
+    border-radius: 25px;
+    background-color: var(--clr--white);
+    height: 250px;
+}
+
+.achived {
+    box-shadow: 0px 0px 40px var(--clr--white);
+}
+
+.not_achived {
+    -webkit-filter: grayscale(1);
+    filter : grayscale(1);
+}
+
+.achieved_text {
+    color: var(--clr--green);
+}
+
+.progress {
+    height : 30px;
+    width: 93%;
+    min-width: 300px;
+    border-radius: 25px;
+    background-color: var(--clr--white);
+}
+
+.right_subcard {
+    height : 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    border-right : 5px solid var(--clr--green);
+}
+.test {
+    height: 100%;
+}
+
+.progress_bar {
+    width: 44%;
+    border-radius: 25px;
+    background: linear-gradient(90deg, var(--clr-red), var(--clr-dark) 100%);
+}
+
+.title {
+    font-size: clamp(1.2rem, 0.858rem + 0.757vw, 1.7rem);
+    color : var(--clr-dark);
+}
+
+.achiv_img {
+    width : 100%;
+    height : "auto"
+}
+
+@media (max-width : 776px) {
+    .card_container {
+        box-shadow: 0px 0px 20px var(--clr--white);
+        height: 230px;
+    }
+
+}
diff --git a/app/front-end/src/components/sideBar.tsx b/app/front-end/src/components/sideBar.tsx
@@ -24,7 +24,7 @@ export default function SideBar() {
   });
 
   useEffect(() => {
-    const pathUrls = ["/dashboard", "/game", "/chat", "/achievement", "/settings"];
+    const pathUrls = ["/dashboard", "/game", "/chat", "/achievements", "/settings"];
     const index = pathUrls.indexOf(pathname);
     setActiveIcon(index);
     gsap.to(`.icon_${index}`, { rotation: "45" });
@@ -49,7 +49,7 @@ export default function SideBar() {
             <Link className="" href="/chat">
              	<IoChatbubble className={`${styles.side_icon} icon_2`} color={activeIcon === 2 ? '#FF4755' : '#FFEBEB'}/>
             </Link>
-            <Link className="" href="/achievement">
+            <Link className="" href="/achievements">
             	<FaTrophy className={`${styles.side_icon} icon_3`} color={activeIcon === 3 ? '#FF4755' : '#FFEBEB'}/>
             </Link>
             <Link className="" href="/settings">

diff --git a/app/front-end/src/components/toggleBar.tsx b/app/front-end/src/components/toggleBar.tsx
@@ -34,7 +34,7 @@ const Togglebar: React.FC<Props> = ({ handleToggle }) => {
           <IoChatbubbles className={`${styles.s_icon} ${styles.icon_2}`} color={activeIcon === 2 ? '#FF4755' : '#FFEBEB'} />
           <h3 className='px-4'>CHAT</h3>
         </Link>
-        <Link className={`${styles.title} ${styles.link} valo-font d-flex flex-row align-items-center justify-content-start p-2`} href="/achievement" onClick={() => handleLinkClick(3)}>
+        <Link className={`${styles.title} ${styles.link} valo-font d-flex flex-row align-items-center justify-content-start p-2`} href="/achievements" onClick={() => handleLinkClick(3)}>
           <GiTrophy className={`${styles.s_icon} ${styles.icon_3}`} color={activeIcon === 3 ? '#FF4755' : '#FFEBEB'} />
           <h3 className='px-4'>ACHIEVEMENT</h3>
         </Link>