ninest / typer

⌨️ The 10-second typing game

⌨️ Typer

The 10-second typing game

🎮 How to play

1. Visit https://typerapp.now.sh/
2. To start a game, type "start"

You now have 10 seconds to type out all the words displayed. For every word you type correctly, your score increases, and you also get 1 extra second. Can you beat my highscore of 35? (you probably can)

🚀 Features

• 10 seconds to type
  • Get an extra second for each word typed (small change of getting 2 seconds)
  • Randomly get a password field to spice the game up (1/6 chance)
• Save your highscore locally

🛠 Build setup

Clone or fork the repository, then run the commands to start the development server:

npm i
npm run dev

To build the app, run

npm run build

Encryption

In src/scripts/, create keys.js with the following:

export const key = 'a secret key';

Here's one way to generate a random string:

# python
from base64 import b64encode
from os import urandom

random_bytes = urandom(32)
secret = b64encode(random_bytes).decode('utf-8')

print(secret)

Note that the encryption is done client-side!

Hosting

The game is hosted with Vercel. To host a debug version of the app, run

vc

To host the production version of the app, run

vc --prod

Firebase

Firebase and leaderboards have been removed. Please check the "firebase" branch for more details.

♥️ Support

If you liked this project, consider supporting by

• ⭐️ Starring the repository
• 🎒 Checking out my other projects
• ☕️ Buying me coffee

📜 License

MIT

typer's Issues

Add restart button

Add a restart button once the game starts

README.md minor issue: wrong filetype for keys

On line 77 of README.md I guess it should be keys.js instead of keys.html

Organize styles (buttons, inputs)

Currently buttons for login/logout, back button are over the place.

Move them to inputs.scss.

Indicator to show that time has increased

Users don't know that when you spell a word correctly you get an extra second (or get 2 seconds if you're lucky).

Add a green "+1" in the timer that displays for half a second to show this.

Use firebase.database.ServerValue.TIMESTAMP

Instead of Date

Add option to change username in leaderboards page

• button should only show if a current username has been set (in local storage)
• can use firebase firestore .set() method with merge

Add all time highscore to local storage

Since the score should get reset every 2 weeks, an all time high score should be kept