ionic2 example application

This is just a small game app built to show an example of a Ionic 2 mobile app.

How it works?

The game is pretty simple. 10 words are given. For each word you have 30 seconds to write a word that rhymes with it. At the end it will be shown the total points you have made.

Before starting the game you will have to choose between 4 different levels: Easy - Medium - Hard - Random.

For the level Random it will be taken a word with a Get request to the Wordnik API.

For the levels Easy - Medium - Hard there are pre-populated array with around 1k words. These array are pre-populated in this way: A loop that make a Get request for a random word to the Wordnik API. For each word a request is made to the Datamuse API to check the total amount of possible rhymes for the given word.

• 100+ possible rhymes: insert in the Easy array
• 40 - 100 possible rhymes: insert in the Medium array
• 10 - 40 possible rhymes: insert in the Hard array

App structure

There is one main component: the Home component.
From this component is possible to access two modals: InfoModal and GameModal.
All the Get requests (local and remote) are handled by the ApiProvider.

Topics

It's a rather small app. Yet it gave the possibility to handle several topics:

• Basic navigation - passing data to other components
• Use of services to deal with API or local requests and return a Promise
• Modals - Info and Game modals
• Animations - On the home element to make them fade in at the beginning and on the levels buttons
• Validation - The word inserted is required and must be a word (regex validation)
• Basic use of theming
• Css animation - the countdown clock
• Conditional class (active class on level buttons)
• Conditional style (on the countdown clock animation)
• Use of ion-spinner - before the random word is ready from the API
• Use of timeout - to remove error or success message after 3 seconds
• Basic game logic - handling seconds, words, points, levels
• Basic app styling - custom css to give some nice flat design

Demo

Here is a plunker of the app:

http://plnkr.co/edit/3MZ2pnG5z7zCfkQgPUpI?p=preview

Note: for simplicity sake the style has been put all in one file: app.css and has been slightly modified for the plunker.
Use Github as code reference.