From c30cd0e81dd4b00f4ea937a4ba007b6740881703 Mon Sep 17 00:00:00 2001 From: Nishidh Date: Thu, 29 May 2025 14:34:35 +0530 Subject: [PATCH 1/5] fixed typing issue for longpara --- src/components/TypingBoard.jsx | 38 ++++++++++++++++++++++++++++++---- 1 file changed, 34 insertions(+), 4 deletions(-) diff --git a/src/components/TypingBoard.jsx b/src/components/TypingBoard.jsx index 2922e2c..7296c40 100644 --- a/src/components/TypingBoard.jsx +++ b/src/components/TypingBoard.jsx @@ -4,6 +4,7 @@ import { motion, time } from "motion/react" import TypingCompleteScreen from './TypingCompleteScreen'; const TypingBoard = (props) => { + console.log(props.quotes) const [words, setWords] = useState([]) const [quote, setQuote] = useState(props.quotes) @@ -18,13 +19,42 @@ const TypingBoard = (props) => { const [WPM, setWPM] = useState(0) const [accuracy, setAccuracy] = useState(0) + // Add this useEffect to update quote when props change and reset all states + useEffect(() => { + // Clean the quote string to remove any hidden characters + const cleanedQuote = props.quotes.trim().replace(/\s+/g, ' '); + setQuote(cleanedQuote); + + // Reset all states when quote changes + setCurrentIdx(0); + setTypedChars(""); + setWordsPressed(0); + setRightWords(0); + setWarning(true); + setTypos(0); + setIsCompeleted(false); + setFinalTime(0); + setWPM(0); + setAccuracy(0); + + console.log('Quote updated:', cleanedQuote); + console.log('Quote length:', cleanedQuote.length); + console.log('Quote characters:', cleanedQuote.split('').map((char, i) => `${i}: "${char}" (${char.charCodeAt(0)})`)); + }, [props.quotes]); + useEffect(() => { const handleKeyDown = (e) => { const pressedKey = e.key; + + // Don't process if typing is completed + if (isCompeleted) return; - if (/^[a-zA-Z0-9\s]$/.test(pressedKey)) { + // Allow more characters including punctuation + if (/^[a-zA-Z0-9\s.,!?;:'"()-]$/.test(pressedKey)) { setWordsPressed(prev => prev + 1) + + console.log(`Pressed: "${pressedKey}" (${pressedKey.charCodeAt(0)}), Expected: "${quote[currentIdx]}" (${quote[currentIdx]?.charCodeAt(0)}), CurrentIdx: ${currentIdx}`); if (pressedKey === quote[currentIdx]) { const nextIdx = currentIdx + 1; @@ -34,10 +64,10 @@ const TypingBoard = (props) => { setCurrentIdx(nextIdx); setTypedChars(prev => prev + pressedKey); setRightWords(prev => prev + 1) - setWarning(prev => prev = true) + setWarning(true) // Fixed assignment operator } else { - setWarning(prev => prev = false) + setWarning(false) // Fixed assignment operator setTypos(prev => prev + 1) } } @@ -139,4 +169,4 @@ const TypingBoard = (props) => { ); }; -export default TypingBoard; +export default TypingBoard; \ No newline at end of file From 9182f8d998200fb7d534280a168fcff1f7a4904c Mon Sep 17 00:00:00 2001 From: Nishidh Date: Thu, 29 May 2025 15:11:43 +0530 Subject: [PATCH 2/5] fixed typing issue for longpara --- src/components/TypingBoard.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/TypingBoard.jsx b/src/components/TypingBoard.jsx index 7296c40..aa83833 100644 --- a/src/components/TypingBoard.jsx +++ b/src/components/TypingBoard.jsx @@ -4,7 +4,7 @@ import { motion, time } from "motion/react" import TypingCompleteScreen from './TypingCompleteScreen'; const TypingBoard = (props) => { - console.log(props.quotes) + // console.log(props.quotes) const [words, setWords] = useState([]) const [quote, setQuote] = useState(props.quotes) @@ -37,9 +37,9 @@ const TypingBoard = (props) => { setWPM(0); setAccuracy(0); - console.log('Quote updated:', cleanedQuote); - console.log('Quote length:', cleanedQuote.length); - console.log('Quote characters:', cleanedQuote.split('').map((char, i) => `${i}: "${char}" (${char.charCodeAt(0)})`)); + // console.log('Quote updated:', cleanedQuote); + // console.log('Quote length:', cleanedQuote.length); + // console.log('Quote characters:', cleanedQuote.split('').map((char, i) => `${i}: "${char}" (${char.charCodeAt(0)})`)); }, [props.quotes]); useEffect(() => { @@ -54,7 +54,7 @@ const TypingBoard = (props) => { if (/^[a-zA-Z0-9\s.,!?;:'"()-]$/.test(pressedKey)) { setWordsPressed(prev => prev + 1) - console.log(`Pressed: "${pressedKey}" (${pressedKey.charCodeAt(0)}), Expected: "${quote[currentIdx]}" (${quote[currentIdx]?.charCodeAt(0)}), CurrentIdx: ${currentIdx}`); + // console.log(`Pressed: "${pressedKey}" (${pressedKey.charCodeAt(0)}), Expected: "${quote[currentIdx]}" (${quote[currentIdx]?.charCodeAt(0)}), CurrentIdx: ${currentIdx}`); if (pressedKey === quote[currentIdx]) { const nextIdx = currentIdx + 1; From aca0f974e75e09394b36930e52820cc07f1d4103 Mon Sep 17 00:00:00 2001 From: Nishidh Date: Thu, 29 May 2025 15:40:03 +0530 Subject: [PATCH 3/5] Added Reload and Restart functionality --- src/assets/reload.svg | 18 ++++++++++++++ src/components/SideBar.jsx | 4 ++- src/components/TypingCompleteScreen.jsx | 33 ++++++++++++++++--------- 3 files changed, 43 insertions(+), 12 deletions(-) create mode 100644 src/assets/reload.svg diff --git a/src/assets/reload.svg b/src/assets/reload.svg new file mode 100644 index 0000000..e36a328 --- /dev/null +++ b/src/assets/reload.svg @@ -0,0 +1,18 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/components/SideBar.jsx b/src/components/SideBar.jsx index cad7630..fd4e553 100644 --- a/src/components/SideBar.jsx +++ b/src/components/SideBar.jsx @@ -29,6 +29,7 @@ function SideBar() { infinite logo png infinite mode @@ -36,13 +37,14 @@ function SideBar() { infinite logo png trial mode - + diff --git a/src/components/TypingCompleteScreen.jsx b/src/components/TypingCompleteScreen.jsx index 8d23d35..fc730b3 100644 --- a/src/components/TypingCompleteScreen.jsx +++ b/src/components/TypingCompleteScreen.jsx @@ -1,12 +1,22 @@ import React from 'react' import { motion } from "motion/react" +import reload from "../assets/reload.svg" +import { useLocation, useNavigate } from 'react-router-dom' + +function TypingCompleteScreen({ finalTime, WPM, accuracy, onRestart }) { + + const handleGameRestart = () => { + if (onRestart && typeof onRestart === 'function') { + onRestart(); // Call the restart function passed from parent + } else { + // Fallback to page reload if no restart function provided + window.location.reload(); + } + }; -function TypingCompleteScreen({ finalTime, WPM, accuracy }) { return (
-
- Your time: {finalTime} sec

Your WPM: {WPM}

-

Your accuracy: {accuracy} - % -

+

Your accuracy: {accuracy}%

+ + {/* Use the recommended approach */} + -
- - -
- ) } From 6446fa54772ca556da58d89d33174a86a3776efc Mon Sep 17 00:00:00 2001 From: Nishidh Date: Thu, 29 May 2025 15:44:32 +0530 Subject: [PATCH 4/5] Added Reload and Restart functionality --- src/components/TypingBoard.jsx | 4 ++-- src/components/TypingCompleteScreen.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/TypingBoard.jsx b/src/components/TypingBoard.jsx index aa83833..a262182 100644 --- a/src/components/TypingBoard.jsx +++ b/src/components/TypingBoard.jsx @@ -21,11 +21,11 @@ const TypingBoard = (props) => { // Add this useEffect to update quote when props change and reset all states useEffect(() => { - // Clean the quote string to remove any hidden characters + // Clean the quote string const cleanedQuote = props.quotes.trim().replace(/\s+/g, ' '); setQuote(cleanedQuote); - // Reset all states when quote changes + // Reset all states setCurrentIdx(0); setTypedChars(""); setWordsPressed(0); diff --git a/src/components/TypingCompleteScreen.jsx b/src/components/TypingCompleteScreen.jsx index fc730b3..1fca669 100644 --- a/src/components/TypingCompleteScreen.jsx +++ b/src/components/TypingCompleteScreen.jsx @@ -9,7 +9,7 @@ function TypingCompleteScreen({ finalTime, WPM, accuracy, onRestart }) { if (onRestart && typeof onRestart === 'function') { onRestart(); // Call the restart function passed from parent } else { - // Fallback to page reload if no restart function provided + // Fallback to page reload if no restart function there window.location.reload(); } }; @@ -33,7 +33,7 @@ function TypingCompleteScreen({ finalTime, WPM, accuracy, onRestart }) {

Your WPM: {WPM}

Your accuracy: {accuracy}%

- {/* Use the recommended approach */} + {/* handling the restart button */} + diff --git a/src/components/TypingCompleteScreen.jsx b/src/components/TypingCompleteScreen.jsx index 1fca669..496dd33 100644 --- a/src/components/TypingCompleteScreen.jsx +++ b/src/components/TypingCompleteScreen.jsx @@ -5,6 +5,7 @@ import { useLocation, useNavigate } from 'react-router-dom' function TypingCompleteScreen({ finalTime, WPM, accuracy, onRestart }) { + const location = useLocation() const handleGameRestart = () => { if (onRestart && typeof onRestart === 'function') { onRestart(); // Call the restart function passed from parent @@ -46,4 +47,4 @@ function TypingCompleteScreen({ finalTime, WPM, accuracy, onRestart }) { ) } -export default TypingCompleteScreen \ No newline at end of file +export default TypingCompleteScreen; \ No newline at end of file