├── .commitlintrc ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ └── node.js.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.png ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.tsx ├── components │ ├── CommandPallet.tsx │ ├── Footer.tsx │ ├── Header.tsx │ ├── Result.tsx │ └── Test.tsx ├── helpers │ ├── recordTest.ts │ ├── resetTest.ts │ └── startTimer.ts ├── index.scss ├── index.tsx ├── react-app-env.d.ts ├── setupTests.ts ├── store │ ├── actions.ts │ ├── reducer.ts │ └── store.ts ├── stylesheets │ ├── AnimatedTheme.scss │ ├── CommandPallet.module.scss │ ├── Footer.scss │ ├── Header.scss │ ├── Result.scss │ ├── Test.scss │ └── themes.scss └── wordlists │ ├── got.json │ ├── hard-words.json │ ├── javascript.json │ ├── numbers.json │ ├── python.json │ ├── sentences.json │ └── words.json └── tsconfig.json /.commitlintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "type-empty": [2, "never"], 4 | "subject-empty": [2, "never"], 5 | "type-enum": [ 2, "always", [ "build", "chore", "ci", "docs", "improvement", "feat", "fix", "perf", "refactor", "revert", "style", "test" ], ], 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "[Bug]" 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Press '....' key 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. Linux] 28 | - Browser [e.g. chrome, firefox] 29 | - Version [e.g. 22] 30 | 31 | **Additional context** 32 | Add any other context about the problem here. 33 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/node.js.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Deployment CI 5 | 6 | on: 7 | push: 8 | branches: [ main ] 9 | 10 | jobs: 11 | build: 12 | 13 | runs-on: ubuntu-latest 14 | 15 | strategy: 16 | matrix: 17 | node-version: [16.x] 18 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 19 | 20 | steps: 21 | - uses: actions/checkout@v2 22 | - name: Use Node.js ${{ matrix.node-version }} 23 | uses: actions/setup-node@v2 24 | with: 25 | node-version: ${{ matrix.node-version }} 26 | cache: 'npm' 27 | - run: npm ci 28 | - run: npm run build --if-present 29 | - name: GitHub Pages action 30 | uses: peaceiris/actions-gh-pages@v3.7.3 31 | with: 32 | github_token: ${{ secrets.GITHUB_TOKEN }} 33 | publish_dir: ./build 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx --no -- commitlint --edit 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx pretty-quick --staged 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "useTabs": false, 4 | "tabWidth": 4, 5 | "bracketSameLine": true 6 | } 7 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | tony903212@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Salman Shaikh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # typing-test 2 | 3 | ![Deployment CI](https://github.com/salmannotkhan/typing-test/actions/workflows/node.js.yml/badge.svg) 4 | 5 | ![typing-test(test)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dv44pfwm7qsud43xheei.png) 6 | 7 | NOTE: This is my recreation of already existing [monkeytype](https://monkeytype.com) 8 | 9 | This site is currently live: [Visit Here](https://salmannotkhan.github.io/typing-test) 10 | 11 | ## How to run locally 12 | 13 | ```zsh 14 | git clone https://github.com/salmannotkhan/typing-test.git 15 | cd typing-test 16 | npm install 17 | npm start # to start local server at `localhost:3000` 18 | npm run build # to create production build run 19 | ``` 20 | 21 | ## Got new ideas? 22 | 23 | Did you know? You can add your theme and wordlist ideas into typing-test. 24 | 25 | Here is how you can do it: 26 | 27 | ### **To add new theme:** 28 | 29 | - Add theme colors into `src/stylesheets/themes.scss` in following format: 30 | 31 | ```scss 32 | .theme-name { 33 | --bg-color: background-color; 34 | --font-color: font-color; 35 | --hl-color: highlight-color; 36 | --fg-color: forground-color; 37 | } 38 | ``` 39 | 40 | > **Note:** 41 | > `highlight-color` is used for caret, wrong characters, timer, selected and onhover colors 42 | > `forground-color` is used for correctly typed characters 43 | > _Using hex codes for colors is recommended_ 44 | 45 | ### **To add new wordlist:** 46 | 47 | - Rename your wordlist as `.json` and place it inside `src/wordlists`. 48 | 49 | > **Important:** 50 | > The JSON file should only contain single array of words/sentences. 51 | 52 | ### **Adding entry to options** 53 | 54 | 1. Add your theme/wordlist name into `src/components/Header.tsx` in options: 55 | 56 | ```tsx 57 | export const options: Options = { 58 | time: [15, 30, 45, 60, 120], 59 | theme: [ 60 | "default", 61 | "mkbhd", 62 | "mocha", 63 | "coral", 64 | "ocean", 65 | "azure", 66 | "forest", 67 | "rose-milk", 68 | 69 | ], 70 | type: ["words", "sentences", ], 71 | }; 72 | ``` 73 | 74 | > **Important:** 75 | > The following should be always same: 76 | > 77 | > - wordlist-name in `Header.tsx` and your wordlist file name 78 | > - theme-name in `themes.scss` and `Header.tsx` 79 | > 80 | > should always match otherwise themes won't work 81 | 82 | 2. Make a pull request 83 | 84 | 3. If it's good enough to merge, I'll merge it 85 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typing-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": ".", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.1", 8 | "@testing-library/react": "^12.1.2", 9 | "@testing-library/user-event": "^13.5.0", 10 | "@types/jest": "^27.4.0", 11 | "@types/node": "^17.0.10", 12 | "@types/react": "^17.0.38", 13 | "@types/react-dom": "^17.0.11", 14 | "@types/react-redux": "^7.1.22", 15 | "eslint-config-react-app": "^7.0.0", 16 | "react": "^17.0.2", 17 | "react-dom": "^17.0.2", 18 | "react-redux": "^7.2.6", 19 | "react-scripts": "^5.0.0", 20 | "redux": "^4.1.2", 21 | "sass": "^1.49.0", 22 | "sass-loader": "^12.4.0", 23 | "typescript": "^4.5.4", 24 | "web-vitals": "^2.1.3" 25 | }, 26 | "scripts": { 27 | "start": "react-scripts start", 28 | "build": "react-scripts build", 29 | "test": "react-scripts test", 30 | "eject": "react-scripts eject", 31 | "prepare": "husky install" 32 | }, 33 | "eslintConfig": { 34 | "extends": [ 35 | "react-app", 36 | "react-app/jest" 37 | ] 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "devDependencies": { 52 | "@commitlint/cli": "^17.1.2", 53 | "@commitlint/config-conventional": "^17.1.0", 54 | "husky": "^8.0.0", 55 | "prettier": "^2.7.1", 56 | "pretty-quick": "^3.1.3" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slmnsh/typing-test/5b95e9fbf88298a4976ea434cc64daf0191aada1/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 16 | 17 | 26 | Typing Test 27 | 28 | 29 | 30 |
31 | 41 | 42 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Typing Test", 3 | "name": "Typing test in React", 4 | "icons": [ 5 | { 6 | "src": "favicon.png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "favicon.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "favicon.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import Header from "components/Header"; 4 | import Test from "components/Test"; 5 | import Result from "components/Result"; 6 | import Footer from "components/Footer"; 7 | import { State } from "store/reducer"; 8 | import { setTimerId } from "store/actions"; 9 | import { recordTest } from "helpers/recordTest"; 10 | import "stylesheets/themes.scss"; 11 | import CommandPallet from "components/CommandPallet"; 12 | 13 | export default function App() { 14 | const { 15 | time: { timerId, timer }, 16 | word: { currWord, typedWord, activeWordRef }, 17 | } = useSelector((state: State) => state); 18 | const dispatch = useDispatch(); 19 | const [showPallet, setShowPallet] = useState(false); 20 | 21 | useEffect(() => { 22 | document.onkeydown = (e) => { 23 | if (e.ctrlKey && e.key === "k") { 24 | setShowPallet((s) => !s); 25 | e.preventDefault(); 26 | } else if ( 27 | e.key.length === 1 || 28 | e.key === "Backspace" || 29 | e.key === "Tab" 30 | ) { 31 | recordTest(e.key, e.ctrlKey); 32 | e.preventDefault(); 33 | } 34 | }; 35 | return () => { 36 | document.onkeydown = null; 37 | }; 38 | }, [dispatch]); 39 | 40 | useEffect(() => { 41 | let idx = typedWord.length - 1; 42 | const currWordEl = activeWordRef?.current!; 43 | if (currWordEl) { 44 | currWordEl.children[idx + 1].classList.add( 45 | currWord[idx] !== typedWord[idx] ? "wrong" : "right" 46 | ); 47 | } 48 | }, [currWord, typedWord, activeWordRef]); 49 | 50 | useEffect(() => { 51 | let idx = typedWord.length; 52 | const currWordEl = activeWordRef?.current!; 53 | if (currWordEl && idx < currWord.length) 54 | currWordEl.children[idx + 1].classList.remove("wrong", "right"); 55 | }, [currWord.length, typedWord, activeWordRef]); 56 | 57 | useEffect(() => { 58 | if (!timer && timerId) { 59 | clearInterval(timerId); 60 | dispatch(setTimerId(null)); 61 | } 62 | }, [dispatch, timer, timerId]); 63 | 64 | return ( 65 | <> 66 |
67 | {showPallet && } 68 | {timer ? : } 69 |