diff --git a/app/components/MasteryChart.tsx b/app/components/MasteryChart.tsx new file mode 100644 index 0000000..e67f7df --- /dev/null +++ b/app/components/MasteryChart.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +type ProgressChartProps = { + start: number; + end: number; + color: string; +}; + +const MasteryChart = ({ + title, + variant +}: { + title: string; + variant: ProgressChartProps; +}) => { + const chartPercentage = (variant.start / variant.end) * 90; + + console.log({ chartPercentage }); + return ( +
+
+ {title} +
+
+
+

LVL

+

{variant.start}

+
+
+
+ ); +}; + +export default MasteryChart; diff --git a/app/components/ProfileNav.tsx b/app/components/ProfileNav.tsx new file mode 100644 index 0000000..c7bda6b --- /dev/null +++ b/app/components/ProfileNav.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { useState } from "react"; + +const ProfileNav = () => { + const [active, setActive] = useState("OVERVIEW"); + return ( +
+
+ LB +
+
+ {["OVERVIEW", "REWARDS", "SKILLS", "LORE"].map((item, index) => ( + + ))} +
+
+ RB +
+
+ ); +}; + +export default ProfileNav; diff --git a/app/components/ProgressChart.tsx b/app/components/ProgressChart.tsx new file mode 100644 index 0000000..59db45b --- /dev/null +++ b/app/components/ProgressChart.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +type ProgressChartProps = { + start: number; + end: number; + color: string; +}; + +const ProgressChart = ({ + title, + variant +}: { + title: string; + variant: ProgressChartProps; +}) => { + const chartPercentage = (variant.start / variant.end) * 100; + + return ( +
+
{title}
+
+
+

{variant.start}

+ /{variant.end} +
+
+
+ ); +}; + +export default ProgressChart; diff --git a/app/components/UsernameHolder.tsx b/app/components/UsernameHolder.tsx new file mode 100644 index 0000000..b25896f --- /dev/null +++ b/app/components/UsernameHolder.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +const UsernameHolder = ({ username }: { username: string }) => { + return ( +
+
+
+
+
+ + {username} + +
+ LVL +
+
+
+ 0XP +
+
+
+
+
+
+ ); +}; + +export default UsernameHolder; diff --git a/app/gameMode/page.tsx b/app/gameMode/page.tsx index e283ac8..df3bf45 100644 --- a/app/gameMode/page.tsx +++ b/app/gameMode/page.tsx @@ -1,59 +1,48 @@ -'use client' +"use client"; -import { useState } from 'react'; -import Link from 'next/link'; +import { useState } from "react"; +import Link from "next/link"; +import UsernameHolder from "../components/UsernameHolder"; export default function GameSelectionScreen() { - const [selectedCard, setSelectedCard] = useState(null); + const [selectedCard, setSelectedCard] = useState(null); - const handleCardClick = (cardType: string) => { - setSelectedCard(cardType); - console.log(`Selected card: ${cardType}`); - }; + const handleCardClick = (cardType: string) => { + setSelectedCard(cardType); + console.log(`Selected card: ${cardType}`); + }; - return ( -
+ return ( +
+ -
-
-
-
-
- USERNAME -
- LVL -
-
-
- 0XP -
-
-
-
-
-
+
+ handleCardClick("create")} + > +

CREATE GAME

+

+ Choose from a variety of game rooms to host yourself +

+ -
- handleCardClick('create')} - > -

CREATE GAME

-

- Choose from a variety of game rooms to host yourself -

- - - handleCardClick('join')} - > -

JOIN GAME

-

- Find an active variety of rooms to enjoy together -

- -
-
- ); -} \ No newline at end of file + handleCardClick("join")} + > +

JOIN GAME

+

+ Find an active variety of rooms to enjoy together +

+ +
+
+ ); +} diff --git a/app/globals.css b/app/globals.css index a2dc41e..bafa8c0 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,4 @@ +@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"); @import "tailwindcss"; :root { @@ -22,5 +23,6 @@ body { background: var(--background); color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; + /* font-family: Arial, Helvetica, sans-serif; */ + font-family: "Noto Sans", sans-serif; } diff --git a/app/profile/page.tsx b/app/profile/page.tsx index 218ebcb..6e1b816 100644 --- a/app/profile/page.tsx +++ b/app/profile/page.tsx @@ -1,40 +1,140 @@ +"use client"; + import { Bowlby_One_SC } from "next/font/google"; -import Header from "../components/Header"; + +import Image from "next/image"; +import ProfileNav from "../components/ProfileNav"; +import ProgressChart from "../components/ProgressChart"; +import MasteryChart from "../components/MasteryChart"; const bowlby = Bowlby_One_SC({ weight: "400", subsets: ["latin"], - variable: "--font-bowlby-one-sc", + variable: "--font-bowlby-one-sc" }); export default function Profile() { return ( -
-
-
-

PROFILE

- -
-
-
- LEVELS +
+

+ PACO +

+
+ +
+
+
+
+ Matches + + 0 + +
+
+ Usage + + 0% + +
+
+ Wins + + 0 + +
+
+ + Win Ratio + + + 0% + +
+
+ brawl
-
-
-
- NFTS +
+

GAME MODE

+
+ {" "} +

RANKED

+ +
-
-
- STATS +
+ + + +
+ +
+
+
+ Total XP + + 1,505 + +
+
+ Next Level + + 3,815 + +
+
+ + Next Reward + + + Gancho Reward + +
-
-
+ + +
+
+ + +
+
+ +
+ Chat on our Discord channel to find worthy opponents! +
+ ); } diff --git a/package-lock.json b/package-lock.json index 60f0138..68726e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@starknet-react/core": "^3.7.4", "@types/qrcode.react": "^1.0.5", "get-starknet": "^3.3.0", + "lucide-react": "^0.503.0", "next": "15.2.1", "qrcode.react": "^4.2.0", "react": "^19.0.0", @@ -5352,6 +5353,14 @@ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==" }, + "node_modules/lucide-react": { + "version": "0.503.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.503.0.tgz", + "integrity": "sha512-HGGkdlPWQ0vTF8jJ5TdIqhQXZi6uh3LnNgfZ8MHiuxFfX3RZeA79r2MW2tHAZKlAVfoNE8esm3p+O6VkIvpj6w==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", diff --git a/public/assets/brawlout-bg.jpg b/public/assets/brawlout-bg.jpg new file mode 100644 index 0000000..5d01cb3 Binary files /dev/null and b/public/assets/brawlout-bg.jpg differ diff --git a/public/assets/brawlout-img.png b/public/assets/brawlout-img.png new file mode 100644 index 0000000..ff1b741 Binary files /dev/null and b/public/assets/brawlout-img.png differ diff --git a/public/assets/brawlout-profile-img.jpg b/public/assets/brawlout-profile-img.jpg new file mode 100644 index 0000000..6337b60 Binary files /dev/null and b/public/assets/brawlout-profile-img.jpg differ diff --git a/public/assets/fight-bg.jpg b/public/assets/fight-bg.jpg new file mode 100644 index 0000000..17860c5 Binary files /dev/null and b/public/assets/fight-bg.jpg differ diff --git a/public/assets/profile-bg.png b/public/assets/profile-bg.png new file mode 100644 index 0000000..71699cb Binary files /dev/null and b/public/assets/profile-bg.png differ