LoanR / typetime

⌨️ Vue.js typing game.
https://loanr.github.io/typetime/
6 stars 2 forks source link
datamuse-api frontend-app gh-pages scss typing-game vuejs vuex

Typetime

Touch typing game

The game is playable here: Typetime

Game

Typetime is a touch typing game. You'll have to type words within a time limit. The more you type correctly, the better your score will get.

You can tweak your game with modifiers and difficulties on the home page. Modifiers will have an impact on the topic of your game and difficulties will simplify or complicate it and affect score.

The launched game will display words that you'll have to type before the timer reaches 0. By default, the game is cut into levels (with time break) asking for a certain amount of words to be typed. Each level will have more, longer and unfrequent words to type in a shorter amount of time but for a better score.

If the timer reaches 0, the game will display your score and let you send it on your social media.

Project

Realisation

Typetime is a front-only web app. It's deployed on Github Pages. The word selection is done through requests on the Datamuse API which is a great ressource for generating lists of related words.

Difficulty progression

By default, on the first level, 5 words need to be type at a ratio of 30 words per minute (namely 2 seconds per words, which is pretty short). Then on level 2, 6 words need to be type at a ratio of 31 words per minute, and so on. Words also gets longer and less used in language.

Modifiers and words

The Datamuse API is a great playground with many possibilities. On the landing page, you can refresh modifiers which can give your game a topic to follow. Words of each level are based on the previous one (through phonetic or semantic) giving your game a bit of consistency. Every response coming from the Datamuse API is going through a random selection module, ensuring freshness, and is also filtered to match the level requirements.

Development

Typetime uses the Vue.js framework with Vuex. Styles are in SCSS. For development purposes, ESLint is used with custom rules, and Mocha is used with Chai for testing.

Run locally

You can clone the project and:

Components

The components part of the app is used only for display purposes. The less domain logic in here the better. The idea was to make them as little as I could. Some datas that affects game logic and rules are stored in the Vuex store. Other datas that are only used for visuals and infos follow the normal usage of Vue.js. Specific styles are scoped on the component file.

Configuration

Every variables that affects game rules are in this folder. They set default game and are used as base values during a match to compute real values according to difficulty and progression. This also simplyfies basic rule changes and therefore configuration of all the game.

Core

All domain logic is in this folder. Functions are independent from the app. The app is using it and it needs it, not the opposite. This is the core of the game, therefore it is tested to ensure behaviour consistency.

Tests

Tests are here to check if core logic follows the awaited behaviour. It's built with Mocha and Chai. It can be launched with npm run test for all tests or with the option npm run test --recursive "./test/FILENAME.test.js" to test a specific part of core. They need to be launched on every modification and a new one must be created when a new function is added in the core.

Future iterations

A project never really ends and there are topics that need handling:

You can follow progression on the project page.


Have fun!

Typetime