Touch typing game
The game is playable here: Typetime
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.
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.
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.
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.
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.
You can clone the project and:
npm installto install dependenciesnpm run devornpm startto serve with hot reload at localhost:8080npm run testto test core appnpm run buildto build for production
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.
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.
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 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.
A project never really ends and there are topics that need handling:
- 👩👧👧 composability: better usage of Vue.js composability, generisize and reuse possibility mindset
- 📜 documentation: not everyone seem to be ok with absolutely no comment policy...
- 🪲 CORS bug: handle dev & prod cookies
- ⏰ preparation - break time screen: real progress bar with a real meaning
- ✅ testing: upgrade with mocks, testing interface in browser, relative paths
- 🏆 endgame: more stats, balance score
- 📨 Datamuse API: use workers for requests
- 🇫🇷 i18n
- ⚙️ game rules: better manipulation of configuration files
- 📦 webpack: upgrade many dependencies starting with webpack 4
You can follow progression on the project page.
Have fun!