Skip to content

Feat: build profile interface #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Miss-nonso wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Feat: build profile interface #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions app/components/MasteryChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="grid place-items-center ">
<h5 className={`text-3xl text-center text-yellow-300 font-semibold `}>
{title}
</h5>
<div
className="w-[105px] rotate-200 aspect-square rounded-full relative flex justify-center items-center text-base font-bold color-[#333333] m-5"
style={{
background: `conic-gradient( ${variant.color} 0% ${chartPercentage}%, #0000008a ${chartPercentage}% 90% , #194873 90% 100%`
}}
>
<div
className="absolute rotate-161 z-10 text-yellow-300 bg-[#194873] rounded-full flex flex-col justify-center items-center "
style={{
width: "calc(105px - (10px * 2))",
height: "calc(105px - (10px * 2))"
}}
>
<p className="text-2xl pr-0.5"> LVL</p>
<p className=" text-3xl">{variant.start}</p>
</div>
</div>
</div>
);
};

export default MasteryChart;
43 changes: 43 additions & 0 deletions app/components/ProfileNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from "react";
import { useState } from "react";

const ProfileNav = () => {
const [active, setActive] = useState("OVERVIEW");
return (
<div className="flex items-center mb-4 gap-4">
<div
className="bg-gradient-to-b from-gray-600 rounded-md to-black justify-self-end py-2 px-5 shadow-md font-semibold"
style={{
clipPath:
"polygon(40% 0%, 100% 0%, 100% 80%, 100% 100%, 0% 100%, 0% 40%)"
}}
>
LB
</div>
<div className="flex gap-2 ">
{["OVERVIEW", "REWARDS", "SKILLS", "LORE"].map((item, index) => (
<button
key={index}
className={`cursor-pointer pb-1 px-2 text-gray-700 text-2xl font-semibold border-b-3 border-gray-800 transition-all duration-300 ease-in-out" ${
active === item && "border-b-yellow-300 text-yellow-300"
}`}
onClick={() => setActive(item)}
>
{item}
</button>
))}
</div>
<div
className="bg-gradient-to-b from-gray-600 rounded-md to-black justify-self-end py-2 px-5 shadow-md font-semibold"
style={{
clipPath:
"polygon(0% 0%, 60% 0%, 100% 40%, 100% 100%, 0% 100%, 0% 10%)"
}}
>
RB
</div>
</div>
);
};

export default ProfileNav;
42 changes: 42 additions & 0 deletions app/components/ProgressChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="grid place-items-center min-h-[200px] ">
<h5 className="text-3xl text-center font-semibold">{title}</h5>
<div
className="w-[120px] aspect-square rounded-full relative flex justify-center items-center text-base font-bold color-[#333333] m-5"
style={{
background: `conic-gradient(${variant.color} 0% ${chartPercentage}%, #0000008a ${chartPercentage}% 100%`
}}
>
<div
className="absolute z-10 bg-[#194873] rounded-full flex justify-center items-center "
style={{
width: "calc(120px - (7px * 2))",
height: "calc(120px - (7px * 2))"
}}
>
<p className="text-4xl pr-0.5"> {variant.start}</p>
<span className="text-lg">/{variant.end}</span>
</div>
</div>
</div>
);
};

export default ProgressChart;
28 changes: 28 additions & 0 deletions app/components/UsernameHolder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from "react";

const UsernameHolder = ({ username }: { username: string }) => {
return (
<div className="absolute top-0 right-0 m-4 flex items-center bg-[#222C38] space-x-2">
<div className="bg-[#AA672A] border border-white w-full h-full">
<div className="bg-white rounded-full m-2 item-center w-6 h-6"></div>
</div>
<div className="flex flex-col m-x-2">
<span className="text-white text-center text-sm font-bold">
{username}
</span>
<div className="flex items-center text-xs text-white">
<span>LVL</span>
<div className="mx-2 w-16 h-1 bg-gray-600 rounded-full">
<div className="h-full w-full bg-white "></div>
</div>
<span>0XP</span>
</div>
</div>
<div className="bg-[#817A20] border border-white w-full h-full">
<div className="bg-white rounded-full m-2 item-center w-6 h-6"></div>
</div>
</div>
);
};

export default UsernameHolder;
93 changes: 41 additions & 52 deletions app/gameMode/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<string | null>(null);
const [selectedCard, setSelectedCard] = useState<string | null>(null);

const handleCardClick = (cardType: string) => {
setSelectedCard(cardType);
console.log(`Selected card: ${cardType}`);
};
const handleCardClick = (cardType: string) => {
setSelectedCard(cardType);
console.log(`Selected card: ${cardType}`);
};

return (
<div className="relative w-full h-screen flex items-center justify-center bg-[url('/gamemode-bg.jpg')] bg-no-repeat bg-cover">
return (
<div className="relative w-full h-screen flex items-center justify-center bg-[url('/gamemode-bg.jpg')] bg-no-repeat bg-cover">
<UsernameHolder username="USERNAME" />

<div className="absolute top-0 right-0 m-4 flex items-center bg-[#222C38] space-x-2">
<div className='bg-[#AA672A] border border-white w-full h-full'>
<div className="bg-white rounded-full m-2 item-center w-6 h-6"></div>
</div>
<div className="flex flex-col m-x-2">
<span className="text-white text-center text-sm font-bold">USERNAME</span>
<div className="flex items-center text-xs text-white">
<span>LVL</span>
<div className="mx-2 w-16 h-1 bg-gray-600 rounded-full">
<div className="h-full w-full bg-white "></div>
</div>
<span>0XP</span>
</div>
</div>
<div className='bg-[#817A20] border border-white w-full h-full'>
<div className="bg-white rounded-full m-2 item-center w-6 h-6"></div>
</div>
</div>
<div className="flex justify-center items-center space-x-4">
<Link
href="/createGame"
className={`w-64 h-64 bg-gradient-to-r from-[#EB655F] to-[#000000] p-6 flex flex-col justify-end cursor-pointer transition-transform transform hover:scale-105 shadow-xl ${
selectedCard === "create" ? "ring-2 ring-white" : ""
}`}
onClick={() => handleCardClick("create")}
>
<h2 className="text-white text-xl font-bold mb-2">CREATE GAME</h2>
<p className="text-white text-sm opacity-80">
Choose from a variety of game rooms to host yourself
</p>
</Link>

<div className="flex justify-center items-center space-x-4">
<Link href="/createGame"
className={`w-64 h-64 bg-gradient-to-r from-[#EB655F] to-[#000000] p-6 flex flex-col justify-end cursor-pointer transition-transform transform hover:scale-105 shadow-xl ${selectedCard === 'create' ? 'ring-2 ring-white' : ''}`}
onClick={() => handleCardClick('create')}
>
<h2 className="text-white text-xl font-bold mb-2">CREATE GAME</h2>
<p className="text-white text-sm opacity-80">
Choose from a variety of game rooms to host yourself
</p>
</Link>

<Link href="/joingame"
className={`w-64 h-64 bg-gradient-to-r from-[#549FA5] to-[#000000] p-6 flex flex-col justify-end cursor-pointer transition-transform transform hover:scale-105 shadow-xl ${selectedCard === 'join' ? 'ring-2 ring-white' : ''}`}
onClick={() => handleCardClick('join')}
>
<h2 className="text-white text-xl font-bold mb-2">JOIN GAME</h2>
<p className="text-white text-sm opacity-80">
Find an active variety of rooms to enjoy together
</p>
</Link>
</div>
</div>
);
}
<Link
href="/joingame"
className={`w-64 h-64 bg-gradient-to-r from-[#549FA5] to-[#000000] p-6 flex flex-col justify-end cursor-pointer transition-transform transform hover:scale-105 shadow-xl ${
selectedCard === "join" ? "ring-2 ring-white" : ""
}`}
onClick={() => handleCardClick("join")}
>
<h2 className="text-white text-xl font-bold mb-2">JOIN GAME</h2>
<p className="text-white text-sm opacity-80">
Find an active variety of rooms to enjoy together
</p>
</Link>
</div>
</div>
);
}
4 changes: 3 additions & 1 deletion app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}
Loading
Loading