show rank on chapter select

pages/[subdomain]/play/index.tsx

@@ -1,7 +1,11 @@
 import UpsellFullAccount from '@root/components/home/upsellFullAccount';
+import LoadingSpinner from '@root/components/page/loadingSpinner';
+import PlayerRank from '@root/components/profile/playerRank';
 import { AppContext } from '@root/contexts/appContext';
 import { getGameFromId, getGameIdFromReq } from '@root/helpers/getGameIdFromReq';
+import useSWRHelper from '@root/hooks/useSWRHelper';
 import { GetServerSidePropsContext, NextApiRequest } from 'next';
+import Link from 'next/link';
 import React, { useContext } from 'react';
 import ChapterSelectCard from '../../../components/cards/chapterSelectCard';
 import Page from '../../../components/page/page';
@@ -38,14 +42,28 @@ interface PlayPageProps {
 export default function PlayPage({ reqUser }: PlayPageProps) {
  const { game } = useContext(AppContext);
  const chapterUnlocked = reqUser.config?.chapterUnlocked ?? 1;
+ const { data: profileDataFetched } = useSWRHelper<{levelsSolvedByDifficulty: {[key: string]: number}}>('/api/user/' + reqUser?._id + '?type=levelsSolvedByDifficulty', {}, {});
+
+ const levelsSolvedByDifficulty = profileDataFetched?.levelsSolvedByDifficulty;
 
  return (
  <Page title={'Play'}>
  <UpsellFullAccount user={reqUser} />
- <div className='flex flex-col items-center gap-8 p-4'>
+ <div className='flex flex-col items-center gap-2 px-2 mt-6'>
  <div className='font-bold text-3xl text-center' id='title'>
  {game.displayName} Official Campaign
  </div>
+ <div className='text-center flex flex-row gap-3 bg-gray-600 rounded-lg p-2'>
+ {
+ levelsSolvedByDifficulty ?
+ <><div className=''>Rank:</div>
+ <PlayerRank levelsSolvedByDifficulty={levelsSolvedByDifficulty} user={reqUser} />
+ </>
+ : <LoadingSpinner />
+ }
+ </div>
+ </div>
+ <div className='flex flex-col items-center gap-6 p-4'>
  <ChapterSelectCard chapter={1} chapterUnlocked={chapterUnlocked} />
  <ChapterSelectCard chapter={2} chapterUnlocked={chapterUnlocked} />
  <ChapterSelectCard chapter={3} chapterUnlocked={chapterUnlocked} />