import { m } from "framer-motion";
import Head from "next/head";
import { useRouter } from "next/router";
import { ReactElement, useEffect, useState } from "react";
import DashLayout from "../../../layouts/DashLayout";
import Image from "next/image";
import Loading from "../../../components/common/Loading";
// TODO: Animations
function UserPage() {
const [channelEmotes, setChannelEmotes] = useState<{
[key: string]: { [key: string]: string };
}>({});
const [userData, setUserData] = useState<{ [key: string]: any }>({});
const [errorCode, setErrorCode] = useState<number | null>(null);
const router = useRouter();
const { username } = router.query;
const title = username ? `${username} - toffee` : "toffee";
useEffect(() => {
if (!router.isReady) return;
fetch("/api/7tv/emotes?c=61ad997effa9aba101bcfddf")
.then((res) => res.json())
.then((data) => {
// if error, return
if (data.error) {
setErrorCode(data.error.code);
return;
}
// construct js object with emote names as keys and emote urls as values
let emotes: { [key: string]: string } = {};
data.channel.user.emote_sets[0].emotes.forEach((emote: any) => {
let base_url = emote.data.host.url;
// get the largest emote size, append it to the base url
let largest = emote.data.host.files[emote.data.host.files.length - 1];
emotes[emote.data.name] = `https:${base_url}/${largest.name}`;
});
// same for global emotes
data.global.namedEmoteSet.emotes.forEach((emote: any) => {
let base_url = emote.data.host.url;
let largest = emote.data.host.files[emote.data.host.files.length - 1];
emotes[emote.data.name] = `https:${base_url}/${largest.name}`;
});
// set 7tv key to channelEmotes
setChannelEmotes((prev) => ({ ...prev, "7tv": emotes }));
});
fetch("/api/bttv/emotes?c=56418014")
.then((res) => res.json())
.then((data) => {
if (data.error) {
setErrorCode(data.error.code);
return;
}
let emotes: { [key: string]: string } = {};
data.channel.forEach((emote: any) => {
emotes[emote.code] = `https://cdn.betterttv.net/emote/${emote.id}/3x`;
});
data.global.forEach((emote: any) => {
emotes[emote.code] = `https://cdn.betterttv.net/emote/${emote.id}/3x`;
});
// add as bttv key to channelEmotes
setChannelEmotes((prev) => ({ ...prev, bttv: emotes }));
});
fetch("/api/ffz/emotes?s=341402")
.then((res) => res.json())
.then((data) => {
if (data.error) {
setErrorCode(data.error.code);
return;
}
let emotes: { [key: string]: string } = {};
data.channel.forEach((emote: any) => {
// ffz emotes don't have all sizes available, so we need to get the largest one by taking the largest key in the urls object
emotes[emote.name] = `https:${
emote.urls[
Math.max(...Object.keys(emote.urls).map((k) => parseInt(k)))
]
}`;
});
data.global.forEach((emote: any) => {
emotes[emote.name] = `https:${
emote.urls[
Math.max(...Object.keys(emote.urls).map((k) => parseInt(k)))
]
}`;
});
// add as ffz key to channelEmotes
setChannelEmotes((prev) => ({ ...prev, ffz: emotes }));
});
fetch("/api/twitch/emotes?c=56418014")
.then((res) => res.json())
.then((data) => {
if (data.error) {
setErrorCode(data.error.code);
return;
}
let emotes: { [key: string]: string } = {};
data.channel.forEach((emote: any) => {
emotes[emote.name] = emote.images["url_4x"];
});
data.global.forEach((emote: any) => {
emotes[emote.name] = emote.images["url_4x"];
});
// add as twitch key to channelEmotes
setChannelEmotes((prev) => ({ ...prev, ttv: emotes }));
});
fetch(`/api/fakeUsers?u=${username}`)
.then((res) => res.json())
.then((data) => {
if (data.error) {
setErrorCode(data.error.code);
}
setUserData(data.data);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [router.isReady]);
if (errorCode !== null) {
// 20000 = user not found
// 10000 = 7tv api error
// 10100 = Twitch api error
// 10200 = BTTV api error
// 10300 = FFZ api error
const errorMsg = errorCode === 20000 ? "User not found" : "API error";
return (
<m.div
className="flex h-screen w-full items-center justify-center text-3xl"
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0, transition: { duration: 1.0 } }}
exit={{ opacity: 0, y: -25 }}
>
<p>{errorMsg}</p>
</m.div>
);
}
// if json is empty, and if channelEmotes is incomplete, show loading screen
if (
Object.keys(channelEmotes).length < 4 ||
!userData ||
Object.keys(userData).length === 0
) {
return (
<div className="flex h-screen w-full items-center justify-center text-3xl">
<Loading />
</div>
);
}
console.log(channelEmotes);
return (
<>
<Head>
<title>{title}</title>
<meta
name="description"
content={`${username}'s portfolio on toffee`}
/>
</Head>
<div className="flex justify-center">
<div className="mt-7 inline-grid w-[calc(100%-40px)] max-w-5xl grid-cols-10 gap-3 pl-2 font-plusJakarta lg:mt-12 lg:pl-0 lg:pr-2">
{/* User "banner" */}
<div className="col-span-10 mb-2 rounded-2xl bg-zinc-800 bg-opacity-70 p-3">
<div className="flex items-center justify-between p-4">
<div className="flex flex-row items-center">
<div className="relative bottom-[70px] w-[169px]">
<Image
src={userData.avatar_url}
alt="User avatar"
width={140}
height={140}
priority
className="absolute rounded-lg border-4"
style={{
borderColor: userData.badges[0]
? userData.badges[0].color
: "grey",
// "glow" effect
boxShadow: `0px 0px 20px 1px ${
userData.badges[0]
? userData.badges[0].color
: "transparent"
}`,
}}
/>
</div>
<div className="flex-col">
<h1 className="text-4xl font-semibold text-white">
{userData.name}
</h1>
{/* User's badges */}
<div className="mt-1 flex flex-row text-sm">
{userData.badges ? (
userData.badges.map(
(badge: {
name: string;
color: string;
priority: number;
}) => {
return (
<div
style={{ backgroundColor: badge.color }}
className="mr-1 rounded-md bg-purple-500 px-2"
key={badge.name}
>
<span className="text-white">{badge.name}</span>
</div>
);
}
)
) : (
<></>
)}
</div>
</div>
</div>
<div className="hidden md:block">
<h1>
<span className="text-4xl font-semibold text-zinc-400">
$
</span>
<span className="text-4xl text-white">
{userData.net_worth.toLocaleString("en-US")}
</span>
</h1>
</div>
</div>
</div>
{/* Main Container */}
<div className="col-span-10 inline-grid grid-cols-7 gap-3 rounded-2xl lg:col-span-7">
{/* User's Rank/Graph */}
<div className="col-span-7 rounded-2xl bg-zinc-800 bg-opacity-70">
<div className="flex flex-row items-center justify-between p-5">
<div className="flex-col px-2">
<h1 className="mb-1 whitespace-nowrap text-center text-xl font-medium text-white underline">
Global Rank
</h1>
<div className="flex items-center text-3xl font-bold">
<span className="text-zinc-400">#</span>
<span className="text-white">
{userData.rank.toLocaleString("en-US")}
</span>
</div>
</div>
<div className="hidden md:block">
<Image
src="/img/well_drawn_rank_chart.webp"
alt="Rank chart"
width={497}
height={100}
/>
</div>
<div className="md:hidden">
<h1>
<span className="text-3xl font-semibold text-zinc-400 sm:text-4xl">
$
</span>
<span className="text-3xl text-white sm:text-4xl">
{userData.net_worth.toLocaleString("en-US")}
</span>
</h1>
</div>
</div>
</div>
{/* User's Assets */}
<div className="col-span-7 flex flex-col rounded-2xl bg-zinc-800 bg-opacity-70">
{/* User's Assets Header */}
<div className="h-11 w-full rounded-t-2xl bg-pink-400">
<h1 className="m-1 text-center text-2xl font-bold">
Top Assets
</h1>
</div>
{/* User's Assets Body */}
<div className="inline-grid grid-cols-2 items-center justify-start gap-2 p-5 sm:grid-cols-3 xl:grid-cols-4">
{errorCode === 20000 ? (
<h1 className=" text-zinc-400">{`Could not load assets`}</h1>
) : (
userData.assets.map(
(asset: {
name: string;
count: number;
provider: string;
}) => (
<div
className="flex items-center justify-center"
key={asset.name}
>
<div className="flex h-44 w-full max-w-[256px] flex-col items-center rounded-xl bg-zinc-900 bg-opacity-80 p-2">
<div className="mt-2 mb-2 h-24 w-24">
<div className="flex h-full w-full items-center justify-start p-2">
{
// if error code is 10000 or emote does not exist, show placeholder image
errorCode === 10000 ||
channelEmotes[asset.provider] === undefined ||
channelEmotes[asset.provider][asset.name] ===
undefined ? (
<h1 className="text-center text-zinc-400">{`404 :(`}</h1>
) : (
<Image
src={
channelEmotes[asset.provider][
asset.name
] ?? ""
}
alt={asset.name}
width={100}
height={100}
className="max-h-[100px]"
/>
)
}
{/* Fix asset count to bottom right of image */}
<div className="relative rounded-full bg-zinc-900 bg-opacity-80 p-1">
<p
className="absolute -bottom-10 -right-2 -rotate-12 text-lg font-bold text-white"
style={{ textShadow: "0px 0px 4px black" }}
>
x{asset.count}
</p>
</div>
</div>
</div>
<div className="flex w-full flex-row items-center justify-center">
{
// show provider logo (7tv, bttv, ffz, ttv)
asset.provider === "7tv" ? (
<div className="mr-1 pt-[1px] text-7tv ">
<SevenTVLogo />
</div>
) : asset.provider === "bttv" ? (
<div className="mr-1 pt-[1px] text-bttv">
<BTTVLogo />
</div>
) : asset.provider === "ffz" ? (
<div className="h-5 w-6 text-white">
<FFZLogo />
</div>
) : (
<div className="mr-1 w-4 pt-[1px] text-ttv">
<TwitchLogo />
</div>
)
}
<p className="text-md max-w-[80%] overflow-hidden overflow-ellipsis whitespace-nowrap font-bold text-white">
{asset.name}
</p>
</div>
</div>
</div>
)
)
)}
</div>
</div>
</div>
{/* Sidebar */}
<div className="col-span-10 flex flex-col justify-start md:flex-row lg:col-span-3 lg:flex-col">
<div className="center mb-3 mr-3 inline-grid grid-cols-2 gap-3 rounded-2xl bg-zinc-800 bg-opacity-70 p-5 text-xl font-medium lg:mr-0">
{/* User's Stats, left side is label, right side is value */}
<h1>Points</h1>
<h1>{userData.points.toLocaleString("en-US")}</h1>
<h1>Shares</h1>
<h1>{userData.shares.toLocaleString("en-US")}</h1>
<h1>Trades</h1>
<h1>{(userData.trades ?? 0).toLocaleString("en-US")}</h1>
<h1>Peak rank</h1>
<h1>{(userData.peak_rank ?? 0).toLocaleString("en-US")}</h1>
<h1>Joined</h1>
<h1>
{new Date(userData.joined ?? 0).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
})}
</h1>
</div>
{/* User's Favorite Emote */}
<div className="flex flex-col rounded-2xl bg-zinc-800 bg-opacity-70">
<div className="h-11 w-full rounded-t-2xl bg-pink-400">
<h1 className="m-1 text-center text-2xl font-bold">
Favorite Emote
</h1>
</div>
<div>
<p className="m-5 text-lg text-zinc-400">
This user has not yet set a favorite emote.
</p>
</div>
</div>
</div>
</div>
</div>
</>
);
}
const SevenTVLogo = () => {
return (
<svg viewBox="0 0 109.6 80.9" width="1em">
<g>
<path
d="M84.1,22.2l5-8.7,2.7-4.6L86.8.2V0H60.1l5,8.7,5,8.7,2.8,4.8H84.1"
fill="currentColor"
></path>
<path
d="M29,80.6l5-8.7,5-8.7,5-8.7,5-8.7,5-8.7,5-8.7L62.7,22l-5-8.7-5-8.7L49.9.1H7.7l-5,8.7L0,13.4l5,8.7v.2h32l-5,8.7-5,8.7-5,8.7-5,8.7-5,8.7L8.5,72l5,8.7v.2H29"
fill="currentColor"
></path>
<path
d="M70.8,80.6H86.1l5-8.7,5-8.7,5-8.7,5-8.7,3.5-6-5-8.7v-.2H89.2l-5,8.7-5,8.7-.7,1.3-5-8.7-5-8.7-.7-1.3-5,8.7-5,8.7L55,53.1l5,8.7,5,8.7,5,8.7.8,1.4"
fill="currentColor"
></path>
</g>
</svg>
);
};
const FFZLogo = () => {
return (
<svg viewBox="0 0 396 396">
<path
d="m150.06,151.58c-.77-6.33.31-12.45,1.99-18.5,2.37-8.51,9.11-14.22,15.62-18.44,8.71-5.65,18.98-8.6,30.02-8.89,7.26-.19,12.89,3.13,18.17,6.2,3.98,2.32,7.8,6.66,10.25,11.43,2.99,5.83,5.92,11.51,7.05,18.18,1.17,6.9,4.69,13.3,9.05,18.55,4.61,5.55,5.63,11.86,5.53,18.1-.15,8.77,3.32,16.07,6.61,23.64.93,2.14,2.15,3.87,4.76,3.08,2.58-.77,4.04-2.69,3.78-5.44-.32-3.41-.64-6.86-1.43-10.18-1.01-4.18-1.54-8.31-1.45-12.65.19-9.37,6.06-15.83,12.06-21.43,5.81-5.44,9.29-4.23,15.15,1.48,7.52,7.32,14.31,15.22,18.49,24.91,3.86,8.94,7.62,17.97,10.54,27.24,1.79,5.7,2.26,11.9,2.71,17.92.35,4.7-2.69,8.43-6.01,11.17-12.05,9.97-24.04,20.06-38.64,26.39-3.06,1.32-5.93,3.65-8.27,5.9-4.3,4.13-8.7,4.8-14.22,3.81-6.67-1.2-12.21,2.2-17.76,5.37-10.83,6.19-21.98,11.44-34.99,10.56-2.65-.18-5.35-.19-7.99.05-9.67.89-18.35-1.86-26.44-6.91-5.06-3.16-10.74-5.27-15.39-9.12-.62-.51-1.58-.75-1.96-1.37-3.61-5.84-8.03-5.41-13.72-2.82-7.66,3.48-8.07,3.02-13.2-3.77-3.48-4.6-8.91-6.59-13.27-10.01-11.43-8.97-22.52-18.11-29.39-31.42-2.17-4.21-2.9-8.38-2.59-12.82.76-10.87,1-21.85,7.82-31.3,6.01-8.32,10.79-17.68,19.29-23.9,5.9-4.32,10.15-2.9,14.27,3.26,6.93,10.36,7.99,21.4,4.42,33.03-1.46,4.76-.62,9.52-.8,14.28-.09,2.23,2.26,4.61,3.36,4.24,2.47-.83,5.83.99,7.52-2.37,5.96-11.87,14.26-22.67,17.36-35.82,1.65-7.02,2.21-14.34,1.72-21.63Z"
fill="currentColor"
/>
</svg>
);
};
const BTTVLogo = () => {
return (
<svg viewBox="0 0 300 300" height="1em">
<path
fill="transparent"
d="M249.771 150A99.771 99.922 0 0 1 150 249.922 99.771 99.922 0 0 1 50.229 150 99.771 99.922 0 0 1 150 50.078 99.771 99.922 0 0 1 249.771 150Z"
></path>
<path
fill="currentColor"
d="M150 1.74C68.409 1.74 1.74 68.41 1.74 150S68.41 298.26 150 298.26h148.26V150.17h-.004c0-.057.004-.113.004-.17C298.26 68.409 231.59 1.74 150 1.74zm0 49c55.11 0 99.26 44.15 99.26 99.26 0 55.11-44.15 99.26-99.26 99.26-55.11 0-99.26-44.15-99.26-99.26 0-55.11 44.15-99.26 99.26-99.26z"
></path>
<path
fill="currentColor"
d="M161.388 70.076c-10.662 0-19.42 7.866-19.42 17.67 0 9.803 8.758 17.67 19.42 17.67 10.662 0 19.42-7.867 19.42-17.67 0-9.804-8.758-17.67-19.42-17.67zm45.346 24.554-.02.022-.004.002c-5.402 2.771-11.53 6.895-18.224 11.978l-.002.002-.004.002c-25.943 19.766-60.027 54.218-80.344 80.33h-.072l-1.352 1.768c-5.114 6.69-9.267 12.762-12.098 18.006l-.082.082.022.021v.002l.004.002.174.176.052-.053.102.053-.07.072c30.826 30.537 81.213 30.431 111.918-.273 30.783-30.784 30.8-81.352.04-112.152l-.005-.004zM87.837 142.216c-9.803 0-17.67 8.758-17.67 19.42 0 10.662 7.867 19.42 17.67 19.42 9.804 0 17.67-8.758 17.67-19.42 0-10.662-7.866-19.42-17.67-19.42z"
></path>
</svg>
);
};
const TwitchLogo = () => {
return (
<svg x="0px" y="0px" viewBox="0 0 2400 2800">
<g>
<polygon
className="fill-white"
points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200"
/>
<g>
<g id="Layer_1-2">
<path
fill="currentColor"
d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600 V1300z"
/>
<rect
x="1700"
y="550"
fill="currentColor"
width="200"
height="600"
/>
<rect
x="1150"
y="550"
fill="currentColor"
width="200"
height="600"
/>
</g>
</g>
</g>
</svg>
);
};
UserPage.getLayout = function getLayout(page: ReactElement) {
return <DashLayout>{page}</DashLayout>;
};
export default UserPage;