Krdytkyu

I came across problem 54 on projecteuler.net and decided to give it a go using ReactJS. I have had Angular experience prior to this. I wrote a couple of fully tested components. I think that they only have one purpose each, but they're still very big. I did my best code-wise because it's also a project where I want to show off the things I learned from a programming book about clean code. Any feedback would be greatly appreciated. I'll start with the first component I created and end it with the last.

Playing card

import React from 'react';

import propTypes from 'prop-types';

import { isNumeric } from '../../Helper';

import './Playing-Card.scss';



const cardSuites = {

  D: 'diamonds',

  S: 'spades',

  H: 'hearts',

  C: 'clubs',

};



const cardCourts = {

  K: 'king',

  J: 'jack',

  Q: 'queen',

  A: 'ace',

  T: '10',

};



const cardValues = {

  ace: '14',

  king: '13',

  queen: '12',

  jack: '11',

};



const PlayingCard = ({ cardSymbol }) => {

  const url = convertCardSymbolToUrl(cardSymbol);

  return <img alt="playing-card" className="playing-card" src={url} />;

};



PlayingCard.propTypes = { cardSymbol: propTypes.string.isRequired };



export const convertCardSymbolToUrl = cardSymbol => `/cards/${getCardCourt(cardSymbol)}_of_${getCardSuite(cardSymbol)}.svg`;



export const getCardSuite = cardSymbol => cardSuites[cardSymbol[1]];



export const getCardCourt = cardSymbol => {

  const courtSymbol = cardSymbol[0];

  if (isNumeric(courtSymbol)) {

    return String(courtSymbol);

  }

  return String(cardCourts[courtSymbol]);

};



export const getCardValue = cardCourt => {

  if (isNumeric(cardCourt)) {

    return Number(cardCourt);

  }

  return Number(cardValues[cardCourt]);

};



export default PlayingCard;

Hand

import React from 'react';

import propTypes from 'prop-types';

import { generateUniqueKeysForItems } from '../../Helper';

import PlayingCard, { getCardCourt, getCardValue, getCardSuite } from '../Playing-Card/Playing-Card';



const Hand = ({ cards }) => {

  let cardsArray = cards.split(' ');

  cardsArray = generateUniqueKeysForItems(cardsArray);

  return cardsArray.map(card => <PlayingCard key={card.id} cardSymbol={card.value} />);

};



Hand.propTypes = { cards: propTypes.string.isRequired };



export const calculateHandValue = cardsArray => {

  let cardsFrequency = calculateCardsFrequency(cardsArray);

  cardsFrequency = sortFrequencyDesc(cardsFrequency);

  const individualCardValues = calculateIndividualCardValues(cardsFrequency);

  let handValue = 9;

  const cardsCombinations = [

    hasRoyalFlush,

    hasStraightFlush,

    hasFourOfAKind,

    hasFullHouse,

    hasFlush,

    hasStraight,

    hasThreeOfAKind,

    hasTwoPairs,

    hasTwoOfAKind,

  ];



  for (let i = 0; i < cardsCombinations.length; i += 1) {

    const isCombinationValid = cardsCombinations[i];

    if (isCombinationValid(cardsArray)) {

      break;

    }

    handValue -= 1;

  }



  return [handValue, individualCardValues];

};



export const calculateIndividualCardValues = cardsFrequency =>

  Array.from(cardsFrequency.keys()).map(key => getCardValue(key));





export const hasRoyalFlush = cardsArray => {

  const cardCourtsRequired = ['10', 'jack', 'queen', 'king', 'ace'];

  let qualifies = true;



  if (!hasSameSuits(cardsArray)) {

    return false;

  }

  cardsArray.forEach(card => {

    const court = getCardCourt(card);

    if (cardCourtsRequired.indexOf(court) === -1) {

      qualifies = false;

    }

  });



  return qualifies;

};



export const hasStraightFlush = cardsArray =>

  hasSameSuits(cardsArray) && hasIncrementalCourts(cardsArray);



export const hasStraight = cardsArray => hasIncrementalCourts(cardsArray);

export const hasFlush = cardsArray => hasSameSuits(cardsArray);



export const hasFourOfAKind = cardsArray => hasXOfAKind(cardsArray, 4);

export const hasThreeOfAKind = cardsArray => hasXOfAKind(cardsArray, 3);

export const hasTwoOfAKind = cardsArray => hasXOfAKind(cardsArray, 2);



const hasXOfAKind = (cardsArray, x) => {

  const cardsFrequency = calculateCardsFrequency(cardsArray);

  const frequencyArray = Array.from(cardsFrequency.values());

  return frequencyArray.indexOf(x) !== -1;

};



export const hasTwoPairs = cardsArray => {

  const cardsFrequency = calculateCardsFrequency(cardsArray);

  const frequencyArray = Array.from(cardsFrequency.values());

  let numberOfPairs = 0;

  frequencyArray.forEach(frequencyNumber => {

    if (frequencyNumber === 2) {

      numberOfPairs += 1;

    }

  });

  return numberOfPairs === 2;

};



export const hasFullHouse = cardsArray => {

  const cardsFrequency = calculateCardsFrequency(cardsArray);

  const frequencyArray = Array.from(cardsFrequency.values());

  return frequencyArray.indexOf(3) !== -1 && frequencyArray.indexOf(2) !== -1;

};





export const hasSameSuits = cardsArray => {

  const hasEqualSuits = (card1, card2) => getCardSuite(card1) === getCardSuite(card2);



  for (let i = 1; i < cardsArray.length; i += 1) {

    const card = cardsArray[i];

    const previousCard = cardsArray[i - 1];



    if (!hasEqualSuits(card, previousCard)) {

      return false;

    }

  }

  return true;

};



export const hasIncrementalCourts = cardsArray => {

  const hasIncrementalCardValues = (card1, card2) =>

    getCardValue(getCardCourt(card1)) + 1 === getCardValue(getCardCourt(card2));



  const sortedCards = sortByCardValueAsc(cardsArray);

  for (let i = 1; i < sortedCards.length; i += 1) {

    const card = sortedCards[i];

    const previousCard = sortedCards[i - 1];

    if (!hasIncrementalCardValues(previousCard, card)) {

      return false;

    }

  }

  return true;

};



export const calculateCardsFrequency = cardsArray => {

  const cardFrequency = new Map();

  cardsArray.forEach(card => {

    const court = String(getCardCourt(card));

    if (cardFrequency.get(court) != null) {

      cardFrequency.set(court, cardFrequency.get(court) + 1);

    } else {

      cardFrequency.set(court, 1);

    }

  });

  return cardFrequency;

};



export const sortFrequencyDesc = cardsFrequency =>

  new Map([...cardsFrequency.entries()].sort((a, b) => {

    const aCardCourt = a[0];

    const aFrequency = a[1];

    const bCardCourt = b[0];

    const bFrequency = b[1];



    if (aFrequency < bFrequency) {

      return 1;

    }

    if (aFrequency === bFrequency && getCardValue(aCardCourt) < getCardValue(bCardCourt)) {

      return 1;

    }

    return -1;

  }));



export const sortByCardValueAsc = cardsArray => {

  cardsArray.sort((card1, card2) => {

    const court1 = getCardCourt(card1);

    const court2 = getCardCourt(card2);

    if (getCardValue(court1) > getCardValue(court2)) {

      return 1;

    }

    if (getCardValue(court1) < getCardValue(court2)) {

      return -1;

    }

    return 0;

  });

  return cardsArray;

};





export default Hand;

Round

import React from 'react';

import propTypes from 'prop-types';

import { connect } from 'react-redux';

import Hand, { calculateHandValue } from '../Hand/Hand';

import './Round.scss';



const Round = ({ cards, incrementScore }) => {

  const playerHands = splitCards(cards);

  if (playerHands[0] === '') {

    return <div />;

  }

  const winner = determineWinner(playerHands[0], playerHands[1]);

  incrementScore(`player${winner}`);

  return (

    <div className="round-root">

      <div className={(winner === 1) ? 'winner' : ''}>

        <Hand cards={playerHands[0]} />

      </div>

      <div className={(winner === 2) ? 'winner' : ''}>

        <Hand cards={playerHands[1]} />

      </div>

    </div>

  );

};



Round.propTypes = {

  cards: propTypes.string.isRequired,

  incrementScore: propTypes.func.isRequired,

};



const mapStateToProps = state => ({});



const mapDispatchToProps = dispatch => ({

  incrementScore: playerName => {

    dispatch({

      type: 'INCREMENT_SCORE',

      payload: {

        name: playerName,

      },

    });

  },

});



export const splitCards = cards => {

  const playerHands = ;

  playerHands.push(cards.substr(0, Math.ceil(cards.length / 2) - 1));

  playerHands.push(cards.substr(Math.ceil(cards.length / 2)));

  return playerHands;

};



export const determineWinner = (player1Cards, player2Cards) => {

  const p1HandValue = calculateHandValue(player1Cards.split(' '));

  const p2HandValue = calculateHandValue(player2Cards.split(' '));



  let winner = compareFirstTuples(p1HandValue, p2HandValue);



  if (winner === 0) {

    winner = compareSecondTuples(p1HandValue, p2HandValue);



    if (winner === 0) {

      throw Error('No winner could be determined');

    }

  }

  return winner;

};



export const compareFirstTuples = (p1HandValue, p2HandValue) => {

  if (p1HandValue[0] === p2HandValue[0]) { return 0; }

  return (p1HandValue[0] > p2HandValue[0]) ? 1 : 2;

};





export const compareSecondTuples = (p1HandValue, p2HandValue) => {

  const p1Tuple = p1HandValue[1];

  const p2Tuple = p2HandValue[1];

  let winner = 0;

  const minLength = Math.min(p1Tuple.length, p2Tuple.length);

  for (let i = 0; i < minLength; i += 1) {

    if (p1Tuple[i] > p2Tuple[i]) {

      winner = 1;

      break;

    }

    if (p1Tuple[i] < p2Tuple[i]) {

      winner = 2;

      break;

    }

  }

  return winner;

};



export default connect(mapStateToProps, mapDispatchToProps)(Round);

Game-Room

import React from 'react';

import propTypes from 'prop-types';

import Button from '@material-ui/core/Button';

import './Game-Room.scss';

import { connect } from 'react-redux';

import Game from '../Game/Game';

import WinnerDetails from '../Winner-Details/Winner-Details';





const possibleSuits = ['D', 'S', 'H', 'C'];

const possibleCourts = ['2', '3', '4', '5', '5', '6', '7', '8', '9', 'T', 'J', 'Q', 'K', 'A'];



const GameRoom = ({ setMatches, matches, players, resetScore }) => {

  const { player1, player2 } = players;

  let winner = null;

  if (player1.score > 0 || player1.score > 0) {

    winner = (player1.score > player2.score)

      ? player1 : player2;

  }



  const readTextFile = event => {

    const input = event.target;

    const reader = new FileReader();

    reader.onload = processGamesFile;

    reader.onload = () => {

      resetScore();

      setMatches(processGamesFile(reader.result));

    };

    reader.readAsText(input.files[0]);

  };



  const processGamesFile = gamesFile => {

    const retrievedMatches = gamesFile.split('n');

    retrievedMatches.pop();

    return retrievedMatches;

  };



  return (

    <div className="game-room-root">

      <Button variant="contained" color="primary" className="main-button left">

        <input type="file" onChange={event => { readTextFile(event); }} />

      </Button>

      <Button

        variant="contained"

        color="primary"

        onClick={() => {

          resetScore();

          setMatches(generateMatches(100));

        }}

        className="main-button right"

      >

        Generate Games

      </Button>

      <WinnerDetails winner={winner} />

      <Game matches={matches} />

    </div>

  );

};



GameRoom.propTypes = {

  setMatches: propTypes.func.isRequired,

  resetScore: propTypes.func.isRequired,

  players: propTypes.shape({}).isRequired,

  matches: propTypes.arrayOf(propTypes.string).isRequired,

};



const mapStateToProps = state => ({

  matches: state.gamesReducer,

  players: state.playerReducer,

});



const mapDispatchToProps = dispatch => ({

  setMatches: games => {

    dispatch({

      type: 'SET_GAMES',

      payload: games,

    });

  },

  resetScore: () => {

    dispatch({

      type: 'RESET_SCORE',

    });

  },

});





export const generateMatches = numberOfGames => {

  const games = ;

  for (let i = 0; i < numberOfGames; i += 1) {

    const round = generateRound();

    games.push(round);

  }

  return games;

};



export const generateRound = () => {

  let cards = '';

  let numberOfCards = 0;



  while (numberOfCards < 10) {

    const card = createRandomCard();

    if (cards.indexOf(card) === -1) {

      cards += `${card} `;

      numberOfCards += 1;

    }

  }



  cards = cards.slice(0, -1);

  return cards;

};



const createRandomCard = () => getRandomCourt() + getRandomSuit();



const getRandomSuit = () => possibleSuits[Math.floor(Math.random() * possibleSuits.length)];

const getRandomCourt = () => possibleCourts[Math.floor(Math.random() * possibleCourts.length)];





export default connect(mapStateToProps, mapDispatchToProps)(GameRoom);

Components Winner-detail and Game are emitted because they're small enough. Game is just a container for rounds.

I agree that specific questions we can answer would be helpful. That being said, a few comments:

• Some would disagree, but I'd separate the View/display code from the game code (model). You can build out all the mechanics of cards (GameRoom, Hand, PlayingCard, etc.) without any React code.
  There is a separation between these and it will keep things simpler. That way you can script tests that ensure all your game code is correct. Then, you can put them into React components and there will be very little logic needed within the React components.




• It seems a little odd that determineWinner throws an exception. I would probably just have it return null.




• It can also be simplified because 0 is falsey:

return compareFirstTuples(p1HandValue, p2HandValue) ||
compareSecondTuples(p1HandValue, p2HandValue) ||
null

• Some of the renaming of things throughout the code is a little hard to follow. I think individualCardValues becomes p1HandValue[1] and then p1Tuple. I'm not sure the abstraction to tuples really helps the code, since the code is very specific about what it's manipulating. They could just stay as "card values".