inooid/react-redux-card-game

A web version of Blizzard's Hearthstone game built with React, Redux and ImmutableJS

react-redux-card-game's Issues

Add persistState enhancer from Redux DevTools

For a better developer experience we should add the persistState enhancer for our redux store. More about that here:
https://github.com/gaearon/redux-devtools/blob/master/docs/Walkthrough.md#storeconfigurestorejs

Remove pre build hook from webpack for ESLint

If ESLint finds an error, it should not break the build. It should just warn the developer.

Update React

Title says it all

Upgrade dependencies

Includes #34, but also other libraries that get hit by the Snyk vulnerability scan: https://snyk.io/org/inooid/project/inooid%2Freact-redux-card-game

Datastructure thoughts

Structure 1:

{
  board: {
    you: [null, null, null, null, null, null, null],
    opponent: [null, null, null, null, null, null, null]
  },
  player: {
    you: {
      name: 'Inooid'
      hero: 'Mage'
      health: 30,
      mana: 1,
      weapon: {
        portait: 'imgurl'
        damage: 2,
        durability: 8,
        callback: fn
      },
      heropower: {
        portait: '',
        mana: 2,
        fireOff: fn
      }
    }
    opponent: {
      name: 'Inooid'
      hero: 'Mage'
      health: 30,
      mana: 1,
      weapon: null,
      heropower: {
        portait: '',
        mana: 2,
        fireOff: fn
      }
    }
  },
  decks: {
    you: [],
    opponent: {
      count: 30
    }
  },
  hand: {
    you: [],
    opponent: []
  },
  history: [],
  turn:
}

Structure 2:

{
  you: {
    player: {
      name: 'Inooid'
      health: 30,
      mana: 1,
      armor: 0,
      damage: 0,
      weapon: null,
      hero: null
    },
    deck: [],
    hand: [],
    board: [null, null, null, null, null, null, null]
  },
  opponent: {
    player: {
      name: 'Kanopi',
      health: 30,
      mana: 1,
      weapon: null,
      hero: {
        heroClass: 'Warlock'
        portrait: ''
        power: {
          mana: 2,
          portrait: 'images/heroes/portraits/warlock.png',
          callback: function() {  }
        }
      }
      heropower: {
        mana: 2,
        portait:
      }
    }
  },
  turn: 'you'
}

My preference goes to structure 2, but if there's any other way of doing it, I am open to suggestions!

Make production webpack config

Don't forget to also remove Redux DevTools in production.

Files that have ESLint errors disables, because of this issue:

• containers/DevTools/DevTools.js
• redux/configureStore.js
• might be: webpack/server.js

Make boardSelector memoizable

As described in the redux recipe about using selectors we are using a selector in two different containers. This will make the selector not memoizable, so we might want to rewrite that into a function as described here: https://github.com/reactjs/redux/blob/master/docs/recipes/ComputingDerivedData.md#containersvisibletodolistjs-2

File: src/redux/modules/board.js

Add evalscript

How to add board mechanics?

First implementation (not looking at any code styling, just raw implementation):

class Board {
  constructor() {
    this.board = [null, null, null, 'card', null, null, null];
  }

  addCard(card, index) {
    let emptyIndex;
    const center = 3;

    if (this.board[center] === null) { return this.board[center] = card; }
    if (index < center) {
      emptyIndex = this._findEmptySpotIndex(2, true);
      if (emptyIndex !== -1) {
        return this.board[emptyIndex] = card;
      }
    }
    emptyIndex = this._findEmptySpotIndex(4);
    if (emptyIndex !== -1) {
      return this.board[emptyIndex] = card;
    }
  }

  _findEmptySpotIndex(start, backwards = false) {
    if (backwards) {
      for(let i = start; i >= 0; i--) {
        if (this.board[i] === null) {
          return i;
        }
      }
    } else {
      for(let i = start; i < 7; i++) {
        if (this.board[i] === null) {
          return i;
        }
      }
    }
    return -1;
  }
}

const board = new Board;
board.addCard('card2', 0);
board.board
=> [null, null, 'card2', 'card', null, null, null]

Remove ugly <div>'s from DropTargets and DragSources

Currently minions are both DropTarget's and DragSource's, because you can drag the minion, but also drag a minion on top of another minion to position them next to them. In order to fix some ugly styling issues, I found this useful issue that might clean up our code.

See: react-dnd/react-dnd#347

Use object spread operator instead of Object.assign

Thanks to @iljadaderko for pointing that out.

Upgrade dependencies

There's a lot of dependencies that are outdated. There are some easy updates and some harder ones.

Some problematic ones:

• Webpack
• Airbnb ESLint config

Setup Jest testing

Title says it all

Remove findDOMNode, because eventually gets deprecated

See: containers/BoardSideDropTarget/BoardSideDropTarget.js for an example on usage of

ReactDOM.findDOMNode()

Possible solution: react-dnd/react-dnd#329

Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

On Windows > npm install > npm start >

"error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style"

Solution:

react-redux-card-game (directory) > .eslintrc (file) > rules > add "linebreak-style": 0,

Update to react 15

This still needs to be done 👍

Remove hardcoded width and height in CustomDragLayer

Remove the hardcoded width and height that were added for debug purposes. Also it might be useful to split out the CustomDragLayer into multiple components.

See containers/CustomDragLayer/CustomDragLayer.js's render() function.

Add prettier

Title says it all

Hand hover-over visuals

When you mouse over a card, the graphics of the card expands and blocks mousing over the other cards. This gives a bad user experience.

Seems like there needs to be a fundamental separation of card graphics and mouseover collision.

Here is a short clip of how Hearthstone does it

You bashed your head against this problem a bit on stream, but decided to put it off for later, so I'm making an issue to remind you later.