Building a small website around the Card Deck API
- The user can draw a card with a button
- The user has 4 ‘areas’ where to put the drawn card, one for each card type/suit: spades, hearts, clubs and diamond
- When the users draws the card he has 5 seconds to put it in the right ‘area’ (based on the type of the card) by clicking on the area
- If the user is able to place all the cards in the correct area he wins the game and a nice modal is shown
- If the user places a card in the wrong place OR the times runs out a sad modal is shown and the game resets
The application is created via Vue CLI, using Vue 3, Vuex and Axios for the API calls.
ESLint is used with error prevention only, linting on save.
Jest is used for unit testing.
As CSS "framework", I've choosen TailwindCSS as I wanted to try a framework agnostic approach (meaning no ready made components and styles) this time.. so the "design" is my own. :)
Assets are mainly optimized SVGs. The game logo has the pulilab black and red colors. :)
For the timer I used standard setInterval. I know it has it's defects but in the end I haven't implemented it this solution. It could be done in the next sprint. ;)
As it's a small project, I thought it's ok to leave all the API calls in the vuex store as actions.
Usually I'm using some kind of repository of my own to organize communication with the back-end.
I felt like making a lot of garbage on the card server by requesting new deck all the time, so the app saves the deck_id in localstore and using it if it's available.
I don't know if the card API server does it on purpose or not, but sometimes the "draw card request" gives a 500 error. If the same request is repeated, then usually gives back the expected result. If this request error is catched, the request is repeated untill the maxRequest (constant in vuex store) is reached (default is set to 5). If the maxRequest is reached, the application stops with Critical Error.
npm install
npm run serve
npm run build
npm run test:unit