Skip to content

Commit

Permalink
Solved many bugs in frontend , tried to make it optimized taking bene…
Browse files Browse the repository at this point in the history 
…fits of tree like structure of reat
  • Loading branch information
@panwar2001
panwar2001 committed Jul 23, 2023
1 parent c611851 commit 4eea967
Show file tree
Hide file tree
Showing 9 changed files with 80 additions and 132 deletions.
5 changes: 5 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
53 changes: 0 additions & 53 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
20 changes: 0 additions & 20 deletions src/App.jsx
View file

This file was deleted.

18 changes: 11 additions & 7 deletions src/Home.jsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 <Practice name={name} level={level}/>
}else if(play=='Multi'){
return <Multiplayer name={name} level={level}/>
}
if(level!=null){
return <Name>
<Field>
{name}
<br/>
<Link to="/Practice" state={{ name:name ,level:level}} className="link">
<Button >Join Practice </Button>
</Link>
<Link to="/MultiPlayer" state={{ name:name ,level:level}} className="link">
<Button >Join Multi Player</Button>
</Link>
<Button onClick={()=>setPlay('Practice')}>Join Practice </Button>
<Button onClick={()=>setPlay('Multi')}>Join Multi Player</Button>
</Field>
</Name>
}
Expand Down
76 changes: 40 additions & 36 deletions src/Multiplayer/Multiplayer.jsx
View file
Original file line number Diff line number Diff line change
@@ -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`);
Expand Down Expand Up @@ -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("")
Expand All @@ -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') {
Expand Down Expand Up @@ -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)=>{
Expand All @@ -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)=>{
Expand All @@ -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];
Expand All @@ -168,6 +159,9 @@ export default ()=>{
})
setPlayers(arr);
});
axios.get(`${URL}/hardParagraph`).then((response)=>{
setWords(response.data.paragraph);
});
}
},[])

Expand Down Expand Up @@ -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 (<><BorderedDiv>
<HeaderDiv>
Expand All @@ -230,7 +234,7 @@ export default ()=>{
<span key={i}>
<span>
{word.split("").map((char, idx) => (
<span className={getCharClass(i, idx, char)} key={idx}>{char}</span>
<span style={anotherStyle(idx,i)} className={getCharClass(i, idx, char)} key={idx}>{char}</span>
)) }
</span>
<span> </span>
Expand Down
29 changes: 18 additions & 11 deletions src/Practice/Practice.jsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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)
Expand All @@ -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();

Expand Down Expand Up @@ -178,10 +172,22 @@ export default ()=>{
} else if (wordIdx === currWordIndex && currCharIndex >= words[currWordIndex].length) {
return 'has-background-danger'
} else {
return ''
return '';
}
}
return (<BorderedDiv>
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 (<>
<BorderedDiv>
<HeaderDiv>
Hi {name}, you are at {level} level
<br/>
Expand All @@ -202,10 +208,10 @@ export default ()=>{
<InnerContainer>
<TextContainer>
{(status === 'started') && words.map((word, i) => (
<span key={i}>
<span key={i} >
<span>
{word.split("").map((char, idx) => (
<span className={getCharClass(i, idx, char)} key={idx}>{char}</span>
<span style={anotherStyle(idx,i)} className={getCharClass(i, idx, char)} key={idx}>{char}</span>
)) }
</span>
<span> </span>
Expand All @@ -223,5 +229,6 @@ export default ()=>{
autoFocus/>
</InnerContainer>
</BorderedDiv>
</>
)
}
Loading

0 comments on commit 4eea967

Please sign in to comment.