From 4eea96778a2e96ff25b491bddd637206ac5dd773 Mon Sep 17 00:00:00 2001 From: panwar2001 Date: Sun, 23 Jul 2023 18:58:39 +0530 Subject: [PATCH] Solved many bugs in frontend , tried to make it optimized taking benefits of tree like structure of reat --- README.md | 5 +++ package-lock.json | 53 ----------------------- package.json | 2 - src/App.jsx | 20 --------- src/Home.jsx | 18 +++++--- src/Multiplayer/Multiplayer.jsx | 76 +++++++++++++++++---------------- src/Practice/Practice.jsx | 29 ++++++++----- src/Practice/TypingGame.css | 1 + src/main.jsx | 8 ++-- 9 files changed, 80 insertions(+), 132 deletions(-) delete mode 100644 src/App.jsx diff --git a/README.md b/README.md index edc6ee7..0404da1 100644 --- a/README.md +++ b/README.md @@ -8,3 +8,8 @@ npm install npm run dev ``` +As we have taken help from Official technology docs of node.js , express.js, socket.io for help on errors , googling errors of react from docs example +https://socket.io/docs/v3/emit-cheatsheet/ +https://nodejs.org/en +https://vitejs.dev/guide/ +our primary attribution is to mainly docs and googling silling errrors then implementing our own way to solve the bug \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9b342d3..5af65d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,8 @@ "version": "0.0.0", "dependencies": { "axios": "^1.4.0", - "random-words": "^2.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.14.2", "socket.io-client": "^4.7.1", "styled-components": "^6.0.4" }, @@ -2434,14 +2432,6 @@ "node": ">= 8" } }, - "node_modules/@remix-run/router": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz", - "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==", - "engines": { - "node": ">=14" - } - }, "node_modules/@socket.io/component-emitter": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", @@ -4748,14 +4738,6 @@ } ] }, - "node_modules/random-words": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/random-words/-/random-words-2.0.0.tgz", - "integrity": "sha512-uqpnDqFnYrZajgmvgjmBrSZL2V1UA/9bNPGrilo12CmBeBszoff/avElutUlwWxG12gvmCk/8dUhvHefYxzYjw==", - "dependencies": { - "seedrandom": "^3.0.5" - } - }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -4794,36 +4776,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-router": { - "version": "6.14.2", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz", - "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==", - "dependencies": { - "@remix-run/router": "1.7.2" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "react": ">=16.8" - } - }, - "node_modules/react-router-dom": { - "version": "6.14.2", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz", - "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==", - "dependencies": { - "@remix-run/router": "1.7.2", - "react-router": "6.14.2" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" - } - }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -5047,11 +4999,6 @@ "loose-envify": "^1.1.0" } }, - "node_modules/seedrandom": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz", - "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==" - }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", diff --git a/package.json b/package.json index 46bd9f2..3b7f92a 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,8 @@ }, "dependencies": { "axios": "^1.4.0", - "random-words": "^2.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.14.2", "socket.io-client": "^4.7.1", "styled-components": "^6.0.4" }, diff --git a/src/App.jsx b/src/App.jsx deleted file mode 100644 index a18459a..0000000 --- a/src/App.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import Navbar from "./Navbar/Navbar"; -import Home from "./Home"; -import Practice from "./Practice/Practice"; -import Multiplayer from "./Multiplayer/Multiplayer"; -import { BrowserRouter, Routes, Route } from "react-router-dom"; -const App = () => { - return (<> - - - - }/> - }/> - }/> - - - ); -}; - -export default App; diff --git a/src/Home.jsx b/src/Home.jsx index b3641b1..7595fd7 100644 --- a/src/Home.jsx +++ b/src/Home.jsx @@ -1,7 +1,9 @@ import { useState } from "react"; import Characters from "./Characters"; -import { Link} from "react-router-dom"; import Styled from "styled-components"; +import Practice from "./Practice/Practice"; +import Multiplayer from "./Multiplayer/Multiplayer"; + const Name=Styled.div` display: flex; justify-content: center; @@ -45,17 +47,19 @@ margin-top:20%; export default ()=>{ const [name,setName]=useState(Characters()); const [level,setLevel]=useState(null); + const [play,setPlay]=useState(null); + if(play=='Practice'){ + return + }else if(play=='Multi'){ + return + } if(level!=null){ return {name}
- - - - - - + + } diff --git a/src/Multiplayer/Multiplayer.jsx b/src/Multiplayer/Multiplayer.jsx index d1b114e..b7df871 100644 --- a/src/Multiplayer/Multiplayer.jsx +++ b/src/Multiplayer/Multiplayer.jsx @@ -1,12 +1,11 @@ import styled from "styled-components"; import {useState, useEffect, useRef} from 'react' -import { useLocation } from "react-router-dom"; import { io } from 'socket.io-client'; import "./TypingGame.css"; import axios from "axios"; import LeaderBoard from "../LeaderBoard"; import ProgressBar from "../ProgressBar"; -const URL="https://typerace-10ww.onrender.com"; +const URL="http://localhost:8080"; const easy=io(`${URL}/easy`); const medium=io(`${URL}/medium`); const hard=io(`${URL}/hard`); @@ -61,7 +60,7 @@ const StyledInput = styled.input` -export default ()=>{ +export default ({name,level})=>{ const [words, setWords] = useState([]) const [countDown, setCountDown] = useState(''); const [currInput, setCurrInput] = useState("") @@ -73,9 +72,6 @@ export default ()=>{ const [status, setStatus] = useState("started") const textInput = useRef(null) const [players,setPlayers]=useState(null); - const location = useLocation(); - const name=location.state?.name; - const level=location.state?.level; const [wpm,setWpm]=useState(0); useEffect(() => { if (status === 'started') { @@ -104,16 +100,13 @@ export default ()=>{ } if(level=='Easy'){ - axios.get(`${URL}/easyParagraph`).then((response)=>{ - setWords(response.data.paragraph); - }); - easy.on("players_update",(countdown,data,timeElapsed)=>{ + easy.on("players_update",(countdown,data,timeElapsed,paragraph)=>{ setCountDown(countdown); - setWpm(Math.round(data[easy.id].words*100.0/timeElapsed)/100.0); + if(Object.keys(data).length){ + setWpm(Math.round(data[easy.id].words*100.0/timeElapsed)/100.0); + } + if(paragraph)setWords(paragraph); if(countdown==0){ - axios.get(`${URL}/easyParagraph`).then((response)=>{ - setWords(response.data.paragraph); - }); clear(); } const arr=Object.keys(data).map((id)=>{ @@ -124,18 +117,17 @@ export default ()=>{ }) setPlayers(arr); }); - }else if(level=='Medium'){ - axios.get(`${URL}/mediumParagraph`).then((response)=>{ + axios.get(`${URL}/easyParagraph`).then((response)=>{ setWords(response.data.paragraph); - }); - medium.on("players_update",(countdown,data,timeElapsed)=>{ - console.log(data[medium.id].words,timeElapsed); + }); + }else if(level=='Medium'){ + medium.on("players_update",(countdown,data,timeElapsed,paragraph)=>{ setCountDown(countdown); - setWpm(Math.round(data[medium.id].words*100.0/timeElapsed)/100.0); - if(countdown==0){ - axios.get(`${URL}/mediumParagraph`).then((response)=>{ - setWords(response.data.paragraph); - }); + if(Object.keys(data).length){ + setWpm(Math.round(data[medium.id].words*100.0/timeElapsed)/100.0); + } + if(paragraph)setWords(paragraph); + if(countdown==0){ clear(); } const arr=Object.keys(data).map((id)=>{ @@ -146,19 +138,18 @@ export default ()=>{ }) setPlayers(arr); }); + axios.get(`${URL}/mediumParagraph`).then((response)=>{ + setWords(response.data.paragraph); + }); }else if(level=='Hard'){ - axios.get(`${URL}/hardParagraph`).then((response)=>{ - setWords(response.data.paragraph); - }); - hard.on("players_update",(countdown,data,timeElapsed)=>{ - console.log(data[hard.id].name,timeElapsed); + hard.on("players_update",(countdown,data,timeElapsed,paragraph)=>{ setCountDown(countdown); - setWpm(Math.round(data[hard.id].words*100.0/timeElapsed)/100.0); - if(countdown==0){ + if(Object.keys(data).length){ + setWpm(Math.round(data[hard.id].words*100.0/timeElapsed)/100.0); + } + if(paragraph)setWords(paragraph); + if(countdown==0){ clear(); - axios.get(`${URL}/hardParagraph`).then((response)=>{ - setWords(response.data.paragraph); - }); } const arr=Object.keys(data).map((id)=>{ return [data[id].name,Math.round(data[id].words*100.0/timeElapsed)/100.0]; @@ -168,6 +159,9 @@ export default ()=>{ }) setPlayers(arr); }); + axios.get(`${URL}/hardParagraph`).then((response)=>{ + setWords(response.data.paragraph); + }); } },[]) @@ -211,7 +205,17 @@ export default ()=>{ return '' } } - + const anotherStyle = (idx, wordIdx) => { + if (idx === currCharIndex + 1 && wordIdx === currWordIndex) { + return { + textDecoration: "underline blue", + color: "blue", + textDecorationSkipInk: "none", + }; + } else if (wordIdx === currWordIndex) { + return { textDecoration: "underline" }; + } + }; return (<> @@ -230,7 +234,7 @@ export default ()=>{ {word.split("").map((char, idx) => ( - {char} + {char} )) } diff --git a/src/Practice/Practice.jsx b/src/Practice/Practice.jsx index ba4ac3e..7839915 100644 --- a/src/Practice/Practice.jsx +++ b/src/Practice/Practice.jsx @@ -1,11 +1,8 @@ import styled from "styled-components"; import {useState, useEffect, useRef} from 'react' -import { useLocation } from "react-router-dom"; import axios from "axios"; import "./TypingGame.css"; import ProgressBar from "../ProgressBar"; - - const HeaderDiv=styled.div` color:white; font-size:2em; @@ -68,7 +65,7 @@ align-items:center; -export default ()=>{ +export default ({name,level})=>{ const [SECONDS,setSECONDS]=useState(60); const [words, setWords] = useState([]) const [countDown, setCountDown] = useState(SECONDS) @@ -80,9 +77,6 @@ export default ()=>{ const [incorrect, setIncorrect] = useState(0) const [status, setStatus] = useState("finished") const textInput = useRef(null) - const location = useLocation(); - const name=location.state?.name; - const level=location.state?.level; const startTime=useRef(); const [wpm,setWpm]=useState(); @@ -178,10 +172,22 @@ export default ()=>{ } else if (wordIdx === currWordIndex && currCharIndex >= words[currWordIndex].length) { return 'has-background-danger' } else { - return '' + return ''; } } - return ( + const anotherStyle = (idx, wordIdx) => { + if (idx === currCharIndex + 1 && wordIdx === currWordIndex) { + return { + textDecoration: "underline blue", + color: "blue", + textDecorationSkipInk: "none", + }; + } else if (wordIdx === currWordIndex) { + return { textDecoration: "underline" }; + } + }; + return (<> + Hi {name}, you are at {level} level
@@ -202,10 +208,10 @@ export default ()=>{ {(status === 'started') && words.map((word, i) => ( - + {word.split("").map((char, idx) => ( - {char} + {char} )) } @@ -223,5 +229,6 @@ export default ()=>{ autoFocus/> + ) } \ No newline at end of file diff --git a/src/Practice/TypingGame.css b/src/Practice/TypingGame.css index 0140c74..9afc8b0 100644 --- a/src/Practice/TypingGame.css +++ b/src/Practice/TypingGame.css @@ -1,5 +1,6 @@ .has-background-success{ color: green; + text-decoration: underline } .has-background-danger{ color: red; diff --git a/src/main.jsx b/src/main.jsx index 201a7d1..a65270c 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,8 +1,10 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import App from './App.jsx' +import Navbar from "./Navbar/Navbar"; +import Home from './Home'; ReactDOM.createRoot(document.getElementById('root')).render( - - , + + + , )