loanr/typetime

⌨️ Vue.js typing game.

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:

• npm install to install dependencies
• npm run devor npm start to serve with hot reload at localhost:8080
• npm run test to test core app
• npm run build to build for production

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:

• 👩‍👧‍👧 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!

Typetime

typetime's Issues

Create button component

Share button component for labels

Used for game modifiers.

Manage modifier components communication

Toggled modifiers should reveal their state.

Ajax call CORS error

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://api.datamuse.com/words?ml=vache. Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « http://localhost:8080 ».

Seems 8080 is somewhere on prod...

Will require many tests and deployments...

Reorganise and spread ajax calls

Ajax calls should be done in advance except at launch (ajax during preparation screen).

Between each levels the query uses the last selected word and the query modifier if selected at game start.

Transition screen message between levels

Spinner gives you "discouragement".
"i've seen better"
"you're not exactly fast, are you?"
"I'm sure you're unable to read this phrase because blahblah"
Things like that, maybe.

Text shouldn't be under spinner.

Probability of uppercase in game rules

'start' button should change UI

Launched game should wait for the player to type word letters

Display combo and points bonus malus during game

Waiting screen at game launch to let user prepare

'starts' button should request a list of words via an api

Rematch button should reset game modifiers

Stylesheet in SCSS

Using webpack pre-processor to use SCSS

Trying gh-pages

Score bonus malus animation

When value change.

gh-page landing empty

Strange behaviour with gh-page default url.
Simple fix would be a redirection from https://loanr.github.io/Typetime-front/ to home router link.

Style enhancements

• word letter to type cursor blinks
• while modifier list is being created, v-else with four empty buttons
• stylize score screen

Handle error cases thrown from fetch

Animate landing title

Shuffle specific letters and organising js structure.

Game mode with accents as in `words?sp=*è*`

May be time to remake filter words.
I mean sorting by frequency feels less efficient for the user, length probably better.

Emergency word added should never be at the end of array.

There's still the case of the filter returning not any words.

Base stylesheet structure

Groundwork to make use of some scss variables.

Each level needs a countdown following specific rules

• Level 1: 5 words at 30 words per minute => 2 seconds per word - 10secs
• Level 2: 6 words at 31 words per minute => 1.935🍌 seconds per word - 11.61 secs
• etc.

2 seconds per word... level 1 is already hard for me, kind of unplayable game... we'll see.

Sound to signal new level launched

Fireball sound too small to be seen by webpack

Insure words to type count corresponds to level

If not, call for another query.

Reset h1 title on hover

End game screen shows difficulty in a phrase

'exclusive' checked modifiers should uncheck other 'exclusive' modifiers

Wrap (responsive) modifier buttons in a beautiful way

Empty modifiers while waiting request returns

Empty v-else?
or
update data in checkboxes?

Socials on score screen to publish score with pre-filled quote

Remedy bad letter animation

Test lead:
Double every letter, one which shows, and animate transition between show / !show with enter/leave vuejs.

Reorganise routes

Separation and devtool usage.

Modifiers implementation, random words, random query types, difficulty, etc.

Four random modifiers:
espagnol | random word | lexical field | rhyme | phonetic | french | ...

Four difficulties:

• economic - keep unspent time between words (no time bonus score)
• exponential - more and more unfrequent, long, special chars... (automatically better score, maybe more multiplier)
• slower - start with a smaller words per minute ratio (smaller multiplier)
• no break - no preparation time between levels (better level score multiplier)

=> modifiers are no longer 'exclusive' but can share a same value -> modifiers with same value are unchecked.

Migrate all Vue data in root of app under data dict

Sound implementation

• On each good word
• On type error
• During countdown
• At game over
• during transition / game start

Better transition between checkboxes description

Visual indicator near time end

Game rules from array to key-value min max

Vue router install and config

Refacto & architecture

Difficulty rules and handle occultist mode case

Difficulty depends on word selection.
Word frequency, length and special chars.

Smooth transition between screens landing - prepare - game AND about route

Ghpages deployment problem

Build done on docs folder.

Ghpage deployed search for repo_name/repo_name/static so need to change root. But when I do, get is done on [nothing]/static which is not good either because Ghpage is still on repo_name/

Need more info.

End game screen with score when user loses

Check if difficulty starts with vowel or counsel for "As a" or "As an"

Add description of modifiers and difficulties

Page 404

Score calculator according to letters, combo, level...

• List of letters according to frequency and difficulty to type gives base score for each typed letter.
• A certain number of correct typed letters gives you combo.
• Each level adds to the combo and give you a multiplier for base score letter.
• A typing error remove points WITH last multiplier THEN combo is reset.