Welcome to Checkers-Game (react-only)
Setup:
Open your terminal, and run npm i checkers-game
In the component where you want the checkers board, add:
import { Board } from 'checkers-game';
Styling:
boardStyle
All styles will live in this object:
<Board boardStyle={{ text: 'no-text', boardTheme: 'b/w' }}/>
boardTheme
This option is quite simple, you can either have the default (wood) or "b/w" (black and white)
<Board boardStyle={{ boardTheme: 'b/w' }}/>
border
"border" holds two possible border customization options. Size and color.
<Board boardStyle={{ border: { borderColor: 'white', borderSize: '10px' } }}/>
If you only specify a color, size will default to 3. If you only specify a size, color will default to white.
boardTiles
boardTiles contains 4 seperate properties:
p1 - The color that lights up when selecting a player 1 piece.
p2 - The color that lights up when selecting a player 2 piece.
diag1 - The first diagonal.
diag2 - The second diagonal.
These can all be set with valid css colors.
<Board boardStyle={{ boardTiles: { p1: 'orange', p2: 'blue', diag1: 'blue', diag2: 'green'} }}/>
p1/p2
p1 & p2 are the player 1 and player 2 checkers piece colors respectively.
These colors have 3 options: black/brown/red
<Board boardStyle={{ p1: 'black', p2: 'brown' }}/>
Ensure to note the difference between p1/p2 in the boardTiles object and in the boardStyle object.
text
text is a pretty simple one. By default there is text that shows both players piece count and turn.
If you don't want this, simply use:
<Board boardStyle={{ text: 'no-text' }}/>
Upcoming features:
Custom theming- Websocket compatibility
- Ability to play Chess & Checkers by clicking a button to switch
Any questions feel free to reach out:
LinkedIn: https://www.linkedin.com/in/austin-westbury/ GitHub: https://www.github.com/TrueAndTrue/