Sidebar v2

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/gameWrapper.tsx

@@ -1,3 +1,4 @@
+import { LevelContext } from '@root/contexts/levelContext';
 import { PageContext } from '@root/contexts/pageContext';
 import React, { useContext, useEffect, useState } from 'react';
 import Collection from '../../models/db/collection';
@@ -16,6 +17,7 @@ interface GameWrapperProps {
 }
 
 export default function GameWrapper({ chapter, collection, level, onNext, onPrev, user }: GameWrapperProps) {
+ const levelContext = useContext(LevelContext);
  const [postGameModalOpen, setShowPostGameModalOpen] = useState(false);
  const { setPreventKeyDownEvent } = useContext(PageContext);
 
@@ -34,7 +36,8 @@ export default function GameWrapper({ chapter, collection, level, onNext, onPrev
  level={level}
  onNext={collection ? onNext : undefined}
  onPrev={collection ? onPrev : undefined}
- onSolve={() => setTimeout(() => setShowPostGameModalOpen(true), 200)}
+ // onSolve={() => setTimeout(() => setShowPostGameModalOpen(true), 200)}
+ onSolve={() => levelContext && levelContext.setSidebarIndex(1)}
  />
  <PostGameModal
  chapter={chapter}

components/level/info/formattedLevelInfo.tsx

@@ -2,6 +2,7 @@ import { Tab } from '@headlessui/react';
 import FormattedDate from '@root/components/formatted/formattedDate';
 import FormattedLevelReviews from '@root/components/formatted/formattedLevelReviews';
 import Solved from '@root/components/level/info/solved';
+import classNames from 'classnames';
 import Image from 'next/image';
 import React, { useContext, useState } from 'react';
 import toast from 'react-hot-toast';
@@ -21,6 +22,7 @@ import UnpublishLevelModal from '../../modal/unpublishLevelModal';
 import LevelInfoCompletions from './levelInfoCompletions';
 import LevelInfoPlayTime from './levelInfoPlayTime';
 import LevelInfoRecords from './levelInfoRecords';
+import SuggestedPanel from './suggestedPanel';
 
 interface FormattedLevelInfoProps {
  level: EnrichedLevel;
@@ -226,11 +228,47 @@ export default function FormattedLevelInfo({ level }: FormattedLevelInfoProps) {
  level={level}
  />
  </>}
- {/* Reviews */}
  <div className='m-3' style={{
  backgroundColor: 'var(--bg-color-4)',
  height: 1,
  }} />
- <FormattedLevelReviews />
+ <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)',
+ }}>
+ <Tab id='leastStepsTab' className='focus:outline-none' onKeyDown={(e: React.KeyboardEvent) => {
+ if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+ e.preventDefault();
+ }
+ }}>
+ {({ selected }) => (
+ <div className={classNames('py-1 px-2 rounded-md transition', selected ? 'tab-active' : 'tab')}>
+ Reviews
+ </div>
+ )}
+ </Tab>
+ <Tab id='completionsTab' className='focus:outline-none' onKeyDown={(e: React.KeyboardEvent) => {
+ if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+ e.preventDefault();
+ }
+ }}>
+ {({ selected }) => (
+ <div className={classNames('py-1 px-2 rounded-md transition', selected ? 'tab-active' : 'tab')}>
+ Suggestions
+ </div>
+ )}
+ </Tab>
+ </Tab.List>
+ <Tab.Panels>
+ <Tab.Panel tabIndex={-1}>
+ <FormattedLevelReviews />
+ </Tab.Panel>
+ <Tab.Panel tabIndex={-1}>
+ <SuggestedPanel level={level} reqUser={user} />
+ </Tab.Panel>
+ </Tab.Panels>
+ </Tab.Group>
+ </div>
  </>);
 }

components/level/info/suggestedPanel.tsx

@@ -0,0 +1,86 @@
+import DidYouKnowTip from '@root/components/page/didYouKnowTip';
+import { LevelContext } from '@root/contexts/levelContext';
+import useHomePageData, { HomepageDataType } from '@root/hooks/useHomePageData';
+import Level, { EnrichedLevel } from '@root/models/db/level';
+import User from '@root/models/db/user';
+import Link from 'next/link';
+import React, { useContext, useEffect, useState } from 'react';
+import Card from '../../cards/card';
+import ChapterSelectCard from '../../cards/chapterSelectCard';
+import RecommendedLevel from '../../homepage/recommendedLevel';
+
+interface SuggestedPanelProps {
+ level: Level;
+ reqUser: User | undefined | null;
+}
+
+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({});
+
+ // NB: this useEffect only runs when entering the level page
+ // (moving between levels within a collection does not remount this component)
+ // this is ok for now because query params are currently never expected
+ // to change when going between two level pages
+ useEffect(() => {
+ setQueryParams(new URLSearchParams(window.location.search));
+ }, []);
+
+ const hrefOverride = nextLevel ? `/level/${nextLevel.slug}?${queryParams}` : undefined;
+
+ return (<>
+ <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.
+ </div>
+ :
+ <>
+ {lastLevelInCollection && collection &&
+ <div>
+ {level.name} is the last level in <Link className='font-bold hover:underline' href={`/collection/${collection.slug}`}>{collection.name}</Link>.
+ </div>
+ }
+ {chapter !== undefined && lastLevelInCollection ?
+ <Card id='campaign' title='Head back to the campaign!'>
+ <div className='p-3'>
+ <ChapterSelectCard chapter={chapter} />
+ </div>
+ </Card>
+ :
+ <RecommendedLevel
+ hrefOverride={hrefOverride}
+ id='next-level'
+ level={nextLevel ?? recommendedLevel}
+ title={nextLevel ? 'Next Level' : 'Try this next!'}
+ />
+ }
+ </>
+ }
+ <DidYouKnowTip reqUser={reqUser} />
+ </div>
+ </>);
+}

components/page/didYouKnowTip.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import React, { useRef } from 'react';
 
 interface DidYouKnowTipProps {
- reqUser: User | null;
+ reqUser: User | undefined | null;
 }
 
 export default function DidYouKnowTip({ reqUser }: DidYouKnowTipProps) {

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,14 +46,18 @@ 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;
  mutateLevel: () => void;
  mutateProStatsLevel: KeyedMutator<ProStatsLevel>;
+ proStatsLevel?: ProStatsLevel;
  records: Record[] | undefined;
  reviews: Review[] | undefined;
- proStatsLevel?: ProStatsLevel;
+ setSidebarIndex: React.Dispatch<React.SetStateAction<number>>;
+ sidebarIndex: number;
 }
 
 export const LevelContext = createContext<LevelContextInterface | null>(null);

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

@@ -59,12 +59,14 @@ export default function LevelPage({ _level, reqUser }: LevelProps) {
  const [level, setLevel] = useState(_level);
  const { mutateProStatsLevel, proStatsLevel } = useProStatsLevel(level);
  const router = useRouter();
+ const [sidebarIndex, setSidebarIndex] = useState(0);
  const { chapter, cid, slugName, ts, username } = router.query as LevelUrlQueryParams;
  const { collection } = useCollectionById(cid);
 
  // handle pressing "Next level"
  useEffect(() => {
  setLevel(_level);
+ setSidebarIndex(0);
  }, [_level]);
 
  const mutateLevel = useCallback(() => {
@@ -217,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,
@@ -225,6 +229,8 @@ export default function LevelPage({ _level, reqUser }: LevelProps) {
  proStatsLevel: proStatsLevel,
  records: records,
  reviews: reviews,
+ setSidebarIndex: setSidebarIndex,
+ sidebarIndex: sidebarIndex,
  }}>
  <Page
  folders={folders}