mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-12-29 03:20:46 +08:00

The most customizable typing website with a minimalistic design and a ton of features. Test yourself in various modes, track your progress and improve your speed.

monkeytype starred-monkeytypegame-repo starred-repo typingtest

Find a file

Nad Alaba 9a0fee2052 impr(tape mode): add multiline support for tape mode (@NadAlaba, @miodec) (#5868 ) ![newTape](https://github.com/user-attachments/assets/207b2ac0-e6c2-404a-95b3-e7633a5c375e) *format:* file-name: line number on pr: `function name` - message 1. test-ui.ts: 448: `updateWordsInputPosition` & ui.ts: 109: `debouncedEvent` - calculate #wordsInput left position in tape mode same way when tapeMode is off (because tape mode can have zen mode and will accept RTL later. Also, now tape mode can have 3 lines, and #wordsInput needs to go down to the 2nd line). - call updateWordsInputPosition() on window resize which solves #6093 in a simpler way than `a2f6c1f`. 2. test-ui.ts: 551: `updateWordsWrapperHeight` - on zen mode make wrapper height 2 lines, and move conditions around. - on tape mode make wrapper height min(#words.Height, .word.Height * 3) because #words now have some padding to prevent hints from being cut off in 1-line tap mode. 3. test-ui.ts: 285: `updateActiveElement` - don't call scrollTape() on initial call of updateActiveElement() because it'll be called by other functions (i.e, showWords() and updateActiveWordLetters()). 4. test-ui.ts: 796: `updateActiveWordLetters` - move activeWord definition to the top of the function to return if it's not defined, and use type argument instead of "as". 5. test-ui.ts: 356: `getWordHTML` & test-ui.ts: 945: `updateActiveWordLetters` - add .beforeNewline and .afterNewline elements with each added .newline element. - the point of .afterNewline is to indent the next line, and the point of .beforeNewline is to act as a filler for the top line when the words of that line get removed in scrollTape() because they were overflown horizontally. 6. test.scss: 176+188+279: `#words`+`#words.tape` - change #words display from flex to block and make .word, .afterNewline and .beforeNewline elements display: inline-block (but keep .newline as block) in order to use white-space: nowrap, but still be able to break on demand with block elements .newline. - also, make default .word margin-bottom in tape mode 0.25em just like in non-tape mode, since they are now practically similar. - make the height of .beforeNewline identical to the height of .word so that when all top-line-words are removed, the user won't feel a vertical shift in lines. - use vertical-align: top in .word and .beforeNewline, because in lineJump(), we rely on their offsetTop to be the same if they are on the same line. - add padding-bottom: 0.5em to #words to prevent hints from being cut-off in the last line of test when showAllLines= on and in 1-line tape mode. 7. input-controller: 169: `backspaceToPrevious` - remove .beforeNewline and .afterNewline elements with .newline elements when backspacing to a higher line in zen mode. 8. test-ui.ts: 590: `updateWordsMargin` - when tape mode is turned on, first adjust the margins and then remove overflown elements (this is what passing true to scrollTape() does), and when it's turned off unset the margins of both #words and .afterNewline. 9. test-ui.ts: 1168: `removeElementsBeforeWord` - add a new helper function that removes all elements (except .smoothScroller), before (and including) the input element and returns the removed .word elements (removes .newline/.afterNewline/.beforeNewline/.word elements, but returns number of removed .words only) 10. test-ui.ts: 1191: `lineJump` - some refactoring: save HTMLelements in const instead of repeatedly querying the DOM. - allow lineJump() to be called in force (even when currentTestLine === 0), which is useful when changing Config.showAllLines to off (currentTestLine stays at zero in showAllLines=on), in order to lineJump and keep the active word on the 2nd line. - make the conditions to run lineJump() similar in tapeMode on and off (currentTestLine > 0, hideBound = currentTop - 10). - when determining the elements to hide, save the index of the last element to hide in a const and then remove it and everything before it when the animation completes. It is done like this instead of saving what needs to be hidden in an array, because .afterNewline elements have offsetTops that cannot be relied upon to determine if they need to be hidden or not. The new function removeElementsBeforeWord() does that. - last element to hide is now the last .word or .newline that is higher than the hideBound. - #words margin-top animation is done in its own queue so that we only .stop() margin-top animation without affecting margin-left animation. 11. test-logic.ts: 1434: `ConfigEvent.subscribe` - remove the restriction to allow changing showAllLines without restarting the test. 12. test-ui.ts: 492: `centerActiveLine` & ui.ts: 107: `debouncedEvent` - add a function centerActiveLine() that finds the top of the previous line and calls lineJump() passing that top to it. If the active word is on the 1st line it does nothing. - this is useful on window resize because it used to call lineJump() passing the top of the previous word to it, causing unnecessary line jumping if the active word was in the middle of the 2nd line (see gif below). - this is also useful when turning ShowAllLines off to hide (remove) all lines higher than the previous line. ![2025-04-06 18-18-34](https://github.com/user-attachments/assets/2a4a6842-1d61-44f2-a913-c0c6c7bbee27) 13. test-ui.ts: 190: `ConfigEvent.subscribe()` - call updateWordsWrapperHeight() on showAllLines change, and if the change was to 'off' call centerActiveLine() in order to keep the active word in the middle line. 14. test-ui.ts: 954: `getNlCharWidth` - add a new helper function that calculates the width of the nlChar letter that is in the last .word element before the input element, and check if the nlChar placeholder was incorrectly typed, if so return a width of 0. This last check is to minimize next line shifting behavior, see [video](https://discord.com/channels/713194177403420752/713196019206324306/1283880903382274119) 15. test-ui.ts: 978: `scrollTape` - remove leading .afterNewline elements. - get last element to loop over which is the 2nd .afterNewline after active word, or else the 1st one after active, or else stop at the active word. - in the main loop sum the widths of words before new line then add it to the left margin of the next .afterNewline, while also determining the widths of words before the active word (which will be in the new margin-left of #words), and determine what words have overflown the wrapper and need to be hidden. - if there is anything to remove, remove the overflown elements, and adjust margin-left of #words and .afterNewline by the width of what was removed. - calculate the width of the current word in tape=letter just like before then animate the new #words margin-left and .afterNewline elements' margin-left. - #words margin-left animation is done in its own queue so that when we use .stop() before the animation we'll only be stopping the margin-left animation and not the margin-top animation which is performed in lineJump(). 16. test-ui.ts: 492: `centerActiveLine` - scrollTape now awaits the promise centeringActiveLine which is always resolved except if showAllLines was on and tape mode was turned on through the commandline mid-test. In that case centeringActiveLine won't be resolved until lineJump completes its animation/style-change, so that scrollTape removing words won't conflict with lineJump removing words. Closes #3907 --------- Co-authored-by: Miodec <jack@monkeytype.com>		2025-04-13 21:59:43 +02:00
.github	chore(workflows): use correct name of action input (@NadAlaba) (#6378 )	2025-03-17 16:30:41 +01:00
.husky	chore: update master pre-push script	2024-07-25 11:13:25 +02:00
backend	impr: lazy load chartData on results (@fehmer) (#6428 )	2025-04-08 13:46:40 +02:00
docker	chore: update mongodb version to 5.0.13 (@fehmer) (#6364 )	2025-03-12 15:29:19 +01:00
docs	docs: add orderedByFrequency to the language adding guide	2025-03-18 13:54:09 +01:00
frontend	impr(tape mode): add multiline support for tape mode (@NadAlaba, @miodec) (#5868 )	2025-04-13 21:59:43 +02:00
packages	impr: lazy load chartData on results (@fehmer) (#6428 )	2025-04-08 13:46:40 +02:00
.dockerignore	chore: update backend out dir	2024-07-25 19:59:05 +02:00
.editorconfig	Add .editorconfig (#1976 )	2021-10-10 16:09:32 +01:00
.eslintignore	fix(docker): fix configuration endpoint, add configuration export (@fehmer) (#6317 )	2025-02-27 10:48:59 +01:00
.gitignore	chore: move vscode extension recommendations to workspace file (@fehmer) (#6310 )	2025-02-26 17:49:12 +01:00
.npmrc	chore: switch from npm to pnpm (#5690 )	2024-07-30 22:36:19 +02:00
.nvmrc	chore: upgrade node to 20.16.0 (#5688 )	2024-07-30 18:44:35 +02:00
.prettierignore	feat(languages): add portuguese 320k and 550k (@jeffersonjpr) (#5698 )	2024-08-02 14:13:31 +02:00
.prettierrc	TypeScript FrontEnd: Add Account Files (#2494 )	2022-02-19 17:44:27 +01:00
commitlint.config.cjs	chore: update file extension	2024-07-22 16:58:49 +02:00
LICENSE	Create LICENSE	2020-05-30 00:30:54 +01:00
monkeytype.code-workspace	chore: move vscode extension recommendations to workspace file (@fehmer) (#6310 )	2025-02-26 17:49:12 +01:00
package.json	chore: release v25.13.0	2025-03-26 23:04:54 +01:00
pnpm-lock.yaml	chore(deps-dev): bump vitest's vite fom 5.2.14 to 5.4.17 (@NadAlaba) (#6415 )	2025-04-07 16:10:07 +02:00
pnpm-workspace.yaml	chore: switch from npm to pnpm (#5690 )	2024-07-30 22:36:19 +02:00
README.md	chore: add more badges to readme (@fehmer) (#5744 )	2024-08-08 17:06:50 +02:00
turbo.json	fix(dev): mark dev tasks as persistent	2024-08-14 12:36:21 +02:00
vitest.config.js	chore: fix test coverage not working with vitest workspaces (@fehmer) (#5764 )	2024-08-11 17:50:26 +02:00
vitest.workspace.json	chore: add vitest workspace configuration file	2024-08-11 00:14:39 +02:00

README.md

About

Monkeytype is a minimalistic and customizable typing test. It features many test modes, an account system to save your typing speed history, and user-configurable features such as themes, sounds, a smooth caret, and more. Monkeytype attempts to emulate a natural typing experience during a typing test by unobtrusively presenting the text prompts and displaying typed characters in place, providing straightforward, real-time feedback on typos, speed, and accuracy.

Features

minimalistic design, with optional advertisements and focus mode while typing
type what you see, see what you type
live errors, wpm, and accuracy displays
a variety of test lengths and languages
punctuation and numbers modes
quotes
themes
smooth caret
account system
challenges and just-for-fun test modifiers
and much more

Discord bot

On the Monkeytype Discord server, we added a Discord bot to auto-assign optional roles based on typing performance and challenge completion. You can find its code over at https://github.com/monkeytypegame/monkeytype-bot.

Bug report or Feature request

If you encounter a bug or have a feature request, send us an email, create an issue, create a discussion thread, or join the Discord server.

Want to Contribute?

Refer to CONTRIBUTING.md.

Code of Conduct

Before contributing to this repository, please read the code of conduct.

Security

To report a security vulnerability, please refer to SECURITY.md.

Credits

Montydrei for the name suggestion.

Everyone who provided valuable feedback on the original Reddit post for the prototype of this website.

All of the contributors have helped implement various features, add themes, fix bugs, and more.

Support

If you wish to support further development and feel extra awesome, you can donate, become a Patron or buy a t-shirt.