react-chess-clock
v2.1.1
Published
React chess clock
Downloads
5
Maintainers
Readme
react-chess-clock
React chess clock hook provides players informations & clock status to let you build the chess clock interface you want.
Install
npm install --save react-chess-clock
Usage
import React from 'react'
import useChessClock from 'react-chess-clock'
const App = () => {
const initialTimer = 6000 // 10 minutes
const increment = 5 // optionnal
const [players, clock] = useChessClock(initialTimer, increment)
const {
white,
black
} = players;
const {
activePlayer,
isActive,
isPaused,
start,
toggle,
pause,
reset
} = clock;
return (
<div>
<p>Initial timer : {initialTimer}</p>
<p>Increment : {increment}</p>
<p>Active Player : {activePlayer ?? 'none'}</p>
<p>White player turns : {white.turn}</p>
<p>Black player turns : {black.turn}</p>
<p>White timer : {white.timer}</p>
<p>Black timer : {black.timer}</p>
<button onClick={() => toggle()}>Toggle</button>
<button onClick={() => reset()}>Reset Timer</button>
<button onClick={() => pause()}>Pause Timer</button>
<button onClick={() => start()}>Start</button>
</div>
)
}
export default App
Players
Players object provides you informations about white and black player
players = {
white: {
name,
isActive,
isPaused,
timer,
turn
},
black: {
name,
isActive,
isPaused,
timer,
turn
}
}
Clock
Clock object provides you informations about clock status & functions to interact with the clock
clock = {
//Informations
activePlayer
isActive
isPaused
//Functions
start
toggle
pause
reset
}
License
MIT © exrol