PLEASE

components/cards/card.tsx

@@ -12,7 +12,7 @@ export default function Card({ children, id, title, tooltip }: CardProps) {
  const tooltipId = `card-tooltip-${id}`;
 
  return (
- <div className='flex flex-col justify-center rounded-lg border max-w-full'
+ <div className='flex flex-col justify-center rounded-lg border max-w-full w-fit'
  id={id}
  style={{
  backgroundColor: 'var(--bg-color-2)',

components/level/info/formattedLevelInfo.tsx

@@ -232,7 +232,7 @@ export default function FormattedLevelInfo({ level }: FormattedLevelInfoProps) {
  backgroundColor: 'var(--bg-color-4)',
  height: 1,
  }} />
- <div className='flex flex-col gap-2'>
+ <div className='flex flex-col gap-4'>
  <Tab.Group selectedIndex={levelContext?.sidebarIndex} onChange={levelContext?.setSidebarIndex}>
  <Tab.List className='flex flex-wrap gap-x-1 items-start rounded-[10px] p-1 border w-fit' style={{
  borderColor: 'var(--bg-color-4)',
@@ -243,7 +243,7 @@ export default function FormattedLevelInfo({ level }: FormattedLevelInfoProps) {
  }
  }}>
  {({ selected }) => (
- <div className={classNames('py-1 px-2 rounded-md', selected ? 'tab-active' : 'tab')}>
+ <div className={classNames('py-1 px-2 rounded-md transition', selected ? 'tab-active' : 'tab')}>
  Reviews
  </div>
  )}
@@ -254,7 +254,7 @@ export default function FormattedLevelInfo({ level }: FormattedLevelInfoProps) {
  }
  }}>
  {({ selected }) => (
- <div className={classNames('py-1 px-2 rounded-md', selected ? 'tab-active' : 'tab')}>
+ <div className={classNames('py-1 px-2 rounded-md transition', selected ? 'tab-active' : 'tab')}>
  Suggestions
  </div>
  )}

components/level/info/suggestedPanel.tsx

@@ -1,35 +1,42 @@
 import DidYouKnowTip from '@root/components/page/didYouKnowTip';
+import { LevelContext } from '@root/contexts/levelContext';
 import useHomePageData, { HomepageDataType } from '@root/hooks/useHomePageData';
-import Collection from '@root/models/db/collection';
 import Level, { EnrichedLevel } from '@root/models/db/level';
 import User from '@root/models/db/user';
 import Link from 'next/link';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Card from '../../cards/card';
 import ChapterSelectCard from '../../cards/chapterSelectCard';
 import RecommendedLevel from '../../homepage/recommendedLevel';
 
 interface SuggestedPanelProps {
- chapter?: string;
- collection?: Collection;
  level: Level;
  reqUser: User | undefined | null;
 }
 
-export default function SuggestedPanel({ chapter, collection, level, reqUser }: SuggestedPanelProps) {
+export default function SuggestedPanel({ level, reqUser }: SuggestedPanelProps) {
+ const levelContext = useContext(LevelContext);
+
+ const collection = levelContext?.collection;
+ const chapter = levelContext?.chapter;
  let nextLevel: EnrichedLevel | undefined = undefined;
  let lastLevelInCollection = false;
 
+ console.log(collection);
+
  if (collection && collection.levels) {
  const levelIndex = collection.levels.findIndex((l) => l._id === level._id);
 
+ console.log(levelIndex, collection.levels.length);
+
  if (levelIndex + 1 < collection.levels.length) {
  nextLevel = collection.levels[levelIndex + 1] as EnrichedLevel;
  } else {
  lastLevelInCollection = true;
  }
  }
 
+ // TODO: don't use SWR here, or at least don't refetch every time you switch to the panel
  const { data } = useHomePageData([HomepageDataType.RecommendedLevel], nextLevel !== undefined);
  const recommendedLevel = data && data[HomepageDataType.RecommendedLevel];
  const [queryParams, setQueryParams] = useState({});
@@ -45,15 +52,7 @@ export default function SuggestedPanel({ chapter, collection, level, reqUser }:
  const hrefOverride = nextLevel ? `/level/${nextLevel.slug}?${queryParams}` : undefined;
 
  return (<>
- <div className='flex flex-col gap-1'>
- <h3 className='text-center text-2xl p-1'>
- Congratulations!
- </h3>
- <h4 className='text-md'>
- You completed {level.name}!
- </h4>
- </div>
- <div className='flex flex-col gap-4 justify-center items-center'>
+ <div className='flex flex-col gap-4'>
  {!reqUser ?
  <div className='text-center'>
  <Link href='/signup' className='underline font-bold'>Sign up</Link> (or use a <Link href='/play-as-guest' className='underline font-bold'>Guest Account</Link>) to save your progress and get access to more features.
@@ -65,10 +64,10 @@ export default function SuggestedPanel({ chapter, collection, level, reqUser }:
  {level.name} is the last level in <Link className='font-bold hover:underline' href={`/collection/${collection.slug}`}>{collection.name}</Link>.
  </div>
  }
- {chapter && !isNaN(Number(chapter)) ?
+ {chapter !== undefined && lastLevelInCollection ?
  <Card id='campaign' title='Head back to the campaign!'>
  <div className='p-3'>
- <ChapterSelectCard chapter={Number(chapter)} />
+ <ChapterSelectCard chapter={chapter} />
  </div>
  </Card>
  :

contexts/levelContext.ts

@@ -1,3 +1,4 @@
+import Collection from '@root/models/db/collection';
 import { createContext } from 'react';
 import { KeyedMutator } from 'swr';
 import ProStatsLevelType from '../constants/proStatsLevelType';
@@ -45,6 +46,8 @@ export interface ProStatsCommunityStepData {
 }
 
 interface LevelContextInterface {
+ chapter: number | undefined;
+ collection: Collection | undefined;
  getReviews: () => void;
  inCampaign: boolean; // true means you are playing an unbeaten level in the campaign
  level: EnrichedLevel;

pages/level/[username]/[slugName].tsx

@@ -66,6 +66,7 @@ export default function LevelPage({ _level, reqUser }: LevelProps) {
  // handle pressing "Next level"
  useEffect(() => {
  setLevel(_level);
+ setSidebarIndex(0);
  }, [_level]);
 
  const mutateLevel = useCallback(() => {
@@ -218,6 +219,8 @@ export default function LevelPage({ _level, reqUser }: LevelProps) {
  }}
  />
  <LevelContext.Provider value={{
+ chapter: !isNaN(Number(chapter)) ? Number(chapter) : undefined,
+ collection: collection,
  getReviews: getReviews,
  inCampaign: !!chapter && level.userMoves !== level.leastMoves,
  level: level,