salmannotkhan / typing-test Goto Github PK

View Code? Open in Web Editor NEW

177.0 4.0 55.0 3.05 MB

Typing test website build with React

Home Page: https://salmannotkhan.github.io/typing-test/

License: MIT License

HTML 4.37% SCSS 21.07% TypeScript 74.17% Shell 0.39%

reactjs react typing typescript typescript-react theme redux

typing-test's Introduction

typing-test

NOTE: This is my recreation of already existing monkeytype

This site is currently live: Visit Here

How to run locally

git clone https://github.com/salmannotkhan/typing-test.git
cd typing-test
npm install
npm start     # to start local server at `localhost:3000`
npm run build # to create production build run

Got new ideas?

Did you know? You can add your theme and wordlist ideas into typing-test.

Here is how you can do it:

To add new theme:

Add theme colors into src/stylesheets/themes.scss in following format:

.theme-name {
    --bg-color: background-color;
    --font-color: font-color;
    --hl-color: highlight-color;
    --fg-color: forground-color;
}

Note:
highlight-color is used for caret, wrong characters, timer, selected and onhover colors
forground-color is used for correctly typed characters
Using hex codes for colors is recommended

To add new wordlist:

Rename your wordlist as <wordlist-name>.json and place it inside src/wordlists.

Important:
The JSON file should only contain single array of words/sentences.

Adding entry to options

Add your theme/wordlist name into src/components/Header.tsx in options:

export const options: Options = {
	time: [15, 30, 45, 60, 120],
	theme: [
		"default",
		"mkbhd",
		"mocha",
		"coral",
		"ocean",
		"azure",
		"forest",
		"rose-milk",
		<theme-name>
	],
	type: ["words", "sentences", <wordlist-name>],
};

Important:
The following should be always same:

wordlist-name in Header.tsx and your wordlist file name

theme-name in themes.scss and Header.tsx

should always match otherwise themes won't work

Make a pull request
If it's good enough to merge, I'll merge it

typing-test's People

Contributors

Stargazers

Watchers

typing-test's Issues

Better results screen

The current result screen is so dull. It doesn't contain any visual elements. It would be great to have some visual touch on the result screen, like a graph or something.

I think chart.js is a good idea for doing it, but I'm open to discussing other possible solutions.

Hello contributors

This hacktoberfest, Let's add some more themes and wordlists to typing-test to make it more colorful and fun. Don't forget to include screenshots of the themes with your PRs.

Please note that this needs to be good quality contribution. Otherwise PRs won't merged.

[Bug] Offset of caret from the letter

Describe the bug

In the above screenshot, you can see that the caret(cursor) is a little farther away from where it needs to be. It often happens with longer words.

I have seen the problem when I had a much longer word. I didn't find a much longer word when reporting the issue so it is just a small demo.

To Reproduce
Steps to reproduce the behavior:

Go to the project or website
Select words, sentences, or anything that have a larger number of letters in a single word
Start typing letters for a longer word
See the error

Expected behavior
The caret should be at the beginning of the letter to be typed. It should be just after the typed letter and before the letter to be typed.

Desktop (please complete the following information):

OS: Windows
Browser: Chrome
Version: 107.0.5304.107

Suggested solution
Use a monospace font-family to solve this bug.

Error when typing using sentances mode.

When you select the sentence mode, it will randomly move you back to somewhere in the first line.

Convert to hook

Is your feature request related to a problem? Please describe.
My feature request is not related to a problem.

Describe the solution you'd like
I really like your project! I was wondering if there would be a possibility of converting the project to use hooks and reducer instead of class componentes.

Describe alternatives you've considered
I´ve already tryed to convert it but had no luck.

New modes

Is your feature request related to a problem? Please describe.
Currently, there are no choices if someone wants to type quotes or sentences

Describe the solution you'd like
It'll be great to have these new modes added

Go back to main page after typing test started

Hey @salmannotkhan

I think the one thing I face while using typing test was that I couldn't leave the test environment then after finishing my test I found out that if I press tab then it restarts app so that i can leave with testing environment by pressing tab but that is an ugly way to leave the test environment.

I think to adding something like button or X icon to leave test environment it would be a good UX improvement.

What do you think about it ?