Skip to content

Commit

Permalink
fix: ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@karanpargal
karanpargal committed Sep 7, 2024
1 parent bf22f9f commit 5634f6d
Show file tree
Hide file tree
Showing 10 changed files with 370 additions and 322 deletions.
4 changes: 2 additions & 2 deletions packages/frontend/src/app/components/GameListing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@ export default function GameListing({ games }: Props) {
<SearchIcon className="size-4 text-neutral-300 transition-colors delay-75 duration-300 group-focus-within:text-brand-100" />
<input
className="block min-w-0 flex-1 bg-transparent text-body-1 placeholder:text-neutral-300 focus:outline-none"
placeholder="Find you next adventure"
placeholder="Find your next adventure"
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
</label>
</section>
<section className="space-y-3 px-4 py-4">
<section className="space-y-3 px-4 py-7">
{filteredGames.map((game) => (
<GameCard
key={game.game_id}
Expand Down
307 changes: 159 additions & 148 deletions packages/frontend/src/app/components/leaderboard/LeaderboardTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,156 +7,167 @@ import Image from "next/image";
import React from "react";

const LeaderboardTable: React.FC<{
activeSeason: boolean;
leaderboard: MappedLeaderboard[];
activeSeason: boolean;
leaderboard: MappedLeaderboard[];
}> = ({ activeSeason, leaderboard: initialLeaderboard }) => {
const { user } = useWeb3AuthContext();

const leaderboard = activeSeason
? initialLeaderboard
: initialLeaderboard.slice(3);

const headings = ["#", "User", "Won", "Played", "Score"];

const rankingClasses: {
score: [string, string, string];
indicator: [string, string, string];
wrapper: [string, string, string];
} = {
score: [
"bg-[linear-gradient(180deg,_#FCE19A_0%,_#BD9350_100%)] text-transparent bg-clip-text",
"bg-[linear-gradient(180deg,_#F1F8FF_0%,_#7C8186_100%)] text-transparent bg-clip-text",
"bg-[linear-gradient(180deg,_#FFDDC6_0%,_#9E7259_100%)] text-transparent bg-clip-text",
],
indicator: ["bg-[#F6D887]", "bg-[#CCCCCC]", "bg-[#D3A085]"],
wrapper: [
"bg-[linear-gradient(90deg,_rgba(246,216,135,0.2)_0.5%,_rgba(246,216,135,0)_50%)]",
"bg-[linear-gradient(90deg,_rgba(204,204,204,0.2)_0.5%,_rgba(204,204,204,0)_50%)]",
"bg-[linear-gradient(90deg,_rgba(211,160,133,0.2)_0.5%,_rgba(211,160,133,0)_50%)]",
],
};

const rankingWreathImages: [string, string, string] = [
"/rank-one-wreath.png",
"/rank-two-wreath.png",
"/rank-three-wreath.png",
];

const yourIndex = leaderboard.findIndex(
({ player_id }) => user?.data.player_id === player_id
);

return (
<div className="w-full bg-neutral-700 rounded-lg text-left mb-4 pb-2">
<div className="grid grid-cols-12 text-neutral-300 font-normal text-body-2 p-4 gap-2">
{headings.map((heading, i) => (
<div
key={heading}
className={`${
i === 1 ? "col-span-4 text-left" : `col-span-2 text-center`
}`}
>
{heading}
</div>
))}
</div>

<div className="px-4">
{!leaderboard.length ? (
<p className="text-center py-2 text-body-3 text-neutral-200 bg-neutral-600 rounded-lg mb-2">
The first game of this season awaits!
</p>
) : (
leaderboard.map(
({
player_id,
profile_photo,
name,
wallet_address,
games_won,
games_played,
total_points,
rank,
}) => {
const you = user?.data.player_id === player_id;
const rankStyles = rank && rank <= 3 && activeSeason;

return (
<div
key={player_id}
className={`${
you
? "text-brand-400 border-brand-400"
: "border-neutral-600"
} ${
rankStyles ? rankingClasses.wrapper[rank - 1] : ""
} grid grid-cols-12 gap-2 py-4 items-center text-center bg-neutral-600 mb-4 relative rounded-lg border`}
>
{rankStyles ? (
<>
<div
className={`${rankingClasses.indicator[rank - 1]} absolute h-3/4 w-0.5 rounded-full`}
/>

<Image
alt=""
src={rankingWreathImages[rank - 1]}
height={22}
width={24}
className="col-span-2 mx-auto"
/>
</>
) : (
<p className="col-span-2">{rank}</p>
)}

<div className="col-span-4 flex items-center text-left">
{profile_photo && (
<Image
alt=""
src={profile_photo}
height={36}
width={36}
className="rounded-full mr-4"
/>
)}

<div className="text-ellipsis truncate w-full">
<p
className={`${you ? "text-brand-400" : ""} font-medium text-ellipsis w-full truncate`}
>
{name}
</p>

<p className="text-body-3 text-neutral-300">
{truncate(wallet_address).toUpperCase()}
</p>
</div>
</div>

<p className="col-span-2 text-center text-neutral-200">
{games_won?.toLocaleString()}
</p>

<p className="col-span-2 text-center text-neutral-200">
{games_played?.toLocaleString()}
</p>

<p className="col-span-2 text-center text-white">
<span
className={`${rankStyles ? rankingClasses.score[rank - 1] : ""}`}
const { user } = useWeb3AuthContext();

const leaderboard = activeSeason
? initialLeaderboard
: initialLeaderboard.slice(3);

const headings = ["#", "User", "Won", "Played", "Score"];

const rankingClasses: {
score: [string, string, string];
indicator: [string, string, string];
wrapper: [string, string, string];
} = {
score: [
"bg-[linear-gradient(180deg,_#FCE19A_0%,_#BD9350_100%)] text-transparent bg-clip-text",
"bg-[linear-gradient(180deg,_#F1F8FF_0%,_#7C8186_100%)] text-transparent bg-clip-text",
"bg-[linear-gradient(180deg,_#FFDDC6_0%,_#9E7259_100%)] text-transparent bg-clip-text",
],
indicator: ["bg-[#F6D887]", "bg-[#CCCCCC]", "bg-[#D3A085]"],
wrapper: [
"bg-[linear-gradient(90deg,_rgba(246,216,135,0.2)_0.5%,_rgba(246,216,135,0)_50%)]",
"bg-[linear-gradient(90deg,_rgba(204,204,204,0.2)_0.5%,_rgba(204,204,204,0)_50%)]",
"bg-[linear-gradient(90deg,_rgba(211,160,133,0.2)_0.5%,_rgba(211,160,133,0)_50%)]",
],
};

const rankingWreathImages: [string, string, string] = [
"/rank-one-wreath.png",
"/rank-two-wreath.png",
"/rank-three-wreath.png",
];

const yourIndex = leaderboard.findIndex(
({ player_id }) => user?.data.player_id === player_id,
);

return (
<div className="mb-4 w-full rounded-lg pb-2 text-left">
<div className="grid grid-cols-12 gap-2 p-4 text-body-2 font-normal text-neutral-300">
{headings.map((heading, i) => (
<div
key={heading}
className={`${
i === 1
? "col-span-4 text-left"
: `col-span-2 text-center`
}`}
>
{total_points?.toLocaleString()}
</span>
</p>
</div>
);
}
)
)}
</div>
</div>
);
{heading}
</div>
))}
</div>

<div className="px-4">
{!leaderboard.length ? (
<p className="mb-2 rounded-lg bg-neutral-600 py-2 text-center text-body-3 text-neutral-200">
The first game of this season awaits!
</p>
) : (
leaderboard.map(
({
player_id,
profile_photo,
name,
wallet_address,
games_won,
games_played,
total_points,
rank,
}) => {
const you = user?.data.player_id === player_id;
const rankStyles =
rank && rank <= 3 && activeSeason;

return (
<div
key={player_id}
className={`${
you
? "border-brand-400 text-brand-400"
: "border-neutral-600"
} ${
rankStyles
? rankingClasses.wrapper[rank - 1]
: ""
} relative mb-4 grid grid-cols-12 items-center gap-2 rounded-lg border bg-neutral-600 py-4 text-center`}
>
{rankStyles ? (
<>
<div
className={`${rankingClasses.indicator[rank - 1]} absolute h-3/4 w-0.5 rounded-full`}
/>

<Image
alt=""
src={
rankingWreathImages[
rank - 1
]
}
height={22}
width={24}
className="col-span-2 mx-auto"
/>
</>
) : (
<p className="col-span-2">{rank}</p>
)}

<div className="col-span-4 flex items-center text-left">
{profile_photo && (
<Image
alt=""
src={profile_photo}
height={36}
width={36}
className="mr-2 rounded-full"
/>
)}

<div className="w-full truncate text-ellipsis">
<p
className={`${you ? "text-brand-400" : ""} w-full truncate text-ellipsis font-medium`}
>
{name}
</p>

<p className="text-body-3 text-neutral-300">
{truncate(
wallet_address,
).toUpperCase()}
</p>
</div>
</div>

<p className="col-span-2 text-center text-neutral-200">
{games_won?.toLocaleString()}
</p>

<p className="col-span-2 text-center text-neutral-200">
{games_played?.toLocaleString()}
</p>

<p className="col-span-2 text-center text-white">
<span
className={`${rankStyles ? rankingClasses.score[rank - 1] : ""}`}
>
{total_points?.toLocaleString()}
</span>
</p>
</div>
);
},
)
)}
</div>
</div>
);
};

export default LeaderboardTable;
12 changes: 6 additions & 6 deletions packages/frontend/src/app/components/leaderboard/leaderboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export const Leaderboard: React.FC = () => {

return (
<main className="gap-y-6 text-neutral-100">
<h1 className="text-center font-display text-heading-1 font-bold tracking-widest">
<h1 className="py-4 text-center font-display text-heading-1 font-bold tracking-widest">
Leaderboard
</h1>

Expand All @@ -81,7 +81,7 @@ export const Leaderboard: React.FC = () => {
selectedSeasonActive
? "bg-[linear-gradient(90deg,_rgba(18,18,21,0.2)_0%,_rgba(232,157,15,0.2)_30%,_rgba(232,157,15,0.2)_60%,_rgba(18,18,21,0.2)_100%)]"
: "bg-[linear-gradient(90deg,_rgba(18,18,21,0.2)_0%,_#1F1F24_30%,_#1F1F24_60%,_rgba(18,18,21,0.2)_100%)] text-neutral-200"
} mb-4 mt-2 py-2 text-center`}
} mb-4 mt-2 py-2 text-center text-body-3 font-light`}
>
{selectedSeason &&
(selectedSeasonActive
Expand Down Expand Up @@ -198,8 +198,8 @@ export const Leaderboard: React.FC = () => {
</div>
</div>
) : (
<div className="mb-4 h-72 w-full overflow-hidden rounded-xl border border-purple-800 bg-active-leaderboard bg-cover bg-center">
<figure className="mx-auto h-48 scale-[2]">
<div className="mb-4 h-48 w-full overflow-hidden rounded-xl border border-purple-800 bg-active-leaderboard bg-cover bg-center">
<figure className="mx-auto h-28 scale-[2]">
<Lottie
options={{
loop: true,
Expand All @@ -209,13 +209,13 @@ export const Leaderboard: React.FC = () => {
/>
</figure>

<div className="mt-6 gap-y-2 text-center">
<div className="mt-4 text-center">
<p className="text-heading-1 font-semibold text-neutral-100">
$
{selectedSeason.reward_pool_usd.toLocaleString()}
</p>

<p className="mt-2 text-body-3 font-normal text-neutral-200">
<p className="mt-1 text-body-3 font-normal text-neutral-200">
Amount Pooled
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/app/components/profile/ChainSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function ChainSelector() {
isSelectedChain
? "bg-neutral-500 text-neutral-100"
: "text-neutral-300"
} my-4 flex w-full cursor-pointer items-center gap-x-4 rounded-lg px-4 py-3 transition-all hover:text-neutral-100`}
} my-2 flex w-full cursor-pointer items-center gap-x-4 rounded-lg px-4 py-3 transition-all hover:text-neutral-100`}
onClick={() => {
handleChainChange(chain);
}}
Expand All @@ -70,7 +70,7 @@ export function ChainSelector() {
]}
dropdownClassname="w-full"
>
<div className="flex cursor-pointer items-center justify-between rounded-lg border border-neutral-400 p-4">
<div className="flex cursor-pointer items-center justify-between rounded-lg border border-neutral-400 px-4 py-3">
{loading ? (
<p className="py-1 text-body-2 text-neutral-200">
Updating the chain...
Expand Down
Loading

0 comments on commit 5634f6d

Please sign in to comment.