react-checkers

React Tools for Building an Interactive Game of Checkers

Install

npm install --save react-checkers

Raison D'être

Because who hasn't always dreamed of building a game of checkers using a custom React hook?

Example

Using the component:

import { Checkerboard } from 'react-checkers';

function MyComponent() {
  <Checkerboard />
}

Using the hook (only for the adventurous types):

import { useCheckers } from 'react-checkers';

function MyComponent() {
  const { board, handleMove, handlePick, playerTurn, scoreboard, rules } = useCheckers();
  
  return (
    <div>
      <div>`Turn: ${playerTurn}`</div>
      <div>
        <div>Score:</div>
        <div>{`Player 1: ${scoreboard[1]} | Player 2: ${scoreboard[2]}`}</div>
      </div>
      <div>
        {Object.keys(board).map((row, j) => {
          return (
            <div key={j}>
              {Object.keys(board[row]).map((positionIndex, k) => {
                const square = board[row][positionIndex];
                const isEvenPosition = (square.position.x + 1 * square.position.y) % 2 === 0

                return (
                  <div onClick={() => (!square.occupiedBy ? handleMove(square) : null)}>
                    {square.occupiedBy !== null && isEvenPosition && (
                      <div onClick={() => handlePick(square)}>
                        {square.isKinged && 'K'}
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
          )
        })}
      </div>
      <div>
        <div>Rules:</div>
        <div>
          {rules.map((rule, i) => (
            <div key={i}>
              {i + 1}. {rule}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Usage

The Component

Adding a checkerboard to your app is a simple as dropping in the component as demonstrated in the example above. However, there are a handful of props that you can optionally provide to add some customization.

dimensions - Integer representing the number of squares that make of the length and width of the board. Defaults to 8.

showRules - Boolean to toggle the visibility of the rules. Defaults to true.

playerColors - Object with two properties - player1 & player2 - that hold the colors associated with each player. Each property should contain a string color value. Defaults to red and black/white.

styles - An object containing properties associated with different underlying components of <Checkerboard />. Each property is an object unless paired with function arguments. See the emotion documentation for information on how to define your styles.

• showRulesButton(rulesAreVisible: boolean)
• checkerboard
• checkerboardRow
• boardSquare(isEvenPosition: boolean)
• regularChecker(color: string)
• kingedChecker(color: string)
• playerScoreboard
• playerName(playerTurn: number, player: number, color: string)
• playerScore
• capturedChecker

The Hook

If you'd like to get very real and build your own checkerboard, the useCheckers hook provides a few helpers to get you started. Unlike the component, the hook only accepts a single, optional argument - dimensions.

board - An array of rows, each containing an array of squares.

handlePick - Used to select a checker to be moved.

handleMove - Used to select the destination of the checker that is picked. Pressing and holding "m" on the keyboard will allow to player to perform multiple jumps in a single move, provided the jumps are in accordance with the rules.

playerTurn - An integer representing whose turn it is to make a move.

scoreboard - A running tally of the current score. See the rules below to understand how scoring is determined.

rules - An array of the rules of the game.

Rules

1. If a player's circle is full, it is their turn.
2. Players get one move per turn.
3. A checker is kinged when it reaches the opposite end of the board.
4. Press and hold "m" to make multiple jumps.
5. Any checker can make single or multiple jumps going forward.
6. Only a king can make single or multiple jumps going forward and backward.
7. When player jumps a checker, their score will increment by one.
8. When player jumps a king, their score will increment by two.
9. When player is kinged, their opponent's score will decrement by one.

License

MIT © jmpolitzer