44a67db9fc
### Description
This Pull Request introduces the functionality to download the result
screenshot directly as a PNG file, in addition to the existing option to
copy it to the clipboard.
This is achieved by:
1. Refactoring the screenshot logic in `test-ui.ts`.
2. Adding a new `Download screenshot` command to the result screen
command list.
**Changes Made:**
* **`frontend/src/ts/test/test-ui.ts`**:
* Created an internal function `generateScreenshotCanvas` that
encapsulates UI preparation, canvas generation with `html2canvas`, and
UI restoration.
* Modified the exported `screenshot` function to use
`generateScreenshotCanvas` and **only** handle copying the resulting
Blob to the clipboard (with the fallback of opening in a new tab).
* Added a new exported function `getScreenshotBlob` that uses
`generateScreenshotCanvas` and returns the resulting image Blob.
* **`frontend/src/ts/commandline/lists/result-screen.ts`**:
* Renamed the `saveScreenshot` command to `copyScreenshot` (updating
`id`, `icon`, and `alias`) to more accurately reflect its action. It
still uses `TestUI.screenshot()`.
* Added a new `downloadScreenshot` command (`id`, `display`, `icon`,
`alias`) that:
* Calls `TestUI.getScreenshotBlob()` to get the image data.
* If a Blob is obtained, creates a temporary object URL.
* Creates a temporary `<a>` element, sets the `href` to the object URL,
and the `download` attribute with a filename (e.g.,
`monkeytype-result-TIMESTAMP.png`).
* Simulates a click on the link to initiate the file download.
* Revokes the object URL.
* Displays success or error notifications.
### Checks
- [ ] Adding quotes?
- [ ] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [ ] Adding a language or a theme?
- [ ] If is a language, did you edit `_list.json`, `_groups.json` and
add `languages.json`?
- [ ] If is a theme, did you add the theme.css?
- Also please add a screenshot of the theme, it would be extra awesome
if you do so!
- [ ] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [ ] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title. <!-- Remember to add your
username here! -->
---------
Co-authored-by: fehmer <3728838+fehmer@users.noreply.github.com>
Co-authored-by: Miodec <jack@monkeytype.com>
|
||
|---|---|---|
| .github | ||
| .husky | ||
| backend | ||
| docker | ||
| docs | ||
| frontend | ||
| packages | ||
| .dockerignore | ||
| .editorconfig | ||
| .eslintignore | ||
| .gitignore | ||
| .npmrc | ||
| .nvmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| commitlint.config.cjs | ||
| LICENSE | ||
| monkeytype.code-workspace | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| turbo.json | ||
| vitest.config.js | ||
| vitest.workspace.json | ||
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.