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:
; { <Checkerboard />}
Using the hook (only for the adventurous types):
; { const board handleMove handlePick playerTurn scoreboard rules = ; return <div> <div>`Turn: `</div> <div> <div>Score:</div> <div>`Player 1: | Player 2: `</div> </div> <div> Object </div> <div> <div>Rules:</div> <div> rules </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
- If a player's circle is full, it is their turn.
- Players get one move per turn.
- A checker is kinged when it reaches the opposite end of the board.
- Press and hold "m" to make multiple jumps.
- Any checker can make single or multiple jumps going forward.
- Only a king can make single or multiple jumps going forward and backward.
- When player jumps a checker, their score will increment by one.
- When player jumps a king, their score will increment by two.
- When player is kinged, their opponent's score will decrement by one.
License
MIT © jmpolitzer