├── .gitignore
├── _config.yml
├── README.md
├── client
├── index.js
├── scss
│ ├── _variables.scss
│ ├── _loginContainer.scss
│ ├── _mainContainer.scss
│ └── application.scss
├── components
│ ├── NavBar.jsx
│ ├── Results.jsx
│ ├── CodeSnippet.jsx
│ └── InputField.jsx
├── App.jsx
└── container
│ ├── loginContainer.jsx
│ └── MainContainer.jsx
├── server
├── controllers
│ ├── cookieController.js
│ ├── sessionController.js
│ ├── oauthController.js
│ ├── snippetController.js
│ ├── userController.js
│ └── snippet.txt
├── models
│ └── snippetModel.js
├── routes
│ └── api.js
└── server.js
├── index.html
├── webpack.config.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-slate
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CodeRacer
2 |
3 | Uncomment the console.logs for a better understanding of the code and how it works.
4 | Looks overwhelming at first, but isn't that bad.
--------------------------------------------------------------------------------
/client/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import App from './App.jsx';
4 | import styles from './scss/application.scss';
5 |
6 | if (module && module.hot) {
7 | module.hot.accept()
8 | }
9 |
10 | render(
11 | CodeRacer
5 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/server/models/snippetModel.js:
--------------------------------------------------------------------------------
1 | const { Pool } = require('pg');
2 | //setting up our postgres SQL DB the same way as the DB unit
3 | const PG_URI = 'postgres://rdbpefvt:ap6jLgfucXTv7-txKVehMNOV4ncDO-UE@drona.db.elephantsql.com:5432/rdbpefvt';
4 |
5 | //PQSQL DB table layouts
6 | // snippet: snippet_id category content max_time duration meaning
7 | // users: user_id username snippet_id highest_wpm
8 | const pool = new Pool({
9 | connectionString: PG_URI
10 | });
11 |
12 | // exported query with the ability to read what the request was for added debugging.
13 | module.exports = {
14 | query: (text, params, callback) => {
15 | console.log('executed query', text);
16 | return pool.query(text, params, callback);
17 | }
18 | };
--------------------------------------------------------------------------------
/server/controllers/sessionController.js:
--------------------------------------------------------------------------------
1 | const jwt = require('jsonwebtoken')
2 | const sessionController = {};
3 | const secret = 'thisisasecret'
4 | const db = require('../models/snippetModel');
5 |
6 | //creates the jwt and saves it to our cookie
7 | sessionController.createSession = (req, res, next) => {
8 | const token = jwt.sign(res.locals.profile, secret, { expiresIn: '1h' })
9 | res.cookie('ssid', token, { httpOnly: true })
10 | // console.log("we made a session")
11 | return next();
12 | }
13 |
14 | //verfies that the jwt within our cookies matches and if so stores the user's information to res.locals
15 | sessionController.verify = (req, res, next) => {
16 | // console.log('we are in the sessionController.verify')
17 | jwt.verify(req.cookies.ssid, secret, (err, result) => {
18 | if(err) {
19 | res.status(404).send('Couldn\'t verify jwt');
20 | } else {
21 | res.locals.verifiedjwt = result;
22 | // console.log('getting through verify middleware')
23 | return next();
24 | }
25 | })
26 | }
27 |
28 |
29 | module.exports = sessionController;
--------------------------------------------------------------------------------
/client/components/NavBar.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, useState, useEffect } from 'react';
2 |
3 |
4 | const NavBar = props => {
5 | let categoryArray;
6 | console.log("Has the race started?",props.isRaceStarted)
7 | // If the race has NOT started (passed from MainContainer)
8 | if (props.isRaceStarted === false) {
9 | // User has access to choose category
10 | categoryArray = props.categories.map((category, i) => (
11 | props.handleClick(category)}> { category }
12 | ))
13 | }
14 | else {
15 | // If the race started, they can't change category
16 | categoryArray = props.categories.map((category, i) => (
17 | { category }
18 | ))
19 | }
20 |
21 | return(
22 |
23 |
24 |
25 |
26 | { categoryArray }
27 |
28 |
29 |
30 |
26 |
27 | < MainContainer />
28 |
29 |
30 | )
31 | } else {
32 | return (
33 |
34 |
35 | < LoginContainer />
36 |
37 |
38 | )}
39 | }
40 |
41 | export default App;
--------------------------------------------------------------------------------
/server/routes/api.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const snippetController = require('../controllers/snippetController');
3 | const sessionController = require('../controllers/sessionController')
4 | const userController = require('../controllers/userController');
5 | const router = express.Router();
6 |
7 |
8 | //populates nav bar with our categories from our database
9 | router.get('/', snippetController.getCategories, (req, res, next) => {
10 | return res.status(200).json(res.locals.categories)
11 | });
12 |
13 | //when clicking a category, gets a random snippet from that category and puts it into the codesnippet
14 | router.get('/:search',
15 | snippetController.getSnippet,
16 | (req, res, next) => res.status(200).json(res.locals.snippet)
17 | );
18 |
19 | //checks if our resulting WPM is higehr than the wpm stored in the DB and responds accordingly
20 | router.post('/highScore',
21 | sessionController.verify,
22 | userController.setHighScore,
23 | (req, res, next) => res.status(200).json(res.locals.scoreBoardResponse)
24 | )
25 |
26 | //this is the route used to populate our DB with snippets
27 | //no longer has use after popuatling SQL DB
28 | router.post('/backdoor',
29 | snippetController.createDatabase,
30 | (req, res, next) => res.status(200).send()
31 | )
32 |
33 | module.exports = router;
--------------------------------------------------------------------------------
/client/components/Results.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 |
3 | const Results = props => {
4 | // Empty at first
5 | let resultsDiv =
;
6 |
7 | // If the user has finished the race (determined by props.finishedWPM existing, passed from InputField)
8 | if (Object.keys(props.finishedWPM).length) {
9 | // Show the finished WPM
10 | resultsDiv =
11 |
12 | {props.finishedWPM.message}
13 |
14 | }
15 |
16 | // Text is set to empty string if no category is selected
17 | let explanationText = ''
18 | // If this prop exists(activated when a category is selected by passing a prop down), show the function of the snippet
19 | if (props.content.meaning) {
20 | explanationText = "Your Snippet's Function is:"
21 | }
22 |
23 | return (
24 |
25 |
26 |
27 |
28 | { resultsDiv }
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {explanationText}
37 |
38 | {/* What the code that you typed does */}
39 | { props.content.meaning }
40 |
41 |
42 |
43 |
7 |
8 |
Welcome User, CODERACER
9 |
17 |
18 |
71 |
CODERACER
72 |
73 | < NavBar isRaceStarted = {this.state.hasRace} categories ={ this.state.categories } handleClick={ this.handleClick }/>
74 |
75 | < CodeSnippet content={ this.state.content } inputValue = {this.state.inputValue} completedWords = {this.state.completedWords}/>
76 |
77 | < InputField content={ this.state.content } giveCompletedWords = {this.giveCompletedWords} giveInputValue = {this.giveInputValue} startRace = {this.startRace}/>
78 |
79 |
15 |
16 |
Please select a category to get started...
17 |
18 |
33 |
34 |
35 |
36 | {
37 | // we process the content.content, which is the snippet displayed on the screen to eliminate all tabs or trailing spaces
38 | // we then chop it up into an array which will then form the spans of our snippet display
39 | props.content.content.trim().split(/[ \t]+/).map((word, w_idx) =>{
40 | // we will go by word and the word's attributes are determined below
41 | let highlight = false;
42 | let currentWord = false;
43 | // first we do checks to see if the given span generated will have the above qualities
44 |
45 | // this means that the word is completed, so turn it green. Green = completed
46 | if (props.completedWords.length > w_idx) {
47 | highlight = true;
48 | }
49 |
50 | if (props.completedWords.length === w_idx) {
51 | currentWord = true;
52 | }
53 | // this is where we make our spans based on the above booleans
54 | return (
55 |
60 | {/* We then take our word, split into individual letters and those will becomes spans */}
61 | {word.split('').map((letter, l_idx) => {
62 | /* this is the logic to see where we are on the current word and change the span qualities accordingly*/
63 | const isCurrentWord = w_idx === props.completedWords.length;
64 | const isWronglyTyped = letter !== props.inputValue[l_idx];
65 | const shouldBeHighlighted = l_idx < props.inputValue.length;
66 | // we chain several ternaries here to check what letter should be what color.
67 | return (
68 |
77 | {letter}
78 |
79 | );
80 | })}
81 |
82 | );
83 | }
84 | )
85 |
86 | }
87 |
88 |
89 |
90 |
91 |
My Content Heading My content text
`,
6 | 'Creates a div with a h4 header and a paragraph'
7 | ],
8 | [
9 | sql,
10 | `SELECT * FROM table WHERE id = '3'`,
11 | `Returns all columns from rows where the id is 3`
12 | ],
13 | [
14 | javascript,
15 | `const balancedParens = (input) => {
16 | const matches = {
17 | '[': ']',
18 | '{': '}',
19 | '(': ')',
20 | };
21 | const stack = [];
22 | for (let i = 0; i < input.length; i++) {
23 | const char = input[i];
24 | if (matches[char]) {
25 | stack.push(char);
26 | } else if (char === ')' || char === '}' || char === ']') {
27 | if (matches[stack.pop()] !== char) {
28 | return false;
29 | }
30 | }
31 | }
32 | return !stack.length;
33 | };`,
34 | `Checks if a given string has valid parentheses.
35 | For example: '([{}()])' will yield true, while '(}{)' will yield false`
36 | ],
37 | [
38 | sql,
39 | `INSERT INTO table (col1, col2, col3, col4)
40 | VALUES ($1, $2, $3, $4)
41 | RETURNING *`,
42 | `Creates a new entry into selected table with values of the columns determined by the $ variables and then returns what was created`
43 | ],
44 | [
45 | react,
46 | `const element = Hello, world ;
47 | ReactDOM.render(element, document.getElementById('root'));`,
48 | 'Renders an element to the DOM'
49 | ],
50 | [
51 | html,
52 | `Hello World ');
63 | });
64 | app.post('/submit-data', function (req, res) {
65 | res.send('POST Request');
66 | });
67 | app.put('/update-data', function (req, res) {
68 | res.send('PUT Request');
69 | });
70 | app.delete('/delete-data', function (req, res) {
71 | res.send('DELETE Request');
72 | });
73 | var server = app.listen(5000, function () {
74 | console.log('Node server is running..');
75 | });`,
76 | 'Configures routes for express.js web application framework'
77 | ],
78 | [
79 | javascript,
80 | `var now = new Date();
81 | var dayOfWeek = now.getDay(); // Sunday - Saturday : 0 - 6
82 | if(dayOfWeek == 5) {
83 | document.write("Have a nice weekend!");
84 | } else if(dayOfWeek == 0) {
85 | document.write("Have a nice Sunday!");
86 | } else {
87 | document.write("Have a nice day!");
88 | }`,
89 | 'Multi if else statement for all the days of the week'
90 | ],
91 | [
92 | react,
93 | `componentDidMount() {
94 | fetch(/endpoint)
95 | .then(res=> res.json())
96 | .then(json => setState({stateAttribute: json}))
97 | }`,
98 | `Sends a fetch request to specified endpoint when the component is mounted to the webpage,
99 | it then converts the response from json and sets a state attribute to that given value`
100 | ],
101 | [
102 | express,
103 | `sessionController.verify = (req, res, next) => {
104 | jwt.verify(req.cookies.ssid, secret, (err, result) => {
105 | if(err) {
106 | res.status(404).send('Couldn\'t verify jwt');
107 | } else {
108 | res.locals.verifiedjwt = result;
109 | return next();
110 | }
111 | })
112 | }`,
113 | `Middleware that verifies a jwt before serving the webpage`
114 | ],
115 | [
116 | express,
117 | `const express = require('express');
118 | const path = require('path');
119 | const cookieparser = require('cookie-parser')
120 | const app = express();`,
121 | `Imports the necessary npm libraries and creates an instance of express to set up a server`
122 | ],
123 | [
124 | html,
125 | `
126 |
127 |
128 | basic html
129 | Level One Headline
133 |
134 | This is a paragraph.
135 | Note that the text is automatically wrapped.
136 |
137 |
138 | `,
139 | `Basic starting layout for an HTML file`
140 | ],
141 | [
142 | sql,
143 | `SELECT column_name(s)
144 | FROM table1
145 | INNER JOIN table2
146 | ON table1.column_name = table2.column_name;`,
147 | `The INNER JOIN keyword selects records that have matching values in both tables.`
148 | ],
149 | [
150 | javascript,
151 | `switch(arg) {
152 | case "hello": {
153 | console.log("hello")
154 | break
155 | }
156 | case "goodbye": {
157 | console.log("goodbye")
158 | break
159 | }
160 | default:
161 | console.log("Not a good case")
162 | }`,
163 | "Example of switch case syntax, this compares the arg against the string values and if they strictly match then it will execute that case, if it doesn't match anything, it will go to the default case"
164 | ]
165 | ];
--------------------------------------------------------------------------------
/client/scss/application.scss:
--------------------------------------------------------------------------------
1 | @import '_variables';
2 | @import '_loginContainer';
3 | @import '_mainContainer';
4 |
5 | // everything is imported into here.
6 |
7 | html, body{
8 | background-color: $basestar;
9 | color: $lightblueTron;
10 | text-shadow: -1px 1px 10px $cyanTron;
11 | height:100%;
12 | margin: 0;
13 | padding:0;
14 | overflow: auto;
15 | }
16 |
17 |
18 | #root {
19 | width: 100%;
20 | height: 100%;
21 |
22 | }
23 |
24 | .containers{
25 | width: 100%;
26 | height:100%
27 | }
28 |
29 | // animation for the flicker quality
30 |
31 | @keyframes flicker {
32 | 0% {
33 | opacity: 0.27861;
34 | }
35 | 5% {
36 | opacity: 0.34769;
37 | }
38 | 10% {
39 | opacity: 0.23604;
40 | }
41 | 15% {
42 | opacity: 0.90626;
43 | }
44 | 20% {
45 | opacity: 0.18128;
46 | }
47 | 25% {
48 | opacity: 0.83891;
49 | }
50 | 30% {
51 | opacity: 0.65583;
52 | }
53 | 35% {
54 | opacity: 0.67807;
55 | }
56 | 40% {
57 | opacity: 0.26559;
58 | }
59 | 45% {
60 | opacity: 0.84693;
61 | }
62 | 50% {
63 | opacity: 0.96019;
64 | }
65 | 55% {
66 | opacity: 0.08594;
67 | }
68 | 60% {
69 | opacity: 0.20313;
70 | }
71 | 65% {
72 | opacity: 0.71988;
73 | }
74 | 70% {
75 | opacity: 0.53455;
76 | }
77 | 75% {
78 | opacity: 0.37288;
79 | }
80 | 80% {
81 | opacity: 0.71428;
82 | }
83 | 85% {
84 | opacity: 0.70419;
85 | }
86 | 90% {
87 | opacity: 0.7003;
88 | }
89 | 95% {
90 | opacity: 0.36108;
91 | }
92 | 100% {
93 | opacity: 0.24387;
94 | }
95 | }
96 | @keyframes textShadow {
97 | 0% {
98 | text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
99 | }
100 | 5% {
101 | text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
102 | }
103 | 10% {
104 | text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
105 | }
106 | 15% {
107 | text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
108 | }
109 | 20% {
110 | text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
111 | }
112 | 25% {
113 | text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
114 | }
115 | 30% {
116 | text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
117 | }
118 | 35% {
119 | text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
120 | }
121 | 40% {
122 | text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
123 | }
124 | 45% {
125 | text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
126 | }
127 | 50% {
128 | text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
129 | }
130 | 55% {
131 | text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
132 | }
133 | 60% {
134 | text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
135 | }
136 | 65% {
137 | text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
138 | }
139 | 70% {
140 | text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
141 | }
142 | 75% {
143 | text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
144 | }
145 | 80% {
146 | text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
147 | }
148 | 85% {
149 | text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
150 | }
151 | 90% {
152 | text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
153 | }
154 | 95% {
155 | text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
156 | }
157 | 100% {
158 | text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
159 | }
160 | }
161 | .crt::after {
162 | content: " ";
163 | display: block;
164 | position: absolute;
165 | top: 0;
166 | left: 0;
167 | bottom: 0;
168 | right: 0;
169 | background: rgba(18, 16, 16, 0.1);
170 | opacity: 0;
171 | z-index: 2;
172 | pointer-events: none;
173 | animation: flicker 0.15s infinite;
174 | }
175 | .crt::before {
176 | content: " ";
177 | display: block;
178 | position: absolute;
179 | top: 0;
180 | left: 0;
181 | bottom: 0;
182 | right: 0;
183 | background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
184 | z-index: 2;
185 | background-size: 100% 2px, 3px 100%;
186 | pointer-events: none;
187 | }
188 | // .crt {
189 | // animation: textShadow 1.6s infinite;
190 | // }
191 |
192 | //decoupled the colour diffusion from the crt base class since it hurts the eyes depending on where it is.
193 | // add or remove as you wish from dives.
194 |
195 | .crtSpecial {
196 | animation: textShadow 1.6s infinite;
197 | }
--------------------------------------------------------------------------------
/client/components/InputField.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, useState, useEffect, useRef } from 'react';
2 | import Results from './Results.jsx'
3 |
4 |
5 | // calculatewpm = (typedCharacters/5) / endTime-startTime * 60seconds / endTime-startTime
6 |
7 | const InputField = props => {
8 | // I know I know. Why not use Redux? Because.
9 | //lots of hooks and lends to some back and forth messiness, good refactor opportunity probably?
10 | const [startTime, setStartTime] = useState(0);
11 | const [wordsPerMinute, setWordsPerMinute] = useState(0);
12 | const [completedWords, setCompletedWords] = useState([]);
13 | const [snippetSpace, setSnippetSpace] = useState([]);
14 | const [snippetProp, setSnippetProp] = useState('');
15 | const [countDown, setCountDown] = useState(5);
16 | const [raceStarted, setRaceStarted] = useState(false);
17 | const [activeCountDown, setActiveCountDown] = useState(false);
18 | const [wpmResults, setWpmResults] = useState({});
19 |
20 |
21 |
22 | // this is a custom made hook to allow the use of setInterval,
23 | // check the blog post of Dan Abramov about this for more info
24 | // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
25 | const useInterval = (callback, delay) => {
26 | const savedCallback = useRef();
27 |
28 | // Remember the latest callback.
29 | useEffect(() => {
30 | savedCallback.current = callback;
31 | }, [callback]);
32 |
33 | // Set up the interval for timer
34 | useEffect(() => {
35 | function tick() {
36 | savedCallback.current();
37 | }
38 | if (delay !== null) {
39 | let id = setInterval(tick, delay);
40 | return () => clearInterval(id);
41 | }
42 | }, [delay]);
43 | }
44 |
45 | // literally just resets the state after race (called at the end of checkForErrors)
46 | // Also sends data to the database (WPM and snippet ID)
47 | // Sent to userController
48 | const resetState = () => {
49 | console.log("this is our final", wordsPerMinute);
50 | setStartTime(0);
51 | setCompletedWords([]);
52 | setSnippetSpace([]);
53 | setSnippetProp('');
54 | setRaceStarted(false);
55 | setCountDown(5);
56 | props.startRace();
57 | props.giveCompletedWords([]);
58 | props.giveInputValue('');
59 | // console.log('You win!')
60 | document.getElementById('timer').innerHTML= 'FINISHED';
61 | // console.log("this is our full props.content", props.content)
62 | fetch(`/api/highScore`, {
63 | method: 'POST',
64 | headers: {
65 | 'Content-Type': 'application/json'
66 | },
67 | body: JSON.stringify({wordsPerMinute: wordsPerMinute, snippet_id: props.content.snippet_id})
68 | })
69 | .then((response) => response.json())
70 | .then((response) => {
71 | setWordsPerMinute(0)
72 | //response has keys message, wpm
73 | setWpmResults(response)
74 | })
75 | }
76 |
77 |
78 | // stop player from typing prior to start of race
79 | const isRaceOn = (e) =>{
80 | if(!raceStarted){
81 | e.target.value =''
82 | props.giveInputValue('')
83 | }
84 | }
85 |
86 |
87 |
88 | // this is needed to ensure that if the content of the code snippet changes that the appropriate props are updated.
89 | useEffect(() => {
90 | if (snippetSpace.length === 0 && props.content.content) {
91 | setSnippetSpace(space=>space=props.content.content.trim().split(/[ \t]+/));
92 | setSnippetProp(snip => snip = props.content.content );
93 | }
94 | })
95 |
96 |
97 | // Lets you change category after you already selected one and changes the state accordingly
98 | if (props.content.content) {
99 | // console.log('snippetSpace', snippetSpace)
100 | // console.log('split contents', props.content.content.split(' '))
101 | if (snippetProp != props.content.content) {
102 | setSnippetSpace(space=>space=props.content.content.trim().split(/[ \t]+/));
103 | setSnippetProp(snip => snip = props.content.content);
104 | }
105 | }
106 |
107 |
108 | const checkForErrors = (event) => {
109 | // we won't care about tabbing in our text or spaces, so we process the code snippet accordingly.
110 | // console.log("we are doing something")
111 | let snippetWords = snippetSpace;
112 | // console.log("Snippet words", snippetWords)
113 | let wholeWord = event.target.value;
114 | // console.log("wholeWord",wholeWord)
115 | let lastInput = wholeWord[wholeWord.length-1];
116 | // console.log('lastInput', lastInput)
117 |
118 | // currentWord = array of current snippet words at index 0
119 | const currentWord = snippetWords[0];
120 | // Gets rid of empty spaces from linebreaks, etc.
121 | if (currentWord === "" || currentWord === "\n") {
122 | let finishedWords = [...completedWords , currentWord];
123 | event.target.value = '';
124 | let remainingWords = [...snippetWords.slice(1)];
125 | setSnippetSpace(remainingWords);
126 | setCompletedWords(finishedWords);
127 | props.giveInputValue('');
128 | props.giveCompletedWords(finishedWords);
129 | }
130 | // console.log("current word",currentWord)
131 |
132 | ///////////////////////////
133 | // Actual functionality is here, checks currently typed word after pressing spacebar
134 | /////////////////////////////////////
135 |
136 | if (lastInput === ' ' || lastInput === "\n") {
137 | // console.log("We got a match")
138 | // console.log(wholeWord.trim(),"===", currentWord)
139 | // If the inputted word(trimmed of any spaces) matches the array of snippet words at index(trimmed of any spaces)
140 | if (wholeWord.trim() === currentWord.trim()) {
141 | // console.log("WE MATCHED OUR TRIM")
142 | // slice snippetwords by first index, assigned to remainingWords
143 | let remainingWords = [...snippetWords.slice(1)];
144 | // console.log(remainingWords)
145 | //If there are no more remaining words, call the function to resetState/end the game
146 | if (remainingWords.length === 0) {
147 | event.target.value = '';
148 | return resetState();
149 | }
150 | // updates finishedWords array to keep track of progress
151 | let finishedWords = [...completedWords , currentWord];
152 | // resets textArea
153 | event.target.value = '';
154 | // Reassign/update SnippetSpace and CompletedWords to keep track of progress
155 | setSnippetSpace(remainingWords);
156 | setCompletedWords(finishedWords);
157 | props.giveCompletedWords(finishedWords);
158 | props.giveInputValue('');
159 | }
160 | else {
161 | event.target.value = wholeWord.trim();
162 | }
163 | }
164 | else {
165 | props.giveInputValue(wholeWord);
166 | // update wholeWord
167 | //update lastInput
168 | }
169 |
170 | }
171 |
172 | //establishes start time upon termination of the starting clock
173 | const startRace = () => {
174 | if (startTime === 0) {
175 | setStartTime(prevTime => Date.now());
176 | console.log("GO! CURRENT TIME IS",startTime);
177 | }
178 | setRaceStarted(raceStarted => raceStarted = true);
179 | }
180 |
181 |
182 | //calculates approximate, live wpm
183 | const calculateWPM = (event) =>{
184 | if(raceStarted) {
185 | let inputLength = completedWords.reduce((acc,curr) => {
186 | acc = acc + curr.length;
187 | return acc;
188 | }, 0);
189 | let words = inputLength/5;
190 | let elapsedTime = Date.now() - startTime;
191 | let minute = 60000;
192 | let wpm = (words * minute) / elapsedTime;
193 | setWordsPerMinute((wpm.toFixed(2)));
194 | }
195 | }
196 |
197 | //turns on the "useinterval custom hook to begin the initial countdown"
198 | const beginCountdown = (e) => {
199 | if(raceStarted || activeCountDown) {
200 | return;
201 | }
202 | setActiveCountDown(active => active = true);
203 | props.startRace();
204 | }
205 | // Adds the countdown timer to the page
206 | useInterval(() => {
207 | if (activeCountDown) {
208 | document.getElementById('timer').innerHTML= `Starts in ... ${countDown}`;
209 | if (countDown > 0) {
210 | setCountDown(time => time-1);
211 | }
212 | else {
213 | document.getElementById('timer').innerHTML= 'GO!';
214 | setActiveCountDown(active => active = false);
215 | startRace();
216 | }
217 | }
218 |
219 | }, activeCountDown ? 1000 : null);
220 |
221 |
222 | // If there is a snippet, lets you actually type in the textarea, otherwise, it's just an empty box that does nothing onclick
223 | let textArea;
224 | if (snippetProp.length) {
225 | textArea = ()
229 | }
230 | else {
231 | textArea = ()
232 | }
233 |
234 | return (
235 |
236 |
237 | {textArea}
238 |
239 |
240 | {/* Current WPM */}
241 | current WPM: {wordsPerMinute}
242 |
243 |
244 | < Results finishedWPM = {wpmResults} content={ props.content } />
245 |
246 |
