Merge pull request #13 from CSSLab/v1-dev

Add tour tutorials to each page

Author: kevinjosethomas

package-lock.json

@@ -41,6 +41,7 @@
     "@types/chroma-js": "^2.1.3",
     "@types/node": "17.0.8",
     "@types/react": "19.0.8",
+    "@types/react-dom": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^5.9.1",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^8.2.3",

package.json

@@ -357,7 +357,10 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   }
 
   return analysisTournamentList ? (
-    <div className="flex h-full flex-col items-start justify-start overflow-hidden bg-background-1 md:rounded">
+    <div
+      id="analysis-game-list"
+      className="flex h-full flex-col items-start justify-start overflow-hidden bg-background-1 md:rounded"
+    >
       <div className="flex h-full w-full flex-col">
         <div className="grid select-none grid-cols-5 border-b-2 border-white border-opacity-10">
           <Header

src/components/Analysis/AnalysisGameList.tsx

@@ -62,6 +62,7 @@ const DesktopBlunderMeter: React.FC<Props> = ({
 }: Props) => {
   return (
     <div
+      id="analysis-blunder-meter"
       className={`flex h-64 max-h-full w-full flex-col gap-2 overflow-hidden rounded ${showContainer ? 'bg-background-1/60 p-3 md:w-auto md:min-w-[40%] md:max-w-[40%]' : ''} md:h-full`}
     >
       <p className="text-sm text-primary xl:text-base">Blunder Meter</p>
@@ -116,6 +117,7 @@ const MobileBlunderMeter: React.FC<Props> = ({
 }: Props) => {
   return (
     <div
+      id="analysis-blunder-meter"
       className={`flex w-full flex-col gap-2 overflow-hidden rounded ${showContainer ? 'bg-background-1/60 p-3' : ''}`}
     >
       <p className="text-sm text-primary xl:text-base">Blunder Meter</p>

src/components/Analysis/BlunderMeter.tsx

@@ -126,7 +126,10 @@ export const Highlight: React.FC<Props> = ({
   }, [boardDescription])
 
   return (
-    <div className="flex h-full w-full flex-col border-white/40 bg-background-1">
+    <div
+      id="analysis-highlight"
+      className="flex h-full w-full flex-col border-white/40 bg-background-1"
+    >
       <div className="grid grid-cols-2 border-b border-white/20">
         <div className="flex flex-col items-center justify-start gap-0.5 border-r border-white/20 bg-human-3/5 xl:gap-1">
           <div className="relative flex w-full flex-col border-b border-white/5">

src/components/Analysis/Highlight.tsx

@@ -170,6 +170,7 @@ export const MoveMap: React.FC<Props> = ({
 
   return (
     <div
+      id="analysis-move-map"
       className="flex h-64 max-h-full w-full flex-col overflow-hidden bg-background-1/60 md:h-full md:rounded"
       onMouseLeave={onContainerMouseLeave}
     >

src/components/Analysis/MoveMap.tsx

@@ -37,7 +37,10 @@ export const MovesByRating: React.FC<Props> = ({
   const domain = [0, domainMax]
 
   return (
-    <div className="flex h-64 w-full flex-col md:h-full">
+    <div
+      id="analysis-moves-by-rating"
+      className="flex h-64 w-full flex-col md:h-full"
+    >
       <h2 className="p-3 text-sm text-primary xl:text-base">Moves by Rating</h2>
       <ResponsiveContainer width="100%" height="100%">
         <AreaChart

src/components/Analysis/MovesByRating.tsx

@@ -182,7 +182,10 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
               <StatsDisplay stats={stats} hideSession={true} />
             </div>
           </div>
-          <div className="relative flex aspect-square w-full max-w-[75vh]">
+          <div
+            id="play-page"
+            className="relative flex aspect-square w-full max-w-[75vh]"
+          >
             <GameBoard
               game={game}
               availableMoves={availableMovesMapped}

src/components/Board/GameplayInterface.tsx

@@ -1,7 +1,8 @@
 import { useContext } from 'react'
 
-import { ModalContext } from 'src/contexts'
+import { ModalContext, useTour } from 'src/contexts'
 import { InstructionsType } from 'src/components'
+import { tourConfigs } from 'src/config/tours'
 
 interface Props {
   icon: string
@@ -27,6 +28,7 @@ export const GameInfo: React.FC<Props> = ({
   onGameListClick,
 }: Props) => {
   const { setInstructionsModalProps } = useContext(ModalContext)
+  const { startTour, hasCompletedTour } = useTour()
 
   return (
     <div className="flex w-full flex-col items-start justify-start gap-1 overflow-hidden bg-background-1 p-3 md:rounded">
@@ -69,9 +71,30 @@ export const GameInfo: React.FC<Props> = ({
             </button>
           )}
           <button
-            className="material-symbols-outlined duration-200 hover:text-human-3"
-            onClick={() => {
-              setInstructionsModalProps({ instructionsType: type })
+            type="button"
+            className="material-symbols-outlined duration-200 hover:text-human-3 focus:outline-none"
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              // Map page types to tour configs
+              const tourTypeMap: { [key: string]: keyof typeof tourConfigs } = {
+                againstMaia: 'play',
+                handAndBrain: 'handBrain',
+                analysis: 'analysis',
+                train: 'train',
+                turing: 'turing',
+              }
+
+              const tourType = tourTypeMap[type]
+
+              // Check if page type has a tour configuration
+              if (tourType && tourConfigs[tourType]) {
+                const tourConfig = tourConfigs[tourType]
+                // Force restart the tour even if completed
+                startTour(tourConfig.id, tourConfig.steps, true)
+              } else {
+                setInstructionsModalProps({ instructionsType: type })
+              }
             }}
           >
             help

src/components/Misc/GameInfo.tsx

@@ -9,6 +9,8 @@ import {
   DrillConfiguration,
 } from 'src/types'
 import { ModalContainer } from '../Misc/ModalContainer'
+import { useTour } from 'src/contexts'
+import { tourConfigs } from 'src/config/tours'
 
 const MAIA_VERSIONS = [
   { id: 'maia_kdd_1100', name: 'Maia 1100' },
@@ -103,6 +105,7 @@ const BrowsePanel: React.FC<{
   setSearchTerm,
 }) => (
   <div
+    id="opening-drill-browse"
     className={`flex w-full flex-col overflow-y-scroll ${activeTab !== 'browse' ? 'hidden md:flex' : 'flex'} md:border-r md:border-white/10`}
   >
     <div className="hidden h-20 flex-col justify-center gap-1 border-b border-white/10 p-4 md:flex">
@@ -288,6 +291,7 @@ const PreviewPanel: React.FC<{
   isDuplicateSelection,
 }) => (
   <div
+    id="opening-drill-preview"
     className={`flex w-full flex-col overflow-hidden ${activeTab !== 'preview' ? 'hidden md:flex' : 'flex'}`}
   >
     <div className="hidden h-20 flex-col justify-center gap-1 border-b border-white/10 p-4 md:flex">
@@ -441,6 +445,7 @@ const SelectedPanel: React.FC<{
   handleStartDrilling,
 }) => (
   <div
+    id="opening-drill-selected"
     className={`flex w-full flex-col overflow-hidden ${activeTab !== 'selected' ? 'hidden md:flex' : 'flex'} md:border-l md:border-white/10`}
   >
     <div className="hidden h-20 flex-col justify-center gap-1 border-b border-white/10 p-4 md:flex">
@@ -570,6 +575,7 @@ export const OpeningSelectionModal: React.FC<Props> = ({
   onComplete,
   onClose,
 }) => {
+  const { startTour } = useTour()
   const [selections, setSelections] =
     useState<OpeningSelection[]>(initialSelections)
   const [previewOpening, setPreviewOpening] = useState<Opening>(openings[0])
@@ -583,6 +589,31 @@ export const OpeningSelectionModal: React.FC<Props> = ({
   const [drillCount, setDrillCount] = useState(5)
   const [searchTerm, setSearchTerm] = useState('')
   const [activeTab, setActiveTab] = useState<MobileTab>('browse')
+  const [initialTourCheck, setInitialTourCheck] = useState(false)
+
+  // Check if user has completed the tour on initial load
+  useEffect(() => {
+    if (!initialTourCheck) {
+      setInitialTourCheck(true)
+      if (typeof window !== 'undefined') {
+        const completedTours = JSON.parse(
+          localStorage.getItem('maia-completed-tours') || '[]',
+        )
+
+        if (!completedTours.includes('openingDrill')) {
+          startTour(
+            tourConfigs.openingDrill.id,
+            tourConfigs.openingDrill.steps,
+            false,
+          )
+        }
+      }
+    }
+  }, [initialTourCheck, startTour])
+
+  const handleStartTour = () => {
+    startTour(tourConfigs.openingDrill.id, tourConfigs.openingDrill.steps, true)
+  }
 
   const previewFen = useMemo(() => {
     return previewVariation ? previewVariation.fen : previewOpening.fen
@@ -717,14 +748,32 @@ export const OpeningSelectionModal: React.FC<Props> = ({
         </button>
 
         {/* Header Section */}
-        <div className="flex w-full flex-col gap-1 border-b border-white/10 p-4">
-          <h1 className="text-xl font-bold text-primary md:text-2xl">
-            Opening Drills
-          </h1>
-          <p className="text-xs text-secondary md:text-sm">
-            Practice openings against Maia. Select openings to drill, choose
-            your color and opponent strength.
-          </p>
+        <div
+          id="opening-drill-modal"
+          className="flex w-full flex-col gap-1 border-b border-white/10 p-4"
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col gap-1">
+              <div className="flex flex-row items-center gap-3">
+                <h1 className="text-xl font-bold text-primary md:text-2xl">
+                  Opening Drills
+                </h1>
+                <button
+                  type="button"
+                  className="material-symbols-outlined text-lg text-secondary duration-200 hover:text-human-3 focus:outline-none"
+                  onClick={handleStartTour}
+                  title="Start tour"
+                >
+                  help
+                </button>
+              </div>
+
+              <p className="text-xs text-secondary md:text-sm">
+                Practice openings against Maia. Select openings to drill, choose
+                your color and opponent strength.
+              </p>
+            </div>
+          </div>
         </div>
 
         {/* Mobile Tab Navigation */}