Hearthstone deck ideas

Last updated: 19 May 2018, 22:51
Hearthstone deck ideas
React Bootstrap
Live demo

First of all, this is the source code for reference on GitHub.

Some history first..

A simpler version of this project started in the early 2016 with jQuery but in 2018 i decided to learn the new JavaScript features (ECMAScript 6) and the React library. So this project seemed a good way to learn and put my new skills into practice.

What does the app do?

Hearthstone is a digital card game created by Blizzard where you create a deck of 30 cards and battle against other players. The app creates a deck based on some parameters and luck. As you can guess the result is not as competitive as a deck made by an experienced player but it is probably more fun.

Technologies used in this project

The project as mentioned before uses the React library and more specifically it is bootstrapped with create-react-app which takes away most of the configuration pain (Webpack i am talking about you). For CSS it uses Twitter's Bootstrap 3 and a combination of CSS Grid and Flexbox. The animations are made with animejs and the "mana curve" chart is from Chartjs library. The images are lazy loaded and they are also loading progressively in order to give a visual feedback to the user that something is happening. This is something quite difficult to do in an app that doesn't reload the page because there is no onChange event for Images. This is also the second project i deployed (after this site) and started monitoring the traffic with Google Analytics.

The most interesting part of this project was the creation of the algorithm that creates the deck based on some specific parameters. Maybe an experienced JavaScript developer would find it problematic but it uses functional programming, high order functions and some complex logical expressions like the following:

 * This method gets a card array and an archetype priority and returns
 * the cards that satisfy the priority.
 * @param {*} cards
 * @param {*} priority
export const getCardsForPriority = (cards, priority) => {
  return cards.filter(
    card =>
      priority.cardType.includes(card.type) && 
        ? card.extra &&
          card.extra.includes(priority.cardTypeExtra) &&
          (priority.cardCost ? evaluateCardCost(priority.cardCost, card) : true)
        : priority.cardCost && evaluateCardCost(priority.cardCost, card))

Ok maybe this is too much but i find it sort of funny. Finally the data don't come from a back-end rest server (i find it too much for this app) but from a JSON file that is cached in Local Storage.