From fa153c6908da67f55bfc496f420864478b9c6bad Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Wed, 24 Sep 2025 11:10:19 -0500
Subject: [PATCH] fix: resolve ReferenceError by moving ref declarations before
 usage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Moved lastMovedBead ref declaration to top of component before useMemo
- Removed duplicate ref declarations later in file
- Fixed variable hoisting issue causing ReferenceError

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/tutorial/TutorialPlayer.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/tutorial/TutorialPlayer.tsx b/apps/web/src/components/tutorial/TutorialPlayer.tsx
index 05941421..0880f377 100644
--- a/apps/web/src/components/tutorial/TutorialPlayer.tsx
+++ b/apps/web/src/components/tutorial/TutorialPlayer.tsx
@@ -219,6 +219,11 @@ function TutorialPlayerContent({
   const { config: abacusConfig } = useAbacusDisplay()
   const [isSuccessPopupDismissed, setIsSuccessPopupDismissed] = useState(false)
 
+  // Keep refs needed for step advancement and bead tracking
+  const lastValueForStepAdvancement = useRef<number>(currentValue)
+  const userHasInteracted = useRef<boolean>(false)
+  const lastMovedBead = useRef<StepBeadHighlight | null>(null)
+
   // Reset success popup when moving to new step
   useEffect(() => {
     setIsSuccessPopupDismissed(false)
@@ -649,10 +654,6 @@ function TutorialPlayerContent({
     }
   }, [events, notifyEvent])
 
-  // Keep refs needed for step advancement logic
-  const lastValueForStepAdvancement = useRef<number>(currentValue)
-  const userHasInteracted = useRef<boolean>(false)
-  const lastMovedBead = useRef<StepBeadHighlight | null>(null)
 
   // Wrap context handleValueChange to track user interaction
   const handleValueChange = useCallback((newValue: number) => {