Fixed AutoScroll

Author: Aadeshcode

packages/app/src/app/race/_components/race/code.tsx

@@ -1,14 +1,13 @@
 import { cn } from "@/lib/utils";
+import React from "react";
 
 type CodeProps = {
  code: string;
  input: string;
+ preRef: React.MutableRefObject<HTMLPreElement | null>;
 };
 
-export default function Code({
- code,
- input,
-}: CodeProps) {
+export default function Code({ code, input, preRef }: CodeProps) {
  const array: number[] = [];
  const currentCharacter = input.slice(-1);
  const expectedCharacter = code.charAt(input.length - 1);
@@ -20,8 +19,9 @@ export default function Code({
  return (
  <>
  <pre
- className="text-monochrome mb-4 overflow-auto font-medium px-2 w-full"
+ className="text-monochrome mb-4 overflow-auto font-medium w-full"
  data-cy="code-snippet-preformatted"
+ ref={preRef}
  >
  {code.split("").map((char, index) => (
  <span
@@ -31,8 +31,7 @@ export default function Code({
  code[index] !== " " && array.includes(index),
  "border-red-500 opacity-100":
  code[index] === " " && array.includes(index),
- "bg-yellow-200 opacity-80 text-black":
- input.length === index,
+ "bg-yellow-200 opacity-80 text-black": input.length === index,
  "opacity-100": input.length !== index && input[index] === char,
  })}
  >

packages/app/src/app/race/_components/race/race-practice.tsx

@@ -21,6 +21,7 @@ import type { ChartTimeStamp } from "./types";
 import type { ReplayTimeStamp } from "./types";
 import { catchError } from "@/lib/utils";
 import { useCheckForUserNavigator } from "@/lib/user-system";
+import { useEffectOnce } from "react-use";
 
 type RacePracticeProps = {
  user?: User;
@@ -33,19 +34,37 @@ export default function RacePractice({ user, snippet }: RacePracticeProps) {
  const [totalErrors, setTotalErrors] = useState(0);
  const [chartTimeStamp, setChartTimeStamp] = useState<ChartTimeStamp[]>([]);
  const [replayTimeStamp, setReplayTimeStamp] = useState<ReplayTimeStamp[]>([]);
-
+ const [windowStart, setWindowStart] = useState<number>(0);
+ const [windowEnd, setWindowEnd] = useState<number>(0);
+ const [scrollPosition, setScrollPosition] = useState(0);
  const inputElement = useRef<HTMLInputElement | null>(null);
  const code = snippet.code.trimEnd();
  const router = useRouter();
  const isRaceFinished = input === code;
 
  const isUserOnAdroid = useCheckForUserNavigator("android");
-
+ //for auto scroll
+ const preElement = useRef<HTMLPreElement | null>(null);
+ const scrollUpperLimit = 7;
+ const scrollLowerLimit = 7 - 1; //1 is deducted because when scrolling backwards, we count from the left side
+ const spanElementWidth = 10.4;
  useEffect(() => {
  localStorage.removeItem("chartTimeStamp");
  if (!inputElement.current) return;
  inputElement.current.focus();
  });
+ useEffectOnce(() => {
+ if (preElement.current) {
+ setWindowEnd(
+ Math.floor(
+ preElement.current?.getBoundingClientRect().width / spanElementWidth
+ )
+ );
+ }
+ });
+ useEffect(() => {
+ preElement.current?.scrollTo(scrollPosition, 0);
+ }, [scrollPosition]);
 
  useEffect(() => {
  if (isRaceFinished) {
@@ -63,7 +82,7 @@ export default function RacePractice({ user, snippet }: RacePracticeProps) {
  cpm: calculateCPM(input.length, timeTaken),
  time: Date.now(),
  },
- ]),
+ ])
  );
 
  localStorage.setItem(
@@ -75,7 +94,7 @@ export default function RacePractice({ user, snippet }: RacePracticeProps) {
  textIndicatorPosition: input.length,
  time: Date.now(),
  },
- ]),
+ ])
  );
 
  if (user) {
@@ -120,6 +139,8 @@ export default function RacePractice({ user, snippet }: RacePracticeProps) {
  }
 
  function handleKeyboardDownEvent(e: React.KeyboardEvent<HTMLInputElement>) {
+ //scroll to the cursor position
+ preElement.current?.scrollTo(scrollPosition, 0);
  // For ANDROID.
  // since the enter button on a mobile keyboard/keypad actually
  // returns a e.key of "Enter" onkeydown, we just set a condition for that.
@@ -131,11 +152,11 @@ export default function RacePractice({ user, snippet }: RacePracticeProps) {
  }
  if (input !== code.slice(0, input.length)) return;
  Enter();
- break;
+  break;
  // this is to delete the characters when "Enter" is pressed;
  case "Backspace":
  Backspace();
- break;
+  break;
  }
  return;
  }
@@ -244,9 +265,40 @@ export default function RacePractice({ user, snippet }: RacePracticeProps) {
  if (input.length === 0) {
  return;
  }
- setInput((prevInput) => prevInput.slice(0, -1));
-
  const character = input.slice(-1);
+ setInput((prevInput) => {
+ const updatedInput = prevInput.slice(0, -1);
+
+ if (character === "\n") {
+ const lineNumber = updatedInput.split("\n").length;
+ const totalCharactersInput = Number(
+ updatedInput.split("\n")[lineNumber - 1]?.length
+ );
+ console.log({
+ totalCharactersInput,
+ scrollUpperLimit,
+ spanElementWidth,
+ });
+ setScrollPosition(
+ (totalCharactersInput -
+ Math.floor(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (preElement.current?.getBoundingClientRect().width as any) /
+ spanElementWidth
+ ) +
+ scrollUpperLimit +
+ 1) *
+ spanElementWidth
+ // spanElement?.current?.getBoundingClientRect().width
+ );
+ setWindowEnd(totalCharactersInput + scrollUpperLimit + 1);
+ setWindowStart(totalCharactersInput + scrollUpperLimit + 1 - 67);
+ } else {
+ handleScrollNegative(updatedInput);
+ }
+ return updatedInput;
+ });
+
  if (character !== " " && character !== "\n") {
  setChartTimeStamp((prevArray) => prevArray.slice(0, -1));
  }
@@ -268,6 +320,18 @@ export default function RacePractice({ user, snippet }: RacePracticeProps) {
  indent += " ";
  i++;
  }
+ preElement.current?.scrollTo(0, 0);
+
+ setWindowEnd(
+ Math.floor(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (preElement?.current?.getBoundingClientRect().width as any) /
+ spanElementWidth
+ )
+ );
+
+ setWindowStart(0);
+ setScrollPosition(0);
  setInput((prevInput) => prevInput + "\n" + indent);
  }
  }
@@ -276,7 +340,13 @@ export default function RacePractice({ user, snippet }: RacePracticeProps) {
  if (e.key !== code.slice(input.length, input.length + 1)) {
  setTotalErrors((prevTotalErrors) => prevTotalErrors + 1);
  }
- setInput((prevInput) => prevInput + e.key);
+ setInput((prevInput) => {
+ const updated = prevInput + e.key;
+
+ handleScrollPositive(updated);
+ console.log({ TotalChar: updated.length });
+ return updated;
+ });
 
  if (e.key !== " ") {
  const currTime = Date.now();
@@ -309,6 +379,30 @@ export default function RacePractice({ user, snippet }: RacePracticeProps) {
  setChartTimeStamp([]);
  }
 
+ function handleScrollPositive(updatedInput: string) {
+ const lineNumber = input.split("\n").length;
+ const totalCharactersInput = Number(
+ updatedInput.split("\n")[lineNumber - 1]?.length
+ );
+ if (windowEnd - totalCharactersInput <= scrollUpperLimit) {
+ setWindowEnd((previousValue) => previousValue + 1);
+ setWindowStart((prev) => prev + 1);
+ setScrollPosition((prev) => prev + spanElementWidth);
+ }
+ }
+ function handleScrollNegative(updatedInput: string) {
+ const lineNumber = input.split("\n").length;
+ const totalCharactersInput = Number(
+ updatedInput.split("\n")[lineNumber - 1]?.length
+ );
+
+ if (totalCharactersInput - windowStart <= scrollLowerLimit) {
+ setWindowStart((previousValue) => previousValue - 1);
+ setWindowEnd((previousValue) => previousValue - 1);
+ setScrollPosition((prev) => prev - spanElementWidth);
+ }
+ }
+
  return (
  <div
  className="relative flex flex-col w-[clamp(10rem,95%,50rem)] gap-2 p-4 mx-auto rounded-md lg:p-8 bg-accent"
@@ -325,7 +419,7 @@ export default function RacePractice({ user, snippet }: RacePracticeProps) {
  <Header user={user} snippet={snippet} handleRestart={handleRestart} />
  <section className="flex">
  <LineNumbers code={code} currentLineNumber={input.split("\n").length} />
- <Code code={code} input={input} />
+ <Code code={code} input={input} preRef={preElement} />
  <input
  type="text"
  ref={inputElement}