Fix experience (#7284)

* Only scroll error into view * Make sure we can go back if last frame's starting point is duration * Remove console log * Fix error now showing up * If there is a submission, rerun code on mount --------- Co-authored-by: Jeremy Walker <[email protected]>
exercism · Jan 10, 2025 · d8a1a3b · d8a1a3b
1 parent 4841a79
commit d8a1a3b
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 17 deletions.
diff --git a/app/javascript/components/bootcamp/SolveExercisePage/AnimationTimeline/AnimationTimeline.ts b/app/javascript/components/bootcamp/SolveExercisePage/AnimationTimeline/AnimationTimeline.ts
@@ -29,6 +29,11 @@ export class AnimationTimeline {
 
   public onUpdate(callback: (anim: AnimeInstance) => void) {
     this.updateCallbacks.push(callback)
+
+    if (this.animationTimeline) {
+      callback(this.animationTimeline)
+      setTimeout(() => this.updateScrubber(this.animationTimeline), 1)
+    }
   }
 
   public removeUpdateCallback(callback: (anim: AnimeInstance) => void) {

diff --git a/...javascript/components/bootcamp/SolveExercisePage/CodeMirror/extensions/lineHighlighter.ts b/...javascript/components/bootcamp/SolveExercisePage/CodeMirror/extensions/lineHighlighter.ts
@@ -24,15 +24,6 @@ export const highlightedLineField = StateField.define<number>({
   update(value, tr) {
     for (const effect of tr.effects) {
       if (effect.is(changeLineEffect)) {
-        if (effect.value) {
-          const line = document.querySelector('.cm-highlightedLine')
-          if (line) {
-            line.scrollIntoView({
-              behavior: 'smooth',
-              block: 'center',
-            })
-          }
-        }
         return effect.value
       }
     }

diff --git a/app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/hooks/useUnderlineRange.ts b/app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/hooks/useUnderlineRange.ts
@@ -15,6 +15,13 @@ export function useUnderlineRange(
       editorView.dispatch({
         effects: addUnderlineEffect.of(range),
       })
+      const line = document.querySelector('.cm-underline')
+      if (line) {
+        line.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        })
+      }
     }
   }, [range])
 }
diff --git a/app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/useEditorHandler.tsx b/app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/useEditorHandler.tsx
@@ -51,6 +51,10 @@ export function useEditorHandler({
       setDefaultCode(editorLocalStorageValue.code)
       setupEditor(editorViewRef.current, editorLocalStorageValue)
     }
+
+    if (code.storedAt) {
+      handleRunCode()
+    }
   }
 
   const onRunCode = useOnRunCode({

diff --git a/app/javascript/components/bootcamp/SolveExercisePage/Scrubber/useScrubber.ts b/app/javascript/components/bootcamp/SolveExercisePage/Scrubber/useScrubber.ts
@@ -16,7 +16,6 @@ export function useScrubber({
   testResult: NewTestResult
 }) {
   const [value, setValue] = useState(0)
-  const [currentFrameIdx] = useState(0)
   const {
     setHighlightedLine,
     setHighlightedLineColor,
@@ -30,11 +29,12 @@ export function useScrubber({
   useEffect(() => {
     if (testResult.animationTimeline) {
       testResult.animationTimeline.onUpdate((anime) => {
-        setValue(anime.currentTime)
-        testResult.animationTimeline?.currentFrame
+        setTimeout(() => {
+          setValue(anime.currentTime)
+        }, 50)
       })
     }
-  }, [testResult.animationTimeline])
+  }, [testResult.view?.id, testResult.animationTimeline?.completed])
 
   // this effect is responsible for updating the highlighted line and information widget based on currentFrame
   useEffect(() => {
@@ -69,7 +69,11 @@ export function useScrubber({
         }
       }
     }
-  }, [testResult.animationTimeline, value])
+  }, [
+    testResult.view?.id,
+    value,
+    testResult.animationTimeline?.currentFrameIndex,
+  ])
 
   const handleScrubToCurrentTime = useCallback(
     (animationTimeline: AnimationTimeline) => {
@@ -195,8 +199,10 @@ export function useScrubber({
        */
 
       const prevFrame = animationTimeline.previousFrame
+      const { duration } = animationTimeline.timeline
       const targetTime =
-        currentTime === animationTimeline.timeline.duration
+        // gotta ensure we are't going back to our current time, which'd result in not moving at all
+        currentTime === duration && lastFrameTime !== duration
           ? lastFrameTime
           : // if there is no previous frame, go to the start of the timeline
           prevFrame
@@ -370,7 +376,6 @@ export function useScrubber({
     handleGoToPreviousFrame,
     handleGoToEndOfTimeline,
     handleGoToFirstFrame,
-    currentFrameIdx,
     rangeRef,
     updateInputBackground,
     handleScrubToCurrentTime,

diff --git a/app/javascript/components/bootcamp/SolveExercisePage/exercises/draw/DrawExercise.tsx b/app/javascript/components/bootcamp/SolveExercisePage/exercises/draw/DrawExercise.tsx
@@ -378,7 +378,7 @@ export default class DrawExercise extends Exercise {
     absX: number,
     absY: number
   ) {
-    const duration = 5
+    const duration = 1
     this.addAnimation({
       targets: `#${this.view.id} #${elem.id}`,
       duration,